@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/chunk-SCJBZBCG.mjs

@@ -0,0 +1,308 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/spinner.ts
+var spinner = tv({
+  slots: {
+    base: "relative inline-flex flex-col gap-2 items-center justify-center",
+    wrapper: "relative flex",
+    label: "text-foreground dark:text-foreground-dark font-regular",
+    circle1: "absolute w-full h-full rounded-full",
+    circle2: "absolute w-full h-full rounded-full",
+    dots: "relative rounded-full mx-auto",
+    spinnerBars: [
+      "absolute",
+      "animate-fade-out",
+      "rounded-full",
+      "w-[25%]",
+      "h-[8%]",
+      "left-[calc(37.5%)]",
+      "top-[calc(46%)]",
+      "spinner-bar-animation"
+    ]
+  },
+  variants: {
+    size: {
+      sm: {
+        wrapper: "w-5 h-5",
+        circle1: "border-2",
+        circle2: "border-2",
+        dots: "size-1",
+        label: "text-small"
+      },
+      md: {
+        wrapper: "w-8 h-8",
+        circle1: "border-3",
+        circle2: "border-3",
+        dots: "size-1.5",
+        label: "text-medium"
+      },
+      lg: {
+        wrapper: "w-10 h-10",
+        circle1: "border-3",
+        circle2: "border-3",
+        dots: "size-2",
+        label: "text-large"
+      }
+    },
+    color: {
+      current: {
+        circle1: "border-b-current",
+        circle2: "border-b-current",
+        dots: "bg-current",
+        spinnerBars: "bg-current"
+      },
+      white: {
+        circle1: "border-b-white",
+        circle2: "border-b-white",
+        dots: "bg-white",
+        spinnerBars: "bg-white"
+      },
+      default: {
+        circle1: "border-b-default",
+        circle2: "border-b-default",
+        dots: "bg-default",
+        spinnerBars: "bg-default"
+      },
+      primary: {
+        circle1: "border-b-primary",
+        circle2: "border-b-primary",
+        dots: "bg-primary",
+        spinnerBars: "bg-primary"
+      },
+      secondary: {
+        circle1: "border-b-secondary",
+        circle2: "border-b-secondary",
+        dots: "bg-secondary",
+        spinnerBars: "bg-secondary"
+      },
+      success: {
+        circle1: "border-b-success",
+        circle2: "border-b-success",
+        dots: "bg-success",
+        spinnerBars: "bg-success"
+      },
+      warning: {
+        circle1: "border-b-warning",
+        circle2: "border-b-warning",
+        dots: "bg-warning",
+        spinnerBars: "bg-warning"
+      },
+      danger: {
+        circle1: "border-b-danger",
+        circle2: "border-b-danger",
+        dots: "bg-danger",
+        spinnerBars: "bg-danger"
+      }
+    },
+    labelColor: {
+      foreground: {
+        label: "text-foreground"
+      },
+      primary: {
+        label: "text-primary"
+      },
+      secondary: {
+        label: "text-secondary"
+      },
+      success: {
+        label: "text-success"
+      },
+      warning: {
+        label: "text-warning"
+      },
+      danger: {
+        label: "text-danger"
+      }
+    },
+    variant: {
+      default: {
+        circle1: [
+          "animate-spinner-ease-spin",
+          "border-solid",
+          "border-t-transparent",
+          "border-l-transparent",
+          "border-r-transparent"
+        ],
+        circle2: [
+          "opacity-75",
+          "animate-spinner-linear-spin",
+          "border-dotted",
+          "border-t-transparent",
+          "border-l-transparent",
+          "border-r-transparent"
+        ]
+      },
+      gradient: {
+        circle1: [
+          "border-0",
+          "bg-gradient-to-b",
+          "from-transparent",
+          "via-transparent",
+          "to-primary",
+          "animate-spinner-linear-spin",
+          "[animation-duration:1s]",
+          "[-webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0.0)calc(100%-3px),rgba(0,0,0,1)calc(100%-3px))]"
+        ],
+        circle2: ["hidden"]
+      },
+      wave: {
+        wrapper: "translate-y-3/4",
+        dots: ["animate-sway", "spinner-dot-animation"]
+      },
+      dots: {
+        wrapper: "translate-y-2/4",
+        dots: ["animate-blink", "spinner-dot-blink-animation"]
+      },
+      spinner: {},
+      simple: {
+        wrapper: "text-foreground h-5 w-5 animate-spin",
+        circle1: "opacity-25",
+        circle2: "opacity-75"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+    labelColor: "foreground",
+    variant: "default"
+  },
+  compoundVariants: [
+    { variant: "gradient", color: "current", class: { circle1: "to-current" } },
+    { variant: "gradient", color: "white", class: { circle1: "to-white" } },
+    { variant: "gradient", color: "default", class: { circle1: "to-default" } },
+    { variant: "gradient", color: "primary", class: { circle1: "to-primary" } },
+    { variant: "gradient", color: "secondary", class: { circle1: "to-secondary" } },
+    { variant: "gradient", color: "success", class: { circle1: "to-success" } },
+    { variant: "gradient", color: "warning", class: { circle1: "to-warning" } },
+    { variant: "gradient", color: "danger", class: { circle1: "to-danger" } },
+    {
+      variant: "wave",
+      size: "sm",
+      class: {
+        wrapper: "w-5 h-5"
+      }
+    },
+    {
+      variant: "wave",
+      size: "md",
+      class: {
+        wrapper: "w-8 h-8"
+      }
+    },
+    {
+      variant: "wave",
+      size: "lg",
+      class: {
+        wrapper: "w-12 h-12"
+      }
+    },
+    {
+      variant: "dots",
+      size: "sm",
+      class: {
+        wrapper: "w-5 h-5"
+      }
+    },
+    {
+      variant: "dots",
+      size: "md",
+      class: {
+        wrapper: "w-8 h-8"
+      }
+    },
+    {
+      variant: "dots",
+      size: "lg",
+      class: {
+        wrapper: "w-12 h-12"
+      }
+    },
+    // Simple variants
+    // Size
+    {
+      variant: "simple",
+      size: "sm",
+      class: {
+        wrapper: "w-5 h-5"
+      }
+    },
+    {
+      variant: "simple",
+      size: "md",
+      class: {
+        wrapper: "w-8 h-8"
+      }
+    },
+    {
+      variant: "simple",
+      size: "lg",
+      class: {
+        wrapper: "w-12 h-12"
+      }
+    },
+    // Color
+    {
+      variant: "simple",
+      color: "current",
+      class: {
+        wrapper: "text-current"
+      }
+    },
+    {
+      variant: "simple",
+      color: "white",
+      class: {
+        wrapper: "text-white"
+      }
+    },
+    {
+      variant: "simple",
+      color: "default",
+      class: {
+        wrapper: "text-default"
+      }
+    },
+    {
+      variant: "simple",
+      color: "primary",
+      class: {
+        wrapper: "text-primary"
+      }
+    },
+    {
+      variant: "simple",
+      color: "secondary",
+      class: {
+        wrapper: "text-secondary"
+      }
+    },
+    {
+      variant: "simple",
+      color: "success",
+      class: {
+        wrapper: "text-success"
+      }
+    },
+    {
+      variant: "simple",
+      color: "warning",
+      class: {
+        wrapper: "text-warning"
+      }
+    },
+    {
+      variant: "simple",
+      color: "danger",
+      class: {
+        wrapper: "text-danger"
+      }
+    }
+  ]
+});
+
+export {
+  spinner
+};

package/dist/theme/chunk-SJT6KBYE.mjs

@@ -0,0 +1,62 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/drawer.ts
+var drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]"
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]"
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]"
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]"
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]"
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]"
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]"
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]"
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]"
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none"
+      }
+    },
+    placement: {
+      top: {
+        base: "inset-x-0 top-0 max-w-[none] rounded-t-none"
+      },
+      right: {
+        base: "inset-y-0 right-0 max-h-[none] rounded-r-none"
+      },
+      bottom: {
+        base: "inset-x-0 bottom-0 max-w-[none] rounded-b-none"
+      },
+      left: {
+        base: "inset-y-0 left-0 max-h-[none] rounded-l-none"
+      }
+    }
+  }
+});
+
+export {
+  drawer
+};

