@skdx/react 0.27.0 → 0.29.0

package/dist/command/primitives.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Primitives for `Command` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '@skdx/react/primitives/command';
+ *
+ * <Command>
+ *   <CommandInput placeholder="Search…" />
+ *   <CommandList aria-label="Commands">
+ *     <CommandLoading>Searching…</CommandLoading>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Pages">
+ *       <CommandItem value="profile">Profile</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
+export { Command } from './Command.cjs';
+export { CommandInput } from './CommandInput.cjs';
+export { CommandList } from './CommandList.cjs';
+export { CommandEmpty } from './CommandEmpty.cjs';
+export { CommandLoading } from './CommandLoading.cjs';
+export { CommandGroup } from './CommandGroup.cjs';
+export { CommandItem } from './CommandItem.cjs';
+export { CommandSeparator } from './CommandSeparator.cjs';
+export type { CommandProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandLoadingProps, CommandGroupProps, CommandItemProps, CommandSeparatorProps, } from './types.cjs';

package/dist/command/primitives.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Primitives for `Command` — manual composition escape hatch.
+ *
+ * @example
+ * ```tsx
+ * import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '@skdx/react/primitives/command';
+ *
+ * <Command>
+ *   <CommandInput placeholder="Search…" />
+ *   <CommandList aria-label="Commands">
+ *     <CommandLoading>Searching…</CommandLoading>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Pages">
+ *       <CommandItem value="profile">Profile</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
+export { Command } from './Command.js';
+export { CommandInput } from './CommandInput.js';
+export { CommandList } from './CommandList.js';
+export { CommandEmpty } from './CommandEmpty.js';
+export { CommandLoading } from './CommandLoading.js';
+export { CommandGroup } from './CommandGroup.js';
+export { CommandItem } from './CommandItem.js';
+export { CommandSeparator } from './CommandSeparator.js';
+export type { CommandProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandLoadingProps, CommandGroupProps, CommandItemProps, CommandSeparatorProps, } from './types.js';

package/dist/command/types.d.cts

@@ -1,75 +1,165 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /**
- * How a {@link Command} decides which items a search keeps: a predicate over
- * the item's `value`, or `'manual'` when the consumer mounts only the matching
- * items itself. Mirrors `ComboboxFilter`.
+ * Decides which items survive search: a predicate over `value` and `keywords`, or `'manual'` to let the consumer mount only matches; a numeric return also ranks (0 excludes, positive keeps, sorted descending).
  */
-export type CommandFilter = 'manual' | ((itemValue: string, search: string) => boolean);
-/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`) kept in {@link Command}'s mutable ref map, keyed by item id. Not part of the public API. */
+export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number);
+/** @internal Per-item metadata stored in Command's internal ref map, keyed by item id. */
 export interface CommandItemMeta {
     value: string;
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
+    disabled?: boolean | undefined;
+    onSelect?: ((value: string) => void) | undefined;
+    keywords?: readonly string[] | undefined;
 }
-/** Shape returned by the exported `useCommandContext` hook; distributed from {@link Command} to its parts via context. */
+/** @internal Context shape distributed from Command to its parts. */
 export interface CommandContextValue {
     listRef: React.RefObject<HTMLDivElement | null>;
     listId: string;
     activeId: string | null;
+    /** Rank each currently-visible item's CSS `order` should carry when `filter` also scores it; `null` leaves order untouched. */
+    itemOrder: ReadonlyMap<string, number> | null;
     setActiveId: (id: string | null) => void;
-    itemMetaRef: React.RefObject<Map<string, CommandItemMeta>>;
+    itemMeta: Map<string, CommandItemMeta>;
     registerItem: (id: string) => void;
     unregisterItem: (id: string) => void;
     itemCount: number;
     search: string;
     setSearch: (search: string) => void;
-    matches: (itemValue: string) => boolean;
+    /** Whether an item with this value (and these aliases) survives the current search. */
+    matches: (itemValue: string, keywords?: readonly string[]) => boolean;
+    /** Whether arrow navigation wraps around the ends of the item list. */
+    loop: boolean;
+    /** Whether pointer-enter is allowed to move the highlight. */
+    disablePointerSelection: boolean;
     loading: boolean;
 }
