@skdx/react-blocks 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SkandaDX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+# @skdx/react-blocks
+
+React blocks for the SkandaDX design system — page-level compositions of `@skdx/react` styled by `@skdx/skins`.
+
+```sh
+pnpm add @skdx/react-blocks @skdx/react
+```
+
+Documentation: <https://github.com/SkandaDX/ui.skdx/tree/main/packages/react-blocks#readme>

package/dist/dashboard-layout/DashboardLayout.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var R=Object.create;var u=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var $=(t,a)=>{for(var o in a)u(t,o,{get:a[o],enumerable:!0})},f=(t,a,o,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of L(a))!I.call(t,d)&&d!==o&&u(t,d,{get:()=>a[d],enumerable:!(r=T(a,d))||r.enumerable});return t};var p=(t,a,o)=>(o=t!=null?R(S(t)):{},f(a||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),A=t=>f(u({},"__esModule",{value:!0}),t);var C={};$(C,{DashboardLayout:()=>c});module.exports=A(C);var k=p(require("react"),1),x=require("@skdx/react");function O(...t){let a="";for(let o of t)o&&(a=a?`${a} ${o}`:o);return a}function e(t,a,o){let r=a==="root",d=r?`skdx-${t}`:`skdx-${t}__${a}`,s={className:O(d,o),"data-part":a};return r&&(s["data-skdx-component"]=t),s}var g=p(require("react"),1);function m(t,a,o){let[r,d]=g.useState(a),s=t!==void 0;return[s?t:r,i=>{s||d(i),o?.(i)}]}var n=require("react/jsx-runtime");function N({items:t}){return(0,n.jsx)("ul",{...e("dashboard-layout","nav-list"),children:t.map((a,o)=>{let r=a.kind??"item";return r==="divider"?(0,n.jsx)("li",{role:"separator",...e("dashboard-layout","nav-divider")},o):r==="header"?(0,n.jsx)("li",{...e("dashboard-layout","nav-header"),children:a.label},o):(0,n.jsxs)("li",{children:[a.href===void 0?(0,n.jsx)("span",{...e("dashboard-layout","nav-item"),children:a.label}):(0,n.jsx)("a",{href:a.href,"aria-current":a.current?"page":void 0,...e("dashboard-layout","nav-item"),children:a.label}),a.children&&a.children.length>0?(0,n.jsx)(N,{items:a.children}):null]},o)})})}var c=({title:t,navigation:a,navOpen:o,defaultNavOpen:r=!0,navLabel:d="Main navigation",navToggleLabel:s="Toggle navigation",onNavOpenChange:b,branding:v,actions:i,children:D,...h})=>{let y=k.useId(),[l,P]=m(o,r,b);return(0,n.jsxs)("div",{"data-nav-open":l?"":void 0,...h,...e("dashboard-layout","root",h.className),children:[(0,n.jsxs)("header",{...e("dashboard-layout","app-bar"),children:[(0,n.jsx)(x.Button,{iconOnly:!0,"aria-expanded":l,"aria-controls":y,"aria-label":s,onClick:()=>{P(!l)},...e("dashboard-layout","nav-toggle"),children:"\u2630"}),(0,n.jsx)("div",{...e("dashboard-layout","branding"),children:v}),t?(0,n.jsx)("span",{...e("dashboard-layout","title"),children:t}):null,(0,n.jsx)("div",{...e("dashboard-layout","actions"),children:i})]}),(0,n.jsxs)("div",{...e("dashboard-layout","body"),children:[(0,n.jsx)("nav",{id:y,"aria-label":d,hidden:!l,...e("dashboard-layout","nav"),children:(0,n.jsx)(N,{items:a})}),(0,n.jsx)("main",{...e("dashboard-layout","content"),children:D})]})]})};c.displayName="DashboardLayout";0&&(module.exports={DashboardLayout});

package/dist/dashboard-layout/DashboardLayout.d.cts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { DashboardLayoutProps } from './types.cjs';
+/**
+ * Application shell block: an app bar with a navigation toggle, branding, title
+ * and actions; a collapsible side `<nav>`; and a `<main>` content region.
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   title="Acme"
+ *   navigation={[{ label: 'Overview', href: '/', current: true }]}
+ * >
+ *   <p>Content.</p>
+ * </DashboardLayout>
+ * ```
+ */
+export declare const DashboardLayout: {
+    ({ title, navigation, navOpen: navOpenProp, defaultNavOpen, navLabel, navToggleLabel, onNavOpenChange, branding, actions, children, ...props }: DashboardLayoutProps): React.ReactNode;
+    displayName: string;
+};

package/dist/dashboard-layout/DashboardLayout.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { DashboardLayoutProps } from './types.js';
+/**
+ * Application shell block: an app bar with a navigation toggle, branding, title
+ * and actions; a collapsible side `<nav>`; and a `<main>` content region.
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   title="Acme"
+ *   navigation={[{ label: 'Overview', href: '/', current: true }]}
+ * >
+ *   <p>Content.</p>
+ * </DashboardLayout>
+ * ```
+ */
+export declare const DashboardLayout: {
+    ({ title, navigation, navOpen: navOpenProp, defaultNavOpen, navLabel, navToggleLabel, onNavOpenChange, branding, actions, children, ...props }: DashboardLayoutProps): React.ReactNode;
+    displayName: string;
+};

package/dist/dashboard-layout/DashboardLayout.js

@@ -0,0 +1,2 @@
+'use client';
+import*as p from"react";import{Button as D}from"@skdx/react";function N(...o){let a="";for(let n of o)n&&(a=a?`${a} ${n}`:n);return a}function t(o,a,n){let r=a==="root",s=r?`skdx-${o}`:`skdx-${o}__${a}`,d={className:N(s,n),"data-part":a};return r&&(d["data-skdx-component"]=o),d}import*as y from"react";function f(o,a,n){let[r,s]=y.useState(a),d=o!==void 0;return[d?o:r,i=>{d||s(i),n?.(i)}]}import{jsx as e,jsxs as u}from"react/jsx-runtime";function g({items:o}){return e("ul",{...t("dashboard-layout","nav-list"),children:o.map((a,n)=>{let r=a.kind??"item";return r==="divider"?e("li",{role:"separator",...t("dashboard-layout","nav-divider")},n):r==="header"?e("li",{...t("dashboard-layout","nav-header"),children:a.label},n):u("li",{children:[a.href===void 0?e("span",{...t("dashboard-layout","nav-item"),children:a.label}):e("a",{href:a.href,"aria-current":a.current?"page":void 0,...t("dashboard-layout","nav-item"),children:a.label}),a.children&&a.children.length>0?e(g,{items:a.children}):null]},n)})})}var m=({title:o,navigation:a,navOpen:n,defaultNavOpen:r=!0,navLabel:s="Main navigation",navToggleLabel:d="Toggle navigation",onNavOpenChange:c,branding:b,actions:i,children:k,...v})=>{let h=p.useId(),[l,x]=f(n,r,c);return u("div",{"data-nav-open":l?"":void 0,...v,...t("dashboard-layout","root",v.className),children:[u("header",{...t("dashboard-layout","app-bar"),children:[e(D,{iconOnly:!0,"aria-expanded":l,"aria-controls":h,"aria-label":d,onClick:()=>{x(!l)},...t("dashboard-layout","nav-toggle"),children:"\u2630"}),e("div",{...t("dashboard-layout","branding"),children:b}),o?e("span",{...t("dashboard-layout","title"),children:o}):null,e("div",{...t("dashboard-layout","actions"),children:i})]}),u("div",{...t("dashboard-layout","body"),children:[e("nav",{id:h,"aria-label":s,hidden:!l,...t("dashboard-layout","nav"),children:e(g,{items:a})}),e("main",{...t("dashboard-layout","content"),children:k})]})]})};m.displayName="DashboardLayout";export{m as DashboardLayout};

package/dist/dashboard-layout/index.d.cts

@@ -0,0 +1,2 @@
+export { DashboardLayout } from './DashboardLayout.cjs';
+export type { DashboardLayoutProps, DashboardNavigationItem, DashboardNavigationKind, } from './types.cjs';

package/dist/dashboard-layout/index.d.ts

@@ -0,0 +1,2 @@
+export { DashboardLayout } from './DashboardLayout.js';
+export type { DashboardLayoutProps, DashboardNavigationItem, DashboardNavigationKind, } from './types.js';

package/dist/dashboard-layout/types.d.cts

@@ -0,0 +1,76 @@
+import type * as React from 'react';
+/** What one {@link DashboardNavigationItem} renders as inside the side navigation. */
+export type DashboardNavigationKind = 'item' | 'header' | 'divider';
+/** One entry of {@link DashboardLayoutProps.navigation} — a navigation entry, a group label or a separator. */
+export interface DashboardNavigationItem {
+    /**
+     * Whether this entry renders as a navigation entry, a group label, or a separator.
+     * @default 'item'
+     */
+    kind?: DashboardNavigationKind | undefined;
+    /**
+     * Text rendered inside the entry; a divider renders no text of its own.
+     * @default undefined — nothing is rendered inside the entry.
+     */
+    label?: string | undefined;
+    /**
+     * Destination of the entry's link; omitted, the entry renders as plain text.
+     * @default undefined — rendered as a non-navigable label.
+     */
+    href?: string | undefined;
+    /**
+     * Marks this entry as the page the user is on, emitting `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean | undefined;
+    /**
+     * Nested entries, rendered as a list below this entry's label.
+     * @default undefined — the entry has no nested list.
+     */
+    children?: DashboardNavigationItem[] | undefined;
+}
+/** Props for the {@link DashboardLayout} block. */
+export interface DashboardLayoutProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Application title shown in the app bar after the branding.
+     * @default undefined — no title renders.
+     */
+    title?: string | undefined;
+    /** The side navigation, in render order, one entry per link, group label or separator. */
+    navigation: DashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage paired with `onNavOpenChange`.
+     * @default undefined — uncontrolled, seeded from `defaultNavOpen`.
+     */
+    navOpen?: boolean | undefined;
+    /**
+     * Whether the side navigation starts shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultNavOpen?: boolean | undefined;
+    /**
+     * Accessible name written to the side `<nav>` landmark, telling it apart from other navigation.
+     * @default 'Main navigation'
+     */
+    navLabel?: string | undefined;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel?: string | undefined;
+    /**
+     * Fires with the new open state whenever the navigation toggle is activated.
+     * @default undefined — no-op if omitted.
+     */
+    onNavOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Logo or product mark rendered at the start of the app bar.
+     * @default undefined — the branding region renders empty.
+     */
+    branding?: React.ReactNode | undefined;
+    /**
+     * Controls rendered at the end of the app bar, such as a profile menu.
+     * @default undefined — the actions region renders empty.
+     */
+    actions?: React.ReactNode | undefined;
+}

