@skdx/react-blocks 0.34.0 → 0.35.0

package/dist/notification-center/types.d.ts

@@ -0,0 +1,104 @@
+import type * as React from 'react';
+import type { DateInput } from '@skdx/react';
+/** One entry of {@link NotificationCenterProps.notifications} — a single notification. */
+export interface NotificationCenterItem {
+    /** Identifier reported back through every callback and used as the list item's key. */
+    id: string;
+    /** Headline text rendered as the notification's title. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title.
+     * @default undefined — no description renders for this item.
+     */
+    description?: string | undefined;
+    /**
+     * Instant the notification occurred, rendered into a derived Time.
+     * @default undefined — no timestamp renders for this item.
+     */
+    timestamp?: DateInput | undefined;
+    /**
+     * Whether the notification has been read, driving `data-read` and the read-toggle label.
+     * @default undefined — treated as unread.
+     */
+    read?: boolean | undefined;
+}
+/** Props for the {@link NotificationCenter} block. */
+export interface NotificationCenterProps extends Omit<React.ComponentPropsWithRef<'section'>, 'onSelect'> {
+    /** The notifications to list, in render order. */
+    notifications: ReadonlyArray<NotificationCenterItem>;
+    /**
+     * Heading text, rendered into a derived Heading that names the section.
+     * @default 'Notifications'
+     */
+    title?: string | undefined;
+    /**
+     * Outline level of the derived title heading, from `1` down to `6`.
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * Text of the mark-all-read button, rendered only when `onMarkAllRead` is given.
+     * @default 'Mark all as read'
+     */
+    markAllReadLabel?: string | undefined;
+    /**
+     * Text of a per-item toggle when its notification is unread.
+     * @default 'Mark as read'
+     */
+    markReadLabel?: string | undefined;
+    /**
+     * Text of a per-item toggle when its notification is read.
+     * @default 'Mark as unread'
+     */
+    markUnreadLabel?: string | undefined;
+    /**
+     * Heading text of the derived EmptyState shown when `notifications` is empty.
+     * @default 'No notifications'
+     */
+    emptyTitle?: string | undefined;
+    /**
+     * Supporting copy of the derived EmptyState shown when `notifications` is empty.
+     * @default undefined — the empty state renders with no description.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Shows a skeleton region instead of the list while notifications are still loading.
+     * @default false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Reference instant every item's relative timestamp is measured from.
+     * @default undefined — each Time reads the instant once at render.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative avatar or icon beside one notification, always `aria-hidden`.
+     * @default undefined — no leading region renders.
+     */
+    renderLeading?: ((item: NotificationCenterItem) => React.ReactNode) | undefined;
+    /**
+     * Renders extra controls beside one notification's read/unread toggle.
+     * @default undefined — no extra per-item controls render.
+     */
+    renderActions?: ((item: NotificationCenterItem) => React.ReactNode) | undefined;
+    /**
+     * Header controls rendered beside the mark-all-read button.
+     * @default undefined — no extra header controls render.
+     */
+    actions?: React.ReactNode | undefined;
+    /**
+     * Fires when a notification's body is activated, rendered as a button only while this is given.
+     * @default undefined — a notification body renders as a plain container.
+     */
+    onSelect?: ((item: NotificationCenterItem) => void) | undefined;
+    /**
+     * Fires with the next read state when a per-item toggle is activated, rendered only while this is given.
+     * @default undefined — no per-item read toggle renders.
+     */
+    onReadChange?: ((item: NotificationCenterItem, read: boolean) => void) | undefined;
+    /**
+     * Fires when the mark-all-read button is activated, rendered only while this is given.
+     * @default undefined — no mark-all-read button renders.
+     */
+    onMarkAllRead?: (() => void) | undefined;
+}

package/dist/onboarding-checklist/OnboardingChecklist.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var C=Object.create;var c=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var I=(t,e)=>{for(var n in e)c(t,n,{get:e[n],enumerable:!0})},u=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of O(e))!P.call(t,o)&&o!==n&&c(t,o,{get:()=>e[o],enumerable:!(r=y(e,o))||r.enumerable});return t};var L=(t,e,n)=>(n=t!=null?C(v(t)):{},u(e||!t||!t.__esModule?c(n,"default",{value:t,enumerable:!0}):n,t)),$=t=>u(c({},"__esModule",{value:!0}),t);var S={};I(S,{OnboardingChecklist:()=>g});module.exports=$(S);var k=L(require("react"),1),s=require("@skdx/react");function A(...t){let e="";for(let n of t)n&&(e=e?`${e} ${n}`:n);return e}function a(t,e,n){let r=e==="root",o=r?`skdx-${t}`:`skdx-${t}__${e}`,d={className:A(o,n),"data-part":e};return r&&(d["data-skdx-component"]=t),d}var i=require("react/jsx-runtime"),R=(t,e)=>`${t}/${e}`;function N({item:t,completeLabel:e,optionalLabel:n,onAction:r}){let o=t.state??"pending";return(0,i.jsxs)("li",{"data-state":o,"aria-current":o==="active"?"step":void 0,...a("onboarding-checklist","item"),children:[(0,i.jsx)("span",{"aria-hidden":"true",...a("onboarding-checklist","indicator")}),(0,i.jsxs)("div",{...a("onboarding-checklist","body"),children:[(0,i.jsxs)("span",{...a("onboarding-checklist","item-title"),children:[t.label,o==="complete"?(0,i.jsxs)(s.VisuallyHidden,{children:[" ",e]}):null]}),t.optional?(0,i.jsx)("span",{...a("onboarding-checklist","optional"),children:n}):null,t.description?(0,i.jsx)(s.Text,{as:"p",tone:"muted",...a("onboarding-checklist","item-description"),children:t.description}):null]}),t.actionLabel&&o!=="complete"?(0,i.jsx)(s.Button,{size:"sm",variant:o==="active"?"primary":"secondary",disabled:o==="disabled",onClick:()=>{r?.(t)},...a("onboarding-checklist","action"),children:t.actionLabel}):null]})}var g=({title:t,description:e,headingLevel:n=2,items:r,onAction:o,getProgressLabel:d=R,completeLabel:h="Completed",optionalLabel:m="Optional",...p})=>{let b=k.useId(),f=r.filter(l=>(l.state??"pending")==="complete").length;return(0,i.jsxs)("section",{"aria-labelledby":b,...p,...a("onboarding-checklist","root",p.className),children:[(0,i.jsxs)("div",{...a("onboarding-checklist","header"),children:[(0,i.jsx)(s.Heading,{as:`h${n}`,id:b,...a("onboarding-checklist","title"),children:t}),e?(0,i.jsx)(s.Text,{as:"p",tone:"muted",...a("onboarding-checklist","description"),children:e}):null,r.length>0?(0,i.jsx)(s.Progress,{value:f,max:r.length,"aria-labelledby":b,getValueLabel:(l,H,x)=>d(l,x),...a("onboarding-checklist","progress")}):null]}),(0,i.jsx)("ol",{...a("onboarding-checklist","list"),children:r.map(l=>(0,i.jsx)(N,{item:l,completeLabel:h,optionalLabel:m,onAction:o},l.id))})]})};g.displayName="OnboardingChecklist";0&&(module.exports={OnboardingChecklist});

