@hilum/ui 3.6.12 → 3.7.1

package/dist/index.js

@@ -3653,6 +3653,11 @@ function CardHeading({ title, description, actions, children, className }) {
     }
   );
 }
+var cardMobileSurfaceClasses = {
+  default: "",
+  flat: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-y max-sm:bg-transparent max-sm:shadow-none",
+  flush: "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none"
+};
 var cardVariants = cva(["rounded-xl", motionClasses], {
   variants: {
     variant: {
@@ -3669,12 +3674,12 @@ var cardVariants = cva(["rounded-xl", motionClasses], {
   }
 });
 var Card = React17.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, variant, mobileSurface = "default", ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "card",
-      className: cn(cardVariants({ variant }), className),
+      className: cn(cardVariants({ variant }), cardMobileSurfaceClasses[mobileSurface], className),
       ...props
     }
   )
@@ -3984,7 +3989,8 @@ function ChartContainer({
       "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
-        "flex aspect-video justify-center text-xs",
+        "flex justify-center text-xs",
+        height === void 0 ? "aspect-video" : "w-full",
         "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
         "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
         "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
@@ -7999,7 +8005,8 @@ function ColorInput2({
   onOpacityChange,
   className,
   disabled,
-  presets
+  presets,
+  mobileSurface = "default"
 }) {
   const shape3 = useShape();
   const [hex, setHex] = React17.useState(value);
@@ -8010,6 +8017,7 @@ function ColorInput2({
     if (/^#([0-9a-fA-F]{3}){1,2}$/.test(next)) onChange(next);
     else setHex(value);
   };
+  const mobileSurfaceClass = mobileSurface === "flush" ? "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-within:ring-0" : "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8018,18 +8026,21 @@ function ColorInput2({
         shape3.input,
         "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
         motionClasses,
+        mobileSurfaceClass,
         disabled && "opacity-50 pointer-events-none",
         className
       ),
       children: [
         /* @__PURE__ */ jsx(
-          ColorPicker,
+          ColorPickerPopover,
           {
             value,
             onChange,
             ...presets !== void 0 && { presets },
             ...disabled !== void 0 && { disabled },
-            className: "h-full w-8 border-0 rounded-none focus-visible:ring-0"
+            triggerShowValue: false,
+            hideEyedropper: true,
+            triggerClassName: "h-full w-8 border-0 rounded-none bg-transparent px-1 hover:bg-hover focus-visible:ring-0"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -8834,18 +8845,30 @@ function ContextMenuShortcut({ className, ...props }) {
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 var TableContext = createContext(null);
 var Table = forwardRef(
-  ({ children, className, containerClassName, ...props }, ref) => {
+  ({
+    children,
+    className,
+    containerClassName,
+    density = "default",
+    mobileDensity = "default",
+    mobileSurface = "default",
+    ...props
+  }, ref) => {
     const containerRef = useRef(null);
     const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } = useProximityHover(containerRef);
     useEffect(() => {
       measureItems();
     }, [measureItems, children]);
     const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
-    return /* @__PURE__ */ jsx(TableContext.Provider, { value: { registerItem, activeIndex }, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: { registerItem, activeIndex, density, mobileDensity }, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref: containerRef,
-        className: cn("relative", containerClassName),
+        className: cn(
+          "relative",
+          mobileSurface === "flat" && "max-sm:-mx-4 max-sm:overflow-x-auto max-sm:rounded-none max-sm:border-x-0",
+          containerClassName
+        ),
         onMouseEnter: handlers.onMouseEnter,
         onMouseMove: handlers.onMouseMove,
         onMouseLeave: handlers.onMouseLeave,
@@ -8880,7 +8903,7 @@ var Table = forwardRef(
             "table",
             {
               ref,
-              className: cn("w-full text-[13px] border-collapse", className),
+              className: cn("w-full border-collapse text-[13px]", className),
               ...props,
               children
             }
@@ -8937,21 +8960,40 @@ var TableRow = forwardRef(
 );
 TableRow.displayName = "TableRow";
 var TableHead = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", { ref, className: cn("px-3 py-2 text-left text-foreground", className), ...props })
+  ({ className, ...props }, ref) => {
+    const ctx = useContext(TableContext);
+    const densityClass = ctx?.density === "compact" ? "px-2 py-1.5" : "px-3 py-2";
+    const mobileDensityClass = ctx?.mobileDensity === "compact" ? "max-sm:px-2 max-sm:py-1.5" : "";
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        className: cn(densityClass, mobileDensityClass, "text-left text-foreground", className),
+        ...props
+      }
+    );
+  }
 );
 TableHead.displayName = "TableHead";
 var TableCell = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "td",
-    {
-      ref,
-      className: cn(
-        "px-3 py-2 text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => {
+    const ctx = useContext(TableContext);
+    const densityClass = ctx?.density === "compact" ? "px-2 py-1.5" : "px-3 py-2";
+    const mobileDensityClass = ctx?.mobileDensity === "compact" ? "max-sm:px-2 max-sm:py-1.5" : "";
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(
+          densityClass,
+          mobileDensityClass,
+          "text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 TableCell.displayName = "TableCell";
 var TableFooter = forwardRef(
@@ -8969,7 +9011,26 @@ var TableCaption = forwardRef(
   )
 );
 TableCaption.displayName = "TableCaption";
-function Input({ className, type, ...props }) {
+var inputDensityClasses = {
+  default: "h-10 px-3 py-1",
+  compact: "h-8 px-2.5 py-1"
+};
+var inputMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5 max-sm:py-1"
+};
+var controlMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
+function Input({
+  className,
+  type,
+  density = "default",
+  mobileDensity = "default",
+  mobileSurface = "default",
+  ...props
+}) {
   const shape3 = useShape();
   return /* @__PURE__ */ jsx(
     "input",
@@ -8977,12 +9038,15 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "flex h-10 w-full px-3 py-1",
+        "flex w-full",
+        inputDensityClasses[density],
+        inputMobileDensityClasses[mobileDensity],
         shape3.input,
         "body text-foreground placeholder:text-muted-foreground",
         controlSurfaceClasses,
         motionClasses,
         focusRingClasses,
+        controlMobileSurfaceClasses[mobileSurface],
         "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
@@ -9305,8 +9369,31 @@ var triggerVariants = cva(
     }
   }
 );
+var selectTriggerDensityClasses = {
+  default: "h-9 px-3",
+  compact: "h-8 px-2.5"
+};
+var selectTriggerMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5"
+};
+var selectTriggerMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
 var SelectTrigger = forwardRef(
-  ({ className, variant, icon: Icon, placeholder = "Select\u2026", error, children, ...props }, ref) => {
+  ({
+    className,
+    variant,
+    icon: Icon,
+    placeholder = "Select\u2026",
+    error,
+    children,
+    density = "default",
+    mobileDensity = "default",
+    mobileSurface = "default",
+    ...props
+  }, ref) => {
     const { value, open, setOpen, disabled, triggerRef, labelMap } = useSelectContext();
     const shape3 = useShape();
     const label = value ? labelMap.current.get(value) ?? value : void 0;
@@ -9334,6 +9421,9 @@ var SelectTrigger = forwardRef(
           "aria-invalid": !!error || void 0,
           className: cn(
             triggerVariants({ variant }),
+            selectTriggerDensityClasses[density],
+            selectTriggerMobileDensityClasses[mobileDensity],
+            selectTriggerMobileSurfaceClasses[mobileSurface],
             shape3.input,
             error && "border-destructive/50 hover:border-destructive/50",
             className
@@ -13736,26 +13826,33 @@ function SearchableTable({
     ] }) }) });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "md:rounded-lg md:border md:border-border md:bg-muted/30 md:p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3", children: [
-      /* @__PURE__ */ jsx(
-        InputGroup,
-        {
-          placeholder: searchPlaceholder,
-          value: searchTerm,
-          onChange: (event) => onSearchChange(event.target.value),
-          leadingIcon: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
-          wrapperClassName: "w-full min-w-0 md:min-w-[280px] md:max-w-[520px] md:flex-1 md:basis-[340px]",
-          className: "h-9 bg-background"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end", children: Object.entries(filters).map(([key, filter]) => /* @__PURE__ */ jsxs(Select, { value: filter.value, onValueChange: filter.onChange, children: [
-        /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-9 w-full bg-background sm:w-[180px]", children: [
-          /* @__PURE__ */ jsx(Filter, { className: "mr-2 size-4" }),
-          /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder })
-        ] }),
-        /* @__PURE__ */ jsx(SelectContent, { children: filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
-      ] }, key)) })
-    ] }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "searchable-table-toolbar",
+        className: "flex flex-col gap-2.5 md:flex-row md:flex-wrap md:items-center md:justify-start md:gap-3",
+        children: [
+          /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              placeholder: searchPlaceholder,
+              value: searchTerm,
+              onChange: (event) => onSearchChange(event.target.value),
+              leadingIcon: /* @__PURE__ */ jsx(Search, { className: "size-4" }),
+              wrapperClassName: "w-full min-w-0 md:min-w-[280px] md:max-w-[520px] md:flex-1 md:basis-[340px]",
+              className: "h-9 bg-background"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:flex-wrap md:w-auto md:justify-end", children: Object.entries(filters).map(([key, filter]) => /* @__PURE__ */ jsxs(Select, { value: filter.value, onValueChange: filter.onChange, children: [
+            /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-9 w-full bg-background sm:w-[180px]", children: [
+              /* @__PURE__ */ jsx(Filter, { className: "mr-2 size-4" }),
+              /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(SelectContent, { children: filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+          ] }, key)) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(StackedList, { bordered: false, className: "rounded-none bg-transparent md:hidden", children: displayData.length === 0 ? renderEmptyState("px-0 py-9") : displayData.map((item) => {
       if (mobileCard) {
         return /* @__PURE__ */ jsx(StackedListItem, { className: "px-0 py-0", children: mobileCard(item) }, item.id);
@@ -14129,13 +14226,16 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? Slot$1.Root : "div";
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-sidebar": "group-label",
+      "data-state": state,
       className: cn(
         "flex h-8 shrink-0 items-center rounded-md px-2 label text-muted-foreground",
         "outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear",
+        "data-[state=collapsed]:h-0 data-[state=collapsed]:m-0 data-[state=collapsed]:overflow-hidden data-[state=collapsed]:p-0 data-[state=collapsed]:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:h-0",
         "group-data-[state=collapsed]/sidebar-wrapper:m-0",
@@ -14193,10 +14293,12 @@ function SidebarMenuButton({
   ...props
 }) {
   const Comp = asChild ? Slot$1.Root : "button";
+  const state = useOptionalSidebar()?.state ?? "expanded";
   const button = /* @__PURE__ */ jsx(
     Comp,
     {
       "data-sidebar": "menu-button",
+      "data-state": state,
       "data-active": isActive,
       "data-size": size,
       className: cn(
@@ -14209,6 +14311,7 @@ function SidebarMenuButton({
         "active:bg-muted",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
+        "[&>span]:min-w-0 [&>span]:truncate",
         // Size variants
         size === "sm" && "h-7 text-xs",
         size === "lg" && "h-10",
@@ -14218,9 +14321,12 @@ function SidebarMenuButton({
           "hover:bg-brand-primary/15 hover:text-brand-primary"
         ],
         // Collapsed state
+        "data-[state=collapsed]:size-9 data-[state=collapsed]:justify-center data-[state=collapsed]:p-0",
+        "data-[state=collapsed]:[&>span]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
         "group-data-[state=collapsed]/sidebar-wrapper:size-9",
         "group-data-[state=collapsed]/sidebar-wrapper:p-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:[&>span]:hidden",
         className
       ),
       ...props,
@@ -14273,13 +14379,16 @@ function SidebarMenuAction({
   );
 }
 function SidebarMenuBadge({ className, ...props }) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-sidebar": "menu-badge",
+      "data-state": state,
       className: cn(
         "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
         "caption font-medium bg-muted text-muted-foreground px-1",
+        "data-[state=collapsed]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -14315,12 +14424,15 @@ function SidebarMenuSkeleton({
   );
 }
 function SidebarMenuSub({ className, ...props }) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     "ul",
     {
       "data-sidebar": "menu-sub",
+      "data-state": state,
       className: cn(
         "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border pl-3",
+        "data-[state=collapsed]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -15668,20 +15780,41 @@ var TabsSubtlePanel = forwardRef(
   }
 );
 TabsSubtlePanel.displayName = "TabsSubtlePanel";
-function Textarea({ className, ...props }) {
+var textareaDensityClasses = {
+  default: "min-h-[80px] px-3 py-2",
+  compact: "min-h-16 px-2.5 py-1.5"
+};
+var textareaMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:min-h-16 max-sm:px-2.5 max-sm:py-1.5"
+};
+var textareaMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
+function Textarea({
+  className,
+  density = "default",
+  mobileDensity = "default",
+  mobileSurface = "default",
+  ...props
+}) {
   const shape3 = useShape();
   return /* @__PURE__ */ jsx(
     "textarea",
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full px-3 py-2",
+        "flex w-full",
+        textareaDensityClasses[density],
+        textareaMobileDensityClasses[mobileDensity],
         shape3.input,
         "body text-foreground placeholder:text-muted-foreground",
         "resize-none",
         controlSurfaceClasses,
         motionClasses,
         focusRingClasses,
+        textareaMobileSurfaceClasses[mobileSurface],
         "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className
@@ -15994,23 +16127,22 @@ function TitledCard({
   actionButtons,
   icon: Icon,
   contentPadding = "default",
+  mobileSurface = "flush",
   className,
   contentClassName,
   containerClassName,
   titleClassName
 }) {
   const hasHeader = Boolean(title || subtitle || actionButtons);
+  const hasContent = Boolean(children);
   const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
   const contentPaddingClassName = contentPadding === "flush" ? "p-0" : contentPadding === "flush-mobile" ? "p-0 sm:p-5" : hasHeader ? "p-4 sm:p-5" : "p-0 sm:p-5";
+  const isMobileFlat = mobileSurface === "flat" || mobileSurface === "flush";
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      className: cn(
-        "min-w-0 overflow-hidden border border-border bg-card shadow-natural",
-        "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none",
-        containerClassName,
-        className
-      ),
+      mobileSurface,
+      className: cn("min-w-0 overflow-hidden", containerClassName, className),
       "data-slot": "titled-card",
       children: [
         canUseCardHeading ? /* @__PURE__ */ jsx(
@@ -16018,32 +16150,50 @@ function TitledCard({
           {
             title,
             ...subtitle ? { description: subtitle } : {},
-            className: "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
+            className: cn(
+              !hasContent && "border-b-0",
+              isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"
+            ),
             children: Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" })
           }
-        ) : hasHeader ? /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-col gap-3 border-b border-border p-4 max-sm:border-b-0 max-sm:px-0 max-sm:pb-3 sm:flex-row sm:items-start sm:justify-between sm:p-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsxs(
-              CardTitle,
-              {
-                className: cn(
-                  "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
-                  titleClassName
-                ),
-                children: [
-                  Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title })
-                ]
-              }
+        ) : hasHeader ? /* @__PURE__ */ jsxs(
+          CardHeader,
+          {
+            className: cn(
+              "flex flex-col gap-3 border-b border-border p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5",
+              !hasContent && "border-b-0",
+              isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"
             ),
-            subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1 max-w-3xl text-sm leading-5", children: subtitle })
-          ] }),
-          actionButtons && /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end", children: actionButtons })
-        ] }) : null,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                title && /* @__PURE__ */ jsxs(
+                  CardTitle,
+                  {
+                    className: cn(
+                      "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
+                      titleClassName
+                    ),
+                    children: [
+                      Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title })
+                    ]
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1 max-w-3xl text-sm leading-5", children: subtitle })
+              ] }),
+              actionButtons && /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end", children: actionButtons })
+            ]
+          }
+        ) : null,
         children && /* @__PURE__ */ jsx(
           CardContent,
           {
-            className: cn(contentPaddingClassName, "min-w-0 max-sm:px-0", contentClassName),
+            className: cn(
+              contentPaddingClassName,
+              "min-w-0",
+              isMobileFlat && "max-sm:px-0",
+              contentClassName
+            ),
             children
           }
         )