@skdx/react-blocks 0.34.0 → 0.36.0

package/dist/conversation-list/types.d.ts

@@ -0,0 +1,94 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** One conversation or thread row rendered by the {@link ConversationList} block. */
+export interface ConversationListItem {
+    /** Identifier committed as the list's selected value when this row is chosen. */
+    id: string;
+    /** Primary line of the row, and the text the list's typeahead matches on. */
+    title: string;
+    /**
+     * Secondary line under the title, clamped by the skin to two lines.
+     * @default undefined — no preview line renders in the row.
+     */
+    preview?: string | undefined;
+    /**
+     * Instant rendered as a relative timestamp in the row's meta column.
+     * @default undefined — no timestamp renders in the row.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Marks the row as not yet read, mirrored to `data-unread` on the option.
+     * @default false
+     */
+    unread?: boolean | undefined;
+    /**
+     * Short count or status text rendered into a small badge beside the timestamp.
+     * @default undefined — no badge renders in the row.
+     */
+    badge?: string | undefined;
+    /**
+     * Heading this row belongs under; rows sharing it render inside one group.
+     * @default undefined — the row renders ungrouped, ahead of every group.
+     */
+    group?: string | undefined;
+    /**
+     * Excludes this row from selection and from keyboard and typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
+/** Props for the {@link ConversationList} block. */
+export interface ConversationListProps extends React.ComponentPropsWithRef<'div'> {
+    /** The conversations to render, in order, each one a selectable listbox option. */
+    items: ReadonlyArray<ConversationListItem>;
+    /**
+     * Selected conversation's id for controlled usage, paired with `onValueChange`.
+     * @default undefined — uncontrolled, tracking the selected id internally.
+     */
+    value?: string | undefined;
+    /**
+     * Conversation selected on first render, for uncontrolled usage of the list.
+     * @default undefined — no conversation is selected until one is chosen.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the newly selected conversation's id whenever the selection moves.
+     * @default undefined — the selection change is not reported anywhere.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Accessible name of the listbox holding the conversation rows.
+     * @default 'Conversations'
+     */
+    label?: string | undefined;
+    /**
+     * Visually hidden text appended to an unread row's title, so the mark is spoken.
+     * @default 'Unread'
+     */
+    unreadLabel?: string | undefined;
+    /**
+     * Heading of the empty state shown when `items` is empty and nothing is loading.
+     * @default 'No conversations'
+     */
+    emptyTitle?: string | undefined;
+    /**
+     * Supporting copy rendered under the empty state's heading, explaining the gap.
+     * @default undefined — the empty state renders its heading alone.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Replaces the rows with decorative placeholder lines and marks the root `aria-busy`.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Reference instant the relative timestamps are measured from, to control re-renders.
+     * @default undefined — each timestamp reads the clock as it renders.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative leading region for a row, such as an avatar or a status dot.
+     * @default undefined — no leading region renders in any row.
+     */
+    renderLeading?: ((item: ConversationListItem) => React.ReactNode) | undefined;
+}

package/dist/empty-state/EmptyState.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var g=Object.create;var d=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var a in t)d(e,a,{get:t[a],enumerable:!0})},c=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!P.call(e,s)&&s!==a&&d(e,s,{get:()=>t[s],enumerable:!(r=k(t,s))||r.enumerable});return e};var $=(e,t,a)=>(a=e!=null?g(S(e)):{},c(t||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),b=e=>c(d({},"__esModule",{value:!0}),e);var R={};E(R,{EmptyState:()=>m});module.exports=b(R);var y=$(require("react"),1),p=require("@skdx/react");function N(...e){let t="";for(let a of e)a&&(t=t?`${t} ${a}`:a);return t}function n(e,t,a){let r=t==="root",s=r?`skdx-${e}`:`skdx-${e}__${t}`,o={className:N(s,a),"data-part":t};return r&&(o["data-skdx-component"]=e),o}var i=require("react/jsx-runtime"),m=({title:e,description:t,icon:a,actions:r,headingLevel:s=3,size:o,align:x="center",children:u,...l})=>{let f=y.useId();return(0,i.jsxs)("div",{"data-size":o,"data-align":x,...l,...n("empty-state","root",l.className),children:[a?(0,i.jsx)("div",{"aria-hidden":"true",...n("empty-state","icon"),children:a}):null,(0,i.jsx)(p.Heading,{as:`h${s}`,id:f,...n("empty-state","title"),children:e}),t?(0,i.jsx)(p.Text,{as:"p",tone:"muted",...n("empty-state","description"),children:t}):null,u?(0,i.jsx)("div",{...n("empty-state","content"),children:u}):null,r?(0,i.jsx)("div",{...n("empty-state","actions"),children:r}):null]})};m.displayName="EmptyState";0&&(module.exports={EmptyState});

package/dist/empty-state/EmptyState.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { EmptyStateProps } from './types.cjs';
+/**
+ * Placeholder block for a region with nothing to show — no content yet, no
+ * results, first use, or disconnected — composing a Heading, a Text
+ * description and consumer-supplied icon and actions.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<InboxIcon />}
+ *   title="No invoices yet"
+ *   description="Invoices you create will show up here."
+ *   actions={<Button>Create invoice</Button>}
+ * />
+ * ```
+ */
+export declare const EmptyState: {
+    ({ title, description, icon, actions, headingLevel, size, align, children, ...props }: EmptyStateProps): React.ReactNode;
+    displayName: string;
+};

package/dist/empty-state/EmptyState.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { EmptyStateProps } from './types.js';
+/**
+ * Placeholder block for a region with nothing to show — no content yet, no
+ * results, first use, or disconnected — composing a Heading, a Text
+ * description and consumer-supplied icon and actions.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<InboxIcon />}
+ *   title="No invoices yet"
+ *   description="Invoices you create will show up here."
+ *   actions={<Button>Create invoice</Button>}
+ * />
+ * ```
+ */
+export declare const EmptyState: {
+    ({ title, description, icon, actions, headingLevel, size, align, children, ...props }: EmptyStateProps): React.ReactNode;
+    displayName: string;
+};

package/dist/empty-state/EmptyState.js

@@ -0,0 +1,2 @@
+'use client';
+import*as m from"react";import{Heading as x,Text as f}from"@skdx/react";function y(...a){let t="";for(let e of a)e&&(t=t?`${t} ${e}`:e);return t}function s(a,t,e){let r=t==="root",o=r?`skdx-${a}`:`skdx-${a}__${t}`,n={className:y(o,e),"data-part":t};return r&&(n["data-skdx-component"]=a),n}import{jsx as i,jsxs as g}from"react/jsx-runtime";var u=({title:a,description:t,icon:e,actions:r,headingLevel:o=3,size:n,align:l="center",children:d,...p})=>{let c=m.useId();return g("div",{"data-size":n,"data-align":l,...p,...s("empty-state","root",p.className),children:[e?i("div",{"aria-hidden":"true",...s("empty-state","icon"),children:e}):null,i(x,{as:`h${o}`,id:c,...s("empty-state","title"),children:a}),t?i(f,{as:"p",tone:"muted",...s("empty-state","description"),children:t}):null,d?i("div",{...s("empty-state","content"),children:d}):null,r?i("div",{...s("empty-state","actions"),children:r}):null]})};u.displayName="EmptyState";export{u as EmptyState};

package/dist/empty-state/index.d.cts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.cjs';
+export type { EmptyStateProps } from './types.cjs';

package/dist/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState.js';
+export type { EmptyStateProps } from './types.js';

package/dist/empty-state/types.d.cts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+/** Props for the {@link EmptyState} block. */
+export interface EmptyStateProps extends React.ComponentPropsWithRef<'div'> {
+    /** Heading text naming the empty region, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining why the region is empty.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Decorative illustration or glyph rendered above the title; always `aria-hidden`.
+     * @default undefined — no icon region renders.
+     */
+    icon?: React.ReactNode | undefined;
+    /**
+     * Primary and secondary controls the consumer supplies, rendered below the content.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * Outline level of the derived title heading, from `1` down to `6`.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * Visual size rung, mirrored to `data-size`; the skin scales the icon, spacing and title by it.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Text and content alignment rung, mirrored to `data-align`.
+     * @default 'center'
+     */
+    align?: 'center' | 'start' | (string & {}) | undefined;
+}

package/dist/empty-state/types.d.ts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+/** Props for the {@link EmptyState} block. */
+export interface EmptyStateProps extends React.ComponentPropsWithRef<'div'> {
+    /** Heading text naming the empty region, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining why the region is empty.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Decorative illustration or glyph rendered above the title; always `aria-hidden`.
+     * @default undefined — no icon region renders.
+     */
+    icon?: React.ReactNode | undefined;
+    /**
+     * Primary and secondary controls the consumer supplies, rendered below the content.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * Outline level of the derived title heading, from `1` down to `6`.
+     * @default 3
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * Visual size rung, mirrored to `data-size`; the skin scales the icon, spacing and title by it.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Text and content alignment rung, mirrored to `data-align`.
+     * @default 'center'
+     */
+    align?: 'center' | 'start' | (string & {}) | undefined;
+}

package/dist/filter-bar/FilterBar.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var R=(r,t)=>{for(var e in t)c(r,e,{get:t[e],enumerable:!0})},T=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!N.call(r,i)&&i!==e&&c(r,i,{get:()=>t[i],enumerable:!(s=h(t,i))||s.enumerable});return r};var $=r=>T(c({},"__esModule",{value:!0}),r);var S={};R(S,{FilterBar:()=>p});module.exports=$(S);var o=require("@skdx/react"),f=require("@skdx/react/primitives/text-field");function C(...r){let t="";for(let e of r)e&&(t=t?`${t} ${e}`:e);return t}function l(r,t,e){let s=t==="root",i=s?`skdx-${r}`:`skdx-${r}__${t}`,n={className:C(i,e),"data-part":t};return s&&(n["data-skdx-component"]=r),n}var a=require("react/jsx-runtime"),p=({label:r="Filters",searchLabel:t,searchPlaceholder:e,searchValue:s,defaultSearchValue:i="",onSearchValueChange:n,clearSearchLabel:F="Clear search",activeFilters:k,activeFiltersLabel:B="Active filters",onRemoveFilter:y,onClear:x,clearLabel:P="Clear filters",actions:m,children:b,...v})=>{let u=k??[];return(0,a.jsxs)("div",{"aria-label":r,...v,...l("filter-bar","root",v.className),children:[t?(0,a.jsx)("div",{...l("filter-bar","search"),children:(0,a.jsxs)(o.TextField,{value:s,defaultValue:i,onValueChange:n,children:[(0,a.jsx)(f.TextFieldInput,{type:"search","aria-label":t,placeholder:e}),(0,a.jsx)(f.TextFieldClearButton,{label:F})]})}):null,b?(0,a.jsx)("div",{...l("filter-bar","filters"),children:b}):null,m?(0,a.jsx)("div",{...l("filter-bar","actions"),children:m}):null,u.length>0?(0,a.jsxs)("div",{...l("filter-bar","active"),children:[(0,a.jsx)(o.TagGroup,{"aria-label":B,tags:u.map(d=>({value:d.id,label:d.label})),onRemove:d=>{let g=u[d.index];g&&y?.(g)},...l("filter-bar","tags")}),x?(0,a.jsx)(o.Button,{variant:"ghost",size:"sm",onClick:x,...l("filter-bar","clear"),children:P}):null]}):null]})};p.displayName="FilterBar";0&&(module.exports={FilterBar});

