@skdx/react 0.26.0

package/dist/toast/Toaster.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { ToasterOptions, ToasterProps, ToasterStore, ToasterToast } from './types.js';
+/**
+ * Default auto-dismiss duration (ms). WCAG 2.2.1 wants time limits to be
+ * adjustable or long enough to read; 5s is the floor a short toast needs, and
+ * the timer additionally pauses on hover, on focus, and while the page is
+ * hidden, so the countdown only runs while the message is actually readable.
+ */
+export declare const DEFAULT_TOAST_DURATION = 5000;
+/**
+ * Creates a toast queue: `create`/`update`/`dismiss`/`promise` callable from
+ * anywhere in your app, `max` visible at a time with the rest waiting in FIFO
+ * order. Create it once at module scope and render one {@link Toaster} for it.
+ *
+ * @example
+ * ```ts
+ * // toaster.ts
+ * export const toaster = createToaster({ max: 3, placement: 'bottom-end' });
+ *
+ * // anywhere
+ * toaster.create({ title: 'Saved', type: 'success' });
+ * ```
+ */
+export declare function createToaster(options?: ToasterOptions): ToasterStore;
+/**
+ * Subscribes to a toaster's visible toasts. Only needed if you're rendering
+ * the queue yourself instead of mounting {@link Toaster}.
+ *
+ * @example
+ * ```tsx
+ * const toasts = useToaster(toaster);
+ * ```
+ */
+export declare function useToaster(toaster: ToasterStore): readonly ToasterToast[];
+/**
+ * Renders a {@link createToaster} queue: a `ToastProvider` + `ToastViewport`
+ * region hosting one `Toast` per visible entry. Mount it once near the root
+ * of your app; everything after that is imperative
+ * (`toaster.create({ title })`) from anywhere.
+ *
+ * The viewport is a labelled `region` landmark: **F6** moves focus into it
+ * from anywhere on the page, **Shift+F6** returns focus to where it was, and
+ * focus is restored automatically when the toast holding it is removed.
+ *
+ * @example
+ * ```tsx
+ * <Toaster toaster={toaster} className="my-toast-region" />
+ * ```
+ */
+export declare function Toaster({ toaster, ...viewportProps }: ToasterProps): React.JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}

package/dist/toast/index.d.cts

@@ -0,0 +1,10 @@
+export * from './Toast.cjs';
+export { ToastProvider } from './ToastProvider.cjs';
+export { ToastViewport } from './ToastViewport.cjs';
+export { ToastTitle } from './ToastTitle.cjs';
+export { ToastDescription } from './ToastDescription.cjs';
+export { ToastAction } from './ToastAction.cjs';
+export { ToastClose } from './ToastClose.cjs';
+export { Toaster, createToaster, useToaster, DEFAULT_TOAST_DURATION } from './Toaster.cjs';
+export type { ToasterStore, ToasterOptions, ToasterProps, ToasterPromiseMessages, ToasterToast, ToasterToastAction, ToasterToastOptions, ToasterToastType, ToastPlacement, } from './types.cjs';
+export type { ToastProviderProps, ToastViewportProps, ToastProps, ToastTitleProps, ToastDescriptionProps, ToastActionProps, ToastCloseProps, } from './types.cjs';

package/dist/toast/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Toast.js';
+export { ToastProvider } from './ToastProvider.js';
+export { ToastViewport } from './ToastViewport.js';
+export { ToastTitle } from './ToastTitle.js';
+export { ToastDescription } from './ToastDescription.js';
+export { ToastAction } from './ToastAction.js';
+export { ToastClose } from './ToastClose.js';
+export { Toaster, createToaster, useToaster, DEFAULT_TOAST_DURATION } from './Toaster.js';
+export type { ToasterStore, ToasterOptions, ToasterProps, ToasterPromiseMessages, ToasterToast, ToasterToastAction, ToasterToastOptions, ToasterToastType, ToastPlacement, } from './types.js';
+export type { ToastProviderProps, ToastViewportProps, ToastProps, ToastTitleProps, ToastDescriptionProps, ToastActionProps, ToastCloseProps, } from './types.js';

package/dist/toast/region-focus.d.cts