package/dist/onboarding-checklist/OnboardingChecklist.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { OnboardingChecklistProps } from './types.cjs';
+/** Default progress readout, reading "1/3". */
+export declare const defaultGetProgressLabel: (complete: number, total: number) => string;
+/**
+ * Progress checklist block: a header naming the checklist with an overall
+ * Progress meter, above an ordered list of tasks each carrying its own
+ * completion state and an optional action.
+ *
+ * @example
+ * ```tsx
+ * <OnboardingChecklist
+ *   title="Get started"
+ *   items={[
+ *     { id: 'profile', label: 'Complete your profile', state: 'complete' },
+ *     { id: 'invite', label: 'Invite a teammate', state: 'active', actionLabel: 'Invite' },
+ *   ]}
+ *   onAction={(item) => open(item.id)}
+ * />
+ * ```
+ */
+export declare const OnboardingChecklist: {
+    ({ title, description, headingLevel, items, onAction, getProgressLabel, completeLabel, optionalLabel, ...props }: OnboardingChecklistProps): React.ReactNode;
+    displayName: string;
+};

package/dist/onboarding-checklist/OnboardingChecklist.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { OnboardingChecklistProps } from './types.js';
+/** Default progress readout, reading "1/3". */
+export declare const defaultGetProgressLabel: (complete: number, total: number) => string;
+/**
+ * Progress checklist block: a header naming the checklist with an overall
+ * Progress meter, above an ordered list of tasks each carrying its own
+ * completion state and an optional action.
+ *
+ * @example
+ * ```tsx
+ * <OnboardingChecklist
+ *   title="Get started"
+ *   items={[
+ *     { id: 'profile', label: 'Complete your profile', state: 'complete' },
+ *     { id: 'invite', label: 'Invite a teammate', state: 'active', actionLabel: 'Invite' },
+ *   ]}
+ *   onAction={(item) => open(item.id)}
+ * />
+ * ```
+ */
+export declare const OnboardingChecklist: {
+    ({ title, description, headingLevel, items, onAction, getProgressLabel, completeLabel, optionalLabel, ...props }: OnboardingChecklistProps): React.ReactNode;
+    displayName: string;
+};

package/dist/onboarding-checklist/OnboardingChecklist.js

@@ -0,0 +1,2 @@
+'use client';
+import*as g from"react";import{Button as C,Heading as y,Progress as O,Text as p,VisuallyHidden as v}from"@skdx/react";function x(...t){let e="";for(let o of t)o&&(e=e?`${e} ${o}`:o);return e}function n(t,e,o){let a=e==="root",i=a?`skdx-${t}`:`skdx-${t}__${e}`,d={className:x(i,o),"data-part":e};return a&&(d["data-skdx-component"]=t),d}import{jsx as r,jsxs as l}from"react/jsx-runtime";var P=(t,e)=>`${t}/${e}`;function I({item:t,completeLabel:e,optionalLabel:o,onAction:a}){let i=t.state??"pending";return l("li",{"data-state":i,"aria-current":i==="active"?"step":void 0,...n("onboarding-checklist","item"),children:[r("span",{"aria-hidden":"true",...n("onboarding-checklist","indicator")}),l("div",{...n("onboarding-checklist","body"),children:[l("span",{...n("onboarding-checklist","item-title"),children:[t.label,i==="complete"?l(v,{children:[" ",e]}):null]}),t.optional?r("span",{...n("onboarding-checklist","optional"),children:o}):null,t.description?r(p,{as:"p",tone:"muted",...n("onboarding-checklist","item-description"),children:t.description}):null]}),t.actionLabel&&i!=="complete"?r(C,{size:"sm",variant:i==="active"?"primary":"secondary",disabled:i==="disabled",onClick:()=>{a?.(t)},...n("onboarding-checklist","action"),children:t.actionLabel}):null]})}var u=({title:t,description:e,headingLevel:o=2,items:a,onAction:i,getProgressLabel:d=P,completeLabel:k="Completed",optionalLabel:h="Optional",...b})=>{let c=g.useId(),m=a.filter(s=>(s.state??"pending")==="complete").length;return l("section",{"aria-labelledby":c,...b,...n("onboarding-checklist","root",b.className),children:[l("div",{...n("onboarding-checklist","header"),children:[r(y,{as:`h${o}`,id:c,...n("onboarding-checklist","title"),children:t}),e?r(p,{as:"p",tone:"muted",...n("onboarding-checklist","description"),children:e}):null,a.length>0?r(O,{value:m,max:a.length,"aria-labelledby":c,getValueLabel:(s,L,f)=>d(s,f),...n("onboarding-checklist","progress")}):null]}),r("ol",{...n("onboarding-checklist","list"),children:a.map(s=>r(I,{item:s,completeLabel:k,optionalLabel:h,onAction:i},s.id))})]})};u.displayName="OnboardingChecklist";export{u as OnboardingChecklist};

package/dist/onboarding-checklist/index.d.cts

@@ -0,0 +1,2 @@
+export { OnboardingChecklist } from './OnboardingChecklist.cjs';
+export type { OnboardingChecklistItem, OnboardingChecklistItemState, OnboardingChecklistProps, } from './types.cjs';

