@skdx/vue-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/vue-blocks
+
+Page-level Vue compositions of [`@skdx/vue`](../vue/README.md) — a page container, a dashboard shell and a sign-in page — styled by `@skdx/skins`.
+
+```sh
+pnpm add @skdx/vue-blocks @skdx/vue
+```
+
+Live demos, props tables and styling hooks: <https://ui.skandadx.dev/components/>.

package/dist/dashboard-layout/DashboardLayout.vue.cjs

@@ -0,0 +1 @@
+const e=require("./DashboardLayout.vue_vue_type_script_setup_true_lang.cjs");var a=e.default;exports.default=a;

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

@@ -0,0 +1,72 @@
+import type { DashboardNavigationItem } from './types.cjs';
+/**
+ * An application shell: an app bar with a navigation toggle, a collapsible side `<nav>` derived from `navigation`, and a `<main>` content region.
+ *
+ * @example
+ * ```vue
+ * <SkdxDashboardLayout
+ *   title="Console"
+ *   :navigation="[{ label: 'Home', href: '/', current: true }]"
+ *   v-model:nav-open="open"
+ * >
+ *   <p>Everything is fine.</p>
+ * </SkdxDashboardLayout>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Application title shown in the app bar after the branding.
+     * @default undefined — no title renders.
+     */
+    title?: string | undefined;
+    /** The side navigation, one entry per item, in render order. */
+    navigation: readonly DashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage. Pair with `v-model:nav-open` or `@nav-open-change`.
+     * @default undefined — uncontrolled, seeded from `defaultNavOpen`.
+     */
+    navOpen?: boolean | undefined;
+    /**
+     * Whether the side navigation starts shown, for uncontrolled usage.
+     * @default true
+     */
+    defaultNavOpen?: boolean;
+    /**
+     * Accessible name of the side `<nav>`, telling several navigation landmarks apart.
+     * @default 'Main navigation'
+     */
+    navLabel?: string;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel?: string;
+};
+type __VLS_Slots = {
+    /** The page content rendered inside the `<main>` region. */
+    default?(): unknown;
+    /** Logo or product mark placed at the start of the app bar. */
+    branding?(): unknown;
+    /** Controls placed at the end of the app bar. */
+    actions?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:navOpen": (navOpen: boolean) => any;
+    "nav-open-change": (navOpen: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:navOpen"?: (navOpen: boolean) => any;
+    "onNav-open-change"?: (navOpen: boolean) => any;
+}>, {
+    title: string | undefined;
+    navOpen: boolean | undefined;
+    defaultNavOpen: boolean;
+    navLabel: string;
+    navToggleLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,72 @@
+import type { DashboardNavigationItem } from './types.js';
+/**
+ * An application shell: an app bar with a navigation toggle, a collapsible side `<nav>` derived from `navigation`, and a `<main>` content region.
+ *
+ * @example
+ * ```vue
+ * <SkdxDashboardLayout
+ *   title="Console"
+ *   :navigation="[{ label: 'Home', href: '/', current: true }]"
+ *   v-model:nav-open="open"
+ * >
+ *   <p>Everything is fine.</p>
+ * </SkdxDashboardLayout>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Application title shown in the app bar after the branding.
+     * @default undefined — no title renders.
+     */
+    title?: string | undefined;
+    /** The side navigation, one entry per item, in render order. */
+    navigation: readonly DashboardNavigationItem[];
+    /**
+     * Whether the side navigation is shown, for controlled usage. Pair with `v-model:nav-open` or `@nav-open-change`.
+     * @default undefined — uncontrolled, seeded from `defaultNavOpen`.
+     */
+    navOpen?: boolean | undefined;
+    /**
+     * Whether the side navigation starts shown, for uncontrolled usage.
+     * @default true
+     */
+    defaultNavOpen?: boolean;
+    /**
+     * Accessible name of the side `<nav>`, telling several navigation landmarks apart.
+     * @default 'Main navigation'
+     */
+    navLabel?: string;
+    /**
+     * Accessible name of the icon-only button that shows and hides the navigation.
+     * @default 'Toggle navigation'
+     */
+    navToggleLabel?: string;
+};
+type __VLS_Slots = {
+    /** The page content rendered inside the `<main>` region. */
+    default?(): unknown;
+    /** Logo or product mark placed at the start of the app bar. */
+    branding?(): unknown;
+    /** Controls placed at the end of the app bar. */
+    actions?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:navOpen": (navOpen: boolean) => any;
+    "nav-open-change": (navOpen: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:navOpen"?: (navOpen: boolean) => any;
+    "onNav-open-change"?: (navOpen: boolean) => any;
+}>, {
+    title: string | undefined;
+    navOpen: boolean | undefined;
+    defaultNavOpen: boolean;
+    navLabel: string;
+    navToggleLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/dashboard-layout/DashboardLayout.vue.js

@@ -0,0 +1 @@
+import t from"./DashboardLayout.vue_vue_type_script_setup_true_lang.js";var a=t;export{a as default};

package/dist/dashboard-layout/DashboardLayout.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("../internal/part.cjs"),p=require("./DashboardNavList.vue.cjs");let e=require("vue"),c=require("@skdx/vue");var g=["data-nav-open"],m=["id","aria-label","hidden"],f=(0,e.defineComponent)({__name:"DashboardLayout",props:{title:{default:void 0},navigation:{},navOpen:{type:Boolean,default:void 0},defaultNavOpen:{type:Boolean,default:!0},navLabel:{default:"Main navigation"},navToggleLabel:{default:"Toggle navigation"}},emits:["update:navOpen","nav-open-change"],setup(r,{emit:s}){const o=r,d=s,l=(0,e.useId)(),i=(0,e.ref)(o.defaultNavOpen),n=(0,e.computed)(()=>o.navOpen??i.value);function v(){const t=!n.value;o.navOpen===void 0&&(i.value=t),d("update:navOpen",t),d("nav-open-change",t)}return(t,u)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)((0,e.unref)(a.skdxPart)("dashboard-layout","root"),{"data-nav-open":n.value?"":void 0}),[(0,e.createElementVNode)("header",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","app-bar"))),[(0,e.createVNode)((0,e.unref)(c.SkdxButton),(0,e.mergeProps)((0,e.unref)(a.skdxPart)("dashboard-layout","nav-toggle"),{"icon-only":"","aria-expanded":n.value,"aria-controls":(0,e.unref)(l),"aria-label":r.navToggleLabel,onClick:v}),{default:(0,e.withCtx)(()=>[...u[0]||(u[0]=[(0,e.createTextVNode)("☰",-1)])]),_:1},16,["aria-expanded","aria-controls","aria-label"]),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","branding"))),[(0,e.renderSlot)(t.$slots,"branding")],16),r.title?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.normalizeProps)((0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("dashboard-layout","title"))),(0,e.toDisplayString)(r.title),17)):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","actions"))),[(0,e.renderSlot)(t.$slots,"actions")],16)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","body"))),[(0,e.createElementVNode)("nav",(0,e.mergeProps)({id:(0,e.unref)(l)},(0,e.unref)(a.skdxPart)("dashboard-layout","nav"),{"aria-label":r.navLabel,hidden:!n.value}),[(0,e.createVNode)(p.default,{items:r.navigation},null,8,["items"])],16,m),(0,e.createElementVNode)("main",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","content"))),[(0,e.renderSlot)(t.$slots,"default")],16)],16)],16,g))}});exports.default=f;

package/dist/dashboard-layout/DashboardLayout.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as a}from"../internal/part.js";import e from"./DashboardNavList.vue.js";import{computed as o,createCommentVNode as t,createElementBlock as n,createElementVNode as d,createTextVNode as l,createVNode as s,defineComponent as r,guardReactiveProps as i,mergeProps as v,normalizeProps as u,openBlock as p,ref as b,renderSlot as m,toDisplayString as c,unref as g,useId as f,withCtx as h}from"vue";import{SkdxButton as y}from"@skdx/vue";var x=["data-nav-open"],k=["id","aria-label","hidden"],N=/* @__PURE__ */r({__name:"DashboardLayout",props:{title:{default:void 0},navigation:{},navOpen:{type:Boolean,default:void 0},defaultNavOpen:{type:Boolean,default:!0},navLabel:{default:"Main navigation"},navToggleLabel:{default:"Toggle navigation"}},emits:["update:navOpen","nav-open-change"],setup(r,{emit:N}){const O=r,L=N,B=f(),C=b(O.defaultNavOpen),P=o(()=>O.navOpen??C.value);function T(){const a=!P.value;void 0===O.navOpen&&(C.value=a),L("update:navOpen",a),L("nav-open-change",a)}return(o,b)=>(p(),n("div",v(g(a)("dashboard-layout","root"),{"data-nav-open":P.value?"":void 0}),[d("header",u(i(g(a)("dashboard-layout","app-bar"))),[s(g(y),v(g(a)("dashboard-layout","nav-toggle"),{"icon-only":"","aria-expanded":P.value,"aria-controls":g(B),"aria-label":r.navToggleLabel,onClick:T}),{default:h(()=>[...b[0]||(b[0]=[l("☰",-1)])]),_:1},16,["aria-expanded","aria-controls","aria-label"]),d("div",u(i(g(a)("dashboard-layout","branding"))),[m(o.$slots,"branding")],16),r.title?(p(),n("span",u(v({key:0},g(a)("dashboard-layout","title"))),c(r.title),17)):t("",!0),d("div",u(i(g(a)("dashboard-layout","actions"))),[m(o.$slots,"actions")],16)],16),d("div",u(i(g(a)("dashboard-layout","body"))),[d("nav",v({id:g(B)},g(a)("dashboard-layout","nav"),{"aria-label":r.navLabel,hidden:!P.value}),[s(e,{items:r.navigation},null,8,["items"])],16,k),d("main",u(i(g(a)("dashboard-layout","content"))),[m(o.$slots,"default")],16)],16)],16,x))}});export{N as default};

package/dist/dashboard-layout/DashboardNavList.vue.cjs

@@ -0,0 +1 @@
+const e=require("./DashboardNavList.vue_vue_type_script_setup_true_lang.cjs");var a=e.default;exports.default=a;

package/dist/dashboard-layout/DashboardNavList.vue.d.cts

@@ -0,0 +1,6 @@
+import type { DashboardNavigationItem } from './types.cjs';
+type __VLS_Props = {
+    items: readonly DashboardNavigationItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/dashboard-layout/DashboardNavList.vue.d.ts

@@ -0,0 +1,6 @@
+import type { DashboardNavigationItem } from './types.js';
+type __VLS_Props = {
+    items: readonly DashboardNavigationItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/dashboard-layout/DashboardNavList.vue.js

@@ -0,0 +1 @@
+import t from"./DashboardNavList.vue_vue_type_script_setup_true_lang.js";var a=t;export{a as default};

package/dist/dashboard-layout/DashboardNavList.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("../internal/part.cjs");let e=require("vue");var n={key:2},s={key:3},d=["href","aria-current"],u=(0,e.defineComponent)({__name:"DashboardNavList",props:{items:{}},setup(t){return(c,i)=>{const o=(0,e.resolveComponent)("DashboardNavList",!0);return(0,e.openBlock)(),(0,e.createElementBlock)("ul",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("dashboard-layout","nav-list"))),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(t.items,(r,l)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,{key:l},[r.kind==="divider"?((0,e.openBlock)(),(0,e.createElementBlock)("li",(0,e.mergeProps)({key:0,role:"separator"},{ref_for:!0},(0,e.unref)(a.skdxPart)("dashboard-layout","nav-divider")),null,16)):r.kind==="header"?((0,e.openBlock)(),(0,e.createElementBlock)("li",(0,e.mergeProps)({key:1,ref_for:!0},(0,e.unref)(a.skdxPart)("dashboard-layout","nav-header")),(0,e.toDisplayString)(r.label),17)):r.children?.length&&r.href===void 0?((0,e.openBlock)(),(0,e.createElementBlock)("li",n,[(0,e.createElementVNode)("span",(0,e.mergeProps)({ref_for:!0},(0,e.unref)(a.skdxPart)("dashboard-layout","nav-item")),(0,e.toDisplayString)(r.label),17),(0,e.createVNode)(o,{items:r.children},null,8,["items"])])):((0,e.openBlock)(),(0,e.createElementBlock)("li",s,[(0,e.createElementVNode)("a",(0,e.mergeProps)({ref_for:!0},(0,e.unref)(a.skdxPart)("dashboard-layout","nav-item"),{href:r.href,"aria-current":r.current?"page":void 0}),(0,e.toDisplayString)(r.label),17,d)]))],64))),128))],16)}}});exports.default=u;

