@techsio/ui-kit 0.3.1 → 0.4.0

package/dist/molecules/figma/form-textarea.figma.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { FormTextarea } from "../form-textarea.js";
+code_connect.connect(FormTextarea, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=929-317", {
+    imports: [
+        'import { FormTextarea } from "@techsio/ui-kit/molecules/form-textarea"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true
+        }),
+        required: code_connect.boolean("required")
+    },
+    example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsx(FormTextarea, {
+            id: "field",
+            label: "Label",
+            size: size,
+            validateStatus: validateStatus,
+            disabled: disabled,
+            required: required
+        })
+});

package/dist/molecules/figma/menu.figma.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Menu } from "../menu.js";
+code_connect.connect(Menu, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1183-26", {
+    imports: [
+        'import { Menu } from "@libs/ui/molecules/menu"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsx(Menu, {
+            items: [
+                {
+                    type: "action",
+                    value: "item-1",
+                    label: "Item 1"
+                }
+            ],
+            size: size,
+            triggerText: "Open"
+        })
+});

package/dist/molecules/figma/pagination.figma.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Pagination } from "../pagination.js";
+code_connect.connect(Pagination, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1143-138", {
+    imports: [
+        'import { Pagination } from "@libs/ui/molecules/pagination"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsx(Pagination, {
+            count: 100,
+            defaultPage: 1,
+            getPageUrl: (page)=>`?page=${page}`,
+            pageSize: 10,
+            size: size
+        })
+});

package/dist/molecules/figma/popover.figma.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Popover } from "../popover.js";
+code_connect.connect(Popover, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1076-666", {
+    imports: [
+        'import { Popover } from "@libs/ui/molecules/popover"'
+    ],
+    props: {
+        placement: code_connect["enum"]("placement", {
+            top: "top",
+            right: "right",
+            bottom: "bottom",
+            left: "left",
+            "top-start": "top-start",
+            "top-end": "top-end",
+            "bottom-start": "bottom-start",
+            "bottom-end": "bottom-end"
+        })
+    },
+    example: ({ placement })=>/*#__PURE__*/ jsxs(Popover, {
+            defaultOpen: true,
+            id: "popover",
+            placement: placement,
+            children: [
+                /*#__PURE__*/ jsx(Popover.Trigger, {
+                    children: "Open"
+                }),
+                /*#__PURE__*/ jsx(Popover.Positioner, {
+                    children: /*#__PURE__*/ jsxs(Popover.Content, {
+                        children: [
+                            /*#__PURE__*/ jsx(Popover.Arrow, {}),
+                            "Popover content"
+                        ]
+                    })
+                })
+            ]
+        })
+});

package/dist/molecules/figma/product-card.figma.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { ProductCard } from "../product-card.js";
+code_connect.connect(ProductCard, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1182-51", {
+    imports: [
+        'import { ProductCard } from "@libs/ui/molecules/product-card"'
+    ],
+    props: {
+        layout: code_connect["enum"]("layout", {
+            column: "column",
+            row: "row"
+        })
+    },
+    example: ({ layout })=>/*#__PURE__*/ jsxs(ProductCard, {
+            layout: layout,
+            children: [
+                /*#__PURE__*/ jsx(ProductCard.Image, {
+                    alt: "Product",
+                    src: "/product.jpg"
+                }),
+                /*#__PURE__*/ jsx(ProductCard.Name, {
+                    children: "Product Name"
+                }),
+                /*#__PURE__*/ jsx(ProductCard.Price, {
+                    children: "$99.00"
+                }),
+                /*#__PURE__*/ jsx(ProductCard.Actions, {
+                    children: /*#__PURE__*/ jsx(ProductCard.Button, {
+                        children: "Add to cart"
+                    })
+                })
+            ]
+        })
+});

package/dist/molecules/figma/radio-card.figma.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { RadioCard } from "../radio-card.js";
+code_connect.connect(RadioCard, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1151-66", {
+    imports: [
+        'import { RadioCard } from "@libs/ui/molecules/radio-card"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        orientation: code_connect["enum"]("orientation", {
+            horizontal: "horizontal",
+            vertical: "vertical"
+        }),
+        disabled: code_connect.boolean("disabled")
+    },
+    example: ({ size, orientation, disabled })=>/*#__PURE__*/ jsx(RadioCard, {
+            disabled: disabled,
+            orientation: orientation,
+            size: size,
+            children: /*#__PURE__*/ jsx(RadioCard.Item, {
+                value: "a",
+                children: /*#__PURE__*/ jsx(RadioCard.ItemControl, {
+                    children: /*#__PURE__*/ jsx(RadioCard.ItemContent, {
+                        children: /*#__PURE__*/ jsx(RadioCard.ItemText, {
+                            children: "Option A"
+                        })
+                    })
+                })
+            })
+        })
+});

package/dist/molecules/figma/radio-group.figma.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { RadioGroup } from "../radio-group.js";
+code_connect.connect(RadioGroup, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1149-66", {
+    imports: [
+        'import { RadioGroup } from "@libs/ui/molecules/radio-group"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        orientation: code_connect["enum"]("orientation", {
+            horizontal: "horizontal",
+            vertical: "vertical"
+        }),
+        disabled: code_connect.boolean("disabled")
+    },
+    example: ({ size, orientation, disabled })=>/*#__PURE__*/ jsxs(RadioGroup, {
+            disabled: disabled,
+            orientation: orientation,
+            size: size,
+            children: [
+                /*#__PURE__*/ jsxs(RadioGroup.Item, {
+                    value: "a",
+                    children: [
+                        /*#__PURE__*/ jsx(RadioGroup.ItemControl, {}),
+                        /*#__PURE__*/ jsx(RadioGroup.ItemText, {
+                            children: "Option A"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(RadioGroup.Item, {
+                    value: "b",
+                    children: [
+                        /*#__PURE__*/ jsx(RadioGroup.ItemControl, {}),
+                        /*#__PURE__*/ jsx(RadioGroup.ItemText, {
+                            children: "Option B"
+                        })
+                    ]
+                })
+            ]
+        })
+});

package/dist/molecules/figma/search-form.figma.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { SearchForm } from "../search-form.js";
+code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1146-48", {
+    imports: [
+        'import { SearchForm } from "@libs/ui/molecules/search-form"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsxs(SearchForm, {
+            size: size,
+            children: [
+                /*#__PURE__*/ jsx(SearchForm.Input, {
+                    placeholder: "Search..."
+                }),
+                /*#__PURE__*/ jsx(SearchForm.Button, {})
+            ]
+        })
+});

