@pagedotapp/page-tabbed-scroll-section
Version:
Tabbed scroll section component with multiple layout variants
2,199 lines (2,198 loc) • 511 kB
JSON
{
"name": "PageTabbedScrollSection",
"package": "@pagedotapp/page-tabbed-scroll-section",
"description": "A tabbed content section with smooth scrolling and multiple layout variants.",
"tags": [
"section",
"tabs",
"scroll",
"content",
"page-ui"
],
"attributes": [
{
"name": "tabs",
"type": "TabConfig[]",
"default": "[]",
"description": "Tab configuration with labels and content",
"required": true
},
{
"name": "variant",
"type": "'underline' | 'pills' | 'boxed'",
"default": "'underline'",
"description": "Visual style for tabs",
"required": false
},
{
"name": "defaultTab",
"type": "string",
"default": null,
"description": "ID of the initially active tab",
"required": false
},
{
"name": "scrollBehavior",
"type": "'smooth' | 'instant'",
"default": "'smooth'",
"description": "Scroll animation behavior",
"required": false
},
{
"name": "stickyTabs",
"type": "boolean",
"default": "false",
"description": "Keep tabs visible when scrolling",
"required": false
},
{
"name": "backgroundColor",
"type": "ResponsiveValue<string>",
"default": null,
"description": "Section background color",
"required": false
},
{
"name": "contentPadding",
"type": "ResponsiveValue<string>",
"default": null,
"description": "Padding around tab content",
"required": false
},
{
"name": "onTabChange",
"type": "(tabId: string) => void",
"default": null,
"description": "Callback when active tab changes",
"required": false
}
],
"usage": "Import and use to organize content into tabbed sections with smooth navigation.",
"example": "import { PageTabbedScrollSection } from '@pagedotapp/page-tabbed-scroll-section';\n\nfunction Example() {\n return (\n <PageTabbedScrollSection\n variant=\"pills\"\n tabs={[\n { id: 'overview', label: 'Overview', content: <OverviewContent /> },\n { id: 'features', label: 'Features', content: <FeaturesContent /> },\n { id: 'reviews', label: 'Reviews', content: <ReviewsContent /> }\n ]}\n stickyTabs={true}\n />\n );\n}",
"goodPractices": [
"Keep tab labels short and descriptive",
"Limit number of tabs for better mobile experience",
"Use consistent content structure across tabs",
"Consider lazy loading for heavy tab content",
"Ensure keyboard navigation works properly"
],
"badPractices": [
"Avoid too many tabs that require horizontal scrolling",
"Don't nest tabbed sections within tabs",
"Avoid auto-rotating tabs without user control",
"Don't hide critical content in non-default tabs"
],
"notes": "Provides smooth scrolling between tab content with accessibility features.",
"editorProps": {
"cards": {
"tabs": {
"component": "Array",
"title": "Tabs",
"itemSchema": {
"component": "Object",
"fields": {
"label": {
"component": "TextInput",
"title": "Label",
"required": true
},
"icon": {
"component": "IconPicker",
"title": "Icon"
},
"iconProps": {
"component": "IconPicker",
"title": "Icon Props"
},
"badge": {
"component": "NumberInput",
"title": "Badge"
},
"badgeProps": {
"component": "Object",
"title": "Badge Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"disabled": {
"component": "Toggle",
"title": "Disabled",
"default": false
},
"tabProps": {
"component": "Object",
"title": "Tab Props"
}
}
}
},
"searchInputProps": {
"component": "Object",
"title": "Search Input Props"
},
"activeTab": {
"component": "TextInput",
"title": "Active Tab"
},
"columns": {
"component": "TextInput",
"title": "Columns",
"responsive": true
},
"showSearch": {
"component": "Toggle",
"title": "Show Search",
"default": true
},
"searchPlaceholder": {
"component": "TextInput",
"title": "Search Placeholder"
},
"showCounts": {
"component": "Toggle",
"title": "Show Counts",
"default": true
},
"sortOptions": {
"component": "Array",
"title": "Sort Options",
"itemSchema": {
"component": "Object",
"fields": {
"label": {
"component": "TextInput",
"title": "Label",
"required": true
},
"field": {
"component": "TextInput",
"title": "Field",
"required": true
},
"direction": {
"component": "Select",
"title": "Direction",
"options": [
"asc",
"desc"
],
"default": "asc"
}
}
}
},
"defaultSort": {
"component": "TextInput",
"title": "Default Sort"
},
"stickyTabs": {
"component": "Toggle",
"title": "Sticky Tabs",
"default": false
},
"tabVariant": {
"component": "Select",
"title": "Tab Variant",
"options": [
"default",
"pills",
"underline",
"boxed"
],
"default": "default"
},
"tabAlignment": {
"component": "Select",
"title": "Tab Alignment",
"options": [
"start",
"center",
"end",
"stretch"
],
"default": "start"
},
"infiniteScroll": {
"component": "Toggle",
"title": "Infinite Scroll",
"default": false
},
"hasMore": {
"component": "Toggle",
"title": "Has More",
"default": false
},
"itemsPerPage": {
"component": "NumberInput",
"title": "Items Per Page"
},
"showPagination": {
"component": "Toggle",
"title": "Show Pagination",
"default": true
},
"animateOnScroll": {
"component": "Toggle",
"title": "Animate On Scroll",
"default": false
},
"animationType": {
"component": "Select",
"title": "Animation Type",
"options": [
"fade",
"slide",
"zoom",
"none"
],
"default": "fade"
},
"cardImageAspectRatio": {
"component": "ImagePicker",
"title": "Card Image Aspect Ratio",
"responsive": true
},
"cardTitleSize": {
"component": "Select",
"title": "Card Title Size",
"responsive": true,
"options": [
"xs",
"sm",
"md",
"lg",
"xl"
],
"default": "xs"
},
"cardDescriptionSize": {
"component": "Select",
"title": "Card Description Size",
"responsive": true,
"options": [
"xs",
"sm",
"md",
"lg"
],
"default": "xs"
},
"cardBorderRadius": {
"component": "NumberInput",
"title": "Card Border Radius",
"responsive": true
},
"cardShadow": {
"component": "Select",
"title": "Card Shadow",
"responsive": true,
"options": [
"none",
"sm",
"md",
"lg",
"xl"
],
"default": "none"
},
"items": {
"component": "Array",
"title": "Items",
"required": true,
"dynamic": true,
"itemSchema": {
"component": "Object",
"fields": {
"title": {
"component": "TextInput",
"title": "Title"
},
"titleProps": {
"component": "Object",
"title": "Title Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"subtitle": {
"component": "TextInput",
"title": "Subtitle"
},
"subtitleProps": {
"component": "Object",
"title": "Subtitle Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"descriptionProps": {
"component": "Object",
"title": "Description Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"image": {
"component": "ImagePicker",
"title": "Image"
},
"imageAlt": {
"component": "ImagePicker",
"title": "Image Alt"
},
"imageProps": {
"component": "ImagePicker",
"title": "Image Props"
},
"icon": {
"component": "IconPicker",
"title": "Icon"
},
"iconProps": {
"component": "IconPicker",
"title": "Icon Props"
},
"badge": {
"component": "TextInput",
"title": "Badge"
},
"badgeProps": {
"component": "Object",
"title": "Badge Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"category": {
"component": "TextInput",
"title": "Category"
},
"categoryProps": {
"component": "Object",
"title": "Category Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"tags": {
"component": "Array",
"title": "Tags",
"itemType": "TextInput"
},
"tagsProps": {
"component": "Object",
"title": "Tags Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},
"font": {
"component": "Select",
"title": "Font Family",
"options": [
{
"value": "default",
"label": "Default (System)"
},
{
"value": "inter",
"label": "Inter"
},
{
"value": "roboto",
"label": "Roboto"
},
{
"value": "open-sans",
"label": "Open Sans"
},
{
"value": "poppins",
"label": "Poppins"
},
{
"value": "montserrat",
"label": "Montserrat"
},
{
"value": "playfair-display",
"label": "Playfair Display"
},
{
"value": "raleway",
"label": "Raleway"
},
{
"value": "lato",
"label": "Lato"
},
{
"value": "nunito",
"label": "Nunito"
},
{
"value": "source-sans-pro",
"label": "Source Sans Pro"
}
],
"icon": "fonts"
},
"transform": {
"component": "Select",
"title": "Text Transform",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "uppercase",
"label": "Uppercase",
"icon": "alphabet-uppercase"
},
{
"value": "lowercase",
"label": "Lowercase",
"icon": "type"
},
{
"value": "capitalize",
"label": "Capitalize",
"icon": "type"
}
]
},
"decoration": {
"component": "Select",
"title": "Text Decoration",
"options": [
{
"value": "none",
"label": "None",
"icon": "dash"
},
{
"value": "underline",
"label": "Underline",
"icon": "type-underline"
},
{
"value": "line-through",
"label": "Line Through",
"icon": "type-strikethrough"
}
]
},
"italic": {
"component": "Toggle",
"title": "Italic",
"icon": "type-italic"
},
"monospace": {
"component": "Toggle",
"title": "Monospace",
"icon": "code"
},
"maxLines": {
"component": "NumberInput",
"title": "Max Lines"
}
}
},
"price": {
"component": "NumberInput",
"title": "Price"
},
"priceProps": {
"component": "Object",
"title": "Price Props",
"fields": {
"size": {
"component": "Select",
"title": "Text Size",
"options": [
{
"value": "xs",
"label": "Extra Small (12px)"
},
{
"value": "sm",
"label": "Small (14px)"
},
{
"value": "md",
"label": "Medium (16px)"
},
{
"value": "lg",
"label": "Large (18px)"
},
{
"value": "xl",
"label": "Extra Large (20px)"
},
{
"value": "2xl",
"label": "2X Large (24px)"
},
{
"value": "3xl",
"label": "3X Large (30px)"
},
{
"value": "4xl",
"label": "4X Large (36px)"
},
{
"value": "5xl",
"label": "5X Large (48px)"
},
{
"value": "6xl",
"label": "6X Large (60px)"
},
{
"value": "7xl",
"label": "7X Large (72px)"
},
{
"value": "8xl",
"label": "8X Large (96px)"
}
],
"icon": "fonts"
},
"weight": {
"component": "Select",
"title": "Font Weight",
"options": [
{
"value": "ultralight",
"label": "Ultralight (100)"
},
{
"value": "thin",
"label": "Thin (200)"
},
{
"value": "light",
"label": "Light (300)"
},
{
"value": "regular",
"label": "Regular (400)"
},
{
"value": "medium",
"label": "Medium (500)"
},
{
"value": "semibold",
"label": "Semibold (600)"
},
{
"value": "bold",
"label": "Bold (700)"
},
{
"value": "heavy",
"label": "Heavy (800)"
},
{
"value": "black",
"label": "Black (900)"
}
],
"icon": "type-bold"
},
"align": {
"component": "Select",
"title": "Text Alignment",
"options": [
{
"value": "left",
"label": "Left",
"icon": "text-left"
},
{
"value": "center",
"label": "Center",
"icon": "text-center"
},
{
"value": "right",
"label": "Right",
"icon": "text-right"
},
{
"value": "justify",
"label": "Justify",
"icon": "justify"
}
]
},
"color": {
"component": "ColorInput",
"title": "Color"
},