package/dist/filter-bar/FilterBar.d.cts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { FilterBarProps } from './types.cjs';
+/**
+ * Filtering surface above a table, list, card grid or report: a search field,
+ * the consumer's filter controls, the applied filters as removable tags, and
+ * a clear action. Composes TextField, TagGroup and Button.
+ *
+ * @example
+ * ```tsx
+ * <FilterBar
+ *   searchLabel="Search invoices"
+ *   activeFilters={[{ id: 'status', label: 'Status: Overdue' }]}
+ *   onRemoveFilter={(filter) => removeFilter(filter.id)}
+ *   onClear={() => clearFilters()}
+ * >
+ *   <Select aria-label="Status" />
+ * </FilterBar>
+ * ```
+ */
+export declare const FilterBar: {
+    ({ label, searchLabel, searchPlaceholder, searchValue, defaultSearchValue, onSearchValueChange, clearSearchLabel, activeFilters, activeFiltersLabel, onRemoveFilter, onClear, clearLabel, actions, children, ...props }: FilterBarProps): React.ReactNode;
+    displayName: string;
+};

package/dist/filter-bar/FilterBar.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { FilterBarProps } from './types.js';
+/**
+ * Filtering surface above a table, list, card grid or report: a search field,
+ * the consumer's filter controls, the applied filters as removable tags, and
+ * a clear action. Composes TextField, TagGroup and Button.
+ *
+ * @example
+ * ```tsx
+ * <FilterBar
+ *   searchLabel="Search invoices"
+ *   activeFilters={[{ id: 'status', label: 'Status: Overdue' }]}
+ *   onRemoveFilter={(filter) => removeFilter(filter.id)}
+ *   onClear={() => clearFilters()}
+ * >
+ *   <Select aria-label="Status" />
+ * </FilterBar>
+ * ```
+ */
+export declare const FilterBar: {
+    ({ label, searchLabel, searchPlaceholder, searchValue, defaultSearchValue, onSearchValueChange, clearSearchLabel, activeFilters, activeFiltersLabel, onRemoveFilter, onClear, clearLabel, actions, children, ...props }: FilterBarProps): React.ReactNode;
+    displayName: string;
+};

