@jcsoftdev/ui 0.1.7 → 0.2.0

package/dist/atoms/avatar/avatar.js

@@ -1,7 +1,42 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { useEffect, useState } from "react";
 import { cn } from "../../utils/cn.js";
+function useImageStatus(src) {
+  const [status, setStatus] = useState("idle");
+  useEffect(() => {
+    if (!src) {
+      setStatus("error");
+      return;
+    }
+    const image = new window.Image();
+    const settle = () => setStatus(image.complete ? image.naturalWidth > 0 ? "loaded" : "error" : "loading");
+    const onError = () => setStatus("error");
+    image.addEventListener("load", settle);
+    image.addEventListener("error", onError);
+    image.src = src;
+    settle();
+    return () => {
+      image.removeEventListener("load", settle);
+      image.removeEventListener("error", onError);
+      setStatus("idle");
+    };
+  }, [src]);
+  return status;
+}
+function useDelayElapsed(delayMs) {
+  const [elapsed, setElapsed] = useState(delayMs === void 0);
+  useEffect(() => {
+    if (delayMs === void 0) {
+      setElapsed(true);
+      return;
+    }
+    setElapsed(false);
+    const timer = window.setTimeout(() => setElapsed(true), delayMs);
+    return () => window.clearTimeout(timer);
+  }, [delayMs]);
+  return elapsed;
+}
 function initials(name) {
   const words = name.trim().split(/\s+/).filter(Boolean);
   if (words.length === 1) {
@@ -12,24 +47,36 @@ function initials(name) {
   return `${first}${last}`.toUpperCase();
 }
 const sizeClasses = {
-  md: "size-[26px] text-[10px]",
-  lg: "size-8 text-[11px]"
+  md: "size-6.5 text-fs-100",
+  lg: "size-8 text-fs-110"
 };
-function Avatar({ name, src, size = "md", highlighted, className }) {
+function Avatar({
+  name,
+  src,
+  size = "md",
+  highlighted,
+  className,
+  classNames,
+  ...props
+}) {
+  const status = useImageStatus(src);
+  const delayElapsed = useDelayElapsed(src ? 400 : void 0);
   return /* @__PURE__ */ jsxs(
-    AvatarPrimitive.Root,
+    "span",
     {
       role: "img",
       "aria-label": name,
+      ...props,
       className: cn(
         "inline-grid shrink-0 place-items-center overflow-hidden rounded-avatar font-bold tracking-[.02em]",
         highlighted ? "bg-accent text-on-accent" : "bg-sunken text-ink-2",
         sizeClasses[size],
+        classNames?.root,
         className
       ),
       children: [
-        src ? /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt: "" }) : null,
-        /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { "aria-hidden": "true", delayMs: src ? 400 : void 0, children: initials(name) })
+        src && status === "loaded" ? /* @__PURE__ */ jsx("img", { src, alt: "", className: classNames?.image }) : null,
+        delayElapsed && status !== "loaded" ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classNames?.fallback, children: initials(name) }) : null
       ]
     }
   );

package/dist/atoms/avatar/index.d.ts

@@ -1 +1 @@
-export { Avatar, type AvatarProps, type AvatarSize } from "./avatar.js";
+export { Avatar, type AvatarPart, type AvatarProps, type AvatarSize } from "./avatar.js";

package/dist/atoms/avatar-group/avatar-group.d.ts

@@ -1,7 +1,4 @@
-import type { ReactNode } from "react";
-export interface AvatarGroupProps {
-    children?: ReactNode;
-    className?: string;
-}
+import type { ComponentPropsWithRef } from "react";
+export type AvatarGroupProps = ComponentPropsWithRef<"div">;
 /** Stacked, overlapping avatars separated by a surface-colored ring. */
-export declare function AvatarGroup({ children, className }: AvatarGroupProps): import("react").JSX.Element;
+export declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;

package/dist/atoms/avatar-group/avatar-group.js

