@skdx/react 0.28.0 → 0.30.0

package/dist/tabs/TabsContent.d.cts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { TabsContentProps } from './types.cjs';
 /**
- * Panel shown when its `value` matches the parent `Tabs`' selected value.
- * Renders `role="tabpanel"`, is unmounted while inactive unless `forceMount`
- * is set, and is a focusable landmark (`tabIndex={0}`) so keyboard users can
- * tab from the trigger straight into the panel's content — pass
- * `tabIndex={-1}` for a panel whose own content is already focusable.
+ * Panel shown when its `value` matches the parent `Tabs`' selected value; renders `role="tabpanel"`.
  *
  * @example
  * ```tsx
@@ -14,4 +10,7 @@ import type { TabsContentProps } from './types.cjs';
  * </TabsContent>
  * ```
  */
-export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsContent: {
+    ({ value, forceMount, tabIndex, ref: forwardedRef, ...props }: TabsContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/TabsContent.d.ts

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import type { TabsContentProps } from './types.js';
 /**
- * Panel shown when its `value` matches the parent `Tabs`' selected value.
- * Renders `role="tabpanel"`, is unmounted while inactive unless `forceMount`
- * is set, and is a focusable landmark (`tabIndex={0}`) so keyboard users can
- * tab from the trigger straight into the panel's content — pass
- * `tabIndex={-1}` for a panel whose own content is already focusable.
+ * Panel shown when its `value` matches the parent `Tabs`' selected value; renders `role="tabpanel"`.
  *
  * @example
  * ```tsx
@@ -14,4 +10,7 @@ import type { TabsContentProps } from './types.js';
  * </TabsContent>
  * ```
  */
-export declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsContent: {
+    ({ value, forceMount, tabIndex, ref: forwardedRef, ...props }: TabsContentProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/TabsList.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TabsListProps } from './types.cjs';
 /**
- * Container for a `Tabs`' triggers. Renders `role="tablist"` and drives
- * roving-focus keyboard navigation (Arrow Left/Right for horizontal,
- * Arrow Up/Down for vertical, plus Home/End) across its `TabsTrigger` children.
+ * Container for a `Tabs`' triggers; renders `role="tablist"` and drives roving-focus keyboard navigation.
  *
  * @example
  * ```tsx
@@ -13,4 +11,7 @@ import type { TabsListProps } from './types.cjs';
  * </TabsList>
  * ```
  */
-export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: {
+    ({ loop, ref: forwardedRef, ...props }: TabsListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/TabsList.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { TabsListProps } from './types.js';
 /**
- * Container for a `Tabs`' triggers. Renders `role="tablist"` and drives
- * roving-focus keyboard navigation (Arrow Left/Right for horizontal,
- * Arrow Up/Down for vertical, plus Home/End) across its `TabsTrigger` children.
+ * Container for a `Tabs`' triggers; renders `role="tablist"` and drives roving-focus keyboard navigation.
  *
  * @example
  * ```tsx
@@ -13,4 +11,7 @@ import type { TabsListProps } from './types.js';
  * </TabsList>
  * ```
  */
-export declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: {
+    ({ loop, ref: forwardedRef, ...props }: TabsListProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/TabsTrigger.d.cts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import type { TabsTriggerProps } from './types.cjs';
 /**
- * A single tab button. Renders `role="tab"` with `aria-selected` and
- * `data-state="active" | "inactive"`. Selecting it (click or focus under `activationMode="automatic"`)
- * updates the parent `Tabs`' value.
+ * A single tab button. Renders `role="tab"` and selects the parent `Tabs`' value when activated.
  *
  * @example
  * ```tsx
  * <TabsTrigger value="password" disabled={!hasPassword}>Password</TabsTrigger>
  * ```
  */
-export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsTrigger: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: TabsTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/TabsTrigger.d.ts

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import type { TabsTriggerProps } from './types.js';
 /**
- * A single tab button. Renders `role="tab"` with `aria-selected` and
- * `data-state="active" | "inactive"`. Selecting it (click or focus under `activationMode="automatic"`)
- * updates the parent `Tabs`' value.
+ * A single tab button. Renders `role="tab"` and selects the parent `Tabs`' value when activated.
  *
  * @example
  * ```tsx
  * <TabsTrigger value="password" disabled={!hasPassword}>Password</TabsTrigger>
  * ```
  */
-export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsTrigger: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: TabsTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/tabs/types.d.cts

@@ -1,38 +1,20 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/**
- * Why the selected tab changed: keyboard arrow/Home/End, pointer click/tap,
- * or programmatic value write.
- */
+/** Why the selected tab changed: keyboard, pointer, or programmatic value write. */
 export type TabsChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * The payload `onValueChange` receives.
- *
- * Both ends of the change, plus what drove it. `previousValue` is here because
- * a consumer reacting to a tab switch almost always needs the tab it came
- * *from* — and in a controlled `Tabs` the old value is already gone by the time
- * the handler runs. `reason` is here because `value-change` fires identically
- * whether the user arrowed onto a tab or clicked it, and a consumer that wants
- * to scroll the new panel into view only for keyboard navigation has no other
- * way to tell.
- */
+/** Payload passed to `onValueChange`: the old value, the new value, and what caused the change. */
 export interface TabsValueChangeDetail {
     /** The tab that is now selected. */
     value: string;
     /** The tab selected before this change, or `null` when nothing was. */
     previousValue: string | null;
-    /**
-     * What drove the change: `'pointer'` for a click or tap, `'keyboard'` for
-     * Enter/Space and for the focus an arrow key, Home or End moved. React never
-     * reports `'programmatic'` — a controlled `value` write is the consumer's own
-     * state moving, and echoing it back as an event would loop.
-     */
+    /** What drove the change: pointer click/tap or keyboard activation/navigation. */
     reason: TabsChangeReason;
 }
-/** @internal Shared state distributed from {@link Tabs} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Tabs} to its parts via context. */
 export interface TabsContextValue {
     baseId: string;
-    value?: string;
+    value?: string | undefined;
     /** Selects `value` and reports it, tagged with what drove the selection. */
     onValueChange: (value: string, reason: TabsChangeReason) => void;
     orientation: 'horizontal' | 'vertical';
@@ -40,25 +22,19 @@ export interface TabsContextValue {
     /** The root's `disabled`, OR-ed into every trigger's own. */
     disabled: boolean;
     /**
-     * Whether the focus currently being dispatched was moved by the tablist's own
-     * Arrow/Home/End handling. Read by a trigger's focus handler so automatic
-     * activation fires for a keyboard *browse* and not for every focus event —
-     * see `TabsList`'s keydown handler, which raises and lowers it around the
-     * synchronous `focus()` call.
+     * Whether focus was moved by the tablist's own Arrow/Home/End handling, so
+     * automatic activation ignores focus events from anywhere else.
      */
-    arrowNavigating: React.MutableRefObject<boolean>;
+    arrowNavigatingRef: React.RefObject<boolean>;
     /**
-     * The values whose panels are currently in the DOM. A trigger publishes
-     * `aria-controls` only for a panel that is actually there, and a panel is
-     * unmounted while inactive unless it sets `forceMount` — which the trigger
-     * cannot see, so the panels report themselves.
+     * Values whose panels are mounted; a trigger publishes `aria-controls` only
+     * for a panel that is actually present, since `forceMount` is invisible to it.
      */
     mountedContentValues: ReadonlySet<string>;
     setContentMounted: (value: string, mounted: boolean) => void;
     /**
-     * The tablist's single tab stop, resolved against the DOM by `TabsList`: the
-     * selected tab while it is mounted and enabled, else the first enabled tab.
-     * `null` only before that has been resolved, or when every tab is disabled.
+     * The tablist's single tab stop: the selected tab if mounted and enabled,
+     * else the first enabled tab; `null` until resolved or all disabled.
      */
     firstEnabledValue: string | null;
     setFirstEnabledValue: (value: string | null) => void;
@@ -74,85 +50,61 @@ export interface TabsItem {
      * `renderPanel` is given.
      * @default undefined — the panel renders empty.
      */
-    content?: React.ReactNode;
+    content?: React.ReactNode | undefined;
     /**
      * Excludes this tab from selection, arrow-key navigation and the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link Tabs} root. */
 export interface TabsProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * The tabs the interface renders — one derived `TabsTrigger` inside a derived
-     * `TabsList`, and one derived `TabsContent` panel each. Ignored when `children` is
-     * given, which switches to full manual composition.
+     * The tabs to render as derived triggers and panels; ignored when `children` is given.
      * @default undefined — nothing is derived; compose the list and panels as `children`.
      */
-    items?: TabsItem[];
+    items?: TabsItem[] | undefined;
     /**
-     * Renders a derived panel's body in place of the entry's `content` — a form,
-     * a lazily-loaded subtree, anything the datum cannot hold. The panel element
-     * itself, with its `role`, ids and `hidden` handling, stays the library's.
+     * Renders a derived panel's body in place of the entry's `content`, for content the item data can't hold.
      * @default undefined — the entry's `content` is rendered.
      */
-    renderPanel?: (item: TabsItem) => React.ReactNode;
+    renderPanel?: ((item: TabsItem) => React.ReactNode) | undefined;
     /**
-     * Whether arrow-key navigation wraps from the last trigger back to the first
-     * (and vice versa). Forwarded to the derived `TabsList`, which is the element
-     * that owns roving focus; ignored when `children` is given, where the prop
-     * belongs on your own `TabsList`.
+     * Whether arrow-key navigation wraps from the last trigger to the first and back.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
-     * Selected tab's value, for controlled usage. Pair with `onValueChange`.
+     * Selected tab's value, for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own selected value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initially selected tab's value, for uncontrolled usage.
      * @default undefined — falls back to the first enabled trigger.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
-     * Fires whenever the selected tab changes, controlled or not, with the new
-     * value, the one it replaced and the reason it changed. Selecting the tab
-     * already selected emits nothing.
+     * Fires when the selected tab changes, controlled or not, with the new value, the previous value, and the reason.
      * @default undefined — no-op.
      */
-    onValueChange?: (detail: TabsValueChangeDetail) => void;
+    onValueChange?: ((detail: TabsValueChangeDetail) => void) | undefined;
     /**
      * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
      * vs Arrow Up/Down for keyboard navigation between triggers.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * `'automatic'` selects a tab as soon as it receives focus (arrow-key browsing).
-     * `'manual'` only selects on Enter/Space, letting users tab through triggers
-     * without changing panels — useful when panel content is expensive to render.
-     *
-     * Pairing rule: `'automatic'` is only appropriate when a panel renders
-     * without noticeable latency, and `TabsContent` unmounts every inactive panel
-     * by default. If your panels are expensive, either set
-     * `activationMode="manual"` or set `forceMount` on every `TabsContent` — an
-     * arrow-key browse from the first tab to the sixth otherwise mounts and
-     * unmounts four subtrees on the way past.
-     *
-     * Selection follows focus only for focus that the tablist's own
-     * Arrow/Home/End handling moved, or a pointer press on the trigger. Restoring
-     * focus to a trigger — a dialog closing back onto the tab that opened it —
-     * never changes the selection.
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus; `'manual'` only selects on Enter/Space.
      * @default 'automatic'
      */
-    activationMode?: 'automatic' | 'manual';
+    activationMode?: 'automatic' | 'manual' | undefined;
     /**
-     * Disables every trigger in the tabbed interface. OR-ed with each
-     * `TabsTrigger`'s own `disabled`, never overridden.
+     * Disables every trigger; OR-ed with each `TabsTrigger`'s own `disabled`, never overridden.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link TabsList}, the roving-focus container for `TabsTrigger`s. */
 export interface TabsListProps extends PrimitivePropsWithRef<'div'> {
@@ -161,42 +113,30 @@ export interface TabsListProps extends PrimitivePropsWithRef<'div'> {
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
 /** Props for a single {@link TabsTrigger} button. */
 export interface TabsTriggerProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier matched against a sibling `TabsContent`'s `value`. */
     value: string;
     /**
-     * Excludes this trigger from selection and arrow-key navigation, and keeps it
-     * out of the tab order — it can never hold the tablist's single tab stop.
-     * OR-ed with the root's `disabled`, never overridden. Reflected as `data-disabled`
-     * and `tabIndex` in addition to `disabled`.
+     * Excludes this trigger from selection and the tab order; OR-ed with the root's `disabled` and reflected as `data-disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for a single {@link TabsContent} panel. */
 export interface TabsContentProps extends PrimitivePropsWithRef<'div'> {
     /** Unique identifier matched against the `TabsTrigger` that reveals this panel. */
     value: string;
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * inactive, instead of unmounting it. Useful for animation libraries that
-     * need the outgoing panel present in the DOM during an exit transition.
+     * Keeps this panel mounted and hidden via the `hidden` attribute instead of unmounting it while inactive.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Whether the panel itself is a tab stop.
-     *
-     * APG asks for `tabindex="0"` on a tabpanel *only when the panel contains no
-     * focusable elements*, so that a keyboard user can still reach the revealed
-     * content. Pass `-1` for a panel whose own content is focusable — a form, a
-     * link list — or you put an extra, contentless stop in front of it. Detecting
-     * focusable descendants is a DOM scan a headless component must not run on
-     * every render, so the condition is yours to state.
+     * Whether the panel itself is a tab stop; pass `-1` when the panel's own content is already focusable.
      * @default 0
      */
-    tabIndex?: 0 | -1;
+    tabIndex?: 0 | -1 | undefined;
 }

package/dist/tabs/types.d.ts

@@ -1,38 +1,20 @@
 import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/**
- * Why the selected tab changed: keyboard arrow/Home/End, pointer click/tap,
- * or programmatic value write.
- */
+/** Why the selected tab changed: keyboard, pointer, or programmatic value write. */
 export type TabsChangeReason = 'keyboard' | 'pointer' | 'programmatic';
-/**
- * The payload `onValueChange` receives.
- *
- * Both ends of the change, plus what drove it. `previousValue` is here because
- * a consumer reacting to a tab switch almost always needs the tab it came
- * *from* — and in a controlled `Tabs` the old value is already gone by the time
- * the handler runs. `reason` is here because `value-change` fires identically
- * whether the user arrowed onto a tab or clicked it, and a consumer that wants
- * to scroll the new panel into view only for keyboard navigation has no other
- * way to tell.
- */
+/** Payload passed to `onValueChange`: the old value, the new value, and what caused the change. */
 export interface TabsValueChangeDetail {
     /** The tab that is now selected. */
     value: string;
     /** The tab selected before this change, or `null` when nothing was. */
     previousValue: string | null;
-    /**
-     * What drove the change: `'pointer'` for a click or tap, `'keyboard'` for
-     * Enter/Space and for the focus an arrow key, Home or End moved. React never
-     * reports `'programmatic'` — a controlled `value` write is the consumer's own
-     * state moving, and echoing it back as an event would loop.
-     */
+    /** What drove the change: pointer click/tap or keyboard activation/navigation. */
     reason: TabsChangeReason;
 }
-/** @internal Shared state distributed from {@link Tabs} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Tabs} to its parts via context. */
 export interface TabsContextValue {
     baseId: string;
-    value?: string;
+    value?: string | undefined;
     /** Selects `value` and reports it, tagged with what drove the selection. */
     onValueChange: (value: string, reason: TabsChangeReason) => void;
     orientation: 'horizontal' | 'vertical';
@@ -40,25 +22,19 @@ export interface TabsContextValue {
     /** The root's `disabled`, OR-ed into every trigger's own. */
     disabled: boolean;
     /**
-     * Whether the focus currently being dispatched was moved by the tablist's own
-     * Arrow/Home/End handling. Read by a trigger's focus handler so automatic
-     * activation fires for a keyboard *browse* and not for every focus event —
-     * see `TabsList`'s keydown handler, which raises and lowers it around the
-     * synchronous `focus()` call.
+     * Whether focus was moved by the tablist's own Arrow/Home/End handling, so
+     * automatic activation ignores focus events from anywhere else.
      */
-    arrowNavigating: React.MutableRefObject<boolean>;
+    arrowNavigatingRef: React.RefObject<boolean>;
     /**
-     * The values whose panels are currently in the DOM. A trigger publishes
-     * `aria-controls` only for a panel that is actually there, and a panel is
-     * unmounted while inactive unless it sets `forceMount` — which the trigger
-     * cannot see, so the panels report themselves.
+     * Values whose panels are mounted; a trigger publishes `aria-controls` only
+     * for a panel that is actually present, since `forceMount` is invisible to it.
      */
     mountedContentValues: ReadonlySet<string>;
     setContentMounted: (value: string, mounted: boolean) => void;
     /**
-     * The tablist's single tab stop, resolved against the DOM by `TabsList`: the
-     * selected tab while it is mounted and enabled, else the first enabled tab.
-     * `null` only before that has been resolved, or when every tab is disabled.
+     * The tablist's single tab stop: the selected tab if mounted and enabled,
+     * else the first enabled tab; `null` until resolved or all disabled.
      */
     firstEnabledValue: string | null;
     setFirstEnabledValue: (value: string | null) => void;
@@ -74,85 +50,61 @@ export interface TabsItem {
      * `renderPanel` is given.
      * @default undefined — the panel renders empty.
      */
-    content?: React.ReactNode;
+    content?: React.ReactNode | undefined;
     /**
      * Excludes this tab from selection, arrow-key navigation and the tab order.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for the {@link Tabs} root. */
 export interface TabsProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * The tabs the interface renders — one derived `TabsTrigger` inside a derived
-     * `TabsList`, and one derived `TabsContent` panel each. Ignored when `children` is
-     * given, which switches to full manual composition.
+     * The tabs to render as derived triggers and panels; ignored when `children` is given.
      * @default undefined — nothing is derived; compose the list and panels as `children`.
      */
-    items?: TabsItem[];
+    items?: TabsItem[] | undefined;
     /**
-     * Renders a derived panel's body in place of the entry's `content` — a form,
-     * a lazily-loaded subtree, anything the datum cannot hold. The panel element
-     * itself, with its `role`, ids and `hidden` handling, stays the library's.
+     * Renders a derived panel's body in place of the entry's `content`, for content the item data can't hold.
      * @default undefined — the entry's `content` is rendered.
      */
-    renderPanel?: (item: TabsItem) => React.ReactNode;
+    renderPanel?: ((item: TabsItem) => React.ReactNode) | undefined;
     /**
-     * Whether arrow-key navigation wraps from the last trigger back to the first
-     * (and vice versa). Forwarded to the derived `TabsList`, which is the element
-     * that owns roving focus; ignored when `children` is given, where the prop
-     * belongs on your own `TabsList`.
+     * Whether arrow-key navigation wraps from the last trigger to the first and back.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
     /**
-     * Selected tab's value, for controlled usage. Pair with `onValueChange`.
+     * Selected tab's value, for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own selected value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initially selected tab's value, for uncontrolled usage.
      * @default undefined — falls back to the first enabled trigger.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
-     * Fires whenever the selected tab changes, controlled or not, with the new
-     * value, the one it replaced and the reason it changed. Selecting the tab
-     * already selected emits nothing.
+     * Fires when the selected tab changes, controlled or not, with the new value, the previous value, and the reason.
      * @default undefined — no-op.
      */
-    onValueChange?: (detail: TabsValueChangeDetail) => void;
+    onValueChange?: ((detail: TabsValueChangeDetail) => void) | undefined;
     /**
      * Layout axis, exposed as `data-orientation` and used to pick Arrow Left/Right
      * vs Arrow Up/Down for keyboard navigation between triggers.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
-    /**
-     * `'automatic'` selects a tab as soon as it receives focus (arrow-key browsing).
-     * `'manual'` only selects on Enter/Space, letting users tab through triggers
-     * without changing panels — useful when panel content is expensive to render.
-     *
-     * Pairing rule: `'automatic'` is only appropriate when a panel renders
-     * without noticeable latency, and `TabsContent` unmounts every inactive panel
-     * by default. If your panels are expensive, either set
-     * `activationMode="manual"` or set `forceMount` on every `TabsContent` — an
-     * arrow-key browse from the first tab to the sixth otherwise mounts and
-     * unmounts four subtrees on the way past.
-     *
-     * Selection follows focus only for focus that the tablist's own
-     * Arrow/Home/End handling moved, or a pointer press on the trigger. Restoring
-     * focus to a trigger — a dialog closing back onto the tab that opened it —
-     * never changes the selection.
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus; `'manual'` only selects on Enter/Space.
      * @default 'automatic'
      */
-    activationMode?: 'automatic' | 'manual';
+    activationMode?: 'automatic' | 'manual' | undefined;
     /**
-     * Disables every trigger in the tabbed interface. OR-ed with each
-     * `TabsTrigger`'s own `disabled`, never overridden.
+     * Disables every trigger; OR-ed with each `TabsTrigger`'s own `disabled`, never overridden.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for {@link TabsList}, the roving-focus container for `TabsTrigger`s. */
 export interface TabsListProps extends PrimitivePropsWithRef<'div'> {
@@ -161,42 +113,30 @@ export interface TabsListProps extends PrimitivePropsWithRef<'div'> {
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
 /** Props for a single {@link TabsTrigger} button. */
 export interface TabsTriggerProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier matched against a sibling `TabsContent`'s `value`. */
     value: string;
     /**
-     * Excludes this trigger from selection and arrow-key navigation, and keeps it
-     * out of the tab order — it can never hold the tablist's single tab stop.
-     * OR-ed with the root's `disabled`, never overridden. Reflected as `data-disabled`
-     * and `tabIndex` in addition to `disabled`.
+     * Excludes this trigger from selection and the tab order; OR-ed with the root's `disabled` and reflected as `data-disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Props for a single {@link TabsContent} panel. */
 export interface TabsContentProps extends PrimitivePropsWithRef<'div'> {
     /** Unique identifier matched against the `TabsTrigger` that reveals this panel. */
     value: string;
     /**
-     * Keep this panel mounted (hidden via the `hidden` attribute) even while
-     * inactive, instead of unmounting it. Useful for animation libraries that
-     * need the outgoing panel present in the DOM during an exit transition.
+     * Keeps this panel mounted and hidden via the `hidden` attribute instead of unmounting it while inactive.
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Whether the panel itself is a tab stop.
-     *
-     * APG asks for `tabindex="0"` on a tabpanel *only when the panel contains no
-     * focusable elements*, so that a keyboard user can still reach the revealed
-     * content. Pass `-1` for a panel whose own content is focusable — a form, a
-     * link list — or you put an extra, contentless stop in front of it. Detecting
-     * focusable descendants is a DOM scan a headless component must not run on
-     * every render, so the condition is yours to state.
+     * Whether the panel itself is a tab stop; pass `-1` when the panel's own content is already focusable.
      * @default 0
      */
-    tabIndex?: 0 | -1;
+    tabIndex?: 0 | -1 | undefined;
 }

package/dist/tag-group/TagGroup.cjs

@@ -1 +1,2 @@
-"use strict";var he=Object.create;var b=Object.defineProperty;var ve=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var Ce=Object.getPrototypeOf,Pe=Object.prototype.hasOwnProperty;var Me=(e,o)=>{for(var t in o)b(e,t,{get:o[t],enumerable:!0})},K=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of Ee(o))!Pe.call(e,n)&&n!==t&&b(e,n,{get:()=>o[n],enumerable:!(r=ve(o,n))||r.enumerable});return e};var R=(e,o,t)=>(t=e!=null?he(Ce(e)):{},K(o||!e||!e.__esModule?b(t,"default",{value:e,enumerable:!0}):t,e)),De=e=>K(b({},"__esModule",{value:!0}),e);var ke={};Me(ke,{TAG_GROUP_SELECTOR:()=>y,TAG_SELECTOR:()=>f,TagGroup:()=>S,TagGroupEmpty:()=>ce,TagGroupLabel:()=>oe,TagGroupList:()=>se,TagGroupProvider:()=>Y,focusTagNeighbor:()=>j,resolveTagNeighbor:()=>k,useOptionalTagGroupContext:()=>Z,useTagGroupContext:()=>l});module.exports=De(ke);var a=R(require("react"),1),B=require("../utils/composeRefs.cjs"),J=require("../utils/createContext.cjs"),Q=require("../utils/is-dev-mode.cjs"),W=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),X=require("../utils/useRovingFocus.cjs");var U=require("../tag/Tag.cjs"),q=require("../tag/Tag.cjs"),V=require("../tag/Tag.cjs"),u=require("react/jsx-runtime"),$=({tags:e=[],removable:o})=>(0,u.jsx)(u.Fragment,{children:e.map((t,r)=>(0,u.jsxs)(U.Tag,{index:r,label:t.label,disabled:t.disabled,onDelete:o?()=>{}:void 0,children:[t.label,o?(0,u.jsx)(V.TagDelete,{children:(0,u.jsx)(q.TagDeleteIcon,{})}):null]},t.value))});var x=require("react/jsx-runtime");function z(e,o,t){let r=(e.get(o)??0)+t;r<=0?e.delete(o):e.set(o,r),t===1&&r>1&&(0,Q.isDevMode)()&&console.warn(`[skdx] TagGroup: ${r} mounted Tags report index={${o}}. \`index\` must match render order \u2014 pass the array index from the map that produced the tags. Duplicates put more than one tag in the tab order; a gap leaves the group with none.`)}var y="[data-skdx-tag-group]",f="[data-skdx-tag]",[Y,l,Z]=(0,J.createSafeContext)("TagGroup");function k(e,o){let t=e?.closest(y)??null,r=t?Array.from(t.querySelectorAll(f)):[],n=e?r.indexOf(e):-1,p=n===-1?void 0:r[n+1];return{target:p??r[n-1]??t,index:p?o:Math.max(o-1,0)}}function j(e,o){let t=k(e,o);return t.target?.focus(),t.index}var S=a.forwardRef(({orientation:e="horizontal",loop:o=!0,disabled:t=!1,onRemove:r,tags:n,children:p,...c},ge)=>{let[I,w]=a.useState(0),[m,H]=a.useState(0),[h,N]=a.useState(void 0),[de,A]=a.useState(0),fe=(0,X.useRovingFocus)({orientation:e,loop:o,itemSelector:f,scopeSelector:y}),v=a.useRef(null),Te=(0,B.useComposedRefs)(ge,v),E=a.useRef(null),O=a.useRef(m),be=a.useCallback(s=>{w(s);let i=v.current,g=i?.ownerDocument.activeElement;i&&g&&i.contains(g)&&(E.current=g)},[]),_=a.useRef(new Map),Re=a.useCallback(s=>(H(i=>i+1),z(_.current,s,1),()=>{H(i=>i-1),z(_.current,s,-1)}),[]),xe=a.useCallback(s=>(N(s),()=>N(i=>i===s?void 0:i)),[]),Ge=a.useCallback(()=>(A(s=>s+1),()=>A(s=>s-1)),[]),ye=a.useCallback(s=>r?.(s),[r]),T=de>0,Le={"aria-label":c["aria-label"],"aria-labelledby":h??c["aria-labelledby"]},C=m===0?I:Math.min(I,m-1);return a.useEffect(()=>{let s=O.current;if(O.current=m,m>=s)return;let i=v.current,g=E.current;if(!i||!g||g.isConnected)return;let F=i.ownerDocument,P=F.activeElement;if(P&&P!==F.body&&P.isConnected)return;E.current=null;let M=Array.from(i.querySelectorAll(f)),D=M[Math.min(C,M.length-1)];(D??i).focus(),D&&w(M.indexOf(D))},[m,C]),(0,x.jsx)(Y,{tabStopIndex:C,setActiveIndex:be,register:Re,onTagRemoved:ye,count:m,labelId:h,registerLabel:xe,hasList:T,registerList:Ge,labelling:Le,orientation:e,disabled:t,children:(0,x.jsx)(G.Primitive.div,{role:T?void 0:"list","data-skdx-tag-group":"","data-orientation":e,"data-disabled":t?"":void 0,tabIndex:-1,...c,"aria-labelledby":T?void 0:h??c["aria-labelledby"],"aria-label":T?void 0:c["aria-label"],...(0,W.skdxPart)("tag-group","root",c.className),ref:Te,onKeyDown:(0,G.composeEventHandlers)(c.onKeyDown,fe),children:p??(0,x.jsx)($,{tags:n,removable:r!==void 0})})})});S.displayName="TagGroup";var d=R(require("react"),1),ee=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),oe=d.forwardRef((e,o)=>{let t=l("TagGroupLabel"),r=d.useId(),n=e.id??r,{registerLabel:p}=t;return d.useEffect(()=>p(n),[p,n]),(0,re.jsx)(te.Primitive.span,{...e,id:n,...(0,ee.skdxPart)("tag-group","label",e.className),ref:o})});oe.displayName="TagGroupLabel";var L=R(require("react"),1),ae=require("../utils/part.cjs"),ne=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),se=L.forwardRef((e,o)=>{let t=l("TagGroupList"),{registerList:r}=t;return L.useEffect(()=>r(),[r]),(0,ie.jsx)(ne.Primitive.ul,{role:"list","data-orientation":t.orientation,"data-disabled":t.disabled?"":void 0,tabIndex:-1,...t.labelling,...e,...(0,ae.skdxPart)("tag-group","list",e.className),ref:o})});se.displayName="TagGroupList";var ue=R(require("react"),1),le=require("../utils/part.cjs"),pe=require("../utils/primitive.cjs");var me=require("react/jsx-runtime"),ce=ue.forwardRef((e,o)=>l("TagGroupEmpty").count>0?null:(0,me.jsx)(pe.Primitive.div,{...e,...(0,le.skdxPart)("tag-group","empty",e.className),ref:o}));ce.displayName="TagGroupEmpty";0&&(module.exports={TAG_GROUP_SELECTOR,TAG_SELECTOR,TagGroup,TagGroupEmpty,TagGroupLabel,TagGroupList,TagGroupProvider,focusTagNeighbor,resolveTagNeighbor,useOptionalTagGroupContext,useTagGroupContext});
+'use client';
+"use strict";var Le=Object.create;var T=Object.defineProperty;var Ee=Object.getOwnPropertyDescriptor;var Ce=Object.getOwnPropertyNames;var Pe=Object.getPrototypeOf,Ne=Object.prototype.hasOwnProperty;var Se=(e,t)=>{for(var o in t)T(e,o,{get:t[o],enumerable:!0})},B=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Ce(t))!Ne.call(e,n)&&n!==o&&T(e,n,{get:()=>t[n],enumerable:!(r=Ee(t,n))||r.enumerable});return e};var N=(e,t,o)=>(o=e!=null?Le(Pe(e)):{},B(t||!e||!e.__esModule?T(o,"default",{value:e,enumerable:!0}):o,e)),ke=e=>B(T({},"__esModule",{value:!0}),e);var De={};Se(De,{TAG_GROUP_SELECTOR:()=>x,TAG_SELECTOR:()=>g,TagGroup:()=>k,TagGroupEmpty:()=>ce,TagGroupLabel:()=>oe,TagGroupList:()=>ie,TagGroupProvider:()=>Y,focusTagNeighbor:()=>j,resolveTagNeighbor:()=>S,useOptionalTagGroupContext:()=>Z,useTagGroupContext:()=>p});module.exports=ke(De);var a=N(require("react"),1),V=require("../utils/appearance.cjs"),X=require("../utils/composeRefs.cjs"),$=require("../utils/createContext.cjs"),z=require("../utils/dev-mode.cjs"),Q=require("../utils/part.cjs"),R=require("../utils/primitive.cjs"),W=require("../utils/useRovingFocus.cjs");var F=require("../badge/Badge.cjs"),K=require("../badge/Badge.cjs"),q=require("../badge/Badge.cjs"),l=require("react/jsx-runtime"),J=({tags:e=[],removable:t})=>(0,l.jsx)(l.Fragment,{children:e.map((o,r)=>(0,l.jsxs)(F.Badge,{index:r,label:o.label,disabled:o.disabled,onDelete:t?()=>{}:void 0,children:[o.label,t?(0,l.jsx)(q.BadgeDelete,{children:(0,l.jsx)(K.BadgeDeleteIcon,{})}):null]},o.value))});var b=require("react/jsx-runtime");function U(e,t,o){let r=(e.get(t)??0)+o;r<=0?e.delete(t):e.set(t,r),o===1&&r>1&&(0,z.isDevMode)()&&console.warn(`[skdx] TagGroup: ${r} mounted Tags report index={${t}}. \`index\` must match render order \u2014 pass the array index from the map that produced the tags. Duplicates put more than one tag in the tab order; a gap leaves the group with none.`)}var x="[data-skdx-tag-group]",g="[data-skdx-tag]",[Y,p,Z]=(0,$.createSafeContext)("TagGroup");function S(e,t){let o=e?.closest(x)??null,r=o?Array.from(o.querySelectorAll(g)):[],n=e?r.indexOf(e):-1,c=n===-1?void 0:r[n+1];return{target:c??r[n-1]??o,index:c?t:Math.max(t-1,0)}}function j(e,t){let o=S(e,t);return o.target?.focus(),o.index}var k=({orientation:e="horizontal",loop:t=!0,disabled:o=!1,onRemove:r,tags:n,children:c,ref:de,density:ge,...u})=>{let[D,I]=a.useState(0),[m,M]=a.useState(0),[y,A]=a.useState(void 0),[fe,O]=a.useState(0),Te=(0,W.useRovingFocus)({orientation:e,loop:t,itemSelector:g,scopeSelector:x}),v=a.useRef(null),be=(0,X.useComposedRefs)(de,v),h=a.useRef(null),H=a.useRef(m),Re=a.useCallback(s=>{I(s);let i=v.current,d=i?.ownerDocument.activeElement;i&&d&&i.contains(d)&&(h.current=d)},[]),w=a.useRef(new Map),xe=a.useCallback(s=>(M(i=>i+1),U(w.current,s,1),()=>{M(i=>i-1),U(w.current,s,-1)}),[]),Ge=a.useCallback(s=>(A(s),()=>A(i=>i===s?void 0:i)),[]),ye=a.useCallback(()=>(O(s=>s+1),()=>O(s=>s-1)),[]),ve=a.useCallback(s=>r?.(s),[r]),f=fe>0,he={"aria-label":u["aria-label"],"aria-labelledby":y??u["aria-labelledby"]},L=m===0?D:Math.min(D,m-1);return a.useEffect(()=>{let s=H.current;if(H.current=m,m>=s)return;let i=v.current,d=h.current;if(!i||!d||d.isConnected)return;let _=i.ownerDocument,E=_.activeElement;if(E&&E!==_.body&&E.isConnected)return;h.current=null;let C=Array.from(i.querySelectorAll(g)),P=C[Math.min(L,C.length-1)];(P??i).focus(),P&&I(C.indexOf(P))},[m,L]),(0,b.jsx)(Y,{tabStopIndex:L,setActiveIndex:Re,register:xe,onTagRemoved:ve,count:m,labelId:y,registerLabel:Ge,hasList:f,registerList:ye,labelling:he,orientation:e,disabled:o,children:(0,b.jsx)(R.Primitive.div,{role:f?void 0:"list","data-skdx-tag-group":"","data-orientation":e,"data-disabled":o?"":void 0,tabIndex:-1,...u,"aria-labelledby":f?void 0:y??u["aria-labelledby"],"aria-label":f?void 0:u["aria-label"],...(0,V.appearanceAttrs)({density:ge},u),...(0,Q.skdxPart)("tag-group","root",u.className),ref:be,onKeyDown:(0,R.composeEventHandlers)(u.onKeyDown,Te),children:c??(0,b.jsx)(J,{tags:n,removable:r!==void 0})})})};k.displayName="TagGroup";var G=N(require("react"),1),ee=require("../utils/part.cjs"),te=require("../utils/primitive.cjs");var re=require("react/jsx-runtime"),oe=({ref:e,...t})=>{let o=p("TagGroupLabel"),r=G.useId(),n=t.id??r,{registerLabel:c}=o;return G.useEffect(()=>c(n),[c,n]),(0,re.jsx)(te.Primitive.span,{...t,id:n,...(0,ee.skdxPart)("tag-group","label",t.className),ref:e})};oe.displayName="TagGroupLabel";var ae=N(require("react"),1),ne=require("../utils/part.cjs"),se=require("../utils/primitive.cjs");var ue=require("react/jsx-runtime"),ie=({ref:e,...t})=>{let o=p("TagGroupList"),{registerList:r}=o;return ae.useEffect(()=>r(),[r]),(0,ue.jsx)(se.Primitive.ul,{role:"list","data-orientation":o.orientation,"data-disabled":o.disabled?"":void 0,tabIndex:-1,...o.labelling,...t,...(0,ne.skdxPart)("tag-group","list",t.className),ref:e})};ie.displayName="TagGroupList";var le=require("../utils/part.cjs"),pe=require("../utils/primitive.cjs");var me=require("react/jsx-runtime"),ce=({ref:e,...t})=>p("TagGroupEmpty").count>0?null:(0,me.jsx)(pe.Primitive.div,{...t,...(0,le.skdxPart)("tag-group","empty",t.className),ref:e});ce.displayName="TagGroupEmpty";0&&(module.exports={TAG_GROUP_SELECTOR,TAG_SELECTOR,TagGroup,TagGroupEmpty,TagGroupLabel,TagGroupList,TagGroupProvider,focusTagNeighbor,resolveTagNeighbor,useOptionalTagGroupContext,useTagGroupContext});