package/dist/filter-bar/FilterBar.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as P,TagGroup as h,TextField as A}from"@skdx/react";import{TextFieldClearButton as N,TextFieldInput as R}from"@skdx/react/primitives/text-field";function y(...e){let t="";for(let a of e)a&&(t=t?`${t} ${a}`:a);return t}function r(e,t,a){let l=t==="root",n=l?`skdx-${e}`:`skdx-${e}__${t}`,s={className:y(n,a),"data-part":t};return l&&(s["data-skdx-component"]=e),s}import{jsx as i,jsxs as f}from"react/jsx-runtime";var b=({label:e="Filters",searchLabel:t,searchPlaceholder:a,searchValue:l,defaultSearchValue:n="",onSearchValueChange:s,clearSearchLabel:v="Clear search",activeFilters:g,activeFiltersLabel:F="Active filters",onRemoveFilter:k,onClear:u,clearLabel:B="Clear filters",actions:c,children:p,...x})=>{let d=g??[];return f("div",{"aria-label":e,...x,...r("filter-bar","root",x.className),children:[t?i("div",{...r("filter-bar","search"),children:f(A,{value:l,defaultValue:n,onValueChange:s,children:[i(R,{type:"search","aria-label":t,placeholder:a}),i(N,{label:v})]})}):null,p?i("div",{...r("filter-bar","filters"),children:p}):null,c?i("div",{...r("filter-bar","actions"),children:c}):null,d.length>0?f("div",{...r("filter-bar","active"),children:[i(h,{"aria-label":F,tags:d.map(o=>({value:o.id,label:o.label})),onRemove:o=>{let m=d[o.index];m&&k?.(m)},...r("filter-bar","tags")}),u?i(P,{variant:"ghost",size:"sm",onClick:u,...r("filter-bar","clear"),children:B}):null]}):null]})};b.displayName="FilterBar";export{b as FilterBar};

