@sytechui/theme 2.4.26 → 2.4.27

package/dist/animations/index.d.mts

@@ -9,6 +9,8 @@ declare const animations: {
         "fade-out": string;
         "appearance-in": string;
         "appearance-out": string;
+        "drawer-enter": string;
+        "drawer-exit": string;
         "indeterminate-bar": string;
     };
     keyframes: {
@@ -61,6 +63,22 @@ declare const animations: {
                 transform: string;
             };
         };
+        "drawer-enter": {
+            "0%": {
+                translate: string;
+            };
+            "100%": {
+                translate: string;
+            };
+        };
+        "drawer-exit": {
+            "0%": {
+                translate: string;
+            };
+            "100%": {
+                translate: string;
+            };
+        };
         "indeterminate-bar": {
             "0%": {
                 transform: string;

package/dist/animations/index.d.ts

@@ -9,6 +9,8 @@ declare const animations: {
         "fade-out": string;
         "appearance-in": string;
         "appearance-out": string;
+        "drawer-enter": string;
+        "drawer-exit": string;
         "indeterminate-bar": string;
     };
     keyframes: {
@@ -61,6 +63,22 @@ declare const animations: {
                 transform: string;
             };
         };
+        "drawer-enter": {
+            "0%": {
+                translate: string;
+            };
+            "100%": {
+                translate: string;
+            };
+        };
+        "drawer-exit": {
+            "0%": {
+                translate: string;
+            };
+            "100%": {
+                translate: string;
+            };
+        };
         "indeterminate-bar": {
             "0%": {
                 transform: string;

package/dist/animations/index.js

@@ -34,6 +34,8 @@ var animations = {
     "fade-out": "fade-out 1.2s linear 0s infinite normal none running",
     "appearance-in": "appearance-in 250ms ease-out normal both",
     "appearance-out": "appearance-out 60ms ease-in normal both",
+    "drawer-enter": "drawer-enter var(--drawer-enter-duration, 250ms) ease-out both",
+    "drawer-exit": "drawer-exit var(--drawer-exit-duration, 280ms) ease-in both",
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
@@ -87,6 +89,22 @@ var animations = {
         transform: "scale(0.85)"
       }
     },
+    "drawer-enter": {
+      "0%": {
+        translate: "var(--drawer-translate-x) var(--drawer-translate-y)"
+      },
+      "100%": {
+        translate: "0 0"
+      }
+    },
+    "drawer-exit": {
+      "0%": {
+        translate: "0 0"
+      },
+      "100%": {
+        translate: "var(--drawer-translate-x) var(--drawer-translate-y)"
+      }
+    },
     "indeterminate-bar": {
       "0%": {
         transform: "translateX(-50%) scaleX(0.2)"

package/dist/animations/index.mjs

@@ -1,6 +1,6 @@
 import {
   animations
-} from "../chunk-KXPLHLA6.mjs";
+} from "../chunk-HYWP3BX7.mjs";
 export {
   animations
 };

package/dist/{chunk-HO2ILFC5.mjs → chunk-3INHRVXM.mjs}

@@ -1,6 +1,6 @@
 import {
   utilities
-} from "./chunk-7V3PIXOO.mjs";
+} from "./chunk-6US6AURX.mjs";
 
 // src/utils/tw-merge-config.ts
 var COMMON_UNITS = ["small", "medium", "large"];

package/dist/chunk-3L7WFLSH.mjs

@@ -0,0 +1,127 @@
+import {
+  tv
+} from "./chunk-NPGKX3MZ.mjs";
+
+// src/components/drawer.ts
+var drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"],
+    swipeHandle: ["absolute", "z-10", "flex", "touch-none", "select-none"],
+    swipeHandleBar: "rounded-full bg-default-300 pointer-events-none"
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]"
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]"
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]"
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]"
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]"
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]"
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]"
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]"
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]"
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none"
+      }
+    },
+    placement: {
+      top: {
+        base: [
+          "inset-x-0 top-0 max-w-[none] rounded-t-none",
+          "[--drawer-translate-x:0] [--drawer-translate-y:-100%]"
+        ]
+      },
+      right: {
+        base: [
+          "inset-y-0 right-0 max-h-[none] rounded-r-none",
+          "[--drawer-translate-x:100%] [--drawer-translate-y:0]"
+        ]
+      },
+      bottom: {
+        base: [
+          "inset-x-0 bottom-0 max-w-[none] rounded-b-none",
+          "[--drawer-translate-x:0] [--drawer-translate-y:100%]"
+        ]
+      },
+      left: {
+        base: [
+          "inset-y-0 left-0 max-h-[none] rounded-l-none",
+          "[--drawer-translate-x:-100%] [--drawer-translate-y:0]"
+        ]
+      }
+    },
+    nativeMotion: {
+      true: {
+        base: [
+          "[will-change:translate,transform]",
+          "[backface-visibility:hidden]",
+          "data-[open=true]:animate-drawer-enter",
+          "[&:not([data-open])]:animate-drawer-exit",
+          "data-[disable-animation=true]:!animate-none"
+        ]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      placement: ["top", "bottom"],
+      class: {
+        swipeHandle: "left-1/2 h-8 w-16 -translate-x-1/2 justify-center",
+        swipeHandleBar: "h-1 w-9"
+      }
+    },
+    {
+      placement: "top",
+      class: {
+        swipeHandle: "bottom-0 items-end pb-2 cursor-row-resize"
+      }
+    },
+    {
+      placement: "bottom",
+      class: {
+        swipeHandle: "top-0 items-start pt-2 cursor-row-resize"
+      }
+    },
+    {
+      placement: ["left", "right"],
+      class: {
+        swipeHandle: "top-1/2 h-16 w-8 -translate-y-1/2 items-center",
+        swipeHandleBar: "h-9 w-1"
+      }
+    },
+    {
+      placement: "left",
+      class: {
+        swipeHandle: "right-0 justify-end pr-2 cursor-col-resize"
+      }
+    },
+    {
+      placement: "right",
+      class: {
+        swipeHandle: "left-0 justify-start pl-2 cursor-col-resize"
+      }
+    }
+  ]
+});
+
+export {
+  drawer
+};

