@hilum/ui 0.1.1

package/src/components/input-number.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface InputNumberProps extends Omit<
+  React.ComponentProps<"input">,
+  "type" | "value" | "onChange"
+> {
+  value: number;
+  onChange: (next: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Suffix shown after the number (e.g. "px", "mm", "°", "%"). */
+  unit?: string;
+  /** Number of decimals to display. Default: 0. */
+  precision?: number;
+  /** Hides the up/down stepper buttons. */
+  hideSteppers?: boolean;
+}
+
+/**
+ * Numeric input with up/down steppers, unit suffix, and arrow-key step (Shift = 10×).
+ * Designed for designer property panels — see PHASE_0_AUDIT.md §P0.2.
+ */
+const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
+  (
+    {
+      value,
+      onChange,
+      min = -Infinity,
+      max = Infinity,
+      step = 1,
+      unit,
+      precision = 0,
+      hideSteppers = false,
+      className,
+      disabled,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [text, setText] = React.useState<string>(value.toFixed(precision));
+
+    React.useEffect(() => {
+      setText(value.toFixed(precision));
+    }, [value, precision]);
+
+    const clamp = React.useCallback((n: number) => Math.min(max, Math.max(min, n)), [min, max]);
+
+    const commit = (raw: string) => {
+      const n = parseFloat(raw);
+      if (Number.isFinite(n)) {
+        const next = clamp(n);
+        onChange(next);
+        setText(next.toFixed(precision));
+      } else {
+        setText(value.toFixed(precision));
+      }
+    };
+
+    const bump = (delta: number) => {
+      const next = clamp(value + delta);
+      onChange(next);
+      setText(next.toFixed(precision));
+    };
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        bump(step * (e.shiftKey ? 10 : 1));
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        bump(-step * (e.shiftKey ? 10 : 1));
+      } else if (e.key === "Enter") {
+        commit((e.target as HTMLInputElement).value);
+      }
+    };
+
+    return (
+      <div
+        className={cn(
+          "inline-flex h-8 items-stretch rounded-md border border-taupe-200 bg-white overflow-hidden",
+          "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+          disabled && "opacity-50 pointer-events-none",
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          type="text"
+          inputMode="decimal"
+          spellCheck={false}
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          onBlur={(e) => commit(e.target.value)}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          className="w-full caption text-taupe-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right"
+          {...rest}
+        />
+        {unit && (
+          <span aria-hidden className="caption-xs text-taupe-400 self-center pr-1.5 select-none">
+            {unit}
+          </span>
+        )}
+        {!hideSteppers && (
+          <div className="flex flex-col border-l border-taupe-100">
+            <button
+              type="button"
+              tabIndex={-1}
+              onClick={() => bump(step)}
+              aria-label="Increment"
+              className="flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500"
+            >
+              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
+                <path d="M0 5 L4 0 L8 5 Z" />
+              </svg>
+            </button>
+            <div className="border-t border-taupe-100" />
+            <button
+              type="button"
+              tabIndex={-1}
+              onClick={() => bump(-step)}
+              aria-label="Decrement"
+              className="flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500"
+            >
+              <svg viewBox="0 0 8 5" width="8" height="5" fill="currentColor">
+                <path d="M0 0 L4 5 L8 0 Z" />
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+InputNumber.displayName = "InputNumber";
+
+export { InputNumber };
+export type { InputNumberProps };

package/src/components/input-otp.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const InputOTP = React.forwardRef<
+  React.ComponentRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center", className)} {...props} />
+  ),
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-12 w-11 items-center justify-center",
+        "border-y border-r border-taupe-200 body font-medium text-taupe-900",
+        "first:rounded-l-xl first:border-l last:rounded-r-xl",
+        "transition-all",
+        isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-5 w-px animate-caret-blink bg-taupe-900 duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+      <Minus size={14} className="text-taupe-300" />
+    </div>
+  ),
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

package/src/components/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-taupe-200 bg-white px-3 py-1",
+        "body text-taupe-900 placeholder:text-taupe-400",
+        "transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-taupe-900",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/kbd.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Kbd = React.forwardRef<HTMLElement, React.ComponentProps<"kbd">>(
+  ({ className, ...props }, ref) => (
+    <kbd
+      ref={ref}
+      className={cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-taupe-200 bg-taupe-50 px-1.5 font-mono caption-xs font-medium text-taupe-500",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Kbd.displayName = "Kbd";
+
+export { Kbd };

package/src/components/label.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "body font-medium leading-none text-taupe-700",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

package/src/components/media-object.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+interface MediaObjectProps {
+  media: React.ReactNode;
+  children: React.ReactNode;
+  mediaPosition?: "left" | "right";
+  align?: "top" | "center" | "bottom";
+  gap?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const alignMap = {
+  top: "items-start",
+  center: "items-center",
+  bottom: "items-end",
+};
+
+const gapMap = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+function MediaObject({
+  media,
+  children,
+  mediaPosition = "left",
+  align = "top",
+  gap = "md",
+  className,
+}: MediaObjectProps) {
+  return (
+    <div
+      className={cn(
+        "flex",
+        mediaPosition === "right" && "flex-row-reverse",
+        alignMap[align],
+        gapMap[gap],
+        className,
+      )}
+    >
+      <div className="shrink-0">{media}</div>
+      <div className="min-w-0 flex-1">{children}</div>
+    </div>
+  );
+}
+
+export { MediaObject };

package/src/components/menubar.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import * as React from "react";
+import { Menubar } from "radix-ui";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const MenubarRoot = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Root>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Root>
+>(({ className, ...props }, ref) => (
+  <Menubar.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center gap-0.5 rounded-lg border border-taupe-100 bg-white px-1",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarRoot.displayName = "Menubar";
+
+const MenubarMenu = Menubar.Menu;
+
+const MenubarGroup = Menubar.Group;
+
+const MenubarSub = Menubar.Sub;
+
+const MenubarRadioGroup = Menubar.RadioGroup;
+
+const MenubarTrigger = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Trigger>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Trigger>
+>(({ className, ...props }, ref) => (
+  <Menubar.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-taupe-700 select-none outline-none",
+      "hover:bg-taupe-50",
+      "data-[state=open]:bg-taupe-100 data-[state=open]:text-taupe-900",
+      "focus:bg-taupe-50",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = "MenubarTrigger";
+
+const MenubarContent = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Content>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <Menubar.Portal>
+    <Menubar.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] bg-white rounded-xl shadow-natural p-1",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+        "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className,
+      )}
+      {...props}
+    />
+  </Menubar.Portal>
+));
+MenubarContent.displayName = "MenubarContent";
+
+const MenubarItem = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Item>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <Menubar.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = "MenubarItem";
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof Menubar.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof Menubar.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <Menubar.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <Menubar.ItemIndicator>
+        <Check size={13} className="text-taupe-900" />
+      </Menubar.ItemIndicator>
+    </span>
+    {children}
+  </Menubar.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
+
+const MenubarRadioItem = React.forwardRef<
+  React.ComponentRef<typeof Menubar.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof Menubar.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <Menubar.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+      <Menubar.ItemIndicator>
+        <Circle size={8} className="fill-taupe-900 text-taupe-900" />
+      </Menubar.ItemIndicator>
+    </span>
+    {children}
+  </Menubar.RadioItem>
+));
+MenubarRadioItem.displayName = "MenubarRadioItem";
+
+const MenubarLabel = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Label>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <Menubar.Label
+    ref={ref}
+    className={cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = "MenubarLabel";
+
+const MenubarSeparator = React.forwardRef<
+  React.ComponentRef<typeof Menubar.Separator>,
+  React.ComponentPropsWithoutRef<typeof Menubar.Separator>
+>(({ className, ...props }, ref) => (
+  <Menubar.Separator
+    ref={ref}
+    className={cn("mx-1 my-1 h-px bg-taupe-100", className)}
+    {...props}
+  />
+));
+MenubarSeparator.displayName = "MenubarSeparator";
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof Menubar.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof Menubar.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <Menubar.SubTrigger
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight size={14} className="ml-auto text-taupe-400" />
+  </Menubar.SubTrigger>
+));
+MenubarSubTrigger.displayName = "MenubarSubTrigger";
+
+const MenubarSubContent = React.forwardRef<
+  React.ComponentRef<typeof Menubar.SubContent>,
+  React.ComponentPropsWithoutRef<typeof Menubar.SubContent>
+>(({ className, ...props }, ref) => (
+  <Menubar.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = "MenubarSubContent";
+
+function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("ml-auto caption text-taupe-400", className)} {...props} />;
+}
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+  MenubarRoot as Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+  MenubarShortcut,
+  MenubarGroup,
+};

package/src/components/native-select.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const NativeSelect = React.forwardRef<
+  HTMLSelectElement,
+  React.SelectHTMLAttributes<HTMLSelectElement>
+>(({ className, children, ...props }, ref) => (
+  <div className="relative">
+    <select
+      ref={ref}
+      className={cn(
+        "peer h-9 w-full appearance-none rounded-lg border border-taupe-200 bg-white pl-3 pr-8",
+        "body text-taupe-900",
+        "focus:outline-none focus:ring-2 focus:ring-taupe-400/30 focus:border-taupe-400",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+    <ChevronDown
+      size={14}
+      className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-taupe-400 peer-disabled:opacity-50"
+    />
+  </div>
+));
+NativeSelect.displayName = "NativeSelect";
+
+const NativeSelectOption = React.forwardRef<
+  HTMLOptionElement,
+  React.OptionHTMLAttributes<HTMLOptionElement>
+>((props, ref) => <option ref={ref} {...props} />);
+NativeSelectOption.displayName = "NativeSelectOption";
+
+const NativeSelectOptGroup = React.forwardRef<
+  HTMLOptGroupElement,
+  React.OptgroupHTMLAttributes<HTMLOptGroupElement>
+>((props, ref) => <optgroup ref={ref} {...props} />);
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
+
+export { NativeSelect, NativeSelectOption, NativeSelectOptGroup };