package/dist/onboarding-checklist/index.d.ts

@@ -0,0 +1,2 @@
+export { OnboardingChecklist } from './OnboardingChecklist.js';
+export type { OnboardingChecklistItem, OnboardingChecklistItemState, OnboardingChecklistProps, } from './types.js';

package/dist/onboarding-checklist/types.d.cts

@@ -0,0 +1,67 @@
+import type * as React from 'react';
+/** Completion state of one {@link OnboardingChecklistItem}, mirrored to `data-state`. */
+export type OnboardingChecklistItemState = 'pending' | 'active' | 'complete' | 'disabled';
+/** One entry of {@link OnboardingChecklistProps.items} — a single setup, launch or configuration task. */
+export interface OnboardingChecklistItem {
+    /** Stable identifier reported back through {@link OnboardingChecklistProps.onAction}. */
+    id: string;
+    /** Text naming the task, rendered as the item's title. */
+    label: string;
+    /**
+     * Supporting copy rendered below the label, explaining the task in more detail.
+     * @default undefined — no item description renders.
+     */
+    description?: string | undefined;
+    /**
+     * Completion state of the item, mirrored to `data-state` and driving the indicator glyph.
+     * @default 'pending'
+     */
+    state?: OnboardingChecklistItemState | undefined;
+    /**
+     * Marks the task as skippable, rendering the optional label beside its title.
+     * @default false
+     */
+    optional?: boolean | undefined;
+    /**
+     * Text of the item's action button; the button renders only alongside a non-complete state.
+     * @default undefined — no action button renders.
+     */
+    actionLabel?: string | undefined;
+}
+/** Props for the {@link OnboardingChecklist} block. */
+export interface OnboardingChecklistProps extends React.ComponentPropsWithRef<'section'> {
+    /** Heading text naming the checklist, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining what the checklist covers.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, from `1` down to `6`.
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /** The tasks to complete, in render order. */
+    items: ReadonlyArray<OnboardingChecklistItem>;
+    /**
+     * Fires when an item's action button is activated, with the full item that was acted on.
+     * @default undefined — no-op if omitted.
+     */
+    onAction?: ((item: OnboardingChecklistItem) => void) | undefined;
+    /**
+     * Formats the progress meter's readout from the completed and total item counts.
+     * @default undefined — falls back to `${complete}/${total}`.
+     */
+    getProgressLabel?: ((complete: number, total: number) => string) | undefined;
+    /**
+     * Visually hidden text appended after a completed item's title, announcing its completion.
+     * @default 'Completed'
+     */
+    completeLabel?: string | undefined;
+    /**
+     * Text rendered beside an optional item's title.
+     * @default 'Optional'
+     */
+    optionalLabel?: string | undefined;
+}

package/dist/onboarding-checklist/types.d.ts

@@ -0,0 +1,67 @@
+import type * as React from 'react';
+/** Completion state of one {@link OnboardingChecklistItem}, mirrored to `data-state`. */
+export type OnboardingChecklistItemState = 'pending' | 'active' | 'complete' | 'disabled';
+/** One entry of {@link OnboardingChecklistProps.items} — a single setup, launch or configuration task. */
+export interface OnboardingChecklistItem {
+    /** Stable identifier reported back through {@link OnboardingChecklistProps.onAction}. */
+    id: string;
+    /** Text naming the task, rendered as the item's title. */
+    label: string;
+    /**
+     * Supporting copy rendered below the label, explaining the task in more detail.
+     * @default undefined — no item description renders.
+     */
+    description?: string | undefined;
+    /**
+     * Completion state of the item, mirrored to `data-state` and driving the indicator glyph.
+     * @default 'pending'
+     */
+    state?: OnboardingChecklistItemState | undefined;
+    /**
+     * Marks the task as skippable, rendering the optional label beside its title.
+     * @default false
+     */
+    optional?: boolean | undefined;
+    /**
+     * Text of the item's action button; the button renders only alongside a non-complete state.
+     * @default undefined — no action button renders.
+     */
+    actionLabel?: string | undefined;
+}
+/** Props for the {@link OnboardingChecklist} block. */
+export interface OnboardingChecklistProps extends React.ComponentPropsWithRef<'section'> {
+    /** Heading text naming the checklist, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining what the checklist covers.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, from `1` down to `6`.
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /** The tasks to complete, in render order. */
+    items: ReadonlyArray<OnboardingChecklistItem>;
+    /**
+     * Fires when an item's action button is activated, with the full item that was acted on.
+     * @default undefined — no-op if omitted.
+     */
+    onAction?: ((item: OnboardingChecklistItem) => void) | undefined;
+    /**
+     * Formats the progress meter's readout from the completed and total item counts.
+     * @default undefined — falls back to `${complete}/${total}`.
+     */
+    getProgressLabel?: ((complete: number, total: number) => string) | undefined;
+    /**
+     * Visually hidden text appended after a completed item's title, announcing its completion.
+     * @default 'Completed'
+     */
+    completeLabel?: string | undefined;
+    /**
+     * Text rendered beside an optional item's title.
+     * @default 'Optional'
+     */
+    optionalLabel?: string | undefined;
+}