package/dist/dashboard-layout/types.d.ts

@@ -0,0 +1,76 @@
+import type * as React from 'react';
+/** What one {@link DashboardNavigationItem} renders as inside the side navigation. */
+export type DashboardNavigationKind = 'item' | 'header' | 'divider';
+/** One entry of {@link DashboardLayoutProps.navigation} — a navigation entry, a group label or a separator. */
+export interface DashboardNavigationItem {
+    /**
+     * Whether this entry renders as a navigation entry, a group label, or a separator.
+     * @default 'item'
+     */
+    kind?: DashboardNavigationKind | undefined;
+    /**
+     * Text rendered inside the entry; a divider renders no text of its own.
+     * @default undefined — nothing is rendered inside the entry.
+     */
+    label?: string | undefined;
+    /**
+     * Destination of the entry's link; omitted, the entry renders as plain text.
+     * @default undefined — rendered as a non-navigable label.
+     */
+    href?: string | undefined;
+    /**
+     * Marks this entry as the page the user is on, emitting `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean | undefined;
+    /**
+     * Nested entries, rendered as a list below this entry's label.
+     * @default undefined — the entry has no nested list.
+     */
+    children?: DashboardNavigationItem[] | undefined;
+}
+/** Props for the {@link DashboardLayout} block. */
+export interface DashboardLayoutProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Application title shown in the app bar after the branding.
+     * @default undefined — no title renders.
+     */
+    title?: string | undefined;
+    /** The side navigation, in render order, one entry per link, group label or separator. */
+    navigation: DashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage paired with `onNavOpenChange`.
+     * @default undefined — uncontrolled, seeded from `defaultNavOpen`.
+     */
+    navOpen?: boolean | undefined;
+    /**
+     * Whether the side navigation starts shown, used only while uncontrolled.
+     * @default true
+     */
+    defaultNavOpen?: boolean | undefined;
+    /**
+     * Accessible name written to the side `<nav>` landmark, telling it apart from other navigation.
+     * @default 'Main navigation'
+     */
+    navLabel?: string | undefined;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel?: string | undefined;
+    /**
+     * Fires with the new open state whenever the navigation toggle is activated.
+     * @default undefined — no-op if omitted.
+     */
+    onNavOpenChange?: ((open: boolean) => void) | undefined;
+    /**
+     * Logo or product mark rendered at the start of the app bar.
+     * @default undefined — the branding region renders empty.
+     */
+    branding?: React.ReactNode | undefined;
+    /**
+     * Controls rendered at the end of the app bar, such as a profile menu.
+     * @default undefined — the actions region renders empty.
+     */
+    actions?: React.ReactNode | undefined;
+}

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var n=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var s=(e,a)=>{for(var r in a)n(e,r,{get:a[r],enumerable:!0})},b=(e,a,r,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of P(a))!d.call(e,o)&&o!==r&&n(e,o,{get:()=>a[o],enumerable:!(i=y(a,o))||i.enumerable});return e};var m=e=>b(n({},"__esModule",{value:!0}),e);var D={};s(D,{DashboardLayout:()=>p.DashboardLayout,PageContainer:()=>g.PageContainer,SignInPage:()=>t.SignInPage,defaultProviderLabel:()=>t.defaultProviderLabel});module.exports=m(D);var p=require("./dashboard-layout/DashboardLayout.cjs"),g=require("./page-container/PageContainer.cjs"),t=require("./sign-in-page/SignInPage.cjs");0&&(module.exports={DashboardLayout,PageContainer,SignInPage,defaultProviderLabel});

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { DashboardLayout, type DashboardLayoutProps, type DashboardNavigationItem, type DashboardNavigationKind, } from './dashboard-layout/index.cjs';
+export { PageContainer, type PageContainerProps, type PageContainerBreadcrumb, } from './page-container/index.cjs';
+export { SignInPage, defaultProviderLabel, type SignInPageProps, type SignInProvider, type SignInDetail, } from './sign-in-page/index.cjs';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { DashboardLayout, type DashboardLayoutProps, type DashboardNavigationItem, type DashboardNavigationKind, } from './dashboard-layout/index.js';
+export { PageContainer, type PageContainerProps, type PageContainerBreadcrumb, } from './page-container/index.js';
+export { SignInPage, defaultProviderLabel, type SignInPageProps, type SignInProvider, type SignInDetail, } from './sign-in-page/index.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+'use client';
+import{DashboardLayout as o}from"./dashboard-layout/DashboardLayout.js";import{PageContainer as t}from"./page-container/PageContainer.js";import{SignInPage as i,defaultProviderLabel as p}from"./sign-in-page/SignInPage.js";export{o as DashboardLayout,t as PageContainer,i as SignInPage,p as defaultProviderLabel};