+/**
+ * One entry of a {@link CommandGroup}'s `items` — one derived `CommandItem` in the
+ * palette's list.
+ */
+export interface CommandItem {
+    /** Rendered as the item's label; also used as its value if `value` is not set. */
+    label: string;
+    /**
+     * Identifier passed to `onSelect` and matched as the highlighted item.
+     * @default undefined — the item's `label`.
+     */
+    value?: string | undefined;
+    /**
+     * Extra strings the filter matches against alongside `value`, so "Toggle theme" is findable by typing "dark mode".
+     * @default undefined — the item matches on its value alone.
+     */
+    keywords?: string[] | undefined;
+    /**
+     * Excludes the item from keyboard navigation, pointer highlighting and Enter selection.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Called when this item is activated, before Command's own `onSelect`. Both fire.
+     * @default undefined
+     */
+    onSelect?: (() => void) | undefined;
+}
+/** One group of {@link CommandProps.groups}; a group with no `label` renders its items straight into the list. */
+export interface CommandGroup {
+    /**
+     * Heading rendered above the group's items, and the group's accessible name.
+     * @default undefined — the items are rendered ungrouped.
+     */
+    label?: string | undefined;
+    /** The group's commands. */
+    items: CommandItem[];
+}
 /** Props for the {@link Command} root. */
-export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onSelect'> {
+    /**
+     * The palette's commands, rendered into the derived anatomy. Ignored when
+     * `children` is given, which switches to full manual composition.
+     * @default undefined — an empty palette.
+     */
+    groups?: CommandGroup[] | undefined;
+    /**
+     * Placeholder for the derived search input. Doubles as the derived list's
+     * accessible name, which a `role="listbox"` takes from nothing else here.
+     * @default undefined — no placeholder, and an unnamed list.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Text for the derived `CommandEmpty` part, shown when the search has no matches
+     * (not shown while `loading`).
+     * @default undefined
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Text for the derived `CommandLoading` part, announced by its live region while
+     * `loading` is set.
+     * @default undefined — no loading state is derived.
+     */
+    loadingMessage?: string | undefined;
+    /**
+     * Fires with the command that was activated. The command's own `onSelect`
+     * fires first; both run, and neither cancels the other.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: ((item: CommandItem) => void) | undefined;
+    /**
+     * Renders item contents in place of the label; the element's role, id,
+     * `data-*`, keyboard wiring and disabled state are still managed by the library.
+     * @default undefined
+     */
+    renderItem?: ((item: CommandItem) => React.ReactNode) | undefined;
     /**
      * Value of the highlighted item, for controlled usage. Pair with
      * `onValueChange`.
      * @default undefined — uncontrolled, the palette keeps the top match highlighted.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Value of the initially highlighted item, for uncontrolled usage.
      * @default undefined — the first mounted item.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the highlighted item's value whenever the highlight moves —
      * typing, arrow keys, or pointer.
      * @default undefined — no-op.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /**
      * Current search text, for controlled usage. `CommandInput` writes into this
      * as the user types.
      * @default undefined — uncontrolled, the root tracks the search internally.
      */
-    search?: string;
+    search?: string | undefined;
     /**
      * Initial search text, for uncontrolled usage.
      * @default ''
      */
-    defaultSearch?: string;
+    defaultSearch?: string | undefined;
     /**
      * Fires with the new search text whenever `CommandInput` changes.
      * @default undefined — no-op.
      */