@@ -0,0 +1,13 @@
+/**
+ * Wires the toast region's keyboard traversal and focus recovery onto
+ * `node`, and returns its own teardown.
+ *
+ * A toast never steals focus, so a keyboard user needs a way in: **F6** moves
+ * focus to the region from anywhere on the page and **Shift+F6** returns it
+ * to wherever it came from — the same landmark-hopping shortcut browsers use,
+ * and what React Aria's toast spec prescribes. Focus is also restored
+ * automatically when the toast currently holding it is removed (the
+ * last-toast-closed case), which otherwise drops focus to `<body>` and loses
+ * the user's place entirely.
+ */
+export declare function wireRegionFocus(node: HTMLElement): () => void;

package/dist/toast/region-focus.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Wires the toast region's keyboard traversal and focus recovery onto
+ * `node`, and returns its own teardown.
+ *
+ * A toast never steals focus, so a keyboard user needs a way in: **F6** moves
+ * focus to the region from anywhere on the page and **Shift+F6** returns it
+ * to wherever it came from — the same landmark-hopping shortcut browsers use,
+ * and what React Aria's toast spec prescribes. Focus is also restored
+ * automatically when the toast currently holding it is removed (the
+ * last-toast-closed case), which otherwise drops focus to `<body>` and loses
+ * the user's place entirely.
+ */
+export declare function wireRegionFocus(node: HTMLElement): () => void;

package/dist/toast/types.d.cts

