miladyai 2.0.0-alpha.27

package/dist/shared/ui-catalog-prompt.js

@@ -0,0 +1,728 @@
+//#region src/shared/ui-catalog-prompt.ts
+const COMPONENT_CATALOG = {
+	Stack: {
+		description: "Flexbox container for vertical or horizontal layouts",
+		props: {
+			direction: {
+				type: "\"vertical\" | \"horizontal\"",
+				description: "Layout direction. Defaults to vertical.",
+				required: false
+			},
+			gap: {
+				type: "\"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+				description: "Gap between children. Defaults to md.",
+				required: false
+			},
+			align: {
+				type: "\"start\" | \"center\" | \"end\" | \"stretch\"",
+				description: "Cross-axis alignment. Defaults to stretch.",
+				required: false
+			},
+			justify: {
+				type: "\"start\" | \"center\" | \"end\" | \"between\" | \"around\"",
+				description: "Main-axis alignment. Defaults to start.",
+				required: false
+			}
+		},
+		slots: ["default"]
+	},
+	Grid: {
+		description: "CSS grid container with configurable columns",
+		props: {
+			columns: {
+				type: "number",
+				description: "Number of grid columns. Defaults to 2.",
+				required: false
+			},
+			gap: {
+				type: "\"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
+				description: "Gap between grid cells. Defaults to md.",
+				required: false
+			}
+		},
+		slots: ["default"]
+	},
+	Card: {
+		description: "Bordered container with optional title and description",
+		props: {
+			title: {
+				type: "string",
+				description: "Card heading text",
+				required: false
+			},
+			description: {
+				type: "string",
+				description: "Card subtitle / description text",
+				required: false
+			},
+			maxWidth: {
+				type: "\"full\" | undefined",
+				description: "Set to \"full\" for full-width card",
+				required: false
+			}
+		},
+		slots: ["default"]
+	},
+	Separator: {
+		description: "Horizontal or vertical divider line",
+		props: { orientation: {
+			type: "\"horizontal\" | \"vertical\"",
+			description: "Divider direction. Defaults to horizontal.",
+			required: false
+		} }
+	},
+	Heading: {
+		description: "Heading text with configurable level",
+		props: {
+			text: {
+				type: "string",
+				description: "Heading content",
+				required: true
+			},
+			level: {
+				type: "\"h1\" | \"h2\" | \"h3\"",
+				description: "Heading level. Defaults to h2.",
+				required: false
+			}
+		}
+	},
+	Text: {
+		description: "Body text with variant styling",
+		props: {
+			text: {
+				type: "string",
+				description: "Text content",
+				required: true
+			},
+			variant: {
+				type: "\"body\" | \"caption\" | \"muted\" | \"lead\" | \"code\"",
+				description: "Text style variant. Defaults to body.",
+				required: false
+			}
+		}
+	},
+	Input: {
+		description: "Single-line text input with label and state binding",
+		props: {
+			label: {
+				type: "string",
+				description: "Input label displayed above the field",
+				required: false
+			},
+			type: {
+				type: "\"text\" | \"email\" | \"password\" | \"number\" | \"url\" | \"tel\"",
+				description: "HTML input type. Defaults to text.",
+				required: false
+			},
+			name: {
+				type: "string",
+				description: "Form field name attribute",
+				required: false
+			},
+			placeholder: {
+				type: "string",
+				description: "Placeholder text",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding",
+				required: false
+			}
+		}
+	},
+	Textarea: {
+		description: "Multi-line text input with configurable rows",
+		props: {
+			label: {
+				type: "string",
+				description: "Textarea label",
+				required: false
+			},
+			name: {
+				type: "string",
+				description: "Form field name attribute",
+				required: false
+			},
+			placeholder: {
+				type: "string",
+				description: "Placeholder text",
+				required: false
+			},
+			rows: {
+				type: "number",
+				description: "Number of visible rows. Defaults to 3.",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding",
+				required: false
+			}
+		}
+	},
+	Select: {
+		description: "Dropdown select with options list",
+		props: {
+			label: {
+				type: "string",
+				description: "Select label",
+				required: false
+			},
+			options: {
+				type: "Array<{ label: string; value: string }>",
+				description: "Array of selectable options",
+				required: true
+			},
+			placeholder: {
+				type: "string",
+				description: "Placeholder option text",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding",
+				required: false
+			}
+		}
+	},
+	Checkbox: {
+		description: "Single checkbox with label",
+		props: {
+			label: {
+				type: "string",
+				description: "Checkbox label text",
+				required: true
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding (boolean)",
+				required: false
+			}
+		}
+	},
+	Radio: {
+		description: "Radio button group",
+		props: {
+			label: {
+				type: "string",
+				description: "Group label text",
+				required: false
+			},
+			name: {
+				type: "string",
+				description: "Radio group name for mutual exclusion",
+				required: true
+			},
+			options: {
+				type: "Array<{ label: string; value: string }>",
+				description: "Array of radio options",
+				required: true
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding",
+				required: false
+			}
+		}
+	},
+	Switch: {
+		description: "Toggle switch for boolean values",
+		props: {
+			label: {
+				type: "string",
+				description: "Switch label text",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding (boolean)",
+				required: false
+			}
+		}
+	},
+	Slider: {
+		description: "Range slider input",
+		props: {
+			label: {
+				type: "string",
+				description: "Slider label text",
+				required: false
+			},
+			min: {
+				type: "number",
+				description: "Minimum value. Defaults to 0.",
+				required: false
+			},
+			max: {
+				type: "number",
+				description: "Maximum value. Defaults to 100.",
+				required: false
+			},
+			step: {
+				type: "number",
+				description: "Step increment. Defaults to 1.",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding (number)",
+				required: false
+			}
+		}
+	},
+	Toggle: {
+		description: "Pressable toggle button with on/off state",
+		props: {
+			label: {
+				type: "string",
+				description: "Toggle button label. Defaults to 'Toggle'.",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for two-way binding (boolean)",
+				required: false
+			}
+		}
+	},
+	ToggleGroup: {
+		description: "Group of toggle buttons for single or multiple selection",
+		props: {
+			items: {
+				type: "Array<{ label: string; value: string }>",
+				description: "Selectable toggle items",
+				required: true
+			},
+			type: {
+				type: "\"single\" | \"multiple\"",
+				description: "Selection mode. Single selects one value, multiple allows many.",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state. String for single, string[] for multiple.",
+				required: false
+			}
+		}
+	},
+	ButtonGroup: {
+		description: "Row of mutually exclusive buttons (single selection)",
+		props: {
+			buttons: {
+				type: "Array<{ label: string; value: string }>",
+				description: "Button options",
+				required: true
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for the selected value",
+				required: false
+			}
+		}
+	},
+	Table: {
+		description: "Data table with column headers and rows",
+		props: {
+			columns: {
+				type: "string[]",
+				description: "Array of column header names",
+				required: true
+			},
+			rows: {
+				type: "string[][]",
+				description: "2D array of row cell values",
+				required: true
+			},
+			caption: {
+				type: "string",
+				description: "Table caption displayed above",
+				required: false
+			}
+		}
+	},
+	Carousel: {
+		description: "Paginated carousel that shows one item at a time",
+		props: { items: {
+			type: "Array<{ title: string; description: string }>",
+			description: "Carousel slide items",
+			required: true
+		} }
+	},
+	Badge: {
+		description: "Small inline label / tag",
+		props: {
+			text: {
+				type: "string",
+				description: "Badge text content",
+				required: true
+			},
+			variant: {
+				type: "\"default\" | \"success\" | \"warning\" | \"error\" | \"info\"",
+				description: "Color variant. Defaults to default.",
+				required: false
+			}
+		}
+	},
+	Avatar: {
+		description: "Circular avatar showing initials derived from a name",
+		props: {
+			name: {
+				type: "string",
+				description: "Full name used to generate initials",
+				required: true
+			},
+			size: {
+				type: "\"sm\" | \"md\" | \"lg\"",
+				description: "Avatar size. Defaults to md.",
+				required: false
+			}
+		}
+	},
+	Image: {
+		description: "Image element with fallback placeholder",
+		props: {
+			src: {
+				type: "string",
+				description: "Image URL",
+				required: false
+			},
+			alt: {
+				type: "string",
+				description: "Alt text for accessibility",
+				required: false
+			},
+			width: {
+				type: "number",
+				description: "Width in pixels",
+				required: false
+			},
+			height: {
+				type: "number",
+				description: "Height in pixels",
+				required: false
+			}
+		}
+	},
+	Alert: {
+		description: "Alert banner with type-based styling",
+		props: {
+			type: {
+				type: "\"info\" | \"success\" | \"warning\" | \"error\"",
+				description: "Alert severity. Defaults to info.",
+				required: false
+			},
+			title: {
+				type: "string",
+				description: "Alert title",
+				required: false
+			},
+			message: {
+				type: "string",
+				description: "Alert body text",
+				required: false
+			}
+		}
+	},
+	Progress: {
+		description: "Horizontal progress bar",
+		props: {
+			value: {
+				type: "number",
+				description: "Current progress value",
+				required: true
+			},
+			max: {
+				type: "number",
+				description: "Maximum value. Defaults to 100.",
+				required: false
+			},
+			label: {
+				type: "string",
+				description: "Label displayed above the bar",
+				required: false
+			}
+		}
+	},
+	Rating: {
+		description: "Star rating display",
+		props: {
+			value: {
+				type: "number",
+				description: "Number of filled stars",
+				required: true
+			},
+			max: {
+				type: "number",
+				description: "Total number of stars. Defaults to 5.",
+				required: false
+			},
+			label: {
+				type: "string",
+				description: "Label displayed above the stars",
+				required: false
+			}
+		}
+	},
+	Skeleton: {
+		description: "Loading placeholder with pulse animation",
+		props: {
+			width: {
+				type: "string",
+				description: "CSS width value. Defaults to 100%.",
+				required: false
+			},
+			height: {
+				type: "string",
+				description: "CSS height value. Defaults to 20px.",
+				required: false
+			},
+			rounded: {
+				type: "boolean",
+				description: "Apply rounded corners",
+				required: false
+			}
+		}
+	},
+	Spinner: {
+		description: "Spinning loading indicator",
+		props: {
+			size: {
+				type: "\"sm\" | \"md\" | \"lg\"",
+				description: "Spinner size. Defaults to md.",
+				required: false
+			},
+			label: {
+				type: "string",
+				description: "Loading text displayed beside the spinner",
+				required: false
+			}
+		}
+	},
+	Button: {
+		description: "Clickable button with variant styling",
+		props: {
+			label: {
+				type: "string",
+				description: "Button text. Defaults to 'Button'.",
+				required: false
+			},
+			variant: {
+				type: "\"primary\" | \"secondary\" | \"danger\" | \"ghost\"",
+				description: "Button style variant. Defaults to primary.",
+				required: false
+			},
+			disabled: {
+				type: "boolean",
+				description: "Disable the button",
+				required: false
+			}
+		}
+	},
+	Link: {
+		description: "Anchor link, optionally opening in a new tab",
+		props: {
+			label: {
+				type: "string",
+				description: "Link text",
+				required: false
+			},
+			href: {
+				type: "string",
+				description: "URL target",
+				required: true
+			},
+			external: {
+				type: "boolean",
+				description: "Open in new tab with noopener",
+				required: false
+			}
+		}
+	},
+	DropdownMenu: {
+		description: "Button that reveals a dropdown list of actions",
+		props: {
+			label: {
+				type: "string",
+				description: "Trigger button text. Defaults to 'Menu'.",
+				required: false
+			},
+			items: {
+				type: "Array<{ label: string; value: string }>",
+				description: "Menu items. Selection fires a 'menuSelect' action.",
+				required: true
+			}
+		}
+	},
+	Tabs: {
+		description: "Tabbed navigation with inline text content per tab",
+		props: {
+			tabs: {
+				type: "Array<{ label: string; value: string; content: string }>",
+				description: "Tab definitions with labels and text content",
+				required: true
+			},
+			defaultValue: {
+				type: "string",
+				description: "Initially active tab value",
+				required: false
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for the active tab value",
+				required: false
+			}
+		}
+	},
+	Pagination: {
+		description: "Page navigation with numbered buttons",
+		props: {
+			totalPages: {
+				type: "number",
+				description: "Total number of pages",
+				required: true
+			},
+			statePath: {
+				type: "string",
+				description: "Dot-path into spec state for the current page (number)",
+				required: false
+			}
+		}
+	},
+	BarGraph: {
+		description: "Vertical bar chart",
+		props: {
+			data: {
+				type: "Array<{ label: string; value: number }>",
+				description: "Data points for the bars",
+				required: true
+			},
+			title: {
+				type: "string",
+				description: "Chart title",
+				required: false
+			}
+		}
+	},
+	LineGraph: {
+		description: "SVG line chart",
+		props: {
+			data: {
+				type: "Array<{ label: string; value: number }>",
+				description: "Data points for the line",
+				required: true
+			},
+			title: {
+				type: "string",
+				description: "Chart title",
+				required: false
+			}
+		}
+	},
+	Tooltip: {
+		description: "Hover tooltip showing extra information",
+		props: {
+			text: {
+				type: "string",
+				description: "Trigger text that the user hovers. Defaults to 'Hover'.",
+				required: false
+			},
+			content: {
+				type: "string",
+				description: "Tooltip popup content",
+				required: true
+			}
+		}
+	},
+	Popover: {
+		description: "Click-triggered popup with content",
+		props: {
+			trigger: {
+				type: "string",
+				description: "Trigger text. Defaults to 'Click'.",
+				required: false
+			},
+			content: {
+				type: "string",
+				description: "Popover body content",
+				required: true
+			}
+		}
+	},
+	Collapsible: {
+		description: "Expandable/collapsible content section",
+		props: {
+			title: {
+				type: "string",
+				description: "Header text. Defaults to 'Collapsible'.",
+				required: false
+			},
+			defaultOpen: {
+				type: "boolean",
+				description: "Start in open state",
+				required: false
+			}
+		},
+		slots: ["default"]
+	},
+	Accordion: {
+		description: "Multi-section accordion with expand/collapse",
+		props: {
+			items: {
+				type: "Array<{ title: string; content: string }>",
+				description: "Accordion sections",
+				required: true
+			},
+			type: {
+				type: "\"single\" | \"multiple\"",
+				description: "Whether only one section can be open at a time",
+				required: false
+			}
+		}
+	},
+	Dialog: {
+		description: "Modal dialog controlled by a state path",
+		props: {
+			title: {
+				type: "string",
+				description: "Dialog title",
+				required: false
+			},
+			description: {
+				type: "string",
+				description: "Dialog description text",
+				required: false
+			},
+			openPath: {
+				type: "string",
+				description: "Dot-path into spec state (boolean) that controls open/close",
+				required: true
+			}
+		},
+		slots: ["default"]
+	},
+	Drawer: {
+		description: "Bottom drawer overlay controlled by a state path",
+		props: {
+			title: {
+				type: "string",
+				description: "Drawer title",
+				required: false
+			},
+			description: {
+				type: "string",
+				description: "Drawer description text",
+				required: false
+			},
+			openPath: {
+				type: "string",
+				description: "Dot-path into spec state (boolean) that controls open/close",
+				required: true
+			}
+		},
+		slots: ["default"]
+	}
+};
+
+//#endregion
+export { COMPONENT_CATALOG };