@@ -1,7 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-function AvatarGroup({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className), children });
+function AvatarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className)
+    }
+  );
 }
 export {
   AvatarGroup

package/dist/atoms/big-date/big-date.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 const sizeClasses = {
-  normal: "text-[30px]",
-  compact: "text-[22px]"
+  normal: "text-fs-300",
+  compact: "text-fs-220"
 };
 function BigDate({ size = "normal", className, ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/atoms/button/button.d.ts

@@ -1,6 +1,24 @@
 import { type ComponentPropsWithRef } from "react";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Class map behind each `variant`. Exported so apps can read, extend or reuse it, e.g.
+ * `cn(buttonVariantClasses.primary, "bg-brand")` on a link, or `{ ...buttonVariantClasses, brand: "..." }`.
+ */
+export declare const buttonVariantClasses: Readonly<Record<ButtonVariant, string>>;
+/** Class map behind each `size`; exported like {@link buttonVariantClasses}. */
+export declare const buttonSizeClasses: Readonly<Record<ButtonSize, string>>;
+export interface ButtonClassOptions {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    block?: boolean;
+    className?: string;
+}
+/**
+ * The exact classes `<Button>` renders, merged with `cn` so `className` wins. Use it to give any
+ * element (a router link, a menu item) the kit's button look without wrapping it in `<Button>`.
+ */
+export declare function buttonClasses({ variant, size, block, className, }?: ButtonClassOptions): string;
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -9,7 +27,7 @@ export interface ButtonProps extends ComponentPropsWithRef<"button"> {
     loadingLabel?: string;
     /** Stretch to the full width of the container. */
     block?: boolean;
-    /** Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. */
+    /** Render the child element (via Slot) instead of a `<button>`, e.g. a link. */
     asChild?: boolean;
 }
 export declare function Button({ variant, size, loading, loadingLabel, block, disabled, asChild, className, children, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/atoms/button/button.js

@@ -1,23 +1,38 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Slot } from "@radix-ui/react-slot";
 import {
   Children,
   Fragment as Fragment2,
   isValidElement
 } from "react";
 import { cn } from "../../utils/cn.js";
-const variantClasses = {
+import { Slot } from "../../utils/slot.js";
+const buttonVariantClasses = {
   primary: "bg-accent text-on-accent font-bold hover:bg-accent-ink",
   secondary: "bg-surface-control text-ink shadow-control hover:bg-surface-2",
   ghost: "bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink",
   danger: "bg-danger-soft text-danger hover:bg-danger-soft/70"
 };
-const sizeClasses = {
-  sm: "h-control-sm px-3 text-[12.5px] [&_svg]:size-3.5",
-  md: "h-control px-control-x text-[13px]",
-  lg: "h-control-lg px-control-x text-[14px]"
+const buttonSizeClasses = {
+  sm: "h-control-sm px-3 text-fs-125 [&_svg]:size-3.5",
+  md: "h-control px-control-x text-fs-130",
+  lg: "h-control-lg px-control-x text-fs-140"
 };
+const baseClasses = "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0";
+function buttonClasses({
+  variant = "secondary",
+  size = "md",
+  block,
+  className
+} = {}) {
+  return cn(
+    baseClasses,
+    buttonVariantClasses[variant],
+    buttonSizeClasses[size],
+    block && "flex w-full",
+    className
+  );
+}
 function Button({
   variant = "secondary",
   size = "md",
@@ -39,13 +54,7 @@ function Button({
       ...asChild ? {} : { type: "button" },
       "aria-busy": loading ? "true" : void 0,
       disabled: disabled || loading,
-      className: cn(
-        "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0",
-        variantClasses[variant],
-        sizeClasses[size],
-        block && "flex w-full",
-        className
-      ),
+      className: buttonClasses({ variant, size, block, className }),
       ...props,
       children: content
     }
@@ -66,5 +75,8 @@ function labelRun(child) {
   return child;
 }
 export {
-  Button
+  Button,
+  buttonClasses,
+  buttonSizeClasses,
+  buttonVariantClasses
 };

package/dist/atoms/button/index.d.ts

@@ -1 +1 @@
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./button.js";
+export { Button, type ButtonClassOptions, type ButtonProps, type ButtonSize, type ButtonVariant, buttonClasses, buttonSizeClasses, buttonVariantClasses, } from "./button.js";

package/dist/atoms/button/index.js

@@ -1,6 +1,12 @@
 import {
-  Button
+  Button,
+  buttonClasses,
+  buttonSizeClasses,
+  buttonVariantClasses
 } from "./button.js";
 export {
-  Button
+  Button,
+  buttonClasses,
+  buttonSizeClasses,
+  buttonVariantClasses
 };

package/dist/atoms/checkbox/checkbox.d.ts

@@ -1,5 +1,17 @@
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import type { ComponentPropsWithoutRef } from "react";
-export interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+import { type ComponentProps } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type CheckedState = boolean | "indeterminate";
+export type CheckboxPart = "root" | "box" | "indicator" | "icon";
+export interface CheckboxProps extends Omit<ComponentProps<"button">, "value" | "defaultValue" | "checked" | "defaultChecked" | "children"> {
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<CheckboxPart>;
+    checked?: CheckedState;
+    defaultChecked?: CheckedState;
+    onCheckedChange?: (checked: CheckedState) => void;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    /** Id of the `<form>` the checkbox belongs to when it is rendered outside it. */
+    form?: string;
 }
-export declare function Checkbox({ className, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ className, classNames, checked: checkedProp, defaultChecked, onCheckedChange, required, disabled, name, value, form, onClick, onKeyDown, ref, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/atoms/checkbox/checkbox.js

@@ -1,20 +1,108 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Check } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
-function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    {
-      className: cn(
-        "group inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong group-data-[state=checked]:border-success group-data-[state=checked]:bg-success group-data-[state=indeterminate]:border-success group-data-[state=indeterminate]:bg-success", children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-[11px] stroke-[3] text-on-accent" }) }) })
-    }
-  );
+import { composeHandlers, useComposedRefs } from "../../utils/compose.js";
+import { BubbleInput, useFormBubble, useFormReset } from "../../utils/form-bubble.js";
+import { useControllableState } from "../../utils/use-controllable-state.js";
+function getState(checked) {
+  return checked === "indeterminate" ? "indeterminate" : checked ? "checked" : "unchecked";
+}
+function Checkbox({
+  className,
+  classNames,
+  checked: checkedProp,
+  defaultChecked,
+  onCheckedChange,
+  required,
+  disabled,
+  name,
+  value = "on",
+  form,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const [checked, setChecked] = useControllableState({
+    prop: checkedProp,
+    defaultProp: defaultChecked ?? false,
+    onChange: onCheckedChange
+  });
+  const bubble = useFormBubble(form);
+  const initialRef = useRef(checked);
+  useFormReset(bubble.control, form, () => setChecked(initialRef.current));
+  const composedRef = useComposedRefs(ref, bubble.setControl);
+  const state = getState(checked);
+  const disabledAttr = disabled ? "" : void 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": checked === "indeterminate" ? "mixed" : checked,
+        "aria-required": required,
+        "data-state": state,
+        "data-disabled": disabledAttr,
+        disabled,
+        value,
+        ...props,
+        ref: composedRef,
+        className: cn(
+          "group inline-flex size-10 shrink-0 items-center justify-center in-data-[density=touch]:size-11",
+          classNames?.root,
+          className
+        ),
+        onKeyDown: composeHandlers(onKeyDown, (event) => {
+          if (event.key === "Enter") event.preventDefault();
+        }),
+        onClick: composeHandlers(onClick, (event) => {
+          setChecked((prev) => prev === "indeterminate" ? true : !prev);
+          bubble.onControlClick(event);
+        }),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "grid size-4.5 place-items-center rounded-pill border-[1.5px] border-line-strong group-data-[state=checked]:border-success group-data-[state=checked]:bg-success group-data-[state=indeterminate]:border-success group-data-[state=indeterminate]:bg-success",
+              classNames?.box
+            ),
+            children: checked === false ? null : /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-state": state,
+                "data-disabled": disabledAttr,
+                style: { pointerEvents: "none" },
+                className: classNames?.indicator,
+                children: /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    "aria-hidden": "true",
+                    className: cn("size-2.75 stroke-[3] text-on-accent", classNames?.icon)
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    bubble.isFormControl ? /* @__PURE__ */ jsx(
+      BubbleInput,
+      {
+        type: "checkbox",
+        checked,
+        bubble,
+        name,
+        value,
+        required,
+        disabled,
+        form
+      }
+    ) : null
+  ] });
 }
 export {
   Checkbox

package/dist/atoms/checkbox/index.d.ts

@@ -1 +1 @@
-export { Checkbox, type CheckboxProps } from "./checkbox.js";
+export { Checkbox, type CheckboxPart, type CheckboxProps, type CheckedState } from "./checkbox.js";

package/dist/atoms/chip/chip.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export type ChipTone = "neutral" | "danger" | "warning" | "success" | "accent" | "info" | "solid" | "outline";
+/** Class map behind each `tone`; exported so apps can extend or reuse it. */
+export declare const chipToneClasses: Readonly<Record<ChipTone, string>>;
 export interface ChipProps extends ComponentPropsWithoutRef<"span"> {
     tone?: ChipTone;
     /** Use the smaller chip radius instead of a full pill. */

package/dist/atoms/chip/chip.js

@@ -1,7 +1,7 @@
 import { jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { statusIcon } from "../internal/status-icons.js";
-const toneClasses = {
+const chipToneClasses = {
   neutral: "bg-surface-2 text-ink-2",
   danger: "bg-danger-soft text-danger",
   warning: "bg-warning-soft text-warning",
@@ -27,9 +27,9 @@ function Chip({
     "span",
     {
       className: cn(
-        "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-[12px] leading-none [&_svg]:size-3",
+        "inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap px-2.5 font-[650] text-fs-120 leading-none [&_svg]:size-3",
         square ? "rounded-chip" : "rounded-badge",
-        toneClasses[tone],
+        chipToneClasses[tone],
         interactive && "in-data-[density=touch]:min-h-11",
         className
       ),
@@ -42,5 +42,6 @@ function Chip({
   );
 }
 export {
-  Chip
+  Chip,
+  chipToneClasses
 };

package/dist/atoms/chip/index.d.ts

@@ -1 +1 @@
-export { Chip, type ChipProps, type ChipTone } from "./chip.js";
+export { Chip, type ChipProps, type ChipTone, chipToneClasses } from "./chip.js";

package/dist/atoms/chip/index.js

@@ -1,4 +1,5 @@
-import { Chip } from "./chip.js";
+import { Chip, chipToneClasses } from "./chip.js";
 export {
-  Chip
+  Chip,
+  chipToneClasses
 };

package/dist/atoms/icon/icon-map.d.ts

@@ -1,42 +1,42 @@
-import { type LucideIcon } from "lucide-react";
-/** Optional name registry for `<Icon name>`. Pass any lucide component via `icon` to bypass it. */
+import { AlertTriangle, ArrowRight, BarChart3, Bell, BookOpen, Calculator, Calendar, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, Clock, Coins, Columns3, Copy, Download, ExternalLink, FileText, Folder, LayoutGrid, List, ListChecks, Lock, Menu, MessageSquare, PenLine, Plus, RefreshCw, Search, Shield, SlidersHorizontal, Sparkles, Upload, Users, Video, X } from "../../icons/index.js";
+/** Optional name registry for `<Icon name>`. Pass any icon component via `icon` to bypass it. */
 export declare const icons: {
-    grid: LucideIcon;
-    calendar: LucideIcon;
-    folder: LucideIcon;
-    users: LucideIcon;
-    pen: LucideIcon;
-    file: LucideIcon;
-    coin: LucideIcon;
-    shield: LucideIcon;
-    calculator: LucideIcon;
-    sync: LucideIcon;
-    sliders: LucideIcon;
-    search: LucideIcon;
-    bell: LucideIcon;
-    plus: LucideIcon;
-    "chevron-down": LucideIcon;
-    "chevron-left": LucideIcon;
-    "chevron-right": LucideIcon;
-    check: LucideIcon;
-    alert: LucideIcon;
-    close: LucideIcon;
-    menu: LucideIcon;
-    clock: LucideIcon;
-    sparkles: LucideIcon;
-    camera: LucideIcon;
-    lock: LucideIcon;
-    download: LucideIcon;
-    upload: LucideIcon;
-    list: LucideIcon;
-    columns: LucideIcon;
-    copy: LucideIcon;
-    arrow: LucideIcon;
-    message: LucideIcon;
-    tasks: LucideIcon;
-    chart: LucideIcon;
-    book: LucideIcon;
-    external: LucideIcon;
-    video: LucideIcon;
+    grid: typeof LayoutGrid;
+    calendar: typeof Calendar;
+    folder: typeof Folder;
+    users: typeof Users;
+    pen: typeof PenLine;
+    file: typeof FileText;
+    coin: typeof Coins;
+    shield: typeof Shield;
+    calculator: typeof Calculator;
+    sync: typeof RefreshCw;
+    sliders: typeof SlidersHorizontal;
+    search: typeof Search;
+    bell: typeof Bell;
+    plus: typeof Plus;
+    "chevron-down": typeof ChevronDown;
+    "chevron-left": typeof ChevronLeft;
+    "chevron-right": typeof ChevronRight;
+    check: typeof Check;
+    alert: typeof AlertTriangle;
+    close: typeof X;
+    menu: typeof Menu;
+    clock: typeof Clock;
+    sparkles: typeof Sparkles;
+    camera: typeof Camera;
+    lock: typeof Lock;
+    download: typeof Download;
+    upload: typeof Upload;
+    list: typeof List;
+    columns: typeof Columns3;
+    copy: typeof Copy;
+    arrow: typeof ArrowRight;
+    message: typeof MessageSquare;
+    tasks: typeof ListChecks;
+    chart: typeof BarChart3;
+    book: typeof BookOpen;
+    external: typeof ExternalLink;
+    video: typeof Video;
 };
 export type IconName = keyof typeof icons;

package/dist/atoms/icon/icon-map.js

@@ -36,7 +36,7 @@ import {
   Users,
   Video,
   X
-} from "lucide-react";
+} from "../../icons/index.js";
 const icons = {
   grid: LayoutGrid,
   calendar: Calendar,

package/dist/atoms/icon/icon.d.ts

@@ -1,12 +1,11 @@
-import type { LucideIcon } from "lucide-react";
+import type { IconComponent, IconProps as SvgIconProps } from "../../icons/index.js";
 import { type IconName } from "./icon-map.js";
-export interface IconProps {
+export interface IconProps extends Omit<SvgIconProps, "children"> {
     /** Registry name; ignored when `icon` is provided. */
     name?: IconName;
-    /** Any lucide icon component. */
-    icon?: LucideIcon;
+    /** Any icon component (see `@jcsoftdev/ui/icons`). */
+    icon?: IconComponent;
     /** Accessible label. Without it the icon is decorative (aria-hidden). */
     label?: string;
-    className?: string;
 }
-export declare function Icon({ name, icon, label, className }: IconProps): import("react").JSX.Element | null;
+export declare function Icon({ name, icon, label, ...props }: IconProps): import("react").JSX.Element | null;

package/dist/atoms/icon/icon.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { icons } from "./icon-map.js";
-function Icon({ name, icon, label, className }) {
+function Icon({ name, icon, label, ...props }) {
   const Component = icon ?? (name ? icons[name] : void 0);
   if (!Component) return null;
   if (label) {
-    return /* @__PURE__ */ jsx(Component, { className, role: "img", "aria-label": label, strokeWidth: 1.8 });
+    return /* @__PURE__ */ jsx(Component, { strokeWidth: 1.8, ...props, role: "img", "aria-label": label });
   }
-  return /* @__PURE__ */ jsx(Component, { className, "aria-hidden": "true", strokeWidth: 1.8 });
+  return /* @__PURE__ */ jsx(Component, { strokeWidth: 1.8, ...props, "aria-hidden": "true" });
 }
 export {
   Icon

package/dist/atoms/internal/status-icons.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "../../icons/index.js";
 const icons = {
   info: Info,
   success: CircleCheck,

package/dist/atoms/led/index.d.ts

@@ -1 +1 @@
-export { Led, type LedProps, type LedStatus } from "./led.js";
+export { Led, type LedPart, type LedProps, type LedStatus } from "./led.js";

package/dist/atoms/led/led.d.ts

@@ -1,9 +1,13 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export type LedStatus = "success" | "warning" | "danger" | "idle";
-export interface LedProps {
+export type LedPart = "root" | "dot" | "label";
+export interface LedProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
     status?: LedStatus;
     /** Text describing the status: color is never the only signal. */
     label: string;
     showLabel?: boolean;
-    className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<LedPart>;
 }
-export declare function Led({ status, label, showLabel, className }: LedProps): import("react").JSX.Element;
+export declare function Led({ status, label, showLabel, className, classNames, ...props }: LedProps): import("react").JSX.Element;