najm-kit 2.11.5 → 2.11.7

package/CHANGELOG.md

@@ -1,44 +1,69 @@
-# Changelog
-
-## 2.11.5 - 2026-08-14
-
-- Fixed numbered lists staying on an invalid final page after a deletion or
-  another mutation reduced the server total. Paged lists now clamp before
-  slicing their row buffer, render the previous valid page immediately, and
-  reconcile the controlled pagination state without showing a false empty
-  state. A genuinely empty result still remains on page one.
-- Fixed panel feedback states stretching their icon, copy, and action across
-  separate grid rows in tall table and dialog bodies. Panel content now stays
-  together in one centered vertical stack with consistent spacing.
-
-## 2.11.4 - 2026-08-12
-
-- Fixed server-paginated card grids briefly rendering at a placeholder-derived
-  page size before correcting to the real card height. Card mode now waits for
-  real rows and publishes the measured fit before their first paint; fixed-row
-  table sizing remains immediate during loading.
-
-## 2.11.3 - 2026-08-12
-
-- Fixed `NTable` replacing or clipping an explicit Rows/page choice when
-  `dynamicHeight` was enabled. Automatic fit sizing still owns the initial page
-  size; after the reader chooses a value, the table preserves it and scrolls
-  its bounded body when the requested rows exceed the measured fit.
-
-## 2.11.2 - 2026-08-11
-
-- Fixed `PasswordInput` forwarding native input attributes such as generated
-  form IDs and ARIA metadata to the actual `<input>`, restoring programmatic
-  label association for assistive technology and browser automation.
-
-## 2.11.1 - 2026-08-11
-
-- Fixed `NajmThemeProvider` precedence so an explicit runtime `mode` overrides
-  a preset stored in the design config. An explicit `preset` prop still wins,
-  allowing deliberately fixed-preset subtrees without producing mixed light
-  and dark application surfaces.
-
-## 2.11.0 - 2026-08-10
+# Changelog
+
+## 2.11.7 - 2026-08-17
+
+- Fixed date, combobox, and multiselect `FormInput` controls reaching the
+  accessibility tree with no accessible name. These types render their trigger
+  as a styled `div`, so the `<label for>` that `FormControl` wires up pointed at
+  a non-labelable element and named nothing: screen readers announced an unnamed
+  control, and `getByRole(..., { name })` could not resolve one. The form label
+  now becomes the trigger's `aria-label`, and `DateInput` and `ComboboxInput`
+  accept an explicit `ariaLabel` to override it. `select` keeps naming itself
+  from `ariaLabel || placeholder`; renaming it would break consumers that select
+  it by placeholder today.
+- Fixed `DateInput` rendering its popover trigger as a `div`. Radix only merges
+  trigger props onto the child, so the control had no role, no tab stop, and no
+  keyboard activation — it was unreachable without a mouse. It is now a real
+  `<button type="button">`, which also keeps it from submitting the surrounding
+  form when the calendar opens.
+
+## 2.11.6 - 2026-08-15
+
+- Fixed `FormInput` dropping React Hook Form's native field binding for text,
+  number, password, textarea, and time controls. These controls now forward
+  their field name, composed blur handler, and focus ref to the actual native
+  element, preserving browser form semantics, touched-state tracking, and
+  programmatic focus without changing composite-control contracts.
+
+## 2.11.5 - 2026-08-14
+
+- Fixed numbered lists staying on an invalid final page after a deletion or
+  another mutation reduced the server total. Paged lists now clamp before
+  slicing their row buffer, render the previous valid page immediately, and
+  reconcile the controlled pagination state without showing a false empty
+  state. A genuinely empty result still remains on page one.
+- Fixed panel feedback states stretching their icon, copy, and action across
+  separate grid rows in tall table and dialog bodies. Panel content now stays
+  together in one centered vertical stack with consistent spacing.
+
+## 2.11.4 - 2026-08-12
+
+- Fixed server-paginated card grids briefly rendering at a placeholder-derived
+  page size before correcting to the real card height. Card mode now waits for
+  real rows and publishes the measured fit before their first paint; fixed-row
+  table sizing remains immediate during loading.
+
+## 2.11.3 - 2026-08-12
+
+- Fixed `NTable` replacing or clipping an explicit Rows/page choice when
+  `dynamicHeight` was enabled. Automatic fit sizing still owns the initial page
+  size; after the reader chooses a value, the table preserves it and scrolls
+  its bounded body when the requested rows exceed the measured fit.
+
+## 2.11.2 - 2026-08-11
+
+- Fixed `PasswordInput` forwarding native input attributes such as generated
+  form IDs and ARIA metadata to the actual `<input>`, restoring programmatic
+  label association for assistive technology and browser automation.
+
+## 2.11.1 - 2026-08-11
+
+- Fixed `NajmThemeProvider` precedence so an explicit runtime `mode` overrides
+  a preset stored in the design config. An explicit `preset` prop still wins,
+  allowing deliberately fixed-preset subtrees without producing mixed light
+  and dark application surfaces.
+
+## 2.11.0 - 2026-08-10
 
 - Gave every keyboard-focusable primitive a visible focus ring, from one shared
   source: `focusRingClasses` and `focusRingWithinClasses`, exported from the

package/README.md

@@ -725,14 +725,14 @@ keyboard focus always reveals the action. Applications still decide which menu
 items exist through `menu`, `onView`, `onEdit`, and `onDelete`; visibility does
 not grant an action or replace server authorization.
 
-When `dynamicHeight` is enabled, table and card loading skeletons measure the
-available body. Table rows use the same header/row geometry as dynamic page
-sizing, while cards measure the active grid columns, card height, and gap. The
-loading surface also follows the loaded `bordered`, design recipe, radius,
-border color, shadow, and `classNames.content`/`classNames.cards` contract.
-The measured fit owns the initial page size. Once a reader explicitly chooses
-Rows/page, `NTable` preserves that choice and scrolls the bounded table body
-when the requested rows exceed the available height.
+When `dynamicHeight` is enabled, table and card loading skeletons measure the
+available body. Table rows use the same header/row geometry as dynamic page
+sizing, while cards measure the active grid columns, card height, and gap. The
+loading surface also follows the loaded `bordered`, design recipe, radius,
+border color, shadow, and `classNames.content`/`classNames.cards` contract.
+The measured fit owns the initial page size. Once a reader explicitly chooses
+Rows/page, `NTable` preserves that choice and scrolls the bounded table body
+when the requested rows exceed the available height.
 
 Use `cardPagination` to choose pagination presentation whenever the effective
 rendered mode is cards:

