@tomo-inc/tomo-ui 0.0.12 → 0.0.13

package/dist/theme/chunk-ZQGNWTBN.mjs

@@ -0,0 +1,450 @@
+import {
+  colorVariants
+} from "./chunk-GQT3YUX3.mjs";
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  collapseAdjacentVariantBorders,
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/button.ts
+var button = tv({
+  base: [
+    "z-0",
+    "group",
+    "relative",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "box-border",
+    "appearance-none",
+    "outline-solid outline-transparent",
+    "select-none",
+    "whitespace-nowrap",
+    "min-w-max",
+    "font-normal",
+    "subpixel-antialiased",
+    "overflow-hidden",
+    "tap-highlight-transparent",
+    "transform-gpu data-[pressed=true]:scale-[0.97]",
+    "cursor-pointer",
+    // focus ring
+    ...dataFocusVisibleClasses
+  ],
+  variants: {
+    variant: {
+      solid: "",
+      bordered: "border-medium bg-transparent",
+      light: "bg-transparent",
+      flat: "",
+      faded: "border-medium",
+      shadow: "",
+      ghost: "border-medium bg-transparent"
+    },
+    size: {
+      sm: "px-3 min-w-16 h-8 text-tiny gap-2 rounded-small",
+      md: "px-4 min-w-20 h-10 text-small gap-2 rounded-medium",
+      lg: "px-6 min-w-24 h-12 text-medium gap-3 rounded-large"
+    },
+    color: {
+      default: "",
+      primary: "",
+      secondary: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-small",
+      md: "rounded-medium",
+      lg: "rounded-large",
+      full: "rounded-full"
+    },
+    fullWidth: {
+      true: "w-full"
+    },
+    isDisabled: {
+      true: "opacity-disabled pointer-events-none"
+    },
+    isInGroup: {
+      true: "[&:not(:first-child):not(:last-child)]:rounded-none"
+    },
+    isIconOnly: {
+      true: "px-0 !gap-0",
+      false: "[&>svg]:max-w-[theme(spacing.8)]"
+    },
+    disableAnimation: {
+      true: "!transition-none data-[pressed=true]:scale-100",
+      false: "transition-transform-colors-opacity motion-reduce:transition-none"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "default",
+    fullWidth: false,
+    isDisabled: false,
+    isInGroup: false
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: colorVariants.solid.default
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: colorVariants.solid.primary
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: colorVariants.solid.secondary
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: colorVariants.solid.success
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: colorVariants.solid.warning
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: colorVariants.solid.danger
+    },
+    // shadow / color
+    {
+      variant: "shadow",
+      color: "default",
+      class: colorVariants.shadow.default
+    },
+    {
+      variant: "shadow",
+      color: "primary",
+      class: colorVariants.shadow.primary
+    },
+    {
+      variant: "shadow",
+      color: "secondary",
+      class: colorVariants.shadow.secondary
+    },
+    {
+      variant: "shadow",
+      color: "success",
+      class: colorVariants.shadow.success
+    },
+    {
+      variant: "shadow",
+      color: "warning",
+      class: colorVariants.shadow.warning
+    },
+    {
+      variant: "shadow",
+      color: "danger",
+      class: colorVariants.shadow.danger
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "default",
+      class: colorVariants.bordered.default
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: colorVariants.bordered.primary
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: colorVariants.bordered.secondary
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: colorVariants.bordered.success
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: colorVariants.bordered.warning
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: colorVariants.bordered.danger
+    },
+    // flat / color
+    {
+      variant: "flat",
+      color: "default",
+      class: colorVariants.flat.default
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: colorVariants.flat.primary
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: colorVariants.flat.secondary
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: colorVariants.flat.success
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: colorVariants.flat.warning
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: colorVariants.flat.danger
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: colorVariants.faded.default
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: colorVariants.faded.primary
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: colorVariants.faded.secondary
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: colorVariants.faded.success
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: colorVariants.faded.warning
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: colorVariants.faded.danger
+    },
+    // light / color
+    {
+      variant: "light",
+      color: "default",
+      class: [colorVariants.light.default, "data-[hover=true]:bg-default/40"]
+    },
+    {
+      variant: "light",
+      color: "primary",
+      class: [colorVariants.light.primary, "data-[hover=true]:bg-primary/20"]
+    },
+    {
+      variant: "light",
+      color: "secondary",
+      class: [colorVariants.light.secondary, "data-[hover=true]:bg-secondary/20"]
+    },
+    {
+      variant: "light",
+      color: "success",
+      class: [colorVariants.light.success, "data-[hover=true]:bg-success/20"]
+    },
+    {
+      variant: "light",
+      color: "warning",
+      class: [colorVariants.light.warning, "data-[hover=true]:bg-warning/20"]
+    },
+    {
+      variant: "light",
+      color: "danger",
+      class: [colorVariants.light.danger, "data-[hover=true]:bg-danger/20"]
+    },
+    // ghost / color
+    {
+      variant: "ghost",
+      color: "default",
+      class: [colorVariants.ghost.default, "data-[hover=true]:!bg-default"]
+    },
+    {
+      variant: "ghost",
+      color: "primary",
+      class: [
+        colorVariants.ghost.primary,
+        "data-[hover=true]:!bg-primary data-[hover=true]:!text-primary-foreground"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "secondary",
+      class: [
+        colorVariants.ghost.secondary,
+        "data-[hover=true]:!bg-secondary data-[hover=true]:!text-secondary-foreground"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: [
+        colorVariants.ghost.success,
+        "data-[hover=true]:!bg-success data-[hover=true]:!text-success-foreground"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "warning",
+      class: [
+        colorVariants.ghost.warning,
+        "data-[hover=true]:!bg-warning data-[hover=true]:!text-warning-foreground"
+      ]
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: [
+        colorVariants.ghost.danger,
+        "data-[hover=true]:!bg-danger data-[hover=true]:!text-danger-foreground"
+      ]
+    },
+    // isInGroup / radius / size <-- radius not provided
+    {
+      isInGroup: true,
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
+    },
+    {
+      isInGroup: true,
+      size: "sm",
+      class: "rounded-none first:rounded-s-small last:rounded-e-small"
+    },
+    {
+      isInGroup: true,
+      size: "md",
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
+    },
+    {
+      isInGroup: true,
+      size: "lg",
+      class: "rounded-none first:rounded-s-large last:rounded-e-large"
+    },
+    {
+      isInGroup: true,
+      isRounded: true,
+      class: "rounded-none first:rounded-s-full last:rounded-e-full"
+    },
+    // isInGroup / radius <-- radius provided
+    {
+      isInGroup: true,
+      radius: "none",
+      class: "rounded-none first:rounded-s-none last:rounded-e-none"
+    },
+    {
+      isInGroup: true,
+      radius: "sm",
+      class: "rounded-none first:rounded-s-small last:rounded-e-small"
+    },
+    {
+      isInGroup: true,
+      radius: "md",
+      class: "rounded-none first:rounded-s-medium last:rounded-e-medium"
+    },
+    {
+      isInGroup: true,
+      radius: "lg",
+      class: "rounded-none first:rounded-s-large last:rounded-e-large"
+    },
+    {
+      isInGroup: true,
+      radius: "full",
+      class: "rounded-none first:rounded-s-full last:rounded-e-full"
+    },
+    // isInGroup / bordered / ghost
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "default",
+      className: collapseAdjacentVariantBorders.default
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "primary",
+      className: collapseAdjacentVariantBorders.primary
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "secondary",
+      className: collapseAdjacentVariantBorders.secondary
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "success",
+      className: collapseAdjacentVariantBorders.success
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "warning",
+      className: collapseAdjacentVariantBorders.warning
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "danger",
+      className: collapseAdjacentVariantBorders.danger
+    },
+    {
+      isIconOnly: true,
+      size: "sm",
+      class: "min-w-8 w-8 h-8"
+    },
+    {
+      isIconOnly: true,
+      size: "md",
+      class: "min-w-10 w-10 h-10"
+    },
+    {
+      isIconOnly: true,
+      size: "lg",
+      class: "min-w-12 w-12 h-12"
+    },
+    // variant / hover
+    {
+      variant: ["solid", "faded", "flat", "bordered", "shadow"],
+      class: "data-[hover=true]:opacity-hover"
+    }
+  ]
+});
+var buttonGroup = tv({
+  base: "inline-flex items-center justify-center h-auto",
+  variants: {
+    fullWidth: {
+      true: "w-full"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+
+export {
+  button,
+  buttonGroup
+};

package/dist/theme/colors/blue.d.mts

@@ -0,0 +1,14 @@
+declare const blue: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+
+export { blue };

package/dist/theme/colors/blue.d.ts

@@ -0,0 +1,14 @@
+declare const blue: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+
+export { blue };

package/dist/theme/colors/blue.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/colors/blue.ts
+var blue_exports = {};
+__export(blue_exports, {
+  blue: () => blue
+});
+module.exports = __toCommonJS(blue_exports);
+var blue = {
+  50: "#e6f1fe",
+  100: "#cce3fd",
+  200: "#99c7fb",
+  300: "#66aaf9",
+  400: "#338ef7",
+  500: "#006FEE",
+  600: "#005bc4",
+  700: "#004493",
+  800: "#002e62",
+  900: "#001731"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  blue
+});

package/dist/theme/colors/blue.mjs

@@ -0,0 +1,6 @@
+import {
+  blue
+} from "../chunk-GHZ36ATJ.mjs";
+export {
+  blue
+};

package/dist/theme/colors/common.d.mts

@@ -0,0 +1,103 @@
+declare const commonColors: {
+    white: string;
+    black: string;
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    zinc: {
+        "50": string;
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "500": string;
+        "600": string;
+        "700": string;
+        "800": string;
+        "900": string;
+    };
+};
+type CommonColors = typeof commonColors;
+
+export { type CommonColors, commonColors };