package/dist/dashboard-layout/DashboardNavList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as e}from"../internal/part.js";import{Fragment as a,createElementBlock as r,createElementVNode as o,createVNode as s,defineComponent as t,guardReactiveProps as l,mergeProps as n,normalizeProps as i,openBlock as d,renderList as m,resolveComponent as u,toDisplayString as f,unref as p}from"vue";var h={key:2},v={key:3},c=["href","aria-current"],y=/* @__PURE__ */t({__name:"DashboardNavList",props:{items:{}},setup:t=>(y,b)=>{const k=u("DashboardNavList",!0);return d(),r("ul",i(l(p(e)("dashboard-layout","nav-list"))),[(d(!0),r(a,null,m(t.items,(t,l)=>(d(),r(a,{key:l},["divider"===t.kind?(d(),r("li",n({key:0,role:"separator"},{ref_for:!0},p(e)("dashboard-layout","nav-divider")),null,16)):"header"===t.kind?(d(),r("li",n({key:1,ref_for:!0},p(e)("dashboard-layout","nav-header")),f(t.label),17)):t.children?.length&&void 0===t.href?(d(),r("li",h,[o("span",n({ref_for:!0},p(e)("dashboard-layout","nav-item")),f(t.label),17),s(k,{items:t.children},null,8,["items"])])):(d(),r("li",v,[o("a",n({ref_for:!0},p(e)("dashboard-layout","nav-item"),{href:t.href,"aria-current":t.current?"page":void 0}),f(t.label),17,c)]))],64))),128))],16)}});export{y as default};

