southpaw 0.2.7

package/ui/index.ts

@@ -0,0 +1,1355 @@
+import dynamic from "next/dynamic";
+import { loading } from "../constants/ssr-loading";
+
+export const UI = {
+  /**
+   * @description The affix UI element to pin content to the top or bottom of the page
+   */
+  affix: (() => {
+    const Comp = dynamic(() => import("./affix"), { loading });
+    Comp.displayName = "UI.affix";
+    return Comp;
+  })(),
+  /**
+   * @description The alert UI element to display important messages or notifications
+   * @example <UI.alert title="Hello World" />
+   * @example <UI.alert title="Hello World" color="red" />
+   * @example <UI.alert title="Hello World" withCloseButton />
+   */ alert: (() => {
+    const Comp = dynamic(() => import("./alert"), { loading });
+    Comp.displayName = "UI.alert";
+    return Comp;
+  })(),
+  /**
+   * @description The accordion UI element for collapsible content sections
+   * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} />
+   * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} defaultValue="1" />
+   * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} defaultValue="1" variant="separated" />
+   */
+  accordion: (() => {
+    const Comp = dynamic(() => import("./accordion"), { loading });
+    Comp.displayName = "UI.accordion";
+    return Comp;
+  })(),
+  /**
+   * @description The terminal UI element for displaying command-line interface
+   * @example <UI.terminal commands={["npm install", "npm start"]} />
+   * @example <UI.terminal commands={["npm install"]} autorun />
+   */
+  terminal: (() => {
+    const Comp = dynamic(() => import("./terminal"), { loading });
+    Comp.displayName = "UI.terminal";
+    return Comp;
+  })(),
+  /**
+   * @description The form UI element for collecting user input
+   * @example <UI.form onSubmit={(values) => console.log(values)} />
+   * @example <UI.form initialValues={{ name: "John" }} onSubmit={(values) => console.log(values)} />
+   */
+  form: (() => {
+    const Comp = dynamic(() => import("./form"), { loading });
+    Comp.displayName = "UI.form";
+    return Comp;
+  })(),
+  /**
+   * @description The list UI element for displaying items in an organized manner
+   * @example <UI.list
+   *              listStyleType="none"
+   *              items={[
+   *                {
+   *                  children: (
+   *                    <UI.alert title="Dynamic Imports" color="blue">
+   *                      Efficiently load components with dynamic imports to
+   *                      improve performance.
+   *                    </UI.alert>
+   *                  ),
+   *                },
+   *
+   *                {
+   *                  children: (
+   *                    <UI.alert title="SSR Support" color="green">
+   *                      Server-side rendering capabilities for faster initial
+   *                      page loads and SEO benefits.
+   *                    </UI.alert>
+   *                  ),
+   *                },
+   *
+   *                {
+   *                  children: (
+   *                    <UI.alert
+   *                      title="Customizable UI Elements"
+   *                      color="purple"
+   *                    >
+   *                      Easily customize UI components like alerts, tabs, and
+   *                      grids to fit your design needs.
+   *                    </UI.alert>
+   *                  ),
+   *                },
+   *              ]}
+   *            />
+   * @example <UI.list items={[{ children: <UI.text text="Item 1" /> }, { children: <UI.text text="Item 2" /> }]} />
+   */
+  list: (() => {
+    const Comp = dynamic(() => import("./list"), { loading });
+    Comp.displayName = "UI.list";
+    return Comp;
+  })(),
+  /**
+   * @description The actionicon UI element for icon buttons
+   * @example <UI.actionicon><UI.icon icon="add" /></UI.actionicon>
+   * @example <UI.actionicon variant="filled" color="blue"><UI.icon icon="search" /></UI.actionicon>
+   */
+  actionicon: (() => {
+    const Comp = dynamic(() => import("./actionicon"), { loading });
+    Comp.displayName = "UI.actionicon";
+    return Comp;
+  })(),
+  /**
+   * @description The aspectratio UI element to maintain width/height ratio
+   * @example <UI.aspectratio ratio={16/9}>Content here</UI.aspectratio>
+   * @example <UI.aspectratio ratio={1}>Square content</UI.aspectratio>
+   */
+  aspectratio: (() => {
+    const Comp = dynamic(() => import("./aspectratio"), { loading });
+    Comp.displayName = "UI.aspectratio";
+    return Comp;
+  })(),
+  /**
+   * @description The box UI element, a basic container for layout
+   * @example <UI.box>Content here</UI.box>
+   * @example <UI.box p={16} bg="gray.1">Content with padding and background</UI.box>
+   */
+  box: (() => {
+    const Comp = dynamic(() => import("./box"), { loading });
+    Comp.displayName = "UI.box";
+    return Comp;
+  })(),
+  /**
+   * @description The video UI element for displaying video content
+   * @example <UI.video src="https://example.com/video.mp4" />
+   * @example <UI.video src="https://example.com/video.mp4" autoPlay />
+   */
+  video: (() => {
+    const Comp = dynamic(() => import("./video"), { loading });
+    Comp.displayName = "UI.video";
+    return Comp;
+  })(),
+  /**
+   * @description The badge UI element for labels and status indicators
+   * @example <UI.badge>New</UI.badge>
+   * @example <UI.badge color="red">Important</UI.badge>
+   */
+  badge: (() => {
+    const Comp = dynamic(() => import("./badge"), { loading });
+    Comp.displayName = "UI.badge";
+    return Comp;
+  })(),
+  /**
+   * @description The card UI element for content containers with optional border and shadow
+   * @example <UI.card>Card content</UI.card>
+   * @example <UI.card withBorder shadow="md" p="md">Card with border and shadow</UI.card>
+   */
+  card: (() => {
+    const Comp = dynamic(() => import("./card"), { loading });
+    Comp.displayName = "UI.card";
+    return Comp;
+  })(),
+  /**
+   * @description The center UI element for centering content horizontally and vertically
+   * @example <UI.center>Centered content</UI.center>
+   * @example <UI.center h={200}>Centered vertically and horizontally</UI.center>
+   */
+  center: (() => {
+    const Comp = dynamic(() => import("./center"), { loading });
+    Comp.displayName = "UI.center";
+    return Comp;
+  })(),
+  /**
+   * @description The code UI element for displaying formatted code snippets
+   * @example <UI.code code="const x = 5;" codeLang="javascript" />
+   * @example <UI.code code="function hello() { return 'world'; }" codeLang="typescript" colorScheme="dark" />
+   */
+  code: (() => {
+    const Comp = dynamic(() => import("./code"), { loading });
+    Comp.displayName = "UI.code";
+    return Comp;
+  })(),
+  /**
+   * @description The container UI element for responsive content width
+   * @example <UI.container>Content with responsive max-width</UI.container>
+   * @example <UI.container size="sm">Small container</UI.container>
+   */
+  container: (() => {
+    const Comp = dynamic(() => import("./container"), { loading });
+    Comp.displayName = "UI.container";
+    return Comp;
+  })(),
+  /**
+   * @description The divider UI element for visual separation
+   * @example <UI.divider />
+   * @example <UI.divider label="Section" labelPosition="center" />
+   */
+  divider: (() => {
+    const Comp = dynamic(() => import("./divider"), { loading });
+    Comp.displayName = "UI.divider";
+    return Comp;
+  })(),
+  /**
+   * @description The flex UI element for flexible layouts using flexbox
+   * @example <UI.flex>Flex container</UI.flex>
+   * @example <UI.flex direction="column" gap={8} align="center">Column flex layout</UI.flex>
+   */
+  flex: (() => {
+    const Comp = dynamic(() => import("./flex"), { loading });
+    Comp.displayName = "UI.flex";
+    return Comp;
+  })(),
+  /**
+   * @description The grid UI element for creating grid layouts
+   * @example <UI.grid>Grid container</UI.grid>
+   * @example <UI.grid cols={3} gutter="md">Three column grid</UI.grid>
+   */
+  grid: (() => {
+    const Comp = dynamic(() => import("./grid"), { loading });
+    Comp.displayName = "UI.grid";
+    return Comp;
+  })(),
+  /**
+   * @description The simplegrid UI element for basic grid layouts
+   * @example <UI.simplegrid>Simple grid</UI.simplegrid>
+   * @example <UI.simplegrid cols={2}>Two column grid</UI.simplegrid>
+   */
+  simplegrid: (() => {
+    const Comp = dynamic(() => import("./simplegrid"), { loading });
+    Comp.displayName = "UI.simplegrid";
+    return Comp;
+  })(),
+  /**
+   * @description The space UI element for adding vertical or horizontal space
+   * @example <UI.space h={20} />
+   * @example <UI.space w={10} />
+   */
+  space: (() => {
+    const Comp = dynamic(() => import("./space"), { loading });
+    Comp.displayName = "UI.space";
+    return Comp;
+  })(),
+  /**
+   * @description The checkbox UI element for boolean selections
+   * @example <UI.checkbox label="Accept terms" />
+   * @example <UI.checkbox label="Subscribe" defaultChecked />
+   */
+  checkbox: (() => {
+    const Comp = dynamic(() => import("./checkbox"), { loading });
+    Comp.displayName = "UI.checkbox";
+    return Comp;
+  })(),
+  /**
+   * @description The chip UI element for toggleable selection items
+   * @example <UI.chip value="react">React</UI.chip>
+   * @example <UI.chip value="vue" checked>Vue</UI.chip>
+   */
+  chip: (() => {
+    const Comp = dynamic(() => import("./chip"), { loading });
+    Comp.displayName = "UI.chip";
+    return Comp;
+  })(),
+  /**
+   * @description The colorinput UI element for selecting colors with text input
+   * @example <UI.colorinput label="Pick a color" />
+   * @example <UI.colorinput label="Theme color" defaultValue="#1C7ED6" />
+   */
+  colorinput: (() => {
+    const Comp = dynamic(() => import("./colorinput"), { loading });
+    Comp.displayName = "UI.colorinput";
+    return Comp;
+  })(),
+  /**
+   * @description The colorpicker UI element for selecting colors visually
+   * @example <UI.colorpicker />
+   * @example <UI.colorpicker format="rgba" swatches={['#F44336', '#2196F3']} />
+   */
+  colorpicker: (() => {
+    const Comp = dynamic(() => import("./colorpicker"), { loading });
+    Comp.displayName = "UI.colorpicker";
+    return Comp;
+  })(),
+  /**
+   * @description The fieldset UI element for grouping form controls
+   * @example <UI.fieldset legend="Personal Information">Form fields here</UI.fieldset>
+   * @example <UI.fieldset legend="Contact" variant="filled">Contact fields</UI.fieldset>
+   */
+  fieldset: (() => {
+    const Comp = dynamic(() => import("./fieldset"), { loading });
+    Comp.displayName = "UI.fieldset";
+    return Comp;
+  })(),
+  /**
+   * @description The fileinput UI element for file uploads
+   * @example <UI.fileinput label="Upload file" />
+   * @example <UI.fileinput label="Upload resume" accept=".pdf,.docx" />
+   */
+  fileinput: (() => {
+    const Comp = dynamic(() => import("./fileinput"), { loading });
+    Comp.displayName = "UI.fileinput";
+    return Comp;
+  })(),
+  /**
+   * @description The input UI element, base component for text inputs
+   * @example <UI.input placeholder="Enter value" />
+   * @example <UI.input placeholder="Search" leftSection={<UI.icon icon="search" />} />
+   */
+  input: (() => {
+    const Comp = dynamic(() => import("./input"), { loading });
+    Comp.displayName = "UI.input";
+    return Comp;
+  })(),
+  /**
+   * @description The jsoninput UI element for structured JSON data entry
+   * @example <UI.jsoninput label="Config" />
+   * @example <UI.jsoninput label="Settings" defaultValue={{ theme: "light" }} />
+   */
+  jsoninput: (() => {
+    const Comp = dynamic(() => import("./jsoninput"), { loading });
+    Comp.displayName = "UI.jsoninput";
+    return Comp;
+  })(),
+  /**
+   * @description The nativeselect UI element for dropdown selection using native controls
+   * @example <UI.nativeselect data={["Option 1", "Option 2"]} />
+   * @example <UI.nativeselect label="Country" data={["USA", "Canada", "UK"]} />
+   */
+  nativeselect: (() => {
+    const Comp = dynamic(() => import("./nativeselect"), { loading });
+    Comp.displayName = "UI.nativeselect";
+    return Comp;
+  })(),
+  /**
+   * @description The numberinput UI element for numeric value entry
+   * @example <UI.numberinput label="Quantity" />
+   * @example <UI.numberinput label="Price" min={0} step={0.01} precision={2} />
+   */
+  numberinput: (() => {
+    const Comp = dynamic(() => import("./numberinput"), { loading });
+    Comp.displayName = "UI.numberinput";
+    return Comp;
+  })(),
+  /**
+   * @description The passwordinput UI element for secure password entry
+   * @example <UI.passwordinput label="Password" />
+   * @example <UI.passwordinput label="Password" withStrengthMeter />
+   */
+  passwordinput: (() => {
+    const Comp = dynamic(() => import("./passwordinput"), { loading });
+    Comp.displayName = "UI.passwordinput";
+    return Comp;
+  })(),
+  /**
+   * @description The pininput UI element for code verification input
+   * @example <UI.pininput length={4} />
+   * @example <UI.pininput length={6} oneTimeCode />
+   */
+  pininput: (() => {
+    const Comp = dynamic(() => import("./pininput"), { loading });
+    Comp.displayName = "UI.pininput";
+    return Comp;
+  })(),
+  /**
+   * @description The radio UI element for single-option selection
+   * @example <UI.radio label="Option 1" name="option" value="1" />
+   * @example <UI.radio label="Option 2" name="option" value="2" defaultChecked />
+   */
+  radio: (() => {
+    const Comp = dynamic(() => import("./radio"), { loading });
+    Comp.displayName = "UI.radio";
+    return Comp;
+  })(),
+  /**
+   * @description The rating UI element for visual scoring
+   * @example <UI.rating defaultValue={3} />
+   * @example <UI.rating count={10} fractions={2} />
+   */
+  rating: (() => {
+    const Comp = dynamic(() => import("./rating"), { loading });
+    Comp.displayName = "UI.rating";
+    return Comp;
+  })(),
+  /**
+   * @description The segmentedcontrol UI element for button-like option selection
+   * @example <UI.segmentedcontrol data={["React", "Angular", "Vue"]} />
+   * @example <UI.segmentedcontrol data={[{label: "S", value: "sm"}, {label: "M", value: "md"}]} />
+   */
+  segmentedcontrol: (() => {
+    const Comp = dynamic(() => import("./segmentedcontrol"), { loading });
+    Comp.displayName = "UI.segmentedcontrol";
+    return Comp;
+  })(),
+  /**
+   * @description The slider UI element for selecting value from a range
+   * @example <UI.slider defaultValue={50} />
+   * @example <UI.slider min={0} max={100} step={5} marks={[{value: 20, label: '20%'}, {value: 80, label: '80%'}]} />
+   */
+  slider: (() => {
+    const Comp = dynamic(() => import("./slider"), { loading });
+    Comp.displayName = "UI.slider";
+    return Comp;
+  })(),
+  /**
+   * @description The switch UI element for toggling options
+   * @example <UI.switch label="Dark mode" />
+   * @example <UI.switch label="Notifications" defaultChecked size="lg" />
+   */
+  switch: (() => {
+    const Comp = dynamic(() => import("./switch"), { loading });
+    Comp.displayName = "UI.switch";
+    return Comp;
+  })(),
+  /**
+   * @description The textarea UI element for multi-line text input
+   * @example <UI.textarea placeholder="Enter description" />
+   * @example <UI.textarea label="Bio" autosize minRows={3} maxRows={6} />
+   */
+  textarea: (() => {
+    const Comp = dynamic(() => import("./textarea"), { loading });
+    Comp.displayName = "UI.textarea";
+    return Comp;
+  })(),
+  /**
+   * @description The textinput UI element for single-line text input
+   * @example <UI.textinput placeholder="Username" />
+   * @example <UI.textinput label="Email" type="email" required />
+   */
+  textinput: (() => {
+    const Comp = dynamic(() => import("./textinput"), { loading });
+    Comp.displayName = "UI.textinput";
+    return Comp;
+  })(),
+  /**
+   * @description The autocomplete UI element for text input with suggestions
+   * @example <UI.autocomplete data={["React", "Angular", "Vue"]} label="Framework" />
+   * @example <UI.autocomplete data={["USA", "Canada", "UK"]} placeholder="Country" limit={5} />
+   */
+  autocomplete: (() => {
+    const Comp = dynamic(() => import("./autocomplete"), { loading });
+    Comp.displayName = "UI.autocomplete";
+    return Comp;
+  })(),
+  /**
+   * @description The combobox UI element for customizable dropdown selection
+   * @example <UI.combobox data={["Option 1", "Option 2"]} />
+   * @example <UI.combobox data={[{value: "1", label: "Option 1"}, {value: "2", label: "Option 2"}]} searchable />
+   */
+  combobox: (() => {
+    const Comp = dynamic(() => import("./combobox"), { loading });
+    Comp.displayName = "UI.combobox";
+    return Comp;
+  })(),
+  /**
+   * @description The multiselect UI element for selecting multiple options
+   * @example <UI.multiselect data={["React", "Angular", "Vue"]} label="Frameworks" />
+   * @example <UI.multiselect data={["JavaScript", "TypeScript", "Python"]} label="Languages" searchable />
+   */
+  multiselect: (() => {
+    const Comp = dynamic(() => import("./multiselect"), { loading });
+    Comp.displayName = "UI.multiselect";
+    return Comp;
+  })(),
+  /**
+   * @description The pill UI element for displaying compact information
+   * @example <UI.pill>New</UI.pill>
+   * @example <UI.pill withRemoveButton>Removable</UI.pill>
+   */
+  pill: (() => {
+    const Comp = dynamic(() => import("./pill"), { loading });
+    Comp.displayName = "UI.pill";
+    return Comp;
+  })(),
+  /**
+   * @description The pillsinput UI element for creating tags/pills from input
+   * @example <UI.pillsinput label="Tags" />
+   * @example <UI.pillsinput label="Skills" defaultValue={["React", "TypeScript"]} />
+   */
+  pillsinput: (() => {
+    const Comp = dynamic(() => import("./pillsinput"), { loading });
+    Comp.displayName = "UI.pillsinput";
+    return Comp;
+  })(),
+  /**
+   * @description The select UI element for dropdown selection
+   * @example <UI.select data={["Option 1", "Option 2"]} label="Choose one" />
+   * @example <UI.select data={[{value: "js", label: "JavaScript"}, {value: "ts", label: "TypeScript"}]} searchable />
+   */
+  select: (() => {
+    const Comp = dynamic(() => import("./select"), { loading });
+    Comp.displayName = "UI.select";
+    return Comp;
+  })(),
+  /**
+   * @description The tagsinput UI element for creating tags from input
+   * @example <UI.tagsinput label="Tags" />
+   * @example <UI.tagsinput label="Technologies" defaultValue={["React", "Next.js"]} />
+   */
+  tagsinput: (() => {
+    const Comp = dynamic(() => import("./tagsinput"), { loading });
+    Comp.displayName = "UI.tagsinput";
+    return Comp;
+  })(),
+  /**
+   * @description The icon UI element for displaying vector icons
+   * @example <UI.icon icon="user" />
+   * @example <UI.icon icon="settings" color="blue" size={24} />
+   */
+  icon: (() => {
+    const Comp = dynamic(() => import("./icon"), { loading });
+    Comp.displayName = "UI.icon";
+    return Comp;
+  })(),
+  /**
+   * @description The button UI element for user interaction
+   * @example <UI.button>Click me</UI.button>
+   * @example <UI.button variant="filled" color="green" size="lg">Submit</UI.button>
+   */
+  button: (() => {
+    const Comp = dynamic(() => import("./button"), { loading });
+    Comp.displayName = "UI.button";
+    return Comp;
+  })(),
+  /**
+   * @description The closebutton UI element for dismissing content
+   * @example <UI.closebutton />
+   * @example <UI.closebutton size="lg" color="red" />
+   */
+  closebutton: (() => {
+    const Comp = dynamic(() => import("./closebutton"), { loading });
+    Comp.displayName = "UI.closebutton";
+    return Comp;
+  })(),
+  /**
+   * @description The filebutton UI element for file selection with button appearance
+   * @example <UI.filebutton>Upload file</UI.filebutton>
+   * @example <UI.filebutton accept="image/*" multiple>Select images</UI.filebutton>
+   */
+  filebutton: (() => {
+    const Comp = dynamic(() => import("./filebutton"), { loading });
+    Comp.displayName = "UI.filebutton";
+    return Comp;
+  })(),
+  /**
+   * @description The unstyledbutton UI element for button functionality without styling
+   * @example <UI.unstyledbutton>Text only button</UI.unstyledbutton>
+   * @example <UI.unstyledbutton onClick={() => alert('Clicked')}>Custom styled button</UI.unstyledbutton>
+   */
+  unstyledbutton: (() => {
+    const Comp = dynamic(() => import("./unstyledbutton"), { loading });
+    Comp.displayName = "UI.unstyledbutton";
+    return Comp;
+  })(),
+  /**
+   * @description The anchor UI element for navigation links
+   * @example <UI.anchor href="/about">About</UI.anchor>
+   * @example <UI.anchor href="https://example.com" target="_blank">External link</UI.anchor>
+   */
+  anchor: (() => {
+    const Comp = dynamic(() => import("./anchor"), { loading });
+    Comp.displayName = "UI.anchor";
+    return Comp;
+  })(),
+  /**
+   * @description The breadcrumbs UI element for navigation path display
+   * @example <UI.breadcrumbs items={[{title: 'Home', href: '/'}, {title: 'Blog', href: '/blog'}]} />
+   * @example <UI.breadcrumbs separator="→" items={[{title: 'Dashboard', href: '/dashboard'}, {title: 'Settings'}]} />
+   */
+  breadcrumbs: (() => {
+    const Comp = dynamic(() => import("./breadcrumbs"), { loading });
+    Comp.displayName = "UI.breadcrumbs";
+    return Comp;
+  })(),
+  /**
+   * @description The burger UI element for toggle button (typically for mobile menus)
+   * @example <UI.burger opened={false} onClick={() => setOpened(!opened)} />
+   * @example <UI.burger opened={menuOpen} color="blue" size="lg" />
+   */
+  burger: (() => {
+    const Comp = dynamic(() => import("./burger"), { loading });
+    Comp.displayName = "UI.burger";
+    return Comp;
+  })(),
+  /**
+   * @description The navlink UI element for navigation menu items
+   * @example <UI.navlink label="Dashboard" />
+   * @example <UI.navlink label="Settings" icon={<UI.icon icon="settings" />} active />
+   */
+  navlink: (() => {
+    const Comp = dynamic(() => import("./navlink"), { loading });
+    Comp.displayName = "UI.navlink";
+    return Comp;
+  })(),
+  /**
+   * @description The pagination UI element for navigating through pages
+   * @example <UI.pagination total={10} />
+   * @example <UI.pagination total={20} initialPage={3} boundaries={1} siblings={1} />
+   */
+  pagination: (() => {
+    const Comp = dynamic(() => import("./pagination"), { loading });
+    Comp.displayName = "UI.pagination";
+    return Comp;
+  })(),
+  /**
+   * @description The stepper UI element for multi-step processes
+   * @example <UI.stepper active={1} steps={["Step 1", "Step 2", "Step 3"]} />
+   * @example <UI.stepper active={0} orientation="vertical" steps={["Account", "Address", "Confirm"]} />
+   */
+  stepper: (() => {
+    const Comp = dynamic(() => import("./stepper"), { loading });
+    Comp.displayName = "UI.stepper";
+    return Comp;
+  })(),
+  /**
+   * @description The tabs UI element for tabbed content navigation
+   * @example <UI.tabs tabs={[{header: "Tab 1", content: "Content 1", value: "1"}, {header: "Tab 2", content: "Content 2", value: "2"}]} />
+   * @example <UI.tabs tabs={[{header: "Profile", icon: <UI.icon icon="user" />, content: "Profile content", value: "profile"}]} variant="pills" />
+   */
+  tabs: (() => {
+    const Comp = dynamic(() => import("./tabs"), { loading });
+    Comp.displayName = "UI.tabs";
+    return Comp;
+  })(),
+  /**
+   * @description The table UI element for displaying tabular data with sorting, pagination and customization options
+   * @example <UI.table
+   *   data={[
+   *     { id: 1, name: 'John', age: 30 },
+   *     { id: 2, name: 'Jane', age: 25 }
+   *   ]}
+   *   columns={[
+   *     { accessor: 'name', title: 'Name' },
+   *     { accessor: 'age', title: 'Age' }
+   *   ]}
+   * />
+   * @example <UI.table
+   *   data={products}
+   *   columns={[
+   *     { accessor: 'name', title: 'Product' },
+   *     { accessor: 'price', title: 'Price', render: (item) => `$${item.price}` }
+   *   ]}
+   *   striped
+   *   highlightOnHover
+   *   withColumnBorders
+   * />
+   */
+  table: (() => {
+    const Comp = dynamic(() => import("./table"), { loading });
+    Comp.displayName = "UI.table";
+    return Comp;
+  })(),
+  /**
+   * @description The title UI element for section headings
+   * @example <UI.title text="Welcome" />
+   * @example <UI.title order={2} text="Section Title" />
+   */
+  title: (() => {
+    const Comp = dynamic(() => import("./title"), { loading });
+    Comp.displayName = "UI.title";
+    return Comp;
+  })(),
+  /**
+   * @description The text UI element for displaying and styling text content with extensive typography controls
+   * @example <UI.text text="Hello World" /> // Basic text
+   * @example <UI.text
+   *   text="Styled text"
+   *   fz={20} // Font size
+   *   fw={500} // Font weight
+   *   tt="capitalize" // Text transform
+   *   c="blue" // Color
+   *   ta="center" // Text align
+   *   lh={1.5} // Line height
+   *   fs="italic" // Font style
+   *   td="underline" // Text decoration
+   * />
+   * @example <UI.text
+   *   text="Responsive text"
+   *   fz={{ base: 14, sm: 16, lg: 18 }} // Responsive font sizes
+   *   c={{ light: 'dark.9', dark: 'gray.2' }} // Theme-aware colors
+   * />
+   */
+  text: (() => {
+    const Comp = dynamic(() => import("./text"), { loading });
+    Comp.displayName = "UI.text";
+    return Comp;
+  })(),
+  /**
+   * @description The tree UI element for hierarchical data display
+   * @example <UI.tree data={[{label: "Parent", children: [{label: "Child"}]}]} />
+   * @example <UI.tree data={[{label: "Documents", children: [{label: "Reports"}]}]} initiallyOpened={["0"]} />
+   */
+  tree: (() => {
+    const Comp = dynamic(() => import("./tree"), { loading });
+    Comp.displayName = "UI.tree";
+    return Comp;
+  })(),
+  /**
+   * @description The transition UI element for animating content appearance
+   * @example  <UI.transition mounted transition="fade-up">{(styles) => <UI.text text="Text fades up" style={styles} />}</UI.transition>
+   * @example  <UI.transition mounted transition="fade-down">{(styles) => <UI.text text="Text fades down" style={styles} />}</UI.transition>
+   */
+  transition: (() => {
+    const Comp = dynamic(() => import("./transition"), { loading });
+    Comp.displayName = "UI.transition";
+    return Comp;
+  })(),
+  /**
+   * @description The image UI element for displaying images with responsive sizing and loading optimizations
+   * @example <UI.image src="/image.jpg" alt="Description" /> // Basic image
+   * @example <UI.image
+   *   src="/image.jpg"
+   *   alt="Description"
+   *   height={300}
+   *   width={400}
+   *   fit="contain" // 'cover', 'fill', 'none', 'scale-down'
+   *   radius="md" // Border radius
+   *   withPlaceholder // Shows placeholder while loading
+   *   loading="lazy" // Lazy loading
+   * />
+   * @example <UI.image
+   *   src="/banner.jpg"
+   *   alt="Banner"
+   *   height="auto"
+   *   width="100%"
+   *   styles={{ image: { objectPosition: 'top center' } }}
+   * />
+   */
+  image: (() => {
+    const Comp = dynamic(() => import("./image"), { loading });
+    Comp.displayName = "UI.image";
+    return Comp;
+  })(),
+  /**
+   * @description The inviewport UI element to detect when content is visible in viewport
+   * @example <UI.inviewport onEnterViewport={() => console.log('Visible')}>Content</UI.inviewport>
+   * @example <UI.inviewport threshold={0.5}>Appears when 50% visible</UI.inviewport>
+   */
+  inviewport: (() => {
+    const Comp = dynamic(() => import("./inviewport"), { loading });
+    Comp.displayName = "UI.inviewport";
+    return Comp;
+  })(),
+  /**
+   * @description The hoverable UI element for hover state detection
+   * @example <UI.hoverable>{(hovered) => <div>Hover me: {hovered ? 'Hovered' : 'Not hovered'}</div>}</UI.hoverable>
+   * @example <UI.hoverable>{(hovered) => <UI.box bg={hovered ? 'blue.1' : 'transparent'}>Hover effect</UI.box>}</UI.hoverable>
+   */
+  hoverable: (() => {
+    const Comp = dynamic(() => import("./hoverable"), { loading });
+    Comp.displayName = "UI.hoverable";
+    return Comp;
+  })(),
+  /**
+   * @description The arrow UI element for pointers and indicators
+   * @example <UI.arrow />
+   * @example <UI.arrow size={12} position="center" />
+   */
+  arrow: (() => {
+    const Comp = dynamic(() => import("./arrow"), { loading });
+    Comp.displayName = "UI.arrow";
+    return Comp;
+  })(),
+  /**
+   * @description The infobox UI element for displaying information in a box
+   * @example <UI.infobox title="Info" description="This is an info box" />
+   * @example <UI.infobox title="Warning" description="This is a warning box" color="red" />
+   */
+  infobox: (() => {
+    const Comp = dynamic(() => import("./infobox"), { loading });
+    Comp.displayName = "UI.infobox";
+    return Comp;
+  })(),
+  /**
+   * @description The drawer UI element
+   */
+  drawer: (() => {
+    const Comp = dynamic(() => import("./drawer"), { loading });
+    Comp.displayName = "UI.drawer";
+    return Comp;
+  })(),
+  /**
+   * @description The avatar UI element for displaying user profile pictures
+   * @example <UI.avatar src="https://example.com/avatar.jpg" />
+   * @example <UI.avatar src="https://example.com/avatar.jpg" radius="xl" size="md" />
+   */
+  avatar: (() => {
+    const Comp = dynamic(() => import("./avatar"), { loading });
+    Comp.displayName = "UI.avatar";
+    return Comp;
+  })(),
+  /**
+   * @description The menu UI element for dropdown menus
+   * @example <UI.menu label="Options" items={[{ type: 'item', text: 'Settings' }]} />
+   */
+  menu: (() => {
+    const Comp = dynamic(() => import("./menu"), { loading });
+    Comp.displayName = "UI.menu";
+    return Comp;
+  })(),
+};
+
+// import Affix from "./affix";
+// import Alert from "./alert";
+// import Accordion from "./accordion";
+// import Terminal from "./terminal";
+// import Form from "./form";
+// import List from "./list";
+// import ActionIcon from "./actionicon";
+// import AspectRatio from "./aspectratio";
+// import Box from "./box";
+// import Video from "./video";
+// import Badge from "./badge";
+// import Card from "./card";
+// import Center from "./center";
+// import Code from "./code";
+// import Container from "./container";
+// import Divider from "./divider";
+// import Flex from "./flex";
+// import Grid from "./grid";
+// import SimpleGrid from "./simplegrid";
+// import Space from "./space";
+// import Checkbox from "./checkbox";
+// import Chip from "./chip";
+// import ColorInput from "./colorinput";
+// import ColorPicker from "./colorpicker";
+// import Fieldset from "./fieldset";
+// import FileInput from "./fileinput";
+// import Input from "./input";
+// import JsonInput from "./jsoninput";
+// import NativeSelect from "./nativeselect";
+// import NumberInput from "./numberinput";
+// import PasswordInput from "./passwordinput";
+// import PinInput from "./pininput";
+// import Radio from "./radio";
+// import Rating from "./rating";
+// import SegmentedControl from "./segmentedcontrol";
+// import Slider from "./slider";
+// import Switch from "./switch";
+// import Textarea from "./textarea";
+// import TextInput from "./textinput";
+// import Autocomplete from "./autocomplete";
+// import Combobox from "./combobox";
+// import MultiSelect from "./multiselect";
+// import Pill from "./pill";
+// import PillsInput from "./pillsinput";
+// import Select from "./select";
+// import TagsInput from "./tagsinput";
+// import Icon from "./icon";
+// import Button from "./button";
+// import CloseButton from "./closebutton";
+// import FileButton from "./filebutton";
+// import UnstyledButton from "./unstyledbutton";
+// import Anchor from "./anchor";
+// import Breadcrumbs from "./breadcrumbs";
+// import Burger from "./burger";
+// import NavLink from "./navlink";
+// import Pagination from "./pagination";
+// import Stepper from "./stepper";
+// import Tabs from "./tabs";
+// import Table from "./table";
+// import Title from "./title";
+// import Text from "./text";
+// import Tree from "./tree";
+// import Transition from "./transition";
+// import Image from "./image";
+// import InViewport from "./inviewport";
+// import Hoverable from "./hoverable";
+// import Arrow from "./arrow";
+// import InfoBox from "./infobox";
+
+// export const UI = {
+//   /**
+//    * @description The affix UI element to pin content to the top or bottom of the page
+//    */
+//   affix: Affix,
+//   /**
+//    * @description The alert UI element to display important messages or notifications
+//    * @example <UI.alert title="Hello World" />
+//    * @example <UI.alert title="Hello World" color="red" />
+//    * @example <UI.alert title="Hello World" withCloseButton />
+//    */
+//   alert: Alert,
+//   /**
+//    * @description The accordion UI element for collapsible content sections
+//    * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} />
+//    * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} defaultValue="1" />
+//    * @example <UI.accordion items={[{ id: "1", label: "Hello World", content: "Content here" }]} defaultValue="1" variant="separated" />
+//    */
+//   accordion: Accordion,
+//   /**
+//    * @description The terminal UI element for displaying command-line interface
+//    * @example <UI.terminal commands={["npm install", "npm start"]} />
+//    * @example <UI.terminal commands={["npm install"]} autorun />
+//    */
+//   terminal: Terminal,
+//   /**
+//    * @description The form UI element for collecting user input
+//    * @example <UI.form onSubmit={(values) => console.log(values)} />
+//    * @example <UI.form initialValues={{ name: "John" }} onSubmit={(values) => console.log(values)} />
+//    */
+//   form: Form,
+//   /**
+//    * @description The list UI element for displaying items in an organized manner
+//    * @example <UI.list
+//    *              listStyleType="none"
+//    *              items={[
+//    *                {
+//    *                  children: (
+//    *                    <UI.alert title="Dynamic Imports" color="blue">
+//    *                      Efficiently load components with dynamic imports to
+//    *                      improve performance.
+//    *                    </UI.alert>
+//    *                  ),
+//    *                },
+//    *
+//    *                {
+//    *                  children: (
+//    *                    <UI.alert title="SSR Support" color="green">
+//    *                      Server-side rendering capabilities for faster initial
+//    *                      page loads and SEO benefits.
+//    *                    </UI.alert>
+//    *                  ),
+//    *                },
+//    *
+//    *                {
+//    *                  children: (
+//    *                    <UI.alert
+//    *                      title="Customizable UI Elements"
+//    *                      color="purple"
+//    *                    >
+//    *                      Easily customize UI components like alerts, tabs, and
+//    *                      grids to fit your design needs.
+//    *                    </UI.alert>
+//    *                  ),
+//    *                },
+//    *              ]}
+//    *            />
+//    * @example <UI.list items={[{ children: <UI.text text="Item 1" /> }, { children: <UI.text text="Item 2" /> }]} />
+//    */
+//   list: List,
+//   /**
+//    * @description The actionicon UI element for icon buttons
+//    * @example <UI.actionicon><UI.icon icon="add" /></UI.actionicon>
+//    * @example <UI.actionicon variant="filled" color="blue"><UI.icon icon="search" /></UI.actionicon>
+//    */
+//   actionicon: ActionIcon,
+//   /**
+//    * @description The aspectratio UI element to maintain width/height ratio
+//    * @example <UI.aspectratio ratio={16/9}>Content here</UI.aspectratio>
+//    * @example <UI.aspectratio ratio={1}>Square content</UI.aspectratio>
+//    */
+//   aspectratio: AspectRatio,
+//   /**
+//    * @description The box UI element, a basic container for layout
+//    * @example <UI.box>Content here</UI.box>
+//    * @example <UI.box p={16} bg="gray.1">Content with padding and background</UI.box>
+//    */
+//   box: Box,
+//   /**
+//    * @description The video UI element for displaying video content
+//    * @example <UI.video src="https://example.com/video.mp4" />
+//    * @example <UI.video src="https://example.com/video.mp4" autoPlay />
+//    */
+//   video: Video,
+//   /**
+//    * @description The badge UI element for labels and status indicators
+//    * @example <UI.badge>New</UI.badge>
+//    * @example <UI.badge color="red">Important</UI.badge>
+//    */
+//   badge: Badge,
+//   /**
+//    * @description The card UI element for content containers with optional border and shadow
+//    * @example <UI.card>Card content</UI.card>
+//    * @example <UI.card withBorder shadow="md" p="md">Card with border and shadow</UI.card>
+//    */
+//   card: Card,
+//   /**
+//    * @description The center UI element for centering content horizontally and vertically
+//    * @example <UI.center>Centered content</UI.center>
+//    * @example <UI.center h={200}>Centered vertically and horizontally</UI.center>
+//    */
+//   center: Center,
+//   /**
+//    * @description The code UI element for displaying formatted code snippets
+//    * @example <UI.code code="const x = 5;" codeLang="javascript" />
+//    * @example <UI.code code="function hello() { return 'world'; }" codeLang="typescript" colorScheme="dark" />
+//    */
+//   code: Code,
+//   /**
+//    * @description The container UI element for responsive content width
+//    * @example <UI.container>Content with responsive max-width</UI.container>
+//    * @example <UI.container size="sm">Small container</UI.container>
+//    */
+//   container: Container,
+//   /**
+//    * @description The divider UI element for visual separation
+//    * @example <UI.divider />
+//    * @example <UI.divider label="Section" labelPosition="center" />
+//    */
+//   divider: Divider,
+//   /**
+//    * @description The flex UI element for flexible layouts using flexbox
+//    * @example <UI.flex>Flex container</UI.flex>
+//    * @example <UI.flex direction="column" gap={8} align="center">Column flex layout</UI.flex>
+//    */
+//   flex: Flex,
+//   /**
+//    * @description The grid UI element for creating grid layouts
+//    * @example <UI.grid>Grid container</UI.grid>
+//    * @example <UI.grid cols={3} gutter="md">Three column grid</UI.grid>
+//    */
+//   grid: Grid,
+//   /**
+//    * @description The simplegrid UI element for basic grid layouts
+//    * @example <UI.simplegrid>Simple grid</UI.simplegrid>
+//    * @example <UI.simplegrid cols={2}>Two column grid</UI.simplegrid>
+//    */
+//   simplegrid: SimpleGrid,
+//   /**
+//    * @description The space UI element for adding vertical or horizontal space
+//    * @example <UI.space h={20} />
+//    * @example <UI.space w={10} />
+//    */
+//   space: Space,
+//   /**
+//    * @description The checkbox UI element for boolean selections
+//    * @example <UI.checkbox label="Accept terms" />
+//    * @example <UI.checkbox label="Subscribe" defaultChecked />
+//    */
+//   checkbox: Checkbox,
+//   /**
+//    * @description The chip UI element for toggleable selection items
+//    * @example <UI.chip value="react">React</UI.chip>
+//    * @example <UI.chip value="vue" checked>Vue</UI.chip>
+//    */
+//   chip: Chip,
+//   /**
+//    * @description The colorinput UI element for selecting colors with text input
+//    * @example <UI.colorinput label="Pick a color" />
+//    * @example <UI.colorinput label="Theme color" defaultValue="#1C7ED6" />
+//    */
+//   colorinput: ColorInput,
+//   /**
+//    * @description The colorpicker UI element for selecting colors visually
+//    * @example <UI.colorpicker />
+//    * @example <UI.colorpicker format="rgba" swatches={['#F44336', '#2196F3']} />
+//    */
+//   colorpicker: ColorPicker,
+//   /**
+//    * @description The fieldset UI element for grouping form controls
+//    * @example <UI.fieldset legend="Personal Information">Form fields here</UI.fieldset>
+//    * @example <UI.fieldset legend="Contact" variant="filled">Contact fields</UI.fieldset>
+//    */
+//   fieldset: Fieldset,
+//   /**
+//    * @description The fileinput UI element for file uploads
+//    * @example <UI.fileinput label="Upload file" />
+//    * @example <UI.fileinput label="Upload resume" accept=".pdf,.docx" />
+//    */
+//   fileinput: FileInput,
+//   /**
+//    * @description The input UI element, base component for text inputs
+//    * @example <UI.input placeholder="Enter value" />
+//    * @example <UI.input placeholder="Search" leftSection={<UI.icon icon="search" />} />
+//    */
+//   input: Input,
+//   /**
+//    * @description The jsoninput UI element for structured JSON data entry
+//    * @example <UI.jsoninput label="Config" />
+//    * @example <UI.jsoninput label="Settings" defaultValue={{ theme: "light" }} />
+//    */
+//   jsoninput: JsonInput,
+//   /**
+//    * @description The nativeselect UI element for dropdown selection using native controls
+//    * @example <UI.nativeselect data={["Option 1", "Option 2"]} />
+//    * @example <UI.nativeselect label="Country" data={["USA", "Canada", "UK"]} />
+//    */
+//   nativeselect: NativeSelect,
+//   /**
+//    * @description The numberinput UI element for numeric value entry
+//    * @example <UI.numberinput label="Quantity" />
+//    * @example <UI.numberinput label="Price" min={0} step={0.01} precision={2} />
+//    */
+//   numberinput: NumberInput,
+//   /**
+//    * @description The passwordinput UI element for secure password entry
+//    * @example <UI.passwordinput label="Password" />
+//    * @example <UI.passwordinput label="Password" withStrengthMeter />
+//    */
+//   passwordinput: PasswordInput,
+//   /**
+//    * @description The pininput UI element for code verification input
+//    * @example <UI.pininput length={4} />
+//    * @example <UI.pininput length={6} oneTimeCode />
+//    */
+//   pininput: PinInput,
+//   /**
+//    * @description The radio UI element for single-option selection
+//    * @example <UI.radio label="Option 1" name="option" value="1" />
+//    * @example <UI.radio label="Option 2" name="option" value="2" defaultChecked />
+//    */
+//   radio: Radio,
+//   /**
+//    * @description The rating UI element for visual scoring
+//    * @example <UI.rating defaultValue={3} />
+//    * @example <UI.rating count={10} fractions={2} />
+//    */
+//   rating: Rating,
+//   /**
+//    * @description The segmentedcontrol UI element for button-like option selection
+//    * @example <UI.segmentedcontrol data={["React", "Angular", "Vue"]} />
+//    * @example <UI.segmentedcontrol data={[{label: "S", value: "sm"}, {label: "M", value: "md"}]} />
+//    */
+//   segmentedcontrol: SegmentedControl,
+//   /**
+//    * @description The slider UI element for selecting value from a range
+//    * @example <UI.slider defaultValue={50} />
+//    * @example <UI.slider min={0} max={100} step={5} marks={[{value: 20, label: '20%'}, {value: 80, label: '80%'}]} />
+//    */
+//   slider: Slider,
+//   /**
+//    * @description The switch UI element for toggling options
+//    * @example <UI.switch label="Dark mode" />
+//    * @example <UI.switch label="Notifications" defaultChecked size="lg" />
+//    */
+//   switch: Switch,
+//   /**
+//    * @description The textarea UI element for multi-line text input
+//    * @example <UI.textarea placeholder="Enter description" />
+//    * @example <UI.textarea label="Bio" autosize minRows={3} maxRows={6} />
+//    */
+//   textarea: Textarea,
+//   /**
+//    * @description The textinput UI element for single-line text input
+//    * @example <UI.textinput placeholder="Username" />
+//    * @example <UI.textinput label="Email" type="email" required />
+//    */
+//   textinput: TextInput,
+//   /**
+//    * @description The autocomplete UI element for text input with suggestions
+//    * @example <UI.autocomplete data={["React", "Angular", "Vue"]} label="Framework" />
+//    * @example <UI.autocomplete data={["USA", "Canada", "UK"]} placeholder="Country" limit={5} />
+//    */
+//   autocomplete: Autocomplete,
+//   /**
+//    * @description The combobox UI element for customizable dropdown selection
+//    * @example <UI.combobox data={["Option 1", "Option 2"]} />
+//    * @example <UI.combobox data={[{value: "1", label: "Option 1"}, {value: "2", label: "Option 2"}]} searchable />
+//    */
+//   combobox: Combobox,
+//   /**
+//    * @description The multiselect UI element for selecting multiple options
+//    * @example <UI.multiselect data={["React", "Angular", "Vue"]} label="Frameworks" />
+//    * @example <UI.multiselect data={["JavaScript", "TypeScript", "Python"]} label="Languages" searchable />
+//    */
+//   multiselect: MultiSelect,
+//   /**
+//    * @description The pill UI element for displaying compact information
+//    * @example <UI.pill>New</UI.pill>
+//    * @example <UI.pill withRemoveButton>Removable</UI.pill>
+//    */
+//   pill: Pill,
+//   /**
+//    * @description The pillsinput UI element for creating tags/pills from input
+//    * @example <UI.pillsinput label="Tags" />
+//    * @example <UI.pillsinput label="Skills" defaultValue={["React", "TypeScript"]} />
+//    */
+//   pillsinput: PillsInput,
+//   /**
+//    * @description The select UI element for dropdown selection
+//    * @example <UI.select data={["Option 1", "Option 2"]} label="Choose one" />
+//    * @example <UI.select data={[{value: "js", label: "JavaScript"}, {value: "ts", label: "TypeScript"}]} searchable />
+//    */
+//   select: Select,
+//   /**
+//    * @description The tagsinput UI element for creating tags from input
+//    * @example <UI.tagsinput label="Tags" />
+//    * @example <UI.tagsinput label="Technologies" defaultValue={["React", "Next.js"]} />
+//    */
+//   tagsinput: TagsInput,
+//   /**
+//    * @description The icon UI element for displaying vector icons
+//    * @example <UI.icon icon="user" />
+//    * @example <UI.icon icon="settings" color="blue" size={24} />
+//    */
+//   icon: Icon,
+//   /**
+//    * @description The button UI element for user interaction
+//    * @example <UI.button>Click me</UI.button>
+//    * @example <UI.button variant="filled" color="green" size="lg">Submit</UI.button>
+//    */
+//   button: Button,
+//   /**
+//    * @description The closebutton UI element for dismissing content
+//    * @example <UI.closebutton />
+//    * @example <UI.closebutton size="lg" color="red" />
+//    */
+//   closebutton: CloseButton,
+//   /**
+//    * @description The filebutton UI element for file selection with button appearance
+//    * @example <UI.filebutton>Upload file</UI.filebutton>
+//    * @example <UI.filebutton accept="image/*" multiple>Select images</UI.filebutton>
+//    */
+//   filebutton: FileButton,
+//   /**
+//    * @description The unstyledbutton UI element for button functionality without styling
+//    * @example <UI.unstyledbutton>Text only button</UI.unstyledbutton>
+//    * @example <UI.unstyledbutton onClick={() => alert('Clicked')}>Custom styled button</UI.unstyledbutton>
+//    */
+//   unstyledbutton: UnstyledButton,
+//   /**
+//    * @description The anchor UI element for navigation links
+//    * @example <UI.anchor href="/about">About</UI.anchor>
+//    * @example <UI.anchor href="https://example.com" target="_blank">External link</UI.anchor>
+//    */
+//   anchor: Anchor,
+//   /**
+//    * @description The breadcrumbs UI element for navigation path display
+//    * @example <UI.breadcrumbs items={[{title: 'Home', href: '/'}, {title: 'Blog', href: '/blog'}]} />
+//    * @example <UI.breadcrumbs separator="→" items={[{title: 'Dashboard', href: '/dashboard'}, {title: 'Settings'}]} />
+//    */
+//   breadcrumbs: Breadcrumbs,
+//   /**
+//    * @description The burger UI element for toggle button (typically for mobile menus)
+//    * @example <UI.burger opened={false} onClick={() => setOpened(!opened)} />
+//    * @example <UI.burger opened={menuOpen} color="blue" size="lg" />
+//    */
+//   burger: Burger,
+//   /**
+//    * @description The navlink UI element for navigation menu items
+//    * @example <UI.navlink label="Dashboard" />
+//    * @example <UI.navlink label="Settings" icon={<UI.icon icon="settings" />} active />
+//    */
+//   navlink: NavLink,
+//   /**
+//    * @description The pagination UI element for navigating through pages
+//    * @example <UI.pagination total={10} />
+//    * @example <UI.pagination total={20} initialPage={3} boundaries={1} siblings={1} />
+//    */
+//   pagination: Pagination,
+//   /**
+//    * @description The stepper UI element for multi-step processes
+//    * @example <UI.stepper active={1} steps={["Step 1", "Step 2", "Step 3"]} />
+//    * @example <UI.stepper active={0} orientation="vertical" steps={["Account", "Address", "Confirm"]} />
+//    */
+//   stepper: Stepper,
+//   /**
+//    * @description The tabs UI element for tabbed content navigation
+//    * @example <UI.tabs tabs={[{header: "Tab 1", content: "Content 1", value: "1"}, {header: "Tab 2", content: "Content 2", value: "2"}]} />
+//    * @example <UI.tabs tabs={[{header: "Profile", icon: <UI.icon icon="user" />, content: "Profile content", value: "profile"}]} variant="pills" />
+//    */
+//   tabs: Tabs,
+//   /**
+//    * @description The table UI element for displaying tabular data with sorting, pagination and customization options
+//    * @example <UI.table
+//    *   data={[
+//    *     { id: 1, name: 'John', age: 30 },
+//    *     { id: 2, name: 'Jane', age: 25 }
+//    *   ]}
+//    *   columns={[
+//    *     { accessor: 'name', title: 'Name' },
+//    *     { accessor: 'age', title: 'Age' }
+//    *   ]}
+//    * />
+//    * @example <UI.table
+//    *   data={products}
+//    *   columns={[
+//    *     { accessor: 'name', title: 'Product' },
+//    *     { accessor: 'price', title: 'Price', render: (item) => `$${item.price}` }
+//    *   ]}
+//    *   striped
+//    *   highlightOnHover
+//    *   withColumnBorders
+//    * />
+//    */
+//   table: Table,
+//   /**
+//    * @description The title UI element for section headings
+//    * @example <UI.title text="Welcome" />
+//    * @example <UI.title order={2} text="Section Title" />
+//    */
+//   title: Title,
+//   /**
+//    * @description The text UI element for displaying and styling text content with extensive typography controls
+//    * @example <UI.text text="Hello World" /> // Basic text
+//    * @example <UI.text
+//    *   text="Styled text"
+//    *   fz={20} // Font size
+//    *   fw={500} // Font weight
+//    *   tt="capitalize" // Text transform
+//    *   c="blue" // Color
+//    *   ta="center" // Text align
+//    *   lh={1.5} // Line height
+//    *   fs="italic" // Font style
+//    *   td="underline" // Text decoration
+//    * />
+//    * @example <UI.text
+//    *   text="Responsive text"
+//    *   fz={{ base: 14, sm: 16, lg: 18 }} // Responsive font sizes
+//    *   c={{ light: 'dark.9', dark: 'gray.2' }} // Theme-aware colors
+//    * />
+//    */
+//   text: Text,
+//   /**
+//    * @description The tree UI element for hierarchical data display
+//    * @example <UI.tree data={[{label: "Parent", children: [{label: "Child"}]}]} />
+//    * @example <UI.tree data={[{label: "Documents", children: [{label: "Reports"}]}]} initiallyOpened={["0"]} />
+//    */
+//   tree: Tree,
+//   /**
+//    * @description The transition UI element for animating content appearance
+//    * @example  <UI.transition mounted transition="fade-up">{(styles) => <UI.text text="Text fades up" style={styles} />}</UI.transition>
+//    * @example  <UI.transition mounted transition="fade-down">{(styles) => <UI.text text="Text fades down" style={styles} />}</UI.transition>
+//    */
+//   transition: Transition,
+//   /**
+//    * @description The image UI element for displaying images with responsive sizing and loading optimizations
+//    * @example <UI.image src="/image.jpg" alt="Description" /> // Basic image
+//    * @example <UI.image
+//    *   src="/image.jpg"
+//    *   alt="Description"
+//    *   height={300}
+//    *   width={400}
+//    *   fit="contain" // 'cover', 'fill', 'none', 'scale-down'
+//    *   radius="md" // Border radius
+//    *   withPlaceholder // Shows placeholder while loading
+//    *   loading="lazy" // Lazy loading
+//    * />
+//    * @example <UI.image
+//    *   src="/banner.jpg"
+//    *   alt="Banner"
+//    *   height="auto"
+//    *   width="100%"
+//    *   styles={{ image: { objectPosition: 'top center' } }}
+//    * />
+//    */
+//   image: Image,
+//   /**
+//    * @description The inviewport UI element to detect when content is visible in viewport
+//    * @example <UI.inviewport onEnterViewport={() => console.log('Visible')}>Content</UI.inviewport>
+//    * @example <UI.inviewport threshold={0.5}>Appears when 50% visible</UI.inviewport>
+//    */
+//   inviewport: InViewport,
+//   /**
+//    * @description The hoverable UI element for hover state detection
+//    * @example <UI.hoverable>{(hovered) => <div>Hover me: {hovered ? 'Hovered' : 'Not hovered'}</div>}</UI.hoverable>
+//    * @example <UI.hoverable>{(hovered) => <UI.box bg={hovered ? 'blue.1' : 'transparent'}>Hover effect</UI.box>}</UI.hoverable>
+//    */
+//   hoverable: Hoverable,
+//   /**
+//    * @description The arrow UI element for pointers and indicators
+//    * @example <UI.arrow />
+//    * @example <UI.arrow size={12} position="center" />
+//    */
+//   arrow: Arrow,
+//   /**
+//    * @description The infobox UI element for displaying information in a box
+//    * @example <UI.infobox title="Info" description="This is an info box" />
+//    * @example <UI.infobox title="Warning" description="This is a warning box" color="red" />
+//    */
+//   infobox: InfoBox,
+// };