@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/atoms/figma/icon.figma.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Icon } from "../icon.js";
+code_connect.connect(Icon, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=365-170", {
+    imports: [
+        'import { Icon } from "@techsio/ui-kit/atoms/icon"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            current: "current",
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl",
+            "2xl": "2xl"
+        }),
+        color: code_connect["enum"]("color", {
+            current: "current",
+            primary: "primary",
+            secondary: "secondary",
+            danger: "danger",
+            success: "success",
+            warning: "warning"
+        }),
+        icon: code_connect.instance("icon")
+    },
+    example: ({ color, size, icon })=>/*#__PURE__*/ jsx(Icon, {
+            color: color,
+            icon: icon ?? "token-icon-plus",
+            size: size
+        })
+});

package/dist/atoms/figma/image.figma.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Image } from "../image.js";
+code_connect.connect(Image, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=484-19", {
+    imports: [
+        'import { Image } from "@techsio/ui-kit/atoms/image"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            full: "full"
+        })
+    },
+    example: ({ size })=>/*#__PURE__*/ jsx(Image, {
+            src: "/image.jpg",
+            alt: "Description",
+            size: size
+        })
+});

package/dist/atoms/figma/input.figma.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Input } from "../input.js";
+code_connect.connect(Input, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=304-107", {
+    imports: [
+        'import { Input } from "@techsio/ui-kit/atoms/input"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        variant: 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
+        })
+    },
+    example: ({ size, variant, disabled })=>/*#__PURE__*/ jsx(Input, {
+            disabled: disabled,
+            size: size,
+            variant: variant
+        })
+});

package/dist/atoms/figma/label.figma.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Label } from "../label.js";
+code_connect.connect(Label, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1-7840", {
+    imports: [
+        'import { Label } from "@techsio/ui-kit/atoms/label"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            current: "current"
+        }),
+        disabled: code_connect.boolean("disabled"),
+        required: code_connect.boolean("required"),
+        children: code_connect.string("children")
+    },
+    example: ({ size, disabled, required, children })=>/*#__PURE__*/ jsx(Label, {
+            disabled: disabled,
+            required: required,
+            size: size,
+            children: children
+        })
+});

package/dist/atoms/figma/link-button.figma.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { LinkButton } from "../link-button.js";
+code_connect.connect(LinkButton, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1358-1944", {
+    imports: [
+        'import { LinkButton } from "@techsio/ui-kit/atoms/link-button"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary",
+            tertiary: "tertiary",
+            warning: "warning",
+            danger: "danger"
+        }),
+        theme: code_connect["enum"]("theme", {
+            solid: "solid",
+            light: "light",
+            outlined: "outlined",
+            borderless: "borderless"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        children: code_connect.string("children"),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            hover: false,
+            disabled: true
+        })
+    },
+    example: ({ variant, theme, size, children, disabled })=>/*#__PURE__*/ jsx(LinkButton, {
+            disabled: disabled,
+            href: "#",
+            size: size,
+            theme: theme,
+            variant: variant,
+            children: children
+        })
+});

package/dist/atoms/figma/link.figma.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Link } from "../link.js";
+code_connect.connect(Link, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1355-13", {
+    imports: [
+        'import { Link } from "@techsio/ui-kit/atoms/link"'
+    ],
+    props: {
+        children: code_connect.string("children")
+    },
+    example: ({ children })=>/*#__PURE__*/ jsx(Link, {
+            href: "#",
+            children: children
+        })
+});

package/dist/atoms/figma/numeric-input.figma.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { NumericInput } from "../numeric-input.js";
+code_connect.connect(NumericInput, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=607-107", {
+    imports: [
+        'import { NumericInput } from "@techsio/ui-kit/atoms/numeric-input"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        invalid: code_connect["enum"]("state", {
+            default: false,
+            error: true,
+            disabled: false,
+            readonly: false
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            disabled: true,
+            readonly: false
+        }),
+        readOnly: code_connect["enum"]("state", {
+            default: false,
+            error: false,
+            disabled: false,
+            readonly: true
+        })
+    },
+    example: ({ disabled, invalid, readOnly, size })=>/*#__PURE__*/ jsx(NumericInput, {
+            id: "quantity",
+            defaultValue: 42,
+            disabled: disabled,
+            invalid: invalid,
+            readOnly: readOnly,
+            size: size,
+            children: /*#__PURE__*/ jsxs(NumericInput.Control, {
+                children: [
+                    /*#__PURE__*/ jsx(NumericInput.Input, {}),
+                    /*#__PURE__*/ jsxs(NumericInput.TriggerContainer, {
+                        children: [
+                            /*#__PURE__*/ jsx(NumericInput.IncrementTrigger, {}),
+                            /*#__PURE__*/ jsx(NumericInput.DecrementTrigger, {})
+                        ]
+                    })
+                ]
+            })
+        })
+});