package/dist/dashboard-layout/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DashboardLayout.vue.cjs");exports.SkdxDashboardLayout=e.default;

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

@@ -0,0 +1,2 @@
+export { default as SkdxDashboardLayout } from './DashboardLayout.vue.cjs';
+export type { DashboardNavigationItem } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { default as SkdxDashboardLayout } from './DashboardLayout.vue.js';
+export type { DashboardNavigationItem } from './types.js';

package/dist/dashboard-layout/index.js

@@ -0,0 +1 @@
+import a from"./DashboardLayout.vue.js";export{a as SkdxDashboardLayout};

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

@@ -0,0 +1,28 @@
+/** One entry of a `SkdxDashboardLayout`'s `navigation`, from which the side `<nav>` is derived. */
+export interface DashboardNavigationItem {
+    /**
+     * What this entry is: a link or group label, a group heading, or a separator.
+     * @default 'item'
+     */
+    kind?: 'item' | 'header' | 'divider' | undefined;
+    /**
+     * The entry's visible text, unused by a divider.
+     * @default undefined — renders an empty entry.
+     */
+    label?: string | undefined;
+    /**
+     * Where the entry navigates to; an entry with no `href` and `children` renders a group label instead of a link.
+     * @default undefined — renders a link with no destination.
+     */
+    href?: string | undefined;
+    /**
+     * Marks this entry as the current page, emitting `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean | undefined;
+    /**
+     * Nested entries rendered as a list inside this one's `<li>`.
+     * @default undefined — the entry has no nested list.
+     */
+    children?: readonly DashboardNavigationItem[] | undefined;
+}

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

