@tomo-inc/tomo-ui 0.0.11 → 0.0.13

package/dist/theme/chunk-DWPAOIB3.mjs

@@ -0,0 +1,341 @@
+import {
+  colorVariants
+} from "./chunk-GQT3YUX3.mjs";
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/alert.ts
+var alert = tv({
+  slots: {
+    base: "flex flex-grow flex-row w-full items-center py-3 px-4 gap-x-1",
+    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit justify-center",
+    title: "text-small w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
+    closeButton: "relative text-inherit translate-x-1 -translate-y-1",
+    iconWrapper: "flex-none relative w-9 h-9 rounded-full grid place-items-center",
+    alertIcon: "fill-current w-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+  },
+  variants: {
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    variant: {
+      solid: {},
+      flat: {},
+      faded: {
+        base: "border-small"
+      },
+      bordered: {
+        base: "border-small bg-transparent"
+      }
+    },
+    radius: {
+      none: {
+        base: "rounded-none"
+      },
+      sm: {
+        base: "rounded-small"
+      },
+      md: {
+        base: "rounded-medium"
+      },
+      lg: {
+        base: "rounded-large"
+      },
+      full: {
+        base: "rounded-full"
+      }
+    },
+    hideIcon: {
+      true: {
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none !border-none"
+      }
+    },
+    hasContent: {
+      false: {
+        base: "items-center",
+        mainWrapper: "justify-center items-center"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "flat",
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        base: colorVariants.solid.default,
+        closeButton: "data-[hover]:bg-default-100",
+        alertIcon: "text-default-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: colorVariants.solid.primary
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: colorVariants.solid.secondary
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: colorVariants.solid.success
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: colorVariants.solid.warning
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: colorVariants.solid.danger
+      }
+    },
+    // flat & faded / color
+    {
+      variant: ["flat", "faded"],
+      color: "default",
+      class: {
+        base: [
+          colorVariants.flat.default,
+          "bg-default-100 dark:bg-default-50/50",
+          "text-default-foreground"
+        ],
+        description: "text-default-600",
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100 border-default-200"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "primary",
+      class: {
+        base: [colorVariants.flat.primary, "bg-primary-50 dark:bg-primary-50/50"],
+        closeButton: "text-primary-500 data-[hover]:bg-primary-200",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100 border-primary-100"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "secondary",
+      class: {
+        base: [colorVariants.flat.secondary, "bg-secondary-50 dark:bg-secondary-50/50"],
+        closeButton: "text-secondary-500 data-[hover]:bg-secondary-200",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100 border-secondary-100"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "success",
+      class: {
+        base: [colorVariants.flat.success, "bg-success-50 dark:bg-success-50/50"],
+        closeButton: "text-success-500 data-[hover]:bg-success-200",
+        iconWrapper: "bg-success-50 dark:bg-success-100 border-success-100"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "warning",
+      class: {
+        base: [colorVariants.flat.warning, "bg-warning-50 dark:bg-warning-50/50"],
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100 border-warning-100"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "danger",
+      class: {
+        base: [colorVariants.flat.danger, "bg-danger-50 dark:bg-danger-50/50"],
+        closeButton: "text-danger-500 data-[hover]:bg-danger-200",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100 border-danger-100"
+      }
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default-300 dark:border-default-200"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary-200 dark:border-primary-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary-200"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success-300 dark:border-success-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning-300 dark:border-warning-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger-200 dark:border-danger-100"
+      }
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        base: [colorVariants.bordered.default],
+        description: "text-default-600",
+        closeButton: "text-default-400"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: [colorVariants.bordered.primary],
+        closeButton: "data-[hover]:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: [colorVariants.bordered.secondary],
+        closeButton: "data-[hover]:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: [colorVariants.bordered.success],
+        closeButton: "data-[hover]:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: [colorVariants.bordered.warning],
+        closeButton: "data-[hover]:bg-warning-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: [colorVariants.bordered.danger],
+        closeButton: "data-[hover]:bg-danger-50"
+      }
+    },
+    // flat & bordered & faded
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    // flat & faded
+    {
+      variant: ["flat", "faded"],
+      class: {
+        iconWrapper: "shadow-small border-1"
+      }
+    },
+    // bordered & color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
+    }
+  ]
+});
+
+export {
+  alert
+};

package/dist/theme/chunk-FCBE5KQW.mjs

@@ -0,0 +1,388 @@
+import {
+  colorVariants
+} from "./chunk-GQT3YUX3.mjs";
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+
+// src/components/badge.ts
+var badge = tv({
+  slots: {
+    base: ["relative", "inline-flex", "shrink-0"],
+    badge: [
+      "flex",
+      "z-10",
+      "flex-wrap",
+      "absolute",
+      "box-border",
+      "rounded-full",
+      "whitespace-nowrap",
+      "place-content-center",
+      "origin-center",
+      "items-center",
+      "text-inherit",
+      "select-none",
+      "font-regular",
+      "scale-100",
+      "opacity-100",
+      "subpixel-antialiased",
+      "data-[invisible=true]:scale-0",
+      "data-[invisible=true]:opacity-0"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: {},
+      flat: {},
+      faded: {
+        badge: "border-medium"
+      },
+      shadow: {}
+    },
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    size: {
+      sm: {
+        badge: "px-1 text-tiny"
+      },
+      md: {
+        badge: "px-1 text-small"
+      },
+      lg: {
+        badge: "px-1 text-small"
+      }
+    },
+    placement: {
+      "top-right": {},
+      "top-left": {},
+      "bottom-right": {},
+      "bottom-left": {}
+    },
+    shape: {
+      circle: {},
+      rectangle: {}
+    },
+    isInvisible: {
+      true: {}
+    },
+    isOneChar: {
+      true: {
+        badge: "px-0"
+      }
+    },
+    isDot: {
+      true: {}
+    },
+    disableAnimation: {
+      true: {
+        badge: "transition-none"
+      },
+      false: {
+        badge: "transition-transform-opacity !ease-soft-spring !duration-300"
+      }
+    },
+    showOutline: {
+      true: {
+        badge: "border-2 border-background"
+      },
+      false: {
+        badge: "border-transparent border-0"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    color: "default",
+    size: "md",
+    shape: "rectangle",
+    placement: "top-right",
+    showOutline: true,
+    isInvisible: false
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        badge: colorVariants.solid.default
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        badge: colorVariants.solid.primary
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        badge: colorVariants.solid.secondary
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        badge: colorVariants.solid.success
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        badge: colorVariants.solid.warning
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        badge: colorVariants.solid.danger
+      }
+    },
+    // shadow / color
+    {
+      variant: "shadow",
+      color: "default",
+      class: {
+        badge: colorVariants.shadow.default
+      }
+    },
+    {
+      variant: "shadow",
+      color: "primary",
+      class: {
+        badge: colorVariants.shadow.primary
+      }
+    },
+    {
+      variant: "shadow",
+      color: "secondary",
+      class: {
+        badge: colorVariants.shadow.secondary
+      }
+    },
+    {
+      variant: "shadow",
+      color: "success",
+      class: {
+        badge: colorVariants.shadow.success
+      }
+    },
+    {
+      variant: "shadow",
+      color: "warning",
+      class: {
+        badge: colorVariants.shadow.warning
+      }
+    },
+    {
+      variant: "shadow",
+      color: "danger",
+      class: {
+        badge: colorVariants.shadow.danger
+      }
+    },
+    // flat / color
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        badge: colorVariants.flat.default
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        badge: colorVariants.flat.primary
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        badge: colorVariants.flat.secondary
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        badge: colorVariants.flat.success
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        badge: colorVariants.flat.warning
+      }
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        badge: colorVariants.flat.danger
+      }
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        badge: colorVariants.faded.default
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        badge: colorVariants.faded.primary
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        badge: colorVariants.faded.secondary
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        badge: colorVariants.faded.success
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        badge: colorVariants.faded.warning
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        badge: colorVariants.faded.danger
+      }
+    },
+    // isOneChar / size
+    {
+      isOneChar: true,
+      size: "sm",
+      class: {
+        badge: "w-4 h-4 min-w-4 min-h-4"
+      }
+    },
+    {
+      isOneChar: true,
+      size: "md",
+      class: {
+        badge: "w-5 h-5 min-w-5 min-h-5"
+      }
+    },
+    {
+      isOneChar: true,
+      size: "lg",
+      class: {
+        badge: "w-6 h-6 min-w-6 min-h-6"
+      }
+    },
+    // isDot / size
+    {
+      isDot: true,
+      size: "sm",
+      class: {
+        badge: "w-3 h-3 min-w-3 min-h-3"
+      }
+    },
+    {
+      isDot: true,
+      size: "md",
+      class: {
+        badge: "w-3.5 h-3.5 min-w-3.5 min-h-3.5"
+      }
+    },
+    {
+      isDot: true,
+      size: "lg",
+      class: {
+        badge: "w-4 h-4 min-w-4 min-h-4"
+      }
+    },
+    // placement / rectangle
+    {
+      placement: "top-right",
+      shape: "rectangle",
+      class: {
+        badge: "top-[5%] right-[5%] translate-x-1/2 -translate-y-1/2"
+      }
+    },
+    {
+      placement: "top-left",
+      shape: "rectangle",
+      class: {
+        badge: "top-[5%] left-[5%] -translate-x-1/2 -translate-y-1/2"
+      }
+    },
+    {
+      placement: "bottom-right",
+      shape: "rectangle",
+      class: {
+        badge: "bottom-[5%] right-[5%] translate-x-1/2 translate-y-1/2"
+      }
+    },
+    {
+      placement: "bottom-left",
+      shape: "rectangle",
+      class: {
+        badge: "bottom-[5%] left-[5%] -translate-x-1/2 translate-y-1/2"
+      }
+    },
+    // placement / circle
+    {
+      placement: "top-right",
+      shape: "circle",
+      class: {
+        badge: "top-[10%] right-[10%] translate-x-1/2 -translate-y-1/2"
+      }
+    },
+    {
+      placement: "top-left",
+      shape: "circle",
+      class: {
+        badge: "top-[10%] left-[10%] -translate-x-1/2 -translate-y-1/2"
+      }
+    },
+    {
+      placement: "bottom-right",
+      shape: "circle",
+      class: {
+        badge: "bottom-[10%] right-[10%] translate-x-1/2 translate-y-1/2"
+      }
+    },
+    {
+      placement: "bottom-left",
+      shape: "circle",
+      class: {
+        badge: "bottom-[10%] left-[10%] -translate-x-1/2 translate-y-1/2"
+      }
+    }
+  ]
+});
+
+export {
+  badge
+};