-    onSearchChange?: (search: string) => void;
+    onSearchChange?: ((search: string) => void) | undefined;
     /**
-     * Replaces the built-in matcher (case-insensitive substring on the item's
-     * `value`) — return `true` to keep an item mounted for this search — or
-     * `'manual'` to filter nothing, when the consumer already mounts only the
-     * matching items.
+     * Replaces the built-in matcher (case-insensitive substring on `value`), or `'manual'` to filter nothing.
      * @default undefined — the built-in matcher.
      */
-    filter?: CommandFilter;
+    filter?: CommandFilter | undefined;
+    /**
+     * Wraps arrow navigation around the ends: Arrow Down from the last item
+     * highlights the first, Arrow Up from the first highlights the last.
+     * @default false
+     */
+    loop?: boolean | undefined;
+    /**
+     * Stops pointer-enter from moving the highlight. Use when the palette is
+     * keyboard-driven but the pointer rests over the list — otherwise a motionless
+     * mouse steals the highlight from arrow keys.
+     * @default false
+     */
+    disablePointerSelection?: boolean | undefined;
     /**
      * Marks results as in flight: `data-loading` on the root and
      * `aria-busy`/`data-loading` on `CommandList`, mounts `CommandLoading`, and
@@ -77,7 +167,7 @@ export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaul
      * "No results".
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
 }
 /** Props for {@link CommandInput}, the search/filter text field that drives virtual focus. */
 export interface CommandInputProps extends PrimitivePropsWithRef<'input'> {
@@ -94,7 +184,7 @@ export interface CommandGroupProps extends PrimitivePropsWithRef<'div'> {
      * Non-interactive heading rendered above the group's items.
      * @default undefined — no heading rendered.
      */
-    heading?: React.ReactNode;
+    heading?: string | undefined;
 }
 /** Props for a single {@link CommandItem}. */
 export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
@@ -104,12 +194,22 @@ export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * Excludes the item from keyboard navigation, pointer highlighting, and Enter selection.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Extra strings the root's filter matches against, alongside `value`.
+     * @default undefined — the item matches on its `value` alone.
+     */
+    keywords?: string[] | undefined;
+    /**
+     * Keeps the item mounted whatever the search, instead of unmounting when the filter rejects it.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
     /**
      * Called with `value` when the item is activated (click, Enter, or pointer + Enter).
      * @default undefined — no-op if omitted.
      */
-    onSelect?: (value: string) => void;
+    onSelect?: ((value: string) => void) | undefined;
 }
 /** Props for {@link CommandLoading}, shown only while the root's `loading` is set. */
 export interface CommandLoadingProps extends PrimitivePropsWithRef<'div'> {

package/dist/command/types.d.ts

@@ -1,75 +1,165 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /**
- * How a {@link Command} decides which items a search keeps: a predicate over
- * the item's `value`, or `'manual'` when the consumer mounts only the matching
- * items itself. Mirrors `ComboboxFilter`.
+ * Decides which items survive search: a predicate over `value` and `keywords`, or `'manual'` to let the consumer mount only matches; a numeric return also ranks (0 excludes, positive keeps, sorted descending).
  */
-export type CommandFilter = 'manual' | ((itemValue: string, search: string) => boolean);
-/** @internal Per-item bookkeeping (`value`/`disabled`/`onSelect`) kept in {@link Command}'s mutable ref map, keyed by item id. Not part of the public API. */
+export type CommandFilter = 'manual' | ((itemValue: string, search: string, keywords?: readonly string[]) => boolean | number);
+/** @internal Per-item metadata stored in Command's internal ref map, keyed by item id. */
 export interface CommandItemMeta {
     value: string;
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
+    disabled?: boolean | undefined;
+    onSelect?: ((value: string) => void) | undefined;
+    keywords?: readonly string[] | undefined;
 }
-/** Shape returned by the exported `useCommandContext` hook; distributed from {@link Command} to its parts via context. */
+/** @internal Context shape distributed from Command to its parts. */
 export interface CommandContextValue {
     listRef: React.RefObject<HTMLDivElement | null>;
     listId: string;
     activeId: string | null;
+    /** Rank each currently-visible item's CSS `order` should carry when `filter` also scores it; `null` leaves order untouched. */
+    itemOrder: ReadonlyMap<string, number> | null;
     setActiveId: (id: string | null) => void;
-    itemMetaRef: React.RefObject<Map<string, CommandItemMeta>>;
+    itemMeta: Map<string, CommandItemMeta>;
     registerItem: (id: string) => void;
     unregisterItem: (id: string) => void;
     itemCount: number;
     search: string;
     setSearch: (search: string) => void;
-    matches: (itemValue: string) => boolean;
+    /** Whether an item with this value (and these aliases) survives the current search. */
+    matches: (itemValue: string, keywords?: readonly string[]) => boolean;
+    /** Whether arrow navigation wraps around the ends of the item list. */
+    loop: boolean;
+    /** Whether pointer-enter is allowed to move the highlight. */
+    disablePointerSelection: boolean;
     loading: boolean;
 }
+/**
+ * One entry of a {@link CommandGroup}'s `items` — one derived `CommandItem` in the
+ * palette's list.
+ */
+export interface CommandItem {
+    /** Rendered as the item's label; also used as its value if `value` is not set. */
+    label: string;
+    /**
+     * Identifier passed to `onSelect` and matched as the highlighted item.
+     * @default undefined — the item's `label`.
+     */
+    value?: string | undefined;
+    /**
+     * Extra strings the filter matches against alongside `value`, so "Toggle theme" is findable by typing "dark mode".
+     * @default undefined — the item matches on its value alone.
+     */
+    keywords?: string[] | undefined;
+    /**
+     * Excludes the item from keyboard navigation, pointer highlighting and Enter selection.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Called when this item is activated, before Command's own `onSelect`. Both fire.
+     * @default undefined
+     */
+    onSelect?: (() => void) | undefined;
+}
+/** One group of {@link CommandProps.groups}; a group with no `label` renders its items straight into the list. */
+export interface CommandGroup {
+    /**
+     * Heading rendered above the group's items, and the group's accessible name.
+     * @default undefined — the items are rendered ungrouped.
+     */
+    label?: string | undefined;
+    /** The group's commands. */
+    items: CommandItem[];
+}
 /** Props for the {@link Command} root. */
-export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onSelect'> {
+    /**
+     * The palette's commands, rendered into the derived anatomy. Ignored when
+     * `children` is given, which switches to full manual composition.
+     * @default undefined — an empty palette.
+     */
+    groups?: CommandGroup[] | undefined;
+    /**
+     * Placeholder for the derived search input. Doubles as the derived list's
+     * accessible name, which a `role="listbox"` takes from nothing else here.
+     * @default undefined — no placeholder, and an unnamed list.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Text for the derived `CommandEmpty` part, shown when the search has no matches
+     * (not shown while `loading`).
+     * @default undefined
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Text for the derived `CommandLoading` part, announced by its live region while
+     * `loading` is set.
+     * @default undefined — no loading state is derived.
+     */
+    loadingMessage?: string | undefined;
+    /**
+     * Fires with the command that was activated. The command's own `onSelect`
+     * fires first; both run, and neither cancels the other.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: ((item: CommandItem) => void) | undefined;
+    /**
+     * Renders item contents in place of the label; the element's role, id,
+     * `data-*`, keyboard wiring and disabled state are still managed by the library.
+     * @default undefined
+     */
+    renderItem?: ((item: CommandItem) => React.ReactNode) | undefined;
     /**
      * Value of the highlighted item, for controlled usage. Pair with
      * `onValueChange`.
      * @default undefined — uncontrolled, the palette keeps the top match highlighted.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Value of the initially highlighted item, for uncontrolled usage.
      * @default undefined — the first mounted item.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the highlighted item's value whenever the highlight moves —
      * typing, arrow keys, or pointer.
      * @default undefined — no-op.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /**
      * Current search text, for controlled usage. `CommandInput` writes into this
      * as the user types.
      * @default undefined — uncontrolled, the root tracks the search internally.
      */
-    search?: string;
+    search?: string | undefined;
     /**
      * Initial search text, for uncontrolled usage.
      * @default ''
      */
-    defaultSearch?: string;
+    defaultSearch?: string | undefined;
     /**
      * Fires with the new search text whenever `CommandInput` changes.
      * @default undefined — no-op.
      */
-    onSearchChange?: (search: string) => void;
+    onSearchChange?: ((search: string) => void) | undefined;
     /**
-     * Replaces the built-in matcher (case-insensitive substring on the item's
-     * `value`) — return `true` to keep an item mounted for this search — or
-     * `'manual'` to filter nothing, when the consumer already mounts only the
-     * matching items.
+     * Replaces the built-in matcher (case-insensitive substring on `value`), or `'manual'` to filter nothing.
      * @default undefined — the built-in matcher.
      */
-    filter?: CommandFilter;
+    filter?: CommandFilter | undefined;
+    /**
+     * Wraps arrow navigation around the ends: Arrow Down from the last item
+     * highlights the first, Arrow Up from the first highlights the last.
+     * @default false
+     */
+    loop?: boolean | undefined;
+    /**
+     * Stops pointer-enter from moving the highlight. Use when the palette is
+     * keyboard-driven but the pointer rests over the list — otherwise a motionless
+     * mouse steals the highlight from arrow keys.
+     * @default false
+     */
+    disablePointerSelection?: boolean | undefined;
     /**
      * Marks results as in flight: `data-loading` on the root and
      * `aria-busy`/`data-loading` on `CommandList`, mounts `CommandLoading`, and
@@ -77,7 +167,7 @@ export interface CommandProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaul
      * "No results".
      * @default false
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
 }
 /** Props for {@link CommandInput}, the search/filter text field that drives virtual focus. */
 export interface CommandInputProps extends PrimitivePropsWithRef<'input'> {
@@ -94,7 +184,7 @@ export interface CommandGroupProps extends PrimitivePropsWithRef<'div'> {
      * Non-interactive heading rendered above the group's items.
      * @default undefined — no heading rendered.
      */
-    heading?: React.ReactNode;
+    heading?: string | undefined;
 }
 /** Props for a single {@link CommandItem}. */
 export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
@@ -104,12 +194,22 @@ export interface CommandItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'on
      * Excludes the item from keyboard navigation, pointer highlighting, and Enter selection.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Extra strings the root's filter matches against, alongside `value`.
+     * @default undefined — the item matches on its `value` alone.
+     */
+    keywords?: string[] | undefined;
+    /**
+     * Keeps the item mounted whatever the search, instead of unmounting when the filter rejects it.
+     * @default false
+     */
+    forceMount?: boolean | undefined;
     /**
      * Called with `value` when the item is activated (click, Enter, or pointer + Enter).
      * @default undefined — no-op if omitted.
      */
-    onSelect?: (value: string) => void;
+    onSelect?: ((value: string) => void) | undefined;
 }
 /** Props for {@link CommandLoading}, shown only while the root's `loading` is set. */
 export interface CommandLoadingProps extends PrimitivePropsWithRef<'div'> {

package/dist/date-field/DateField.cjs

@@ -1 +1,2 @@
-"use strict";var P=Object.create;var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var a in t)f(e,a,{get:t[a],enumerable:!0})},C=(e,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of x(t))!b.call(e,s)&&s!==a&&f(e,s,{get:()=>t[s],enumerable:!(n=k(t,s))||n.enumerable});return e};var E=(e,t,a)=>(a=e!=null?P(H(e)):{},C(t||!e||!e.__esModule?f(a,"default",{value:e,enumerable:!0}):a,e)),N=e=>C(f({},"__esModule",{value:!0}),e);var L={};w(L,{DateField:()=>D});module.exports=N(L);var i=E(require("react"),1),l=require("../utils/dateSegments.cjs"),h=require("../utils/part.cjs"),v=require("../utils/segmentedField.cjs"),S=require("../utils/useControllableState.cjs"),V=require("react/jsx-runtime"),D=i.forwardRef(({value:e,defaultValue:t,onValueChange:a,granularity:n="day",hourCycle:s,locale:p,...g},T)=>{let r=(0,l.resolveHourCycle)(p,s),[u=null,y]=(0,S.useControllableState)({prop:e,defaultProp:t??null,onChange:a}),[R,c]=i.useState(()=>u?(0,l.dateToValues)(u,r):{}),F=o=>(0,l.isComplete)((0,l.buildSegments)({kind:"date",granularity:n,locale:p,hourCycle:r,values:o}))?(0,l.valuesToDate)(o,r):null,d=u?u.getTime():null;return i.useEffect(()=>{c(o=>{let m=F(o);return d===null?m===null?o:{}:m!==null&&m.getTime()===d?o:(0,l.dateToValues)(new Date(d),r)})},[d,r,n,p]),(0,V.jsx)(v.SegmentedField,{family:"date-field",kind:"date",granularity:n,locale:p,hourCycle:r,values:R,onValuesChange:o=>{c(o);let m=F(o);(m?m.getTime():null)!==d&&y(m)},formValue:u?(0,l.dateToFormValue)(u,n):null,onFormReset:()=>{y(t??null),c(t?(0,l.dateToValues)(t,r):{})},...g,...(0,h.skdxPart)("date-field","root",g.className),ref:T})});D.displayName="DateField";0&&(module.exports={DateField});
+'use client';
+"use strict";var z=Object.create;var V=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var K=(e,t)=>{for(var o in t)V(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of B(t))!J.call(e,s)&&s!==o&&V(e,s,{get:()=>t[s],enumerable:!(l=A(t,s))||l.enumerable});return e};var Q=(e,t,o)=>(o=e!=null?z(G(e)):{},h(t||!e||!e.__esModule?V(o,"default",{value:e,enumerable:!0}):o,e)),U=e=>h(V({},"__esModule",{value:!0}),e);var X={};K(X,{DateField:()=>v});module.exports=U(X);var n=Q(require("react"),1),a=require("../utils/date-segments.cjs"),D=require("../utils/date-value.cjs"),x=require("../utils/part.cjs"),H=require("../utils/segmentedField.cjs"),N=require("../utils/useControllableState.cjs"),b=require("react/jsx-runtime");function W({value:e,cycle:t,granularity:o,locale:l,dateOf:s}){let[i,r]=n.useState(()=>e?(0,a.dateToValues)(e,t):{}),d=e?e.getTime():null,c=`${d}|${t}|${o}|${l??""}`,[R,y]=n.useState(c);if(R!==c){y(c);let f=s(i);d===null?f!==null&&r({}):(f===null||f.getTime()!==d)&&r((0,a.dateToValues)(new Date(d),t))}return{values:i,setValues:r,time:d}}var v=({value:e,defaultValue:t,onValueChange:o,granularity:l="day",hourCycle:s,locale:i,minDate:r,maxDate:d,invalid:c=!1,isDateUnavailable:R,ref:y,...f})=>{let O=n.useMemo(()=>e===void 0?void 0:(0,D.toDate)(e,"value"),[e]),C=n.useMemo(()=>(0,D.toDate)(t,"defaultValue"),[t]),F=n.useMemo(()=>(0,D.toDate)(r,"minDate")??void 0,[r]),g=n.useMemo(()=>(0,D.toDate)(d,"maxDate")??void 0,[d]),p=(0,a.resolveHourCycle)(i,s),[m=null,T]=(0,N.useControllableState)({prop:O,defaultProp:C??null,onChange:o}),$=n.useRef(m),P=u=>(0,a.isComplete)((0,a.buildSegments)({kind:"date",granularity:l,locale:i,hourCycle:p,values:u}))?(0,a.valuesToDate)(u,p):null,{values:k,setValues:M,time:L}=W({value:m,cycle:p,granularity:l,locale:i,dateOf:P}),w=u=>{M(u);let S=P(u);(S?S.getTime():null)!==L&&T(S)},E=(0,a.dateRangeViolation)(m,l,F,g)!==null,q=m!==null&&(R?.(m)??!1);return(0,b.jsx)(H.SegmentedField,{family:"date-field",kind:"date",granularity:l,locale:i,hourCycle:p,values:k,onValuesChange:w,invalid:c||E||q,formType:l==="day"?"date":"datetime-local",formMin:F?(0,a.dateToFormValue)(F,l):void 0,formMax:g?(0,a.dateToFormValue)(g,l):void 0,formValue:m?(0,a.dateToFormValue)(m,l):null,onFormReset:()=>{let u=C??$.current;T(u),M(u?(0,a.dateToValues)(u,p):{})},...f,...(0,x.skdxPart)("date-field","root",f.className),ref:y})};v.displayName="DateField";0&&(module.exports={DateField});

