@skdx/react-blocks 0.34.0 → 0.36.0

package/dist/usage-card/usage.d.ts

@@ -0,0 +1,18 @@
+/** @internal Clamps a raw amount into a safe non-negative number: `NaN` becomes `0`, a negative clamps to `0`. */
+export declare function normalizeUsage(value: number): number;
+/** @internal The `[0, max]` range a finite, positive limit renders as a meter. */
+export interface UsageMeterRange {
+    max: number;
+    value: number;
+}
+/** @internal What a finite limit resolves to: its normalized value, whether usage exceeds it, and the meter range to render. */
+export interface UsageMeterResult {
+    limit: number;
+    overLimit: boolean;
+    range: UsageMeterRange | null;
+}
+/**
+ * @internal Derives the meter range and over-limit flag for a finite limit.
+ * A zero limit renders no meter but counts as over-limit as soon as anything is used.
+ */
+export declare function usageMeter(used: number, limit: number): UsageMeterResult;

package/dist/user-menu/UserMenu.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var N=Object.create;var d=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var F=(e,t)=>{for(var n in t)d(e,n,{get:t[n],enumerable:!0})},M=(e,t,n,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of h(t))!D.call(e,s)&&s!==n&&d(e,s,{get:()=>t[s],enumerable:!(u=$(t,s))||u.enumerable});return e};var L=(e,t,n)=>(n=e!=null?N(w(e)):{},M(t||!e||!e.__esModule?d(n,"default",{value:e,enumerable:!0}):n,e)),V=e=>M(d({},"__esModule",{value:!0}),e);var z={};F(z,{UserMenu:()=>p});module.exports=V(z);var b=require("@skdx/react"),r=require("@skdx/react/primitives/menu");function _(...e){let t="";for(let n of e)n&&(t=t?`${t} ${n}`:n);return t}function a(e,t,n){let u=t==="root",s=u?`skdx-${e}`:`skdx-${e}__${t}`,i={className:_(s,n),"data-part":t};return u&&(i["data-skdx-component"]=e),i}var x=L(require("react"),1);function g(e,t,n){let[u,s]=x.useState(t),i=e!==void 0;return[i?e:u,l=>{i||s(l),n?.(l)}]}var o=require("react/jsx-runtime"),p=({name:e,description:t,avatarSrc:n,status:u,trigger:s,variant:i,open:c,defaultOpen:m=!1,onOpenChange:l,onOpenChangeComplete:v,onEscapeKeyDown:y,onPointerDownOutside:P,onFocusOutside:k,onInteractOutside:C,onCloseAutoFocus:T,side:R="bottom",align:S="end",children:U,...f})=>{let[A,O]=g(c,m,l);return(0,o.jsxs)(r.MenuRoot,{open:A,onOpenChange:O,onOpenChangeComplete:v,children:[(0,o.jsx)(r.MenuTrigger,{asChild:!0,children:s??(0,o.jsxs)("button",{type:"button","data-variant":i,...f,...a("user-menu","root",f.className),children:[(0,o.jsx)(b.Avatar,{src:n,name:e,decorative:!0,size:"sm",...a("user-menu","avatar")}),(0,o.jsxs)("span",{...a("user-menu","identity"),children:[(0,o.jsx)("span",{...a("user-menu","name"),children:e}),t?(0,o.jsx)("span",{...a("user-menu","description"),children:t}):null]}),u]})}),(0,o.jsx)(r.MenuPortal,{children:(0,o.jsxs)(r.MenuContent,{onEscapeKeyDown:y,onPointerDownOutside:P,onFocusOutside:k,onInteractOutside:C,onCloseAutoFocus:T,side:R,align:S,...a("user-menu","content"),children:[(0,o.jsxs)(r.MenuLabel,{...a("user-menu","header"),children:[(0,o.jsx)("span",{...a("user-menu","name"),children:e}),t?(0,o.jsx)("span",{...a("user-menu","description"),children:t}):null]}),(0,o.jsx)(r.MenuSeparator,{}),U]})})]})};p.displayName="UserMenu";0&&(module.exports={UserMenu});

package/dist/user-menu/UserMenu.d.cts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { UserMenuProps } from './types.cjs';
+/**
+ * The signed-in user's menu: a trigger showing an avatar, name and description
+ * that opens a panel repeating the identity above the application's own entries.
+ *
+ * @example
+ * ```tsx
+ * <UserMenu name="Ada Lovelace" description="ada@example.com" avatarSrc="/ada.png">
+ *   <MenuItem onSelect={openProfile}>Profile</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem onSelect={signOut}>Sign out</MenuItem>
+ * </UserMenu>
+ * ```
+ */
+export declare const UserMenu: {
+    ({ name, description, avatarSrc, status, trigger, variant, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onCloseAutoFocus, side, align, children, ...props }: UserMenuProps): React.ReactNode;
+    displayName: string;
+};