@@ -0,0 +1,189 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared state distributed from {@link ToastProvider} to `ToastViewport` and every `Toast` via context. Not part of the public API. */
+export interface ToastProviderContextValue {
+    label: string;
+    duration: number;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    /** Copies a toast's text into a persistent live region so screen readers reliably announce it. */
+    announce: (message: string, priority: 'polite' | 'assertive') => void;
+}
+/** Props for {@link ToastProvider}, the app-level ancestor that supplies default duration and the accessible announcer. */
+export interface ToastProviderProps {
+    /**
+     * The app subtree that renders `ToastViewport` and any mounted `Toast`s.
+     * @default undefined — renders nothing.
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible label for the toast region announced by assistive tech.
+     * @default 'Notification'
+     */
+    label?: string;
+    /**
+     * Default auto-dismiss duration (ms), used by any `Toast` that doesn't set
+     * its own `duration`.
+     * @default 5000
+     */
+    duration?: number;
+}
+/** Props for {@link ToastViewport}, the fixed region that hosts and orders rendered toasts. */
+export interface ToastViewportProps extends PrimitivePropsWithRef<'div'> {
+}
+/** @internal Shared state distributed from a single {@link Toast} to its parts via context. Not part of the public API. */
+export interface ToastContextValue {
+    onClose: () => void;
+}
+/** Props for a single {@link Toast} notification. Mount one per notification. */
+export interface ToastProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Whether the toast is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the toast is initially open, for uncontrolled usage — since a
+     * toast is typically mounted already-visible.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the toast opens or closes, controlled or not. Drop the toast from your state here when it becomes `false`.
+     * @default undefined — no-op.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Auto-dismiss duration (ms). `Infinity` disables auto-dismiss. Falls
+     * back to the ancestor `ToastProvider`'s `duration` when unset. The timer
+     * pauses while the toast is hovered or focused.
+     * @default undefined — falls back to the ancestor `ToastProvider`'s `duration`.
+     */
+    duration?: number;
+    /**
+     * `'foreground'` interrupts the user (announced `assertive`);
+     * `'background'` does not (announced `polite`).
+     * @default 'foreground'
+     */
+    type?: 'foreground' | 'background';
+}
+/** Props for {@link ToastTitle}, the toast's heading. */
+export interface ToastTitleProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link ToastDescription}, the toast's body text. */
+export interface ToastDescriptionProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link ToastAction}, an actionable button rendered inside a toast (e.g. "Undo"). */
+export interface ToastActionProps extends PrimitivePropsWithRef<'button'> {
+    /** Describes the action for assistive tech users who can't easily reach it. */
+    altText: string;
+}
+/** Props for {@link ToastClose}, a button that dismisses the toast. */
+export interface ToastCloseProps extends PrimitivePropsWithRef<'button'> {
+}
+/**
+ * Where the toast region sits on screen. Emitted as `data-placement` on the
+ * viewport — headless, so the design layer does the actual positioning.
+ */
+export type ToastPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+/** Semantic kind of a queued toast. Drives `data-type`, the root's role, and live-region politeness. */
+export type ToasterToastType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+/** An actionable button rendered inside a queued toast (the "Undo" affordance). */
+export interface ToasterToastAction {
+    /** Visible button text. */
+    label: string;
+    /** Describes the action for assistive tech users who can't easily reach it, per `ToastAction`. */
+    altText: string;
+    /** Runs on click. The toast closes either way. */
+    onClick?: () => void;
+}
+/** What {@link ToasterStore.create} and {@link ToasterStore.update} accept. */
+export interface ToasterToastOptions {
+    /**
+     * Stable id, so a later `update`/`dismiss` can address this toast. Creating
+     * with an id that is already queued replaces that entry in place.
+     * @default undefined — generated.
+     */
+    id?: string;
+    /** Heading text, rendered as `ToastTitle`. @default undefined — no title. */
+    title?: string;
+    /** Body text, rendered as `ToastDescription`. @default undefined — no description. */
+    description?: string;
+    /** Semantic kind. @default 'info' */
+    type?: ToasterToastType;
+    /**
+     * Auto-dismiss duration (ms); `Infinity` never auto-dismisses.
+     * @default undefined — the toaster's `duration`, except `type: 'loading'`, which is `Infinity`.
+     */
+    duration?: number;
+    /** Optional action button. @default undefined — no action button. */
+    action?: ToasterToastAction;
+    /** Accessible name for the close button. @default 'Dismiss' */
+    closeLabel?: string;
+}
+/** One queued toast, as handed to the renderer. */
+export interface ToasterToast extends ToasterToastOptions {
+    id: string;
+    type: ToasterToastType;
+    /**
+     * Bumped on every `update`. Renderers key on `id:revision`, so an updated
+     * toast remounts — which is what re-announces the new text and restarts the
+     * auto-dismiss timer for the message the user is now actually reading.
+     */
+    revision: number;
+}
+/** Options for {@link createToaster}. */
+export interface ToasterOptions {
+    /**
+     * How many toasts are visible at once; the rest wait in FIFO order and
+     * appear as visible ones are dismissed.
+     * @default 3
+     */
+    max?: number;
+    /** Where the region sits, as `data-placement` on the viewport. @default 'bottom-end' */
+    placement?: ToastPlacement;
+    /** Default auto-dismiss duration (ms) for queued toasts. @default 5000 */
+    duration?: number;
+    /** Accessible label for the toast region landmark. @default 'Notifications' */
+    label?: string;
+}
+/** Messages a {@link ToasterStore.promise} call swaps between as the promise settles. */
+export interface ToasterPromiseMessages<T> {
+    /** Shown immediately, as `type: 'loading'` (no auto-dismiss). */
+    loading: ToasterToastOptions;
+    /** Shown on fulfilment, as `type: 'success'`. */
+    success: ToasterToastOptions | ((value: T) => ToasterToastOptions);
+    /** Shown on rejection, as `type: 'error'`. The rejection is re-thrown either way. */
+    error: ToasterToastOptions | ((error: unknown) => ToasterToastOptions);
+}
+/**
+ * An imperative toast queue: app code calls `create`/`dismiss` from anywhere
+ * (no React tree, no hook), and a mounted {@link Toaster} renders whatever is
+ * currently visible.
+ */
+export interface ToasterStore {
+    /** See {@link ToasterOptions.max}. */
+    readonly max: number;
+    /** See {@link ToasterOptions.placement}. */
+    readonly placement: ToastPlacement;
+    /** See {@link ToasterOptions.duration}. */
+    readonly duration: number;
+    /** See {@link ToasterOptions.label}. */
+    readonly label: string;
+    /** Subscribes to queue changes. Returns its own unsubscribe. */
+    subscribe(listener: () => void): () => void;
+    /** The currently visible toasts (at most `max`) — a stable reference until the queue changes. */
+    getToasts(): readonly ToasterToast[];
+    /** Queues a toast and returns its id. */
+    create(options?: ToasterToastOptions): string;
+    /** Merges `options` into a queued toast, bumping its revision. No-ops for an unknown id. */
+    update(id: string, options: ToasterToastOptions): void;
+    /** Removes one toast, or the whole queue when called with no id. */
+    dismiss(id?: string): void;
+    /** Shows a loading toast, then swaps it for success/error when `promise` settles. Re-throws rejections. */
+    promise<T>(promise: Promise<T>, messages: ToasterPromiseMessages<T>, options?: ToasterToastOptions): Promise<T>;
+}
+/** Props for {@link Toaster}. Everything else lands on the underlying `ToastViewport`. */
+export interface ToasterProps extends ToastViewportProps {
+    /** The queue to render, from {@link createToaster}. */
+    toaster: ToasterStore;
+}

