@tomo-inc/tomo-ui 0.0.12 → 0.0.13

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

@@ -0,0 +1,418 @@
+import {
+  colorVariants
+} from "./chunk-GQT3YUX3.mjs";
+import {
+  tv
+} from "./chunk-TX3FPB7D.mjs";
+import {
+  dataFocusVisibleClasses
+} from "./chunk-JGY6VQQQ.mjs";
+
+// src/components/tabs.ts
+var tabs = tv({
+  slots: {
+    base: "inline-flex",
+    tabList: [
+      "relative",
+      "flex",
+      "p-1",
+      "h-fit",
+      "gap-2",
+      "items-center",
+      "flex-nowrap",
+      "overflow-x-scroll",
+      "scrollbar-hide",
+      "bg-default-100"
+    ],
+    tab: [
+      "z-0",
+      "w-full",
+      "px-3",
+      "py-1",
+      "flex",
+      "group",
+      "relative",
+      "justify-center",
+      "items-center",
+      "outline-solid outline-transparent",
+      "cursor-pointer",
+      "transition-opacity",
+      "tap-highlight-transparent",
+      "data-[disabled=true]:cursor-not-allowed",
+      "data-[disabled=true]:opacity-30",
+      "data-[hover-unselected=true]:opacity-disabled",
+      // focus ring
+      ...dataFocusVisibleClasses
+    ],
+    tabContent: [
+      "relative",
+      "z-10",
+      "text-inherit",
+      "whitespace-nowrap",
+      "transition-colors",
+      "text-default-500",
+      "group-data-[selected=true]:text-foreground"
+    ],
+    cursor: [
+      "absolute",
+      "z-0",
+      "bg-white",
+      "will-change-[transform,width,height]",
+      "transition-[left,top,width,height]",
+      "duration-250",
+      "ease-out"
+    ],
+    panel: [
+      "py-3",
+      "px-1",
+      "outline-solid outline-transparent",
+      "data-[inert=true]:hidden",
+      // focus ring
+      ...dataFocusVisibleClasses
+    ],
+    tabWrapper: []
+  },
+  variants: {
+    variant: {
+      solid: {
+        cursor: "inset-0"
+      },
+      light: {
+        tabList: "bg-transparent dark:bg-transparent",
+        cursor: "inset-0"
+      },
+      underlined: {
+        tabList: "bg-transparent dark:bg-transparent",
+        cursor: "h-[2px] w-[80%] bottom-0 shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]"
+      },
+      bordered: {
+        tabList: "bg-transparent dark:bg-transparent border-medium border-default-200 shadow-xs",
+        cursor: "inset-0"
+      }
+    },
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    size: {
+      sm: {
+        tabList: "rounded-medium",
+        tab: "h-7 text-tiny rounded-small",
+        cursor: "rounded-small"
+      },
+      md: {
+        tabList: "rounded-medium",
+        tab: "h-8 text-small rounded-small",
+        cursor: "rounded-small"
+      },
+      lg: {
+        tabList: "rounded-large",
+        tab: "h-9 text-medium rounded-medium",
+        cursor: "rounded-medium"
+      }
+    },
+    radius: {
+      none: {
+        tabList: "rounded-none",
+        tab: "rounded-none",
+        cursor: "rounded-none"
+      },
+      sm: {
+        tabList: "rounded-medium",
+        tab: "rounded-small",
+        cursor: "rounded-small"
+      },
+      md: {
+        tabList: "rounded-medium",
+        tab: "rounded-small",
+        cursor: "rounded-small"
+      },
+      lg: {
+        tabList: "rounded-large",
+        tab: "rounded-medium",
+        cursor: "rounded-medium"
+      },
+      full: {
+        tabList: "rounded-full",
+        tab: "rounded-full",
+        cursor: "rounded-full"
+      }
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+        tabList: "w-full"
+      }
+    },
+    isDisabled: {
+      true: {
+        tabList: "opacity-disabled pointer-events-none"
+      }
+    },
+    disableAnimation: {
+      true: {
+        tab: "transition-none",
+        tabContent: "transition-none"
+      }
+    },
+    placement: {
+      top: {},
+      start: {
+        tabList: "flex-col",
+        panel: "py-0 px-3",
+        tabWrapper: "flex"
+      },
+      end: {
+        tabList: "flex-col",
+        panel: "py-0 px-3",
+        tabWrapper: "flex flex-row-reverse"
+      },
+      bottom: {
+        tabWrapper: "flex flex-col-reverse"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "solid",
+    size: "md",
+    fullWidth: false,
+    isDisabled: false
+  },
+  compoundVariants: [
+    /**
+     * Variants & Colors
+     */
+    // solid + bordered + light && color
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "default",
+      class: {
+        cursor: ["bg-background", "dark:bg-default", "shadow-small"],
+        tabContent: "group-data-[selected=true]:text-default-foreground"
+      }
+    },
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "primary",
+      class: {
+        cursor: colorVariants.solid.primary,
+        tabContent: "group-data-[selected=true]:text-primary-foreground"
+      }
+    },
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "secondary",
+      class: {
+        cursor: colorVariants.solid.secondary,
+        tabContent: "group-data-[selected=true]:text-secondary-foreground"
+      }
+    },
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "success",
+      class: {
+        cursor: colorVariants.solid.success,
+        tabContent: "group-data-[selected=true]:text-success-foreground"
+      }
+    },
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "warning",
+      class: {
+        cursor: colorVariants.solid.warning,
+        tabContent: "group-data-[selected=true]:text-warning-foreground"
+      }
+    },
+    {
+      variant: ["solid", "bordered", "light"],
+      color: "danger",
+      class: {
+        cursor: colorVariants.solid.danger,
+        tabContent: "group-data-[selected=true]:text-danger-foreground"
+      }
+    },
+    // underlined && color
+    {
+      variant: "underlined",
+      color: "default",
+      class: {
+        cursor: "bg-foreground",
+        tabContent: "group-data-[selected=true]:text-foreground"
+      }
+    },
+    {
+      variant: "underlined",
+      color: "primary",
+      class: {
+        cursor: "bg-primary",
+        tabContent: "group-data-[selected=true]:text-primary"
+      }
+    },
+    {
+      variant: "underlined",
+      color: "secondary",
+      class: {
+        cursor: "bg-secondary",
+        tabContent: "group-data-[selected=true]:text-secondary"
+      }
+    },
+    {
+      variant: "underlined",
+      color: "success",
+      class: {
+        cursor: "bg-success",
+        tabContent: "group-data-[selected=true]:text-success"
+      }
+    },
+    {
+      variant: "underlined",
+      color: "warning",
+      class: {
+        cursor: "bg-warning",
+        tabContent: "group-data-[selected=true]:text-warning"
+      }
+    },
+    {
+      variant: "underlined",
+      color: "danger",
+      class: {
+        cursor: "bg-danger",
+        tabContent: "group-data-[selected=true]:text-danger"
+      }
+    },
+    /**
+     * Disable animation & Variants & Colors
+     */
+    // disabledAnimation && underlined
+    {
+      disableAnimation: true,
+      variant: "underlined",
+      class: {
+        tab: [
+          "after:content-['']",
+          "after:absolute",
+          "after:bottom-0",
+          "after:h-[2px]",
+          "after:w-[80%]",
+          "after:opacity-0",
+          "after:shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
+          "data-[selected=true]:after:opacity-100"
+        ]
+      }
+    },
+    // disableAnimation && color && solid/bordered
+    {
+      disableAnimation: true,
+      color: "default",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-default data-[selected=true]:text-default-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "primary",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "secondary",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-secondary data-[selected=true]:text-secondary-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "success",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-success data-[selected=true]:text-success-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "warning",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-warning data-[selected=true]:text-warning-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "danger",
+      variant: ["solid", "bordered", "light"],
+      class: {
+        tab: "data-[selected=true]:bg-danger data-[selected=true]:text-danger-foreground"
+      }
+    },
+    // disableAnimation && color && underlined
+    {
+      disableAnimation: true,
+      color: "default",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-foreground"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "primary",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-primary"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "secondary",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-secondary"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "success",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-success"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "warning",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-warning"
+      }
+    },
+    {
+      disableAnimation: true,
+      color: "danger",
+      variant: "underlined",
+      class: {
+        tab: "data-[selected=true]:after:bg-danger"
+      }
+    }
+  ],
+  compoundSlots: [
+    {
+      variant: "underlined",
+      slots: ["tab", "tabList", "cursor"],
+      class: ["rounded-none"]
+    }
+  ]
+});
+
+export {
+  tabs
+};