package/dist/atoms/figma/rating.figma.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Rating } from "../rating.js";
+code_connect.connect(Rating, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=521-336", {
+    imports: [
+        'import { Rating } from "@techsio/ui-kit/atoms/rating"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        disabled: code_connect["enum"]("disabled", {
+            true: true,
+            false: false
+        }),
+        dir: code_connect["enum"]("dir", {
+            ltr: "ltr",
+            rtl: "rtl"
+        }),
+        allowHalf: code_connect.boolean("allowHalf"),
+        value: code_connect.string("value"),
+        count: code_connect.string("count"),
+        labelText: code_connect.nestedProps("Label", {
+            text: code_connect.string("text")
+        })
+    },
+    example: ({ size, disabled, dir, allowHalf, value, count, labelText })=>/*#__PURE__*/ jsx(Rating, {
+            allowHalf: allowHalf,
+            count: Number(count),
+            defaultValue: Number(value),
+            dir: dir,
+            disabled: disabled,
+            labelText: labelText.text,
+            size: size
+        })
+});

package/dist/atoms/figma/skeleton.figma.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Skeleton } from "../skeleton.js";
+const placeholderBgClassByVariant = {
+    primary: "bg-skeleton-bg-primary",
+    secondary: "bg-skeleton-bg-secondary"
+};
+code_connect.connect(Skeleton.Rectangle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-101", {
+    imports: [
+        'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary"
+        }),
+        speed: code_connect["enum"]("speed", {
+            slow: "slow",
+            normal: "normal",
+            fast: "fast"
+        })
+    },
+    example: ({ speed, variant })=>{
+        const placeholderBgClass = placeholderBgClassByVariant[variant];
+        return /*#__PURE__*/ jsx(Skeleton.Rectangle, {
+            speed: speed,
+            variant: variant,
+            children: /*#__PURE__*/ jsx("div", {
+                className: `h-20 w-xs rounded-md ${placeholderBgClass}`
+            })
+        });
+    }
+});
+code_connect.connect(Skeleton.Circle, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-198", {
+    imports: [
+        'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary"
+        }),
+        speed: code_connect["enum"]("speed", {
+            slow: "slow",
+            normal: "normal",
+            fast: "fast"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl"
+        })
+    },
+    example: ({ size, speed, variant })=>{
+        const placeholderBgClass = placeholderBgClassByVariant[variant];
+        return /*#__PURE__*/ jsx(Skeleton.Circle, {
+            size: size,
+            speed: speed,
+            variant: variant,
+            children: /*#__PURE__*/ jsx("div", {
+                className: `size-16 rounded-full ${placeholderBgClass}`
+            })
+        });
+    }
+});
+code_connect.connect(Skeleton.Text, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=565-2143", {
+    imports: [
+        'import { Skeleton } from "@techsio/ui-kit/atoms/skeleton"'
+    ],
+    props: {
+        variant: code_connect["enum"]("variant", {
+            primary: "primary",
+            secondary: "secondary"
+        }),
+        speed: code_connect["enum"]("speed", {
+            slow: "slow",
+            normal: "normal",
+            fast: "fast"
+        }),
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+            xl: "xl"
+        }),
+        noOfLines: code_connect["enum"]("noOfLines", {
+            1: 1,
+            3: 3,
+            5: 5
+        }),
+        lastLineWidth: code_connect["enum"]("lastLineWidth", {
+            "60%": "60%",
+            "80%": "80%",
+            "90%": "90%"
+        })
+    },
+    example: ({ lastLineWidth, noOfLines, size, speed, variant })=>{
+        const placeholderBgClass = placeholderBgClassByVariant[variant];
+        return /*#__PURE__*/ jsx(Skeleton.Text, {
+            lastLineWidth: lastLineWidth,
+            noOfLines: noOfLines,
+            size: size,
+            speed: speed,
+            variant: variant,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "w-xs space-y-150",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: `h-4 w-full rounded-sm ${placeholderBgClass}`
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: `h-4 w-4/5 rounded-sm ${placeholderBgClass}`
+                    })
+                ]
+            })
+        });
+    }
+});

package/dist/atoms/figma/status-text.figma.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { StatusText } from "../status-text.js";
+code_connect.connect(StatusText, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=304-35", {
+    imports: [
+        'import { StatusText } from "@libs/ui/atoms/status-text"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        status: code_connect["enum"]("status", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning"
+        }),
+        children: code_connect.string("children")
+    },
+    example: ({ size, status, children })=>/*#__PURE__*/ jsx(StatusText, {
+            size: size,
+            status: status,
+            children: children
+        })
+});