package/dist/toast/types.d.ts

@@ -0,0 +1,189 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** @internal Shared state distributed from {@link ToastProvider} to `ToastViewport` and every `Toast` via context. Not part of the public API. */
+export interface ToastProviderContextValue {
+    label: string;
+    duration: number;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    /** Copies a toast's text into a persistent live region so screen readers reliably announce it. */
+    announce: (message: string, priority: 'polite' | 'assertive') => void;
+}
+/** Props for {@link ToastProvider}, the app-level ancestor that supplies default duration and the accessible announcer. */
+export interface ToastProviderProps {
+    /**
+     * The app subtree that renders `ToastViewport` and any mounted `Toast`s.
+     * @default undefined — renders nothing.
+     */
+    children?: React.ReactNode;
+    /**
+     * Accessible label for the toast region announced by assistive tech.
+     * @default 'Notification'
+     */
+    label?: string;
+    /**
+     * Default auto-dismiss duration (ms), used by any `Toast` that doesn't set
+     * its own `duration`.
+     * @default 5000
+     */
+    duration?: number;
+}
+/** Props for {@link ToastViewport}, the fixed region that hosts and orders rendered toasts. */
+export interface ToastViewportProps extends PrimitivePropsWithRef<'div'> {
+}
+/** @internal Shared state distributed from a single {@link Toast} to its parts via context. Not part of the public API. */
+export interface ToastContextValue {
+    onClose: () => void;
+}
+/** Props for a single {@link Toast} notification. Mount one per notification. */
+export interface ToastProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Whether the toast is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the toast is initially open, for uncontrolled usage — since a
+     * toast is typically mounted already-visible.
+     * @default true
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the toast opens or closes, controlled or not. Drop the toast from your state here when it becomes `false`.
+     * @default undefined — no-op.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Auto-dismiss duration (ms). `Infinity` disables auto-dismiss. Falls
+     * back to the ancestor `ToastProvider`'s `duration` when unset. The timer
+     * pauses while the toast is hovered or focused.
+     * @default undefined — falls back to the ancestor `ToastProvider`'s `duration`.
+     */
+    duration?: number;
+    /**
+     * `'foreground'` interrupts the user (announced `assertive`);
+     * `'background'` does not (announced `polite`).
+     * @default 'foreground'
+     */
+    type?: 'foreground' | 'background';
+}
+/** Props for {@link ToastTitle}, the toast's heading. */
+export interface ToastTitleProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link ToastDescription}, the toast's body text. */
+export interface ToastDescriptionProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link ToastAction}, an actionable button rendered inside a toast (e.g. "Undo"). */
+export interface ToastActionProps extends PrimitivePropsWithRef<'button'> {
+    /** Describes the action for assistive tech users who can't easily reach it. */
+    altText: string;
+}
+/** Props for {@link ToastClose}, a button that dismisses the toast. */
+export interface ToastCloseProps extends PrimitivePropsWithRef<'button'> {
+}
+/**
+ * Where the toast region sits on screen. Emitted as `data-placement` on the
+ * viewport — headless, so the design layer does the actual positioning.
+ */
+export type ToastPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
+/** Semantic kind of a queued toast. Drives `data-type`, the root's role, and live-region politeness. */
+export type ToasterToastType = 'info' | 'success' | 'warning' | 'error' | 'loading';
+/** An actionable button rendered inside a queued toast (the "Undo" affordance). */
+export interface ToasterToastAction {
+    /** Visible button text. */
+    label: string;
+    /** Describes the action for assistive tech users who can't easily reach it, per `ToastAction`. */
+    altText: string;
+    /** Runs on click. The toast closes either way. */
+    onClick?: () => void;
+}
+/** What {@link ToasterStore.create} and {@link ToasterStore.update} accept. */
+export interface ToasterToastOptions {
+    /**
+     * Stable id, so a later `update`/`dismiss` can address this toast. Creating
+     * with an id that is already queued replaces that entry in place.
+     * @default undefined — generated.
+     */
+    id?: string;
+    /** Heading text, rendered as `ToastTitle`. @default undefined — no title. */
+    title?: string;
+    /** Body text, rendered as `ToastDescription`. @default undefined — no description. */
+    description?: string;
+    /** Semantic kind. @default 'info' */
+    type?: ToasterToastType;
+    /**
+     * Auto-dismiss duration (ms); `Infinity` never auto-dismisses.
+     * @default undefined — the toaster's `duration`, except `type: 'loading'`, which is `Infinity`.
+     */
+    duration?: number;
+    /** Optional action button. @default undefined — no action button. */
+    action?: ToasterToastAction;
+    /** Accessible name for the close button. @default 'Dismiss' */
+    closeLabel?: string;
+}
+/** One queued toast, as handed to the renderer. */
+export interface ToasterToast extends ToasterToastOptions {
+    id: string;
+    type: ToasterToastType;
+    /**
+     * Bumped on every `update`. Renderers key on `id:revision`, so an updated
+     * toast remounts — which is what re-announces the new text and restarts the
+     * auto-dismiss timer for the message the user is now actually reading.
+     */
+    revision: number;
+}
+/** Options for {@link createToaster}. */
+export interface ToasterOptions {
+    /**
+     * How many toasts are visible at once; the rest wait in FIFO order and
+     * appear as visible ones are dismissed.
+     * @default 3
+     */
+    max?: number;
+    /** Where the region sits, as `data-placement` on the viewport. @default 'bottom-end' */
+    placement?: ToastPlacement;
+    /** Default auto-dismiss duration (ms) for queued toasts. @default 5000 */
+    duration?: number;
+    /** Accessible label for the toast region landmark. @default 'Notifications' */
+    label?: string;
+}
+/** Messages a {@link ToasterStore.promise} call swaps between as the promise settles. */
+export interface ToasterPromiseMessages<T> {
+    /** Shown immediately, as `type: 'loading'` (no auto-dismiss). */
+    loading: ToasterToastOptions;
+    /** Shown on fulfilment, as `type: 'success'`. */
+    success: ToasterToastOptions | ((value: T) => ToasterToastOptions);
+    /** Shown on rejection, as `type: 'error'`. The rejection is re-thrown either way. */
+    error: ToasterToastOptions | ((error: unknown) => ToasterToastOptions);
+}
+/**
+ * An imperative toast queue: app code calls `create`/`dismiss` from anywhere
+ * (no React tree, no hook), and a mounted {@link Toaster} renders whatever is
+ * currently visible.
+ */
+export interface ToasterStore {
+    /** See {@link ToasterOptions.max}. */
+    readonly max: number;
+    /** See {@link ToasterOptions.placement}. */
+    readonly placement: ToastPlacement;
+    /** See {@link ToasterOptions.duration}. */
+    readonly duration: number;
+    /** See {@link ToasterOptions.label}. */
+    readonly label: string;
+    /** Subscribes to queue changes. Returns its own unsubscribe. */
+    subscribe(listener: () => void): () => void;
+    /** The currently visible toasts (at most `max`) — a stable reference until the queue changes. */
+    getToasts(): readonly ToasterToast[];
+    /** Queues a toast and returns its id. */
+    create(options?: ToasterToastOptions): string;
+    /** Merges `options` into a queued toast, bumping its revision. No-ops for an unknown id. */
+    update(id: string, options: ToasterToastOptions): void;
+    /** Removes one toast, or the whole queue when called with no id. */
+    dismiss(id?: string): void;
+    /** Shows a loading toast, then swaps it for success/error when `promise` settles. Re-throws rejections. */
+    promise<T>(promise: Promise<T>, messages: ToasterPromiseMessages<T>, options?: ToasterToastOptions): Promise<T>;
+}
+/** Props for {@link Toaster}. Everything else lands on the underlying `ToastViewport`. */
+export interface ToasterProps extends ToastViewportProps {
+    /** The queue to render, from {@link createToaster}. */
+    toaster: ToasterStore;
+}