package/dist/filter-bar/index.d.cts

@@ -0,0 +1,2 @@
+export { FilterBar } from './FilterBar.cjs';
+export type { FilterBarFilter, FilterBarProps } from './types.cjs';

package/dist/filter-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterBar } from './FilterBar.js';
+export type { FilterBarFilter, FilterBarProps } from './types.js';

package/dist/filter-bar/types.d.cts

@@ -0,0 +1,81 @@
+import type * as React from 'react';
+/** One applied filter rendered as a removable tag by the {@link FilterBar} block. */
+export interface FilterBarFilter {
+    /** Unique identifier, passed back to `onRemoveFilter` and used as the tag's key. */
+    id: string;
+    /** Text rendered on the tag and read by its remove control's accessible name. */
+    label: string;
+}
+/** Props for the {@link FilterBar} block. */
+export interface FilterBarProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Accessible name of the root region, written to `aria-label`.
+     * @default 'Filters'
+     */
+    label?: string | undefined;
+    /**
+     * Accessible name of the search field; providing it renders the search region.
+     * @default undefined — no search region renders.
+     */
+    searchLabel?: string | undefined;
+    /**
+     * Placeholder shown in the empty search field.
+     * @default undefined — no placeholder renders.
+     */
+    searchPlaceholder?: string | undefined;
+    /**
+     * Current search text, for controlled usage; pair with `onSearchValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    searchValue?: string | undefined;
+    /**
+     * Initial search text, for uncontrolled usage — seeds the internally-tracked value.
+     * @default ''
+     */
+    defaultSearchValue?: string | undefined;
+    /**
+     * Fires with the new text whenever the search field changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onSearchValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Accessible name of the search field's clear button.
+     * @default 'Clear search'
+     */
+    clearSearchLabel?: string | undefined;
+    /**
+     * The applied filters, in display order, rendered as removable tags; an empty or omitted list renders no active region.
+     * @default undefined — no active region renders.
+     */
+    activeFilters?: ReadonlyArray<FilterBarFilter> | undefined;
+    /**
+     * Accessible name of the active-filters tag list.
+     * @default 'Active filters'
+     */
+    activeFiltersLabel?: string | undefined;
+    /**
+     * Fires with the removed filter when its tag's remove control is activated.
+     * @default undefined — no-op.
+     */
+    onRemoveFilter?: ((filter: FilterBarFilter) => void) | undefined;
+    /**
+     * Fires when the clear-filters button is activated; providing it renders the button while filters are active.
+     * @default undefined — no clear button renders.
+     */
+    onClear?: (() => void) | undefined;
+    /**
+     * Text rendered on the clear-filters button.
+     * @default 'Clear filters'
+     */
+    clearLabel?: string | undefined;
+    /**
+     * Controls rendered at the end of the bar, such as a "Save view" button.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * The consumer's filter controls (Select, DatePicker, Combobox…), laid out in the filters region.
+     * @default undefined — no filters region renders.
+     */
+    children?: React.ReactNode | undefined;
+}

