impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

package/dist/components/forms/select/select.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { FieldControlProps } from '../../../lib/primitives/field.types';
+/** Single select option — use `metadata` for app-specific fields instead of arbitrary keys. */
 export interface Option {
     label: string | ReactNode;
     value: string;
@@ -12,13 +13,15 @@ export interface Option {
      * Actual sequence is determined by selection order in the array.
      */
     sequence?: number;
-    [key: string]: unknown;
+    /** App-specific fields (e.g. SKU codes) — not used by Select internals. */
+    metadata?: Record<string, unknown>;
 }
+/** Option group heading with nested options. */
 export interface Group {
     label: string | ReactNode;
     options: Option[];
     isParentSelectable?: boolean;
-    [key: string]: unknown;
+    metadata?: Record<string, unknown>;
 }
 export type OptionsOrGroups<OptionType, GroupType> = Array<OptionType> | Array<GroupType>;
 export interface InvertedSelection {
@@ -28,298 +31,186 @@ export interface InvertedSelection {
 export type SingleValue<OptionType> = OptionType | null;
 export type MultiValue<OptionType> = readonly OptionType[] | InvertedSelection;
 export type PropsValue<OptionType> = SingleValue<OptionType> | MultiValue<OptionType>;
-export type ActionMeta<OptionType> = {
-    action: "select-option";
-    option?: OptionType;
+/** Why the select value changed — narrows `ActionMeta` for autocomplete. */
+export type SelectChangeAction = "select-option" | "deselect-option" | "remove-value" | "pop-value" | "set-value" | "clear" | "create-option";
+export type ActionMeta<OptionType extends Option = Option> = {
+    action: SelectChangeAction;
     name?: string;
-} | {
-    action: "deselect-option";
+} & ({
+    action: "select-option" | "deselect-option";
     option?: OptionType;
-    name?: string;
 } | {
-    action: "remove-value";
+    action: "remove-value" | "pop-value";
     removedValue: OptionType;
-    name?: string;
-} | {
-    action: "pop-value";
-    removedValue: OptionType;
-    name?: string;
-} | {
-    action: "set-value";
-    name?: string;
-} | {
-    action: "clear";
-    name?: string;
 } | {
     action: "create-option";
     option: OptionType;
-    name?: string;
-};
+} | {
+    action: "set-value" | "clear";
+});
 export type OnChangeValue<OptionType, IsMulti extends boolean> = IsMulti extends true ? MultiValue<OptionType> : SingleValue<OptionType>;
-export interface SelectComponentsConfig {
-    Option?: React.ComponentType<Record<string, unknown>>;
-    DropdownIndicator?: React.ComponentType<Record<string, unknown>>;
-    ClearIndicator?: React.ComponentType<Record<string, unknown>>;
-    MultiValue?: React.ComponentType<Record<string, unknown>>;
-    MultiValueRemove?: React.ComponentType<Record<string, unknown>>;
+/**
+ * @deprecated Slot overrides are not wired in Select — reserved for a future major.
+ * Use `renderOption` for custom option rows.
+ */
+export interface SelectComponentsConfig<OptionType extends Option = Option> {
+    Option?: React.ComponentType<{
+        option: OptionType;
+        selected: boolean;
+        disabled: boolean;
+        onClick: () => void;
+        className: string;
+    }>;
+    DropdownIndicator?: React.ComponentType<{
+        className?: string;
+    }>;
+    ClearIndicator?: React.ComponentType<{
+        onClick: () => void;
+        className?: string;
+    }>;
+    MultiValue?: React.ComponentType<{
+        option: OptionType;
+        onRemove: () => void;
+    }>;
+    MultiValueRemove?: React.ComponentType<{
+        onClick: () => void;
+    }>;
 }
-export interface SelectProps<OptionType extends Option = Option, IsMulti extends boolean = boolean, GroupType extends Group = Group> extends FieldControlProps {
-    /**
-     * The width of the dropdown menu.
-     */
+export interface SelectProps<OptionType extends Option = Option, IsMulti extends boolean = false, GroupType extends Group = Group> extends FieldControlProps {
+    /** Dropdown menu width (CSS length). */
     menuWidth?: string;
-    /**
-     * The array of options to display. Each option must have a `value` and `label`.
-     */
+    /** Options or grouped options — each leaf needs `value` and `label`. */
     options: OptionsOrGroups<OptionType, GroupType>;
-    /**
-     * The current value of the select. Required for **controlled** components.
-     */
+    /** Controlled value. */
     value?: PropsValue<OptionType>;
-    /**
-     * The initial value. Use this for **uncontrolled** components.
-     */
+    /** Uncontrolled initial value. */
     defaultValue?: PropsValue<OptionType>;
     /**
-     * Callback fired when the value changes.
-     * Optional - if not provided, the select keeps in-menu edits locally and
-     * commits through `onMenuClose` when the menu closes (controlled mode).
-     * Use `onChange` for immediate parent updates on every selection.
+     * Fired on each selection change.
+     * Omit to batch commits through `onMenuClose` when the menu closes.
      */
     onChange?: (newValue: OnChangeValue<OptionType, IsMulti>, actionMeta: ActionMeta<OptionType>) => void;
     /**
-     * If `true`, the user can select multiple values.
      * @deprecated Use `multiple`. Removed in v4.
      * @default false
      */
     isMulti?: IsMulti;
-    /**
-     * Canonical multi-select flag (Component API Charter).
-     * @default false
-     */
+    /** Enable multi-select. @default false */
     multiple?: IsMulti;
     /**
-     * If `true`, the component is disabled.
      * @deprecated Use `disabled`. Removed in v4.
      * @default false
      */
     isDisabled?: boolean;
-    /**
-     * If `true`, the component shows a loading indicator.
-     * @default false
-     */
+    /** Show loading indicator in the menu. @default false */
     isLoading?: boolean;
-    /**
-     * If `true`, the user can clear the selected value.
-     * @default true
-     */
+    /** Show clear control when a value is set. @default true */
     isClearable?: boolean;
-    /**
-     * If `true`, the user can search for options.
-     * @default true
-     */
+    /** Enable typeahead search. @default true */
     isSearchable?: boolean;
-    /**
-     * Callback fired when the input value changes.
-     */
+    /** Search input change (controlled search string). */
     onInputChange?: (value: string) => void;
-    /**
-     * The short hint displayed in the input before the user enters a value.
-     * @default "Select..."
-     */
+    /** Placeholder when empty. @default i18n "Select..." */
     placeholder?: string;
     /**
-     * The element to portal the menu to.
+     * @deprecated Radix handles portalling — prop is ignored.
      * @default document.body
      */
     menuPortalTarget?: HTMLElement | null;
-    /**
-     * If `true`, the input will be focused on mount.
-     */
+    /** Focus trigger on mount. */
     autoFocus?: boolean;
     /**
-     * If `true`, the menu will close after a selection is made.
-     * @default !isMulti
+     * Close menu after a selection.
+     * @default !multiple
      */
     closeMenuOnSelect?: boolean;
-    /**
-     * If `true`, the menu will be open when the component mounts.
-     * Useful for cell editors that need the dropdown visible immediately.
-     * @default false
-     */
+    /** Open menu on mount (e.g. cell editors). @default false */
     defaultMenuIsOpen?: boolean;
-    /**
-     * Callback fired when the component is focused.
-     */
     onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-    /**
-     * Callback fired when the component is blurred.
-     */
     onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-    /**
-     * If `true`, the menu will scroll to the selected option when opened.
-     * @default false
-     */
+    /** Scroll to selected option when the menu opens. @default false */
     scrollToSelectedOnOpen?: boolean;
     /**
-     * Custom components to replace the default ones.
-     */
-    components?: SelectComponentsConfig;
-    /**
-     * The name of the input field.
+     * @deprecated Not implemented — use `renderOption`.
      */
+    components?: SelectComponentsConfig<OptionType>;
+    /** Form field name. */
     name?: string;
-    /**
-     * Additional class name for the trigger.
-     */
+    /** Classes on the trigger. */
     className?: string;
-    /**
-     * Additional class name for the parent container.
-     */
+    /** Classes on the outer field wrapper. */
     parentClassName?: string;
-    /**
-     * Prefix for the class names of the inner components.
-     */
+    /** BEM-style prefix for internal class names. */
     classNamePrefix?: string;
     /**
-     * Maximum number of selectable options.
-     * **Note**: Disables inverted selection logic.
+     * Max selectable options in multi mode.
+     * Disables inverted selection when set.
      */
     maxSelectableOptions?: number;
-    /**
-     * If `true`, displays sequence numbers next to selected items.
-     * @default false
-     */
+    /** Show sequence numbers for multi selections. @default false */
     showSequence?: boolean;
-    /**
-     * Array of values to determine the order of selection.
-     */
+    /** Custom selection order (value strings). */
     selectionOrder?: string[];
-    /**
-     * @deprecated Use `required`
-     */
+    /** @deprecated Use `required` */
     isRequired?: boolean;
-    /**
-     * Callback fired when the menu is scrolled to the bottom.
-     */
+    /** Infinite scroll / async pagination callback. */
     onMenuScrollToBottom?: () => void;
     /**
-     * Total number of options in the complete dataset, including options that
-     * have not been fetched yet (async pagination). When provided AND the
-     * component is in multi-select with `enableInvertedSelection`, the trigger
-     * label "Selected (N)" uses this value instead of the count of loaded
-     * options. Leave undefined for non-paginated usage; behaviour is unchanged.
-     *
-     * The parent should pass the same total it intends "Select All" to
-     * represent on the server. During search you may either keep the
-     * unfiltered total (recommended) or pass the filtered total – the
-     * component renders whatever is given.
+     * Total options in the remote dataset (async pagination).
+     * Used for "Selected (N)" when `enableInvertedSelection` is on.
      */
     totalCount?: number;
-    /**
-     * If `true`, shows the "Select All" option in multi-select mode.
-     * @default true
-     */
+    /** Show "Select all" in multi mode. @default true */
     isSelectAllEnabled?: boolean;
-    /**
-     * If `true`, the component is read-only.
-     * @default false
-     */
+    /** Read-only — no edits. @default false */
     isReadOnly?: boolean;
-    /**
-     * The position of the search input.
-     * @default "menu"
-     */
+    /** Where search renders. @default "menu" */
     searchPosition?: "trigger" | "menu";
-    /**
-     * Content to display in the sticky footer.
-     */
+    /** Sticky menu footer slot. */
     footerContent?: ReactNode;
-    /**
-     * Content to display inside the trigger on the left.
-     */
+    /** Content left of the trigger label. */
     leftContent?: ReactNode;
-    /**
-     * Function to customize the label of an option.
-     */
+    /** Override option label resolution. */
     getOptionLabel?: (option: OptionType) => string | ReactNode;
-    /**
-     * Function to fully customize the rendering of an option.
-     */
+    /** Fully custom option row. */
     renderOption?: (props: {
         onClick: () => void;
         className: string;
         selected: boolean;
         disabled: boolean;
     }, option: OptionType) => ReactNode;
-    /**
-     * Callback fired when the menu opens.
-     */
     onMenuOpen?: () => void;
     /**
-     * Callback fired when the menu closes.
-     * @param finalValue - The final selected value when the menu closes (useful for batched updates)
-     * @param finalSelectionOrder - The final selection order (array of values) derived from finalValue array order
+     * Menu close — use for batched value commits.
+     * @param finalValue Final value when the menu closes.
+     * @param finalSelectionOrder Value order when applicable.
      */
     onMenuClose?: (finalValue?: OnChangeValue<OptionType, IsMulti>, finalSelectionOrder?: string[]) => void;
-    /**
-     * Callback fired when the clear button is clicked.
-     */
     onClearAll?: () => void;
-    /**
-     * If `true`, search will be case-insensitive.
-     * @default true
-     */
+    /** Case-insensitive search. @default true */
     ignoreCase?: boolean;
-    /**
-     * If `true`, search will ignore accents (e.g., 'e' matches 'é').
-     * @default true
-     */
+    /** Accent-insensitive search. @default true */
     ignoreAccents?: boolean;
-    /**
-     * Determines where the search match must start.
-     * @default "any"
-     */
+    /** Match position for search. @default "any" */
     matchFrom?: "any" | "start";
-    /**
-     * Function to convert an option to a string for searching.
-     * @default label
-     */
+    /** Stringify option for search. @default label */
     stringify?: (option: OptionType) => string;
-    /**
-     * If `true`, search input will be trimmed.
-     * @default true
-     */
+    /** Trim search input. @default true */
     trim?: boolean;
-    /**
-     * Custom filter function.
-     * **Note**: Disables Web Worker optimization.
-     */
+    /** Custom filter — disables Web Worker optimization. */
     filterOption?: (option: OptionType, inputValue: string) => boolean;
-    /**
-     * If `true`, enables submenu functionality (options with children).
-     * @default false
-     */
+    /** Hierarchical options (children). @default false */
     enableSubMenus?: boolean;
-    /**
-     * If `true`, enables group functionality (options with nested options).
-     * @default false
-     */
+    /** Grouped options. @default false */
     enableGroups?: boolean;
     /**
-     * If `true`, "Select All" will return an InvertedSelection object.
-     * If `false` (default), it returns an array of all options.
+     * "Select all" returns `InvertedSelection` instead of all options.
      * @default false
      */
     enableInvertedSelection?: boolean;
-    /**
-     * Error object from query/API call. When provided, shows error state instead of "No options found".
-     */
+    /** Async options error — shows retry UI instead of empty state. */
     fetchError?: Error | null;
-    /**
-     * Callback to refetch options when an error occurs.
-     * Matches React Query's refetch function signature.
-     */
+    /** Refetch callback when `fetchError` is set. */
     onRefetch?: (options?: {
         throwOnError?: boolean;
         cancelRefetch?: boolean;

package/dist/components/forms/slider/slider.js

@@ -1,29 +1,30 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import * as e from "@radix-ui/react-slider";
+import "react";
+import * as a from "@radix-ui/react-slider";
+import { createComponent as c } from "../../../lib/primitives/create-component.js";
 import { cn as b } from "../../../lib/utils.js";
 import { useImpactNovaI18n as u } from "../../../i18n/use-impact-nova-i18n.js";
-const m = c.forwardRef(({ className: r, "aria-label": i, ...a }, n) => {
-  const { t: s } = u(), l = i ?? s("aria.slider");
+const w = c("Slider", ({ className: l, "aria-label": i, ...e }, n) => {
+  const { t: s } = u(), r = i ?? s("aria.slider");
   return /* @__PURE__ */ d(
-    e.Root,
+    a.Root,
     {
       ref: n,
-      "aria-label": l,
+      "aria-label": r,
       className: b(
         "relative flex w-full touch-none select-none items-center",
-        r
+        l
       ),
-      ...a,
+      ...e,
       "data-component": "slider",
       children: [
         /* @__PURE__ */ o(
-          e.Track,
+          a.Track,
           {
             className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-brand/20",
             "data-component": "slider-track",
             children: /* @__PURE__ */ o(
-              e.Range,
+              a.Range,
               {
                 className: "absolute h-full bg-brand",
                 "data-component": "slider-range"
@@ -31,18 +32,18 @@ const m = c.forwardRef(({ className: r, "aria-label": i, ...a }, n) => {
             )
           }
         ),
-        Array.isArray(a.value || a.defaultValue) ? (a.value || a.defaultValue || []).map((f, t) => /* @__PURE__ */ o(
-          e.Thumb,
+        Array.isArray(e.value || e.defaultValue) ? (e.value || e.defaultValue || []).map((m, t) => /* @__PURE__ */ o(
+          a.Thumb,
           {
-            "aria-label": l,
+            "aria-label": r,
             className: "block h-4 w-4 rounded-full border border-brand/50 bg-canvas shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50",
             "data-component": "slider-thumb"
           },
           t
         )) : /* @__PURE__ */ o(
-          e.Thumb,
+          a.Thumb,
           {
-            "aria-label": l,
+            "aria-label": r,
             className: "block h-4 w-4 rounded-full border border-brand/50 bg-canvas shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:pointer-events-none disabled:opacity-50",
             "data-component": "slider-thumb"
           }
@@ -51,7 +52,6 @@ const m = c.forwardRef(({ className: r, "aria-label": i, ...a }, n) => {
     }
   );
 });
-m.displayName = e.Root.displayName;
 export {
-  m as Slider
+  w as Slider
 };