package/dist/user-menu/UserMenu.d.ts

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import type { UserMenuProps } from './types.js';
+/**
+ * The signed-in user's menu: a trigger showing an avatar, name and description
+ * that opens a panel repeating the identity above the application's own entries.
+ *
+ * @example
+ * ```tsx
+ * <UserMenu name="Ada Lovelace" description="ada@example.com" avatarSrc="/ada.png">
+ *   <MenuItem onSelect={openProfile}>Profile</MenuItem>
+ *   <MenuSeparator />
+ *   <MenuItem onSelect={signOut}>Sign out</MenuItem>
+ * </UserMenu>
+ * ```
+ */
+export declare const UserMenu: {
+    ({ name, description, avatarSrc, status, trigger, variant, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onCloseAutoFocus, side, align, children, ...props }: UserMenuProps): React.ReactNode;
+    displayName: string;
+};

package/dist/user-menu/UserMenu.js

@@ -0,0 +1,2 @@
+'use client';
+import{Avatar as A}from"@skdx/react";import{MenuContent as O,MenuLabel as N,MenuPortal as $,MenuRoot as h,MenuSeparator as w,MenuTrigger as D}from"@skdx/react/primitives/menu";function U(...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",u=a?`skdx-${t}`:`skdx-${t}__${e}`,s={className:U(u,o),"data-part":e};return a&&(s["data-skdx-component"]=t),s}import*as m from"react";function f(t,e,o){let[a,u]=m.useState(e),s=t!==void 0;return[s?t:a,l=>{s||u(l),o?.(l)}]}import{jsx as r,jsxs as i}from"react/jsx-runtime";var M=({name:t,description:e,avatarSrc:o,status:a,trigger:u,variant:s,open:d,defaultOpen:p=!1,onOpenChange:l,onOpenChangeComplete:x,onEscapeKeyDown:g,onPointerDownOutside:b,onFocusOutside:v,onInteractOutside:y,onCloseAutoFocus:P,side:k="bottom",align:C="end",children:T,...c})=>{let[R,S]=f(d,p,l);return i(h,{open:R,onOpenChange:S,onOpenChangeComplete:x,children:[r(D,{asChild:!0,children:u??i("button",{type:"button","data-variant":s,...c,...n("user-menu","root",c.className),children:[r(A,{src:o,name:t,decorative:!0,size:"sm",...n("user-menu","avatar")}),i("span",{...n("user-menu","identity"),children:[r("span",{...n("user-menu","name"),children:t}),e?r("span",{...n("user-menu","description"),children:e}):null]}),a]})}),r($,{children:i(O,{onEscapeKeyDown:g,onPointerDownOutside:b,onFocusOutside:v,onInteractOutside:y,onCloseAutoFocus:P,side:k,align:C,...n("user-menu","content"),children:[i(N,{...n("user-menu","header"),children:[r("span",{...n("user-menu","name"),children:t}),e?r("span",{...n("user-menu","description"),children:e}):null]}),r(w,{}),T]})})]})};M.displayName="UserMenu";export{M as UserMenu};

package/dist/user-menu/index.d.cts

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

package/dist/user-menu/index.d.ts

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

package/dist/user-menu/types.d.cts

@@ -0,0 +1,89 @@
+import type * as React from 'react';
+import type { MenuContent } from '@skdx/react/primitives/menu';
+type ContentProps = React.ComponentProps<typeof MenuContent>;
+/** Props for the {@link UserMenu} block. */
+export interface UserMenuProps extends React.ComponentPropsWithRef<'button'> {
+    /** The signed-in user's name, rendered in the trigger and repeated in the menu header. */
+    name: string;
+    /**
+     * Secondary text such as an email or role, rendered below the name in the trigger and the header.
+     * @default undefined — no description renders in either place.
+     */
+    description?: string | undefined;
+    /**
+     * Source of the identity image, passed straight through to the derived Avatar.
+     * @default undefined — the Avatar renders its initials fallback.
+     */
+    avatarSrc?: string | undefined;
+    /**
+     * Extra indicator, such as a status dot or Badge, rendered after the identity in the trigger.
+     * @default undefined — no status indicator renders.
+     */
+    status?: React.ReactNode | undefined;
+    /**
+     * Element that replaces the derived avatar-and-identity trigger entirely, merged with the menu's open behaviour via `asChild`.
+     * @default undefined — the derived trigger renders.
+     */
+    trigger?: React.ReactElement | undefined;
+    /**
+     * Visual rung written to `data-variant` on the derived trigger; `'compact'` visually hides the identity text while keeping it as the accessible name.
+     * @default undefined — the identity text stays visible.
+     */
+    variant?: 'compact' | (string & {}) | undefined;
+    /**
+     * Whether the menu is open, for controlled usage paired with `onOpenChange`.
+     * @default undefined — uncontrolled.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the menu starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Fires with the new open state whenever the menu opens or closes.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the new open state once the enter or exit animation has settled.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires when Escape is pressed while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
+    /**
+     * Fires on a pointer-down outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ContentProps['onPointerDownOutside'];
+    /**
+     * Fires when focus moves outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ContentProps['onFocusOutside'];
+    /**
+     * Fires for either kind of outside interaction, just before the specific event.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ContentProps['onInteractOutside'];
+    /**
+     * Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: ContentProps['onCloseAutoFocus'];
+    /**
+     * Which side of the trigger the menu panel opens on.
+     * @default 'bottom'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment of the menu panel relative to the side it opens on.
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+}
+export {};

package/dist/user-menu/types.d.ts

@@ -0,0 +1,89 @@
+import type * as React from 'react';
+import type { MenuContent } from '@skdx/react/primitives/menu';
+type ContentProps = React.ComponentProps<typeof MenuContent>;
+/** Props for the {@link UserMenu} block. */
+export interface UserMenuProps extends React.ComponentPropsWithRef<'button'> {
+    /** The signed-in user's name, rendered in the trigger and repeated in the menu header. */
+    name: string;
+    /**
+     * Secondary text such as an email or role, rendered below the name in the trigger and the header.
+     * @default undefined — no description renders in either place.
+     */
+    description?: string | undefined;
+    /**
+     * Source of the identity image, passed straight through to the derived Avatar.
+     * @default undefined — the Avatar renders its initials fallback.
+     */
+    avatarSrc?: string | undefined;
+    /**
+     * Extra indicator, such as a status dot or Badge, rendered after the identity in the trigger.
+     * @default undefined — no status indicator renders.
+     */
+    status?: React.ReactNode | undefined;
+    /**
+     * Element that replaces the derived avatar-and-identity trigger entirely, merged with the menu's open behaviour via `asChild`.
+     * @default undefined — the derived trigger renders.
+     */
+    trigger?: React.ReactElement | undefined;
+    /**
+     * Visual rung written to `data-variant` on the derived trigger; `'compact'` visually hides the identity text while keeping it as the accessible name.
+     * @default undefined — the identity text stays visible.
+     */
+    variant?: 'compact' | (string & {}) | undefined;
+    /**
+     * Whether the menu is open, for controlled usage paired with `onOpenChange`.
+     * @default undefined — uncontrolled.
+     */
+    open?: boolean | undefined;
+    /**
+     * Whether the menu starts open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Fires with the new open state whenever the menu opens or closes.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires with the new open state once the enter or exit animation has settled.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
+    /**
+     * Fires when Escape is pressed while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: ContentProps['onEscapeKeyDown'];
+    /**
+     * Fires on a pointer-down outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: ContentProps['onPointerDownOutside'];
+    /**
+     * Fires when focus moves outside the content while open; `preventDefault()` keeps it open.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: ContentProps['onFocusOutside'];
+    /**
+     * Fires for either kind of outside interaction, just before the specific event.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: ContentProps['onInteractOutside'];
+    /**
+     * Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: ContentProps['onCloseAutoFocus'];
+    /**
+     * Which side of the trigger the menu panel opens on.
+     * @default 'bottom'
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Alignment of the menu panel relative to the side it opens on.
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end' | undefined;
+}
+export {};

package/dist/verification-page/VerificationPage.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var C=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},b=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of I(e))!L.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(n=E(e,a))||n.enumerable});return t};var q=(t,e,r)=>(r=t!=null?C(H(t)):{},b(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),w=t=>b(c({},"__esModule",{value:!0}),t);var W={};_(W,{VerificationPage:()=>m});module.exports=w(W);var s=require("@skdx/react"),h=require("@skdx/react/primitives/field");var A=q(require("react"),1),u=require("@skdx/react"),l=require("react/jsx-runtime"),p=({parts:t,title:e,error:r,footer:n,children:a,...d})=>{let f=A.useId();return(0,l.jsx)("section",{"aria-labelledby":f,...d,...t.root,children:(0,l.jsxs)("div",{...t.panel,children:[(0,l.jsx)(u.Heading,{as:"h1",id:f,...t.title,children:e}),r?(0,l.jsx)(u.Alert,{status:"danger",...t.error,children:r}):null,a,n&&t.footer?(0,l.jsx)("div",{...t.footer,children:n}):null]})})};p.displayName="AuthPanel";function k(t,e){let r=t.get(e);return typeof r=="string"?r:""}function M(...t){let e="";for(let r of t)r&&(e=e?`${e} ${r}`:r);return e}function i(t,e,r){let n=e==="root",a=n?`skdx-${t}`:`skdx-${t}__${e}`,d={className:M(a,r),"data-part":e};return n&&(d["data-skdx-component"]=t),d}var o=require("react/jsx-runtime"),m=({title:t="Enter your verification code",description:e,error:r,pending:n=!1,codeLabel:a="Verification code",length:d=6,value:f,defaultValue:y,onValueChange:R,submitLabel:V="Verify",resendLabel:S="Resend code",resendDisabled:F=!1,resendHint:g,footer:N,onVerify:$,onResend:P,children:D,...x})=>{let T=v=>{v.preventDefault();let B=new FormData(v.currentTarget);$?.({code:k(B,"code")})};return(0,o.jsxs)(p,{...x,parts:{root:i("verification-page","root",x.className),panel:i("verification-page","panel"),title:i("verification-page","title"),error:i("verification-page","error"),footer:i("verification-page","footer")},title:t,error:r,footer:N,children:[e?(0,o.jsx)(s.Text,{as:"p",tone:"muted",...i("verification-page","description"),children:e}):null,(0,o.jsxs)(s.Form,{onSubmit:T,...i("verification-page","form"),children:[(0,o.jsxs)(s.Fieldset,{...i("verification-page","field"),children:[(0,o.jsx)(h.FieldLabel,{children:a}),(0,o.jsx)(s.PinInput,{"aria-label":a,name:"code",required:!0,otp:!0,length:d,value:f,defaultValue:y,onValueChange:R,...i("verification-page","code")})]}),D,(0,o.jsx)(s.Button,{type:"submit",loading:n,disabled:n,...i("verification-page","submit"),children:V})]}),P?(0,o.jsxs)("div",{...i("verification-page","resend"),children:[(0,o.jsx)(s.Button,{type:"button",variant:"ghost",disabled:F,onClick:P,children:S}),g?(0,o.jsx)("span",{...i("verification-page","resend-hint"),children:g}):null]}):null]})};m.displayName="VerificationPage";0&&(module.exports={VerificationPage});

package/dist/verification-page/VerificationPage.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { VerificationPageProps } from './types.cjs';
+/**
+ * Verification block: a pin input for a one-time code, a submit button reporting
+ * through `onVerify`, and an optional resend control the consumer drives.
+ *
+ * @example
+ * ```tsx
+ * <VerificationPage
+ *   description="We sent a code to ada@example.com."
+ *   resendHint={cooldown > 0 ? `You can resend in ${cooldown} seconds` : undefined}
+ *   onVerify={({ code }) => void verify(code)}
+ *   onResend={() => void resend()}
+ * />
+ * ```
+ */
+export declare const VerificationPage: {
+    ({ title, description, error, pending, codeLabel, length, value, defaultValue, onValueChange, submitLabel, resendLabel, resendDisabled, resendHint, footer, onVerify, onResend, children, ...props }: VerificationPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/verification-page/VerificationPage.d.ts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { VerificationPageProps } from './types.js';
+/**
+ * Verification block: a pin input for a one-time code, a submit button reporting
+ * through `onVerify`, and an optional resend control the consumer drives.
+ *
+ * @example
+ * ```tsx
+ * <VerificationPage
+ *   description="We sent a code to ada@example.com."
+ *   resendHint={cooldown > 0 ? `You can resend in ${cooldown} seconds` : undefined}
+ *   onVerify={({ code }) => void verify(code)}
+ *   onResend={() => void resend()}
+ * />
+ * ```
+ */
+export declare const VerificationPage: {
+    ({ title, description, error, pending, codeLabel, length, value, defaultValue, onValueChange, submitLabel, resendLabel, resendDisabled, resendHint, footer, onVerify, onResend, children, ...props }: VerificationPageProps): React.ReactNode;
+    displayName: string;
+};

package/dist/verification-page/VerificationPage.js

@@ -0,0 +1,2 @@
+'use client';
+import{Button as v,Fieldset as E,Form as I,PinInput as H,Text as L}from"@skdx/react";import{FieldLabel as _}from"@skdx/react/primitives/field";import*as P from"react";import{Alert as D,Heading as T}from"@skdx/react";import{jsx as d,jsxs as B}from"react/jsx-runtime";var c=({parts:t,title:e,error:r,footer:a,children:o,...n})=>{let l=P.useId();return d("section",{"aria-labelledby":l,...n,...t.root,children:B("div",{...t.panel,children:[d(T,{as:"h1",id:l,...t.title,children:e}),r?d(D,{status:"danger",...t.error,children:r}):null,o,a&&t.footer?d("div",{...t.footer,children:a}):null]})})};c.displayName="AuthPanel";function x(t,e){let r=t.get(e);return typeof r=="string"?r:""}function C(...t){let e="";for(let r of t)r&&(e=e?`${e} ${r}`:r);return e}function i(t,e,r){let a=e==="root",o=a?`skdx-${t}`:`skdx-${t}__${e}`,n={className:C(o,r),"data-part":e};return a&&(n["data-skdx-component"]=t),n}import{jsx as s,jsxs as f}from"react/jsx-runtime";var b=({title:t="Enter your verification code",description:e,error:r,pending:a=!1,codeLabel:o="Verification code",length:n=6,value:l,defaultValue:A,onValueChange:k,submitLabel:h="Verify",resendLabel:y="Resend code",resendDisabled:R=!1,resendHint:u,footer:V,onVerify:S,onResend:p,children:F,...m})=>{let N=g=>{g.preventDefault();let $=new FormData(g.currentTarget);S?.({code:x($,"code")})};return f(c,{...m,parts:{root:i("verification-page","root",m.className),panel:i("verification-page","panel"),title:i("verification-page","title"),error:i("verification-page","error"),footer:i("verification-page","footer")},title:t,error:r,footer:V,children:[e?s(L,{as:"p",tone:"muted",...i("verification-page","description"),children:e}):null,f(I,{onSubmit:N,...i("verification-page","form"),children:[f(E,{...i("verification-page","field"),children:[s(_,{children:o}),s(H,{"aria-label":o,name:"code",required:!0,otp:!0,length:n,value:l,defaultValue:A,onValueChange:k,...i("verification-page","code")})]}),F,s(v,{type:"submit",loading:a,disabled:a,...i("verification-page","submit"),children:h})]}),p?f("div",{...i("verification-page","resend"),children:[s(v,{type:"button",variant:"ghost",disabled:R,onClick:p,children:y}),u?s("span",{...i("verification-page","resend-hint"),children:u}):null]}):null]})};b.displayName="VerificationPage";export{b as VerificationPage};

package/dist/verification-page/index.d.cts

@@ -0,0 +1,2 @@
+export { VerificationPage } from './VerificationPage.cjs';
+export type { VerificationPageProps, VerificationDetail } from './types.cjs';

package/dist/verification-page/index.d.ts

@@ -0,0 +1,2 @@
+export { VerificationPage } from './VerificationPage.js';
+export type { VerificationPageProps, VerificationDetail } from './types.js';

package/dist/verification-page/types.d.cts

@@ -0,0 +1,89 @@
+import type * as React from 'react';
+/** What {@link VerificationPageProps.onVerify} is called with once a complete code is submitted. */
+export interface VerificationDetail {
+    /** The full code, exactly `length` characters long. */
+    code: string;
+}
+/** Props for the {@link VerificationPage} block. */
+export interface VerificationPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Enter your verification code'
+     */
+    title?: string | undefined;
+    /**
+     * Supporting copy rendered below the title, naming where the code was sent.
+     * @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;
+    /**
+     * Marks the request in flight, making the submit button busy and unusable while the boxes stay editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Legend of the code fieldset and accessible name of the derived pin input holding the code.
+     * @default 'Verification code'
+     */
+    codeLabel?: string | undefined;
+    /**
+     * How many character boxes the code is entered into, and how long a complete code is.
+     * @default 6
+     */
+    length?: number | undefined;
+    /**
+     * Current code, for controlled usage; pair it with `onValueChange`.
+     * @default undefined — uncontrolled, the pin input tracks the code itself.
+     */
+    value?: string | undefined;
+    /**
+     * Initial code, for uncontrolled usage — seeds the boxes on first render.
+     * @default undefined — the boxes start empty.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the new code whenever any box changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Verify'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Text of the resend button, which renders only alongside an `onResend` handler.
+     * @default 'Resend code'
+     */
+    resendLabel?: string | undefined;
+    /**
+     * Makes the resend button unusable, for a consumer running its own cooldown.
+     * @default false
+     */
+    resendDisabled?: boolean | undefined;
+    /**
+     * Note rendered beside the resend button, such as how long the cooldown has left.
+     * @default undefined — no hint renders; the block runs no timer of its own.
+     */
+    resendHint?: string | undefined;
+    /**
+     * Navigation rendered below the resend region, such as a link back to the sign-in page.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires when a complete code is submitted, carrying that code.
+     * @default undefined — no-op if omitted.
+     */
+    onVerify?: ((detail: VerificationDetail) => void) | undefined;
+    /**
+     * Fires when the resend button is activated; supplying it is what renders the resend region.
+     * @default undefined — no resend region renders.
+     */
+    onResend?: (() => void) | undefined;
+}

package/dist/verification-page/types.d.ts

@@ -0,0 +1,89 @@
+import type * as React from 'react';
+/** What {@link VerificationPageProps.onVerify} is called with once a complete code is submitted. */
+export interface VerificationDetail {
+    /** The full code, exactly `length` characters long. */
+    code: string;
+}
+/** Props for the {@link VerificationPage} block. */
+export interface VerificationPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Enter your verification code'
+     */
+    title?: string | undefined;
+    /**
+     * Supporting copy rendered below the title, naming where the code was sent.
+     * @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;
+    /**
+     * Marks the request in flight, making the submit button busy and unusable while the boxes stay editable.
+     * @default false
+     */
+    pending?: boolean | undefined;
+    /**
+     * Legend of the code fieldset and accessible name of the derived pin input holding the code.
+     * @default 'Verification code'
+     */
+    codeLabel?: string | undefined;
+    /**
+     * How many character boxes the code is entered into, and how long a complete code is.
+     * @default 6
+     */
+    length?: number | undefined;
+    /**
+     * Current code, for controlled usage; pair it with `onValueChange`.
+     * @default undefined — uncontrolled, the pin input tracks the code itself.
+     */
+    value?: string | undefined;
+    /**
+     * Initial code, for uncontrolled usage — seeds the boxes on first render.
+     * @default undefined — the boxes start empty.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Fires with the new code whenever any box changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: ((value: string) => void) | undefined;
+    /**
+     * Text of the form's submit button.
+     * @default 'Verify'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Text of the resend button, which renders only alongside an `onResend` handler.
+     * @default 'Resend code'
+     */
+    resendLabel?: string | undefined;
+    /**
+     * Makes the resend button unusable, for a consumer running its own cooldown.
+     * @default false
+     */
+    resendDisabled?: boolean | undefined;
+    /**
+     * Note rendered beside the resend button, such as how long the cooldown has left.
+     * @default undefined — no hint renders; the block runs no timer of its own.
+     */
+    resendHint?: string | undefined;
+    /**
+     * Navigation rendered below the resend region, such as a link back to the sign-in page.
+     * @default undefined — no footer region renders.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Fires when a complete code is submitted, carrying that code.
+     * @default undefined — no-op if omitted.
+     */
+    onVerify?: ((detail: VerificationDetail) => void) | undefined;
+    /**
+     * Fires when the resend button is activated; supplying it is what renders the resend region.
+     * @default undefined — no resend region renders.
+     */
+    onResend?: (() => void) | undefined;
+}

package/dist/workspace-switcher/WorkspaceSwitcher.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var Z=Object.create;var w=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var r in t)w(e,r,{get:t[r],enumerable:!0})},y=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ee(t))!oe.call(e,s)&&s!==r&&w(e,s,{get:()=>t[s],enumerable:!(n=j(t,s))||n.enumerable});return e};var x=(e,t,r)=>(r=e!=null?Z(te(e)):{},y(t||!e||!e.__esModule?w(r,"default",{value:e,enumerable:!0}):r,e)),ne=e=>y(w({},"__esModule",{value:!0}),e);var de={};re(de,{WorkspaceSwitcher:()=>b});module.exports=ne(de);var L=x(require("react"),1),N=require("@skdx/react"),i=require("@skdx/react/primitives/command"),m=require("@skdx/react/primitives/popover");function ae(...e){let t="";for(let r of e)r&&(t=t?`${t} ${r}`:r);return t}function a(e,t,r){let n=t==="root",s=n?`skdx-${e}`:`skdx-${e}__${t}`,d={className:ae(s,r),"data-part":t};return n&&(d["data-skdx-component"]=e),d}var I=require("react/jsx-runtime"),g=({part:e,children:t})=>t?(0,I.jsx)("div",{...e,children:t}):null;g.displayName="Region";var W=x(require("react"),1);function k(e,t,r){let[n,s]=W.useState(t),d=e!==void 0;return[d?e:n,f=>{d||s(f),r?.(f)}]}var o=require("react/jsx-runtime");function se(e,t){let r=t.toLowerCase(),n=new Map([[void 0,[]]]);for(let c of e){let u=n.get(c.group);u?u.push(c):n.set(c.group,[c])}let s=c=>r===""||c.id.toLowerCase().includes(r)||c.label.toLowerCase().includes(r)||(c.description?.toLowerCase().includes(r)??!1),d=[];for(let[c,u]of n)u.some(s)&&d.push({heading:c,items:u});return d}function ie({current:e,placeholder:t,renderLeading:r}){return(0,o.jsxs)(o.Fragment,{children:[r&&e?(0,o.jsx)("span",{"aria-hidden":"true",...a("workspace-switcher","leading"),children:r(e)}):null,(0,o.jsx)("span",{...a("workspace-switcher","current"),children:e?.label??t}),e?.description?(0,o.jsx)("span",{...a("workspace-switcher","description"),children:e.description}):null]})}function ce({item:e,selected:t,selectedLabel:r,renderLeading:n}){return(0,o.jsxs)(o.Fragment,{children:[n?(0,o.jsx)("span",{"aria-hidden":"true",...a("workspace-switcher","item-leading"),children:n(e)}):null,(0,o.jsx)("span",{...a("workspace-switcher","item-label"),children:e.label}),e.description?(0,o.jsx)("span",{...a("workspace-switcher","item-description"),children:e.description}):null,t?(0,o.jsx)(N.VisuallyHidden,{children:r}):null]})}var b=({items:e,value:t,defaultValue:r="",onValueChange:n,placeholder:s="Select",label:d,searchLabel:c="Search",searchPlaceholder:u,emptyMessage:f="No results",loadingMessage:T="Loading",loading:A=!1,selectedLabel:O="Current",renderLeading:S,actions:G,trigger:E,open:V,defaultOpen:$=!1,onOpenChange:F,onOpenChangeComplete:D,onEscapeKeyDown:H,onPointerDownOutside:J,onFocusOutside:X,onInteractOutside:_,onOpenAutoFocus:K,onCloseAutoFocus:M,...C})=>{let[h,U]=k(t,r,n),[q,z]=k(V,$,F),[P,R]=L.useState(""),B=e.find(l=>l.id===h),Q=se(e,P),v=l=>{l||R(""),z(l)},Y=l=>{U(l),v(!1)};return(0,o.jsxs)(m.PopoverRoot,{open:q,onOpenChange:v,onOpenChangeComplete:D,modal:"none",children:[(0,o.jsx)(m.PopoverTrigger,{asChild:!0,"aria-label":d,...C,...a("workspace-switcher","root",C.className),children:E??(0,o.jsx)("button",{type:"button",children:(0,o.jsx)(ie,{current:B,placeholder:s,renderLeading:S})})}),(0,o.jsx)(m.PopoverPortal,{children:(0,o.jsxs)(m.PopoverContent,{onEscapeKeyDown:H,onPointerDownOutside:J,onFocusOutside:X,onInteractOutside:_,onOpenAutoFocus:K,onCloseAutoFocus:M,align:"start","aria-label":d??s,...a("workspace-switcher","content"),children:[(0,o.jsxs)(i.Command,{loading:A,search:P,onSearchChange:R,children:[(0,o.jsx)(i.CommandInput,{"aria-label":c,placeholder:u,...a("workspace-switcher","search")}),(0,o.jsx)(i.CommandList,{"aria-label":d??s,...a("workspace-switcher","list"),children:Q.map(l=>(0,o.jsx)(i.CommandGroup,{heading:l.heading,...a("workspace-switcher","group"),children:l.items.map(p=>(0,o.jsx)(i.CommandItem,{value:p.id,keywords:p.description?[p.label,p.description]:[p.label],disabled:p.disabled,onSelect:()=>{Y(p.id)},"data-selected":p.id===h?"":void 0,...a("workspace-switcher","item"),children:(0,o.jsx)(ce,{item:p,selected:p.id===h,selectedLabel:O,renderLeading:S})},p.id))},l.heading??""))}),(0,o.jsx)(i.CommandLoading,{...a("workspace-switcher","loading"),children:T}),(0,o.jsx)(i.CommandEmpty,{...a("workspace-switcher","empty"),children:f})]}),(0,o.jsx)(g,{part:a("workspace-switcher","footer"),children:G})]})})]})};b.displayName="WorkspaceSwitcher";0&&(module.exports={WorkspaceSwitcher});