package/dist/internal/part.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Joins the truthy class-name values with single spaces, skipping the rest.
+ *
+ * @internal
+ */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+/** The attribute bag {@link skdxPart} returns, spread onto a part's root element. @internal */
+export interface SkdxPartAttributes {
+    className: string;
+    'data-part': string;
+    'data-skdx-component'?: string | undefined;
+}
+/**
+ * Builds the class and `data-*` hooks for one part of one block; spread after the consumer's `{...props}` so the merged `className` wins instead of being silently deleted.
+ *
+ * @param component - Family name in kebab-case, e.g. `'page-container'`. Becomes the `skdx-` class stem and, on the root, `data-skdx-component`.
+ * @param part - Part name from the family's `styling.cssParts`, or `'root'`.
+ * @param className - The consumer's `className`, merged in. Pass `props.className`.
+ *
+ * @internal
+ */
+export declare function skdxPart(component: string, part: string, className?: string): SkdxPartAttributes;

package/dist/internal/part.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Joins the truthy class-name values with single spaces, skipping the rest.
+ *
+ * @internal
+ */
+export declare function cx(...values: Array<string | false | null | undefined>): string;
+/** The attribute bag {@link skdxPart} returns, spread onto a part's root element. @internal */
+export interface SkdxPartAttributes {
+    className: string;
+    'data-part': string;
+    'data-skdx-component'?: string | undefined;
+}
+/**
+ * Builds the class and `data-*` hooks for one part of one block; spread after the consumer's `{...props}` so the merged `className` wins instead of being silently deleted.
+ *
+ * @param component - Family name in kebab-case, e.g. `'page-container'`. Becomes the `skdx-` class stem and, on the root, `data-skdx-component`.
+ * @param part - Part name from the family's `styling.cssParts`, or `'root'`.
+ * @param className - The consumer's `className`, merged in. Pass `props.className`.
+ *
+ * @internal
+ */
+export declare function skdxPart(component: string, part: string, className?: string): SkdxPartAttributes;

