@ramme-io/ui 1.1.4 → 1.1.5

package/dist/index.es.js

@@ -163017,18 +163017,2180 @@ const BW = ({ label: t, to: e, isCurrent: r, className: i, icon: n }) => {
   button: zh,
   Icon: fn,
   icon: fn
-}, FRt = [
+}, FRt = {
+  components: [
+    {
+      id: "suggestion",
+      name: "Suggestion",
+      version: "1.0.0",
+      description: "A small, pill-shaped button that offers a quick, suggested reply or follow-up question to the user.",
+      tags: [
+        "ui",
+        "ai",
+        "button",
+        "suggestion",
+        "actions"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "onClick",
+          type: "() => void",
+          description: "Function to call when the suggestion is clicked."
+        }
+      ],
+      importPath: "./blocks/ai/Actions",
+      filePath: "src/blocks/ai/Actions.tsx"
+    },
+    {
+      id: "actions",
+      name: "Actions",
+      version: "1.0.4",
+      description: "A container for displaying a list of suggested, clickable actions that the user can take next.",
+      tags: [
+        "ui",
+        "ai",
+        "layout",
+        "actions",
+        "suggestion"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./blocks/ai/Actions",
+      filePath: "src/blocks/ai/Actions.tsx"
+    },
+    {
+      id: "chat-fab",
+      name: "ChatFAB",
+      version: "1.0.0",
+      description: "A floating action button (FAB) specifically for opening a chat interface, with a tooltip and icon.",
+      tags: [
+        "ui",
+        "button",
+        "chat",
+        "fab",
+        "ai"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "onClick",
+          type: "() => void",
+          description: "Function to call when the button is clicked."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        },
+        {
+          name: "tooltipContent",
+          type: "string",
+          description: "The text content for the button's tooltip.",
+          default: "'Open AI Assistant'"
+        }
+      ],
+      importPath: "./blocks/ai/ChatFAB",
+      filePath: "src/blocks/ai/ChatFAB.tsx"
+    },
+    {
+      id: "conversation",
+      name: "Conversation",
+      version: "1.0.0",
+      description: "A container component that holds a series of Message components and manages the layout and scrolling of the chat history.",
+      tags: [
+        "ui",
+        "ai",
+        "layout",
+        "chat"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./blocks/ai/Conversation",
+      filePath: "src/blocks/ai/Conversation.tsx"
+    },
+    {
+      id: "loader",
+      name: "Loader",
+      version: "1.0.0",
+      description: "A visual indicator used within an AI Message to show that a response is being generated.",
+      tags: [
+        "ui",
+        "ai",
+        "feedback",
+        "loading"
+      ],
+      category: "ai",
+      props: [],
+      importPath: "./blocks/ai/Loader",
+      filePath: "src/blocks/ai/Loader.tsx"
+    },
+    {
+      id: "message",
+      name: "Message",
+      version: "1.0.0",
+      description: "Displays a single message in a conversation, including an avatar, author, content, and optional suggestions.",
+      tags: [
+        "ui",
+        "ai",
+        "chat",
+        "display"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "author",
+          type: "string",
+          description: `"The name of the message author (e.g., 'User' or 'AI Assistant')."`
+        },
+        {
+          name: "content",
+          type: "string",
+          description: "The text content of the message."
+        },
+        {
+          name: "isUser",
+          type: "boolean",
+          description: "If true, styles the message as from the user."
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "If true, displays the Loader component instead of content."
+        },
+        {
+          name: "suggestions",
+          type: "string[]",
+          description: "An array of strings to display as suggested actions."
+        },
+        {
+          name: "onSuggestionClick",
+          type: "(suggestion: string) => void",
+          description: "Callback for when a suggestion is clicked."
+        }
+      ],
+      importPath: "./blocks/ai/Message",
+      filePath: "src/blocks/ai/Message.tsx"
+    },
+    {
+      id: "prompt-input",
+      name: "PromptInput",
+      version: "1.0.0",
+      description: "A specialized input field for users to type and submit prompts, including a send button.",
+      tags: [
+        "ui",
+        "ai",
+        "form",
+        "input",
+        "chat"
+      ],
+      category: "ai",
+      props: [
+        {
+          name: "value",
+          type: "string",
+          description: "The current value of the input field."
+        },
+        {
+          name: "onChange",
+          type: "(e: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback fired when the input value changes."
+        },
+        {
+          name: "onSubmit",
+          type: "(e: React.FormEvent) => void",
+          description: "Callback fired when the form is submitted."
+        },
+        {
+          name: "placeholder",
+          type: "string",
+          description: "Placeholder text for the input field.",
+          default: '"Type your message..."'
+        }
+      ],
+      importPath: "./blocks/ai/PromptInput",
+      filePath: "src/blocks/ai/PromptInput.tsx"
+    },
+    {
+      id: "activity-feed",
+      name: "ActivityFeed",
+      version: "1.0.0",
+      description: "Displays a chronological list of recent activities, typically with a timeline indicator.",
+      tags: [
+        "templates",
+        "patterns",
+        "feed",
+        "timeline",
+        "data-display"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "items",
+          type: "ActivityItemData[]",
+          description: "An array of activity items to display in the feed."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title for the activity feed card.",
+          default: '"Activity Feed"'
+        },
+        {
+          name: "changelogUrl",
+          type: "string",
+          description: 'An optional URL for a "View changelog" link.'
+        }
+      ],
+      importPath: "./components/data-display/ActivityFeed",
+      filePath: "src/components/data-display/ActivityFeed.tsx"
+    },
+    {
+      id: "bar-chart",
+      name: "BarChart",
+      version: "1.0.0",
+      description: "A theme-aware bar chart component powered by Recharts, for comparing categorical data.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [
+        {
+          name: "data",
+          type: "any[]",
+          description: "The dataset for the chart. Each object in the array represents a category."
+        },
+        {
+          name: "dataKeyX",
+          type: "string",
+          description: "The key from your data objects to be used for the X-axis (e.g., 'name', 'category')."
+        },
+        {
+          name: "barKeys",
+          type: "{ key: string; color: string }[]",
+          description: "An array of objects, each specifying a data key for a bar series and its color (e.g., `[{ key: 'pv', color: '#8884d8' }]`)."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title to display above the chart."
+        }
+      ],
+      importPath: "./components/data-display/BarChart",
+      filePath: "src/components/data-display/BarChart.tsx"
+    },
+    {
+      id: "chart-with-table",
+      name: "ChartWithTable",
+      version: "1.0.0",
+      description: "A wrapper component that combines a chart with an option to view its underlying data in a table within a drawer.",
+      tags: [
+        "templates",
+        "charts",
+        "data-display",
+        "pattern",
+        "dashboard"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The title displayed at the top of the chart card."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The chart component itself (e.g., <BarChart />, <LineChart />)."
+        },
+        {
+          name: "data",
+          type: "any[]",
+          description: "The raw data array used to render the chart and the table view."
+        },
+        {
+          name: "tableHeaders",
+          type: "TableHeader[]",
+          description: "The column definitions for the table view."
+        }
+      ],
+      importPath: "./components/data-display/ChartWithTable",
+      filePath: "src/components/data-display/ChartWithTable.tsx"
+    },
+    {
+      id: "code-block",
+      name: "CodeBlock",
+      version: "1.0.0",
+      description: "A component for displaying formatted and syntax-highlighted code snippets.",
+      tags: [
+        "ui",
+        "data-display",
+        "code"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "code",
+          type: "string",
+          description: "The string of code to display."
+        },
+        {
+          name: "language",
+          type: "string",
+          description: "The programming language for syntax highlighting (e.g., 'tsx', 'css', 'javascript')."
+        }
+      ],
+      importPath: "./components/data-display/CodeBlock",
+      filePath: "src/components/data-display/CodeBlock.tsx"
+    },
+    {
+      id: "data-table",
+      name: "DataTable",
+      version: "1.0.0",
+      description: "A powerful data grid component that wraps AG Grid, providing advanced features like sorting, filtering, and resizing, fully themed to match the application.",
+      tags: [
+        "data-display",
+        "grid",
+        "table",
+        "ag-grid",
+        "advanced"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "rowData",
+          type: "any[]",
+          description: "The data to display in the grid, an array of row objects."
+        },
+        {
+          name: "columnDefs",
+          type: "ColDef[]",
+          description: "An array defining the columns of the grid, using AG Grid's `ColDef` structure."
+        },
+        {
+          name: "height",
+          type: "string",
+          description: "The height of the data table container (e.g., '500px', '100%').",
+          default: "'500px'"
+        },
+        {
+          name: "defaultColDef",
+          type: "ColDef",
+          description: "Default column definitions applied to all columns unless overridden."
+        },
+        {
+          name: "gridOptions",
+          type: "GridOptions",
+          description: "Additional AG Grid options to configure the grid's behavior."
+        }
+      ],
+      importPath: "./components/data-display/DataTable",
+      filePath: "src/components/data-display/DataTable.tsx"
+    },
+    {
+      id: "line-chart",
+      name: "LineChart",
+      version: "1.0.0",
+      description: "A theme-aware line chart component...",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [],
+      importPath: "./components/data-display/LineChart",
+      filePath: "src/components/data-display/LineChart.tsx"
+    },
+    {
+      id: "pie-chart",
+      name: "PieChart",
+      version: "1.0.0",
+      description: "A theme-aware pie chart component powered by Recharts, for showing proportional relationships of parts to a whole.",
+      tags: [
+        "charts",
+        "data-visualization",
+        "rechart"
+      ],
+      category: "charts",
+      props: [],
+      importPath: "./components/data-display/PieChart",
+      filePath: "src/components/data-display/PieChart.tsx"
+    },
+    {
+      id: "stat-card",
+      name: "StatCard",
+      version: "1.0.0",
+      description: "A specialized card for prominently displaying a key statistic, including an icon and optional trend indicator.",
+      tags: [
+        "templates",
+        "data-display",
+        "metrics",
+        "dashboard",
+        "ui"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The label for the displayed metric."
+        },
+        {
+          name: "value",
+          type: "string",
+          description: "The main value of the statistic."
+        },
+        {
+          name: "icon",
+          type: "IconName",
+          description: "The name of a Lucide icon to represent the metric."
+        },
+        {
+          name: "changeText",
+          type: "string",
+          description: "Text describing the change in the metric (e.g., '10% since last month')."
+        },
+        {
+          name: "changeDirection",
+          type: `"'positive' | 'negative'"`,
+          description: "The direction of change, which determines the color of the badge."
+        },
+        {
+          name: "footerText",
+          type: "string",
+          description: "Optional text displayed at the bottom of the card for context."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        }
+      ],
+      importPath: "./components/data-display/StatCard",
+      filePath: "src/components/data-display/StatCard.tsx"
+    },
+    {
+      id: "status-badge",
+      name: "StatusBadge",
+      version: "1.0.0",
+      description: "A consistent status indicator featuring a color-coded dot and an optional text label. Essential for IoT devices and system states.",
+      tags: [
+        "status",
+        "badge",
+        "iot",
+        "indicator",
+        "dot"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "status",
+          type: "'online' | 'offline' | 'error' | 'warning' | 'active'",
+          description: "The state to represent. Determines the color of the dot."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: 'Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").'
+        },
+        {
+          name: "showDot",
+          type: "boolean",
+          description: "Whether to show the colored indicator dot.",
+          default: "true"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/data-display/StatusBadge",
+      filePath: "src/components/data-display/StatusBadge.tsx"
+    },
+    {
+      id: "table",
+      name: "Table",
+      version: "1.0.0",
+      description: "A simple, theme-aware HTML table component for displaying tabular data, with support for custom cell rendering and empty states.",
+      tags: [
+        "data-display",
+        "table",
+        "ui"
+      ],
+      category: "data-display",
+      props: [
+        {
+          name: "headers",
+          type: '"{ key: string; label: string; render?: (value: any, row: Record<string, any>) => React.ReactNode; }[]"',
+          description: "An array defining the table columns, including a `key`, `label`, and optional `render` function for custom cell content."
+        },
+        {
+          name: "data",
+          type: '"Record<string, any>[]"',
+          description: "An array of objects, where each object represents a row of data for the table."
+        },
+        {
+          name: "caption",
+          type: "string",
+          description: "An optional caption for the table, providing a title or summary."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the table container."
+        }
+      ],
+      importPath: "./components/data-display/Table",
+      filePath: "src/components/data-display/Table.tsx"
+    },
+    {
+      id: "alert",
+      name: "Alert",
+      version: "1.0.0",
+      description: "Displays static, in-page messages to convey important information like success, warnings, or errors.",
+      tags: [
+        "feedback",
+        "message",
+        "notification",
+        "ui"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main heading or concise summary of the alert message."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "Optional additional content or a longer description for the alert."
+        },
+        {
+          name: "variant",
+          type: "'info' | 'success' | 'warning' | 'danger'",
+          description: "Defines the color scheme, icon, and semantic meaning of the alert.",
+          default: "'info'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the alert container."
+        }
+      ],
+      importPath: "./components/feedback/Alert",
+      filePath: "src/components/feedback/Alert.tsx"
+    },
+    {
+      id: "empty-state",
+      name: "EmptyState",
+      version: "1.0.0",
+      description: "A component for displaying a message when there is no data or content to show.",
+      tags: [
+        "ui",
+        "feedback",
+        "empty",
+        "placeholder"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "icon",
+          type: "React.ComponentProps<typeof Icon>['name']",
+          description: "The name of a Lucide icon to visually represent the empty state."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "The main heading or title for the empty state message."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "A longer, descriptive text explaining the empty state or next steps."
+        },
+        {
+          name: "actionButton",
+          type: "React.ReactNode",
+          description: "An optional React node, typically a Button, to provide a primary action."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the container."
+        }
+      ],
+      importPath: "./components/feedback/EmptyState",
+      filePath: "src/components/feedback/EmptyState.tsx"
+    },
+    {
+      id: "tippy-tooltip",
+      name: "TippyTooltip",
+      version: "1.0.0",
+      description: "A flexible and theme-aware tooltip component that displays additional information on hover.",
+      tags: [
+        "ui",
+        "feedback",
+        "tooltip",
+        "overlay"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The element that triggers the tooltip when hovered over (or clicked, etc.)."
+        },
+        {
+          name: "content",
+          type: "React.ReactNode",
+          description: "The content to be displayed inside the tooltip."
+        },
+        {
+          name: "placement",
+          type: "TippyProps['placement']",
+          description: "The position of the tooltip relative to its trigger element (e.g., 'top', 'bottom', 'left', 'right').",
+          default: "'top'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the tooltip content."
+        }
+      ],
+      importPath: "./components/feedback/TippyTooltip",
+      filePath: "src/components/feedback/TippyTooltip.tsx"
+    },
+    {
+      id: "toast",
+      name: "Toast",
+      version: "1.0.0",
+      description: "A single, transient notification message that appears briefly to provide feedback.",
+      tags: [
+        "feedback",
+        "notification",
+        "message",
+        "ui"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this specific toast instance."
+        },
+        {
+          name: "title",
+          type: "string",
+          description: "An optional title for the toast notification."
+        },
+        {
+          name: "message",
+          type: "string",
+          description: "The main text content of the toast notification."
+        },
+        {
+          name: "type",
+          type: `"'success' | 'error' | 'info' | 'warning'"`,
+          description: "Defines the visual style and semantic meaning of the toast.",
+          default: "'info'"
+        },
+        {
+          name: "duration",
+          type: "number",
+          description: "How long the toast should remain visible in milliseconds. Set to `0` for a sticky toast.",
+          default: "5000"
+        },
+        {
+          name: "onDismiss",
+          type: "(id: string) => void",
+          description: "Callback function triggered when the toast is dismissed."
+        }
+      ],
+      importPath: "./components/feedback/Toast",
+      filePath: "src/components/feedback/Toast.tsx"
+    },
+    {
+      id: "use-toast",
+      name: "useToast",
+      version: "1.0.0",
+      description: "A React hook to easily add and dismiss toast notifications anywhere within a `ToastProvider`.",
+      tags: [
+        "hook",
+        "feedback",
+        "notification"
+      ],
+      category: "feedback",
+      props: [],
+      importPath: "./components/feedback/ToastProvider",
+      filePath: "src/components/feedback/ToastProvider.tsx"
+    },
+    {
+      id: "toast-provider",
+      name: "ToastProvider",
+      version: "1.0.4",
+      description: "Provides a context for displaying transient notifications (toasts). Wrap your application with this component.",
+      tags: [
+        "feedback",
+        "notification",
+        "context",
+        "provider"
+      ],
+      category: "feedback",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The React nodes that will have access to the `useToast` hook. Typically wraps the entire application."
+        }
+      ],
+      importPath: "./components/feedback/ToastProvider",
+      filePath: "src/components/feedback/ToastProvider.tsx"
+    },
+    {
+      id: "button-group",
+      name: "ButtonGroup",
+      version: "1.0.0",
+      description: "Groups multiple Button components visually and can function as a segmented control (radio group).",
+      tags: [
+        "ui",
+        "form",
+        "action",
+        "group"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The `Button` components to be grouped together."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes to apply to the container."
+        },
+        {
+          name: "value",
+          type: "string | number",
+          description: "For segmented controls, the value of the currently selected button."
+        },
+        {
+          name: "onValueChange",
+          type: "(value: string | number) => void",
+          description: "Callback function for segmented controls, called when the selected value changes."
+        }
+      ],
+      importPath: "./components/forms/ButtonGroup",
+      filePath: "src/components/forms/ButtonGroup.tsx"
+    },
+    {
+      id: "checkbox",
+      name: "Checkbox",
+      version: "1.0.0",
+      description: "A standard checkbox input for selecting one or more options from a set.",
+      tags: [
+        "form",
+        "input",
+        "selection",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The visible label associated with the checkbox. Can be text or JSX."
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "A unique HTML `id` for the input element. Automatically generated if not provided."
+        },
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the checkbox is currently checked."
+        },
+        {
+          name: "onChange",
+          type: "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback function triggered when the checkbox's checked state changes."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the checkbox is unclickable and styled as disabled."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the input element."
+        }
+      ],
+      importPath: "./components/forms/Checkbox",
+      filePath: "src/components/forms/Checkbox.tsx"
+    },
+    {
+      id: "combo-box",
+      name: "ComboBox",
+      version: "1.0.0",
+      description: "A text input with an integrated dropdown list of selectable options, allowing both typing and selection.",
+      tags: [
+        "form",
+        "input",
+        "select",
+        "dropdown",
+        "autocomplete",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/ComboBox",
+      filePath: "src/components/forms/ComboBox.tsx"
+    },
+    {
+      id: "date-picker",
+      name: "DatePicker",
+      version: "1.0.0",
+      description: "A calendar-based input component for selecting single dates, with theme integration.",
+      tags: [
+        "form",
+        "input",
+        "date",
+        "calendar",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label displayed above the date picker input field."
+        },
+        {
+          name: "selected",
+          type: "Date | null",
+          description: "The currently selected date object, or `null` if no date is selected."
+        },
+        {
+          name: "onChange",
+          type: "(date: Date | null) => void",
+          description: "Callback function triggered when a new date is selected."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the date picker's wrapper container."
+        },
+        {
+          name: "dateFormat",
+          type: "string",
+          description: "The format string for displaying the date (e.g., 'MM/dd/yyyy', 'yyyy-MM-dd')."
+        },
+        {
+          name: "showTimeSelect",
+          type: "boolean",
+          description: "If true, also allows time selection in addition to date selection."
+        },
+        {
+          name: "isClearable",
+          type: "boolean",
+          description: "If true, displays a clear button to deselect the date."
+        },
+        {
+          name: "placeholderText",
+          type: "string",
+          description: "Text displayed when no date is selected."
+        },
+        {
+          name: "minDate",
+          type: "Date",
+          description: "The earliest selectable date."
+        },
+        {
+          name: "maxDate",
+          type: "Date",
+          description: "The latest selectable date."
+        }
+      ],
+      importPath: "./components/forms/DatePicker",
+      filePath: "src/components/forms/DatePicker.tsx"
+    },
+    {
+      id: "file-upload",
+      name: "FileUpload",
+      version: "1.0.0",
+      description: "A component allowing users to upload files via drag-and-drop or a file browser, with support for multiple files and accepted types.",
+      tags: [
+        "form",
+        "input",
+        "upload",
+        "files",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "onFileUpload",
+          type: "(files: File[]) => void",
+          description: "Callback function triggered when files are selected or dropped, providing an array of File objects."
+        },
+        {
+          name: "multiple",
+          type: "boolean",
+          description: "If true, allows the user to select and upload multiple files.",
+          default: "false"
+        },
+        {
+          name: "acceptedFileTypes",
+          type: "string",
+          description: 'A string specifying acceptable file types (e.g., ".pdf,.txt,.xml", "image/*").'
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label displayed above the file upload area."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the file upload container."
+        }
+      ],
+      importPath: "./components/forms/FileUpload",
+      filePath: "src/components/forms/FileUpload.tsx"
+    },
+    {
+      id: "form-template",
+      name: "FormTemplate",
+      version: "1.0.0",
+      description: "A data-driven form builder that renders a grid of input fields from a configuration array, handling internal state and submission.",
+      tags: [
+        "form",
+        "template",
+        "builder",
+        "input",
+        "layout"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "fields",
+          type: "FormField[]",
+          description: "An array of field definition objects (name, label, type, etc.) that determine the form structure."
+        },
+        {
+          name: "onSubmit",
+          type: "(formData: Record<string, any>) => void",
+          description: "Callback function triggered when the form is submitted, receiving the collected data."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the form container."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: 'Content to render at the bottom of the form, typically used for action buttons like "Save" or "Cancel".'
+        }
+      ],
+      importPath: "./components/forms/FormTemplate",
+      filePath: "src/components/forms/FormTemplate.tsx"
+    },
+    {
+      id: "input",
+      name: "Input",
+      version: "1.0.0",
+      description: "A theme-aware text input component with support for labels, icons, helper text, and validation states. Supports all standard HTML input attributes.",
+      tags: [
+        "form",
+        "input",
+        "ui",
+        "text"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label to display above the input field."
+        },
+        {
+          name: "icon",
+          type: "IconName",
+          description: "Optional icon name to display inside the input field."
+        },
+        {
+          name: "helperText",
+          type: "string",
+          description: "A string that provides a hint or an error message below the input."
+        },
+        {
+          name: "error",
+          type: "boolean",
+          description: "If true, the input will be styled to indicate an error.",
+          default: "false"
+        },
+        {
+          name: "required",
+          type: "boolean",
+          description: "If true, a required indicator (*) will be displayed next to the label.",
+          default: "false"
+        },
+        {
+          name: "showOptionalLabel",
+          type: "boolean",
+          description: 'If true, an "(optional)" indicator will be displayed next to the label.',
+          default: "false"
+        },
+        {
+          name: "containerClassName",
+          type: "string",
+          description: "Optional additional CSS classes for the container."
+        }
+      ],
+      importPath: "./components/forms/Input",
+      filePath: "src/components/forms/Input.tsx"
+    },
+    {
+      id: "multi-select",
+      name: "MultiSelect",
+      version: "1.0.0",
+      description: "An enhanced dropdown that allows users to select multiple options from a searchable list.",
+      tags: [
+        "form",
+        "input",
+        "select",
+        "dropdown"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/MultiSelect",
+      filePath: "src/components/forms/MultiSelect.tsx"
+    },
+    {
+      id: "radio",
+      name: "Radio",
+      version: "1.0.0",
+      description: "A single radio button input, typically used within a group where only one option can be selected.",
+      tags: [
+        "form",
+        "input",
+        "selection",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The visible label associated with the radio button. Can be text or JSX."
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "A unique HTML `id` for the input element. Automatically generated if not provided."
+        },
+        {
+          name: "name",
+          type: "string",
+          description: "The HTML `name` attribute, crucial for grouping radio buttons so only one can be selected."
+        },
+        {
+          name: "value",
+          type: "string | number | readonly string[]",
+          description: "The value associated with this radio button when it is selected."
+        },
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the radio button is currently selected."
+        },
+        {
+          name: "onChange",
+          type: "(event: React.ChangeEvent<HTMLInputElement>) => void",
+          description: "Callback function triggered when the radio button's checked state changes."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the radio button is unclickable and styled as disabled."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the input element."
+        }
+      ],
+      importPath: "./components/forms/Radio",
+      filePath: "src/components/forms/Radio.tsx"
+    },
+    {
+      id: "search-input",
+      name: "SearchInput",
+      version: "1.0.0",
+      description: "A specialized input for search functionality, using the base Input component with a search icon.",
+      tags: [
+        "form",
+        "input",
+        "search",
+        "ui"
+      ],
+      category: "form",
+      props: [],
+      importPath: "./components/forms/SearchInput",
+      filePath: "src/components/forms/SearchInput.tsx"
+    },
+    {
+      id: "segmented-control",
+      name: "SegmentedControl",
+      version: "1.0.0",
+      description: 'A linear toggle component that functions like a radio group. Ideal for switching between discrete modes (e.g., "Off / Auto / On").',
+      tags: [
+        "input",
+        "toggle",
+        "switch",
+        "radio",
+        "control"
+      ],
+      category: "input",
+      props: [
+        {
+          name: "options",
+          type: "Array<{ label: string, value: string | number }>",
+          description: "The list of segments to display."
+        },
+        {
+          name: "value",
+          type: "string | number",
+          description: "The currently selected value."
+        },
+        {
+          name: "onChange",
+          type: "function",
+          description: "Callback fired when a segment is selected."
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md'",
+          description: "The size of the control.",
+          default: "'md'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes."
+        }
+      ],
+      importPath: "./components/forms/SegmentedControl",
+      filePath: "src/components/forms/SegmentedControl.tsx"
+    },
+    {
+      id: "select",
+      name: "Select",
+      version: "1.0.0",
+      description: "A standard HTML select dropdown component for choosing a single option from a list.",
+      tags: [
+        "form",
+        "input",
+        "dropdown",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "options",
+          type: "{ value: string | number; label: string; }[]",
+          description: "An array of objects defining the selectable options, each with a `value` and `label`."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label displayed above the select dropdown."
+        },
+        {
+          name: "id",
+          type: "string",
+          description: "A unique HTML `id` for the select element. Automatically generated if not provided."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the select element."
+        },
+        {
+          name: "value",
+          type: "string | number | readonly string[]",
+          description: "The currently selected option's value."
+        },
+        {
+          name: "onChange",
+          type: "(event: React.ChangeEvent<HTMLSelectElement>) => void",
+          description: "Callback function triggered when the selected value changes."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the select dropdown will be unclickable."
+        }
+      ],
+      importPath: "./components/forms/Select",
+      filePath: "src/components/forms/Select.tsx"
+    },
+    {
+      id: "textarea",
+      name: "Textarea",
+      version: "1.0.0",
+      description: "A theme-aware textarea component for multi-line text input.",
+      tags: [
+        "form",
+        "input",
+        "ui"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "label",
+          type: "string",
+          description: "An optional label to display above the textarea."
+        },
+        {
+          name: "containerClassName",
+          type: "string",
+          description: "Optional additional CSS classes for the container div."
+        }
+      ],
+      importPath: "./components/forms/Textarea",
+      filePath: "src/components/forms/Textarea.tsx"
+    },
+    {
+      id: "toggle-switch",
+      name: "ToggleSwitch",
+      version: "1.0.0",
+      description: "A theme-aware toggle switch component, offering a boolean input alternative to a checkbox.",
+      tags: [
+        "form",
+        "ui",
+        "toggle",
+        "switch",
+        "input"
+      ],
+      category: "form",
+      props: [
+        {
+          name: "checked",
+          type: "boolean",
+          description: "Controls whether the toggle is in the 'on' (checked) or 'off' (unchecked) state."
+        },
+        {
+          name: "onChange",
+          type: "(checked: boolean) => void",
+          description: "Callback function triggered when the toggle state changes."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "An accessible text label displayed next to the toggle switch."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the toggle switch container."
+        },
+        {
+          name: "disabled",
+          type: "boolean",
+          description: "If true, the toggle will be unclickable and styled as disabled.",
+          default: "false"
+        }
+      ],
+      importPath: "./components/forms/ToggleSwitch",
+      filePath: "src/components/forms/ToggleSwitch.tsx"
+    },
+    {
+      id: "page-header",
+      name: "PageHeader",
+      version: "1.0.0",
+      description: "Displays the main header section of a page, including a title, optional description, and a slot for action buttons.",
+      tags: [
+        "layout",
+        "typography",
+        "header",
+        "ui",
+        "template"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main title of the page."
+        },
+        {
+          name: "description",
+          type: "string",
+          description: "A brief descriptive subtitle displayed below the main title."
+        },
+        {
+          name: "actions",
+          type: "React.ReactNode",
+          description: "A slot for action buttons or other controls, typically aligned to the right of the header."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the page header container."
+        }
+      ],
+      importPath: "./components/layout/PageHeader",
+      filePath: "src/components/layout/PageHeader.tsx"
+    },
+    {
+      id: "section-header",
+      name: "SectionHeader",
+      version: "1.0.0",
+      description: "A simple, consistent header for organizing sections of content within a page.",
+      tags: [
+        "layout",
+        "typography",
+        "header",
+        "ui"
+      ],
+      category: "templates-patterns",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: "The main title for the content section."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the header container."
+        }
+      ],
+      importPath: "./components/layout/SectionHeader",
+      filePath: "src/components/layout/SectionHeader.tsx"
+    },
+    {
+      id: "sidebar",
+      name: "Sidebar",
+      version: "1.0.0",
+      description: "A collapsible, responsive sidebar component.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/layout/Sidebar",
+      filePath: "src/components/layout/Sidebar.tsx"
+    },
+    {
+      id: "breadcrumb-item",
+      name: "BreadcrumbItem",
+      version: "1.0.0",
+      description: "Represents a single step or link within a `Breadcrumbs` navigation path.",
+      tags: [
+        "navigation",
+        "ui",
+        "link"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "label",
+          type: "React.ReactNode",
+          description: "The text or content displayed for this breadcrumb item."
+        },
+        {
+          name: "to",
+          type: "string",
+          description: "The URL path for this item to navigate to. If not provided, it's just text."
+        },
+        {
+          name: "isCurrent",
+          type: "boolean",
+          description: "If true, indicates this is the current page and will not be a clickable link."
+        },
+        {
+          name: "icon",
+          type: "React.ReactNode",
+          description: "An optional icon to display next to the breadcrumb label."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the individual item."
+        }
+      ],
+      importPath: "./components/navigation/Breadcrumbs",
+      filePath: "src/components/navigation/Breadcrumbs.tsx"
+    },
+    {
+      id: "breadcrumbs",
+      name: "Breadcrumbs",
+      version: "1.0.4",
+      description: "A navigation component that shows the user's current location within a hierarchy of pages.",
+      tags: [
+        "navigation",
+        "ui",
+        "path"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<BreadcrumbItemProps>[]",
+          description: "A collection of `BreadcrumbItem` components representing the path."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the breadcrumbs container."
+        }
+      ],
+      importPath: "./components/navigation/Breadcrumbs",
+      filePath: "src/components/navigation/Breadcrumbs.tsx"
+    },
+    {
+      id: "menu-divider",
+      name: "MenuDivider",
+      version: "1.0.0",
+      description: "A visual separator for grouping MenuItems within a Menu.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx"
+    },
+    {
+      id: "menu-item",
+      name: "MenuItem",
+      version: "1.0.0",
+      description: "An individual selectable item within a Menu component.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx"
+    },
+    {
+      id: "menu",
+      name: "Menu",
+      version: "1.0.4",
+      description: "A dropdown menu component, useful for navigation or contextual actions.",
+      tags: [],
+      category: "",
+      props: [],
+      importPath: "./components/navigation/Menu",
+      filePath: "src/components/navigation/Menu.tsx"
+    },
+    {
+      id: "pagination",
+      name: "Pagination",
+      version: "1.0.0",
+      description: "A navigation control for moving between pages of content.",
+      tags: [
+        "navigation",
+        "ui",
+        "data-display"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "currentPage",
+          type: "number",
+          description: "The currently active page number (1-based index)."
+        },
+        {
+          name: "totalPages",
+          type: "number",
+          description: "The total number of pages available."
+        },
+        {
+          name: "onPageChange",
+          type: "(page: number) => void",
+          description: "Callback function invoked when the user selects a new page."
+        },
+        {
+          name: "maxPageButtons",
+          type: "number",
+          description: "The maximum number of visible page number buttons.",
+          default: "5"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the container."
+        }
+      ],
+      importPath: "./components/navigation/Pagination",
+      filePath: "src/components/navigation/Pagination.tsx"
+    },
+    {
+      id: "stepper",
+      name: "Stepper",
+      version: "1.0.0",
+      description: "Guides users through a sequence of discrete steps, ideal for multi-step forms or onboarding flows.",
+      tags: [
+        "navigation",
+        "progress",
+        "wizard",
+        "ui"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "steps",
+          type: "{ label: string; summary?: string; }[]",
+          description: "An array of step objects, each with a `label` and optional `summary`."
+        },
+        {
+          name: "currentStep",
+          type: "number",
+          description: "The 0-based index of the currently active step."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the stepper container."
+        }
+      ],
+      importPath: "./components/navigation/Stepper",
+      filePath: "src/components/navigation/Stepper.tsx"
+    },
+    {
+      id: "tab-panel",
+      name: "TabPanel",
+      version: "1.0.0",
+      description: "Represents a single tab and its associated content panel within a `Tabs` component.",
+      tags: [
+        "navigation",
+        "ui",
+        "content"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this tab panel, used to link it to its header."
+        },
+        {
+          name: "label",
+          type: "string",
+          description: "The text label displayed on the tab header."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content to be displayed when this tab is active."
+        },
+        {
+          name: "icon",
+          type: "React.ReactNode",
+          description: "An optional icon to display next to the tab label in the header."
+        }
+      ],
+      importPath: "./components/navigation/Tabs",
+      filePath: "src/components/navigation/Tabs.tsx"
+    },
+    {
+      id: "tabs",
+      name: "Tabs",
+      version: "1.0.4",
+      description: "A navigation component that allows users to switch between different content panels within the same area.",
+      tags: [
+        "navigation",
+        "ui",
+        "content-switcher"
+      ],
+      category: "navigation",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<TabPanelProps>[]",
+          description: "A collection of `TabPanel` components that define the tabs and their content."
+        },
+        {
+          name: "defaultActiveTab",
+          type: "string",
+          description: "The `id` of the tab that should be active by default when the component mounts."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Additional CSS classes for custom styling of the tabs container."
+        }
+      ],
+      importPath: "./components/navigation/Tabs",
+      filePath: "src/components/navigation/Tabs.tsx"
+    },
+    {
+      id: "avatar",
+      name: "Avatar",
+      version: "1.0.0",
+      description: "Displays a user's profile picture or initials as a fallback, with different size options.",
+      tags: [
+        "ui",
+        "profile",
+        "user"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "name",
+          type: "string",
+          description: "The name of the user, used for generating initials if no `src` is provided."
+        },
+        {
+          name: "src",
+          type: "string",
+          description: "The URL of the image to display as the avatar. If not provided, initials are shown."
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md' | 'lg'",
+          description: "Controls the dimensions and font size of the avatar.",
+          default: "'md'"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling."
+        }
+      ],
+      importPath: "./components/ui/Avatar",
+      filePath: "src/components/ui/Avatar.tsx"
+    },
+    {
+      id: "badge",
+      name: "Badge",
+      version: "1.0.0",
+      description: "A small component to display a status, count, or label.",
+      tags: [
+        "ui",
+        "label",
+        "indicator"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "variant",
+          type: `"'primary' | 'secondary' | 'danger' | 'success' | 'outline'"`,
+          description: "The visual style of the badge."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content to display inside the badge."
+        }
+      ],
+      importPath: "./components/ui/Badge",
+      filePath: "src/components/ui/Badge.tsx"
+    },
+    {
+      id: "button",
+      name: "Button",
+      version: "1.0.1",
+      description: "The primary interactive element. Supports polymorphism (rendering as a link) via the 'asChild' prop.",
+      tags: [],
+      category: "input",
+      props: [
+        {
+          name: "variant",
+          type: "'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link' | 'accent'",
+          description: "The visual style of the button.",
+          default: "'primary'"
+        },
+        {
+          name: "size",
+          type: "'sm' | 'md' | 'lg' | 'icon'",
+          description: "The size of the button.",
+          default: "'md'"
+        },
+        {
+          name: "loading",
+          type: "boolean",
+          description: "If true, replaces content with a spinner.",
+          default: "false"
+        },
+        {
+          name: "iconLeft",
+          type: "IconName",
+          description: "Optional icon to display before the text."
+        },
+        {
+          name: "asChild",
+          type: "boolean",
+          description: "If true, delegates rendering to the child element (e.g. for Links).",
+          default: "false"
+        },
+        {
+          name: "onClick",
+          type: "() => void",
+          description: "Callback fired when the button is clicked."
+        }
+      ],
+      importPath: "./components/ui/Button",
+      filePath: "src/components/ui/Button.tsx"
+    },
+    {
+      id: "icon",
+      name: "Icon",
+      version: "1.0.0",
+      description: "A dynamic component that renders scalable vector icons from the Lucide library.",
+      tags: [
+        "ui",
+        "graphics",
+        "svg",
+        "symbol"
+      ],
+      category: "ui",
+      props: [
+        {
+          name: "name",
+          type: "IconName",
+          description: "The specific name of the Lucide icon to display (e.g., 'user', 'settings', 'check')."
+        },
+        {
+          name: "size",
+          type: "number | string",
+          description: "The width and height of the icon in pixels or CSS units.",
+          default: "24 (implicit from Lucide default)"
+        },
+        {
+          name: "color",
+          type: "string",
+          description: "The color of the icon."
+        },
+        {
+          name: "strokeWidth",
+          type: "number | string",
+          description: "The width of the icon's stroke.",
+          default: "2 (implicit from Lucide default)"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for styling the SVG element."
+        }
+      ],
+      importPath: "./components/ui/Icon",
+      filePath: "src/components/ui/Icon.tsx"
+    }
+  ],
+  layouts: [
+    {
+      id: "device-card",
+      name: "DeviceCard",
+      version: "1.0.0",
+      description: "A specialized card designed to represent a physical device or a digital entity with live state. Features slots for status, live values, and interactive controls.",
+      tags: [
+        "layout",
+        "iot",
+        "device",
+        "card",
+        "dashboard"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "title",
+          type: "string",
+          description: 'The name of the device or entity (e.g., "Living Room Thermostat").'
+        },
+        {
+          name: "description",
+          type: "string",
+          description: 'A subtitle, often used for location or ID (e.g., "Floor 2 • ID: #442").'
+        },
+        {
+          name: "icon",
+          type: "IconName",
+          description: "The icon representing the device type."
+        },
+        {
+          name: "status",
+          type: "'online' | 'offline' | 'error' | 'warning' | 'active'",
+          description: "The current operational state of the device. Changes the badge color.",
+          default: "'offline'"
+        },
+        {
+          name: "value",
+          type: "string | number",
+          description: 'The primary "live" metric to display (e.g., "72°", "1,240 rpm").'
+        },
+        {
+          name: "trend",
+          type: "string",
+          description: 'Optional secondary metric to show change (e.g., "+2%").'
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "Interactive controls to place at the bottom of the card (e.g., a ToggleSwitch or Button)."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes."
+        }
+      ],
+      importPath: "./blocks/iot/DeviceCard",
+      filePath: "src/blocks/iot/DeviceCard.tsx"
+    },
+    {
+      id: "accordion-item",
+      name: "AccordionItem",
+      version: "1.0.0",
+      description: "A single, collapsible section within an `Accordion` component, consisting of a header and a hidden content body.",
+      tags: [
+        "layout",
+        "ui",
+        "collapsible",
+        "expandable"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "id",
+          type: "string",
+          description: "A unique identifier for this accordion item. Essential for `singleOpen` behavior."
+        },
+        {
+          name: "header",
+          type: "React.ReactNode",
+          description: "The content displayed in the clickable header of the accordion item."
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content that will be revealed or hidden when the accordion item is toggled."
+        },
+        {
+          name: "isOpen",
+          type: "boolean",
+          description: "Controls the open/closed state for this specific item (when used in a controlled `Accordion`)."
+        },
+        {
+          name: "onToggle",
+          type: "(id: string, isOpen: boolean) => void",
+          description: "Callback triggered when the item is toggled, providing its `id` and new `isOpen` state."
+        }
+      ],
+      importPath: "./components/layout/Accordion",
+      filePath: "src/components/layout/Accordion.tsx"
+    },
+    {
+      id: "accordion",
+      name: "Accordion",
+      version: "1.0.4",
+      description: "A container for multiple collapsible sections (`AccordionItem`s), useful for organizing content.",
+      tags: [
+        "layout",
+        "ui",
+        "collapsible",
+        "expandable"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactElement<AccordionItemProps>[]",
+          description: "A collection of `AccordionItem` components to be managed by this Accordion."
+        },
+        {
+          name: "singleOpen",
+          type: "boolean",
+          description: "If true, only one `AccordionItem` can be open at a time. Opening one closes others.",
+          default: "false"
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the Accordion container."
+        }
+      ],
+      importPath: "./components/layout/Accordion",
+      filePath: "src/components/layout/Accordion.tsx"
+    },
+    {
+      id: "action-bar",
+      name: "ActionBar",
+      version: "1.0.0",
+      description: "A persistent bar, typically at the bottom of a form or page, used to group primary actions like 'Save' and 'Cancel'.",
+      tags: [
+        "layout",
+        "form",
+        "actions",
+        "buttons",
+        "ui",
+        "pattern"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the action bar, typically `Button` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling of the action bar container."
+        }
+      ],
+      importPath: "./components/layout/ActionBar",
+      filePath: "src/components/layout/ActionBar.tsx"
+    },
+    {
+      id: "card",
+      name: "Card",
+      version: "1.0.0",
+      description: "A versatile container that adapts to the current theme. Its background, border, and shape are themeable.",
+      tags: [
+        "layout",
+        "ui",
+        "container",
+        "box"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content to be displayed inside the card."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for custom styling. Use this for adding padding, shadows, etc. (e.g., 'p-4 shadow-lg')."
+        }
+      ],
+      importPath: "./components/layout/Card",
+      filePath: "src/components/layout/Card.tsx"
+    },
+    {
+      id: "drawer",
+      name: "Drawer",
+      version: "1.0.0",
+      description: "A sliding panel that appears from the edge of the screen, used for additional content or forms.",
+      tags: [
+        "layout",
+        "modal",
+        "slide-in",
+        "ui"
+      ],
+      category: "layout",
+      props: [],
+      importPath: "./components/layout/Drawer",
+      filePath: "src/components/layout/Drawer.tsx"
+    },
+    {
+      id: "list-item",
+      name: "ListItem",
+      version: "1.0.0",
+      description: "Represents a single item within a `List` component.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the list item."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the list item (`<li>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx"
+    },
+    {
+      id: "list",
+      name: "List",
+      version: "1.0.0",
+      description: "A component for displaying either ordered or unordered lists of `ListItem`s.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "type",
+          type: "'ul' | 'ol'",
+          description: "Specifies whether the list should be unordered ('ul') or ordered ('ol').",
+          default: "'ul'"
+        },
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The list items, typically `ListItem` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the list container (`<ul>` or `<ol>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx"
+    },
+    {
+      id: "definition-term",
+      name: "DefinitionTerm",
+      version: "1.0.0",
+      description: "Represents a term within a `DefinitionList`.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the definition term."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition term (`<dt>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx"
+    },
+    {
+      id: "definition-description",
+      name: "DefinitionDescription",
+      version: "1.0.0",
+      description: "Represents the description for a term within a `DefinitionList`.",
+      tags: [
+        "ui",
+        "layout",
+        "typography"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "The content of the definition description."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition description (`<dd>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx"
+    },
+    {
+      id: "definition-list",
+      name: "DefinitionList",
+      version: "1.0.4",
+      description: "Displays a list of terms and their corresponding definitions.",
+      tags: [
+        "ui",
+        "layout",
+        "typography",
+        "data-display"
+      ],
+      category: "layout",
+      props: [
+        {
+          name: "children",
+          type: "React.ReactNode",
+          description: "A collection of `DefinitionTerm` and `DefinitionDescription` components."
+        },
+        {
+          name: "className",
+          type: "string",
+          description: "Optional additional CSS classes for the definition list container (`<dl>`)."
+        }
+      ],
+      importPath: "./components/layout/List",
+      filePath: "src/components/layout/List.tsx"
+    },
+    {
+      id: "modal",
+      name: "Modal",
+      version: "1.0.0",
+      description: "A dialog box that appears on top of the current page, requiring user interaction to dismiss.",
+      tags: [
+        "ui",
+        "overlay",
+        "dialog",
+        "popup"
+      ],
+      category: "layout",
+      props: [],
+      importPath: "./components/layout/Modal",
+      filePath: "src/components/layout/Modal.tsx"
+    }
+  ],
+  utils: [],
+  hooks: [],
+  data: [
+    {
+      id: "mock-chart-data",
+      name: "mockChartData",
+      version: "1.0.0",
+      description: "Pre-defined datasets for prototyping charts and other data-driven components.",
+      tags: [
+        "data",
+        "mock",
+        "example"
+      ],
+      category: "data",
+      props: [],
+      importPath: "./data/mockData",
+      filePath: "src/data/mockData.ts"
+    },
+    {
+      id: "mock-table-data",
+      name: "mockTableData",
+      version: "1.0.4",
+      description: "Pre-defined datasets for prototyping tables and other data-driven components.",
+      tags: [
+        "data",
+        "mock",
+        "example"
+      ],
+      category: "data",
+      props: [],
+      importPath: "./data/mockData",
+      filePath: "src/data/mockData.ts"
+    }
+  ]
+}, GRt = [
   { name: "Jan", uv: 4e3, pv: 2400 },
   { name: "Feb", uv: 3e3, pv: 1398 },
   { name: "Mar", uv: 2e3, pv: 9800 },
   { name: "Apr", uv: 2780, pv: 3908 },
   { name: "May", uv: 1890, pv: 4800 },
   { name: "Jun", uv: 2390, pv: 3800 }
-], GRt = [
+], BRt = [
   { make: "Tesla", model: "Model Y", price: 65990, electric: !0 },
   { make: "Ford", model: "F-150", price: 33850, electric: !1 },
   { make: "Toyota", model: "Corolla", price: 29600, electric: !1 }
-], BRt = (t, e) => {
+], VRt = (t, e) => {
   const [r, i] = ze(t), [n, s] = ze(!0), [o, a] = ze(null), l = ut(async () => {
     s(!0), a(null);
     try {
@@ -163121,10 +165283,11 @@ export {
   Zx as availableThemes,
   MAe as badgeVariants,
   _qe as buttonVariants,
-  FRt as mockChartData,
-  GRt as mockTableData,
-  BRt as useDataFetch,
+  GRt as mockChartData,
+  BRt as mockTableData,
+  VRt as useDataFetch,
   R9 as useSidebar,
   ck as useTheme,
-  ORt as useToast
+  ORt as useToast,
+  FRt as wizardManifest
 };