@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/chunk-HN25UZIQ.mjs

@@ -0,0 +1,372 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/dropdown.ts
+var dropdown = tv({
+  base: ["w-full", "p-1", "min-w-[200px]"]
+});
+var dropdownItem = tv({
+  slots: {
+    base: [
+      "flex",
+      "group",
+      "gap-2",
+      "items-center",
+      "justify-between",
+      "relative",
+      "px-2",
+      "py-1.5",
+      "w-full",
+      "h-full",
+      "box-border",
+      "rounded-small",
+      "outline-solid outline-transparent",
+      "cursor-pointer",
+      "tap-highlight-transparent",
+      "data-[pressed=true]:opacity-70",
+      // focus ring
+      ...dataFocusVisibleClasses,
+      "data-[focus-visible=true]:dark:ring-offset-background-content1"
+    ],
+    wrapper: "w-full flex flex-col items-start justify-center",
+    title: "flex-1 text-small font-normal truncate",
+    description: ["w-full", "text-tiny", "text-foreground-500", "group-hover:text-current"],
+    selectedIcon: ["text-inherit", "w-3", "h-3", "shrink-0"],
+    shortcut: [
+      "px-1",
+      "py-0.5",
+      "rounded-sm",
+      "font-sans",
+      "text-foreground-500",
+      "text-tiny",
+      "border-small",
+      "border-default-300",
+      "group-hover:border-current"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {
+        base: ""
+      },
+      bordered: {
+        base: "border-medium border-transparent bg-transparent"
+      },
+      light: {
+        base: "bg-transparent"
+      },
+      faded: {
+        base: "border-small border-transparent hover:border-default data-[hover=true]:bg-default-100"
+      },
+      flat: {
+        base: ""
+      },
+      shadow: {
+        base: "data-[hover=true]:shadow-lg"
+      }
+    },
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled pointer-events-none"
+      }
+    },
+    disableAnimation: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "default"
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:bg-default data-[hover=true]:text-default-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:bg-primary data-[hover=true]:text-primary-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:bg-success data-[hover=true]:text-success-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground"
+      }
+    },
+    // shadow / color
+    {
+      variant: "shadow",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:shadow-default/50 data-[hover=true]:bg-default data-[hover=true]:text-default-foreground"
+      }
+    },
+    {
+      variant: "shadow",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:shadow-primary/30 data-[hover=true]:bg-primary data-[hover=true]:text-primary-foreground"
+      }
+    },
+    {
+      variant: "shadow",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:shadow-secondary/30 data-[hover=true]:bg-secondary data-[hover=true]:text-secondary-foreground"
+      }
+    },
+    {
+      variant: "shadow",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:shadow-success/30 data-[hover=true]:bg-success data-[hover=true]:text-success-foreground"
+      }
+    },
+    {
+      variant: "shadow",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:shadow-warning/30 data-[hover=true]:bg-warning data-[hover=true]:text-warning-foreground"
+      }
+    },
+    {
+      variant: "shadow",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:shadow-danger/30 data-[hover=true]:bg-danger data-[hover=true]:text-danger-foreground"
+      }
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:border-default"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:border-primary data-[hover=true]:text-primary"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:border-secondary data-[hover=true]:text-secondary"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:border-success data-[hover=true]:text-success"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:border-warning data-[hover=true]:text-warning"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:border-danger data-[hover=true]:text-danger"
+      }
+    },
+    // flat / color
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:bg-default/40 data-[hover=true]:text-default-foreground"
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:bg-primary/20 data-[hover=true]:text-primary"
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:bg-secondary/20 data-[hover=true]:text-secondary"
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:bg-success/20 data-[hover=true]:text-success "
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:bg-warning/20 data-[hover=true]:text-warning"
+      }
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:bg-danger/20 data-[hover=true]:text-danger"
+      }
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:text-default-foreground"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:text-primary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:text-secondary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:text-success"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:text-warning"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:text-danger"
+      }
+    },
+    // light / color
+    {
+      variant: "light",
+      color: "default",
+      class: {
+        base: "data-[hover=true]:text-default-500"
+      }
+    },
+    {
+      variant: "light",
+      color: "primary",
+      class: {
+        base: "data-[hover=true]:text-primary"
+      }
+    },
+    {
+      variant: "light",
+      color: "secondary",
+      class: {
+        base: "data-[hover=true]:text-secondary"
+      }
+    },
+    {
+      variant: "light",
+      color: "success",
+      class: {
+        base: "data-[hover=true]:text-success"
+      }
+    },
+    {
+      variant: "light",
+      color: "warning",
+      class: {
+        base: "data-[hover=true]:text-warning"
+      }
+    },
+    {
+      variant: "light",
+      color: "danger",
+      class: {
+        base: "data-[hover=true]:text-danger"
+      }
+    }
+  ]
+});
+var dropdownSection = tv({
+  slots: {
+    base: "relative mb-2",
+    heading: "pl-1 text-tiny text-foreground-500",
+    group: "data-[has-title=true]:pt-1",
+    divider: "mt-2"
+  }
+});
+var dropdownMenu = tv({
+  base: "w-full flex flex-col gap-0.5 p-1"
+});
+
+export {
+  dropdown,
+  dropdownItem,
+  dropdownSection,
+  dropdownMenu
+};