package/dist/{chunk-UCUZEPMT.mjs → chunk-4V3RQUZU.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/scroll-area.ts
 var scrollArea = tv({

package/dist/{chunk-Q7SJBJ2C.mjs → chunk-5PWGYVAP.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/image.ts
 var image = tv({

package/dist/{chunk-GMH4QQZS.mjs → chunk-CPSLANMP.mjs}

@@ -1,9 +1,9 @@
 import {
   semanticColors
-} from "./chunk-JC3ABGTC.mjs";
+} from "./chunk-FFKHVGFX.mjs";
 import {
   commonColors
-} from "./chunk-NTTT6BHX.mjs";
+} from "./chunk-IAS3SFA4.mjs";
 
 // src/colors/index.ts
 var colors = {

package/dist/{chunk-A3QMPIR3.mjs → chunk-E34EWEJV.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/drip.ts
 var drip = tv({

package/dist/{chunk-EJLBCE3V.mjs → chunk-EJDFNA7Y.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/form.ts
 var form = tv({

package/dist/{chunk-JC3ABGTC.mjs → chunk-FFKHVGFX.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-5ICJA2GK.mjs";
 import {
   commonColors
-} from "./chunk-NTTT6BHX.mjs";
+} from "./chunk-IAS3SFA4.mjs";
 
 // src/colors/semantic.ts
 import { readableColor } from "color2k";

package/dist/{chunk-QPJMPRZG.mjs → chunk-FQECQOZE.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/kbd.ts
 var kbd = tv({

package/dist/{chunk-6FGGVHAY.mjs → chunk-FUKRIH5Z.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/autocomplete.ts
 var autocomplete = tv({

package/dist/{chunk-KXPLHLA6.mjs → chunk-HYWP3BX7.mjs}

@@ -10,6 +10,8 @@ var animations = {
     "fade-out": "fade-out 1.2s linear 0s infinite normal none running",
     "appearance-in": "appearance-in 250ms ease-out normal both",
     "appearance-out": "appearance-out 60ms ease-in normal both",
+    "drawer-enter": "drawer-enter var(--drawer-enter-duration, 250ms) ease-out both",
+    "drawer-exit": "drawer-exit var(--drawer-exit-duration, 280ms) ease-in both",
     "indeterminate-bar": "indeterminate-bar 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite normal none running"
   },
   keyframes: {
@@ -63,6 +65,22 @@ var animations = {
         transform: "scale(0.85)"
       }
     },
+    "drawer-enter": {
+      "0%": {
+        translate: "var(--drawer-translate-x) var(--drawer-translate-y)"
+      },
+      "100%": {
+        translate: "0 0"
+      }
+    },
+    "drawer-exit": {
+      "0%": {
+        translate: "0 0"
+      },
+      "100%": {
+        translate: "var(--drawer-translate-x) var(--drawer-translate-y)"
+      }
+    },
     "indeterminate-bar": {
       "0%": {
         transform: "translateX(-50%) scaleX(0.2)"

package/dist/{chunk-JLA3YAT4.mjs → chunk-JS2FQJMX.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/date-input.ts
 var dateInput = tv({

package/dist/{chunk-6GMZ2XIO.mjs → chunk-NKYWOWNW.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/progress.ts
 var progress = tv(

package/dist/{chunk-PGQDBCOS.mjs → chunk-NPGKX3MZ.mjs}

@@ -1,6 +1,6 @@
 import {
   twMergeConfig
-} from "./chunk-HO2ILFC5.mjs";
+} from "./chunk-3INHRVXM.mjs";
 
 // src/utils/tv.ts
 import { tv as tvBase } from "tailwind-variants";

package/dist/{chunk-NPGM3ZLN.mjs → chunk-QQVGHMSD.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/date-picker.ts
 var datePicker = tv({

package/dist/{chunk-B3WML4XC.mjs → chunk-SGV526OS.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/scroll-shadow.ts
 var verticalShadow = [

package/dist/{chunk-KKENQYAQ.mjs → chunk-SSU66MWA.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/divider.ts
 var divider = tv({

package/dist/{chunk-B5YWUSAH.mjs → chunk-TRZPE5UW.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/spinner.ts
 var spinner = tv({

package/dist/{chunk-JFTCRIQA.mjs → chunk-VDS6DP26.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/spacer.ts
 var spacer = tv({

package/dist/{chunk-HJWFZEER.mjs → chunk-WDM42WDU.mjs}

@@ -6,16 +6,13 @@ import {
 } from "./chunk-D2XMP2NC.mjs";
 import {
   utilities
-} from "./chunk-7V3PIXOO.mjs";
+} from "./chunk-6US6AURX.mjs";
 import {
   semanticColors
-} from "./chunk-JC3ABGTC.mjs";
+} from "./chunk-FFKHVGFX.mjs";
 import {
   flattenThemeObject
 } from "./chunk-5ICJA2GK.mjs";
-import {
-  commonColors
-} from "./chunk-NTTT6BHX.mjs";
 import {
   darkLayout,
   defaultLayout,
@@ -23,7 +20,10 @@ import {
 } from "./chunk-HUBDRSA4.mjs";
 import {
   animations
-} from "./chunk-KXPLHLA6.mjs";
+} from "./chunk-HYWP3BX7.mjs";
+import {
+  commonColors
+} from "./chunk-IAS3SFA4.mjs";
 
 // src/plugin.ts
 import Color from "color";

package/dist/{chunk-T3FWPDDU.mjs → chunk-YLA7KS3I.mjs}

@@ -3,10 +3,10 @@ import {
 } from "./chunk-GQT3YUX3.mjs";
 import {
   cn
-} from "./chunk-DKJNATV2.mjs";
+} from "./chunk-YW4DIYUX.mjs";
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 import {
   collapseAdjacentVariantBorders,
   dataFocusVisibleClasses,

package/dist/{chunk-DKJNATV2.mjs → chunk-YW4DIYUX.mjs}

@@ -1,6 +1,6 @@
 import {
   twMergeConfig
-} from "./chunk-HO2ILFC5.mjs";
+} from "./chunk-3INHRVXM.mjs";
 
 // src/utils/cn.ts
 import { cnMerge } from "tailwind-variants";

package/dist/{chunk-T7YZ5PRR.mjs → chunk-Z65VJL4Y.mjs}

@@ -1,6 +1,6 @@
 import {
   tv
-} from "./chunk-PGQDBCOS.mjs";
+} from "./chunk-NPGKX3MZ.mjs";
 
 // src/components/skeleton.ts
 var skeleton = tv({

package/dist/colors/common.mjs

@@ -1,14 +1,14 @@
 import {
   commonColors
-} from "../chunk-NTTT6BHX.mjs";
-import "../chunk-DCEG5LGX.mjs";
-import "../chunk-L2OL7R23.mjs";
-import "../chunk-YZYGFPNK.mjs";
+} from "../chunk-IAS3SFA4.mjs";
 import "../chunk-JUEOCLA3.mjs";
 import "../chunk-3LKKH4AR.mjs";
-import "../chunk-GHZ36ATJ.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 {
   commonColors
 };

package/dist/colors/index.mjs

@@ -1,22 +1,22 @@
 import {
   colors
-} from "../chunk-GMH4QQZS.mjs";
+} from "../chunk-CPSLANMP.mjs";
 import {
   semanticColors
-} from "../chunk-JC3ABGTC.mjs";
+} from "../chunk-FFKHVGFX.mjs";
 import "../chunk-5ICJA2GK.mjs";
 import "../chunk-M63AFAHO.mjs";
 import {
   commonColors
-} from "../chunk-NTTT6BHX.mjs";
-import "../chunk-DCEG5LGX.mjs";
-import "../chunk-L2OL7R23.mjs";
-import "../chunk-YZYGFPNK.mjs";
+} from "../chunk-IAS3SFA4.mjs";
 import "../chunk-JUEOCLA3.mjs";
 import "../chunk-3LKKH4AR.mjs";
-import "../chunk-GHZ36ATJ.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 {
   colors,
   commonColors,

package/dist/colors/semantic.mjs

@@ -2,17 +2,17 @@ import {
   semanticColors,
   themeColorsDark,
   themeColorsLight
-} from "../chunk-JC3ABGTC.mjs";
+} from "../chunk-FFKHVGFX.mjs";
 import "../chunk-5ICJA2GK.mjs";
-import "../chunk-NTTT6BHX.mjs";
-import "../chunk-DCEG5LGX.mjs";
-import "../chunk-L2OL7R23.mjs";
-import "../chunk-YZYGFPNK.mjs";
+import "../chunk-IAS3SFA4.mjs";
 import "../chunk-JUEOCLA3.mjs";
 import "../chunk-3LKKH4AR.mjs";
-import "../chunk-GHZ36ATJ.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 {
   semanticColors,
   themeColorsDark,

package/dist/colors.mjs

@@ -1,23 +1,23 @@
 import "./chunk-WQEDQHKX.mjs";
 import {
   colors
-} from "./chunk-GMH4QQZS.mjs";
+} from "./chunk-CPSLANMP.mjs";
 import {
   semanticColors
-} from "./chunk-JC3ABGTC.mjs";
+} from "./chunk-FFKHVGFX.mjs";
 import "./chunk-5ICJA2GK.mjs";
 import "./chunk-M63AFAHO.mjs";
 import {
   commonColors
-} from "./chunk-NTTT6BHX.mjs";
-import "./chunk-DCEG5LGX.mjs";
-import "./chunk-L2OL7R23.mjs";
-import "./chunk-YZYGFPNK.mjs";
+} from "./chunk-IAS3SFA4.mjs";
 import "./chunk-JUEOCLA3.mjs";
 import "./chunk-3LKKH4AR.mjs";
-import "./chunk-GHZ36ATJ.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 {
   colors,
   commonColors,