package/dist/filter-bar/types.d.ts

@@ -0,0 +1,81 @@
+import type * as React from 'react';
+/** One applied filter rendered as a removable tag by the {@link FilterBar} block. */
+export interface FilterBarFilter {
+    /** Unique identifier, passed back to `onRemoveFilter` and used as the tag's key. */
+    id: string;
+    /** Text rendered on the tag and read by its remove control's accessible name. */
+    label: string;
+}
+/** Props for the {@link FilterBar} block. */
+export interface FilterBarProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Accessible name of the root region, written to `aria-label`.
+     * @default 'Filters'
+     */
+    label?: string | undefined;
+    /**
+     * Accessible name of the search field; providing it renders the search region.
+     * @default undefined — no search region renders.
+     */
+    searchLabel?: string | undefined;
+    /**
+     * Placeholder shown in the empty search field.
+     * @default undefined — no placeholder renders.
+     */
+    searchPlaceholder?: string | undefined;
+    /**
+     * Current search text, for controlled usage; pair with `onSearchValueChange`.
+     * @default undefined — uncontrolled, tracks its own value internally.
+     */
+    searchValue?: string | undefined;
+    /**
+     * Initial search text, for uncontrolled usage — seeds the internally-tracked value.
+     * @default ''
+     */
+    defaultSearchValue?: string | undefined;
+    /**
+     * Fires with the new text whenever the search field changes, controlled or not.
+     * @default undefined — no-op.
+     */
+    onSearchValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Accessible name of the search field's clear button.
+     * @default 'Clear search'
+     */
+    clearSearchLabel?: string | undefined;
+    /**
+     * The applied filters, in display order, rendered as removable tags; an empty or omitted list renders no active region.
+     * @default undefined — no active region renders.
+     */
+    activeFilters?: ReadonlyArray<FilterBarFilter> | undefined;
+    /**
+     * Accessible name of the active-filters tag list.
+     * @default 'Active filters'
+     */
+    activeFiltersLabel?: string | undefined;
+    /**
+     * Fires with the removed filter when its tag's remove control is activated.
+     * @default undefined — no-op.
+     */
+    onRemoveFilter?: ((filter: FilterBarFilter) => void) | undefined;
+    /**
+     * Fires when the clear-filters button is activated; providing it renders the button while filters are active.
+     * @default undefined — no clear button renders.
+     */
+    onClear?: (() => void) | undefined;
+    /**
+     * Text rendered on the clear-filters button.
+     * @default 'Clear filters'
+     */
+    clearLabel?: string | undefined;
+    /**
+     * Controls rendered at the end of the bar, such as a "Save view" button.
+     * @default undefined — no actions region renders.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * The consumer's filter controls (Select, DatePicker, Combobox…), laid out in the filters region.
+     * @default undefined — no filters region renders.
+     */
+    children?: React.ReactNode | undefined;
+}