package/dist/reset-password-page/ResetPasswordPage.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var M=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},h=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of D(t))!$.call(e,d)&&d!==r&&c(e,d,{get:()=>t[d],enumerable:!(n=T(t,d))||n.enumerable});return e};var L=(e,t,r)=>(r=e!=null?M(V(e)):{},h(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),_=e=>h(c({},"__esModule",{value:!0}),e);var U={};q(U,{ResetPasswordPage:()=>R});module.exports=_(U);var a=require("@skdx/react"),u=require("@skdx/react/primitives/password-input");var k=L(require("react"),1),P=require("@skdx/react"),p=require("react/jsx-runtime"),w=({parts:e,title:t,error:r,footer:n,children:d,...i})=>{let m=k.useId();return(0,p.jsx)("section",{"aria-labelledby":m,...i,...e.root,children:(0,p.jsxs)("div",{...e.panel,children:[(0,p.jsx)(P.Heading,{as:"h1",id:m,...e.title,children:t}),r?(0,p.jsx)(P.Alert,{status:"danger",...e.error,children:r}):null,d,n&&e.footer?(0,p.jsx)("div",{...e.footer,children:n}):null]})})};w.displayName="AuthPanel";function y(e,t){let r=e.get(t);return typeof r=="string"?r:""}function B(...e){let t="";for(let r of e)r&&(t=t?`${t} ${r}`:r);return t}function o(e,t,r){let n=t==="root",d=n?`skdx-${e}`:`skdx-${e}__${t}`,i={className:B(d,r),"data-part":t};return n&&(i["data-skdx-component"]=e),i}var s=require("react/jsx-runtime"),x="confirmPassword";function O(e){let t=e.elements.namedItem(x);return t instanceof HTMLInputElement?t:null}var R=({title:e="Choose a new password",error:t,success:r,pending:n=!1,passwordLabel:d="New password",confirmPasswordLabel:i,requirements:m,passwordMismatchMessage:v="Passwords do not match",submitLabel:F="Update password",footer:I,onResetPassword:S,children:C,...A})=>{let N=f=>{f.preventDefault();let l=f.currentTarget,H=new FormData(l),b={password:y(H,"password")},g=i===void 0?null:O(l);if(g&&g.value!==b.password){g.setCustomValidity(v),l.reportValidity();return}S?.(b)},E=f=>{let l=f.target;l instanceof HTMLInputElement&&l.name===x&&l.setCustomValidity("")};return(0,s.jsx)(w,{...A,parts:{root:o("reset-password-page","root",A.className),panel:o("reset-password-page","panel"),title:o("reset-password-page","title"),error:o("reset-password-page","error"),footer:o("reset-password-page","footer")},title:e,error:t,footer:I,children:r?(0,s.jsx)(a.Alert,{status:"success",...o("reset-password-page","success"),children:r}):(0,s.jsxs)(a.Form,{onSubmit:N,onChange:E,...o("reset-password-page","form"),children:[(0,s.jsx)(a.Field,{label:d,required:!0,description:m===void 0?void 0:(0,s.jsx)("span",{...o("reset-password-page","requirements"),children:m}),...o("reset-password-page","field"),children:(0,s.jsxs)(a.PasswordInput,{name:"password",required:!0,children:[(0,s.jsx)(u.PasswordInputField,{autoComplete:"new-password"}),(0,s.jsx)(u.PasswordInputToggle,{})]})}),i!==void 0?(0,s.jsx)(a.Field,{label:i,required:!0,...o("reset-password-page","field"),children:(0,s.jsxs)(a.PasswordInput,{name:x,required:!0,children:[(0,s.jsx)(u.PasswordInputField,{autoComplete:"new-password"}),(0,s.jsx)(u.PasswordInputToggle,{})]})}):null,C,(0,s.jsx)(a.Button,{type:"submit",loading:n,disabled:n,...o("reset-password-page","submit"),children:F})]})})};R.displayName="ResetPasswordPage";0&&(module.exports={ResetPasswordPage});

package/dist/reset-password-page/ResetPasswordPage.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ResetPasswordPageProps } from './types.cjs';
+/**
+ * Reset-password block: a new-password field with its rules, an optional
+ * confirmation matched against it, and a submit button reporting through
+ * `onResetPassword`, replaced by a success alert once the consumer sets `success`.
+ *
+ * @example
+ * ```tsx
+ * <ResetPasswordPage
+ *   confirmPasswordLabel="Confirm new password"
+ *   requirements="At least 12 characters."
+ *   onResetPassword={({ password }) => void updatePassword(password)}
+ * />
+ * ```
+ */
+export declare const ResetPasswordPage: {
+    ({ title, error, success, pending, passwordLabel, confirmPasswordLabel, requirements, passwordMismatchMessage, submitLabel, footer, onResetPassword, children, ...props }: ResetPasswordPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/reset-password-page/ResetPasswordPage.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { ResetPasswordPageProps } from './types.js';
+/**
+ * Reset-password block: a new-password field with its rules, an optional
+ * confirmation matched against it, and a submit button reporting through
+ * `onResetPassword`, replaced by a success alert once the consumer sets `success`.
+ *
+ * @example
+ * ```tsx
+ * <ResetPasswordPage
+ *   confirmPasswordLabel="Confirm new password"
+ *   requirements="At least 12 characters."
+ *   onResetPassword={({ password }) => void updatePassword(password)}
+ * />
+ * ```
+ */
+export declare const ResetPasswordPage: {
+    ({ title, error, success, pending, passwordLabel, confirmPasswordLabel, requirements, passwordMismatchMessage, submitLabel, footer, onResetPassword, children, ...props }: ResetPasswordPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/reset-password-page/ResetPasswordPage.js

@@ -0,0 +1,2 @@
+'use client';
+import{Alert as $,Button as q,Field as A,Form as L,PasswordInput as b}from"@skdx/react";import{PasswordInputField as h,PasswordInputToggle as k}from"@skdx/react/primitives/password-input";import*as x from"react";import{Alert as M,Heading as T}from"@skdx/react";import{jsx as u,jsxs as D}from"react/jsx-runtime";var f=({parts:e,title:t,error:r,footer:a,children:i,...n})=>{let l=x.useId();return u("section",{"aria-labelledby":l,...n,...e.root,children:D("div",{...e.panel,children:[u(T,{as:"h1",id:l,...e.title,children:t}),r?u(M,{status:"danger",...e.error,children:r}):null,i,a&&e.footer?u("div",{...e.footer,children:a}):null]})})};f.displayName="AuthPanel";function R(e,t){let r=e.get(t);return typeof r=="string"?r:""}function V(...e){let t="";for(let r of e)r&&(t=t?`${t} ${r}`:r);return t}function s(e,t,r){let a=t==="root",i=a?`skdx-${e}`:`skdx-${e}__${t}`,n={className:V(i,r),"data-part":t};return a&&(n["data-skdx-component"]=e),n}import{jsx as o,jsxs as c}from"react/jsx-runtime";var P="confirmPassword";function _(e){let t=e.elements.namedItem(P);return t instanceof HTMLInputElement?t:null}var y=({title:e="Choose a new password",error:t,success:r,pending:a=!1,passwordLabel:i="New password",confirmPasswordLabel:n,requirements:l,passwordMismatchMessage:v="Passwords do not match",submitLabel:F="Update password",footer:I,onResetPassword:S,children:C,...g})=>{let N=p=>{p.preventDefault();let d=p.currentTarget,H=new FormData(d),w={password:R(H,"password")},m=n===void 0?null:_(d);if(m&&m.value!==w.password){m.setCustomValidity(v),d.reportValidity();return}S?.(w)},E=p=>{let d=p.target;d instanceof HTMLInputElement&&d.name===P&&d.setCustomValidity("")};return o(f,{...g,parts:{root:s("reset-password-page","root",g.className),panel:s("reset-password-page","panel"),title:s("reset-password-page","title"),error:s("reset-password-page","error"),footer:s("reset-password-page","footer")},title:e,error:t,footer:I,children:r?o($,{status:"success",...s("reset-password-page","success"),children:r}):c(L,{onSubmit:N,onChange:E,...s("reset-password-page","form"),children:[o(A,{label:i,required:!0,description:l===void 0?void 0:o("span",{...s("reset-password-page","requirements"),children:l}),...s("reset-password-page","field"),children:c(b,{name:"password",required:!0,children:[o(h,{autoComplete:"new-password"}),o(k,{})]})}),n!==void 0?o(A,{label:n,required:!0,...s("reset-password-page","field"),children:c(b,{name:P,required:!0,children:[o(h,{autoComplete:"new-password"}),o(k,{})]})}):null,C,o(q,{type:"submit",loading:a,disabled:a,...s("reset-password-page","submit"),children:F})]})})};y.displayName="ResetPasswordPage";export{y as ResetPasswordPage};

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

@@ -0,0 +1,2 @@
+export { ResetPasswordPage } from './ResetPasswordPage.cjs';
+export type { ResetPasswordPageProps, ResetPasswordDetail } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { ResetPasswordPage } from './ResetPasswordPage.js';
+export type { ResetPasswordPageProps, ResetPasswordDetail } from './types.js';

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

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+/** What {@link ResetPasswordPageProps.onResetPassword} is called with when the form is submitted. */
+export interface ResetPasswordDetail {
+    /** The new password, already matched against the confirmation when one renders. */
+    password: string;
+}
+/** Props for the {@link ResetPasswordPage} block. */
+export interface ResetPasswordPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Choose a new password'
+     */
+    title?: 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 fields stay editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Label of the field where the new password is typed.
+     * @default 'New password'
+     */
+    passwordLabel?: string | undefined;
+    /**
+     * Label of the confirmation field; supplying it is what makes that field render at all.
+     * @default undefined — no confirmation field renders and no matching is done.
+     */
+    confirmPasswordLabel?: string | undefined;
+    /**
+     * Password rules, described below the password field and announced with it.
+     * @default undefined — no requirements region renders.
+     */
+    requirements?: React.ReactNode | undefined;
+    /**
+     * Validation message shown on the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage?: string | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Update password'
+     */
+    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 matching, valid passwords, carrying the new one.
+     * @default undefined — no-op if omitted.
+     */
+    onResetPassword?: ((detail: ResetPasswordDetail) => void) | undefined;
+}

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

@@ -0,0 +1,64 @@
+import type * as React from 'react';
+/** What {@link ResetPasswordPageProps.onResetPassword} is called with when the form is submitted. */
+export interface ResetPasswordDetail {
+    /** The new password, already matched against the confirmation when one renders. */
+    password: string;
+}
+/** Props for the {@link ResetPasswordPage} block. */
+export interface ResetPasswordPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Choose a new password'
+     */
+    title?: 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 fields stay editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Label of the field where the new password is typed.
+     * @default 'New password'
+     */
+    passwordLabel?: string | undefined;
+    /**
+     * Label of the confirmation field; supplying it is what makes that field render at all.
+     * @default undefined — no confirmation field renders and no matching is done.
+     */
+    confirmPasswordLabel?: string | undefined;
+    /**
+     * Password rules, described below the password field and announced with it.
+     * @default undefined — no requirements region renders.
+     */
+    requirements?: React.ReactNode | undefined;
+    /**
+     * Validation message shown on the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage?: string | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Update password'
+     */
+    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 matching, valid passwords, carrying the new one.
+     * @default undefined — no-op if omitted.
+     */
+    onResetPassword?: ((detail: ResetPasswordDetail) => void) | undefined;
+}

package/dist/sign-in-page/SignInPage.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var E=Object.create;var g=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var _=(e,t)=>{for(var i in t)g(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of N(t))!q.call(e,l)&&l!==i&&g(e,l,{get:()=>t[l],enumerable:!(o=$(t,l))||o.enumerable});return e};var B=(e,t,i)=>(i=e!=null?E(T(e)):{},k(t||!e||!e.__esModule?g(i,"default",{value:e,enumerable:!0}):i,e)),H=e=>k(g({},"__esModule",{value:!0}),e);var M={};_(M,{SignInPage:()=>c,defaultProviderLabel:()=>m});module.exports=H(M);var v=B(require("react"),1),n=require("@skdx/react"),R=require("@skdx/react/primitives/text-field");function L(...e){let t="";for(let i of e)i&&(t=t?`${t} ${i}`:i);return t}function s(e,t,i){let o=t==="root",l=o?`skdx-${e}`:`skdx-${e}__${t}`,d={className:L(l,i),"data-part":t};return o&&(d["data-skdx-component"]=e),d}var r=require("react/jsx-runtime"),y=new Set(["credentials","magic-link"]),m=e=>`Sign in with ${e.name}`;function F(e,t){let i=e.get(t);return typeof i=="string"?i:""}function C({label:e}){return(0,r.jsx)(n.Field,{label:e,required:!0,...s("sign-in-page","field"),children:(0,r.jsx)(n.TextField,{name:"email",required:!0,children:(0,r.jsx)(R.TextFieldInput,{type:"email",autoComplete:"email"})})})}var c=({title:e="Sign in",providers:t,error:i,emailLabel:o="Email",passwordLabel:l="Password",submitLabel:d="Sign in",magicLinkLabel:D="Send magic link",getProviderLabel:h=m,onSignIn:p,children:w,...f})=>{let S=v.useId(),u=t.filter(a=>!y.has(a.id)),P=t.filter(a=>y.has(a.id)),A=a=>b=>{b.preventDefault();let x=new FormData(b.currentTarget),I={providerId:a,email:F(x,"email")};a==="credentials"&&(I.password=F(x,"password")),p?.(I)};return(0,r.jsx)("section",{"aria-labelledby":S,...f,...s("sign-in-page","root",f.className),children:(0,r.jsxs)("div",{...s("sign-in-page","panel"),children:[(0,r.jsx)(n.Heading,{as:"h1",id:S,...s("sign-in-page","title"),children:e}),i?(0,r.jsx)(n.Alert,{status:"danger",...s("sign-in-page","error"),children:i}):null,u.length>0?(0,r.jsx)("div",{...s("sign-in-page","providers"),children:u.map(a=>(0,r.jsx)(n.Button,{type:"button","data-provider":a.id,onClick:()=>{p?.({providerId:a.id})},...s("sign-in-page","provider"),children:h(a)},a.id))}):null,u.length>0&&P.length>0?(0,r.jsx)(n.Divider,{...s("sign-in-page","divider")}):null,P.map(a=>(0,r.jsxs)(n.Form,{"data-provider":a.id,onSubmit:A(a.id),...s("sign-in-page","form"),children:[(0,r.jsx)(C,{label:o}),a.id==="credentials"?(0,r.jsx)(n.Field,{label:l,required:!0,...s("sign-in-page","field"),children:(0,r.jsx)(n.PasswordInput,{name:"password",required:!0})}):null,(0,r.jsx)(n.Button,{type:"submit",...s("sign-in-page","submit"),children:a.id==="credentials"?d:D})]},a.id)),w]})})};c.displayName="SignInPage";0&&(module.exports={SignInPage,defaultProviderLabel});
+"use strict";var $=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var C=(t,e)=>{for(var i in e)m(t,i,{get:e[i],enumerable:!0})},y=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of q(e))!B.call(t,s)&&s!==i&&m(t,s,{get:()=>e[s],enumerable:!(l=T(e,s))||l.enumerable});return t};var H=(t,e,i)=>(i=t!=null?$(_(t)):{},y(e||!t||!t.__esModule?m(i,"default",{value:t,enumerable:!0}):i,t)),L=t=>y(m({},"__esModule",{value:!0}),t);var O={};C(O,{SignInPage:()=>x,defaultProviderLabel:()=>S});module.exports=L(O);var a=require("@skdx/react"),D=require("@skdx/react/primitives/text-field");var v=H(require("react"),1),p=require("@skdx/react"),d=require("react/jsx-runtime"),f=({parts:t,title:e,error:i,footer:l,children:s,...g})=>{let u=v.useId();return(0,d.jsx)("section",{"aria-labelledby":u,...g,...t.root,children:(0,d.jsxs)("div",{...t.panel,children:[(0,d.jsx)(p.Heading,{as:"h1",id:u,...t.title,children:e}),i?(0,d.jsx)(p.Alert,{status:"danger",...t.error,children:i}):null,s,l&&t.footer?(0,d.jsx)("div",{...t.footer,children:l}):null]})})};f.displayName="AuthPanel";function P(t,e){let i=t.get(e);return typeof i=="string"?i:""}function V(...t){let e="";for(let i of t)i&&(e=e?`${e} ${i}`:i);return e}function o(t,e,i){let l=e==="root",s=l?`skdx-${t}`:`skdx-${t}__${e}`,g={className:V(s,i),"data-part":e};return l&&(g["data-skdx-component"]=t),g}var r=require("react/jsx-runtime"),F=new Set(["credentials","magic-link"]),S=t=>`Sign in with ${t.name}`;function M({label:t}){return(0,r.jsx)(a.Field,{label:t,required:!0,...o("sign-in-page","field"),children:(0,r.jsx)(a.TextField,{name:"email",required:!0,children:(0,r.jsx)(D.TextFieldInput,{type:"email",autoComplete:"email"})})})}var x=({title:t="Sign in",providers:e,error:i,emailLabel:l="Email",passwordLabel:s="Password",submitLabel:g="Sign in",magicLinkLabel:u="Send magic link",getProviderLabel:w=S,onSignIn:b,children:N,...k})=>{let c=e.filter(n=>!F.has(n.id)),A=e.filter(n=>F.has(n.id)),E=n=>h=>{h.preventDefault();let I=new FormData(h.currentTarget),R={providerId:n,email:P(I,"email")};n==="credentials"&&(R.password=P(I,"password")),b?.(R)};return(0,r.jsxs)(f,{...k,parts:{root:o("sign-in-page","root",k.className),panel:o("sign-in-page","panel"),title:o("sign-in-page","title"),error:o("sign-in-page","error")},title:t,error:i,children:[c.length>0?(0,r.jsx)("div",{...o("sign-in-page","providers"),children:c.map(n=>(0,r.jsx)(a.Button,{type:"button","data-provider":n.id,onClick:()=>{b?.({providerId:n.id})},...o("sign-in-page","provider"),children:w(n)},n.id))}):null,c.length>0&&A.length>0?(0,r.jsx)(a.Divider,{...o("sign-in-page","divider")}):null,A.map(n=>(0,r.jsxs)(a.Form,{"data-provider":n.id,onSubmit:E(n.id),...o("sign-in-page","form"),children:[(0,r.jsx)(M,{label:l}),n.id==="credentials"?(0,r.jsx)(a.Field,{label:s,required:!0,...o("sign-in-page","field"),children:(0,r.jsx)(a.PasswordInput,{name:"password",required:!0})}):null,(0,r.jsx)(a.Button,{type:"submit",...o("sign-in-page","submit"),children:n.id==="credentials"?g:u})]},n.id)),N]})};x.displayName="SignInPage";0&&(module.exports={SignInPage,defaultProviderLabel});

