@hilum/ui 3.5.4 → 3.6.1

package/package.json

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

package/src/components/button.tsx

@@ -210,7 +210,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
                   className="transition-[stroke-width] duration-80 group-hover:stroke-[2]"
                 />
               )}
-              <span>{children}</span>
+              {LeadingIcon || TrailingIcon ? <span>{children}</span> : children}
               {TrailingIcon && (
                 <TrailingIcon
                   size={iconSize}

package/src/components/color-input.tsx

@@ -3,6 +3,7 @@
 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";
 
 interface ColorInputProps {
@@ -29,6 +30,7 @@ function ColorInput({
   disabled,
   presets,
 }: ColorInputProps) {
+  const shape = useShape();
   const [hex, setHex] = React.useState(value);
 
   React.useEffect(() => {
@@ -43,8 +45,9 @@ function ColorInput({
   return (
     <div
       className={cn(
-        "inline-flex h-8 items-stretch gap-0 rounded-md border border-border bg-card overflow-hidden",
-        "shadow-natural focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+        "inline-flex h-8 items-stretch gap-0 overflow-hidden border border-border bg-background",
+        shape.input,
+        "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
         motionClasses,
         disabled && "opacity-50 pointer-events-none",
         className,

package/src/components/combobox.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
 
 export interface ComboboxOption {
   value: string;
@@ -31,6 +32,7 @@ function Combobox({
   emptyText = "No results found.",
   className,
 }: ComboboxProps) {
+  const shape = useShape();
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
   const [activeIndex, setActiveIndex] = React.useState(-1);
@@ -132,9 +134,10 @@ function Combobox({
           }
           aria-autocomplete="list"
           className={cn(
-            "flex h-10 w-full rounded-lg border border-border bg-card pr-10 body text-foreground",
+            "flex h-10 w-full border border-border bg-background pr-10 body text-foreground",
+            shape.input,
             "placeholder:text-muted-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:border-border",
+            "focus-visible:border-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
             "disabled:cursor-not-allowed disabled:opacity-50",
             selectedOption?.avatar && !open
               ? "pl-8"

package/src/components/dialog.tsx

@@ -17,6 +17,11 @@ import { spring } from "../lib/springs";
 import { useShape } from "../lib/shape-context";
 import { SurfaceProvider, useSurface } from "../lib/surface-context";
 import { surfaceClasses } from "../lib/surface-classes";
+import {
+  desktopDialogContentClassName,
+  dialogSheetMotionClassName,
+  mobileDialogSheetContentClassName,
+} from "../lib/mobile-popper-sheet";
 import { Button } from "./button";
 
 const DIALOG_OFFSET = 4;
@@ -75,6 +80,15 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
 
     if (!mounted) return null;
 
+    const sizeClassName =
+      size === "sm"
+        ? container
+          ? "max-w-[400px]"
+          : "sm:max-w-[400px]"
+        : container
+          ? "max-w-[540px]"
+          : "sm:max-w-[540px]";
+
     return (
       <DialogPrimitive.Portal forceMount container={container ?? undefined}>
         <DialogPrimitive.Overlay asChild forceMount>
@@ -91,24 +105,31 @@ const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
         <DialogPrimitive.Content ref={ref} asChild forceMount {...props}>
           <motion.div
             className={cn(
-              container ? "absolute" : "fixed",
-              "left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]",
+              container
+                ? "absolute left-1/2 top-1/2 z-50 w-[calc(100%-2rem)]"
+                : [
+                    mobileDialogSheetContentClassName,
+                    desktopDialogContentClassName,
+                    dialogSheetMotionClassName,
+                  ],
               surfaceClasses(dialogLevel),
               "p-6 focus:outline-none",
-              "rounded-t-2xl max-sm:pb-[calc(1.5rem+env(safe-area-inset-bottom))] data-[state=open]:slide-in-from-bottom sm:data-[state=open]:zoom-in-95",
-              size === "sm" && "max-w-[400px]",
-              size === "lg" && "max-w-[540px]",
+              sizeClassName,
               shape.container,
               "rounded-t-2xl",
               className,
             )}
-            initial={{ opacity: 0, scale: 0.97, x: "-50%", y: "-50%" }}
-            animate={{
-              opacity: open ? 1 : 0,
-              scale: open ? 1 : 0.97,
-              x: "-50%",
-              y: "-50%",
-            }}
+            initial={container ? { opacity: 0, scale: 0.97, x: "-50%", y: "-50%" } : { opacity: 0 }}
+            animate={
+              container
+                ? {
+                    opacity: open ? 1 : 0,
+                    scale: open ? 1 : 0.97,
+                    x: "-50%",
+                    y: "-50%",
+                  }
+                : { opacity: open ? 1 : 0 }
+            }
             transition={open ? spring.slow : spring.slow.exit}
             onAnimationComplete={handleExitComplete}
           >

package/src/components/input-group.tsx

@@ -78,6 +78,7 @@ const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
   ) => {
     const itemsRef = useRef(new Map<number, HTMLLabelElement>());
     const [activeIndex, setActiveIndex] = useState<number | null>(null);
+    const shape = useShape();
 
     const registerItem = useCallback((index: number, element: HTMLLabelElement | null) => {
       if (element) {
@@ -128,7 +129,8 @@ const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
         <div
           ref={ref}
           className={cn(
-            "relative flex items-center gap-2 rounded-[var(--radius-input)] border bg-background px-3 py-2 text-[13px] transition-colors",
+            "relative flex items-center gap-2 border bg-background px-3 py-2 text-[13px] transition-colors",
+            shape.input,
             error ? "border-destructive/50" : "border-border",
             disabled && "opacity-50",
             pill && "rounded-full",

package/src/components/input-number.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
 
 interface InputNumberProps extends Omit<
   React.ComponentProps<"input">,
@@ -50,6 +51,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     },
     ref,
   ) => {
+    const shape = useShape();
+
     const formatValue = React.useCallback(
       (next: number | null) => (next === null ? mixedLabel : next.toFixed(precision)),
       [mixedLabel, precision],
@@ -63,13 +66,16 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
 
     const clamp = React.useCallback((n: number) => Math.min(max, Math.max(min, n)), [min, max]);
 
-    const parseAndClamp = React.useCallback((raw: string) => {
-      const n = parseFloat(raw);
-      if (Number.isFinite(n)) {
-        return clamp(n);
-      }
-      return null;
-    }, [clamp]);
+    const parseAndClamp = React.useCallback(
+      (raw: string) => {
+        const n = parseFloat(raw);
+        if (Number.isFinite(n)) {
+          return clamp(n);
+        }
+        return null;
+      },
+      [clamp],
+    );
 
     const commit = (raw: string) => {
       const next = parseAndClamp(raw);
@@ -105,8 +111,9 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
     return (
       <div
         className={cn(
-          "inline-flex h-8 items-stretch rounded-md border border-border bg-card overflow-hidden",
-          "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+          "inline-flex h-8 items-stretch overflow-hidden border border-border bg-background",
+          shape.input,
+          "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
           disabled && "opacity-50 pointer-events-none",
           className,
         )}

package/src/components/input.tsx

@@ -1,14 +1,20 @@
+"use client";
+
 import * as React from "react";
 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">) {
+  const shape = useShape();
+
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-10 w-full rounded-md px-3 py-1",
+        "flex h-10 w-full px-3 py-1",
+        shape.input,
         "body text-foreground placeholder:text-muted-foreground",
         controlSurfaceClasses,
         motionClasses,

package/src/components/native-select.tsx

@@ -1,32 +1,40 @@
+"use client";
+
 import * as React from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/utils";
+import { useShape } from "../lib/shape-context";
 
 const NativeSelect = React.forwardRef<
   HTMLSelectElement,
   React.SelectHTMLAttributes<HTMLSelectElement>
->(({ className, children, ...props }, ref) => (
-  <div className="relative">
-    <select
-      ref={ref}
-      className={cn(
-        "peer h-10 w-full appearance-none rounded-lg border border-border bg-card pl-3 pr-8",
-        "body text-foreground",
-        "focus:outline-none focus:ring-2 focus:ring-ring/30 focus:border-border",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/20",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </select>
-    <ChevronDown
-      size={14}
-      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
-    />
-  </div>
-));
+>(({ className, children, ...props }, ref) => {
+  const shape = useShape();
+
+  return (
+    <div className="relative">
+      <select
+        ref={ref}
+        className={cn(
+          "peer h-10 w-full appearance-none border border-border bg-background pl-3 pr-8",
+          shape.input,
+          "body text-foreground",
+          "focus:border-border focus:outline-none focus:ring-2 focus:ring-ring/30",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:ring-destructive/20",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown
+        size={14}
+        className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground peer-disabled:opacity-50"
+      />
+    </div>
+  );
+});
 NativeSelect.displayName = "NativeSelect";
 
 const NativeSelectOption = React.forwardRef<

package/src/components/textarea.tsx

@@ -1,13 +1,19 @@
+"use client";
+
 import * as React from "react";
 import { cn } from "../lib/utils";
 import { controlSurfaceClasses, focusRingClasses, motionClasses } from "../lib/interaction";
+import { useShape } from "../lib/shape-context";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  const shape = useShape();
+
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-[80px] w-full rounded-md px-3 py-2",
+        "flex min-h-[80px] w-full px-3 py-2",
+        shape.input,
         "body text-foreground placeholder:text-muted-foreground",
         "resize-none",
         controlSurfaceClasses,

package/src/index.ts

@@ -7,6 +7,9 @@
 
 // Utilities
 export { cn } from "./lib/utils";
+export * from "./lib/icon-context";
+export * from "./lib/shape-context";
+export * from "./lib/surface-context";
 
 // Components (alphabetical)
 export * from "./components/account-menu";

package/src/lib/interaction.ts

@@ -14,8 +14,7 @@ export const focusRingClasses =
 export const iconStrokeClasses =
   "[&_svg]:transition-[stroke-width,transform,color] [&_svg]:duration-150 [&_svg]:ease-out group-hover:[&_svg]:stroke-[2]";
 
-export const controlSurfaceClasses =
-  "border border-border bg-card shadow-natural hover:border-ground-200 hover:shadow-elevated";
+export const controlSurfaceClasses = "border border-border bg-background hover:border-ground-200";
 
 export const surfaceElevationClasses = {
   flat: "border border-border bg-card",

package/src/lib/shape-context.tsx

@@ -59,7 +59,7 @@ const ShapeContext = createContext<ShapeContextValue | null>(null);
 
 function useShape(): ShapeClasses {
   const ctx = useContext(ShapeContext);
-  if (!ctx) return shapeMap.pill;
+  if (!ctx) return shapeMap.rounded;
   return ctx.classes;
 }
 
@@ -79,7 +79,7 @@ function transitionShape(callback: () => void) {
 
 function ShapeProvider({
   children,
-  defaultShape = "pill",
+  defaultShape = "rounded",
 }: {
   children: ReactNode;
   defaultShape?: ShapeVariant;