@techsio/ui-kit 0.10.1 → 0.12.0

package/dist/molecules/slider.js

@@ -8,7 +8,7 @@ import { slugify, tv } from "../utils.js";
 const sliderVariants = tv({
     slots: {
         root: [
-            "flex w-full flex-col gap-slider-root",
+            "flex w-full flex-col gap-slider",
             "data-[orientation=vertical]:h-full",
             "data-disabled:cursor-not-allowed"
         ],
@@ -29,7 +29,7 @@ const sliderVariants = tv({
             "flex-1 rounded-slider-track bg-slider-track-bg",
             "data-[orientation=horizontal]:w-full",
             "data-[orientation=vertical]:h-full",
-            "data-disabled:bg-slider-bg-disabled",
+            "data-disabled:bg-slider-track-bg-disabled",
             "border-(length:--border-width-slider) border-slider-border",
             "data-disabled:border-slider-border-disabled",
             "transition-colors duration-200 motion-reduce:transition-none",

package/dist/molecules/{figma/steps.figma.js → steps.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Steps } from "../steps.js";
+import { Steps } from "./steps.js";
 code_connect.connect(Steps, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1153-66", {
     imports: [
         'import { Steps } from "@libs/ui/molecules/steps"'

package/dist/molecules/steps.js

@@ -132,8 +132,8 @@ const stepsVariants = tv({
                 number: "text-steps-number-sm",
                 title: "text-steps-title-sm",
                 description: "text-steps-description-sm",
-                content: "p-steps-content-sm text-steps-content-sm",
-                completedContent: "p-steps-content-sm text-steps-content-sm"
+                content: "p-steps-content-padding-sm text-steps-content-sm",
+                completedContent: "p-steps-content-padding-sm text-steps-content-sm"
             },
             md: {
                 indicator: "size-steps-indicator-md",
@@ -141,8 +141,8 @@ const stepsVariants = tv({
                 number: "text-steps-number-md",
                 title: "text-steps-title-md",
                 description: "text-steps-description-md",
-                content: "p-steps-content-md text-steps-content-md",
-                completedContent: "p-steps-content-md text-steps-content-md"
+                content: "p-steps-content-padding-md text-steps-content-md",
+                completedContent: "p-steps-content-padding-md text-steps-content-md"
             },
             lg: {
                 indicator: "size-steps-indicator-lg",
@@ -150,8 +150,8 @@ const stepsVariants = tv({
                 number: "text-steps-number-lg",
                 title: "text-steps-title-lg",
                 description: "text-steps-description-lg",
-                content: "p-steps-content-lg text-steps-content-lg",
-                completedContent: "p-steps-content-lg text-steps-content-lg"
+                content: "p-steps-content-padding-lg text-steps-content-lg",
+                completedContent: "p-steps-content-padding-lg text-steps-content-lg"
             }
         }
     },

package/dist/molecules/{figma/switch.figma.js → switch.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Switch } from "../switch.js";
+import { Switch } from "./switch.js";
 code_connect.connect(Switch, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1137-22", {
     imports: [
         'import { Switch } from "@techsio/ui-kit/molecules/switch"'

package/dist/molecules/switch.js

@@ -13,9 +13,9 @@ const switchVariants = tv({
             "flex items-center"
         ],
         control: [
-            "me-switch-root p-switch-control",
+            "me-switch p-switch-control",
             "relative inline-flex shrink-0 items-center justify-start",
-            "bg-switch-bg hover:bg-switch-bg-hover",
+            "bg-switch-bg-base hover:bg-switch-bg-hover",
             "h-switch-track-height w-switch-track-width",
             "rounded-switch",
             "transition-colors duration-200 motion-reduce:transition-none",
@@ -28,7 +28,7 @@ const switchVariants = tv({
             "data-[focus]:outline-(style:--default-ring-style) data-[focus]:outline-(length:--default-ring-width)",
             "data-[focus]:outline-switch-ring",
             "data-[focus]:outline-offset-(length:--default-ring-offset)",
-            "data-[invalid]:bg-switch-bg-invalid data-[invalid]:outline-switch-invalid",
+            "data-[invalid]:bg-switch-bg-invalid data-[invalid]:outline-switch-ring-invalid",
             "data-[invalid]:outline-(style:--default-ring-style) data-[invalid]:outline-(length:--default-ring-width)",
             "data-[invalid]:outline-offset-(length:--default-ring-offset)"
         ],

package/dist/molecules/{figma/tabs.figma.js → tabs.figma.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Tabs } from "../tabs.js";
+import { Tabs } from "./tabs.js";
 code_connect.connect(Tabs, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1174-74", {
     imports: [
         'import { Tabs } from "@libs/ui/molecules/tabs"'

package/dist/molecules/tabs.js

@@ -21,7 +21,7 @@ const tabsVariants = tv({
         ],
         trigger: [
             "relative flex items-center justify-center",
-            "text-tabs-trigger-fg",
+            "text-tabs-trigger-fg-base",
             "rounded-tabs-trigger",
             "cursor-pointer",
             "hover:bg-tabs-trigger-bg-hover",
@@ -29,13 +29,13 @@ const tabsVariants = tv({
             "focus-visible:outline-tabs-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
             "data-[selected]:text-tabs-trigger-fg-selected",
-            "data-[disabled]:cursor-not-allowed data-[disabled]:text-tabs-fg-disabled",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:text-tabs-trigger-fg-disabled",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         indicator: [
             "absolute rounded-tabs-indicator bg-tabs-indicator-bg",
             "data-[orientation=vertical]:h-(--height) data-[orientation=horizontal]:w-(--width)",
-            "data-[orientation=horizontal]:h-tabs-indicator data-[orientation=vertical]:w-tabs-indicator",
+            "data-[orientation=horizontal]:h-tabs-indicator-height data-[orientation=vertical]:w-tabs-indicator",
             "data-[orientation=vertical]:start-0 data-[orientation=horizontal]:bottom-0"
         ],
         content: [
@@ -52,11 +52,11 @@ const tabsVariants = tv({
                 indicator: "hidden"
             },
             line: {
-                list: "border-b-(length:--border-width-tabs) border-tabs-border",
+                list: "border-b-(length:--border-width-tabs) border-tabs-border-base",
                 indicator: "data-[orientation=horizontal]:-bottom-(--border-width-tabs)"
             },
             solid: {
-                trigger: "data-[selected]:bg-tabs-trigger-bg-selected data-[selected]:text-tabs-trigger-solid-fg",
+                trigger: "data-[selected]:bg-tabs-trigger-bg-selected data-[selected]:text-tabs-trigger-fg-solid-selected",
                 indicator: "hidden"
             },
             outline: {
@@ -71,15 +71,15 @@ const tabsVariants = tv({
         size: {
             sm: {
                 trigger: "p-tabs-trigger-sm text-tabs-trigger-sm",
-                content: "p-tabs-content-sm text-tabs-content-sm"
+                content: "p-tabs-content-padding-sm text-tabs-content-sm"
             },
             md: {
                 trigger: "p-tabs-trigger-md text-tabs-trigger-md",
-                content: "p-tabs-content-md text-tabs-content-md"
+                content: "p-tabs-content-padding-md text-tabs-content-md"
             },
             lg: {
                 trigger: "p-tabs-trigger-lg text-tabs-trigger-lg",
-                content: "p-tabs-content-lg text-tabs-content-lg"
+                content: "p-tabs-content-padding-lg text-tabs-content-lg"
             }
         },
         fitted: {

package/dist/molecules/{figma/toast.figma.js → toast.figma.js}

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { Toaster, useToast } from "../toast.js";
+import { Toaster, useToast } from "./toast.js";
 code_connect.connect(Toaster, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1155-33", {
     imports: [
         'import { Toaster, useToast } from "@libs/ui/molecules/toast"'

package/dist/molecules/toast.js

@@ -23,21 +23,21 @@ const toastVariants = tv({
         group: "relative flex flex-col",
         header: "relative flex items-center gap-toast-content",
         icon: [
-            "flex-shrink-0 text-toast-icon-size",
+            "flex-shrink-0 text-toast-icon",
             "data-[type=error]:token-icon-toast-error data-[type=error]:text-toast-error-icon",
             "data-[type=success]:token-icon-toast-success data-[type=success]:text-toast-success-icon",
             "data-[type=info]:token-icon-toast-info data-[type=info]:text-toast-info-icon",
             "data-[type=warning]:token-icon-toast-warning data-[type=warning]:text-toast-warning-icon"
         ],
         title: [
-            "font-toast-title text-toast-fg text-toast-title-size",
+            "font-toast-title text-toast-fg text-toast-title",
             "data-[type=error]:text-toast-error-title",
             "data-[type=success]:text-toast-success-title",
             "data-[type=info]:text-toast-info-title",
             "data-[type=warning]:text-toast-warning-title"
         ],
         description: [
-            "mt-toast-description-gap text-toast-description-size text-toast-fg"
+            "mt-toast-description text-toast-description text-toast-fg"
         ],
         closeButton: [
             "ms-auto grid flex-shrink-0 place-items-center px-0 py-0",

package/dist/molecules/{figma/tree-view.figma.js → tree-view.figma.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
-import { TreeView } from "../tree-view.js";
+import { TreeView } from "./tree-view.js";
 code_connect.connect(TreeView, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1193-228", {
     imports: [
         'import { TreeView } from "@techsio/ui-kit/molecules/tree-view"'
@@ -13,7 +13,6 @@ code_connect.connect(TreeView, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3
         })
     },
     example: ({ size })=>/*#__PURE__*/ jsx(TreeView, {
-            size: size,
             data: [
                 {
                     id: "1",
@@ -25,6 +24,7 @@ code_connect.connect(TreeView, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3
                         }
                     ]
                 }
-            ]
+            ],
+            size: size
         })
 });

package/dist/molecules/tree-view.js

@@ -6,27 +6,27 @@ import { Icon } from "../atoms/icon.js";
 import { tv } from "../utils.js";
 const treeViewVariants = tv({
     slots: {
-        root: "relative rounded-tree bg-tree-root-bg",
+        root: "relative rounded-tree-view bg-tree-view-root-bg",
         label: [
-            "font-tree-label text-tree-label-fg"
+            "font-tree-view-label text-tree-view-label-fg"
         ],
         tree: [
-            "bg-tree-bg",
+            "bg-tree-view-bg",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
-            "focus-visible:outline-tree-ring",
+            "focus-visible:outline-tree-view-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)"
         ],
         branch: [
             "data-disabled:cursor-not-allowed",
-            "data-disabled:text-tree-fg-disabled",
+            "data-disabled:text-tree-view-fg-disabled",
             "data-disabled:*:pointer-events-none"
         ],
         branchTrigger: [
             "group flex items-center justify-between",
-            "hover:bg-tree-node-bg-hover",
+            "hover:bg-tree-view-node-bg-hover",
             "cursor-pointer",
             "has-focus-visible:outline-(style:--default-ring-style) has-focus-visible:outline-(length:--default-ring-width)",
-            "has-focus-visible:outline-tree-ring",
+            "has-focus-visible:outline-tree-view-ring",
             "has-focus-visible:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
@@ -37,7 +37,7 @@ const treeViewVariants = tv({
             "flex-1"
         ],
         branchIndicator: [
-            "group-hover:text-tree-fg-hover",
+            "group-hover:text-tree-view-fg-hover",
             "data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125",
             "transition-all duration-200 motion-reduce:transition-none"
         ],
@@ -47,15 +47,15 @@ const treeViewVariants = tv({
         ],
         indentGuide: [
             "absolute start-1 top-0 bottom-0",
-            "w-tree-indent bg-tree-indent-bg",
-            "opacity-tree-indent"
+            "w-tree-view-indent-width bg-tree-view-indent-bg",
+            "opacity-tree-view-indent"
         ],
         item: [
-            "hover:bg-tree-node-bg-hover hover:text-tree-fg-hover",
-            "data-selected:hover:bg-tree-node-bg-hover",
-            "data-selected:hover:text-tree-fg-hover",
+            "hover:bg-tree-view-node-bg-hover hover:text-tree-view-fg-hover",
+            "data-selected:hover:bg-tree-view-node-bg-hover",
+            "data-selected:hover:text-tree-view-fg-hover",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
-            "focus-visible:outline-tree-ring",
+            "focus-visible:outline-tree-view-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
@@ -63,7 +63,7 @@ const treeViewVariants = tv({
             "flex-1"
         ],
         nodeIcon: [
-            "hover:text-tree-icon-hover",
+            "hover:text-tree-view-icon-hover",
             "transition-colors duration-200 motion-reduce:transition-none"
         ]
     },
@@ -85,36 +85,36 @@ const treeViewVariants = tv({
                 "item"
             ],
             class: [
-                "flex items-center gap-tree-icon p-tree-node",
+                "flex items-center gap-tree-view-icon p-tree-view-node-padding",
                 "cursor-pointer",
-                "data-selected:text-tree-fg-selected",
-                "group-hover:text-tree-fg-hover",
-                "data-selected:group-hover:text-tree-fg-hover"
+                "data-selected:text-tree-view-fg-selected",
+                "group-hover:text-tree-view-fg-hover",
+                "data-selected:group-hover:text-tree-view-fg-hover"
             ]
         }
     ],
     variants: {
         size: {
             sm: {
-                nodeIcon: "text-tree-icon-sm",
-                branchText: "text-tree-sm",
-                itemText: "text-tree-sm",
-                branchIndicator: "text-tree-indicator-sm",
-                label: "text-tree-sm"
+                nodeIcon: "text-tree-view-icon-sm",
+                branchText: "text-tree-view-sm",
+                itemText: "text-tree-view-sm",
+                branchIndicator: "text-tree-view-indicator-sm",
+                label: "text-tree-view-sm"
             },
             md: {
-                nodeIcon: "text-tree-icon-md",
-                branchText: "text-tree-md",
-                itemText: "text-tree-md",
-                branchIndicator: "text-tree-indicator-md",
-                label: "text-tree-md"
+                nodeIcon: "text-tree-view-icon-md",
+                branchText: "text-tree-view-md",
+                itemText: "text-tree-view-md",
+                branchIndicator: "text-tree-view-indicator-md",
+                label: "text-tree-view-md"
             },
             lg: {
-                nodeIcon: "text-tree-icon-lg",
-                branchText: "text-tree-lg",
-                itemText: "text-tree-lg",
-                branchIndicator: "text-tree-indicator-lg",
-                label: "text-tree-lg"
+                nodeIcon: "text-tree-view-icon-lg",
+                branchText: "text-tree-view-lg",
+                itemText: "text-tree-view-lg",
+                branchIndicator: "text-tree-view-indicator-lg",
+                label: "text-tree-view-lg"
             }
         }
     },

package/dist/organisms/footer.figma.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Footer } from "./footer.js";
+code_connect.connect(Footer, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1372-161", {
+    imports: [
+        'import { Footer } from "@libs/ui/organisms/footer"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(Footer, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsx(Footer.Container, {
+                    children: /*#__PURE__*/ jsxs(Footer.Section, {
+                        children: [
+                            /*#__PURE__*/ jsx(Footer.Title, {
+                                children: "Shop"
+                            }),
+                            /*#__PURE__*/ jsxs(Footer.List, {
+                                children: [
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: /*#__PURE__*/ jsx(Footer.Link, {
+                                            href: "/new",
+                                            children: "New arrivals"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("li", {
+                                        children: /*#__PURE__*/ jsx(Footer.Link, {
+                                            href: "/sale",
+                                            children: "Sale"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(Footer.Divider, {}),
+                /*#__PURE__*/ jsx(Footer.Bottom, {
+                    children: /*#__PURE__*/ jsx(Footer.Text, {
+                        children: "\xa9 2026 Acme, Inc."
+                    })
+                })
+            ]
+        })
+});

package/dist/organisms/footer.js

@@ -7,8 +7,8 @@ const footerVariants = tv({
         root: "flex w-full items-center justify-center rounded-footer bg-footer-bg",
         container: "w-full max-w-footer-max bg-footer-container-bg",
         section: "bg-footer-section-bg",
-        list: "flex list-none flex-col gap-footer-list-gap bg-footer-list-bg",
-        bottom: "flex w-full items-center justify-between border-t-(--border-width-footer) bg-footer-bottom-bg pt-footer-bottom",
+        list: "flex list-none flex-col gap-footer-list bg-footer-list-bg",
+        bottom: "flex w-full items-center justify-between border-t-(length:--border-footer-width) bg-footer-bottom-bg pt-footer-bottom",
         title: "font-footer-title text-footer-title-fg transition-footer-title hover:text-footer-title-fg-hover",
         link: "font-footer-link text-footer-link-fg transition-footer-link hover:text-footer-link-fg-hover",
         text: "text-footer-text-fg",
@@ -41,35 +41,35 @@ const footerVariants = tv({
         },
         size: {
             sm: {
-                root: "p-footer-root-sm",
+                root: "p-footer-sm",
                 container: "gap-footer-container-sm",
                 section: "gap-footer-section-sm",
-                list: "gap-footer-list-gap-sm",
+                list: "gap-footer-sm",
                 title: "text-footer-title-sm",
                 link: "text-footer-link-sm",
-                text: "text-footer-text-sm",
+                text: "text-footer-sm",
                 bottom: "p-footer-bottom-sm",
                 divider: "my-footer-divider-sm"
             },
             md: {
-                root: "p-footer-root-md",
+                root: "p-footer-md",
                 container: "gap-footer-container-md",
                 section: "gap-footer-section-md",
-                list: "gap-footer-list-gap-md",
+                list: "gap-footer-md",
                 title: "text-footer-title-md",
                 link: "text-footer-link-md",
-                text: "text-footer-text-md",
+                text: "text-footer-md",
                 bottom: "p-footer-bottom-md",
                 divider: "my-footer-divider-md"
             },
             lg: {
-                root: "p-footer-root-lg",
+                root: "p-footer-lg",
                 container: "gap-footer-container-lg",
                 section: "gap-footer-section-lg",
-                list: "gap-footer-list-gap-lg",
+                list: "gap-footer-lg",
                 title: "text-footer-title-lg",
                 link: "text-footer-link-lg",
-                text: "text-footer-text-lg",
+                text: "text-footer-lg",
                 bottom: "p-footer-bottom-lg",
                 divider: "my-footer-divider-lg"
             }

package/dist/organisms/gallery.figma.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Gallery } from "./gallery.js";
+code_connect.connect(Gallery, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1392-68", {
+    imports: [
+        'import { Gallery } from "@libs/ui/organisms/gallery"'
+    ],
+    props: {
+        orientation: code_connect["enum"]("orientation", {
+            vertical: "vertical",
+            horizontal: "horizontal"
+        })
+    },
+    example: ({ orientation })=>/*#__PURE__*/ jsx(Gallery, {
+            items: [
+                {
+                    id: "1",
+                    src: "/product-1.jpg",
+                    alt: "Product front"
+                },
+                {
+                    id: "2",
+                    src: "/product-2.jpg",
+                    alt: "Product side"
+                },
+                {
+                    id: "3",
+                    src: "/product-3.jpg",
+                    alt: "Product detail"
+                }
+            ],
+            orientation: orientation
+        })
+});

package/dist/organisms/header.figma.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Header } from "./header.js";
+code_connect.connect(Header, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1391-225", {
+    imports: [
+        'import { Header } from "@libs/ui/organisms/header"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(Header, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsxs(Header.Desktop, {
+                    children: [
+                        /*#__PURE__*/ jsx(Header.Container, {
+                            position: "start",
+                            children: "Logo"
+                        }),
+                        /*#__PURE__*/ jsxs(Header.Nav, {
+                            children: [
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    active: true,
+                                    children: "Home"
+                                }),
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    children: "Shop"
+                                }),
+                                /*#__PURE__*/ jsx(Header.NavItem, {
+                                    children: "About"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Header.Actions, {
+                            children: /*#__PURE__*/ jsx(Header.ActionItem, {
+                                children: "Cart"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Header.Hamburger, {}),
+                /*#__PURE__*/ jsxs(Header.Mobile, {
+                    children: [
+                        /*#__PURE__*/ jsx(Header.NavItem, {
+                            children: "Home"
+                        }),
+                        /*#__PURE__*/ jsx(Header.NavItem, {
+                            children: "Shop"
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/organisms/table.figma.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Table } from "./table.js";
+code_connect.connect(Table, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1393-232", {
+    imports: [
+        'import { Table } from "@libs/ui/organisms/table"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            line: "line",
+            outline: "outline",
+            striped: "striped"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ variant, size })=>/*#__PURE__*/ jsxs(Table, {
+            size: size,
+            variant: variant,
+            children: [
+                /*#__PURE__*/ jsx(Table.Caption, {
+                    children: "Recent orders"
+                }),
+                /*#__PURE__*/ jsx(Table.Header, {
+                    children: /*#__PURE__*/ jsxs(Table.Row, {
+                        children: [
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Order"
+                            }),
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Status"
+                            }),
+                            /*#__PURE__*/ jsx(Table.ColumnHeader, {
+                                children: "Total"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Table.Body, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Table.Row, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "#1001"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "Shipped"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "$99.00"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Table.Row, {
+                            children: [
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "#1002"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "Pending"
+                                }),
+                                /*#__PURE__*/ jsx(Table.Cell, {
+                                    children: "$149.00"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.Footer, {
+                    children: /*#__PURE__*/ jsxs(Table.Row, {
+                        children: [
+                            /*#__PURE__*/ jsx(Table.Cell, {
+                                children: "Total"
+                            }),
+                            /*#__PURE__*/ jsx(Table.Cell, {}),
+                            /*#__PURE__*/ jsx(Table.Cell, {
+                                children: "$248.00"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+});