@jcsoftdev/ui 0.1.6 → 0.2.0

package/dist/forms/emoji-picker/emoji-picker.d.ts

@@ -1,4 +1,6 @@
+import type { ClassNames } from "../../utils/class-names.js";
 import { type EmojiCategory } from "./emoji-data.js";
+export type EmojiPickerPart = "root" | "search" | "searchIcon" | "searchInput" | "categories" | "category" | "title" | "grid" | "emoji" | "empty";
 export interface EmojiPickerProps {
     onSelect?: (emoji: string) => void;
     /** Replaces the built-in dataset (`EMOJI_CATEGORIES`). */
@@ -7,10 +9,12 @@ export interface EmojiPickerProps {
     defaultCategory?: string;
     searchPlaceholder?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<EmojiPickerPart>;
 }
 /**
  * Emoji panel with search, category tabs and a keyboard-navigable grid (arrows, Home/End; Enter or
  * Space picks). The panel adapts to its container width and holds no portal, so it works inline or
  * inside a popover.
  */
-export declare function EmojiPicker({ onSelect, categories, defaultCategory, searchPlaceholder, className, }: EmojiPickerProps): import("react").JSX.Element;
+export declare function EmojiPicker({ onSelect, categories, defaultCategory, searchPlaceholder, className, classNames, }: EmojiPickerProps): import("react").JSX.Element;

package/dist/forms/emoji-picker/emoji-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Search } from "lucide-react";
 import { useId, useMemo, useRef, useState } from "react";
+import { Search } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { EMOJI_CATEGORIES } from "./emoji-data.js";
 import { gridMove, searchEmojis } from "./model.js";
@@ -10,7 +10,8 @@ function EmojiPicker({
   categories = EMOJI_CATEGORIES,
   defaultCategory,
   searchPlaceholder = "Buscar emoji",
-  className
+  className,
+  classNames
 }) {
   const baseId = useId();
   const grid = useRef(null);
@@ -44,16 +45,20 @@ function EmojiPicker({
     {
       className: cn(
         "@container/emoji flex w-full max-w-xs min-w-0 flex-col gap-density-sm rounded-popover border-card bg-surface-overlay p-card text-ink",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("label", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsxs("label", { className: cn("relative flex items-center", classNames?.search), children: [
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: searchPlaceholder }),
           /* @__PURE__ */ jsx(
             Search,
             {
               "aria-hidden": "true",
-              className: "pointer-events-none absolute left-2.5 size-3.5 text-ink-3"
+              className: cn(
+                "pointer-events-none absolute left-2.5 size-3.5 text-ink-3",
+                classNames?.searchIcon
+              )
             }
           ),
           /* @__PURE__ */ jsx(
@@ -66,27 +71,41 @@ function EmojiPicker({
                 setQuery(event.target.value);
                 setActive(0);
               },
-              className: "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-control text-ink placeholder:text-ink-3 focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1"
+              className: cn(
+                "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control pr-2 pl-8 text-control text-ink placeholder:text-ink-3 focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1",
+                classNames?.searchInput
+              )
             }
           )
         ] }),
-        searching ? null : /* @__PURE__ */ jsx("div", { role: "toolbar", "aria-label": "Categor\xEDas", className: "flex flex-wrap gap-0.5", children: categories.map((c) => /* @__PURE__ */ jsx(
-          "button",
+        searching ? null : /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            title: c.label,
-            "aria-label": c.label,
-            "aria-pressed": c.id === category?.id,
-            onClick: () => {
-              setCategoryId(c.id);
-              setActive(0);
-            },
-            className: "pressable grid size-8 place-items-center rounded-button text-base hover:bg-surface-sunken aria-pressed:bg-accent-soft focus-visible:focus-ring",
-            children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: c.icon })
-          },
-          c.id
-        )) }),
-        /* @__PURE__ */ jsx("p", { id: `${baseId}-title`, className: "text-ink-3 text-overline", children: searching ? `Resultados (${entries.length})` : category?.label }),
+            role: "toolbar",
+            "aria-label": "Categor\xEDas",
+            className: cn("flex flex-wrap gap-0.5", classNames?.categories),
+            children: categories.map((c) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                title: c.label,
+                "aria-label": c.label,
+                "aria-pressed": c.id === category?.id,
+                onClick: () => {
+                  setCategoryId(c.id);
+                  setActive(0);
+                },
+                className: cn(
+                  "pressable grid size-8 place-items-center rounded-button text-base hover:bg-surface-sunken aria-pressed:bg-accent-soft focus-visible:focus-ring",
+                  classNames?.category
+                ),
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: c.icon })
+              },
+              c.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { id: `${baseId}-title`, className: cn("text-ink-3 text-overline", classNames?.title), children: searching ? `Resultados (${entries.length})` : category?.label }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -94,7 +113,10 @@ function EmojiPicker({
             role: "group",
             "aria-labelledby": `${baseId}-title`,
             onKeyDown,
-            className: "grid max-h-48 gap-0.5 overflow-y-auto [grid-template-columns:repeat(auto-fill,minmax(2rem,1fr))]",
+            className: cn(
+              "grid max-h-48 gap-0.5 overflow-y-auto [grid-template-columns:repeat(auto-fill,minmax(2rem,1fr))]",
+              classNames?.grid
+            ),
             children: [
               entries.map((entry, index) => /* @__PURE__ */ jsx(
                 "button",
@@ -106,12 +128,21 @@ function EmojiPicker({
                   title: entry.name.split(" ").slice(0, 3).join(" "),
                   onFocus: () => setActive(index),
                   onClick: () => onSelect?.(entry.emoji),
-                  className: "pressable grid size-8 place-items-center rounded-button text-lg hover:bg-surface-sunken focus-visible:focus-ring",
+                  className: cn(
+                    "pressable grid size-8 place-items-center rounded-button text-lg hover:bg-surface-sunken focus-visible:focus-ring",
+                    classNames?.emoji
+                  ),
                   children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: entry.emoji })
                 },
                 entry.emoji
               )),
-              entries.length === 0 ? /* @__PURE__ */ jsx("p", { className: "col-span-full py-3 text-center text-ink-3 text-meta", children: "Sin resultados" }) : null
+              entries.length === 0 ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn("col-span-full py-3 text-center text-ink-3 text-meta", classNames?.empty),
+                  children: "Sin resultados"
+                }
+              ) : null
             ]
           }
         )

