@sytechui/theme 2.6.1 → 2.6.3

package/dist/components/alert.js

@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/alert.ts
 var alert_exports = {};
 __export(alert_exports, {
-  alert: () => alert
+  alert: () => alert,
+  alertVariants: () => alertVariants
 });
 module.exports = __toCommonJS(alert_exports);
 
@@ -114,6 +115,19 @@ var custom_default = {
 
 // src/utilities/scrollbar-hide.ts
 var scrollbar_hide_default = {
+  /**
+   * Theme-aware scrollbar
+   */
+  ".scrollbar": {
+    "scrollbar-width": "var(--scrollbar-width)",
+    "scrollbar-color": "var(--scrollbar-color)",
+    "scrollbar-gutter": "var(--scrollbar-gutter)"
+  },
+  ".scrollbar-thin": {
+    "scrollbar-width": "thin",
+    "scrollbar-color": "var(--scrollbar-thumb) var(--scrollbar-track)",
+    "scrollbar-gutter": "auto"
+  },
   /**
    * Scroll Hide
    */
@@ -132,10 +146,18 @@ var scrollbar_hide_default = {
     "-ms-overflow-style": "auto",
     /* Firefox */
     "scrollbar-width": "auto",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto",
     /* Safari and Chrome */
     "&::-webkit-scrollbar": {
       display: "block"
     }
+  },
+  ".scrollbar-none": {
+    "-ms-overflow-style": "none",
+    "scrollbar-width": "none",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto"
   }
 };
 
@@ -272,108 +294,67 @@ var tv = (options, config) => {
   });
 };
 
-// src/utils/variants.ts
-var solid = {
-  default: "bg-default text-default-foreground",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  success: "bg-success text-success-foreground",
-  warning: "bg-warning text-warning-foreground",
-  danger: "bg-danger text-danger-foreground",
-  foreground: "bg-foreground text-background"
-};
-var shadow = {
-  default: "shadow-lg shadow-default/50 bg-default text-default-foreground",
-  primary: "shadow-lg shadow-primary/40 bg-primary text-primary-foreground",
-  secondary: "shadow-lg shadow-secondary/40 bg-secondary text-secondary-foreground",
-  success: "shadow-lg shadow-success/40 bg-success text-success-foreground",
-  warning: "shadow-lg shadow-warning/40 bg-warning text-warning-foreground",
-  danger: "shadow-lg shadow-danger/40 bg-danger text-danger-foreground",
-  foreground: "shadow-lg shadow-foreground/40 bg-foreground text-background"
-};
-var bordered = {
-  default: "bg-transparent border-default text-foreground",
-  primary: "bg-transparent border-primary text-primary",
-  secondary: "bg-transparent border-secondary text-secondary",
-  success: "bg-transparent border-success text-success",
-  warning: "bg-transparent border-warning text-warning",
-  danger: "bg-transparent border-danger text-danger",
-  foreground: "bg-transparent border-foreground text-foreground"
-};
-var flat = {
-  default: "bg-default/40 text-default-700",
-  primary: "bg-primary/20 text-primary-600",
-  secondary: "bg-secondary/20 text-secondary-600",
-  success: "bg-success/20 text-success-700 dark:text-success",
-  warning: "bg-warning/20 text-warning-700 dark:text-warning",
-  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
-  foreground: "bg-foreground/10 text-foreground"
-};
-var faded = {
-  default: "border-default bg-default-100 text-default-foreground",
-  primary: "border-default bg-default-100 text-primary",
-  secondary: "border-default bg-default-100 text-secondary",
-  success: "border-default bg-default-100 text-success",
-  warning: "border-default bg-default-100 text-warning",
-  danger: "border-default bg-default-100 text-danger",
-  foreground: "border-default bg-default-100 text-foreground"
-};
-var light = {
-  default: "bg-transparent text-default-foreground",
-  primary: "bg-transparent text-primary",
-  secondary: "bg-transparent text-secondary",
-  success: "bg-transparent text-success",
-  warning: "bg-transparent text-warning",
-  danger: "bg-transparent text-danger",
-  foreground: "bg-transparent text-foreground"
-};
-var ghost = {
-  default: "border-default text-default-foreground",
-  primary: "border-primary text-primary",
-  secondary: "border-secondary text-secondary",
-  success: "border-success text-success",
-  warning: "border-warning text-warning",
-  danger: "border-danger text-danger",
-  foreground: "border-foreground text-foreground hover:!bg-foreground"
-};
-var colorVariants = {
-  solid,
-  shadow,
-  bordered,
-  flat,
-  faded,
-  light,
-  ghost
-};
-
 // src/components/alert.ts
