@sytechui/theme 3.0.0 → 3.0.2

package/dist/index.js

@@ -106,6 +106,7 @@ __export(index_exports, {
   select: () => select,
   semanticColors: () => semanticColors,
   shimmerText: () => shimmerText,
+  sidebar: () => sidebar,
   skeleton: () => skeleton,
   slider: () => slider,
   snippet: () => snippet,
@@ -8082,22 +8083,22 @@ var divider = tv({
     {
       orientation: "horizontal",
       inset: "sm",
-      class: "after:inset-x-[10%] after:inset-y-0"
+      class: "after:left-[10%] after:right-[10%] after:top-0 after:bottom-0"
     },
     {
       orientation: "horizontal",
       inset: "md",
-      class: "after:inset-x-1/4 after:inset-y-0"
+      class: "after:left-1/4 after:right-1/4 after:top-0 after:bottom-0"
     },
     {
       orientation: "vertical",
       inset: "sm",
-      class: "after:inset-x-0 after:inset-y-[10%]"
+      class: "after:left-0 after:right-0 after:top-[10%] after:bottom-[10%]"
     },
     {
       orientation: "vertical",
       inset: "md",
-      class: "after:inset-x-0 after:inset-y-1/4"
+      class: "after:left-0 after:right-0 after:top-1/4 after:bottom-1/4"
     }
   ],
   defaultVariants: {
@@ -10128,6 +10129,141 @@ var scrollArea = tv({
   }
 });
 
+// src/components/sidebar.ts
+var sidebar = tv({
+  slots: {
+    base: "group/sidebar-wrapper flex min-h-svh w-full bg-background",
+    sidebar: "group/sidebar text-foreground",
+    gap: "relative shrink-0 bg-transparent",
+    container: "fixed inset-y-0 z-40 flex h-svh",
+    inner: "flex size-full min-w-0 flex-col overflow-hidden bg-content1 text-foreground",
+    mobile: "h-full w-full p-0",
+    trigger: "size-8 min-w-8",
+    rail: [
+      "absolute inset-y-0 z-50 hidden w-4 -translate-x-1/2 transition-all",
+      "after:absolute after:inset-y-0 after:left-1/2 after:w-px hover:after:bg-divider sm:flex",
+      "group-data-[side=left]/sidebar:-right-4 group-data-[side=right]/sidebar:left-0",
+      "group-data-[side=left]/sidebar:cursor-w-resize group-data-[side=right]/sidebar:cursor-e-resize",
+      "group-data-[collapsible=offcanvas]/sidebar:translate-x-0"
+    ],
+    inset: "relative flex min-w-0 flex-1 flex-col bg-background",
+    input: "h-8 w-full",
+    header: "flex shrink-0 flex-col gap-2 p-2",
+    footer: "flex shrink-0 flex-col gap-2 p-2",
+    separator: "mx-2 w-auto",
+    content: "scrollbar flex min-h-0 flex-1 flex-col overflow-auto group-data-[collapsible=icon]/sidebar:overflow-hidden",
+    group: "relative flex w-full min-w-0 flex-col p-2",
+    groupLabel: [
+      "flex h-8 shrink-0 items-center overflow-hidden rounded-md px-2 text-xs font-medium",
+      "text-foreground-500",
+      "group-data-[collapsible=icon]/sidebar:-mt-8 group-data-[collapsible=icon]/sidebar:opacity-0"
+    ],
+    groupAction: "absolute right-3 top-3 size-6 min-w-6 group-data-[collapsible=icon]/sidebar:hidden",
+    groupContent: "w-full text-sm",
+    menu: "flex w-full min-w-0 flex-col gap-0.5",
+    menuItem: "group/menu-item relative",
+    menuSkeleton: "flex h-8 items-center gap-2 rounded-md px-2",
+    menuButton: [
+      "peer/menu-button flex w-full min-w-0 items-center justify-start gap-2 overflow-hidden",
+      "rounded-md px-2 text-left outline-none",
+      "hover:bg-content2 focus-visible:ring-2 focus-visible:ring-focus",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "group-has-[[data-sidebar=menu-action]]/menu-item:pr-8",
+      "group-data-[collapsible=icon]/sidebar:!size-8",
+      "group-data-[collapsible=icon]/sidebar:!px-2",
+      "[&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate",
+      "data-[active=true]:bg-default data-[active=true]:font-medium data-[active=true]:text-foreground",
+      "data-[variant=outline]:border data-[variant=outline]:border-divider",
+      "data-[variant=outline]:bg-content1 data-[variant=outline]:shadow-sm",
+      "data-[variant=outline]:hover:border-default-400",
+      "data-[size=sm]:h-7 data-[size=sm]:text-xs",
+      "data-[size=default]:h-8 data-[size=default]:text-sm",
+      "data-[size=lg]:h-12 data-[size=lg]:text-sm",
+      "data-[size=lg]:group-data-[collapsible=icon]/sidebar:!p-0"
+    ],
+    menuAction: [
+      "absolute right-1 top-1.5 size-5 min-w-5 group-data-[collapsible=icon]/sidebar:hidden",
+      "data-[show-on-hover=true]:opacity-0",
+      "data-[show-on-hover=true]:group-focus-within/menu-item:opacity-100",
+      "data-[show-on-hover=true]:group-hover/menu-item:opacity-100"
+    ],
+    menuBadge: [
+      "pointer-events-none absolute right-1 top-1.5 flex h-5 min-w-5 items-center justify-center",
+      "rounded-md px-1 text-xs font-medium tabular-nums",
+      "group-data-[collapsible=icon]/sidebar:hidden"
+    ],
+    menuSub: [
+      "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-divider px-2.5 py-0.5",
+      "group-data-[collapsible=icon]/sidebar:hidden"
+    ],
+    menuSubItem: "group/menu-sub-item relative",
+    menuSubButton: [
+      "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
+      "text-foreground-600 outline-none hover:bg-content2 hover:text-foreground",
+      "focus-visible:ring-2 focus-visible:ring-focus group-data-[collapsible=icon]/sidebar:hidden",
+      "[&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate",
+      "data-[size=sm]:text-xs data-[size=md]:text-sm",
+      "data-[active=true]:bg-default data-[active=true]:text-foreground"
+    ]
+  },
+  // side/variant 是 Provider 级布局配置；只把它们应用到需要联动的布局 slot，
+  // 避免 header/menu 等内容 slot 因布局配置产生无关样式。
+  variants: {
+    side: {
+      left: { container: "left-0" },
+      right: { container: "right-0" }
+    },
+    variant: {
+      sidebar: {},
+      floating: {
+        container: "p-2",
+        inner: "rounded-xl border border-divider shadow-sm"
+      },
+      inset: {
+        container: "p-2",
+        inner: "bg-transparent",
+        inset: [
+          "md:m-2 md:rounded-xl md:bg-content1 md:shadow-sm",
+          "md:group-data-[inset-side=left]/sidebar-wrapper:ml-0",
+          "md:group-data-[inset-side=right]/sidebar-wrapper:mr-0"
+        ]
+      }
+    },
+    disableAnimation: {
+      true: {
+        gap: "transition-none",
+        container: "transition-none",
+        rail: "transition-none",
+        groupLabel: "transition-none",
+        menuButton: "transition-none"
+      },
+      false: {
+        gap: "transition-[width] duration-200 ease-linear motion-reduce:transition-none",
+        container: "transition-[width,transform] duration-200 ease-linear motion-reduce:transition-none",
+        groupLabel: "transition-[height,margin,opacity] duration-200 ease-linear",
+        menuButton: "transition-[width,height,padding] duration-200 ease-linear motion-reduce:transition-none"
+      }
+    }
+  },
+  defaultVariants: {
+    side: "left",
+    variant: "sidebar",
+    disableAnimation: false
+  },
+  compoundVariants: [
+    {
+      side: "left",
+      variant: "sidebar",
+      class: { container: "border-r border-divider" }
+    },
+    {
+      side: "right",
+      variant: "sidebar",
+      class: { container: "border-l border-divider" }
+    }
+  ]
+});
+
 // src/components/slider.ts
 var slider = tv({
   slots: {
@@ -13997,6 +14133,7 @@ var heroui = (config = {}) => {
   select,
   semanticColors,
   shimmerText,
+  sidebar,
   skeleton,
   slider,
   snippet,

package/dist/index.mjs

@@ -45,78 +45,81 @@ import {
   toastRegion,
   toggle,
   user
-} from "./chunk-HR4NECU7.mjs";
+} from "./chunk-CV2E4DI2.mjs";
 import {
   colorVariants
 } from "./chunk-GQT3YUX3.mjs";
 import {
   cn
-} from "./chunk-W5EOCY2Q.mjs";
+} from "./chunk-7ARJ2TQM.mjs";
 import {
   shimmerText
-} from "./chunk-MKKI3P75.mjs";
+} from "./chunk-W37Q6YFS.mjs";
+import {
+  sidebar
+} from "./chunk-BF4542X6.mjs";
 import {
   skeleton
-} from "./chunk-LNIOH7P3.mjs";
+} from "./chunk-47BB6GL3.mjs";
 import {
   spacer
-} from "./chunk-VRZZBSOR.mjs";
+} from "./chunk-WH4ODSEM.mjs";
 import {
   spinner
-} from "./chunk-2ANGJDXN.mjs";
+} from "./chunk-XBJNS5SU.mjs";
 import {
   circularProgress,
   progress
-} from "./chunk-P576IVAB.mjs";
+} from "./chunk-OSP4OLTO.mjs";
 import {
   scrollArea
-} from "./chunk-27PW7EKT.mjs";
+} from "./chunk-4N2PLITL.mjs";
 import {
   scrollShadow
-} from "./chunk-HQL3C3RQ.mjs";
+} from "./chunk-EZ47UJPD.mjs";
 import {
   kbd
-} from "./chunk-3CPLY5GO.mjs";
-import {
-  datePicker,
-  dateRangePicker
-} from "./chunk-YUIGJJHE.mjs";
+} from "./chunk-5DJU5KUL.mjs";
 import {
   divider,
   labeledDivider
-} from "./chunk-GRXVRRMQ.mjs";
+} from "./chunk-2QZDAFQ3.mjs";
 import {
   drawer
-} from "./chunk-3PMV23D5.mjs";
+} from "./chunk-MTBQ5EO5.mjs";
 import {
   drip
-} from "./chunk-E6CTGLWE.mjs";
+} from "./chunk-AL5UNXQI.mjs";
 import {
   form
-} from "./chunk-6R3AOQOQ.mjs";
+} from "./chunk-USGOG5QI.mjs";
 import {
   image
-} from "./chunk-CEXS5CRG.mjs";
+} from "./chunk-AGSAOCCR.mjs";
 import {
   dateInput
-} from "./chunk-UDC2HH2I.mjs";
+} from "./chunk-ZWG2GMCI.mjs";
+import {
+  datePicker,
+  dateRangePicker
+} from "./chunk-P5HLCB43.mjs";
 import {
   alert,
   alertVariants
-} from "./chunk-HNHTWJN2.mjs";
+} from "./chunk-PY74IHS4.mjs";
 import {
   autocomplete
-} from "./chunk-KFYNGEBZ.mjs";
+} from "./chunk-I5YZBAB3.mjs";
 import {
   tv
-} from "./chunk-U2PPTT27.mjs";
+} from "./chunk-KKEJLP4U.mjs";
 import {
   COMMON_UNITS,
   twMergeConfig
-} from "./chunk-XSOFQFH2.mjs";
+} from "./chunk-ECD4ABCS.mjs";
 import {
   heroui
-} from "./chunk-CVEUMSFB.mjs";
+} from "./chunk-2TFOWOJL.mjs";
 import "./chunk-D2XMP2NC.mjs";
 import {
   absoluteFullClasses,
@@ -129,13 +132,13 @@ import {
   ringClasses,
   translateCenterClasses
 } from "./chunk-ZHIADCEL.mjs";
-import "./chunk-OQQBKYNE.mjs";
-import "./chunk-7FAFG773.mjs";
-import "./chunk-FJOYYPB2.mjs";
-import "./chunk-RUIUXVZ4.mjs";
+import "./chunk-ROFEKAS6.mjs";
 import "./chunk-GSRZWDGA.mjs";
 import "./chunk-AWXUGVFR.mjs";
 import "./chunk-MPVWW3DX.mjs";
+import "./chunk-7FAFG773.mjs";
+import "./chunk-FJOYYPB2.mjs";
+import "./chunk-RUIUXVZ4.mjs";
 import "./chunk-WQEDQHKX.mjs";
 import {
   colors
@@ -240,6 +243,7 @@ export {
   select,
   semanticColors,
   shimmerText,
+  sidebar,
   skeleton,
   slider,
   snippet,

package/dist/plugin.mjs

@@ -1,15 +1,15 @@
 import {
   heroui
-} from "./chunk-CVEUMSFB.mjs";
+} from "./chunk-2TFOWOJL.mjs";
 import "./chunk-D2XMP2NC.mjs";
 import "./chunk-ZHIADCEL.mjs";
-import "./chunk-OQQBKYNE.mjs";
-import "./chunk-7FAFG773.mjs";
-import "./chunk-FJOYYPB2.mjs";
-import "./chunk-RUIUXVZ4.mjs";
+import "./chunk-ROFEKAS6.mjs";
 import "./chunk-GSRZWDGA.mjs";
 import "./chunk-AWXUGVFR.mjs";
 import "./chunk-MPVWW3DX.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";

package/dist/utilities/index.mjs

@@ -1,12 +1,12 @@
 import {
   utilities
-} from "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+} from "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
+import "../chunk-7FAFG773.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 export {
   utilities
 };

package/dist/utils/cn.mjs

@@ -1,14 +1,14 @@
 import {
   cn
-} from "../chunk-W5EOCY2Q.mjs";
-import "../chunk-XSOFQFH2.mjs";
-import "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+} from "../chunk-7ARJ2TQM.mjs";
+import "../chunk-ECD4ABCS.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
+import "../chunk-7FAFG773.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 export {
   cn
 };