@@ -0,0 +1,28 @@
+/** One entry of a `SkdxDashboardLayout`'s `navigation`, from which the side `<nav>` is derived. */
+export interface DashboardNavigationItem {
+    /**
+     * What this entry is: a link or group label, a group heading, or a separator.
+     * @default 'item'
+     */
+    kind?: 'item' | 'header' | 'divider' | undefined;
+    /**
+     * The entry's visible text, unused by a divider.
+     * @default undefined — renders an empty entry.
+     */
+    label?: string | undefined;
+    /**
+     * Where the entry navigates to; an entry with no `href` and `children` renders a group label instead of a link.
+     * @default undefined — renders a link with no destination.
+     */
+    href?: string | undefined;
+    /**
+     * Marks this entry as the current page, emitting `aria-current="page"`.
+     * @default false
+     */
+    current?: boolean | undefined;
+    /**
+     * Nested entries rendered as a list inside this one's `<li>`.
+     * @default undefined — the entry has no nested list.
+     */
+    children?: readonly DashboardNavigationItem[] | undefined;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./page-container/PageContainer.vue.cjs"),r=require("./dashboard-layout/DashboardLayout.vue.cjs"),a=require("./sign-in-page/types.cjs"),t=require("./sign-in-page/SignInPage.vue.cjs");exports.SkdxDashboardLayout=r.default;exports.SkdxPageContainer=e.default;exports.SkdxSignInPage=t.default;exports.defaultProviderLabel=a.defaultProviderLabel;

package/dist/index.d.cts

@@ -0,0 +1,4 @@
+export { SkdxPageContainer } from './page-container/index.cjs';
+export { SkdxDashboardLayout, type DashboardNavigationItem } from './dashboard-layout/index.cjs';
+export { SkdxSignInPage, defaultProviderLabel } from './sign-in-page/index.cjs';
+export type { SignInDetail, SignInProvider } from './sign-in-page/index.cjs';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { SkdxPageContainer } from './page-container/index.js';
+export { SkdxDashboardLayout, type DashboardNavigationItem } from './dashboard-layout/index.js';
+export { SkdxSignInPage, defaultProviderLabel } from './sign-in-page/index.js';
+export type { SignInDetail, SignInProvider } from './sign-in-page/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+import a from"./page-container/PageContainer.vue.js";import e from"./dashboard-layout/DashboardLayout.vue.js";import{defaultProviderLabel as o}from"./sign-in-page/types.js";import r from"./sign-in-page/SignInPage.vue.js";export{e as SkdxDashboardLayout,a as SkdxPageContainer,r as SkdxSignInPage,o as defaultProviderLabel};

package/dist/internal/part.cjs

@@ -0,0 +1 @@
+function k(s,t){const a=t==="root",d={class:a?`skdx-${s}`:`skdx-${s}__${t}`,"data-part":t};return a&&(d["data-skdx-component"]=s),d}exports.skdxPart=k;

package/dist/internal/part.d.cts

@@ -0,0 +1,19 @@
+/**
+ * The attribute bag {@link skdxPart} returns, bound onto a part's element with `v-bind`.
+ *
+ * @internal
+ */
+export interface SkdxPartAttributes {
+    class: string;
+    'data-part': string;
+    'data-skdx-component'?: string;
+}
+/**
+ * Builds the class and `data-*` styling hooks for one part of one block; bind it with `v-bind` so a consumer's own class still merges.
+ *
+ * @param component - Block 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 block's `styling.cssParts`, or `'root'`.
+ *
+ * @internal
+ */
+export declare function skdxPart(component: string, part: string): SkdxPartAttributes;

package/dist/internal/part.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The attribute bag {@link skdxPart} returns, bound onto a part's element with `v-bind`.
+ *
+ * @internal
+ */
+export interface SkdxPartAttributes {
+    class: string;
+    'data-part': string;
+    'data-skdx-component'?: string;
+}
+/**
+ * Builds the class and `data-*` styling hooks for one part of one block; bind it with `v-bind` so a consumer's own class still merges.
+ *
+ * @param component - Block 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 block's `styling.cssParts`, or `'root'`.
+ *
+ * @internal
+ */
+export declare function skdxPart(component: string, part: string): SkdxPartAttributes;

package/dist/internal/part.js

@@ -0,0 +1 @@
+function t(t,a){const s="root"===a,o={class:s?`skdx-${t}`:`skdx-${t}__${a}`,"data-part":a};return s&&(o["data-skdx-component"]=t),o}export{t as skdxPart};

package/dist/page-container/PageContainer.vue.cjs

@@ -0,0 +1 @@
+const e=require("./PageContainer.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

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

@@ -0,0 +1,57 @@
+import { type BreadcrumbItem } from '@skdx/vue';
+/**
+ * Composes Breadcrumb, Heading and Toolbar into a `<section>` named by its own heading, above the page content.
+ *
+ * @example
+ * ```vue
+ * <SkdxPageContainer
+ *   title="Billing"
+ *   :breadcrumbs="[{ label: 'Home', href: '/' }, { label: 'Billing', current: true }]"
+ * >
+ *   <p>Invoices and payment methods.</p>
+ * </SkdxPageContainer>
+ * ```
+ */
+type __VLS_Props = {
+    /** The page heading text, which also names the section through `aria-labelledby`. */
+    title: string;
+    /**
+     * Outline level of the derived heading, lowered when the block sits inside a larger page.
+     * @default 1
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: readonly BreadcrumbItem[] | undefined;
+    /**
+     * Accessible name of the derived breadcrumb `<nav>`.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel?: string;
+    /**
+     * Accessible name of the derived actions Toolbar.
+     * @default 'Page actions'
+     */
+    actionsLabel?: string;
+};
+type __VLS_Slots = {
+    /** The page content rendered below the header. */
+    default?(): unknown;
+    /** Controls placed inside the derived Toolbar beside the heading; no toolbar renders without it. */
+    actions?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    breadcrumbs: readonly BreadcrumbItem[] | undefined;
+    breadcrumbLabel: string;
+    actionsLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,57 @@
+import { type BreadcrumbItem } from '@skdx/vue';
+/**
+ * Composes Breadcrumb, Heading and Toolbar into a `<section>` named by its own heading, above the page content.
+ *
+ * @example
+ * ```vue
+ * <SkdxPageContainer
+ *   title="Billing"
+ *   :breadcrumbs="[{ label: 'Home', href: '/' }, { label: 'Billing', current: true }]"
+ * >
+ *   <p>Invoices and payment methods.</p>
+ * </SkdxPageContainer>
+ * ```
+ */
+type __VLS_Props = {
+    /** The page heading text, which also names the section through `aria-labelledby`. */
+    title: string;
+    /**
+     * Outline level of the derived heading, lowered when the block sits inside a larger page.
+     * @default 1
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Trail rendered into a derived Breadcrumb above the heading.
+     * @default undefined — no breadcrumb region renders.
+     */
+    breadcrumbs?: readonly BreadcrumbItem[] | undefined;
+    /**
+     * Accessible name of the derived breadcrumb `<nav>`.
+     * @default 'Breadcrumb'
+     */
+    breadcrumbLabel?: string;
+    /**
+     * Accessible name of the derived actions Toolbar.
+     * @default 'Page actions'
+     */
+    actionsLabel?: string;
+};
+type __VLS_Slots = {
+    /** The page content rendered below the header. */
+    default?(): unknown;
+    /** Controls placed inside the derived Toolbar beside the heading; no toolbar renders without it. */
+    actions?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    breadcrumbs: readonly BreadcrumbItem[] | undefined;
+    breadcrumbLabel: string;
+    actionsLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/page-container/PageContainer.vue.js

@@ -0,0 +1 @@
+import e from"./PageContainer.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/page-container/PageContainer.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("../internal/part.cjs");let e=require("vue"),n=require("@skdx/vue");var i=["aria-labelledby"],u=(0,e.defineComponent)({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"}},setup(r){const o=r,l=(0,e.useId)(),d=(0,e.computed)(()=>`h${o.headingLevel}`);return(t,c)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(a.skdxPart)("page-container","root"),{"aria-labelledby":(0,e.unref)(l)}),[(0,e.createElementVNode)("header",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","header"))),[r.breadcrumbs?.length?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxBreadcrumb),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("page-container","breadcrumbs"),{label:o.breadcrumbLabel,items:r.breadcrumbs}),null,16,["label","items"])):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","heading-row"))),[(0,e.createVNode)((0,e.unref)(n.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(l)},(0,e.unref)(a.skdxPart)("page-container","title"),{as:d.value}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.title),1)]),_:1},16,["id","as"]),t.$slots.actions?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(n.SkdxToolbar),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("page-container","actions"),{"aria-label":r.actionsLabel}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"actions")]),_:3},16,["aria-label"])):(0,e.createCommentVNode)("",!0)],16)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("page-container","content"))),[(0,e.renderSlot)(t.$slots,"default")],16)],16,i))}});exports.default=u;