-var alert = tv({
+var accentColor = [
+  "text-[color:color-mix(in_oklab,oklch(0.6204_0.195_253.83)_70%,oklch(0.2103_0.0059_285.89)_30%)]",
+  "dark:text-[color:color-mix(in_oklab,oklch(0.6204_0.195_253.83)_80%,oklch(0.9911_0_0)_30%)]"
+];
+var successColor = [
+  "text-[color:color-mix(in_oklab,oklch(0.7329_0.1935_150.81)_80%,oklch(0.2103_0.0059_285.89)_60%)]",
+  "dark:text-[color:color-mix(in_oklab,oklch(0.7329_0.1935_150.81)_80%,oklch(0.9911_0_0)_30%)]"
+];
+var warningColor = [
+  "text-[color:color-mix(in_oklab,oklch(0.7819_0.1585_72.33)_80%,oklch(0.2103_0.0059_285.89)_70%)]",
+  "dark:text-[color:color-mix(in_oklab,oklch(0.8203_0.1388_76.34)_80%,oklch(0.9911_0_0)_30%)]"
+];
+var dangerColor = [
+  "text-[color:color-mix(in_oklab,oklch(0.6532_0.2328_25.74)_70%,oklch(0.2103_0.0059_285.89)_40%)]",
+  "dark:text-[color:color-mix(in_oklab,oklch(0.594_0.1967_24.63)_80%,oklch(0.9911_0_0)_30%)]"
+];
+var alertVariants = 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"
+    base: [
+      "flex w-full flex-row items-start justify-start gap-1 px-4 py-3",
+      "rounded-[24px] bg-[oklch(100%_0_0)] text-[oklch(0.2103_0.0059_285.89)]",
+      "dark:bg-[oklch(0.2103_0.0059_285.89)] dark:text-[oklch(0.9911_0_0)]",
+      "shadow-[0_2px_4px_0_rgba(0,0,0,0.04),0_1px_2px_0_rgba(0,0,0,0.06),0_0_1px_0_rgba(0,0,0,0.06)]",
+      "dark:shadow-none"
+    ],
+    content: "flex h-full grow flex-col items-start",
+    indicator: [
+      "flex size-6 shrink-0 items-center justify-center p-1 select-none",
+      "[&_[data-slot=alert-default-icon]]:box-content",
+      "[&_[data-slot=alert-default-icon]]:size-4"
+    ],
+    title: "text-small leading-6 font-medium",
+    description: "text-small text-[oklch(0.5517_0.0138_285.94)] dark:text-[oklch(70.5%_0.015_286.067)]"
   },
   variants: {
-    color: {
-      default: {},
-      primary: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {}
-    },
-    variant: {
-      solid: {},
-      flat: {},
-      faded: {
-        base: "border-small"
+    status: {
+      default: {
+        base: "border-default-300",
+        indicator: "text-inherit",
+        title: "text-inherit"
+      },
+      accent: {
+        base: "border-primary-300",
+        indicator: accentColor,
+        title: accentColor
+      },
+      success: {
+        base: "border-success-300",
+        indicator: successColor,
+        title: successColor
       },
-      bordered: {
-        base: "border-small bg-transparent"
+      warning: {
+        base: "border-warning-300",
+        indicator: warningColor,
+        title: warningColor
+      },
+      danger: {
+        base: "border-danger-300",
+        indicator: dangerColor,
+        title: dangerColor
       }
     },
     radius: {
@@ -387,296 +368,21 @@ var alert = tv({
         base: "rounded-medium"
       },
       lg: {
-        base: "rounded-large"
+        base: "rounded-[24px]"
       },
       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"
-      }
-    }
-  ]
+    radius: "lg",
+    status: "default"
+  }
 });
+var alert = alertVariants;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  alert
+  alert,
+  alertVariants
 });

package/dist/components/alert.mjs

@@ -1,53 +1,17 @@
 import {
-  alert
-} from "../chunk-LYTXO6TG.mjs";
-import "../chunk-K3TTKHSU.mjs";
-import "../chunk-DBDK3IF7.mjs";
-import "../chunk-JV5J6JHS.mjs";
-import "../chunk-FNHXMO5W.mjs";
-import "../chunk-2BUT7L7P.mjs";
-import "../chunk-QP5CGENQ.mjs";
-import "../chunk-BHGZZQCH.mjs";
-import "../chunk-FZM5ZZP2.mjs";
-import "../chunk-4CEUCYJO.mjs";
-import "../chunk-VK7USAMR.mjs";
-import "../chunk-FLCPUBBE.mjs";
-import "../chunk-7ZVSC6V6.mjs";
-import "../chunk-EOYBTX52.mjs";
-import "../chunk-SRSOCM2C.mjs";
-import "../chunk-KCPJHUUJ.mjs";
-import "../chunk-GQT3YUX3.mjs";
-import "../chunk-GQMW4NEU.mjs";
-import "../chunk-ZLTZIM6X.mjs";
-import "../chunk-FBI452W6.mjs";
-import "../chunk-7QDYFNL6.mjs";
-import "../chunk-TOGBVQYA.mjs";
-import "../chunk-JGY6VQQQ.mjs";
-import "../chunk-D2XMP2NC.mjs";
-import "../chunk-2WQ76NXU.mjs";
+  alert,
+  alertVariants
+} from "../chunk-PY74IHS4.mjs";
+import "../chunk-KKEJLP4U.mjs";
+import "../chunk-ECD4ABCS.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
-import "../chunk-WH6SPIFG.mjs";
+import "../chunk-7FAFG773.mjs";
 import "../chunk-FJOYYPB2.mjs";
 import "../chunk-RUIUXVZ4.mjs";