package/dist/sign-in-page/SignInPage.d.cts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { SignInPageProps, SignInProvider } from './types.cjs';
 /** Default wording of a provider button, reading "Sign in with Google". */
 export declare const defaultProviderLabel: (provider: SignInProvider) => string;

package/dist/sign-in-page/SignInPage.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { SignInPageProps, SignInProvider } from './types.js';
 /** Default wording of a provider button, reading "Sign in with Google". */
 export declare const defaultProviderLabel: (provider: SignInProvider) => string;

package/dist/sign-in-page/SignInPage.js

@@ -1,2 +1,2 @@
 'use client';
-import*as k from"react";import{Alert as E,Button as P,Divider as $,Field as y,Form as N,Heading as T,PasswordInput as q,TextField as _}from"@skdx/react";import{TextFieldInput as B}from"@skdx/react/primitives/text-field";function A(...t){let i="";for(let r of t)r&&(i=i?`${i} ${r}`:r);return i}function a(t,i,r){let s=i==="root",o=s?`skdx-${t}`:`skdx-${t}__${i}`,l={className:A(o,r),"data-part":i};return s&&(l["data-skdx-component"]=t),l}import{jsx as n,jsxs as I}from"react/jsx-runtime";var b=new Set(["credentials","magic-link"]),F=t=>`Sign in with ${t.name}`;function x(t,i){let r=t.get(i);return typeof r=="string"?r:""}function H({label:t}){return n(y,{label:t,required:!0,...a("sign-in-page","field"),children:n(_,{name:"email",required:!0,children:n(B,{type:"email",autoComplete:"email"})})})}var v=({title:t="Sign in",providers:i,error:r,emailLabel:s="Email",passwordLabel:o="Password",submitLabel:l="Sign in",magicLinkLabel:R="Send magic link",getProviderLabel:D=F,onSignIn:g,children:h,...u})=>{let m=k.useId(),d=i.filter(e=>!b.has(e.id)),c=i.filter(e=>b.has(e.id)),w=e=>p=>{p.preventDefault();let f=new FormData(p.currentTarget),S={providerId:e,email:x(f,"email")};e==="credentials"&&(S.password=x(f,"password")),g?.(S)};return n("section",{"aria-labelledby":m,...u,...a("sign-in-page","root",u.className),children:I("div",{...a("sign-in-page","panel"),children:[n(T,{as:"h1",id:m,...a("sign-in-page","title"),children:t}),r?n(E,{status:"danger",...a("sign-in-page","error"),children:r}):null,d.length>0?n("div",{...a("sign-in-page","providers"),children:d.map(e=>n(P,{type:"button","data-provider":e.id,onClick:()=>{g?.({providerId:e.id})},...a("sign-in-page","provider"),children:D(e)},e.id))}):null,d.length>0&&c.length>0?n($,{...a("sign-in-page","divider")}):null,c.map(e=>I(N,{"data-provider":e.id,onSubmit:w(e.id),...a("sign-in-page","form"),children:[n(H,{label:s}),e.id==="credentials"?n(y,{label:o,required:!0,...a("sign-in-page","field"),children:n(q,{name:"password",required:!0})}):null,n(P,{type:"submit",...a("sign-in-page","submit"),children:e.id==="credentials"?l:R})]},e.id)),h]})})};v.displayName="SignInPage";export{v as SignInPage,F as defaultProviderLabel};
+import{Button as A,Divider as q,Field as R,Form as _,PasswordInput as B,TextField as C}from"@skdx/react";import{TextFieldInput as H}from"@skdx/react/primitives/text-field";import*as k from"react";import{Alert as N,Heading as E}from"@skdx/react";import{jsx as g,jsxs as $}from"react/jsx-runtime";var m=({parts:t,title:i,error:n,footer:o,children:l,...s})=>{let d=k.useId();return g("section",{"aria-labelledby":d,...s,...t.root,children:$("div",{...t.panel,children:[g(E,{as:"h1",id:d,...t.title,children:i}),n?g(N,{status:"danger",...t.error,children:n}):null,l,o&&t.footer?g("div",{...t.footer,children:o}):null]})})};m.displayName="AuthPanel";function p(t,i){let n=t.get(i);return typeof n=="string"?n:""}function T(...t){let i="";for(let n of t)n&&(i=i?`${i} ${n}`:n);return i}function r(t,i,n){let o=i==="root",l=o?`skdx-${t}`:`skdx-${t}__${i}`,s={className:T(l,n),"data-part":i};return o&&(s["data-skdx-component"]=t),s}import{jsx as a,jsxs as I}from"react/jsx-runtime";var h=new Set(["credentials","magic-link"]),y=t=>`Sign in with ${t.name}`;function L({label:t}){return a(R,{label:t,required:!0,...r("sign-in-page","field"),children:a(C,{name:"email",required:!0,children:a(H,{type:"email",autoComplete:"email"})})})}var v=({title:t="Sign in",providers:i,error:n,emailLabel:o="Email",passwordLabel:l="Password",submitLabel:s="Sign in",magicLinkLabel:d="Send magic link",getProviderLabel:F=y,onSignIn:c,children:D,...f})=>{let u=i.filter(e=>!h.has(e.id)),P=i.filter(e=>h.has(e.id)),w=e=>S=>{S.preventDefault();let x=new FormData(S.currentTarget),b={providerId:e,email:p(x,"email")};e==="credentials"&&(b.password=p(x,"password")),c?.(b)};return I(m,{...f,parts:{root:r("sign-in-page","root",f.className),panel:r("sign-in-page","panel"),title:r("sign-in-page","title"),error:r("sign-in-page","error")},title:t,error:n,children:[u.length>0?a("div",{...r("sign-in-page","providers"),children:u.map(e=>a(A,{type:"button","data-provider":e.id,onClick:()=>{c?.({providerId:e.id})},...r("sign-in-page","provider"),children:F(e)},e.id))}):null,u.length>0&&P.length>0?a(q,{...r("sign-in-page","divider")}):null,P.map(e=>I(_,{"data-provider":e.id,onSubmit:w(e.id),...r("sign-in-page","form"),children:[a(L,{label:o}),e.id==="credentials"?a(R,{label:l,required:!0,...r("sign-in-page","field"),children:a(B,{name:"password",required:!0})}):null,a(A,{type:"submit",...r("sign-in-page","submit"),children:e.id==="credentials"?s:d})]},e.id)),D]})};v.displayName="SignInPage";export{v as SignInPage,y as defaultProviderLabel};