package/dist/theme/chunk-7ZMFUXZH.mjs

@@ -0,0 +1,229 @@
+import {
+  isBaseTheme
+} from "./chunk-D2XMP2NC.mjs";
+import {
+  baseStyles
+} from "./chunk-JGY6VQQQ.mjs";
+import {
+  utilities
+} from "./chunk-6JJPIEK7.mjs";
+import {
+  DEFAULT_TRANSITION_DURATION
+} from "./chunk-GSRZWDGA.mjs";
+import {
+  semanticColors
+} from "./chunk-G4RCK475.mjs";
+import {
+  flattenThemeObject
+} from "./chunk-KUNVFLXJ.mjs";
+import {
+  darkLayout,
+  defaultLayout,
+  lightLayout
+} from "./chunk-HUBDRSA4.mjs";
+import {
+  animations
+} from "./chunk-KXPLHLA6.mjs";
+import {
+  commonColors
+} from "./chunk-IAS3SFA4.mjs";
+
+// src/plugin.ts
+import Color from "color";
+import plugin from "tailwindcss/plugin.js";
+import deepMerge from "deepmerge";
+import { omit, kebabCase, mapKeys } from "@heroui/shared-utils";
+var DEFAULT_PREFIX = "heroui";
+var parsedColorsCache = {};
+var resolveConfig = (themes = {}, defaultTheme, prefix) => {
+  const resolved = {
+    variants: [],
+    utilities: {},
+    colors: {},
+    baseStyles: {}
+  };
+  for (const [themeName, { extend, layout, colors }] of Object.entries(themes)) {
+    let cssSelector = `.${themeName}`;
+    const scheme = themeName === "light" || themeName === "dark" ? themeName : extend;
+    let baseSelector = "";
+    if (themeName === defaultTheme) {
+      baseSelector = `:root, [data-theme=${themeName}]`;
+    }
+    baseSelector && (resolved.baseStyles[baseSelector] = scheme ? {
+      "color-scheme": scheme
+    } : {});
+    resolved.utilities[cssSelector] = scheme ? {
+      "color-scheme": scheme
+    } : {};
+    const flatColors = flattenThemeObject(colors);
+    const flatLayout = layout ? mapKeys(layout, (_, key) => kebabCase(key)) : {};
+    resolved.variants.push({
+      name: themeName,
+      definition: [`&.${themeName}`, `&[data-theme='${themeName}']`]
+    });
+    for (const [colorName, colorValue] of Object.entries(flatColors)) {
+      if (!colorValue) return;
+      try {
+        const parsedColor = parsedColorsCache[colorValue] || Color(colorValue).hsl().round(2).array();
+        parsedColorsCache[colorValue] = parsedColor;
+        const [h, s, l, defaultAlphaValue] = parsedColor;
+        const herouiColorVariable = `--${prefix}-${colorName}`;
+        resolved.utilities[cssSelector][herouiColorVariable] = `${h} ${s}% ${l}%`;
+        baseSelector && (resolved.baseStyles[baseSelector][herouiColorVariable] = `${h} ${s}% ${l}%`);
+        resolved.colors[colorName] = `hsl(var(${herouiColorVariable}) / ${defaultAlphaValue != null ? defaultAlphaValue : "<alpha-value>"})`;
+      } catch (error) {
+        console.log("error", error == null ? void 0 : error.message);
+      }
+    }
+    for (const [key, value] of Object.entries(flatLayout)) {
+      if (!value) return;
+      const layoutVariablePrefix = `--${prefix}-${key}`;
+      if (typeof value === "object") {
+        for (const [nestedKey, nestedValue] of Object.entries(value)) {
+          const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+          resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+          baseSelector && (resolved.baseStyles[baseSelector][nestedLayoutVariable] = nestedValue);
+        }
+      } else {
+        const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number" ? value.toString().replace(/^0\./, ".") : value;
+        resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
+        baseSelector && (resolved.baseStyles[baseSelector][layoutVariablePrefix] = formattedValue);
+      }
+    }
+  }
+  return resolved;
+};
+var corePlugin = (themes = {}, defaultTheme, prefix, addCommonColors) => {
+  const resolved = resolveConfig(themes, defaultTheme, prefix);
+  const createStripeGradient = (stripeColor, backgroundColor) => `linear-gradient(45deg,  hsl(var(--${prefix}-${stripeColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})))`;
+  return plugin(
+    ({ addBase, addUtilities, addVariant }) => {
+      addBase({
+        [":root, [data-theme]"]: {
+          ...baseStyles(prefix)
+        }
+      });
+      addBase({ ...resolved == null ? void 0 : resolved.baseStyles });
+      addUtilities({ ...resolved == null ? void 0 : resolved.utilities, ...utilities });
+      resolved == null ? void 0 : resolved.variants.forEach((variant) => {
+        addVariant(variant.name, variant.definition);
+      });
+    },
+    // extend the colors config
+    {
+      theme: {
+        extend: {
+          // @ts-ignore
+          colors: {
+            ...addCommonColors ? commonColors : {},
+            ...resolved == null ? void 0 : resolved.colors
+          },
+          scale: {
+            "80": "0.8",
+            "85": "0.85"
+          },
+          height: {
+            divider: `var(--${prefix}-divider-weight)`
+          },
+          width: {
+            divider: `var(--${prefix}-divider-weight)`
+          },
+          borderRadius: {
+            small: `var(--${prefix}-radius-small)`,
+            medium: `var(--${prefix}-radius-medium)`,
+            large: `var(--${prefix}-radius-large)`
+          },
+          opacity: {
+            hover: `var(--${prefix}-hover-opacity)`,
+            disabled: `var(--${prefix}-disabled-opacity)`
+          },
+          borderWidth: {
+            small: `var(--${prefix}-border-width-small)`,
+            medium: `var(--${prefix}-border-width-medium)`,
+            large: `var(--${prefix}-border-width-large)`,
+            1: "1px",
+            1.5: "1.5px",
+            3: "3px",
+            5: "5px"
+          },
+          boxShadow: {
+            small: `var(--${prefix}-box-shadow-small)`,
+            medium: `var(--${prefix}-box-shadow-medium)`,
+            large: `var(--${prefix}-box-shadow-large)`
+          },
+          backgroundSize: {
+            "stripe-size": "1.25rem 1.25rem"
+          },
+          backgroundImage: {
+            "stripe-gradient-default": createStripeGradient("default-200", "default-400"),
+            "stripe-gradient-primary": createStripeGradient("primary-200", "primary"),
+            "stripe-gradient-secondary": createStripeGradient("secondary-200", "secondary"),
+            "stripe-gradient-success": createStripeGradient("success-200", "success"),
+            "stripe-gradient-warning": createStripeGradient("warning-200", "warning"),
+            "stripe-gradient-danger": createStripeGradient("danger-200", "danger")
+          },
+          transitionDuration: {
+            0: "0ms",
+            250: "250ms",
+            400: "400ms",
+            DEFAULT: DEFAULT_TRANSITION_DURATION
+          },
+          transitionTimingFunction: {
+            "soft-spring": "cubic-bezier(0.155, 1.105, 0.295, 1.12)"
+          },
+          ...animations
+        }
+      }
+    }
+  );
+};
+var heroui = (config = {}) => {
+  var _a, _b, _c, _d;
+  const {
+    themes: themeObject = {},
+    defaultTheme = "light",
+    layout: userLayout,
+    defaultExtendTheme = "light",
+    prefix: defaultPrefix = DEFAULT_PREFIX,
+    addCommonColors = false
+  } = config;
+  const userLightColors = ((_a = themeObject == null ? void 0 : themeObject.light) == null ? void 0 : _a.colors) || {};
+  const userDarkColors = ((_b = themeObject == null ? void 0 : themeObject.dark) == null ? void 0 : _b.colors) || {};
+  const defaultLayoutObj = userLayout && typeof userLayout === "object" ? deepMerge(defaultLayout, userLayout) : defaultLayout;
+  const baseLayouts = {
+    light: {
+      ...defaultLayoutObj,
+      ...lightLayout
+    },
+    dark: {
+      ...defaultLayoutObj,
+      ...darkLayout
+    }
+  };
+  let otherThemes = omit(themeObject, ["light", "dark"]) || {};
+  Object.entries(otherThemes).forEach(([themeName, { extend, colors, layout }]) => {
+    const baseTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme;
+    const baseColors = semanticColors[baseTheme];
+    otherThemes[themeName].colors = colors && typeof colors === "object" ? deepMerge(baseColors, colors) : baseColors;
+    const baseLayout = extend ? baseLayouts[extend] : defaultLayoutObj;
+    otherThemes[themeName].layout = layout && typeof layout === "object" ? deepMerge(baseLayout, layout) : baseLayout;
+  });
+  const light = {
+    layout: deepMerge(baseLayouts.light, ((_c = themeObject == null ? void 0 : themeObject.light) == null ? void 0 : _c.layout) || {}),
+    colors: deepMerge(semanticColors.light, userLightColors)
+  };
+  const dark = {
+    layout: deepMerge(baseLayouts.dark, ((_d = themeObject == null ? void 0 : themeObject.dark) == null ? void 0 : _d.layout) || {}),
+    colors: deepMerge(semanticColors.dark, userDarkColors)
+  };
+  const themes = {
+    light,
+    dark,
+    ...otherThemes
+  };
+  return corePlugin(themes, defaultTheme, defaultPrefix, addCommonColors);
+};
+
+export {
+  heroui
+};