package/dist/index.d.ts

@@ -535,9 +535,9 @@ declare namespace NIndicator {
 }
 declare const Indicator: typeof NIndicator;
 
-declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
-declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+declare const Textarea: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React$1.RefAttributes<HTMLTextAreaElement>>;
 
 declare function Label({ className, ...props }: React$1.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
 
@@ -2184,19 +2184,14 @@ interface SelectItemType {
         className?: string;
     }>;
 }
-interface TextInputProps extends BaseProps {
+interface TextInputProps extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onChange" | "placeholder" | "type" | "value"> {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
     icon?: InputIcon;
     showIcon?: boolean;
-    disabled?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
-interface NumberInputProps extends BaseProps {
+interface NumberInputProps extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onChange" | "placeholder" | "type" | "value"> {
     value: string | number;
     onChange: (value: number) => void;
     placeholder?: string;
@@ -2210,7 +2205,7 @@ interface PasswordInputProps extends BaseProps, Omit<InputHTMLAttributes<HTMLInp
     icon?: InputIcon;
     showIcon?: boolean;
 }
-interface TextAreaInputProps extends BaseProps {
+interface TextAreaInputProps extends BaseProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "onChange" | "placeholder" | "value"> {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -2243,6 +2238,7 @@ interface ComboboxInputProps extends BaseProps {
     showIcon?: boolean;
     disabled?: boolean;
     allowFreeText?: boolean;
+    ariaLabel?: string;
 }
 interface MultiSelectInputProps extends BaseProps {
     value: string[];
@@ -2299,6 +2295,7 @@ interface DateInputProps extends BaseProps {
     placeholder?: string;
     icon?: InputIcon;
     showIcon?: boolean;
+    ariaLabel?: string;
 }
 interface StarRatingInputProps extends BaseProps {
     value: number;
@@ -2320,7 +2317,7 @@ interface ColorPickerInputProps extends ColorArrayInputProps {
     output?: ColorFormat | "preserve";
     hideSwatches?: boolean;
 }
-interface TimeInputProps extends BaseProps {
+interface TimeInputProps extends BaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "className" | "onChange" | "placeholder" | "type" | "value"> {
     value?: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -2328,7 +2325,6 @@ interface TimeInputProps extends BaseProps {
     showIcon?: boolean;
     format24?: boolean;
     showSeconds?: boolean;
-    disabled?: boolean;
 }
 interface TimeZoneInputProps extends Omit<ComboboxInputProps, "items"> {
     items?: SelectItemType[];
@@ -2458,16 +2454,16 @@ interface BaseInputProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 declare const BaseInput: React__default.ForwardRefExoticComponent<BaseInputProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const TextInput: React__default.FC<TextInputProps>;
+declare const TextInput: React__default.ForwardRefExoticComponent<TextInputProps & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const NumberInput: React__default.FC<NumberInputProps>;
+declare const NumberInput: React__default.ForwardRefExoticComponent<NumberInputProps & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const PasswordInput: React__default.FC<PasswordInputProps>;
+declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /** Accessible, controlled one-time-code input with keyboard and paste support. */
 declare const OtpInput: React__default.ForwardRefExoticComponent<OtpInputProps & React__default.RefAttributes<HTMLInputElement>>;
 
-declare const TextAreaInput: React__default.FC<TextAreaInputProps>;
+declare const TextAreaInput: React__default.ForwardRefExoticComponent<TextAreaInputProps & React__default.RefAttributes<HTMLTextAreaElement>>;
 
 declare const SelectInput: React__default.FC<SelectInputProps>;
 
@@ -2540,7 +2536,7 @@ declare function PhoneInput({ value, onChange, defaultCountry, placeholder, disa
     bordered?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare const TimeInput: React__default.FC<TimeInputProps>;
+declare const TimeInput: React__default.ForwardRefExoticComponent<TimeInputProps & React__default.RefAttributes<HTMLInputElement>>;
 
 declare const TimeZoneInput: React__default.FC<TimeZoneInputProps>;
 

package/dist/index.mjs

@@ -17,11 +17,11 @@ export { DEFAULT_PLACEHOLDER, formatCurrency, formatDate, formatDateTime, format
 export { DEFAULT_MAX_PAGE_SIZE, DEFAULT_PAGE_SIZE, cleanQuery, createOffsetPagination, fetchOffsetPage, getPageIndex } from './chunk-2NX2VKS2.mjs';
 import { resolveRadiusValue, resolveVariantAlias, parseNajmDesignConfig } from './chunk-TFHWLE7N.mjs';
 export { NAJM_COMPONENT_NAMES, RADIUS_VALUE_MAP, defineNajmDesignConfig, defineNajmThemeConfig, parseNajmDesignConfig, parseNajmThemeConfig, resolveRadiusValue, resolveVariantAlias, stringifyNajmDesignConfig, stringifyNajmThemeConfig } from './chunk-TFHWLE7N.mjs';
-import * as React61 from 'react';
-import React61__default, { createContext, useRef, useMemo, useState, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
+import * as React66 from 'react';
+import React66__default, { createContext, useState, useRef, useMemo, useEffect, useContext, useCallback, useLayoutEffect, isValidElement } from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, Eye, EyeOff, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { Eye, EyeOff, Clock, ChevronDown, AlertTriangle, RefreshCw, X, XIcon, Menu, Search, SearchIcon, CheckIcon, ChevronUp, ChevronDownIcon, ChevronUpIcon, ChevronsUpDown, Check, CircleIcon, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, FileUp, Folder, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Trash2, Plus, Upload, Download, RotateCcw, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, Copy, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Scissors, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
@@ -275,7 +275,7 @@ function NTabs({
 }
 var PORTAL_LAYER_STYLE_ID = "najm-kit-portal-layer-styles";
 function useNajmPortalLayerStyles() {
-  React61.useInsertionEffect(() => {
+  React66.useInsertionEffect(() => {
     if (typeof document === "undefined") return;
     if (document.getElementById(PORTAL_LAYER_STYLE_ID)) return;
     const style = document.createElement("style");
@@ -306,7 +306,7 @@ var tooltipContentVariants = cva(
   }
 );
 function TooltipContent({ className, sideOffset = 4, variant, children, ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     TooltipPrimitive.Content,
@@ -456,7 +456,7 @@ var ERROR_BORDER = "border !border-red-600";
 var FOCUS_INTERACTIVE_BASE = "border focus-within:border-primary";
 var HOVER_INTERACTIVE_BASE = "hover:border-primary";
 var STATIC_BASE = "border";
-var BaseInput = React61__default.forwardRef(
+var BaseInput = React66__default.forwardRef(
   ({ children, variant = "default", status = "default", bordered, borderColor, className, style, disabled = false, onHover, onClick, hasIcon, ...rest }, ref) => {
     const recipe = useNajmComponentStyle("input");
     const isGhost = variant === "ghost";
@@ -515,7 +515,7 @@ function PopoverAnchor({ ...props }) {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   useNajmPortalLayerStyles();
   return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
@@ -624,7 +624,7 @@ function SwatchesColorPicker({
   hideSwatches = false
 }) {
   const inputRef = useRef(null);
-  const themeContainer = React61__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React66__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   return /* @__PURE__ */ jsxs(
     BaseInput,
@@ -694,7 +694,7 @@ function PopoverColorPicker({
   formats = DEFAULT_FORMATS,
   output = "preserve"
 }) {
-  const themeContainer = React61__default.useContext(NajmThemeContainerCtx);
+  const themeContainer = React66__default.useContext(NajmThemeContainerCtx);
   const resolvedValue = resolvePickerColor(value, themeContainer);
   const initialFormat = formats.includes(detectFormat(resolvedValue)) ? detectFormat(resolvedValue) : formats[0] ?? "hex";
   const [activeFormat, setActiveFormat] = useState(initialFormat);
@@ -961,7 +961,7 @@ function SheetClose({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({ ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", container: container ?? void 0, ...props });
 }
 function SheetOverlay({ className, ...props }) {
@@ -1110,7 +1110,7 @@ function DialogTrigger({ ...props }) {
   return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({ ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", container: container ?? void 0, ...props });
 }
 function DialogClose({ ...props }) {
@@ -1141,8 +1141,8 @@ function getDefaultPadding() {
   return window.matchMedia(MOBILE_PADDING_QUERY).matches ? "sm" : "md";
 }
 function useResponsivePadding(value) {
-  const [resolved, setResolved] = React61.useState(() => value ?? getDefaultPadding());
-  React61.useEffect(() => {
+  const [resolved, setResolved] = React66.useState(() => value ?? getDefaultPadding());
+  React66.useEffect(() => {
     if (value) {
       setResolved(value);
       return;
@@ -1167,7 +1167,7 @@ function DialogContent({
 }) {
   const resolvedPadding = useResponsivePadding(padding);
   const portalClassName = useNPortalScope();
-  const openerRef = React61.useRef(null);
+  const openerRef = React66.useRef(null);
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
     /* @__PURE__ */ jsxs(
@@ -1231,7 +1231,7 @@ var sizeClasses2 = {
   md: "h-8 w-8",
   lg: "h-10 w-10"
 };
-var IconButton = React61.forwardRef(
+var IconButton = React66.forwardRef(
   ({
     className,
     variant = "ghost",
@@ -1313,10 +1313,10 @@ function NPageHeaderTop({ children, className }) {
 }
 NPageHeaderTop.displayName = "NPageHeaderTop";
 function isPageHeaderSlot(child, slot) {
-  return React61__default.isValidElement(child) && child.type === slot;
+  return React66__default.isValidElement(child) && child.type === slot;
 }
 function getSlotElements(children, slot) {
-  const matches = React61__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
+  const matches = React66__default.Children.toArray(children).filter((child) => isPageHeaderSlot(child, slot));
   return matches.length > 0 ? matches : void 0;
 }
 var responsiveClasses = {
@@ -1729,8 +1729,8 @@ function NDialogSecondaryButton(_props) {
 function parseDirectDialogSlots(children) {
   const body = [];
   const parsed = {};
-  React61__default.Children.forEach(children, (child) => {
-    if (!React61__default.isValidElement(child)) {
+  React66__default.Children.forEach(children, (child) => {
+    if (!React66__default.isValidElement(child)) {
       body.push(child);
       return;
     }
@@ -1803,15 +1803,15 @@ var dialogVariants = cva(
 );
 var CONTENT_ACTIONS_SELECTOR = '[data-najm-dialog-actions="content"], [data-najm-wizard-form="true"]';
 function useContentOwnsActions() {
-  const [contentElement, setContentElement] = React61__default.useState(null);
-  const [contentOwnsActions, setContentOwnsActions] = React61__default.useState(false);
-  const contentElementRef = React61__default.useRef(null);
-  const handleContentElementRef = React61__default.useCallback((node) => {
+  const [contentElement, setContentElement] = React66__default.useState(null);
+  const [contentOwnsActions, setContentOwnsActions] = React66__default.useState(false);
+  const contentElementRef = React66__default.useRef(null);
+  const handleContentElementRef = React66__default.useCallback((node) => {
     if (contentElementRef.current === node) return;
     contentElementRef.current = node;
     setContentElement(node);
   }, []);
-  React61__default.useLayoutEffect(() => {
+  React66__default.useLayoutEffect(() => {
     if (!contentElement) {
       setContentOwnsActions((current) => current ? false : current);
       return;
@@ -2064,8 +2064,8 @@ function NDirectDialog({
   const resolvedHeaderClassName = cn(slots.header?.className, headerClassName);
   const resolvedTitleClassName = cn(slots.header?.titleClassName, titleClassName);
   const resolvedDescriptionClassName = cn(slots.description?.className, descriptionClassName);
-  const [internalOpen, setInternalOpen] = React61__default.useState(defaultOpen);
-  const [primaryLoading, setPrimaryLoading] = React61__default.useState(false);
+  const [internalOpen, setInternalOpen] = React66__default.useState(defaultOpen);
+  const [primaryLoading, setPrimaryLoading] = React66__default.useState(false);
   const isControlled = open !== void 0;
   const currentOpen = isControlled ? open : internalOpen;
   const setOpen = (nextOpen) => {
@@ -2347,7 +2347,7 @@ function useDialog(store) {
         description: options.description,
         size: options.size || "sm",
         className: options.className,
-        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React61__default.createElement(NDeleteDialog, {
+        render: ({ dialog, zIndex, confirm, cancel, onOpenChange }) => React66__default.createElement(NDeleteDialog, {
           itemName: options.itemName,
           itemType: options.itemType,
           icon: options.icon,
@@ -2641,8 +2641,8 @@ function resolveIcon(icon) {
 }
 var MultiSelectInput = ({ ariaLabel, placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
   const [open, setOpen] = useState(false);
-  const triggerRef = React61__default.useRef(null);
-  const pointerDismissedRef = React61__default.useRef(false);
+  const triggerRef = React66__default.useRef(null);
+  const pointerDismissedRef = React66__default.useRef(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const handleSelect = (itemValue) => {
@@ -2758,7 +2758,7 @@ function SelectScrollDownButton({ className, ...props }) {
   return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
 }
 function SelectContent({ className, children, position = "popper", style, ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   const recipe = useNajmComponentStyle("select");
   const contentSlot = recipe?.slots?.content;
   const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
@@ -2841,9 +2841,9 @@ var SelectInput = ({ placeholder = "", ariaLabel, value, onChange, icon, showIco
     (item) => typeof item === "string" ? item === value : item.value === value
   );
   const displayLabel = typeof found === "string" ? found : found?.label ?? value;
-  const [open, setOpen] = React61__default.useState(false);
-  const triggerRef = React61__default.useRef(null);
-  const pointerDismissedRef = React61__default.useRef(false);
+  const [open, setOpen] = React66__default.useState(false);
+  const triggerRef = React66__default.useRef(null);
+  const pointerDismissedRef = React66__default.useRef(false);
   return /* @__PURE__ */ jsxs("div", { className: cn("group relative", className), children: [
     /* @__PURE__ */ jsxs(
       BaseInput,
@@ -2901,10 +2901,11 @@ var SelectInput = ({ placeholder = "", ariaLabel, value, onChange, icon, showIco
     )
   ] });
 };
-function Input({ className, type, ...props }) {
+var Input = React66.forwardRef(function Input2({ className, type, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "input",
     {
+      ref,
       type,
       "data-slot": "input",
       className: cn(
@@ -2916,7 +2917,7 @@ function Input({ className, type, ...props }) {
       ...props
     }
   );
-}
+});
 var TRACK = {
   xs: "h-3 w-5",
   sm: "h-4 w-7",
@@ -3711,7 +3712,7 @@ function CollapsibleSection({
   children,
   disabled
 }) {
-  const [open, setOpen] = React61.useState(true);
+  const [open, setOpen] = React66.useState(true);
   const titleText = typeof title === "string" || typeof title === "number" ? String(title) : "Section";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -4030,7 +4031,7 @@ function TokenGroupSection({
   disabled,
   labels
 }) {
-  const [open, setOpen] = React61.useState(groupId === "surface" || groupId === "brand");
+  const [open, setOpen] = React66.useState(groupId === "surface" || groupId === "brand");
   const labelText = typeof label === "string" || typeof label === "number" ? String(label) : "Group";
   return /* @__PURE__ */ jsxs(
     Collapsible,
@@ -4333,37 +4334,40 @@ function Label2({ className, ...props }) {
     }
   );
 }
-var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }) => {
+var TextInput = React66__default.forwardRef(({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }, ref) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props })
+    /* @__PURE__ */ jsx(Input, { ref, placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props })
   ] });
-};
-var NumberInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor }) => {
+});
+TextInput.displayName = "TextInput";
+var NumberInput = React66__default.forwardRef(({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }, ref) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground" })
+    /* @__PURE__ */ jsx(Input, { ref, type: "number", placeholder, value: value ?? "", onChange: (ev) => onChange(Number(ev.target.value)), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props })
   ] });
-};
-var PasswordInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }) => {
+});
+NumberInput.displayName = "NumberInput";
+var PasswordInput = React66__default.forwardRef(({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }, ref) => {
   const [showPassword, setShowPassword] = useState(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), disabled, children: [
     shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-    /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props }),
+    /* @__PURE__ */ jsx(Input, { ref, type: showPassword ? "text" : "password", placeholder, value, onChange: (ev) => onChange(ev.target.value), className: "p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 text-foreground placeholder:text-muted-foreground", disabled, ...props }),
     showPassword ? /* @__PURE__ */ jsx(Eye, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(false) }) : /* @__PURE__ */ jsx(EyeOff, { className: "absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer", onClick: () => setShowPassword(true) })
   ] });
-};
+});
+PasswordInput.displayName = "PasswordInput";
 function normalizeCode(value, numeric, length) {
   const normalized = numeric ? value.replace(/\D/g, "") : value.replace(/\s/g, "");
   return normalized.slice(0, length);
 }
-var OtpInput = React61__default.forwardRef(
+var OtpInput = React66__default.forwardRef(
   ({
     value,
     onChange,
@@ -4502,10 +4506,11 @@ var OtpInput = React61__default.forwardRef(
   }
 );
 OtpInput.displayName = "OtpInput";
-function Textarea({ className, ...props }) {
+var Textarea = React66.forwardRef(function Textarea2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
+      ref,
       "data-slot": "textarea",
       className: cn(
         "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
@@ -4514,11 +4519,11 @@ function Textarea({ className, ...props }) {
       ...props
     }
   );
-}
+});
 var DEFAULT_ROWS = 3;
 var MIN_ROWS = 2;
 var REM_PER_ROW = 1.5;
-var TextAreaInput = ({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderColor, rows }) => {
+var TextAreaInput = React66__default.forwardRef(({ value, onChange, placeholder = "", className = "", variant = "default", status = "default", bordered, borderColor, iconColor: _iconColor, rows, ...props }, ref) => {
   const visibleRows = Math.max(rows ?? DEFAULT_ROWS, MIN_ROWS);
   const textareaMinHeight = `${visibleRows * REM_PER_ROW}rem`;
   return /* @__PURE__ */ jsx(
@@ -4532,21 +4537,24 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
       children: /* @__PURE__ */ jsx(
         Textarea,
         {
+          ref,
           rows: visibleRows,
           placeholder,
           value,
           onChange: (ev) => onChange(ev.target.value),
           style: { minHeight: textareaMinHeight },
-          className: "h-auto min-h-0 resize-y border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent"
+          className: "h-auto min-h-0 resize-y border-0 bg-transparent p-0 text-foreground placeholder:text-muted-foreground shadow-none focus-visible:border-transparent focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 dark:bg-transparent",
+          ...props
         }
       )
     }
   );
-};
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
+});
+TextAreaInput.displayName = "TextAreaInput";
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false, ariaLabel }) => {
   const [open, setOpen] = useState(false);
-  const triggerRef = React61__default.useRef(null);
-  const pointerDismissedRef = React61__default.useRef(false);
+  const triggerRef = React66__default.useRef(null);
+  const pointerDismissedRef = React66__default.useRef(false);
   const [query, setQuery] = useState("");
   const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
   const selectedItem = normalizedItems.find((item) => item.value === value);
@@ -4582,6 +4590,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
         bordered,
         borderColor,
         role: "combobox",
+        "aria-label": ariaLabel,
         tabIndex: disabled ? -1 : 0,
         "aria-expanded": open,
         className: cn(
@@ -4774,13 +4783,13 @@ function Calendar(props) {
     }
   );
 }
-var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor, ariaLabel }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date ? format(date, "yyyy-MM-dd") : void 0;
   const toDate = (val) => typeof val === "string" ? parseISO(val) : val;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label2, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": ariaLabel, className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal bg-transparent border-0 p-0 outline-none", children: /* @__PURE__ */ jsx("span", { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: toDate(value), onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -5933,7 +5942,7 @@ function DropdownMenuSubContent({ className, children, style, ...props }) {
   );
 }
 function DropdownMenuContent({ className, children, sideOffset = 4, style, ...props }) {
-  const container = React61.useContext(NajmThemeContainerCtx);
+  const container = React66.useContext(NajmThemeContainerCtx);
   const surface = useDropdownSurfaceRecipe("content");
   const { hostRef, viewportRef } = useNajmScrollViewport();
   useNajmPortalLayerStyles();
@@ -6138,7 +6147,7 @@ function PhoneInput({
     }
   ) });
 }
-var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, format24 = true, showSeconds = false, disabled = false }) => {
+var TimeInput = React66__default.forwardRef(({ value = "", onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, format24 = true, showSeconds = false, disabled = false, onBlur, ...props }, ref) => {
   const [inputValue, setInputValue] = useState(value);
   const [isValid, setIsValid] = useState(true);
   useEffect(() => {
@@ -6172,7 +6181,7 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
       if (valid || formatted === "") onChange(formatted);
     }
   };
-  const handleBlur = () => {
+  const handleBlur = (event) => {
     if (inputValue) {
       let completed = inputValue;
       if (completed.length === 1) completed = "0" + completed + ":00";
@@ -6183,16 +6192,18 @@ var TimeInput = ({ value = "", onChange, placeholder = "", icon, showIcon = true
         onChange(completed);
       }
     }
+    onBlur?.(event);
   };
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const currentStatus = !isValid ? "error" : status;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status: currentStatus, bordered, borderColor, className: cn("gap-2", className), children: [
     showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(Clock, { className: iconProps.className, style: iconProps.style })),
-    /* @__PURE__ */ jsx(Input, { type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
+    /* @__PURE__ */ jsx(Input, { ref, type: "text", placeholder: placeholder || (showSeconds ? "HH:MM:SS" : "HH:MM"), value: inputValue, onChange: (e) => handleInputChange(e.target.value), onKeyDown: (e) => {
       if (!/\d/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) e.preventDefault();
-    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 placeholder:text-muted-foreground", !isValid ? "text-red-500" : "text-foreground") })
+    }, onBlur: handleBlur, disabled, className: cn("p-0 border-0 shadow-none bg-transparent dark:bg-transparent focus-visible:ring-0 placeholder:text-muted-foreground", !isValid ? "text-red-500" : "text-foreground"), ...props })
   ] });
-};
+});
+TimeInput.displayName = "TimeInput";
 var timeZoneValues = [
   "UTC",
   "Atlantic/Azores",
@@ -6337,8 +6348,8 @@ function NSlider({
     return Array.isArray(v) ? [...v] : [v];
   };
   const initialRadix = toRadix(controlledValue ?? defaultValue);
-  const [internalValues, setInternalValues] = React61.useState(initialRadix);
-  const [active, setActive] = React61.useState(null);
+  const [internalValues, setInternalValues] = React66.useState(initialRadix);
+  const [active, setActive] = React66.useState(null);
   const currentValues = controlledValue !== void 0 ? toRadix(controlledValue) : internalValues;
   const handleRadix = (arr) => {
     setInternalValues(arr);
@@ -6495,13 +6506,13 @@ function NThemePresets({
   disabled = false,
   className
 }) {
-  const [saveOpen, setSaveOpen] = React61.useState(false);
-  const [name, setName] = React61.useState("");
-  const [pendingDelete, setPendingDelete] = React61.useState(
+  const [saveOpen, setSaveOpen] = React66.useState(false);
+  const [name, setName] = React66.useState("");
+  const [pendingDelete, setPendingDelete] = React66.useState(
     null
   );
-  const [busy, setBusy] = React61.useState(false);
-  const rows = React61.useMemo(
+  const [busy, setBusy] = React66.useState(false);
+  const rows = React66.useMemo(
     () => [
       ...savedDesign ? [
         {
@@ -6753,12 +6764,12 @@ function NThemeCustomizer({
 }) {
   const inheritedMode = useNajmThemeMode();
   const resolvedPreviewMode = previewMode ?? inheritedMode ?? value.theme.mode ?? "light";
-  const visibleTabs = React61.useMemo(() => buildTabs(tabs), [tabs]);
+  const visibleTabs = React66.useMemo(() => buildTabs(tabs), [tabs]);
   const firstTab = visibleTabs[0] ?? "theme";
-  const [activeTab, setActiveTab] = React61.useState(TAB_VALUE[firstTab]);
-  const [fileError, setFileError] = React61.useState(false);
-  const fileInputRef = React61.useRef(null);
-  React61.useEffect(() => {
+  const [activeTab, setActiveTab] = React66.useState(TAB_VALUE[firstTab]);
+  const [fileError, setFileError] = React66.useState(false);
+  const fileInputRef = React66.useRef(null);
+  React66.useEffect(() => {
     setActiveTab(TAB_VALUE[firstTab]);
   }, [firstTab]);
   const themeLabel = resolveLabel("themeTab", labels);
@@ -6770,7 +6781,7 @@ function NThemeCustomizer({
   const invalidThemeFileLabel = resolveLabel("invalidThemeFile", labels);
   const defaultOptionLabel = resolveLabel("defaultOption", labels);
   const colorSwatchFallbackLabel = resolveLabel("colorSwatchFallback", labels);
-  const tokenLabels = React61.useMemo(() => {
+  const tokenLabels = React66.useMemo(() => {
     const out = {};
     const knownTokens = [
       "background",
@@ -7574,7 +7585,7 @@ function Alert({
   );
 }
 var NAlert = Alert;
-var NativeSelect = React61.forwardRef(
+var NativeSelect = React66.forwardRef(
   ({ className, options, placeholder, value, ...props }, ref) => {
     const hasValue = value !== void 0 && value !== "";
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -7732,7 +7743,7 @@ function Avatar({
   ...props
 }) {
   const hasShortcut = src !== void 0 || fallback !== void 0;
-  const hasChildren = React61.Children.count(children) > 0;
+  const hasChildren = React66.Children.count(children) > 0;
   return /* @__PURE__ */ jsxs(
     AvatarPrimitive.Root,
     {
@@ -7826,9 +7837,9 @@ function AvatarGroup({ ring = true, className, children, ...props }) {
       "data-slot": "avatar-group",
       className: cn("flex -space-x-2", className),
       ...props,
-      children: ring ? React61.Children.map(children, (child) => {
-        if (React61.isValidElement(child) && child.type === Avatar) {
-          return React61.cloneElement(child, { ring: true, ...child.props });
+      children: ring ? React66.Children.map(children, (child) => {
+        if (React66.isValidElement(child) && child.type === Avatar) {
+          return React66.cloneElement(child, { ring: true, ...child.props });
         }
         return child;
       }) : children
@@ -7895,7 +7906,7 @@ function Swap({
   className,
   ...props
 }) {
-  const [internalChecked, setInternalChecked] = React61.useState(defaultChecked);
+  const [internalChecked, setInternalChecked] = React66.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0 || controlledState !== void 0;
   const currentState = getDerivedState(
     isControlled ? controlledChecked ?? false : internalChecked,
@@ -7903,7 +7914,7 @@ function Swap({
   );
   const dataState = currentState === "indeterminate" ? "indeterminate" : currentState ? "on" : "off";
   const ariaPressed = currentState === "indeterminate" ? "mixed" : currentState;
-  const handleClick = React61.useCallback((event) => {
+  const handleClick = React66.useCallback((event) => {
     onClick?.(event);
     if (event.defaultPrevented) return;
     if (disabled) return;
@@ -8028,7 +8039,7 @@ var toneClasses = {
     ring: "border-primary/30"
   }
 };
-var StatusPill = React61.forwardRef(
+var StatusPill = React66.forwardRef(
   ({ className, tone = "neutral", pulse = false, label, ...props }, ref) => {
     const c = toneClasses[tone];
     return /* @__PURE__ */ jsxs(
@@ -8087,20 +8098,20 @@ function Toaster({ toastOptions, ...props }) {
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React61.createContext({});
+var FormFieldContext = React66.createContext({});
 var FormField = ({ ...props }) => /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React61.useContext(FormFieldContext);
-  const itemContext = React61.useContext(FormItemContext);
+  const fieldContext = React66.useContext(FormFieldContext);
+  const itemContext = React66.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   const fieldState = getFieldState(fieldContext.name, formState);
   if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
   const { id } = itemContext;
   return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState };
 };
-var FormItemContext = React61.createContext({});
+var FormItemContext = React66.createContext({});
 function FormItem({ className, ...props }) {
-  const id = React61.useId();
+  const id = React66.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormLabel({ className, ...props }) {
@@ -8145,7 +8156,7 @@ function TableCell({ className, ...props }) {
 function TableCaption({ className, ...props }) {
   return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 text-sm", className), ...props });
 }
-var NErrorBoundary = class extends React61__default.Component {
+var NErrorBoundary = class extends React66__default.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -8326,9 +8337,9 @@ function NAvatar({
     loading: imageLoading,
     ...restImageProps
   } = imageProps ?? {};
-  const imageRef = React61__default.useRef(null);
+  const imageRef = React66__default.useRef(null);
   const { markLoaded } = chain;
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     const element = imageRef.current;
     if (element?.complete && element.naturalWidth > 0) markLoaded();
   }, [chain.src, markLoaded]);
@@ -8483,8 +8494,8 @@ function NCard({
   let footerClassName;
   let mediaSlot = null;
   const mainChildren = [];
-  React61__default.Children.forEach(children, (child) => {
-    if (!React61__default.isValidElement(child)) {
+  React66__default.Children.forEach(children, (child) => {
+    if (!React66__default.isValidElement(child)) {
       mainChildren.push(child);
       return;
     }
@@ -8660,7 +8671,7 @@ function truncateByCharacters(text, maxCharacters, suffix = "...") {
   const str = String(text);
   return str.length <= maxCharacters ? str : str.slice(0, maxCharacters) + suffix;
 }
-var CardDensityContext = React61__default.createContext("default");
+var CardDensityContext = React66__default.createContext("default");
 function NCardInfo({
   icon: Icon2,
   label,
@@ -8673,7 +8684,7 @@ function NCardInfo({
   className,
   ...props
 }) {
-  const inheritedDensity = React61__default.useContext(CardDensityContext);
+  const inheritedDensity = React66__default.useContext(CardDensityContext);
   const resolvedDensity = density ?? inheritedDensity;
   const isTruncated = typeof value === "string" && value.length > maxChars;
   const displayValue = isTruncated ? truncateByCharacters(value, maxChars) : value;
@@ -9922,7 +9933,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       children: items.map((item) => {
         const Icon2 = item.icon;
         const hasSub = !!item.submenu?.length;
-        return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React66__default.Fragment, { children: [
           item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-border/60" }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -10353,11 +10364,11 @@ function NCredentialsCard({
   className,
   classNames
 }) {
-  const [status, setStatus] = React61.useState("idle");
-  const revertTimer = React61.useRef(null);
-  const mountedRef = React61.useRef(true);
-  const requestTokenRef = React61.useRef(0);
-  React61.useEffect(() => {
+  const [status, setStatus] = React66.useState("idle");
+  const revertTimer = React66.useRef(null);
+  const mountedRef = React66.useRef(true);
+  const requestTokenRef = React66.useRef(0);
+  React66.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -10365,14 +10376,14 @@ function NCredentialsCard({
       revertTimer.current = null;
     };
   }, []);
-  const scheduleRevert = React61.useCallback(() => {
+  const scheduleRevert = React66.useCallback(() => {
     if (revertTimer.current) clearTimeout(revertTimer.current);
     revertTimer.current = setTimeout(() => {
       revertTimer.current = null;
       if (mountedRef.current) setStatus("idle");
     }, REVERT_MS);
   }, []);
-  const handleCopy = React61.useCallback(() => {
+  const handleCopy = React66.useCallback(() => {
     if (status === "pending") return;
     if (revertTimer.current) {
       clearTimeout(revertTimer.current);
@@ -10612,19 +10623,19 @@ function Combobox({
   allowFreeText = false,
   disabled = false
 }) {
-  const [open, setOpen] = React61.useState(false);
-  const [query, setQuery] = React61.useState("");
-  const [highlight, setHighlight] = React61.useState(0);
-  const wrapperRef = React61.useRef(null);
-  const inputRef = React61.useRef(null);
-  const filtered = React61.useMemo(() => {
+  const [open, setOpen] = React66.useState(false);
+  const [query, setQuery] = React66.useState("");
+  const [highlight, setHighlight] = React66.useState(0);
+  const wrapperRef = React66.useRef(null);
+  const inputRef = React66.useRef(null);
+  const filtered = React66.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
       (opt) => opt.label.toLowerCase().includes(q) || opt.value.toLowerCase().includes(q)
     );
   }, [options, query]);
-  React61.useEffect(() => {
+  React66.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
@@ -10635,7 +10646,7 @@ function Combobox({
     document.addEventListener("mousedown", onClick);
     return () => document.removeEventListener("mousedown", onClick);
   }, [open]);
-  React61.useEffect(() => {
+  React66.useEffect(() => {
     if (open) {
       setHighlight(0);
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -10643,7 +10654,7 @@ function Combobox({
       setQuery("");
     }
   }, [open]);
-  const selectedLabel = React61.useMemo(() => {
+  const selectedLabel = React66.useMemo(() => {
     const match = options.find((o) => o.value === value);
     return match?.label ?? value;
   }, [options, value]);
@@ -10868,10 +10879,12 @@ var Inputs = {
   time: TimeInput,
   slider: SliderInput
 };
+var nativeFieldTypes = /* @__PURE__ */ new Set(["text", "number", "password", "textarea", "time"]);
+var labelNamedCompositeTypes = /* @__PURE__ */ new Set(["date", "combobox", "multiselect"]);
 var FormInput = ({ name, type, formLabel, formDescription, required = false, disabled = false, readOnly = false, hidden = false, icon, iconColor, classNames, background, ...rest }) => {
   const InputComponent = Inputs[type];
   const { control } = useFormContext();
-  const { className, onChange: consumerOnChange, ...inputRest } = rest;
+  const { className, onChange: consumerOnChange, onBlur: consumerOnBlur, ...inputRest } = rest;
   const prefix = usePrefix();
   const preset = useVariantPreset();
   const contextBordered = useBordered();
@@ -10886,6 +10899,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   };
   const presetInput = type === "textarea" ? preset.input?.replace(/\bh-\d+\b/g, "").trim() : preset.input;
   const isFillAvatar = type === "avatar" && inputRest.fill === true;
+  const compositeAriaLabel = labelNamedCompositeTypes.has(type) && typeof formLabel === "string" ? { ariaLabel: inputRest.ariaLabel ?? formLabel } : {};
   const slot = {
     item: cn(
       preset.item,
@@ -10904,13 +10918,21 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
       field.onChange(val);
       consumerOnChange?.(val);
     };
+    const nativeFieldBinding = nativeFieldTypes.has(type) ? {
+      name: field.name,
+      onBlur: (event) => {
+        field.onBlur();
+        consumerOnBlur?.(event);
+      },
+      ref: field.ref
+    } : {};
     return /* @__PURE__ */ jsxs(FormItem, { className: slot.item, children: [
       formLabel && /* @__PURE__ */ jsxs(FormLabel, { className: slot.label, children: [
         icon && /* @__PURE__ */ jsx(NIcon, { icon, size: 16, className: "shrink-0 text-muted-foreground" }),
         formLabel,
         required && !disabled && !readOnly && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, className: slot.input }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, ...compositeAriaLabel, ...nativeFieldBinding, className: slot.input }) }),
       !hasError && !disabled && !readOnly && formDescription && /* @__PURE__ */ jsx(FormDescription, { className: slot.description, children: formDescription }),
       !isHidden && /* @__PURE__ */ jsx(FormMessage, { className: slot.error })
     ] });
@@ -12039,8 +12061,8 @@ function useTable(effectiveViewModeOverride) {
         ...effectiveColumns,
         {
           id: "actions",
-          header: () => isMenuActions ? null : React61__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
-          cell: ({ row }) => React61__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
+          header: () => isMenuActions ? null : React66__default.createElement("div", { className: "flex w-full justify-start text-left" }, "Actions"),
+          cell: ({ row }) => React66__default.createElement(TableActionCell, { row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }),
           enableSorting: false,
           enableHiding: false
         }
@@ -12303,10 +12325,10 @@ function EditableCell({ cell, onCellEdit }) {
   const columnId = cell.column.id;
   const editor = meta.editor || "text";
   const initial = cell.getValue();
-  const [editing, setEditing] = React61__default.useState(false);
-  const [value, setValue] = React61__default.useState(initial);
-  const [saving, setSaving] = React61__default.useState(false);
-  React61__default.useEffect(() => {
+  const [editing, setEditing] = React66__default.useState(false);
+  const [value, setValue] = React66__default.useState(initial);
+  const [saving, setSaving] = React66__default.useState(false);
+  React66__default.useEffect(() => {
     if (!editing) setValue(initial);
   }, [initial, editing]);
   const commit = async (next) => {
@@ -12480,7 +12502,7 @@ function NTableContent({ effectiveMode }) {
           const isExpanded = canExpand && row.getIsExpanded();
           const totalCols = row.getVisibleCells().length + (showCheckbox ? 1 : 0) + (hasExpansion ? 1 : 0);
           const rowClassName = getRowClassName?.(row.original);
-          return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React66__default.Fragment, { children: [
             /* @__PURE__ */ jsxs(
               TableRow,
               {
@@ -12739,7 +12761,7 @@ function NTableCardSkeleton({ surface }) {
 }
 function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
-  const responsiveColumns = React61__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
+  const responsiveColumns = React66__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
   const columns = responsiveColumns;
   const showCheckbox = useTableStore.use.showCheckbox();
   const headerClassName = useTableStore.use.headerClassName();
@@ -12862,19 +12884,19 @@ function useCardContinuation({
   rowCount,
   viewportRef
 }) {
-  const [internalPending, setInternalPending] = React61__default.useState(false);
-  const [internalError, setInternalError] = React61__default.useState(null);
-  const [announcement, setAnnouncement] = React61__default.useState("");
-  const [viewportReady, setViewportReady] = React61__default.useState(false);
-  const pendingRef = React61__default.useRef(false);
-  const previousRowCountRef = React61__default.useRef(rowCount);
-  const configRef = React61__default.useRef(config);
+  const [internalPending, setInternalPending] = React66__default.useState(false);
+  const [internalError, setInternalError] = React66__default.useState(null);
+  const [announcement, setAnnouncement] = React66__default.useState("");
+  const [viewportReady, setViewportReady] = React66__default.useState(false);
+  const pendingRef = React66__default.useRef(false);
+  const previousRowCountRef = React66__default.useRef(rowCount);
+  const configRef = React66__default.useRef(config);
   configRef.current = config;
   const enabled = Boolean(config);
   const pending = Boolean(config?.loadingMore || internalPending);
   const error = config?.loadMoreError ?? internalError;
   const hasNextPage = Boolean(config?.hasNextPage);
-  const load = React61__default.useCallback(async () => {
+  const load = React66__default.useCallback(async () => {
     const current = configRef.current;
     if (!current) return;
     if (pendingRef.current || current.loadingMore || !current.hasNextPage) return;
@@ -12899,13 +12921,13 @@ function useCardContinuation({
     load,
     { rootMargin: config?.rootMargin ?? DEFAULT_ROOT_MARGIN }
   );
-  React61__default.useLayoutEffect(() => {
+  React66__default.useLayoutEffect(() => {
     const node = viewportRef.current ?? null;
     scrollContainerRef.current = node;
     const ready = Boolean(node);
     setViewportReady((value) => value === ready ? value : ready);
   });
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     previousRowCountRef.current = rowCount;
     if (!configRef.current) return;
@@ -12915,10 +12937,10 @@ function useCardContinuation({
       configRef.current.itemsLoadedLabel?.(appended) ?? `${appended} more ${appended === 1 ? "item" : "items"} loaded.`
     );
   }, [rowCount]);
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     if (!pending) doneLoading();
   }, [pending, doneLoading]);
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     if (!enabled || !hasNextPage || error) return;
     return observe();
   }, [enabled, hasNextPage, error, observe, viewportReady, rowCount]);
@@ -12972,7 +12994,7 @@ function NTableCards({ effectiveMode }) {
   const cardPagination = useTableStore.use.cardPagination();
   const cardColumnCount = useTableStore.use.cardColumnCount();
   const surface = useTableSurfaceAppearance(bordered, borderColor);
-  const viewportRef = React61__default.useRef(null);
+  const viewportRef = React66__default.useRef(null);
   const continuationConfig = cardPagination.mode === "infinite" ? cardPagination : null;
   const continuation = useCardContinuation({
     config: continuationConfig,
@@ -13193,17 +13215,17 @@ function CardLoadMorePagination({
   bordered,
   className
 }) {
-  const [internalPending, setInternalPending] = React61__default.useState(false);
-  const [internalError, setInternalError] = React61__default.useState(null);
-  const [announcement, setAnnouncement] = React61__default.useState("");
-  const buttonRef = React61__default.useRef(null);
-  const pendingRef = React61__default.useRef(false);
-  const restoreFocusRef = React61__default.useRef(false);
-  const previousRowCountRef = React61__default.useRef(rowCount);
-  const errorId = React61__default.useId();
+  const [internalPending, setInternalPending] = React66__default.useState(false);
+  const [internalError, setInternalError] = React66__default.useState(null);
+  const [announcement, setAnnouncement] = React66__default.useState("");
+  const buttonRef = React66__default.useRef(null);
+  const pendingRef = React66__default.useRef(false);
+  const restoreFocusRef = React66__default.useRef(false);
+  const previousRowCountRef = React66__default.useRef(rowCount);
+  const errorId = React66__default.useId();
   const pending = Boolean(config.loadingMore || internalPending);
   const error = config.loadMoreError ?? internalError;
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     const previous = previousRowCountRef.current;
     if (rowCount > previous) {
       const appended = rowCount - previous;
@@ -13213,7 +13235,7 @@ function CardLoadMorePagination({
     }
     previousRowCountRef.current = rowCount;
   }, [config.itemsLoadedLabel, rowCount]);
-  React61__default.useEffect(() => {
+  React66__default.useEffect(() => {
     if (pending || !restoreFocusRef.current) return;
     restoreFocusRef.current = false;
     const frame = requestAnimationFrame(() => buttonRef.current?.focus());
@@ -13283,9 +13305,9 @@ function CardLoadMorePagination({
 var navButtonClass = "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70";
 var chevronClass = "h-4 w-4 rtl:-scale-x-100";
 function useLowerBoundPageCountWarning(manualPagination, pageCount, pagination) {
-  const previous = React61__default.useRef(null);
-  const warned = React61__default.useRef(false);
-  React61__default.useEffect(() => {
+  const previous = React66__default.useRef(null);
+  const warned = React66__default.useRef(false);
+  React66__default.useEffect(() => {
     if (typeof console === "undefined") return;
     if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
     if (!manualPagination || pageCount === void 0 || !pagination) {
@@ -15176,7 +15198,7 @@ function NNavbar({
               (userMenuActions.length > 0 || onLogout) && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
               userMenuActions.map((action) => {
                 const ActionIcon = action.icon;
-                return /* @__PURE__ */ jsxs(React61__default.Fragment, { children: [
+                return /* @__PURE__ */ jsxs(React66__default.Fragment, { children: [
                   action.separator && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
                   /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: action.onClick, className: "cursor-pointer", children: [
                     ActionIcon && /* @__PURE__ */ jsx(ActionIcon, { className: "h-4 w-4 mr-2" }),

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",