@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/chunk-3K3T5W6T.mjs

@@ -0,0 +1,210 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/navbar.ts
+var navbar = tv({
+  slots: {
+    base: [
+      "flex",
+      "z-40",
+      "w-full",
+      "h-auto",
+      "items-center",
+      "justify-center",
+      "data-[menu-open=true]:border-none"
+    ],
+    wrapper: [
+      "z-40",
+      "flex",
+      "px-6",
+      "gap-4",
+      "w-full",
+      "flex-row",
+      "relative",
+      "flex-nowrap",
+      "items-center",
+      "justify-between",
+      "h-[var(--navbar-height)]"
+    ],
+    toggle: [
+      "group",
+      "flex",
+      "items-center",
+      "justify-center",
+      "w-6",
+      "h-full",
+      "outline-solid outline-transparent",
+      "rounded-small",
+      "tap-highlight-transparent",
+      // focus ring
+      ...dataFocusVisibleClasses
+    ],
+    srOnly: ["sr-only"],
+    toggleIcon: [
+      "w-full",
+      "h-full",
+      "pointer-events-none",
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-center",
+      "text-inherit",
+      "group-data-[pressed=true]:opacity-70",
+      "transition-opacity",
+      // before - first line
+      "before:content-['']",
+      "before:block",
+      "before:h-px",
+      "before:w-6",
+      "before:bg-current",
+      "before:transition-transform",
+      "before:duration-150",
+      "before:-translate-y-1",
+      "before:rotate-0",
+      "group-data-[open=true]:before:translate-y-px",
+      "group-data-[open=true]:before:rotate-45",
+      // after - second line
+      "after:content-['']",
+      "after:block",
+      "after:h-px",
+      "after:w-6",
+      "after:bg-current",
+      "after:transition-transform",
+      "after:duration-150",
+      "after:translate-y-1",
+      "after:rotate-0",
+      "group-data-[open=true]:after:translate-y-0",
+      "group-data-[open=true]:after:-rotate-45"
+    ],
+    brand: [
+      "flex",
+      "basis-0",
+      "flex-row",
+      "flex-grow",
+      "flex-nowrap",
+      "justify-start",
+      "bg-transparent",
+      "items-center",
+      "no-underline",
+      "text-medium",
+      "whitespace-nowrap",
+      "box-border"
+    ],
+    content: [
+      "flex",
+      "gap-4",
+      "h-full",
+      "flex-row",
+      "flex-nowrap",
+      "items-center",
+      "data-[justify=start]:justify-start",
+      "data-[justify=start]:flex-grow",
+      "data-[justify=start]:basis-0",
+      "data-[justify=center]:justify-center",
+      "data-[justify=end]:justify-end",
+      "data-[justify=end]:flex-grow",
+      "data-[justify=end]:basis-0"
+    ],
+    item: [
+      "text-medium",
+      "whitespace-nowrap",
+      "box-border",
+      "list-none",
+      // active
+      "data-[active=true]:font-semibold"
+    ],
+    menu: [
+      "z-30",
+      "px-6",
+      "pt-2",
+      "fixed",
+      "flex",
+      "max-w-full",
+      "top-[var(--navbar-height)]",
+      "inset-x-0",
+      "bottom-0",
+      "w-screen",
+      "flex-col",
+      "gap-2",
+      "overflow-y-auto"
+    ],
+    menuItem: [
+      "text-large",
+      // active
+      "data-[active=true]:font-semibold"
+    ]
+  },
+  variants: {
+    position: {
+      static: {
+        base: "static"
+      },
+      sticky: {
+        base: "sticky top-0 inset-x-0"
+      }
+    },
+    maxWidth: {
+      sm: {
+        wrapper: "max-w-[640px]"
+      },
+      md: {
+        wrapper: "max-w-[768px]"
+      },
+      lg: {
+        wrapper: "max-w-[1024px]"
+      },
+      xl: {
+        wrapper: "max-w-[1280px]"
+      },
+      "2xl": {
+        wrapper: "max-w-[1536px]"
+      },
+      full: {
+        wrapper: "max-w-full"
+      }
+    },
+    hideOnScroll: {
+      true: {
+        base: ["sticky", "top-0", "inset-x-0"]
+      }
+    },
+    isBordered: {
+      true: {
+        base: ["border-b", "border-divider"]
+      }
+    },
+    isBlurred: {
+      false: {
+        base: "bg-background",
+        menu: "bg-background"
+      },
+      true: {
+        base: [
+          "backdrop-blur-lg",
+          "data-[menu-open=true]:backdrop-blur-xl",
+          "backdrop-saturate-150",
+          "bg-background/70"
+        ],
+        menu: ["backdrop-blur-xl", "backdrop-saturate-150", "bg-background/70"]
+      }
+    },
+    disableAnimation: {
+      true: {
+        menu: ["hidden", "h-[calc(100dvh_-_var(--navbar-height))]", "data-[open=true]:flex"]
+      }
+    }
+  },
+  defaultVariants: {
+    maxWidth: "lg",
+    position: "sticky",
+    isBlurred: true
+  }
+});
+
+export {
+  navbar
+};

package/dist/theme/chunk-3LKKH4AR.mjs

