@hilum/ui 3.6.11 → 3.7.0

package/llms.txt

@@ -5,7 +5,7 @@
 ## Key Facts
 
 - Package name: `@hilum/ui`
-- Package version: 3.6.11
+- Package version: 3.6.12
 - Component modules: 104
 - Atom components: 73
 - Molecule components: 31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.6.11",
+  "version": "3.7.0",
   "private": false,
   "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
   "license": "MIT",

package/src/components/card.tsx

@@ -7,10 +7,20 @@ import { motionClasses } from "../lib/interaction";
 /*  Card root                                                          */
 /* ------------------------------------------------------------------ */
 
+type CardMobileSurface = "default" | "flat" | "flush";
+
+const cardMobileSurfaceClasses: Record<CardMobileSurface, string> = {
+  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",
+};
+
 const cardVariants = cva(["rounded-xl", motionClasses], {
   variants: {
     variant: {
       default: "bg-card shadow-natural",
+      outlined: "border border-border bg-card shadow-natural",
+      elevated: "border border-border bg-card shadow-elevated",
       muted: "bg-muted shadow-natural",
       ghost: "bg-transparent",
       responsive:
@@ -22,14 +32,16 @@ const cardVariants = cva(["rounded-xl", motionClasses], {
   },
 });
 
-interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {
+  mobileSurface?: CardMobileSurface;
+}
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, ...props }, ref) => (
+  ({ className, variant, mobileSurface = "default", ...props }, ref) => (
     <div
       ref={ref}
       data-slot="card"
-      className={cn(cardVariants({ variant }), className)}
+      className={cn(cardVariants({ variant }), cardMobileSurfaceClasses[mobileSurface], className)}
       {...props}
     />
   ),
@@ -134,3 +146,4 @@ export {
   CardMedia,
   cardVariants,
 };
+export type { CardMobileSurface, CardProps };

package/src/components/chart.tsx

@@ -100,7 +100,8 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "flex aspect-video justify-center text-xs",
+          "flex justify-center text-xs",
+          height === undefined ? "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",

package/src/components/color-input.tsx

@@ -4,7 +4,8 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
-import { ColorPicker } from "./color-picker";
+import { ColorPickerPopover } from "./color-picker";
+import type { ControlMobileSurface } from "./input";
 
 interface ColorInputProps {
   value: string;
@@ -15,6 +16,7 @@ interface ColorInputProps {
   className?: string;
   disabled?: boolean;
   presets?: string[];
+  mobileSurface?: ControlMobileSurface;
 }
 
 /**
@@ -29,6 +31,7 @@ function ColorInput({
   className,
   disabled,
   presets,
+  mobileSurface = "default",
 }: ColorInputProps) {
   const shape = useShape();
   const [hex, setHex] = React.useState(value);
@@ -42,6 +45,11 @@ function ColorInput({
     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 (
     <div
       className={cn(
@@ -49,16 +57,19 @@ function ColorInput({
         shape.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,
       )}
     >
-      <ColorPicker
+      <ColorPickerPopover
         value={value}
         onChange={onChange}
         {...(presets !== undefined && { presets })}
         {...(disabled !== undefined && { disabled })}
-        className="h-full w-8 border-0 rounded-none focus-visible:ring-0"
+        triggerShowValue={false}
+        hideEyedropper
+        triggerClassName="h-full w-8 border-0 rounded-none bg-transparent px-1 hover:bg-hover focus-visible:ring-0"
       />
       <input
         type="text"

package/src/components/input.tsx

@@ -5,7 +5,39 @@ import { cn } from "../lib/utils";
 import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+type ControlDensity = "default" | "compact";
+type ControlMobileSurface = "default" | "flush";
+
+interface InputProps extends React.ComponentProps<"input"> {
+  density?: ControlDensity;
+  mobileDensity?: ControlDensity;
+  mobileSurface?: ControlMobileSurface;
+}
+
+const inputDensityClasses: Record<ControlDensity, string> = {
+  default: "h-10 px-3 py-1",
+  compact: "h-8 px-2.5 py-1",
+};
+
+const inputMobileDensityClasses: Record<ControlDensity, string> = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5 max-sm:py-1",
+};
+
+const controlMobileSurfaceClasses: Record<ControlMobileSurface, string> = {
+  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
+}: InputProps) {
   const shape = useShape();
 
   return (
@@ -13,12 +45,15 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-10 w-full px-3 py-1",
+        "flex w-full",
+        inputDensityClasses[density],
+        inputMobileDensityClasses[mobileDensity],
         shape.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",
@@ -31,3 +66,4 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 Input.displayName = "Input";
 
 export { Input };
+export type { ControlDensity, ControlMobileSurface, InputProps };

package/src/components/select.tsx

@@ -24,6 +24,7 @@ import { useProximityHover } from "../hooks/use-proximity-hover";
 import { useShape } from "../lib/shape-context";
 import { useScrollEdges, ScrollEdgeCue } from "../lib/scroll-fade";
 import { Elevated } from "../lib/elevated";
+import type { ControlDensity, ControlMobileSurface } from "./input";
 
 // ---------------------------------------------------------------------------
 // Select context
@@ -140,15 +141,48 @@ const triggerVariants = cva(
   },
 );
 
+const selectTriggerDensityClasses: Record<ControlDensity, string> = {
+  default: "h-9 px-3",
+  compact: "h-8 px-2.5",
+};
+
+const selectTriggerMobileDensityClasses: Record<ControlDensity, string> = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5",
+};
+
+const selectTriggerMobileSurfaceClasses: Record<ControlMobileSurface, string> = {
+  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",
+};
+
 interface SelectTriggerProps
   extends HTMLAttributes<HTMLButtonElement>, VariantProps<typeof triggerVariants> {
   icon?: IconComponent;
   placeholder?: string;
   error?: string;
+  density?: ControlDensity;
+  mobileDensity?: ControlDensity;
+  mobileSurface?: ControlMobileSurface;
 }
 
 const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  ({ className, variant, icon: Icon, placeholder = "Select…", error, children, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      icon: Icon,
+      placeholder = "Select…",
+      error,
+      children,
+      density = "default",
+      mobileDensity = "default",
+      mobileSurface = "default",
+      ...props
+    },
+    ref,
+  ) => {
     const { value, open, setOpen, disabled, triggerRef, labelMap } = useSelectContext();
     const shape = useShape();
     const label = value ? (labelMap.current.get(value) ?? value) : undefined;
@@ -179,6 +213,9 @@ const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
           aria-invalid={!!error || undefined}
           className={cn(
             triggerVariants({ variant }),
+            selectTriggerDensityClasses[density],
+            selectTriggerMobileDensityClasses[mobileDensity],
+            selectTriggerMobileSurfaceClasses[mobileSurface],
             shape.input,
             error && "border-destructive/50 hover:border-destructive/50",
             className,

package/src/components/sidebar.tsx

@@ -405,13 +405,16 @@ function SidebarGroupLabel({
   ...props
 }: React.ComponentProps<"div"> & { asChild?: boolean }) {
   const Comp = asChild ? Slot.Root : "div";
+  const state = useOptionalSidebar()?.state ?? "expanded";
 
   return (
     <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",
@@ -492,10 +495,12 @@ function SidebarMenuButton({
   ...props
 }: SidebarMenuButtonProps) {
   const Comp = asChild ? (Slot.Root as React.ElementType) : "button";
+  const state = useOptionalSidebar()?.state ?? "expanded";
 
   const button = (
     <Comp
       data-sidebar="menu-button"
+      data-state={state}
       data-active={isActive}
       data-size={size}
       className={cn(
@@ -508,6 +513,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",
@@ -517,9 +523,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}
@@ -590,12 +599,16 @@ function SidebarMenuAction({
 /* ------------------------------------------------------------------ */
 
 function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
+
   return (
     <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,
       )}
@@ -637,11 +650,15 @@ function SidebarMenuSkeleton({
 /* ------------------------------------------------------------------ */
 
 function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
+
   return (
     <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,
       )}

package/src/components/table.tsx

@@ -22,19 +22,38 @@ import { useProximityHover } from "../hooks/use-proximity-hover";
 interface TableContextValue {
   registerItem: (index: number, element: HTMLElement | null) => void;
   activeIndex: number | null;
+  density: TableDensity;
+  mobileDensity: TableDensity;
 }
 
 const TableContext = createContext<TableContextValue | null>(null);
 
 // ── Table ────────────────────────────────────────────────
 
+type TableDensity = "default" | "compact";
+type TableMobileSurface = "default" | "flat";
+
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
   children: ReactNode;
   containerClassName?: string;
+  density?: TableDensity;
+  mobileDensity?: TableDensity;
+  mobileSurface?: TableMobileSurface;
 }
 
 const Table = forwardRef<HTMLTableElement, TableProps>(
-  ({ children, className, containerClassName, ...props }, ref) => {
+  (
+    {
+      children,
+      className,
+      containerClassName,
+      density = "default",
+      mobileDensity = "default",
+      mobileSurface = "default",
+      ...props
+    },
+    ref,
+  ) => {
     const containerRef = useRef<HTMLDivElement>(null);
 
     const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } =
@@ -47,10 +66,15 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
     const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
 
     return (
-      <TableContext.Provider value={{ registerItem, activeIndex }}>
+      <TableContext.Provider value={{ registerItem, activeIndex, density, mobileDensity }}>
         <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}
@@ -86,7 +110,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
 
           <table
             ref={ref}
-            className={cn("w-full text-[13px] border-collapse", className)}
+            className={cn("w-full border-collapse text-[13px]", className)}
             {...props}
           >
             {children}
@@ -168,9 +192,20 @@ TableRow.displayName = "TableRow";
 // ── TableHead ────────────────────────────────────────────
 
 const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th ref={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 (
+      <th
+        ref={ref}
+        className={cn(densityClass, mobileDensityClass, "text-left text-foreground", className)}
+        {...props}
+      />
+    );
+  },
 );
 
 TableHead.displayName = "TableHead";
@@ -178,16 +213,25 @@ TableHead.displayName = "TableHead";
 // ── TableCell ────────────────────────────────────────────
 
 const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td
-      ref={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 (
+      <td
+        ref={ref}
+        className={cn(
+          densityClass,
+          mobileDensityClass,
+          "text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
 );
 
 TableCell.displayName = "TableCell";
@@ -213,3 +257,4 @@ TableCaption.displayName = "TableCaption";
 // ── Exports ──────────────────────────────────────────────
 
 export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption };
+export type { TableDensity, TableMobileSurface, TableProps };

package/src/components/textarea.tsx

@@ -4,21 +4,53 @@ import * as React from "react";
 import { cn } from "../lib/utils";
 import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
 import { useShape } from "../lib/shape-context";
+import type { ControlDensity, ControlMobileSurface } from "./input";
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+interface TextareaProps extends React.ComponentProps<"textarea"> {
+  density?: ControlDensity;
+  mobileDensity?: ControlDensity;
+  mobileSurface?: ControlMobileSurface;
+}
+
+const textareaDensityClasses: Record<ControlDensity, string> = {
+  default: "min-h-[80px] px-3 py-2",
+  compact: "min-h-16 px-2.5 py-1.5",
+};
+
+const textareaMobileDensityClasses: Record<ControlDensity, string> = {
+  default: "",
+  compact: "max-sm:min-h-16 max-sm:px-2.5 max-sm:py-1.5",
+};
+
+const textareaMobileSurfaceClasses: Record<ControlMobileSurface, string> = {
+  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
+}: TextareaProps) {
   const shape = useShape();
 
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-[80px] w-full px-3 py-2",
+        "flex w-full",
+        textareaDensityClasses[density],
+        textareaMobileDensityClasses[mobileDensity],
         shape.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,
@@ -29,3 +61,4 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 }
 
 export { Textarea };
+export type { TextareaProps };

package/src/components/titled-card.tsx

@@ -2,7 +2,14 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  type CardMobileSurface,
+} from "./card";
 import { CardHeading } from "./card-heading";
 
 interface TitledCardProps {
@@ -12,6 +19,7 @@ interface TitledCardProps {
   actionButtons?: React.ReactNode;
   icon?: React.ComponentType<{ className?: string }>;
   contentPadding?: "default" | "flush-mobile" | "flush";
+  mobileSurface?: CardMobileSurface;
   className?: string;
   contentClassName?: string;
   containerClassName?: string;
@@ -25,6 +33,7 @@ function TitledCard({
   actionButtons,
   icon: Icon,
   contentPadding = "default",
+  mobileSurface = "flush",
   className,
   contentClassName,
   containerClassName,
@@ -40,12 +49,13 @@ function TitledCard({
         : hasHeader
           ? "p-4 sm:p-5"
           : "p-0 sm:p-5";
+  const isMobileFlat = mobileSurface === "flat" || mobileSurface === "flush";
 
   return (
     <Card
+      mobileSurface={mobileSurface}
       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,
       )}
@@ -55,12 +65,17 @@ function TitledCard({
         <CardHeading
           title={title!}
           {...(subtitle ? { description: subtitle } : {})}
-          className="max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"
+          className={cn(isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3")}
         >
           {Icon && <Icon className="size-5 shrink-0 text-muted-foreground" />}
         </CardHeading>
       ) : hasHeader ? (
-        <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">
+        <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",
+            isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
+          )}
+        >
           <div className="min-w-0 flex-1">
             {title && (
               <CardTitle
@@ -88,7 +103,12 @@ function TitledCard({
       ) : null}
       {children && (
         <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}
         </CardContent>