package/dist/toggle/Toggle.cjs

@@ -0,0 +1 @@
+"use strict";var P=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},f=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of u(o))!T.call(e,a)&&a!==t&&s(e,a,{get:()=>o[a],enumerable:!(r=b(o,a))||r.enumerable});return e};var k=(e,o,t)=>(t=e!=null?P(y(e)):{},f(o||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),x=e=>f(s({},"__esModule",{value:!0}),e);var R={};C(R,{Toggle:()=>p});module.exports=x(R);var i=k(require("react"),1),m=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),n=require("../utils/useControllableState.cjs"),g=require("react/jsx-runtime"),p=i.forwardRef(({pressed:e,defaultPressed:o=!1,onPressedChange:t,...r},a)=>{let[d=!1,c]=(0,n.useControllableState)({prop:e,defaultProp:o,onChange:t});return(0,g.jsx)(l.Primitive.button,{type:"button","aria-pressed":d,"data-state":d?"on":"off","data-disabled":r.disabled?"":void 0,...r,...(0,m.skdxPart)("toggle","root",r.className),ref:a,onClick:(0,l.composeEventHandlers)(r.onClick,()=>{r.disabled||c(!d)})})});p.displayName="Toggle";0&&(module.exports={Toggle});

package/dist/toggle/Toggle.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ToggleProps } from './types.cjs';
+/**
+ * A two-state button (e.g. bold in a toolbar). Renders `<button aria-pressed
+ * data-state data-disabled>`; toggles `pressed` on click (Space/Enter
+ * activation is native `<button>` behavior). Works controlled (`pressed` +
+ * `onPressedChange`) or uncontrolled (`defaultPressed`).
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultPressed aria-label="Toggle bold">
+ *   B
+ * </Toggle>
+ * ```
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toggle/Toggle.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { ToggleProps } from './types.js';
+/**
+ * A two-state button (e.g. bold in a toolbar). Renders `<button aria-pressed
+ * data-state data-disabled>`; toggles `pressed` on click (Space/Enter
+ * activation is native `<button>` behavior). Works controlled (`pressed` +
+ * `onPressedChange`) or uncontrolled (`defaultPressed`).
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultPressed aria-label="Toggle bold">
+ *   B
+ * </Toggle>
+ * ```
+ */
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toggle/Toggle.js