package/dist/page-container/PageContainer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as e}from"../internal/part.js";import{computed as a,createBlock as t,createCommentVNode as r,createElementBlock as s,createElementVNode as o,createTextVNode as l,createVNode as n,defineComponent as d,guardReactiveProps as i,mergeProps as c,normalizeProps as b,openBlock as u,renderSlot as m,toDisplayString as p,unref as g,useId as f,withCtx as k}from"vue";import{SkdxBreadcrumb as v,SkdxHeading as h,SkdxToolbar as x}from"@skdx/vue";var L=["aria-labelledby"],P=/* @__PURE__ */d({__name:"PageContainer",props:{title:{},headingLevel:{default:1},breadcrumbs:{default:void 0},breadcrumbLabel:{default:"Breadcrumb"},actionsLabel:{default:"Page actions"}},setup(d){const P=d,y=f(),B=a(()=>`h${P.headingLevel}`);return(a,f)=>(u(),s("section",c(g(e)("page-container","root"),{"aria-labelledby":g(y)}),[o("header",b(i(g(e)("page-container","header"))),[d.breadcrumbs?.length?(u(),t(g(v),c({key:0},g(e)("page-container","breadcrumbs"),{label:P.breadcrumbLabel,items:d.breadcrumbs}),null,16,["label","items"])):r("",!0),o("div",b(i(g(e)("page-container","heading-row"))),[n(g(h),c({id:g(y)},g(e)("page-container","title"),{as:B.value}),{default:k(()=>[l(p(d.title),1)]),_:1},16,["id","as"]),a.$slots.actions?(u(),t(g(x),c({key:0},g(e)("page-container","actions"),{"aria-label":d.actionsLabel}),{default:k(()=>[m(a.$slots,"actions")]),_:3},16,["aria-label"])):r("",!0)],16)],16),o("div",b(i(g(e)("page-container","content"))),[m(a.$slots,"default")],16)],16,L))}});export{P as default};

package/dist/page-container/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./PageContainer.vue.cjs");exports.SkdxPageContainer=e.default;

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

@@ -0,0 +1 @@
+export { default as SkdxPageContainer } from './PageContainer.vue.cjs';

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

@@ -0,0 +1 @@
+export { default as SkdxPageContainer } from './PageContainer.vue.js';