package/dist/forms/emoji-picker/index.d.ts

@@ -1,3 +1,3 @@
 export { EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry } from "./emoji-data.js";
-export { EmojiPicker, type EmojiPickerProps } from "./emoji-picker.js";
+export { EmojiPicker, type EmojiPickerPart, type EmojiPickerProps } from "./emoji-picker.js";
 export { gridMove, searchEmojis } from "./model.js";

package/dist/forms/emoji-reaction-button/emoji-reaction-button.d.ts

@@ -1,3 +1,5 @@
+import type { ClassNames } from "../../utils/class-names.js";
+export type EmojiReactionButtonPart = "root" | "emoji" | "count";
 export interface EmojiReactionButtonProps {
     emoji: string;
     count: number;
@@ -6,14 +8,17 @@ export interface EmojiReactionButtonProps {
     onToggle?: (reacted: boolean) => void;
     disabled?: boolean;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<EmojiReactionButtonPart>;
 }
 /** Reaction chip: an emoji with its count, pressed when the current user reacted. */
-export declare function EmojiReactionButton({ emoji, count, reacted, onToggle, disabled, className, }: EmojiReactionButtonProps): import("react").JSX.Element;
+export declare function EmojiReactionButton({ emoji, count, reacted, onToggle, disabled, className, classNames, }: EmojiReactionButtonProps): import("react").JSX.Element;
 export interface Reaction {
     emoji: string;
     count: number;
     reacted?: boolean;
 }
+export type EmojiReactionBarPart = "root" | "reaction" | "add" | "popover" | "picker";
 export interface EmojiReactionBarProps {
     reactions: Reaction[];
     /** Called with the emoji and the new reacted state, from a chip or from the picker. */
@@ -23,6 +28,8 @@ export interface EmojiReactionBarProps {
     addLabel?: string;
     disabled?: boolean;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<EmojiReactionBarPart>;
 }
 /** Row of reaction chips plus an "add reaction" button that opens an emoji picker. */
-export declare function EmojiReactionBar({ reactions, onReact, container, addLabel, disabled, className, }: EmojiReactionBarProps): import("react").JSX.Element;
+export declare function EmojiReactionBar({ reactions, onReact, container, addLabel, disabled, className, classNames, }: EmojiReactionBarProps): import("react").JSX.Element;

package/dist/forms/emoji-reaction-button/emoji-reaction-button.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { SmilePlus } from "lucide-react";
 import { useState } from "react";
+import { SmilePlus } from "../../icons/index.js";
+import * as PopoverPrimitive from "../../primitives/popover/popover.js";
 import { cn } from "../../utils/cn.js";
 import { EmojiPicker } from "../emoji-picker/emoji-picker.js";
 function EmojiReactionButton({
@@ -11,7 +11,8 @@ function EmojiReactionButton({
   reacted = false,
   onToggle,
   disabled,
-  className
+  className,
+  classNames
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
@@ -23,11 +24,12 @@ function EmojiReactionButton({
       onClick: () => onToggle?.(!reacted),
       className: cn(
         "pressable inline-flex h-control-sm items-center gap-1.5 rounded-badge border-control bg-surface-control px-2.5 text-control text-ink-2 tabular-nums hover:bg-surface-sunken focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-pressed:border-accent aria-pressed:bg-accent-soft aria-pressed:text-accent-ink",
+        classNames?.root,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: emoji }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: count })
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classNames?.emoji, children: emoji }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: classNames?.count, children: count })
       ]
     }
   );