package/dist/internal/useControllableState.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Controlled/uncontrolled pattern: mirrors `prop` once it is defined, otherwise tracks its own state, calling `onChange` with the new value either way.
+ *
+ * The core `useControllableState` is not part of the public `@skdx/react`
+ * surface; this is the value-only subset the blocks need.
+ *
+ * @internal
+ */
+export declare function useControllableState<T>(prop: T | undefined, defaultProp: T, onChange?: (value: T) => void): readonly [T, (next: T) => void];

package/dist/internal/useControllableState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Controlled/uncontrolled pattern: mirrors `prop` once it is defined, otherwise tracks its own state, calling `onChange` with the new value either way.
+ *
+ * The core `useControllableState` is not part of the public `@skdx/react`
+ * surface; this is the value-only subset the blocks need.
+ *
+ * @internal
+ */
+export declare function useControllableState<T>(prop: T | undefined, defaultProp: T, onChange?: (value: T) => void): readonly [T, (next: T) => void];

package/dist/page-container/PageContainer.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var P=Object.create;var c=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var a in t)c(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!y.call(e,r)&&r!==a&&c(e,r,{get:()=>t[r],enumerable:!(i=x(t,r))||i.enumerable});return e};var $=(e,t,a)=>(a=e!=null?P(k(e)):{},u(t||!e||!e.__esModule?c(a,"default",{value:e,enumerable:!0}):a,e)),h=e=>u(c({},"__esModule",{value:!0}),e);var N={};C(N,{PageContainer:()=>g});module.exports=h(N);var m=$(require("react"),1),s=require("@skdx/react");function v(...e){let t="";for(let a of e)a&&(t=t?`${t} ${a}`:a);return t}function o(e,t,a){let i=t==="root",r=i?`skdx-${e}`:`skdx-${e}__${t}`,d={className:v(r,a),"data-part":t};return i&&(d["data-skdx-component"]=e),d}var n=require("react/jsx-runtime"),g=({title:e,headingLevel:t=1,breadcrumbs:a,breadcrumbLabel:i="Breadcrumb",actionsLabel:r="Page actions",actions:d,children:f,...l})=>{let p=m.useId();return(0,n.jsxs)("section",{"aria-labelledby":p,...l,...o("page-container","root",l.className),children:[(0,n.jsxs)("header",{...o("page-container","header"),children:[a?(0,n.jsx)(s.Breadcrumb,{label:i,items:[...a],...o("page-container","breadcrumbs")}):null,(0,n.jsxs)("div",{...o("page-container","heading-row"),children:[(0,n.jsx)(s.Heading,{as:`h${t}`,id:p,...o("page-container","title"),children:e}),d?(0,n.jsx)(s.Toolbar,{"aria-label":r,...o("page-container","actions"),children:d}):null]})]}),(0,n.jsx)("div",{...o("page-container","content"),children:f})]})};g.displayName="PageContainer";0&&(module.exports={PageContainer});