package/dist/workspace-switcher/WorkspaceSwitcher.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { WorkspaceSwitcherProps } from './types.cjs';
+/**
+ * Switches the active context — workspace, organisation, team, account or
+ * project — from a searchable, groupable list in a focus-trapped popover, with
+ * loading, empty and footer regions.
+ *
+ * @example
+ * ```tsx
+ * <WorkspaceSwitcher
+ *   label="Switch workspace"
+ *   defaultValue="acme"
+ *   items={[
+ *     { id: 'acme', label: 'Acme', description: 'Pro', group: 'Organisations' },
+ *     { id: 'globex', label: 'Globex', group: 'Organisations' },
+ *   ]}
+ *   onValueChange={(id) => setWorkspace(id)}
+ *   actions={<Button>Create workspace</Button>}
+ * />
+ * ```
+ */
+export declare const WorkspaceSwitcher: {
+    ({ items, value: valueProp, defaultValue, onValueChange, placeholder, label, searchLabel, searchPlaceholder, emptyMessage, loadingMessage, loading, selectedLabel, renderLeading, actions, trigger, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: WorkspaceSwitcherProps): React.ReactNode;
+    displayName: string;
+};

package/dist/workspace-switcher/WorkspaceSwitcher.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { WorkspaceSwitcherProps } from './types.js';
+/**
+ * Switches the active context — workspace, organisation, team, account or
+ * project — from a searchable, groupable list in a focus-trapped popover, with
+ * loading, empty and footer regions.
+ *
+ * @example
+ * ```tsx
+ * <WorkspaceSwitcher
+ *   label="Switch workspace"
+ *   defaultValue="acme"
+ *   items={[
+ *     { id: 'acme', label: 'Acme', description: 'Pro', group: 'Organisations' },
+ *     { id: 'globex', label: 'Globex', group: 'Organisations' },
+ *   ]}
+ *   onValueChange={(id) => setWorkspace(id)}
+ *   actions={<Button>Create workspace</Button>}
+ * />
+ * ```
+ */
+export declare const WorkspaceSwitcher: {
+    ({ items, value: valueProp, defaultValue, onValueChange, placeholder, label, searchLabel, searchPlaceholder, emptyMessage, loadingMessage, loading, selectedLabel, renderLeading, actions, trigger, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, onOpenAutoFocus, onCloseAutoFocus, ...props }: WorkspaceSwitcherProps): React.ReactNode;
+    displayName: string;
+};

package/dist/workspace-switcher/WorkspaceSwitcher.js

@@ -0,0 +1,2 @@
+'use client';
+import*as R from"react";import{VisuallyHidden as B}from"@skdx/react";import{Command as Q,CommandEmpty as Y,CommandGroup as Z,CommandInput as j,CommandItem as ee,CommandList as te,CommandLoading as oe}from"@skdx/react/primitives/command";import{PopoverContent as re,PopoverPortal as ne,PopoverRoot as ae,PopoverTrigger as se}from"@skdx/react/primitives/popover";function q(...e){let t="";for(let o of e)o&&(t=t?`${t} ${o}`:o);return t}function n(e,t,o){let a=t==="root",p=a?`skdx-${e}`:`skdx-${e}__${t}`,i={className:q(p,o),"data-part":t};return a&&(i["data-skdx-component"]=e),i}import{jsx as z}from"react/jsx-runtime";var w=({part:e,children:t})=>t?z("div",{...e,children:t}):null;w.displayName="Region";import*as P from"react";function h(e,t,o){let[a,p]=P.useState(t),i=e!==void 0;return[i?e:a,m=>{i||p(m),o?.(m)}]}import{Fragment as y,jsx as r,jsxs as u}from"react/jsx-runtime";function ie(e,t){let o=t.toLowerCase(),a=new Map([[void 0,[]]]);for(let s of e){let l=a.get(s.group);l?l.push(s):a.set(s.group,[s])}let p=s=>o===""||s.id.toLowerCase().includes(o)||s.label.toLowerCase().includes(o)||(s.description?.toLowerCase().includes(o)??!1),i=[];for(let[s,l]of a)l.some(p)&&i.push({heading:s,items:l});return i}function ce({current:e,placeholder:t,renderLeading:o}){return u(y,{children:[o&&e?r("span",{"aria-hidden":"true",...n("workspace-switcher","leading"),children:o(e)}):null,r("span",{...n("workspace-switcher","current"),children:e?.label??t}),e?.description?r("span",{...n("workspace-switcher","description"),children:e.description}):null]})}function de({item:e,selected:t,selectedLabel:o,renderLeading:a}){return u(y,{children:[a?r("span",{"aria-hidden":"true",...n("workspace-switcher","item-leading"),children:a(e)}):null,r("span",{...n("workspace-switcher","item-label"),children:e.label}),e.description?r("span",{...n("workspace-switcher","item-description"),children:e.description}):null,t?r(B,{children:o}):null]})}var v=({items:e,value:t,defaultValue:o="",onValueChange:a,placeholder:p="Select",label:i,searchLabel:s="Search",searchPlaceholder:l,emptyMessage:m="No results",loadingMessage:x="Loading",loading:I=!1,selectedLabel:W="Current",renderLeading:g,actions:L,trigger:N,open:T,defaultOpen:A=!1,onOpenChange:O,onOpenChangeComplete:G,onEscapeKeyDown:E,onPointerDownOutside:V,onFocusOutside:$,onInteractOutside:F,onOpenAutoFocus:D,onCloseAutoFocus:H,...k})=>{let[f,J]=h(t,o,a),[X,_]=h(T,A,O),[b,S]=R.useState(""),K=e.find(d=>d.id===f),M=ie(e,b),C=d=>{d||S(""),_(d)},U=d=>{J(d),C(!1)};return u(ae,{open:X,onOpenChange:C,onOpenChangeComplete:G,modal:"none",children:[r(se,{asChild:!0,"aria-label":i,...k,...n("workspace-switcher","root",k.className),children:N??r("button",{type:"button",children:r(ce,{current:K,placeholder:p,renderLeading:g})})}),r(ne,{children:u(re,{onEscapeKeyDown:E,onPointerDownOutside:V,onFocusOutside:$,onInteractOutside:F,onOpenAutoFocus:D,onCloseAutoFocus:H,align:"start","aria-label":i??p,...n("workspace-switcher","content"),children:[u(Q,{loading:I,search:b,onSearchChange:S,children:[r(j,{"aria-label":s,placeholder:l,...n("workspace-switcher","search")}),r(te,{"aria-label":i??p,...n("workspace-switcher","list"),children:M.map(d=>r(Z,{heading:d.heading,...n("workspace-switcher","group"),children:d.items.map(c=>r(ee,{value:c.id,keywords:c.description?[c.label,c.description]:[c.label],disabled:c.disabled,onSelect:()=>{U(c.id)},"data-selected":c.id===f?"":void 0,...n("workspace-switcher","item"),children:r(de,{item:c,selected:c.id===f,selectedLabel:W,renderLeading:g})},c.id))},d.heading??""))}),r(oe,{...n("workspace-switcher","loading"),children:x}),r(Y,{...n("workspace-switcher","empty"),children:m})]}),r(w,{part:n("workspace-switcher","footer"),children:L})]})})]})};v.displayName="WorkspaceSwitcher";export{v as WorkspaceSwitcher};

package/dist/workspace-switcher/index.d.cts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher.cjs';
+export type { WorkspaceSwitcherItem, WorkspaceSwitcherProps } from './types.cjs';

package/dist/workspace-switcher/index.d.ts

@@ -0,0 +1,2 @@
+export { WorkspaceSwitcher } from './WorkspaceSwitcher.js';
+export type { WorkspaceSwitcherItem, WorkspaceSwitcherProps } from './types.js';