-import "../chunk-WQEDQHKX.mjs";
-import "../chunk-CPSLANMP.mjs";
-import "../chunk-FFKHVGFX.mjs";
-import "../chunk-5ICJA2GK.mjs";
-import "../chunk-M63AFAHO.mjs";
-import "../chunk-HUBDRSA4.mjs";
-import "../chunk-WBQAMGXK.mjs";
-import "../chunk-SLRWKURF.mjs";
-import "../chunk-IAS3SFA4.mjs";
-import "../chunk-JUEOCLA3.mjs";
-import "../chunk-3LKKH4AR.mjs";
-import "../chunk-T3GWIVAM.mjs";
-import "../chunk-OR5PUD24.mjs";
-import "../chunk-DCEG5LGX.mjs";
-import "../chunk-L2OL7R23.mjs";
-import "../chunk-YZYGFPNK.mjs";
-import "../chunk-GHZ36ATJ.mjs";
 export {
-  alert
+  alert,
+  alertVariants
 };

package/dist/components/autocomplete.js

@@ -114,6 +114,19 @@ var custom_default = {
 
 // src/utilities/scrollbar-hide.ts
 var scrollbar_hide_default = {
+  /**
+   * Theme-aware scrollbar
+   */
+  ".scrollbar": {
+    "scrollbar-width": "var(--scrollbar-width)",
+    "scrollbar-color": "var(--scrollbar-color)",
+    "scrollbar-gutter": "var(--scrollbar-gutter)"
+  },
+  ".scrollbar-thin": {
+    "scrollbar-width": "thin",
+    "scrollbar-color": "var(--scrollbar-thumb) var(--scrollbar-track)",
+    "scrollbar-gutter": "auto"
+  },
   /**
    * Scroll Hide
    */
@@ -132,10 +145,18 @@ var scrollbar_hide_default = {
     "-ms-overflow-style": "auto",
     /* Firefox */
     "scrollbar-width": "auto",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto",
     /* Safari and Chrome */
     "&::-webkit-scrollbar": {
       display: "block"
     }
+  },
+  ".scrollbar-none": {
+    "-ms-overflow-style": "none",
+    "scrollbar-width": "none",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto"
   }
 };
 

package/dist/components/autocomplete.mjs

@@ -1,13 +1,13 @@
 import {
   autocomplete
-} from "../chunk-GQMW4NEU.mjs";
-import "../chunk-FBI452W6.mjs";
-import "../chunk-7QDYFNL6.mjs";
-import "../chunk-2WQ76NXU.mjs";
+} from "../chunk-I5YZBAB3.mjs";
+import "../chunk-KKEJLP4U.mjs";
+import "../chunk-ECD4ABCS.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
-import "../chunk-WH6SPIFG.mjs";
+import "../chunk-7FAFG773.mjs";
 import "../chunk-FJOYYPB2.mjs";
 import "../chunk-RUIUXVZ4.mjs";
 export {

package/dist/components/avatar.js

@@ -115,6 +115,19 @@ var custom_default = {
 
 // src/utilities/scrollbar-hide.ts
 var scrollbar_hide_default = {
+  /**
+   * Theme-aware scrollbar
+   */
+  ".scrollbar": {
+    "scrollbar-width": "var(--scrollbar-width)",
+    "scrollbar-color": "var(--scrollbar-color)",
+    "scrollbar-gutter": "var(--scrollbar-gutter)"
+  },
+  ".scrollbar-thin": {
+    "scrollbar-width": "thin",
+    "scrollbar-color": "var(--scrollbar-thumb) var(--scrollbar-track)",
+    "scrollbar-gutter": "auto"
+  },
   /**
    * Scroll Hide
    */
@@ -133,10 +146,18 @@ var scrollbar_hide_default = {
     "-ms-overflow-style": "auto",
     /* Firefox */
     "scrollbar-width": "auto",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto",
     /* Safari and Chrome */
     "&::-webkit-scrollbar": {
       display: "block"
     }
+  },
+  ".scrollbar-none": {
+    "-ms-overflow-style": "none",
+    "scrollbar-width": "none",
+    "scrollbar-color": "auto",
+    "scrollbar-gutter": "auto"
   }
 };