package/dist/molecules/figma/select.figma.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Select } from "../select.js";
+code_connect.connect(Select, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=761-571", {
+    imports: [
+        'import { Select } from "@techsio/ui-kit/molecules/select"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        validateStatus: code_connect["enum"]("state", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            disabled: "default",
+            readonly: "default"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            success: false,
+            warning: false,
+            disabled: true,
+            readonly: false
+        }),
+        required: code_connect.boolean("required")
+    },
+    example: ({ size, validateStatus, disabled, required })=>/*#__PURE__*/ jsxs(Select, {
+            size: size,
+            validateStatus: validateStatus,
+            disabled: disabled,
+            required: required,
+            items: [],
+            children: [
+                /*#__PURE__*/ jsx(Select.Label, {
+                    children: "Label"
+                }),
+                /*#__PURE__*/ jsx(Select.Trigger, {})
+            ]
+        })
+});

package/dist/molecules/figma/slider.figma.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Slider } from "../slider.js";
+code_connect.connect(Slider, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1141-48", {
+    imports: [
+        'import { Slider } from "@techsio/ui-kit/molecules/slider"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        disabled: code_connect.boolean("disabled"),
+        validateStatus: code_connect["enum"]("validateStatus", {
+            default: "default",
+            error: "error"
+        })
+    },
+    example: ({ size, disabled, validateStatus })=>/*#__PURE__*/ jsx(Slider, {
+            size: size,
+            disabled: disabled,
+            validateStatus: validateStatus,
+            min: 0,
+            max: 100,
+            defaultValue: [
+                50
+            ]
+        })
+});

package/dist/molecules/figma/steps.figma.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+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"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        orientation: code_connect["enum"]("orientation", {
+            horizontal: "horizontal",
+            vertical: "vertical"
+        })
+    },
+    example: ({ size, orientation })=>/*#__PURE__*/ jsx(Steps, {
+            count: 3,
+            defaultStep: 0,
+            orientation: orientation,
+            size: size,
+            children: /*#__PURE__*/ jsx(Steps.List, {
+                children: /*#__PURE__*/ jsx(Steps.Item, {
+                    index: 0,
+                    children: /*#__PURE__*/ jsx(Steps.Trigger, {
+                        children: "Step 1"
+                    })
+                })
+            })
+        })
+});

package/dist/molecules/figma/switch.figma.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+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"'
+    ],
+    props: {
+        checked: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: true,
+            disabled: false
+        }),
+        disabled: code_connect["enum"]("state", {
+            unchecked: false,
+            checked: false,
+            disabled: true
+        }),
+        validateStatus: code_connect["enum"]("validateStatus", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning"
+        }),
+        children: code_connect.string("label")
+    },
+    example: ({ checked, disabled, validateStatus, children })=>/*#__PURE__*/ jsx(Switch, {
+            checked: checked,
+            disabled: disabled,
+            validateStatus: validateStatus,
+            children: children
+        })
+});

package/dist/molecules/figma/tabs.figma.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+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"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        orientation: code_connect["enum"]("orientation", {
+            horizontal: "horizontal",
+            vertical: "vertical"
+        })
+    },
+    example: ({ size, orientation })=>/*#__PURE__*/ jsxs(Tabs, {
+            defaultValue: "tab-1",
+            orientation: orientation,
+            size: size,
+            children: [
+                /*#__PURE__*/ jsxs(Tabs.List, {
+                    children: [
+                        /*#__PURE__*/ jsx(Tabs.Trigger, {
+                            value: "tab-1",
+                            children: "Tab 1"
+                        }),
+                        /*#__PURE__*/ jsx(Tabs.Trigger, {
+                            value: "tab-2",
+                            children: "Tab 2"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "tab-1",
+                    children: "Content 1"
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "tab-2",
+                    children: "Content 2"
+                })
+            ]
+        })
+});

package/dist/molecules/figma/toast.figma.js

@@ -0,0 +1,34 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+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"'
+    ],
+    props: {
+        type: code_connect["enum"]("type", {
+            default: "message",
+            info: "info",
+            success: "success",
+            warning: "warning",
+            error: "error"
+        })
+    },
+    example: ({ type })=>{
+        const toast = useToast();
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("button", {
+                    onClick: ()=>toast.create({
+                            title: "Toast",
+                            description: "Notification message",
+                            type
+                        }),
+                    type: "button",
+                    children: "Show toast"
+                }),
+                /*#__PURE__*/ jsx(Toaster, {})
+            ]
+        });
+    }
+});

package/dist/molecules/figma/tree-view.figma.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+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"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsx(TreeView, {
+            size: size,
+            data: [
+                {
+                    id: "1",
+                    name: "Root",
+                    children: [
+                        {
+                            id: "1-1",
+                            name: "Child"
+                        }
+                    ]
+                }
+            ]
+        })
+});