@@ -0,0 +1 @@
+import*as t from"react";import{skdxPart as f}from"../utils/part.js";import{composeEventHandlers as i,Primitive as m}from"../utils/primitive.js";import{useControllableState as n}from"../utils/useControllableState.js";import{jsx as g}from"react/jsx-runtime";var p=t.forwardRef(({pressed:r,defaultPressed:a=!1,onPressedChange:s,...e},l)=>{let[o=!1,d]=n({prop:r,defaultProp:a,onChange:s});return g(m.button,{type:"button","aria-pressed":o,"data-state":o?"on":"off","data-disabled":e.disabled?"":void 0,...e,...f("toggle","root",e.className),ref:l,onClick:i(e.onClick,()=>{e.disabled||d(!o)})})});p.displayName="Toggle";export{p as Toggle};

package/dist/toggle/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Toggle.cjs';
+export type { ToggleProps } from './types.cjs';

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toggle.js';
+export type { ToggleProps } from './types.js';

package/dist/toggle/types.d.cts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for the {@link Toggle} button. */
+export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Pressed state, for controlled usage. Pair with `onPressedChange`.
+     * @default undefined — uncontrolled, tracks its own pressed state internally.
+     */
+    pressed?: boolean;
+    /**
+     * Initial pressed state, for uncontrolled usage.
+     * @default false
+     */
+    defaultPressed?: boolean;
+    /**
+     * Fires with the new pressed state whenever it changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+}

package/dist/toggle/types.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for the {@link Toggle} button. */
+export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Pressed state, for controlled usage. Pair with `onPressedChange`.
+     * @default undefined — uncontrolled, tracks its own pressed state internally.
+     */
+    pressed?: boolean;
+    /**
+     * Initial pressed state, for uncontrolled usage.
+     * @default false
+     */
+    defaultPressed?: boolean;
+    /**
+     * Fires with the new pressed state whenever it changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+}

package/dist/toggle-group/ToggleGroup.cjs

@@ -0,0 +1 @@
+"use strict";var z=Object.create;var g=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(e,r)=>{for(var t in r)g(e,t,{get:r[t],enumerable:!0})},P=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of J(r))!U.call(e,o)&&o!==t&&g(e,o,{get:()=>r[o],enumerable:!(l=q(r,o))||l.enumerable});return e};var x=(e,r,t)=>(t=e!=null?z(Q(e)):{},P(r||!e||!e.__esModule?g(t,"default",{value:e,enumerable:!0}):t,e)),X=e=>P(g({},"__esModule",{value:!0}),e);var $={};W($,{ToggleGroup:()=>V,ToggleGroupItem:()=>R,ToggleGroupProvider:()=>S,useToggleGroupContext:()=>G});module.exports=X($);var a=x(require("react"),1),I=require("../utils/composeRefs.cjs"),C=require("../utils/createContext.cjs"),h=require("../utils/part.cjs"),m=require("../utils/primitive.cjs"),k=require("../utils/useControllableState.cjs"),p=require("../utils/useRovingFocus.cjs"),y=require("react/jsx-runtime"),Y="[data-skdx-toggle-group-item]:not([disabled])",Z='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[S,G]=(0,C.createSafeContext)("ToggleGroup"),V=a.forwardRef((e,r)=>{let{type:t,value:l,defaultValue:o,onValueChange:n,disabled:s=!1,orientation:d="horizontal",loop:L=!0,...c}=e,H=a.useMemo(()=>l===void 0?void 0:Array.isArray(l)?l:[l].filter(Boolean),[l]),[N=[],u]=(0,k.useControllableState)({prop:H,defaultProp:o===void 0?[]:Array.isArray(o)?o:[o],onChange:i=>{n?.(t==="single"?i[0]??"":i)}}),K=(0,p.useRovingFocus)({orientation:d,loop:L,itemSelector:"[data-skdx-toggle-group-item]"}),T=a.useRef(null),O=(0,I.useComposedRefs)(r,T),[v,E]=a.useState(null);(0,p.useRovingTabStop)(T,Z,"data-value",v,E),(0,p.useRovingTabStop)(T,Y,"data-value",v,E);let _=a.useCallback(i=>{u((b=[])=>t==="single"?[i]:[...b,i])},[u,t]),B=a.useCallback(i=>{u((b=[])=>b.filter(F=>F!==i))},[u]);return(0,y.jsx)(S,{type:t,value:N,disabled:s,onItemActivate:_,onItemDeactivate:B,firstEnabledValue:v,children:(0,y.jsx)(m.Primitive.div,{role:"group","data-orientation":d,"data-disabled":s?"":void 0,...c,...(0,h.skdxPart)("toggle-group","root",c.className),ref:O,onKeyDown:(0,m.composeEventHandlers)(c.onKeyDown,K)})})});V.displayName="ToggleGroup";var D=x(require("react"),1),w=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),A=require("../utils/useRovingFocus.cjs");var M=require("react/jsx-runtime"),R=D.forwardRef(({value:e,disabled:r,...t},l)=>{let o=G("ToggleGroupItem"),n=o.value.includes(e),s=o.disabled||r||!1,d=o.firstEnabledValue===null?n&&!s&&o.value[0]===e:o.firstEnabledValue===e;return(0,M.jsx)(f.Primitive.button,{type:"button","aria-pressed":n,"data-skdx-toggle-group-item":"","data-state":n?"on":"off","data-disabled":s?"":void 0,"data-value":e,disabled:s,tabIndex:(0,A.rovingTabIndex)(o.firstEnabledValue!==null||o.value.length>0,d,s),...t,...(0,w.skdxPart)("toggle-group","item",t.className),ref:l,onClick:(0,f.composeEventHandlers)(t.onClick,()=>{n?o.type==="multiple"&&o.onItemDeactivate(e):o.onItemActivate(e)})})});R.displayName="ToggleGroupItem";0&&(module.exports={ToggleGroup,ToggleGroupItem,ToggleGroupProvider,useToggleGroupContext});

package/dist/toggle-group/ToggleGroup.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { ToggleGroupContextValue } from './types.cjs';
+export declare const ToggleGroupProvider: {
+    (props: ToggleGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useToggleGroupContext: (consumerName: string) => ToggleGroupContextValue;
+/**
+ * A group of `ToggleGroupItem`s with either single (radio-like) or multiple
+ * (checkbox-like) selection, chosen via `type`. Renders `role="group"` with
+ * `data-orientation` and `data-disabled`. Manages roving tabindex and
+ * arrow-key/Home/End navigation between items (per `orientation`/`loop`) —
+ * in `'single'` mode the pressed item is the sole tab stop (or the first
+ * enabled item, when none is pressed); in `'multiple'` mode the first pressed
+ * item is.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" defaultValue="left" aria-label="Text alignment">
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export declare const ToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.cjs").ToggleGroupSingleProps, "ref"> | Omit<import("./types.cjs").ToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { ToggleGroupContextValue } from './types.js';
+export declare const ToggleGroupProvider: {
+    (props: ToggleGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useToggleGroupContext: (consumerName: string) => ToggleGroupContextValue;
+/**
+ * A group of `ToggleGroupItem`s with either single (radio-like) or multiple
+ * (checkbox-like) selection, chosen via `type`. Renders `role="group"` with
+ * `data-orientation` and `data-disabled`. Manages roving tabindex and
+ * arrow-key/Home/End navigation between items (per `orientation`/`loop`) —
+ * in `'single'` mode the pressed item is the sole tab stop (or the first
+ * enabled item, when none is pressed); in `'multiple'` mode the first pressed
+ * item is.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="single" defaultValue="left" aria-label="Text alignment">
+ *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export declare const ToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.js").ToggleGroupSingleProps, "ref"> | Omit<import("./types.js").ToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/toggle-group/ToggleGroup.js

@@ -0,0 +1 @@
+import*as o from"react";import{useComposedRefs as S}from"../utils/composeRefs.js";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as D}from"../utils/part.js";import{composeEventHandlers as w,Primitive as A}from"../utils/primitive.js";import{useControllableState as M}from"../utils/useControllableState.js";import{useRovingFocus as L,useRovingTabStop as T}from"../utils/useRovingFocus.js";import{jsx as v}from"react/jsx-runtime";var H="[data-skdx-toggle-group-item]:not([disabled])",N='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[K,b]=V("ToggleGroup"),O=o.forwardRef((t,d)=>{let{type:r,value:a,defaultValue:e,onValueChange:l,disabled:n=!1,orientation:i="horizontal",loop:R=!0,...u}=t,E=o.useMemo(()=>a===void 0?void 0:Array.isArray(a)?a:[a].filter(Boolean),[a]),[P=[],p]=M({prop:E,defaultProp:e===void 0?[]:Array.isArray(e)?e:[e],onChange:s=>{l?.(r==="single"?s[0]??"":s)}}),x=L({orientation:i,loop:R,itemSelector:"[data-skdx-toggle-group-item]"}),g=o.useRef(null),I=S(d,g),[m,c]=o.useState(null);T(g,N,"data-value",m,c),T(g,H,"data-value",m,c);let C=o.useCallback(s=>{p((f=[])=>r==="single"?[s]:[...f,s])},[p,r]),h=o.useCallback(s=>{p((f=[])=>f.filter(k=>k!==s))},[p]);return v(K,{type:r,value:P,disabled:n,onItemActivate:C,onItemDeactivate:h,firstEnabledValue:m,children:v(A.div,{role:"group","data-orientation":i,"data-disabled":n?"":void 0,...u,...D("toggle-group","root",u.className),ref:I,onKeyDown:w(u.onKeyDown,x)})})});O.displayName="ToggleGroup";import*as y from"react";import{skdxPart as _}from"../utils/part.js";import{composeEventHandlers as B,Primitive as F}from"../utils/primitive.js";import{rovingTabIndex as z}from"../utils/useRovingFocus.js";import{jsx as q}from"react/jsx-runtime";var G=y.forwardRef(({value:t,disabled:d,...r},a)=>{let e=b("ToggleGroupItem"),l=e.value.includes(t),n=e.disabled||d||!1,i=e.firstEnabledValue===null?l&&!n&&e.value[0]===t:e.firstEnabledValue===t;return q(F.button,{type:"button","aria-pressed":l,"data-skdx-toggle-group-item":"","data-state":l?"on":"off","data-disabled":n?"":void 0,"data-value":t,disabled:n,tabIndex:z(e.firstEnabledValue!==null||e.value.length>0,i,n),...r,..._("toggle-group","item",r.className),ref:a,onClick:B(r.onClick,()=>{l?e.type==="multiple"&&e.onItemDeactivate(t):e.onItemActivate(t)})})});G.displayName="ToggleGroupItem";export{O as ToggleGroup,G as ToggleGroupItem,K as ToggleGroupProvider,b as useToggleGroupContext};