package/dist/page-container/index.js

@@ -0,0 +1 @@
+import e from"./PageContainer.vue.js";export{e as SkdxPageContainer};

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

@@ -0,0 +1 @@
+const e=require("./SignInPage.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

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

@@ -0,0 +1,66 @@
+import { type SignInDetail, type SignInProvider } from './types.cjs';
+/**
+ * A sign-in panel: provider buttons, an email and password form, and a magic-link form, reporting the user's choice as one `sign-in` event.
+ *
+ * @example
+ * ```vue
+ * <SkdxSignInPage
+ *   :providers="[{ id: 'google', name: 'Google' }, { id: 'credentials', name: 'Email' }]"
+ *   :error="error"
+ *   @sign-in="signIn"
+ * />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title?: string;
+    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    providers: readonly SignInProvider[];
+    /**
+     * Message rendered into a derived error Alert; the block never clears it, the consumer does.
+     * @default undefined — no alert renders.
+     */
+    error?: string | undefined;
+    /**
+     * Label of the email field in both forms.
+     * @default 'Email'
+     */
+    emailLabel?: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel?: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Sign in'
+     */
+    submitLabel?: string;
+    /**
+     * Text of the magic-link form's submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel?: string;
+    /**
+     * Formats a provider button's text from its entry, for wording or translation.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SignInProvider) => string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "sign-in": (detail: SignInDetail) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSign-in"?: (detail: SignInDetail) => any;
+}>, {
+    title: string;
+    error: string | undefined;
+    emailLabel: string;
+    passwordLabel: string;
+    submitLabel: string;
+    magicLinkLabel: string;
+    getProviderLabel: (provider: SignInProvider) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,66 @@
+import { type SignInDetail, type SignInProvider } from './types.js';
+/**
+ * A sign-in panel: provider buttons, an email and password form, and a magic-link form, reporting the user's choice as one `sign-in` event.
+ *
+ * @example
+ * ```vue
+ * <SkdxSignInPage
+ *   :providers="[{ id: 'google', name: 'Google' }, { id: 'credentials', name: 'Email' }]"
+ *   :error="error"
+ *   @sign-in="signIn"
+ * />
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title?: string;
+    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    providers: readonly SignInProvider[];
+    /**
+     * Message rendered into a derived error Alert; the block never clears it, the consumer does.
+     * @default undefined — no alert renders.
+     */
+    error?: string | undefined;
+    /**
+     * Label of the email field in both forms.
+     * @default 'Email'
+     */
+    emailLabel?: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel?: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Sign in'
+     */
+    submitLabel?: string;
+    /**
+     * Text of the magic-link form's submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel?: string;
+    /**
+     * Formats a provider button's text from its entry, for wording or translation.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SignInProvider) => string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "sign-in": (detail: SignInDetail) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSign-in"?: (detail: SignInDetail) => any;
+}>, {
+    title: string;
+    error: string | undefined;
+    emailLabel: string;
+    passwordLabel: string;
+    submitLabel: string;
+    magicLinkLabel: string;
+    getProviderLabel: (provider: SignInProvider) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1 @@
+import e from"./SignInPage.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

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

@@ -0,0 +1 @@
+const r=require("../internal/part.cjs"),P=require("./types.cjs");let e=require("vue"),a=require("@skdx/vue");var v=["aria-labelledby"],b=(0,e.defineComponent)({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},getProviderLabel:{type:Function,default:P.defaultProviderLabel}},emits:["sign-in"],setup(n,{emit:k}){const o=n,s=k,m=(0,e.useId)(),c=(0,e.computed)(()=>o.providers.some(i=>i.id==="credentials")),g=(0,e.computed)(()=>o.providers.some(i=>i.id==="magic-link")),d=(0,e.computed)(()=>o.providers.filter(i=>i.id!=="credentials"&&i.id!=="magic-link")),x=(0,e.computed)(()=>d.value.length>0&&(c.value||g.value));function p(i,l){const t=i.get(l);return typeof t=="string"?t:""}function f(i,l){l.preventDefault();const t=new FormData(l.target),u=p(t,"email");s("sign-in",i==="credentials"?{providerId:i,email:u,password:p(t,"password")}:{providerId:i,email:u})}return(i,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","root"),{"aria-labelledby":(0,e.unref)(m)}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(r.skdxPart)("sign-in-page","panel"))),[(0,e.createVNode)((0,e.unref)(a.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(m)},(0,e.unref)(r.skdxPart)("sign-in-page","title"),{as:"h1"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(n.title),1)]),_:1},16,["id"]),n.error?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(a.SkdxAlert),(0,e.mergeProps)({key:0},(0,e.unref)(r.skdxPart)("sign-in-page","error"),{status:"danger"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(n.error),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),d.value.length?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:1},(0,e.unref)(r.skdxPart)("sign-in-page","providers"))),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(d.value,t=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(a.SkdxButton),(0,e.mergeProps)({key:t.id},{ref_for:!0},(0,e.unref)(r.skdxPart)("sign-in-page","provider"),{type:"button","data-provider":t.id,onClick:u=>s("sign-in",{providerId:t.id})}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(o.getProviderLabel(t)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):(0,e.createCommentVNode)("",!0),x.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(a.SkdxDivider),(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(r.skdxPart)("sign-in-page","divider"))),null,16)):(0,e.createCommentVNode)("",!0),c.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(a.SkdxForm),(0,e.mergeProps)({key:3},(0,e.unref)(r.skdxPart)("sign-in-page","form"),{"data-provider":"credentials",onSubmit:l[0]||(l[0]=t=>f("credentials",t))}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(a.SkdxField),(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","field"),{label:n.emailLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(a.SkdxTextField),{type:"email",name:"email",autocomplete:"email"})]),_:1},16,["label"]),(0,e.createVNode)((0,e.unref)(a.SkdxField),(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","field"),{label:n.passwordLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(a.SkdxPasswordInput),{name:"password",autocomplete:"current-password"})]),_:1},16,["label"]),(0,e.createVNode)((0,e.unref)(a.SkdxButton),(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","submit"),{type:"submit"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(n.submitLabel),1)]),_:1},16)]),_:1},16)):(0,e.createCommentVNode)("",!0),g.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(a.SkdxForm),(0,e.mergeProps)({key:4},(0,e.unref)(r.skdxPart)("sign-in-page","form"),{"data-provider":"magic-link",onSubmit:l[1]||(l[1]=t=>f("magic-link",t))}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(a.SkdxField),(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","field"),{label:n.emailLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(a.SkdxTextField),{type:"email",name:"email",autocomplete:"email"})]),_:1},16,["label"]),(0,e.createVNode)((0,e.unref)(a.SkdxButton),(0,e.mergeProps)((0,e.unref)(r.skdxPart)("sign-in-page","submit"),{type:"submit"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(n.magicLinkLabel),1)]),_:1},16)]),_:1},16)):(0,e.createCommentVNode)("",!0)],16)],16,v))}});exports.default=b;

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

@@ -0,0 +1 @@
+import{skdxPart as e}from"../internal/part.js";import{defaultProviderLabel as a}from"./types.js";import{Fragment as i,computed as t,createBlock as r,createCommentVNode as l,createElementBlock as d,createElementVNode as s,createTextVNode as n,createVNode as o,defineComponent as p,guardReactiveProps as u,mergeProps as m,normalizeProps as g,openBlock as f,renderList as c,toDisplayString as v,unref as b,useId as k,withCtx as y}from"vue";import{SkdxAlert as L,SkdxButton as S,SkdxDivider as x,SkdxField as _,SkdxForm as w,SkdxHeading as P,SkdxPasswordInput as F,SkdxTextField as I}from"@skdx/vue";var C=["aria-labelledby"],h=/* @__PURE__ */p({__name:"SignInPage",props:{title:{default:"Sign in"},providers:{},error:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},submitLabel:{default:"Sign in"},magicLinkLabel:{default:"Send magic link"},getProviderLabel:{type:Function,default:a}},emits:["sign-in"],setup(a,{emit:p}){const h=a,B=p,D=k(),N=t(()=>h.providers.some(e=>"credentials"===e.id)),V=t(()=>h.providers.some(e=>"magic-link"===e.id)),q=t(()=>h.providers.filter(e=>"credentials"!==e.id&&"magic-link"!==e.id)),E=t(()=>q.value.length>0&&(N.value||V.value));function j(e,a){const i=e.get(a);return"string"==typeof i?i:""}function T(e,a){a.preventDefault();const i=new FormData(a.target),t=j(i,"email");B("sign-in","credentials"===e?{providerId:e,email:t,password:j(i,"password")}:{providerId:e,email:t})}return(t,p)=>(f(),d("section",m(b(e)("sign-in-page","root"),{"aria-labelledby":b(D)}),[s("div",g(u(b(e)("sign-in-page","panel"))),[o(b(P),m({id:b(D)},b(e)("sign-in-page","title"),{as:"h1"}),{default:y(()=>[n(v(a.title),1)]),_:1},16,["id"]),a.error?(f(),r(b(L),m({key:0},b(e)("sign-in-page","error"),{status:"danger"}),{default:y(()=>[n(v(a.error),1)]),_:1},16)):l("",!0),q.value.length?(f(),d("div",g(m({key:1},b(e)("sign-in-page","providers"))),[(f(!0),d(i,null,c(q.value,a=>(f(),r(b(S),m({key:a.id},{ref_for:!0},b(e)("sign-in-page","provider"),{type:"button","data-provider":a.id,onClick:e=>B("sign-in",{providerId:a.id})}),{default:y(()=>[n(v(h.getProviderLabel(a)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):l("",!0),E.value?(f(),r(b(x),g(m({key:2},b(e)("sign-in-page","divider"))),null,16)):l("",!0),N.value?(f(),r(b(w),m({key:3},b(e)("sign-in-page","form"),{"data-provider":"credentials",onSubmit:p[0]||(p[0]=e=>T("credentials",e))}),{default:y(()=>[o(b(_),m(b(e)("sign-in-page","field"),{label:a.emailLabel,required:""}),{default:y(()=>[o(b(I),{type:"email",name:"email",autocomplete:"email"})]),_:1},16,["label"]),o(b(_),m(b(e)("sign-in-page","field"),{label:a.passwordLabel,required:""}),{default:y(()=>[o(b(F),{name:"password",autocomplete:"current-password"})]),_:1},16,["label"]),o(b(S),m(b(e)("sign-in-page","submit"),{type:"submit"}),{default:y(()=>[n(v(a.submitLabel),1)]),_:1},16)]),_:1},16)):l("",!0),V.value?(f(),r(b(w),m({key:4},b(e)("sign-in-page","form"),{"data-provider":"magic-link",onSubmit:p[1]||(p[1]=e=>T("magic-link",e))}),{default:y(()=>[o(b(_),m(b(e)("sign-in-page","field"),{label:a.emailLabel,required:""}),{default:y(()=>[o(b(I),{type:"email",name:"email",autocomplete:"email"})]),_:1},16,["label"]),o(b(S),m(b(e)("sign-in-page","submit"),{type:"submit"}),{default:y(()=>[n(v(a.magicLinkLabel),1)]),_:1},16)]),_:1},16)):l("",!0)],16)],16,C))}});export{h as default};

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./types.cjs"),r=require("./SignInPage.vue.cjs");exports.SkdxSignInPage=r.default;exports.defaultProviderLabel=e.defaultProviderLabel;

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

@@ -0,0 +1,3 @@
+export { default as SkdxSignInPage } from './SignInPage.vue.cjs';
+export { defaultProviderLabel } from './types.cjs';
+export type { SignInDetail, SignInProvider } from './types.cjs';

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

@@ -0,0 +1,3 @@
+export { default as SkdxSignInPage } from './SignInPage.vue.js';
+export { defaultProviderLabel } from './types.js';
+export type { SignInDetail, SignInProvider } from './types.js';

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

@@ -0,0 +1 @@
+import{defaultProviderLabel as e}from"./types.js";import a from"./SignInPage.vue.js";export{a as SkdxSignInPage,e as defaultProviderLabel};

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

@@ -0,0 +1 @@
+function i(e){return`Sign in with ${e.name}`}exports.defaultProviderLabel=i;

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

@@ -0,0 +1,24 @@
+/** One way to sign in, listed in a `SkdxSignInPage`'s `providers`. */
+export interface SignInProvider {
+    /** The provider's id, `'credentials'` and `'magic-link'` rendering forms and anything else a button. */
+    id: string;
+    /** The provider's display name, from which its button label is formatted. */
+    name: string;
+}
+/** The payload a `SkdxSignInPage` reports when a provider button or a form is used. */
+export interface SignInDetail {
+    /** The id of the provider the user chose. */
+    providerId: string;
+    /**
+     * The submitted email address, present for the credentials and magic-link forms.
+     * @default undefined — a provider button carries no email.
+     */
+    email?: string | undefined;
+    /**
+     * The submitted password, present only for the credentials form.
+     * @default undefined — every other provider carries no password.
+     */
+    password?: string | undefined;
+}
+/** Formats a provider button's text as `Sign in with <name>`, the default of `getProviderLabel`. */
+export declare function defaultProviderLabel(provider: SignInProvider): string;

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

@@ -0,0 +1,24 @@
+/** One way to sign in, listed in a `SkdxSignInPage`'s `providers`. */
+export interface SignInProvider {
+    /** The provider's id, `'credentials'` and `'magic-link'` rendering forms and anything else a button. */
+    id: string;
+    /** The provider's display name, from which its button label is formatted. */
+    name: string;
+}
+/** The payload a `SkdxSignInPage` reports when a provider button or a form is used. */
+export interface SignInDetail {
+    /** The id of the provider the user chose. */
+    providerId: string;
+    /**
+     * The submitted email address, present for the credentials and magic-link forms.
+     * @default undefined — a provider button carries no email.
+     */
+    email?: string | undefined;
+    /**
+     * The submitted password, present only for the credentials form.
+     * @default undefined — every other provider carries no password.
+     */
+    password?: string | undefined;
+}
+/** Formats a provider button's text as `Sign in with <name>`, the default of `getProviderLabel`. */
+export declare function defaultProviderLabel(provider: SignInProvider): string;

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

@@ -0,0 +1 @@
+function e(e){return`Sign in with ${e.name}`}export{e as defaultProviderLabel};

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@skdx/vue-blocks",
+  "version": "0.1.0",
+  "description": "Vue blocks for the SkandaDX design system — page-level compositions of @skdx/vue styled by @skdx/skins",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/SkandaDX/ui.skdx/tree/main/packages/vue-blocks#readme",
+  "repository": {
+    "directory": "packages/vue-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/index.js"
+      },
+      "require": {
+        "types": "./dist/dashboard-layout/index.d.cts",
+        "default": "./dist/dashboard-layout/index.cjs"
+      }
+    },
+    "./page-container": {
+      "import": {
+        "types": "./dist/page-container/index.d.ts",
+        "default": "./dist/page-container/index.js"
+      },
+      "require": {
+        "types": "./dist/page-container/index.d.cts",
+        "default": "./dist/page-container/index.cjs"
+      }
+    },
+    "./sign-in-page": {
+      "import": {
+        "types": "./dist/sign-in-page/index.d.ts",
+        "default": "./dist/sign-in-page/index.js"
+      },
+      "require": {
+        "types": "./dist/sign-in-page/index.d.cts",
+        "default": "./dist/sign-in-page/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.md",
+    "!dist/**/*.map",
+    "!dist/**/*.test.*"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@skdx/vue": "^0.33.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vitest/coverage-v8": "^4.1.10",
+    "@vue/test-utils": "^2.4.0",
+    "axe-core": "^4.12.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3",
+    "vitest": "^4.1.10",
+    "vue": "^3.5.39",
+    "vue-tsc": "^2.0.0",
+    "@skdx/vue": "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 })\" && vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly && node ../../scripts/declarations-cjs.mjs && node ../../scripts/minify-js.mjs dist",
+    "dev": "vite build --watch",
+    "typecheck": "vue-tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsc/typecheck.tsbuildinfo",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}