package/dist/theme/chunk-HSSYMEQU.mjs

@@ -0,0 +1,178 @@
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  groupDataFocusVisibleClasses,
+  hiddenInputClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/toggle.ts
+var toggle = tv({
+  slots: {
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer touch-none tap-highlight-transparent select-none",
+    wrapper: [
+      "px-1",
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-start",
+      "shrink-0",
+      "overflow-hidden",
+      "bg-default-200",
+      "rounded-full",
+      // focus ring
+      ...groupDataFocusVisibleClasses
+    ],
+    thumb: [
+      "z-10",
+      "flex",
+      "items-center",
+      "justify-center",
+      "bg-white",
+      "shadow-small",
+      "rounded-full",
+      "origin-right",
+      "pointer-events-none"
+    ],
+    hiddenInput: hiddenInputClasses,
+    startContent: "z-0 absolute start-1.5 text-current",
+    endContent: "z-0 absolute end-1.5 text-default-600",
+    thumbIcon: "text-black",
+    label: "relative text-foreground select-none ms-2"
+  },
+  variants: {
+    color: {
+      default: {
+        wrapper: [
+          "group-data-[selected=true]:bg-default-400",
+          "group-data-[selected=true]:text-default-foreground"
+        ]
+      },
+      primary: {
+        wrapper: [
+          "group-data-[selected=true]:bg-primary",
+          "group-data-[selected=true]:text-primary-foreground"
+        ]
+      },
+      secondary: {
+        wrapper: [
+          "group-data-[selected=true]:bg-secondary",
+          "group-data-[selected=true]:text-secondary-foreground"
+        ]
+      },
+      success: {
+        wrapper: [
+          "group-data-[selected=true]:bg-success",
+          "group-data-[selected=true]:text-success-foreground"
+        ]
+      },
+      warning: {
+        wrapper: [
+          "group-data-[selected=true]:bg-warning",
+          "group-data-[selected=true]:text-warning-foreground"
+        ]
+      },
+      danger: {
+        wrapper: [
+          "group-data-[selected=true]:bg-danger",
+          "data-[selected=true]:text-danger-foreground"
+        ]
+      }
+    },
+    size: {
+      sm: {
+        wrapper: "w-10 h-6",
+        thumb: [
+          "w-4 h-4 text-tiny",
+          //selected
+          "group-data-[selected=true]:ms-4"
+        ],
+        endContent: "text-tiny",
+        startContent: "text-tiny",
+        label: "text-small"
+      },
+      md: {
+        wrapper: "w-12 h-7",
+        thumb: [
+          "w-5 h-5 text-small",
+          //selected
+          "group-data-[selected=true]:ms-5"
+        ],
+        endContent: "text-small",
+        startContent: "text-small",
+        label: "text-medium"
+      },
+      lg: {
+        wrapper: "w-14 h-8",
+        thumb: [
+          "w-6 h-6 text-medium",
+          //selected
+          "group-data-[selected=true]:ms-6"
+        ],
+        endContent: "text-medium",
+        startContent: "text-medium",
+        label: "text-large"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled pointer-events-none"
+      }
+    },
+    disableAnimation: {
+      true: {
+        wrapper: "transition-none",
+        thumb: "transition-none"
+      },
+      false: {
+        wrapper: "transition-background",
+        thumb: "transition-all",
+        startContent: [
+          "opacity-0",
+          "scale-50",
+          "transition-transform-opacity",
+          "group-data-[selected=true]:scale-100",
+          "group-data-[selected=true]:opacity-100"
+        ],
+        endContent: [
+          "opacity-100",
+          "transition-transform-opacity",
+          "group-data-[selected=true]:translate-x-3",
+          "group-data-[selected=true]:opacity-0"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false
+  },
+  compoundVariants: [
+    {
+      disableAnimation: false,
+      size: "sm",
+      class: {
+        thumb: ["group-data-[pressed=true]:w-5", "group-data-[selected]:group-data-[pressed]:ml-3"]
+      }
+    },
+    {
+      disableAnimation: false,
+      size: "md",
+      class: {
+        thumb: ["group-data-[pressed=true]:w-6", "group-data-[selected]:group-data-[pressed]:ml-4"]
+      }
+    },
+    {
+      disableAnimation: false,
+      size: "lg",
+      class: {
+        thumb: ["group-data-[pressed=true]:w-7", "group-data-[selected]:group-data-[pressed]:ml-5"]
+      }
+    }
+  ]
+});
+
+export {
+  toggle
+};

package/dist/theme/chunk-HUBDRSA4.mjs

@@ -0,0 +1,49 @@
+// src/default-layout.ts
+var defaultLayout = {
+  dividerWeight: "1px",
+  disabledOpacity: ".5",
+  fontSize: {
+    tiny: "0.75rem",
+    small: "0.875rem",
+    medium: "1rem",
+    large: "1.125rem"
+  },
+  lineHeight: {
+    tiny: "1rem",
+    small: "1.25rem",
+    medium: "1.5rem",
+    large: "1.75rem"
+  },
+  radius: {
+    small: "8px",
+    medium: "12px",
+    large: "14px"
+  },
+  borderWidth: {
+    small: "1px",
+    medium: "2px",
+    large: "3px"
+  },
+  boxShadow: {
+    small: "0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+    medium: "0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+    large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)"
+  }
+};
+var lightLayout = {
+  hoverOpacity: ".8"
+};
+var darkLayout = {
+  hoverOpacity: ".9",
+  boxShadow: {
+    small: "0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
+    medium: "0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
+    large: "0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)"
+  }
+};
+
+export {
+  defaultLayout,
+  lightLayout,
+  darkLayout
+};

package/dist/theme/chunk-IAS3SFA4.mjs

@@ -0,0 +1,42 @@
+import {
+  yellow
+} from "./chunk-JUEOCLA3.mjs";
+import {
+  zinc
+} from "./chunk-3LKKH4AR.mjs";
+import {
+  cyan
+} from "./chunk-T3GWIVAM.mjs";
+import {
+  green
+} from "./chunk-OR5PUD24.mjs";
+import {
+  pink
+} from "./chunk-DCEG5LGX.mjs";
+import {
+  purple
+} from "./chunk-L2OL7R23.mjs";
+import {
+  red
+} from "./chunk-YZYGFPNK.mjs";
+import {
+  blue
+} from "./chunk-GHZ36ATJ.mjs";
+
+// src/colors/common.ts
+var commonColors = {
+  white: "#ffffff",
+  black: "#000000",
+  blue,
+  green,
+  pink,
+  purple,
+  red,
+  yellow,
+  cyan,
+  zinc
+};
+
+export {
+  commonColors
+};