package/dist/atoms/figma/textarea.figma.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Textarea } from "../textarea.js";
+code_connect.connect(Textarea, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=502-93", {
+    imports: [
+        'import { Textarea } from "@techsio/ui-kit/atoms/textarea"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        variant: code_connect["enum"]("variant", {
+            default: "default",
+            error: "error",
+            success: "success",
+            warning: "warning",
+            borderless: "borderless"
+        }),
+        disabled: code_connect["enum"]("state", {
+            default: false,
+            disabled: true,
+            readonly: false
+        }),
+        readonly: code_connect["enum"]("state", {
+            default: false,
+            disabled: false,
+            readonly: true
+        })
+    },
+    example: ({ size, variant, disabled, readonly })=>/*#__PURE__*/ jsx(Textarea, {
+            size: size,
+            variant: variant,
+            disabled: disabled,
+            readonly: readonly
+        })
+});

package/dist/atoms/figma/tooltip.figma.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Button } from "../button.js";
+import { Tooltip } from "../tooltip.js";
+code_connect.connect(Tooltip, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=340-436", {
+    imports: [
+        'import { Tooltip } from "@techsio/ui-kit/atoms/tooltip"',
+        'import { Button } from "@techsio/ui-kit/atoms/button"'
+    ],
+    props: {
+        size: code_connect["enum"]("size", {
+            sm: "sm",
+            md: "md",
+            lg: "lg"
+        }),
+        variant: code_connect["enum"]("variant", {
+            default: "default",
+            outline: "outline"
+        }),
+        placement: code_connect["enum"]("placement", {
+            top: "top",
+            "top-start": "top-start",
+            "top-end": "top-end",
+            right: "right",
+            "right-start": "right-start",
+            "right-end": "right-end",
+            bottom: "bottom",
+            "bottom-start": "bottom-start",
+            "bottom-end": "bottom-end",
+            left: "left",
+            "left-start": "left-start",
+            "left-end": "left-end"
+        })
+    },
+    example: ({ placement, size, variant })=>/*#__PURE__*/ jsx(Tooltip, {
+            content: "Tooltip content",
+            open: true,
+            placement: placement,
+            size: size,
+            variant: variant,
+            children: /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "secondary",
+                children: "Hover me"
+            })
+        })
+});

package/dist/atoms/icon.js

@@ -2,40 +2,40 @@ import { jsx } from "react/jsx-runtime";
 import { tv } from "../utils.js";
 const iconVariants = tv({
     base: [
-        'inline-block flex-shrink-0 align-middle leading-none self-center'
+        "inline-block flex-shrink-0 self-center align-middle leading-none"
     ],
     variants: {
         size: {
-            current: '',
-            xs: 'text-icon-xs',
-            sm: 'text-icon-sm',
-            md: 'text-icon-md',
-            lg: 'text-icon-lg',
-            xl: 'text-icon-xl',
-            '2xl': 'text-icon-2xl'
+            current: "",
+            xs: "text-icon-xs",
+            sm: "text-icon-sm",
+            md: "text-icon-md",
+            lg: "text-icon-lg",
+            xl: "text-icon-xl",
+            "2xl": "text-icon-2xl"
         },
         color: {
-            current: 'text-current',
-            primary: 'text-primary',
-            secondary: 'text-secondary',
-            danger: 'text-danger',
-            success: 'text-success',
-            warning: 'text-warning'
+            current: "text-current",
+            primary: "text-primary",
+            secondary: "text-secondary",
+            danger: "text-danger",
+            success: "text-success",
+            warning: "text-warning"
         }
     },
     defaultVariants: {
-        size: 'current',
-        color: 'current'
+        size: "current",
+        color: "current"
     }
 });
 function Icon({ icon, size, color, className, ...props }) {
     return /*#__PURE__*/ jsx("span", {
+        "aria-hidden": "true",
         className: `${iconVariants({
             size,
             color,
             className
         })} ${icon}`,
-        "aria-hidden": "true",
         ...props
     });
 }

package/dist/atoms/image.js

@@ -1,10 +1,28 @@
 import { jsx } from "react/jsx-runtime";
-function Image({ as, src, alt, className, ...props }) {
-    const Component = as || 'img';
+import { tv } from "../utils.js";
+const imageVariants = tv({
+    variants: {
+        size: {
+            sm: "size-image-sm",
+            md: "size-image-md",
+            lg: "size-image-lg",
+            full: "w-full",
+            custom: ""
+        }
+    },
+    defaultVariants: {
+        size: "full"
+    }
+});
+function Image({ as, src, alt, size, className, ...props }) {
+    const Component = as || "img";
     return /*#__PURE__*/ jsx(Component, {
-        src: src,
         alt: alt,
-        className: className,
+        className: imageVariants({
+            size,
+            className
+        }),
+        src: src,
         ...props
     });
 }