package/dist/page-container/PageContainer.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { PageContainerProps } from './types.cjs';
+/**
+ * Page header block: breadcrumbs, a heading and page-level actions above the
+ * page content, rendered as a `<section>` named by its own heading.
+ *
+ * @example
+ * ```tsx
+ * <PageContainer
+ *   title="Invoices"
+ *   breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Invoices' }]}
+ *   actions={<Button>New invoice</Button>}
+ * >
+ *   <InvoiceTable />
+ * </PageContainer>
+ * ```
+ */
+export declare const PageContainer: {
+    ({ title, headingLevel, breadcrumbs, breadcrumbLabel, actionsLabel, actions, children, ...props }: PageContainerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/page-container/PageContainer.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { PageContainerProps } from './types.js';
+/**
+ * Page header block: breadcrumbs, a heading and page-level actions above the
+ * page content, rendered as a `<section>` named by its own heading.
+ *
+ * @example
+ * ```tsx
+ * <PageContainer
+ *   title="Invoices"
+ *   breadcrumbs={[{ label: 'Home', href: '/' }, { label: 'Invoices' }]}
+ *   actions={<Button>New invoice</Button>}
+ * >
+ *   <InvoiceTable />
+ * </PageContainer>
+ * ```
+ */
+export declare const PageContainer: {
+    ({ title, headingLevel, breadcrumbs, breadcrumbLabel, actionsLabel, actions, children, ...props }: PageContainerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/page-container/PageContainer.js

@@ -0,0 +1,2 @@
+'use client';
+import*as l from"react";import{Breadcrumb as f,Heading as P,Toolbar as x}from"@skdx/react";function m(...r){let e="";for(let t of r)t&&(e=e?`${e} ${t}`:t);return e}function a(r,e,t){let o=e==="root",s=o?`skdx-${r}`:`skdx-${r}__${e}`,n={className:m(s,t),"data-part":e};return o&&(n["data-skdx-component"]=r),n}import{jsx as i,jsxs as d}from"react/jsx-runtime";var p=({title:r,headingLevel:e=1,breadcrumbs:t,breadcrumbLabel:o="Breadcrumb",actionsLabel:s="Page actions",actions:n,children:u,...c})=>{let g=l.useId();return d("section",{"aria-labelledby":g,...c,...a("page-container","root",c.className),children:[d("header",{...a("page-container","header"),children:[t?i(f,{label:o,items:[...t],...a("page-container","breadcrumbs")}):null,d("div",{...a("page-container","heading-row"),children:[i(P,{as:`h${e}`,id:g,...a("page-container","title"),children:r}),n?i(x,{"aria-label":s,...a("page-container","actions"),children:n}):null]})]}),i("div",{...a("page-container","content"),children:u})]})};p.displayName="PageContainer";export{p as PageContainer};

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

@@ -0,0 +1,2 @@
+export { PageContainer } from './PageContainer.cjs';
+export type { PageContainerProps, PageContainerBreadcrumb } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { PageContainer } from './PageContainer.js';
+export type { PageContainerProps, PageContainerBreadcrumb } from './types.js';

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

@@ -0,0 +1,46 @@
+import type * as React from 'react';
+/** One entry of {@link PageContainerProps.breadcrumbs} — a crumb in the trail above the heading. */
+export interface PageContainerBreadcrumb {
+    /** Text rendered inside the crumb, as a link or as the current page. */
+    label: string;
+    /**
+     * Destination of the crumb's link; omitted, the crumb renders as the current, non-navigable page.
+     * @default undefined — rendered as the current page.
+     */
+    href?: string | undefined;
+    /**
+     * Marks a link crumb as the current page, emitting `aria-current="page"` on it.
+     * @default false
+     */
+    current?: boolean | undefined;
+}
+/** Props for the {@link PageContainer} block. */
+export interface PageContainerProps extends React.ComponentPropsWithRef<'section'> {
+    /** The page heading text, rendered into a derived Heading that also names the section. */
+    title: string;
+    /**
+     * Outline level of the derived heading, from a page's own `1` down to `6` inside a larger outline.
+     * @default 1
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading row.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: ReadonlyArray<PageContainerBreadcrumb> | undefined;
+    /**
+     * Accessible name written to the derived breadcrumb `<nav>` landmark.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel?: string | undefined;
+    /**
+     * Accessible name written to the derived actions Toolbar beside the heading.
+     * @default 'Page actions'
+     */
+    actionsLabel?: string | undefined;
+    /**
+     * Controls rendered inside the derived Toolbar beside the page heading.
+     * @default undefined — no toolbar renders.
+     */
+    actions?: React.ReactNode | undefined;
+}

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

@@ -0,0 +1,46 @@
+import type * as React from 'react';
+/** One entry of {@link PageContainerProps.breadcrumbs} — a crumb in the trail above the heading. */
+export interface PageContainerBreadcrumb {
+    /** Text rendered inside the crumb, as a link or as the current page. */
+    label: string;
+    /**
+     * Destination of the crumb's link; omitted, the crumb renders as the current, non-navigable page.
+     * @default undefined — rendered as the current page.
+     */
+    href?: string | undefined;
+    /**
+     * Marks a link crumb as the current page, emitting `aria-current="page"` on it.
+     * @default false
+     */
+    current?: boolean | undefined;
+}
+/** Props for the {@link PageContainer} block. */
+export interface PageContainerProps extends React.ComponentPropsWithRef<'section'> {
+    /** The page heading text, rendered into a derived Heading that also names the section. */
+    title: string;
+    /**
+     * Outline level of the derived heading, from a page's own `1` down to `6` inside a larger outline.
+     * @default 1
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading row.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: ReadonlyArray<PageContainerBreadcrumb> | undefined;
+    /**
+     * Accessible name written to the derived breadcrumb `<nav>` landmark.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel?: string | undefined;
+    /**
+     * Accessible name written to the derived actions Toolbar beside the heading.
+     * @default 'Page actions'
+     */
+    actionsLabel?: string | undefined;
+    /**
+     * Controls rendered inside the derived Toolbar beside the page heading.
+     * @default undefined — no toolbar renders.
+     */
+    actions?: React.ReactNode | undefined;
+}

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

@@ -0,0 +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});

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

@@ -0,0 +1,21 @@
+import * 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;
+/**
+ * Sign-in block: an error alert, one button per OAuth provider, and the
+ * credentials and magic-link forms, all reporting through `onSignIn`.
+ *
+ * @example
+ * ```tsx
+ * <SignInPage
+ *   providers={[{ id: 'google', name: 'Google' }, { id: 'credentials', name: 'Email' }]}
+ *   error={error}
+ *   onSignIn={(detail) => void signIn(detail)}
+ * />
+ * ```
+ */
+export declare const SignInPage: {
+    ({ title, providers, error, emailLabel, passwordLabel, submitLabel, magicLinkLabel, getProviderLabel, onSignIn, children, ...props }: SignInPageProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -0,0 +1,21 @@
+import * 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;
+/**
+ * Sign-in block: an error alert, one button per OAuth provider, and the
+ * credentials and magic-link forms, all reporting through `onSignIn`.
+ *
+ * @example
+ * ```tsx
+ * <SignInPage
+ *   providers={[{ id: 'google', name: 'Google' }, { id: 'credentials', name: 'Email' }]}
+ *   error={error}
+ *   onSignIn={(detail) => void signIn(detail)}
+ * />
+ * ```
+ */
+export declare const SignInPage: {
+    ({ title, providers, error, emailLabel, passwordLabel, submitLabel, magicLinkLabel, getProviderLabel, onSignIn, children, ...props }: SignInPageProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -0,0 +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};

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

@@ -0,0 +1,2 @@
+export { SignInPage, defaultProviderLabel } from './SignInPage.cjs';
+export type { SignInPageProps, SignInProvider, SignInDetail } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { SignInPage, defaultProviderLabel } from './SignInPage.js';
+export type { SignInPageProps, SignInProvider, SignInDetail } from './types.js';

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

@@ -0,0 +1,68 @@
+import type * as React from 'react';
+/** One entry of {@link SignInPageProps.providers} — a way to sign in. */
+export interface SignInProvider {
+    /** Identifier reported back to the consumer; `'credentials'` and `'magic-link'` render forms. */
+    id: string;
+    /** Human-readable provider name, worded into the button by `getProviderLabel`. */
+    name: string;
+}
+/** What {@link SignInPageProps.onSignIn} is called with when a provider or a form is used. */
+export interface SignInDetail {
+    /** The `id` of the provider the user chose. */
+    providerId: string;
+    /**
+     * Email submitted by the credentials or magic-link form.
+     * @default undefined — a provider button carries no field values.
+     */
+    email?: string | undefined;
+    /**
+     * Password submitted by the credentials form.
+     * @default undefined — every other provider carries no password.
+     */
+    password?: string | undefined;
+}
+/** Props for the {@link SignInPage} block. */
+export interface SignInPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title?: string | undefined;
+    /** The ways to sign in, in render order, each rendering a button or one of the two forms. */
+    providers: SignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the providers; the block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string | undefined;
+    /**
+     * Label of the email field in the credentials and magic-link forms.
+     * @default 'Email'
+     */
+    emailLabel?: string | undefined;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel?: string | undefined;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Sign in'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Text of the magic-link form's submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel?: string | undefined;
+    /**
+     * Words a provider button's text from its entry, replacing the built-in wording.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: ((provider: SignInProvider) => string) | undefined;
+    /**
+     * Fires when a provider button is activated or a form is submitted with valid fields.
+     * @default undefined — no-op if omitted.
+     */
+    onSignIn?: ((detail: SignInDetail) => void) | undefined;
+}

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

@@ -0,0 +1,68 @@
+import type * as React from 'react';
+/** One entry of {@link SignInPageProps.providers} — a way to sign in. */
+export interface SignInProvider {
+    /** Identifier reported back to the consumer; `'credentials'` and `'magic-link'` render forms. */
+    id: string;
+    /** Human-readable provider name, worded into the button by `getProviderLabel`. */
+    name: string;
+}
+/** What {@link SignInPageProps.onSignIn} is called with when a provider or a form is used. */
+export interface SignInDetail {
+    /** The `id` of the provider the user chose. */
+    providerId: string;
+    /**
+     * Email submitted by the credentials or magic-link form.
+     * @default undefined — a provider button carries no field values.
+     */
+    email?: string | undefined;
+    /**
+     * Password submitted by the credentials form.
+     * @default undefined — every other provider carries no password.
+     */
+    password?: string | undefined;
+}
+/** Props for the {@link SignInPage} block. */
+export interface SignInPageProps extends React.ComponentPropsWithRef<'section'> {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title?: string | undefined;
+    /** The ways to sign in, in render order, each rendering a button or one of the two forms. */
+    providers: SignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the providers; the block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string | undefined;
+    /**
+     * Label of the email field in the credentials and magic-link forms.
+     * @default 'Email'
+     */
+    emailLabel?: string | undefined;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel?: string | undefined;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Sign in'
+     */
+    submitLabel?: string | undefined;
+    /**
+     * Text of the magic-link form's submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel?: string | undefined;
+    /**
+     * Words a provider button's text from its entry, replacing the built-in wording.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: ((provider: SignInProvider) => string) | undefined;
+    /**
+     * Fires when a provider button is activated or a form is submitted with valid fields.
+     * @default undefined — no-op if omitted.
+     */
+    onSignIn?: ((detail: SignInDetail) => void) | undefined;
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@skdx/react-blocks",
+  "version": "0.1.0",
+  "description": "React blocks for the SkandaDX design system — page-level compositions of @skdx/react styled by @skdx/skins",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/SkandaDX/ui.skdx/tree/main/packages/react-blocks#readme",
+  "repository": {
+    "directory": "packages/react-blocks",
+    "type": "git",
+    "url": "git+https://github.com/SkandaDX/ui.skdx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SkandaDX/ui.skdx/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18.18.0"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./dashboard-layout": {
+      "import": {
+        "types": "./dist/dashboard-layout/index.d.ts",
+        "default": "./dist/dashboard-layout/DashboardLayout.js"
+      },
+      "require": {
+        "types": "./dist/dashboard-layout/index.d.cts",
+        "default": "./dist/dashboard-layout/DashboardLayout.cjs"
+      }
+    },
+    "./page-container": {
+      "import": {
+        "types": "./dist/page-container/index.d.ts",
+        "default": "./dist/page-container/PageContainer.js"
+      },
+      "require": {
+        "types": "./dist/page-container/index.d.cts",
+        "default": "./dist/page-container/PageContainer.cjs"
+      }
+    },
+    "./sign-in-page": {
+      "import": {
+        "types": "./dist/sign-in-page/index.d.ts",
+        "default": "./dist/sign-in-page/SignInPage.js"
+      },
+      "require": {
+        "types": "./dist/sign-in-page/index.d.cts",
+        "default": "./dist/sign-in-page/SignInPage.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.md",
+    "!dist/**/*.map",
+    "!dist/**/*.test.*"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@skdx/react": "^0.33.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "axe-core": "^4.12.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10",
+    "@skdx/react": "0.33.0"
+  },
+  "scripts": {
+    "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup && tsc --emitDeclarationOnly -p tsconfig.build.json && node ../../scripts/declarations-cjs.mjs",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsc/typecheck.tsbuildinfo",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}