package/dist/date-field/DateField.d.cts

@@ -1,24 +1,9 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { DateFieldProps } from './types.cjs';
-/**
- * Segmented keyboard entry of a date — the typed counterpart of `Calendar`,
- * and the typed-input part of `DatePicker`. Renders a `role="group"` holding
- * one `role="spinbutton"` per segment, interleaved with the locale's own
- * separators: both the segment order and those separators come from
- * `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
- * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
- *
- * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
- * Left/Right move between segments, digits type with roll-over — typing `1`
- * then `5` into a month gives `05`, not a rejected keystroke — and
- * Backspace/Delete clear a segment back to its placeholder. `onValueChange`
- * only ever fires with a complete date or `null`, never a half-typed one.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * @example
- * ```tsx
- * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
- * ```
- */
-export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DateField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, minDate: minDateInput, maxDate: maxDateInput, invalid, isDateUnavailable, ref: forwardedRef, ...props }: Omit<DateFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/date-field/DateField.d.ts

@@ -1,24 +1,9 @@
 import * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { DateFieldProps } from './types.js';
-/**
- * Segmented keyboard entry of a date — the typed counterpart of `Calendar`,
- * and the typed-input part of `DatePicker`. Renders a `role="group"` holding
- * one `role="spinbutton"` per segment, interleaved with the locale's own
- * separators: both the segment order and those separators come from
- * `Intl.DateTimeFormat.formatToParts`, so `en-US` reads `mm/dd/yyyy` and
- * `de-DE` reads `dd.mm.yyyy` with no bundled locale table.
- *
- * Arrow Up/Down step the focused segment (wrapping at its bounds), Arrow
- * Left/Right move between segments, digits type with roll-over — typing `1`
- * then `5` into a month gives `05`, not a rejected keystroke — and
- * Backspace/Delete clear a segment back to its placeholder. `onValueChange`
- * only ever fires with a complete date or `null`, never a half-typed one.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * @example
- * ```tsx
- * <DateField aria-label="Departure" granularity="minute" locale="en-US" />
- * ```
- */
-export declare const DateField: React.ForwardRefExoticComponent<Omit<DateFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DateField: {
+    ({ value: valueInput, defaultValue: defaultValueInput, onValueChange, granularity, hourCycle, locale, minDate: minDateInput, maxDate: maxDateInput, invalid, isDateUnavailable, ref: forwardedRef, ...props }: Omit<DateFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/date-field/DateField.js

@@ -1 +1,2 @@
-import*as o from"react";import{buildSegments as h,dateToFormValue as v,dateToValues as i,isComplete as S,resolveHourCycle as V,valuesToDate as T}from"../utils/dateSegments.js";import{skdxPart as R}from"../utils/part.js";import{SegmentedField as P}from"../utils/segmentedField.js";import{useControllableState as k}from"../utils/useControllableState.js";import{jsx as x}from"react/jsx-runtime";var c=o.forwardRef(({value:D,defaultValue:s,onValueChange:g,granularity:r="day",hourCycle:y,locale:m,...d},F)=>{let t=V(m,y),[a=null,p]=k({prop:D,defaultProp:s??null,onChange:g}),[C,u]=o.useState(()=>a?i(a,t):{}),f=e=>S(h({kind:"date",granularity:r,locale:m,hourCycle:t,values:e}))?T(e,t):null,n=a?a.getTime():null;return o.useEffect(()=>{u(e=>{let l=f(e);return n===null?l===null?e:{}:l!==null&&l.getTime()===n?e:i(new Date(n),t)})},[n,t,r,m]),x(P,{family:"date-field",kind:"date",granularity:r,locale:m,hourCycle:t,values:C,onValuesChange:e=>{u(e);let l=f(e);(l?l.getTime():null)!==n&&p(l)},formValue:a?v(a,r):null,onFormReset:()=>{p(s??null),u(s?i(s,t):{})},...d,...R("date-field","root",d.className),ref:F})});c.displayName="DateField";export{c as DateField};
+'use client';
+import*as t from"react";import{buildSegments as k,dateRangeViolation as L,dateToFormValue as g,dateToValues as S,isComplete as w,resolveHourCycle as E,valuesToDate as q}from"../utils/date-segments.js";import{toDate as f}from"../utils/date-value.js";import{skdxPart as z}from"../utils/part.js";import{SegmentedField as A}from"../utils/segmentedField.js";import{useControllableState as B}from"../utils/useControllableState.js";import{jsx as J}from"react/jsx-runtime";function G({value:l,cycle:u,granularity:c,locale:e,dateOf:p}){let[n,d]=t.useState(()=>l?S(l,u):{}),o=l?l.getTime():null,m=`${o}|${u}|${c}|${e??""}`,[D,V]=t.useState(m);if(D!==m){V(m);let i=p(n);o===null?i!==null&&d({}):(i===null||i.getTime()!==o)&&d(S(new Date(o),u))}return{values:n,setValues:d,time:o}}var M=({value:l,defaultValue:u,onValueChange:c,granularity:e="day",hourCycle:p,locale:n,minDate:d,maxDate:o,invalid:m=!1,isDateUnavailable:D,ref:V,...i})=>{let h=t.useMemo(()=>l===void 0?void 0:f(l,"value"),[l]),v=t.useMemo(()=>f(u,"defaultValue"),[u]),R=t.useMemo(()=>f(d,"minDate")??void 0,[d]),y=t.useMemo(()=>f(o,"maxDate")??void 0,[o]),r=E(n,p),[s=null,C]=B({prop:h,defaultProp:v??null,onChange:c}),x=t.useRef(s),T=a=>w(k({kind:"date",granularity:e,locale:n,hourCycle:r,values:a}))?q(a,r):null,{values:H,setValues:P,time:N}=G({value:s,cycle:r,granularity:e,locale:n,dateOf:T}),b=a=>{P(a);let F=T(a);(F?F.getTime():null)!==N&&C(F)},O=L(s,e,R,y)!==null,$=s!==null&&(D?.(s)??!1);return J(A,{family:"date-field",kind:"date",granularity:e,locale:n,hourCycle:r,values:H,onValuesChange:b,invalid:m||O||$,formType:e==="day"?"date":"datetime-local",formMin:R?g(R,e):void 0,formMax:y?g(y,e):void 0,formValue:s?g(s,e):null,onFormReset:()=>{let a=v??x.current;C(a),P(a?S(a,r):{})},...i,...z("date-field","root",i.className),ref:V})};M.displayName="DateField";export{M as DateField};