package/dist/theme/chunk-SZIFQ3NN.mjs

@@ -0,0 +1,288 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/table.ts
+var table = tv({
+  slots: {
+    base: "flex flex-col relative gap-4",
+    wrapper: [
+      "p-4",
+      "z-0",
+      "flex",
+      "flex-col",
+      "relative",
+      "justify-between",
+      "gap-4",
+      "shadow-small",
+      "bg-content1",
+      "overflow-auto"
+    ],
+    table: "min-w-full h-auto",
+    thead: "[&>tr]:first:rounded-lg",
+    tbody: "after:block",
+    tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
+    th: [
+      "group/th",
+      "px-3",
+      "h-10",
+      "text-start",
+      "align-middle",
+      "bg-default-100",
+      "whitespace-nowrap",
+      "text-foreground-500",
+      "text-tiny",
+      "font-semibold",
+      "first:rounded-s-lg",
+      "last:rounded-e-lg",
+      "outline-solid outline-transparent",
+      "data-[sortable=true]:cursor-pointer",
+      "data-[hover=true]:text-foreground-400",
+      ...dataFocusVisibleClasses
+    ],
+    td: [
+      "py-2",
+      "px-3",
+      "relative",
+      "align-middle",
+      "whitespace-normal",
+      "text-small",
+      "font-normal",
+      "outline-solid outline-transparent",
+      "[&>*]:z-1",
+      "[&>*]:relative",
+      ...dataFocusVisibleClasses,
+      // before content for selection
+      "before:pointer-events-none",
+      "before:content-['']",
+      "before:absolute",
+      "before:z-0",
+      "before:inset-0",
+      "before:opacity-0",
+      "data-[selected=true]:before:opacity-100",
+      // disabled
+      "group-data-[disabled=true]/tr:text-foreground-300",
+      "group-data-[disabled=true]/tr:cursor-not-allowed"
+    ],
+    tfoot: "",
+    sortIcon: [
+      "ms-2",
+      "mb-px",
+      "opacity-0",
+      "text-inherit",
+      "inline-block",
+      "transition-transform-opacity",
+      "data-[visible=true]:opacity-100",
+      "group-data-[hover=true]/th:opacity-100",
+      "data-[direction=ascending]:rotate-180"
+    ],
+    emptyWrapper: "text-foreground-400 align-middle text-center h-40",
+    loadingWrapper: "absolute inset-0 flex items-center justify-center"
+  },
+  variants: {
+    color: {
+      default: {
+        td: "before:bg-default/60 data-[selected=true]:text-default-foreground"
+      },
+      primary: {
+        td: "before:bg-primary/20 data-[selected=true]:text-primary"
+      },
+      secondary: {
+        td: "before:bg-secondary/20 data-[selected=true]:text-secondary"
+      },
+      success: {
+        td: "before:bg-success/20 data-[selected=true]:text-success-600 dark:data-[selected=true]:text-success"
+      },
+      warning: {
+        td: "before:bg-warning/20 data-[selected=true]:text-warning-600 dark:data-[selected=true]:text-warning"
+      },
+      danger: {
+        td: "before:bg-danger/20 data-[selected=true]:text-danger dark:data-[selected=true]:text-danger-500"
+      }
+    },
+    layout: {
+      auto: {
+        table: "table-auto"
+      },
+      fixed: {
+        table: "table-fixed"
+      }
+    },
+    shadow: {
+      none: {
+        wrapper: "shadow-none"
+      },
+      sm: {
+        wrapper: "shadow-small"
+      },
+      md: {
+        wrapper: "shadow-medium"
+      },
+      lg: {
+        wrapper: "shadow-large"
+      }
+    },
+    hideHeader: {
+      true: {
+        thead: "hidden"
+      }
+    },
+    isStriped: {
+      true: {
+        td: [
+          "group-data-[odd=true]/tr:before:bg-default-100",
+          "group-data-[odd=true]/tr:before:opacity-100",
+          "group-data-[odd=true]/tr:before:-z-10"
+        ]
+      }
+    },
+    isCompact: {
+      true: {
+        td: "py-1"
+      },
+      false: {}
+    },
+    isHeaderSticky: {
+      true: {
+        thead: "sticky top-0 z-20 [&>tr]:first:shadow-small"
+      }
+    },
+    isSelectable: {
+      true: {
+        tr: "cursor-default",
+        td: [
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100",
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70"
+        ]
+      }
+    },
+    isMultiSelectable: {
+      true: {
+        td: [
+          // first
+          "group-data-[first=true]/tr:first:before:rounded-ss-lg",
+          "group-data-[first=true]/tr:last:before:rounded-se-lg",
+          // middle
+          "group-data-[middle=true]/tr:before:rounded-none",
+          // last
+          "group-data-[last=true]/tr:first:before:rounded-es-lg",
+          "group-data-[last=true]/tr:last:before:rounded-ee-lg"
+        ]
+      },
+      false: {
+        td: ["first:before:rounded-s-lg", "last:before:rounded-e-lg"]
+      }
+    },
+    radius: {
+      none: {
+        wrapper: "rounded-none",
+        th: [
+          "first:rounded-s-none",
+          "first:before:rounded-s-none",
+          "last:rounded-e-none",
+          "last:before:rounded-e-none"
+        ],
+        td: [
+          "first:before:rounded-s-none",
+          "last:before:rounded-e-none",
+          "group-data-[first=true]/tr:first:before:rounded-ss-none",
+          "group-data-[first=true]/tr:last:before:rounded-se-none",
+          "group-data-[last=true]/tr:first:before:rounded-es-none",
+          "group-data-[last=true]/tr:last:before:rounded-ee-none"
+        ]
+      },
+      sm: {
+        wrapper: "rounded-small"
+      },
+      md: {
+        wrapper: "rounded-medium"
+      },
+      lg: {
+        wrapper: "rounded-large"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+        wrapper: "w-full",
+        table: "w-full"
+      }
+    },
+    align: {
+      start: {
+        th: "text-start",
+        td: "text-start"
+      },
+      center: {
+        th: "text-center",
+        td: "text-center"
+      },
+      end: {
+        th: "text-end",
+        td: "text-end"
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "auto",
+    shadow: "sm",
+    radius: "lg",
+    color: "default",
+    isCompact: false,
+    hideHeader: false,
+    isStriped: false,
+    fullWidth: true,
+    align: "start"
+  },
+  compoundVariants: [
+    {
+      isStriped: true,
+      color: "default",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60"
+      }
+    },
+    {
+      isStriped: true,
+      color: "primary",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20"
+      }
+    },
+    {
+      isStriped: true,
+      color: "secondary",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20"
+      }
+    },
+    {
+      isStriped: true,
+      color: "success",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20"
+      }
+    },
+    {
+      isStriped: true,
+      color: "warning",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20"
+      }
+    },
+    {
+      isStriped: true,
+      color: "danger",
+      class: {
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20"
+      }
+    }
+  ]
+});
+
+export {
+  table
+};

package/dist/theme/chunk-T3GWIVAM.mjs

@@ -0,0 +1,17 @@
+// src/colors/cyan.ts
+var cyan = {
+  50: "#F0FCFF",
+  100: "#E6FAFE",
+  200: "#D7F8FE",
+  300: "#C3F4FD",
+  400: "#A5EEFD",
+  500: "#7EE7FC",
+  600: "#06B7DB",
+  700: "#09AACD",
+  800: "#0E8AAA",
+  900: "#053B48"
+};
+
+export {
+  cyan
+};