package/dist/utils/index.mjs

@@ -1,35 +1,36 @@
 import {
   mergeClasses
-} from "../chunk-HR4NECU7.mjs";
+} from "../chunk-CV2E4DI2.mjs";
 import {
   colorVariants
 } from "../chunk-GQT3YUX3.mjs";
 import {
   cn
-} from "../chunk-W5EOCY2Q.mjs";
-import "../chunk-MKKI3P75.mjs";
-import "../chunk-LNIOH7P3.mjs";
-import "../chunk-VRZZBSOR.mjs";
-import "../chunk-2ANGJDXN.mjs";
-import "../chunk-P576IVAB.mjs";
-import "../chunk-27PW7EKT.mjs";
-import "../chunk-HQL3C3RQ.mjs";
-import "../chunk-3CPLY5GO.mjs";
-import "../chunk-YUIGJJHE.mjs";
-import "../chunk-GRXVRRMQ.mjs";
-import "../chunk-3PMV23D5.mjs";
-import "../chunk-E6CTGLWE.mjs";
-import "../chunk-6R3AOQOQ.mjs";
-import "../chunk-CEXS5CRG.mjs";
-import "../chunk-UDC2HH2I.mjs";
-import "../chunk-HNHTWJN2.mjs";
-import "../chunk-KFYNGEBZ.mjs";
-import "../chunk-U2PPTT27.mjs";
+} from "../chunk-7ARJ2TQM.mjs";
+import "../chunk-W37Q6YFS.mjs";
+import "../chunk-BF4542X6.mjs";
+import "../chunk-47BB6GL3.mjs";
+import "../chunk-WH4ODSEM.mjs";
+import "../chunk-XBJNS5SU.mjs";
+import "../chunk-OSP4OLTO.mjs";
+import "../chunk-4N2PLITL.mjs";
+import "../chunk-EZ47UJPD.mjs";
+import "../chunk-5DJU5KUL.mjs";
+import "../chunk-2QZDAFQ3.mjs";
+import "../chunk-MTBQ5EO5.mjs";
+import "../chunk-AL5UNXQI.mjs";
+import "../chunk-USGOG5QI.mjs";
+import "../chunk-AGSAOCCR.mjs";
+import "../chunk-ZWG2GMCI.mjs";
+import "../chunk-P5HLCB43.mjs";
+import "../chunk-PY74IHS4.mjs";
+import "../chunk-I5YZBAB3.mjs";
+import "../chunk-KKEJLP4U.mjs";
 import {
   COMMON_UNITS,
   twMergeConfig
-} from "../chunk-XSOFQFH2.mjs";
-import "../chunk-CVEUMSFB.mjs";
+} from "../chunk-ECD4ABCS.mjs";
+import "../chunk-2TFOWOJL.mjs";
 import "../chunk-D2XMP2NC.mjs";
 import {
   absoluteFullClasses,
@@ -42,13 +43,13 @@ import {
   ringClasses,
   translateCenterClasses
 } from "../chunk-ZHIADCEL.mjs";
-import "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.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";

package/dist/utils/merge-classes.mjs

@@ -1,37 +1,38 @@
 import {
   mergeClasses
-} from "../chunk-HR4NECU7.mjs";
+} from "../chunk-CV2E4DI2.mjs";
 import "../chunk-GQT3YUX3.mjs";
