@hilum/ui 3.5.3 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hilum/ui",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "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/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/stat-card.tsx

@@ -6,6 +6,7 @@ interface StatCardProps {
   label?: string;
   title?: string;
   value?: string | number;
+  variant?: "default" | "responsive";
   trend?: {
     value: string;
     direction: "up" | "down" | "neutral";
@@ -37,6 +38,7 @@ function StatCard({
   label,
   title,
   value,
+  variant = "default",
   trend,
   icon,
   children,
@@ -58,11 +60,15 @@ function StatCard({
     down: TrendingDown,
     neutral: Minus,
   };
+  const surfaceClass =
+    variant === "responsive"
+      ? "min-w-0 border-border bg-transparent p-4 sm:rounded-xl sm:border sm:bg-card sm:p-5 sm:shadow-natural"
+      : "min-w-0 rounded-xl border border-border bg-card p-4 shadow-natural sm:p-5";
 
   return (
     <div
       className={cn(
-        "min-w-0 rounded-xl border border-border bg-card p-4 shadow-natural sm:p-5",
+        surfaceClass,
         containerClassName,
         className,
       )}

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;