package/dist/forgot-password-page/ForgotPasswordPage.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var h=Object.create;var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var D=(t,e)=>{for(var r in e)u(t,r,{get:e[r],enumerable:!0})},x=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of N(e))!$.call(t,o)&&o!==r&&u(t,o,{get:()=>e[o],enumerable:!(s=v(e,o))||s.enumerable});return t};var E=(t,e,r)=>(r=t!=null?h(T(t)):{},x(e||!t||!t.__esModule?u(r,"default",{value:t,enumerable:!0}):r,t)),H=t=>x(u({},"__esModule",{value:!0}),t);var q={};D(q,{ForgotPasswordPage:()=>m});module.exports=H(q);var a=require("@skdx/react"),w=require("@skdx/react/primitives/text-field");var A=E(require("react"),1),f=require("@skdx/react"),d=require("react/jsx-runtime"),g=({parts:t,title:e,error:r,footer:s,children:o,...l})=>{let p=A.useId();return(0,d.jsx)("section",{"aria-labelledby":p,...l,...t.root,children:(0,d.jsxs)("div",{...t.panel,children:[(0,d.jsx)(f.Heading,{as:"h1",id:p,...t.title,children:e}),r?(0,d.jsx)(f.Alert,{status:"danger",...t.error,children:r}):null,o,s&&t.footer?(0,d.jsx)("div",{...t.footer,children:s}):null]})})};g.displayName="AuthPanel";function b(t,e){let r=t.get(e);return typeof r=="string"?r:""}function I(...t){let e="";for(let r of t)r&&(e=e?`${e} ${r}`:r);return e}function i(t,e,r){let s=e==="root",o=s?`skdx-${t}`:`skdx-${t}__${e}`,l={className:I(o,r),"data-part":e};return s&&(l["data-skdx-component"]=t),l}var n=require("react/jsx-runtime"),m=({title:t="Reset your password",description:e,error:r,success:s,pending:o=!1,emailLabel:l="Email",submitLabel:p="Send reset link",footer:F,onRequestReset:k,children:y,...P})=>{let R=c=>{c.preventDefault();let S=new FormData(c.currentTarget);k?.({email:b(S,"email")})};return(0,n.jsxs)(g,{...P,parts:{root:i("forgot-password-page","root",P.className),panel:i("forgot-password-page","panel"),title:i("forgot-password-page","title"),error:i("forgot-password-page","error"),footer:i("forgot-password-page","footer")},title:t,error:r,footer:F,children:[e?(0,n.jsx)(a.Text,{as:"p",tone:"muted",...i("forgot-password-page","description"),children:e}):null,s?(0,n.jsx)(a.Alert,{status:"success",...i("forgot-password-page","success"),children:s}):(0,n.jsxs)(a.Form,{onSubmit:R,...i("forgot-password-page","form"),children:[(0,n.jsx)(a.Field,{label:l,required:!0,...i("forgot-password-page","field"),children:(0,n.jsx)(a.TextField,{name:"email",required:!0,children:(0,n.jsx)(w.TextFieldInput,{type:"email",autoComplete:"email"})})}),y,(0,n.jsx)(a.Button,{type:"submit",loading:o,disabled:o,...i("forgot-password-page","submit"),children:p})]})]})};m.displayName="ForgotPasswordPage";0&&(module.exports={ForgotPasswordPage});