-import "../chunk-W5EOCY2Q.mjs";
-import "../chunk-MKKI3P75.mjs";
-import "../chunk-LNIOH7P3.mjs";
-import "../chunk-VRZZBSOR.mjs";
-import "../chunk-2ANGJDXN.mjs";
-import "../chunk-P576IVAB.mjs";
-import "../chunk-27PW7EKT.mjs";
-import "../chunk-HQL3C3RQ.mjs";
-import "../chunk-3CPLY5GO.mjs";
-import "../chunk-YUIGJJHE.mjs";
-import "../chunk-GRXVRRMQ.mjs";
-import "../chunk-3PMV23D5.mjs";
-import "../chunk-E6CTGLWE.mjs";
-import "../chunk-6R3AOQOQ.mjs";
-import "../chunk-CEXS5CRG.mjs";
-import "../chunk-UDC2HH2I.mjs";
-import "../chunk-HNHTWJN2.mjs";
-import "../chunk-KFYNGEBZ.mjs";
-import "../chunk-U2PPTT27.mjs";
-import "../chunk-XSOFQFH2.mjs";
-import "../chunk-CVEUMSFB.mjs";
+import "../chunk-7ARJ2TQM.mjs";
+import "../chunk-W37Q6YFS.mjs";
+import "../chunk-BF4542X6.mjs";
+import "../chunk-47BB6GL3.mjs";
+import "../chunk-WH4ODSEM.mjs";
+import "../chunk-XBJNS5SU.mjs";
+import "../chunk-OSP4OLTO.mjs";
+import "../chunk-4N2PLITL.mjs";
+import "../chunk-EZ47UJPD.mjs";
+import "../chunk-5DJU5KUL.mjs";
+import "../chunk-2QZDAFQ3.mjs";
+import "../chunk-MTBQ5EO5.mjs";
+import "../chunk-AL5UNXQI.mjs";
+import "../chunk-USGOG5QI.mjs";
+import "../chunk-AGSAOCCR.mjs";
+import "../chunk-ZWG2GMCI.mjs";
+import "../chunk-P5HLCB43.mjs";
+import "../chunk-PY74IHS4.mjs";
+import "../chunk-I5YZBAB3.mjs";
+import "../chunk-KKEJLP4U.mjs";
+import "../chunk-ECD4ABCS.mjs";
+import "../chunk-2TFOWOJL.mjs";
 import "../chunk-D2XMP2NC.mjs";
 import "../chunk-ZHIADCEL.mjs";