package/dist/sign-up-page/SignUpPage.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var B=Object.create;var c=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var n in t)c(e,n,{get:t[n],enumerable:!0})},T=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of _(t))!W.call(e,a)&&a!==n&&c(e,a,{get:()=>t[a],enumerable:!(s=L(t,a))||s.enumerable});return e};var G=(e,t,n)=>(n=e!=null?B(O(e)):{},T(t||!e||!e.__esModule?c(n,"default",{value:e,enumerable:!0}):n,e)),J=e=>T(c({},"__esModule",{value:!0}),e);var X={};z(X,{SignUpPage:()=>C});module.exports=J(X);var i=require("@skdx/react"),m=require("@skdx/react/primitives/password-input"),k=require("@skdx/react/primitives/text-field");var q=G(require("react"),1),P=require("@skdx/react"),u=require("react/jsx-runtime"),F=({parts:e,title:t,error:n,footer:s,children:a,...p})=>{let g=q.useId();return(0,u.jsx)("section",{"aria-labelledby":g,...p,...e.root,children:(0,u.jsxs)("div",{...e.panel,children:[(0,u.jsx)(P.Heading,{as:"h1",id:g,...e.title,children:t}),n?(0,u.jsx)(P.Alert,{status:"danger",...e.error,children:n}):null,a,s&&e.footer?(0,u.jsx)("div",{...e.footer,children:s}):null]})})};F.displayName="AuthPanel";function x(e,t){let n=e.get(t);return typeof n=="string"?n:""}function K(...e){let t="";for(let n of e)n&&(t=t?`${t} ${n}`:n);return t}function o(e,t,n){let s=t==="root",a=s?`skdx-${e}`:`skdx-${e}__${t}`,p={className:K(a,n),"data-part":t};return s&&(p["data-skdx-component"]=e),p}var E=require("../sign-in-page/SignInPage.cjs"),r=require("react/jsx-runtime"),y="confirmPassword";function Q(e){let t=e.elements.namedItem(y);return t instanceof HTMLInputElement?t:null}var C=({title:e="Create account",providers:t,error:n,pending:s=!1,nameLabel:a,emailLabel:p="Email",passwordLabel:g="Password",confirmPasswordLabel:b,passwordMismatchMessage:N="Passwords do not match",terms:A,submitLabel:H="Create account",getProviderLabel:M=E.defaultProviderLabel,footer:U,onSignUp:I,children:D,...R})=>{let S=t??[],V=d=>{d.preventDefault();let l=d.currentTarget,f=new FormData(l),w=x(f,"password"),h=b===void 0?null:Q(l);if(h&&h.value!==w){h.setCustomValidity(N),l.reportValidity();return}let v={providerId:"credentials",email:x(f,"email"),password:w};a!==void 0&&(v.name=x(f,"name")),A!==void 0&&(v.termsAccepted=f.get("terms")!==null),I?.(v)},$=d=>{let l=d.target;l instanceof HTMLInputElement&&l.name===y&&l.setCustomValidity("")};return(0,r.jsxs)(F,{...R,parts:{root:o("sign-up-page","root",R.className),panel:o("sign-up-page","panel"),title:o("sign-up-page","title"),error:o("sign-up-page","error"),footer:o("sign-up-page","footer")},title:e,error:n,footer:U,children:[S.length>0?(0,r.jsx)("div",{...o("sign-up-page","providers"),children:S.map(d=>(0,r.jsx)(i.Button,{type:"button","data-provider":d.id,onClick:()=>{I?.({providerId:d.id})},...o("sign-up-page","provider"),children:M(d)},d.id))}):null,S.length>0?(0,r.jsx)(i.Divider,{...o("sign-up-page","divider")}):null,(0,r.jsxs)(i.Form,{onSubmit:V,onChange:$,...o("sign-up-page","form"),children:[a!==void 0?(0,r.jsx)(i.Field,{label:a,required:!0,...o("sign-up-page","field"),children:(0,r.jsx)(i.TextField,{name:"name",required:!0,children:(0,r.jsx)(k.TextFieldInput,{autoComplete:"name"})})}):null,(0,r.jsx)(i.Field,{label:p,required:!0,...o("sign-up-page","field"),children:(0,r.jsx)(i.TextField,{name:"email",required:!0,children:(0,r.jsx)(k.TextFieldInput,{type:"email",autoComplete:"email"})})}),(0,r.jsx)(i.Field,{label:g,required:!0,...o("sign-up-page","field"),children:(0,r.jsxs)(i.PasswordInput,{name:"password",required:!0,children:[(0,r.jsx)(m.PasswordInputField,{autoComplete:"new-password"}),(0,r.jsx)(m.PasswordInputToggle,{})]})}),b!==void 0?(0,r.jsx)(i.Field,{label:b,required:!0,...o("sign-up-page","field"),children:(0,r.jsxs)(i.PasswordInput,{name:y,required:!0,children:[(0,r.jsx)(m.PasswordInputField,{autoComplete:"new-password"}),(0,r.jsx)(m.PasswordInputToggle,{})]})}):null,D,A!==void 0?(0,r.jsx)(i.Field,{label:A,required:!0,...o("sign-up-page","terms"),children:(0,r.jsx)(i.Checkbox,{name:"terms",required:!0})}):null,(0,r.jsx)(i.Button,{type:"submit",loading:s,disabled:s,...o("sign-up-page","submit"),children:H})]})]})};C.displayName="SignUpPage";0&&(module.exports={SignUpPage});

package/dist/sign-up-page/SignUpPage.d.cts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { SignUpPageProps } from './types.cjs';
+/**
+ * Sign-up block: an error alert, one button per third-party provider, and the
+ * credentials form — name, email, password, confirmation and terms — reporting
+ * through `onSignUp`.
+ *
+ * @example
+ * ```tsx
+ * <SignUpPage
+ *   confirmPasswordLabel="Confirm password"
+ *   terms={<>I accept the <a href="/terms">terms</a>.</>}
+ *   error={error}
+ *   onSignUp={(detail) => void register(detail)}
+ * />
+ * ```
+ */
+export declare const SignUpPage: {
+    ({ title, providers, error, pending, nameLabel, emailLabel, passwordLabel, confirmPasswordLabel, passwordMismatchMessage, terms, submitLabel, getProviderLabel, footer, onSignUp, children, ...props }: SignUpPageProps): React.ReactNode;
+    displayName: string;
+};