@@ -0,0 +1,17 @@
+// src/colors/zinc.ts
+var zinc = {
+  "50": "#fafafa",
+  "100": "#f4f4f5",
+  "200": "#e4e4e7",
+  "300": "#d4d4d8",
+  "400": "#a1a1aa",
+  "500": "#71717a",
+  "600": "#52525b",
+  "700": "#3f3f46",
+  "800": "#27272a",
+  "900": "#18181b"
+};
+
+export {
+  zinc
+};

package/dist/theme/chunk-5UIRR2JQ.mjs

@@ -0,0 +1,31 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/date-picker.ts
+var datePicker = tv({
+  slots: {
+    base: "group w-full",
+    selectorButton: "-mx-2 text-inherit",
+    selectorIcon: "text-lg text-inherit pointer-events-none shrink-0",
+    popoverContent: "p-0 w-full",
+    calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
+    calendarContent: "w-[calc(var(--visible-months)_*_var(--calendar-width))]",
+    timeInputLabel: "font-medium",
+    timeInput: "px-5 pb-4 flex-wrap gap-x-6"
+  }
+});
+var dateRangePicker = tv({
+  extend: datePicker,
+  slots: {
+    calendar: "group",
+    bottomContent: "flex flex-col gap-y-2",
+    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
+    separator: "-mx-1 text-inherit"
+  }
+});
+
+export {
+  datePicker,
+  dateRangePicker
+};

package/dist/theme/chunk-63DOJZ5V.mjs

@@ -0,0 +1,108 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/link.ts
+var link = tv({
+  base: [
+    "relative inline-flex items-center outline-solid outline-transparent tap-highlight-transparent",
+    // focus ring
+    ...dataFocusVisibleClasses
+  ],
+  variants: {
+    size: {
+      sm: "text-small",
+      md: "text-medium",
+      lg: "text-large"
+    },
+    color: {
+      foreground: "text-foreground",
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-danger"
+    },
+    underline: {
+      none: "no-underline",
+      hover: "hover:underline",
+      always: "underline",
+      active: "active:underline",
+      focus: "focus:underline"
+    },
+    isBlock: {
+      true: [
+        "px-2",
+        "py-1",
+        "hover:after:opacity-100",
+        "after:content-['']",
+        "after:inset-0",
+        "after:opacity-0",
+        "after:w-full",
+        "after:h-full",
+        "after:rounded-xl",
+        "after:transition-background",
+        "after:absolute"
+      ],
+      false: "hover:opacity-hover active:opacity-disabled transition-opacity"
+    },
+    isDisabled: {
+      true: "opacity-disabled cursor-default pointer-events-none"
+    },
+    disableAnimation: {
+      true: "after:transition-none transition-none"
+    }
+  },
+  compoundVariants: [
+    {
+      isBlock: true,
+      color: "foreground",
+      class: "hover:after:bg-foreground/10"
+    },
+    {
+      isBlock: true,
+      color: "primary",
+      class: "hover:after:bg-primary/20"
+    },
+    {
+      isBlock: true,
+      color: "secondary",
+      class: "hover:after:bg-secondary/20"
+    },
+    {
+      isBlock: true,
+      color: "success",
+      class: "hover:after:bg-success/20"
+    },
+    {
+      isBlock: true,
+      color: "warning",
+      class: "hover:after:bg-warning/20"
+    },
+    {
+      isBlock: true,
+      color: "danger",
+      class: "hover:after:bg-danger/20"
+    },
+    {
+      underline: ["hover", "always", "active", "focus"],
+      class: "underline-offset-4"
+    }
+  ],
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isBlock: false,
+    underline: "none",
+    isDisabled: false
+  }
+});
+var linkAnchorClasses = "flex mx-1 text-current self-center";
+
+export {
+  link,
+  linkAnchorClasses
+};

package/dist/theme/chunk-6JJPIEK7.mjs

@@ -0,0 +1,28 @@
+import {
+  animation_default
+} from "./chunk-POSTVCTR.mjs";
+import {
+  custom_default
+} from "./chunk-MPVWW3DX.mjs";
+import {
+  scrollbar_hide_default
+} from "./chunk-WH6SPIFG.mjs";
+import {
+  text_default
+} from "./chunk-RUIUXVZ4.mjs";
+import {
+  transition_default
+} from "./chunk-GSRZWDGA.mjs";
+
+// src/utilities/index.ts
+var utilities = {
+  ...custom_default,
+  ...transition_default,
+  ...scrollbar_hide_default,
+  ...text_default,
+  ...animation_default
+};
+
+export {
+  utilities
+};

package/dist/theme/chunk-6N2H53XF.mjs

@@ -0,0 +1,42 @@
+import {
+  colorVariants
+} from "./chunk-GQT3YUX3.mjs";
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/code.ts
+var code = tv({
+  base: ["px-2", "py-1", "h-fit", "font-mono", "font-normal", "inline-block", "whitespace-nowrap"],
+  variants: {
+    color: {
+      default: colorVariants.flat.default,
+      primary: colorVariants.flat.primary,
+      secondary: colorVariants.flat.secondary,
+      success: colorVariants.flat.success,
+      warning: colorVariants.flat.warning,
+      danger: colorVariants.flat.danger
+    },
+    size: {
+      sm: "text-small",
+      md: "text-medium",
+      lg: "text-large"
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-small",
+      md: "rounded-medium",
+      lg: "rounded-large",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    size: "sm",
+    radius: "sm"
+  }
+});
+
+export {
+  code
+};