-import "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.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";

package/dist/utils/tv.mjs

@@ -1,14 +1,14 @@
 import {
   tv
-} from "../chunk-U2PPTT27.mjs";
-import "../chunk-XSOFQFH2.mjs";
-import "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+} from "../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-7FAFG773.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 export {
   tv
 };

package/dist/utils/tw-merge-config.mjs

@@ -1,14 +1,14 @@
 import {
   COMMON_UNITS,
   twMergeConfig
-} from "../chunk-XSOFQFH2.mjs";
-import "../chunk-OQQBKYNE.mjs";
-import "../chunk-7FAFG773.mjs";
-import "../chunk-FJOYYPB2.mjs";
-import "../chunk-RUIUXVZ4.mjs";
+} from "../chunk-ECD4ABCS.mjs";
+import "../chunk-ROFEKAS6.mjs";
 import "../chunk-GSRZWDGA.mjs";
 import "../chunk-AWXUGVFR.mjs";
 import "../chunk-MPVWW3DX.mjs";
+import "../chunk-7FAFG773.mjs";
+import "../chunk-FJOYYPB2.mjs";
+import "../chunk-RUIUXVZ4.mjs";
 export {
   COMMON_UNITS,
   twMergeConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sytechui/theme",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "The default theme for HeroUI components",
   "keywords": [
     "theme",