@indielayer/ui 1.18.0 → 2.0.0

package/docs/search/components.json

@@ -1 +1 @@
-[{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions, objects, or concepts, enhancing usability and recognition in interfaces. They can be used alone or alongside text for buttons, menus, and indicators.","url":"/component/icon","category":"component"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]
+[{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Empty","description":"Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.","url":"/component/empty","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions and concepts. Register SVG paths in a global map, then reference them by name on XIcon.","url":"/component/icon","category":"component"},{"name":"Image","description":"Loads a remote image after preloading. Use a background on the wrapper for a visible placeholder until load completes.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Input Group","description":"Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.","url":"/component/inputGroup","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]

package/docs/search/index.json

@@ -1 +1 @@
-[{"name":"Icons","description":"Custom icon set integration for Indielayer UI components.","url":"/icons","category":"guide"},{"name":"Colors","description":"Color palette, semantic tokens, and color props on components.","url":"/colors","category":"guide"},{"name":"Typography","description":"Type scale and typography utilities used across the library.","url":"/typography","category":"guide"},{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions, objects, or concepts, enhancing usability and recognition in interfaces. They can be used alone or alongside text for buttons, menus, and indicators.","url":"/component/icon","category":"component"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]
+[{"name":"Icons","description":"Custom icon set integration for Indielayer UI components.","url":"/icons","category":"guide"},{"name":"Colors","description":"Color palette, semantic tokens, and color props on components.","url":"/colors","category":"guide"},{"name":"Typography","description":"Type scale and typography utilities used across the library.","url":"/typography","category":"guide"},{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Empty","description":"Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.","url":"/component/empty","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions and concepts. Register SVG paths in a global map, then reference them by name on XIcon.","url":"/component/icon","category":"component"},{"name":"Image","description":"Loads a remote image after preloading. Use a background on the wrapper for a visible placeholder until load completes.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Input Group","description":"Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.","url":"/component/inputGroup","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]

package/docs/utils/shikiHighlighter.ts

@@ -0,0 +1,22 @@
+import { createHighlighter, type Highlighter, type ThemeRegistrationRaw } from 'shiki'
+import indielayerTheme from '../components/common/Indielayer-theme.json'
+
+/** Theme id from {@link indielayerTheme} `name` field. */
+export const INDIELAYER_THEME = 'Indielayer' as const
+
+/** Languages used in docs code snippets. */
+export const DOCS_CODE_LANGS = ['js', 'ts', 'vue-html', 'bash', 'vue'] as const
+
+export type DocsCodeLang = typeof DOCS_CODE_LANGS[number]
+
+// VS Code theme JSON uses `tokenColors`; Shiki accepts it at runtime via normalization.
+const theme = indielayerTheme as unknown as ThemeRegistrationRaw
+
+/**
+ * Long-lived highlighter for docs code blocks.
+ * @see https://shiki.style/guide/install#highlighter-usage
+ */
+export const docsHighlighter: Promise<Highlighter> = createHighlighter({
+  langs: [...DOCS_CODE_LANGS],
+  themes: [theme],
+})

package/exports/nuxt.mjs

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     name: '@indielayer/ui',
     configKey: 'indielayer',
     compatibility: {
-      nuxt: '^3.0.0',
+      nuxt: '>=3.0.0',
     },
   },
   defaults: {

package/exports/nuxt.plugin.js

@@ -1,6 +1,7 @@
 import { defineNuxtPlugin } from '#app'
 import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
+// Configure via runtimeConfig.public.indielayerOptions (theme, icons, defaults, etc.)
 export default defineNuxtPlugin((nuxtApp) => {
   const UI = createUI({
     ...nuxtApp.$config.public?.indielayerOptions,

package/exports/tailwind.css

@@ -0,0 +1,74 @@
+/**
+ * Indielayer UI theme tokens for Tailwind CSS v4.
+ * Import after tailwindcss in your app stylesheet:
+ *   @import "tailwindcss";
+ *   @import "@indielayer/ui/tailwind.css";
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-primary-50: rgb(var(--primary-color-50));
+  --color-primary-100: rgb(var(--primary-color-100));
+  --color-primary-200: rgb(var(--primary-color-200));
+  --color-primary-300: rgb(var(--primary-color-300));
+  --color-primary-400: rgb(var(--primary-color-400));
+  --color-primary-500: rgb(var(--primary-color-500));
+  --color-primary-600: rgb(var(--primary-color-600));
+  --color-primary-700: rgb(var(--primary-color-700));
+  --color-primary-800: rgb(var(--primary-color-800));
+  --color-primary-900: rgb(var(--primary-color-900));
+  --color-primary-950: rgb(var(--primary-color-950));
+
+  --color-secondary-50: rgb(var(--secondary-color-50));
+  --color-secondary-100: rgb(var(--secondary-color-100));
+  --color-secondary-200: rgb(var(--secondary-color-200));
+  --color-secondary-300: rgb(var(--secondary-color-300));
+  --color-secondary-400: rgb(var(--secondary-color-400));
+  --color-secondary-500: rgb(var(--secondary-color-500));
+  --color-secondary-600: rgb(var(--secondary-color-600));
+  --color-secondary-700: rgb(var(--secondary-color-700));
+  --color-secondary-800: rgb(var(--secondary-color-800));
+  --color-secondary-900: rgb(var(--secondary-color-900));
+  --color-secondary-950: rgb(var(--secondary-color-950));
+
+  --color-success-50: rgb(var(--success-color-50));
+  --color-success-100: rgb(var(--success-color-100));
+  --color-success-200: rgb(var(--success-color-200));
+  --color-success-300: rgb(var(--success-color-300));
+  --color-success-400: rgb(var(--success-color-400));
+  --color-success-500: rgb(var(--success-color-500));
+  --color-success-600: rgb(var(--success-color-600));
+  --color-success-700: rgb(var(--success-color-700));
+  --color-success-800: rgb(var(--success-color-800));
+  --color-success-900: rgb(var(--success-color-900));
+  --color-success-950: rgb(var(--success-color-950));
+
+  --color-warning-50: rgb(var(--warning-color-50));
+  --color-warning-100: rgb(var(--warning-color-100));
+  --color-warning-200: rgb(var(--warning-color-200));
+  --color-warning-300: rgb(var(--warning-color-300));
+  --color-warning-400: rgb(var(--warning-color-400));
+  --color-warning-500: rgb(var(--warning-color-500));
+  --color-warning-600: rgb(var(--warning-color-600));
+  --color-warning-700: rgb(var(--warning-color-700));
+  --color-warning-800: rgb(var(--warning-color-800));
+  --color-warning-900: rgb(var(--warning-color-900));
+  --color-warning-950: rgb(var(--warning-color-950));
+
+  --color-error-50: rgb(var(--error-color-50));
+  --color-error-100: rgb(var(--error-color-100));
+  --color-error-200: rgb(var(--error-color-200));
+  --color-error-300: rgb(var(--error-color-300));
+  --color-error-400: rgb(var(--error-color-400));
+  --color-error-500: rgb(var(--error-color-500));
+  --color-error-600: rgb(var(--error-color-600));
+  --color-error-700: rgb(var(--error-color-700));
+  --color-error-800: rgb(var(--error-color-800));
+  --color-error-900: rgb(var(--error-color-900));
+  --color-error-950: rgb(var(--error-color-950));
+
+  --color-border: rgb(var(--border-color));
+
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+}

package/lib/_virtual/_plugin-vue_export-helper.js

@@ -1,9 +1,8 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
 };
+//#endregion
+export { e as default };

package/lib/_virtual/_rolldown/runtime.js

@@ -0,0 +1,17 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = Object.getOwnPropertyDescriptor, n = Object.getOwnPropertyNames, r = Object.prototype.hasOwnProperty, i = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+}, a = (i, a, o, s) => {
+	if (a && typeof a == "object" || typeof a == "function") for (var c = n(a), l = 0, u = c.length, d; l < u; l++) d = c[l], !r.call(i, d) && d !== o && e(i, d, {
+		get: ((e) => a[e]).bind(null, d),
+		enumerable: !(s = t(a, d)) || s.enumerable
+	});
+	return i;
+}, o = (e, t, n) => (a(e, t, "default"), n && a(n, t, "default"));
+//#endregion
+export { i as __exportAll, o as __reExport };