@@ -38,18 +40,24 @@ function EmojiReactionBar({
   container,
   addLabel = "A\xF1adir reacci\xF3n",
   disabled,
-  className
+  className,
+  classNames
 }) {
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("@container/reactions flex flex-wrap items-center gap-density-sm", className),
+      className: cn(
+        "@container/reactions flex flex-wrap items-center gap-density-sm",
+        classNames?.root,
+        className
+      ),
       children: [
         reactions.map((reaction) => /* @__PURE__ */ jsx(
           EmojiReactionButton,
           {
             ...reaction,
+            className: classNames?.reaction,
             disabled,
             onToggle: (next) => onReact?.(reaction.emoji, next)
           },
@@ -61,7 +69,10 @@ function EmojiReactionBar({
             {
               disabled,
               "aria-label": addLabel,
-              className: "pressable grid aspect-square h-control-sm place-items-center rounded-badge border-control bg-surface-control text-ink-3 hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+              className: cn(
+                "pressable grid aspect-square h-control-sm place-items-center rounded-badge border-control bg-surface-control text-ink-3 hover:text-ink focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+                classNames?.add
+              ),
               children: /* @__PURE__ */ jsx(SmilePlus, { "aria-hidden": "true", className: "size-4" })
             }
           ),
@@ -70,11 +81,14 @@ function EmojiReactionBar({
             {
               sideOffset: 6,
               collisionPadding: 8,
-              className: "z-85 w-72 max-w-(--radix-popover-content-available-width) rounded-popover shadow-overlay",
+              className: cn(
+                "z-85 w-72 max-w-(--ui-popper-available-width) rounded-popover shadow-overlay",
+                classNames?.popover
+              ),
               children: /* @__PURE__ */ jsx(
                 EmojiPicker,
                 {
-                  className: "max-w-none surface-overlay",
+                  className: cn("max-w-none surface-overlay", classNames?.picker),
                   onSelect: (emoji) => {
                     const existing = reactions.find((r) => r.emoji === emoji);
                     onReact?.(emoji, !existing?.reacted);

package/dist/forms/emoji-reaction-button/index.d.ts

@@ -1 +1 @@
-export { EmojiReactionBar, type EmojiReactionBarProps, EmojiReactionButton, type EmojiReactionButtonProps, type Reaction, } from "./emoji-reaction-button.js";
+export { EmojiReactionBar, type EmojiReactionBarPart, type EmojiReactionBarProps, EmojiReactionButton, type EmojiReactionButtonPart, type EmojiReactionButtonProps, type Reaction, } from "./emoji-reaction-button.js";

package/dist/forms/field/field.d.ts

@@ -1,10 +1,12 @@
-import { type ReactElement } from "react";
+import { type ComponentPropsWithoutRef, type ReactElement } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 interface ControlProps {
     id?: string;
     "aria-describedby"?: string;
     "aria-invalid"?: boolean;
 }
-export interface FieldProps {
+export type FieldPart = "root" | "label" | "optional" | "hint" | "error";
+export interface FieldProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "id"> {
     label: string;
     hint?: string;
     /** Message under the control; `null` and `undefined` mean no error. */
@@ -13,7 +15,8 @@ export interface FieldProps {
     optional?: boolean;
     id?: string;
     children: ReactElement<ControlProps>;
-    className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<FieldPart>;
 }
-export declare function Field({ label, hint, error, optional, id, children, className }: FieldProps): import("react").JSX.Element;
+export declare function Field({ label, hint, error, optional, id, children, className, classNames, ...props }: FieldProps): import("react").JSX.Element;
 export {};

package/dist/forms/field/field.js

@@ -1,10 +1,24 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useId } from "react";
+import {
+  cloneElement,
+  isValidElement,
+  useId
+} from "react";
 import { useUiStrings } from "../../i18n/index.js";
 import { cn } from "../../utils/cn.js";
 import { Label } from "../label/index.js";
-function Field({ label, hint, error, optional, id, children, className }) {
+function Field({
+  label,
+  hint,
+  error,
+  optional,
+  id,
+  children,
+  className,
+  classNames,
+  ...props
+}) {
   const strings = useUiStrings();
   const generatedId = useId();
   const controlId = id ?? generatedId;
@@ -16,18 +30,27 @@ function Field({ label, hint, error, optional, id, children, className }) {
     "aria-describedby": describedBy,
     "aria-invalid": error ? true : void 0
   }) : children;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1.25", className), children: [
-    /* @__PURE__ */ jsxs(Label, { htmlFor: controlId, children: [
+  return /* @__PURE__ */ jsxs("div", { ...props, className: cn("flex min-w-0 flex-col gap-1.25", classNames?.root, className), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: controlId, className: classNames?.label, children: [
       label,
-      optional ? /* @__PURE__ */ jsxs("span", { className: "font-normal text-ink-3", children: [
-        " (",
+      optional ? /* @__PURE__ */ jsxs("span", { className: cn("font-normal text-ink-3", classNames?.optional), children: [
+        " ",
+        "(",
         strings.optional,
         ")"
       ] }) : null
     ] }),
     control,
-    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-meta text-ink-3", children: hint }) : null,
-    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "font-semibold text-danger text-meta", role: "alert", children: error }) : null
+    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: cn("text-meta text-ink-3", classNames?.hint), children: hint }) : null,
+    error ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        className: cn("font-semibold text-danger text-meta", classNames?.error),
+        role: "alert",
+        children: error
+      }
+    ) : null
   ] });
 }
 export {

package/dist/forms/field/index.d.ts

@@ -1 +1 @@
-export { Field, type FieldProps } from "./field.js";
+export { Field, type FieldPart, type FieldProps } from "./field.js";

package/dist/forms/inline-select/inline-select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronsUpDown } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function InlineSelect({ options, className, ...props }) {
   return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex max-w-full items-center rounded-chip hover:bg-surface-sunken has-[:focus-visible]:focus-ring", children: [

package/dist/forms/input-icon/index.d.ts

@@ -1 +1 @@
-export { InputIcon, type InputIconProps } from "./input-icon.js";
+export { InputIcon, type InputIconPart, type InputIconProps } from "./input-icon.js";

package/dist/forms/input-icon/input-icon.d.ts

@@ -1,7 +1,11 @@
 import type { ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 import { type InputProps } from "../input/index.js";
+export type InputIconPart = "root" | "icon" | "input";
 export interface InputIconProps extends InputProps {
-    /** Leading icon element (e.g. a lucide-react icon). */
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the input and is merged last. */
+    classNames?: ClassNames<InputIconPart>;
+    /** Leading icon element (e.g. an `@jcsoftdev/ui/icons` icon). */
     icon: ReactNode;
 }
-export declare function InputIcon({ icon, className, ...props }: InputIconProps): import("react").JSX.Element;
+export declare function InputIcon({ icon, className, classNames, ...props }: InputIconProps): import("react").JSX.Element;

package/dist/forms/input-icon/input-icon.js

@@ -1,17 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { Input } from "../input/index.js";
-function InputIcon({ icon, className, ...props }) {
-  return /* @__PURE__ */ jsxs("span", { className: "relative flex w-full items-center", children: [
+function InputIcon({ icon, className, classNames, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative flex w-full items-center", classNames?.root), children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         "aria-hidden": "true",
-        className: "pointer-events-none absolute left-2.5 flex text-ink-3 [&>svg]:size-4",
+        className: cn(
+          "pointer-events-none absolute left-2.5 flex text-ink-3 [&>svg]:size-4",
+          classNames?.icon
+        ),
         children: icon
       }
     ),
-    /* @__PURE__ */ jsx(Input, { className: cn("pl-8", className), ...props })
+    /* @__PURE__ */ jsx(Input, { className: cn("pl-8", classNames?.input, className), ...props })
   ] });
 }
 export {

package/dist/forms/internal/button-option.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
+export type ButtonOptionPart = "option" | "icon" | "text" | "label" | "description";
 export interface ButtonOption {
     value: string;
     label: ReactNode;
@@ -12,7 +14,8 @@ interface OptionShellProps {
     /** Visually hidden native input: gives focus, keyboard and form semantics for free. */
     input: ReactNode;
     className?: string;
+    classNames?: ClassNames<ButtonOptionPart>;
 }
 /** Selectable card-button around a native checkbox/radio; `peer` styling reads its checked state. */
-export declare function OptionShell({ option, input, className }: OptionShellProps): import("react").JSX.Element;
+export declare function OptionShell({ option, input, className, classNames }: OptionShellProps): import("react").JSX.Element;
 export {};

package/dist/forms/internal/button-option.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 const optionGridClass = "grid gap-density-sm [grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr))]";
-function OptionShell({ option, input, className }) {
+function OptionShell({ option, input, className, classNames }) {
   return (
     // biome-ignore lint/a11y/noLabelWithoutControl: the native input is passed in through `input` and rendered inside this label
     /* @__PURE__ */ jsxs(
@@ -9,14 +9,22 @@ function OptionShell({ option, input, className }) {
       {
         className: cn(
           "pressable relative flex min-w-0 cursor-pointer items-center gap-2 rounded-button border-control bg-surface-control px-control-x py-2 text-control text-ink has-[:checked]:border-accent has-[:checked]:bg-accent-soft has-[:checked]:shadow-selected has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 has-[:focus-visible]:focus-ring",
+          classNames?.option,
           className
         ),
         children: [
           input,
-          option.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 text-ink-2 [&_svg]:size-4", children: option.icon }) : null,
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col [overflow-wrap:anywhere]", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-semibold", children: option.label }),
-            option.description ? /* @__PURE__ */ jsx("span", { className: "text-ink-3 text-meta", children: option.description }) : null
+          option.icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("shrink-0 text-ink-2 [&_svg]:size-4", classNames?.icon),
+              children: option.icon
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-col [overflow-wrap:anywhere]", classNames?.text), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("font-semibold", classNames?.label), children: option.label }),
+            option.description ? /* @__PURE__ */ jsx("span", { className: cn("text-ink-3 text-meta", classNames?.description), children: option.description }) : null
           ] })
         ]
       }

package/dist/forms/native-select/index.d.ts

@@ -1 +1 @@
-export { NativeSelect, type NativeSelectGroup, type NativeSelectOption, type NativeSelectProps, } from "./native-select.js";
+export { NativeSelect, type NativeSelectGroup, type NativeSelectOption, type NativeSelectPart, type NativeSelectProps, } from "./native-select.js";

package/dist/forms/native-select/native-select.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentPropsWithoutRef } from "react";
+import type { ClassNames } from "../../utils/class-names.js";
 export interface NativeSelectOption {
     value: string;
     label: string;
@@ -8,6 +9,7 @@ export interface NativeSelectGroup {
     label: string;
     options: NativeSelectOption[];
 }
+export type NativeSelectPart = "root" | "select" | "icon";
 export interface NativeSelectProps extends Omit<ComponentPropsWithoutRef<"select">, "size"> {
     /** Data-driven alternative to `<option>` children; groups render as `<optgroup>`. */
     options?: (NativeSelectOption | NativeSelectGroup)[];
@@ -15,9 +17,11 @@ export interface NativeSelectProps extends Omit<ComponentPropsWithoutRef<"select
     placeholder?: string;
     size?: "sm" | "md";
     invalid?: boolean;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the `<select>` and is merged last. */
+    classNames?: ClassNames<NativeSelectPart>;
 }
 /**
  * Styled native `<select>` (keeps the system picker on touch devices). It extends the existing
  * `Select` styling with a data-driven `options` API, optgroups, a placeholder and a compact size.
  */
-export declare function NativeSelect({ options, placeholder, size, invalid, className, children, defaultValue, value, ...props }: NativeSelectProps): import("react").JSX.Element;
+export declare function NativeSelect({ options, placeholder, size, invalid, className, classNames, children, defaultValue, value, ...props }: NativeSelectProps): import("react").JSX.Element;

package/dist/forms/native-select/native-select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 function isGroup(item) {
   return "options" in item;
@@ -10,13 +10,14 @@ function NativeSelect({
   size = "md",
   invalid,
   className,
+  classNames,
   children,
   defaultValue,
   value,
   ...props
 }) {
   const fallbackDefault = placeholder && value === void 0 && defaultValue === void 0 ? "" : defaultValue;
-  return /* @__PURE__ */ jsxs("span", { className: "relative flex w-full min-w-0 items-center", children: [
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative flex w-full min-w-0 items-center", classNames?.root), children: [
     /* @__PURE__ */ jsxs(
       "select",
       {
@@ -26,6 +27,7 @@ function NativeSelect({
         className: cn(
           "w-full min-w-0 appearance-none rounded-input border-control bg-surface-control py-0 pl-3 text-control text-ink focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-danger",
           size === "sm" ? "h-control-sm pr-7" : "h-input pr-8",
+          classNames?.select,
           className
         ),
         ...props,
@@ -42,7 +44,10 @@ function NativeSelect({
       ChevronDown,
       {
         "aria-hidden": "true",
-        className: "pointer-events-none absolute right-2.5 size-3.5 text-ink-3"
+        className: cn(
+          "pointer-events-none absolute right-2.5 size-3.5 text-ink-3",
+          classNames?.icon
+        )
       }
     )
   ] });

package/dist/forms/number-stepper/index.d.ts

@@ -1 +1 @@
-export { NumberStepper, type NumberStepperProps } from "./number-stepper.js";
+export { NumberStepper, type NumberStepperPart, type NumberStepperProps, } from "./number-stepper.js";

package/dist/forms/number-stepper/index.js

@@ -1,4 +1,6 @@
-import { NumberStepper } from "./number-stepper.js";
+import {
+  NumberStepper
+} from "./number-stepper.js";
 export {
   NumberStepper
 };

package/dist/forms/number-stepper/number-stepper.d.ts

@@ -1,3 +1,5 @@
+import type { ClassNames } from "../../utils/class-names.js";
+export type NumberStepperPart = "root" | "decrement" | "increment" | "input" | "unit";
 export interface NumberStepperProps {
     value?: number;
     defaultValue?: number;
@@ -12,6 +14,8 @@ export interface NumberStepperProps {
     "aria-label"?: string;
     "aria-labelledby"?: string;
     className?: string;
+    /** Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last. */
+    classNames?: ClassNames<NumberStepperPart>;
 }
 /** Counter with minus/plus buttons and a typeable value; ArrowUp/ArrowDown step it, Home/End jump. */
-export declare function NumberStepper({ value: valueProp, defaultValue, onValueChange, min, max, step, disabled, unit, name, className, ...aria }: NumberStepperProps): import("react").JSX.Element;
+export declare function NumberStepper({ value: valueProp, defaultValue, onValueChange, min, max, step, disabled, unit, name, className, classNames, ...aria }: NumberStepperProps): import("react").JSX.Element;