package/dist/forgot-password-page/ForgotPasswordPage.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ForgotPasswordPageProps } from './types.cjs';
+/**
+ * Forgot-password block: a description, an email field and a submit button that
+ * reports the address through `onRequestReset`, replaced by a success alert once
+ * the consumer sets `success`.
+ *
+ * @example
+ * ```tsx
+ * <ForgotPasswordPage
+ *   description="We will email you a link to choose a new password."
+ *   success={sent ? 'Check your inbox.' : undefined}
+ *   onRequestReset={({ email }) => void requestReset(email)}
+ * />
+ * ```
+ */
+export declare const ForgotPasswordPage: {
+    ({ title, description, error, success, pending, emailLabel, submitLabel, footer, onRequestReset, children, ...props }: ForgotPasswordPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/forgot-password-page/ForgotPasswordPage.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ForgotPasswordPageProps } from './types.js';
+/**
+ * Forgot-password block: a description, an email field and a submit button that
+ * reports the address through `onRequestReset`, replaced by a success alert once
+ * the consumer sets `success`.
+ *
+ * @example
+ * ```tsx
+ * <ForgotPasswordPage
+ *   description="We will email you a link to choose a new password."
+ *   success={sent ? 'Check your inbox.' : undefined}
+ *   onRequestReset={({ email }) => void requestReset(email)}
+ * />
+ * ```
+ */
+export declare const ForgotPasswordPage: {
+    ({ title, description, error, success, pending, emailLabel, submitLabel, footer, onRequestReset, children, ...props }: ForgotPasswordPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/forgot-password-page/ForgotPasswordPage.js

@@ -0,0 +1,2 @@
+'use client';
+import{Alert as h,Button as v,Field as N,Form as T,Text as $,TextField as D}from"@skdx/react";import{TextFieldInput as E}from"@skdx/react/primitives/text-field";import*as g from"react";import{Alert as k,Heading as y}from"@skdx/react";import{jsx as l,jsxs as R}from"react/jsx-runtime";var p=({parts:t,title:e,error:r,footer:a,children:s,...i})=>{let d=g.useId();return l("section",{"aria-labelledby":d,...i,...t.root,children:R("div",{...t.panel,children:[l(y,{as:"h1",id:d,...t.title,children:e}),r?l(k,{status:"danger",...t.error,children:r}):null,s,a&&t.footer?l("div",{...t.footer,children:a}):null]})})};p.displayName="AuthPanel";function m(t,e){let r=t.get(e);return typeof r=="string"?r:""}function S(...t){let e="";for(let r of t)r&&(e=e?`${e} ${r}`:r);return e}function o(t,e,r){let a=e==="root",s=a?`skdx-${t}`:`skdx-${t}__${e}`,i={className:S(s,r),"data-part":e};return a&&(i["data-skdx-component"]=t),i}import{jsx as n,jsxs as P}from"react/jsx-runtime";var c=({title:t="Reset your password",description:e,error:r,success:a,pending:s=!1,emailLabel:i="Email",submitLabel:d="Send reset link",footer:x,onRequestReset:A,children:b,...u})=>{let w=f=>{f.preventDefault();let F=new FormData(f.currentTarget);A?.({email:m(F,"email")})};return P(p,{...u,parts:{root:o("forgot-password-page","root",u.className),panel:o("forgot-password-page","panel"),title:o("forgot-password-page","title"),error:o("forgot-password-page","error"),footer:o("forgot-password-page","footer")},title:t,error:r,footer:x,children:[e?n($,{as:"p",tone:"muted",...o("forgot-password-page","description"),children:e}):null,a?n(h,{status:"success",...o("forgot-password-page","success"),children:a}):P(T,{onSubmit:w,...o("forgot-password-page","form"),children:[n(N,{label:i,required:!0,...o("forgot-password-page","field"),children:n(D,{name:"email",required:!0,children:n(E,{type:"email",autoComplete:"email"})})}),b,n(v,{type:"submit",loading:s,disabled:s,...o("forgot-password-page","submit"),children:d})]})]})};c.displayName="ForgotPasswordPage";export{c as ForgotPasswordPage};

package/dist/forgot-password-page/index.d.cts

@@ -0,0 +1,2 @@
+export { ForgotPasswordPage } from './ForgotPasswordPage.cjs';
+export type { ForgotPasswordPageProps, ForgotPasswordDetail } from './types.cjs';

package/dist/forgot-password-page/index.d.ts

@@ -0,0 +1,2 @@
+export { ForgotPasswordPage } from './ForgotPasswordPage.js';
+export type { ForgotPasswordPageProps, ForgotPasswordDetail } from './types.js';

package/dist/forgot-password-page/types.d.cts

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+/** What {@link ForgotPasswordPageProps.onRequestReset} is called with when the form is submitted. */
+export interface ForgotPasswordDetail {
+    /** The address the reset link should be sent to, as typed. */
+    email: string;
+}
+/** Props for the {@link ForgotPasswordPage} block. */
+export interface ForgotPasswordPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Reset your password'
+     */
+    title?: string | undefined;
+    /**
+     * Supporting copy rendered below the title, explaining what the reset link does.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Message rendered into a derived error Alert above the form; the block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string | undefined;
+    /**
+     * Confirmation rendered into a derived success Alert that replaces the form entirely.
+     * @default undefined — the form renders instead.
+     */
+    success?: string | undefined;
+    /**
+     * Marks the request in flight, making the submit button busy and unusable while the field stays editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Label of the email field the reset link is requested for.
+     * @default 'Email'
+     */
+    emailLabel?: string | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Send reset link'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Navigation rendered below the form, such as a link back to the sign-in page.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires when the form is submitted with a valid address, carrying that address.
+     * @default undefined — no-op if omitted.
+     */
+    onRequestReset?: ((detail: ForgotPasswordDetail) => void) | undefined;
+}

package/dist/forgot-password-page/types.d.ts

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+/** What {@link ForgotPasswordPageProps.onRequestReset} is called with when the form is submitted. */
+export interface ForgotPasswordDetail {
+    /** The address the reset link should be sent to, as typed. */
+    email: string;
+}
+/** Props for the {@link ForgotPasswordPage} block. */
+export interface ForgotPasswordPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Reset your password'
+     */
+    title?: string | undefined;
+    /**
+     * Supporting copy rendered below the title, explaining what the reset link does.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Message rendered into a derived error Alert above the form; the block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string | undefined;
+    /**
+     * Confirmation rendered into a derived success Alert that replaces the form entirely.
+     * @default undefined — the form renders instead.
+     */
+    success?: string | undefined;
+    /**
+     * Marks the request in flight, making the submit button busy and unusable while the field stays editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Label of the email field the reset link is requested for.
+     * @default 'Email'
+     */
+    emailLabel?: string | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Send reset link'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Navigation rendered below the form, such as a link back to the sign-in page.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires when the form is submitted with a valid address, carrying that address.
+     * @default undefined — no-op if omitted.
+     */
+    onRequestReset?: ((detail: ForgotPasswordDetail) => void) | undefined;
+}