@skdx/vue-blocks 0.34.0 → 0.35.0

package/dist/sign-up-page/SignUpPage.vue.d.ts

@@ -0,0 +1,105 @@
+import { type SignInProvider } from '../sign-in-page/types.js';
+import type { SignUpDetail } from './types.js';
+/**
+ * A registration panel: one button per third-party provider and a credentials form — name, email, password, confirmation and terms — reporting through one `sign-up` event.
+ *
+ * @example
+ * ```vue
+ * <SkdxSignUpPage
+ *   confirm-password-label="Confirm password"
+ *   :error="error"
+ *   @sign-up="register"
+ * >
+ *   <template #terms>I accept the <a href="/terms">terms</a>.</template>
+ * </SkdxSignUpPage>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Create account'
+     */
+    title?: string;
+    /**
+     * Third-party providers, in render order, each rendering one button above the credentials form.
+     * @default [] — no provider region and no divider render.
+     */
+    providers?: readonly SignInProvider[];
+    /**
+     * Message rendered into a derived error Alert; the block never clears it, the consumer does.
+     * @default undefined — no error region renders.
+     */
+    error?: string | undefined;
+    /**
+     * Marks the request in flight, making the submit button busy while every field stays editable.
+     * @default false
+     */
+    pending?: boolean;
+    /**
+     * Label of the name field; supplying it is what makes that field render at all.
+     * @default undefined — no name field renders.
+     */
+    nameLabel?: string | undefined;
+    /**
+     * Label of the email field in the credentials form.
+     * @default 'Email'
+     */
+    emailLabel?: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel?: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders and no matching is done.
+     */
+    confirmPasswordLabel?: string | undefined;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage?: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Create account'
+     */
+    submitLabel?: 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;
+};
+type __VLS_Slots = {
+    /** Extra fields rendered inside the form, above the terms and the submit button. */
+    default?(): unknown;
+    /** Terms copy and links used as the label of the required terms checkbox. */
+    terms?(): unknown;
+    /** Navigation below the form, such as a link back to the sign-in page. */
+    footer?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "sign-up": (detail: SignUpDetail) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSign-up"?: (detail: SignUpDetail) => any;
+}>, {
+    title: string;
+    providers: readonly SignInProvider[];
+    error: string | undefined;
+    emailLabel: string;
+    passwordLabel: string;
+    submitLabel: string;
+    getProviderLabel: (provider: SignInProvider) => string;
+    pending: boolean;
+    nameLabel: string | undefined;
+    confirmPasswordLabel: string | undefined;
+    passwordMismatchMessage: 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/sign-up-page/SignUpPage.vue.js

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

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

@@ -0,0 +1 @@
+const a=require("../internal/part.cjs"),V=require("../sign-in-page/types.cjs");let e=require("vue"),t=require("@skdx/vue"),k=require("@skdx/vue/primitives/text-field"),x=require("@skdx/vue/primitives/field"),i=require("@skdx/vue/primitives/password-input");var N=["aria-labelledby"],c="confirmPassword",C=(0,e.defineComponent)({__name:"SignUpPage",props:{title:{default:"Create account"},providers:{default:()=>[]},error:{default:void 0},pending:{type:Boolean,default:!1},nameLabel:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},confirmPasswordLabel:{default:void 0},passwordMismatchMessage:{default:"Passwords do not match"},submitLabel:{default:"Create account"},getProviderLabel:{type:Function,default:V.defaultProviderLabel}},emits:["sign-up"],setup(d,{emit:P}){const l=d,p=P,w=(0,e.useSlots)(),g=(0,e.useId)();function u(o,r){const n=o.get(r);return typeof n=="string"?n:""}function b(o){const r=o.elements.namedItem(c);return r instanceof HTMLInputElement?r:null}function v(o){o.preventDefault();const r=o.target,n=new FormData(r),s=u(n,"password"),f=l.confirmPasswordLabel===void 0?null:b(r);if(f&&f.value!==s){f.setCustomValidity(l.passwordMismatchMessage),r.reportValidity();return}const m={providerId:"credentials",email:u(n,"email"),password:s};l.nameLabel!==void 0&&(m.name=u(n,"name")),w.terms&&(m.termsAccepted=n.get("terms")!==null),p("sign-up",m)}function S(o){const r=o.target;r instanceof HTMLInputElement&&r.name===c&&r.setCustomValidity("")}return(o,r)=>((0,e.openBlock)(),(0,e.createElementBlock)("section",(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-up-page","root"),{"aria-labelledby":(0,e.unref)(g)}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("sign-up-page","panel"))),[(0,e.createVNode)((0,e.unref)(t.SkdxHeading),(0,e.mergeProps)({id:(0,e.unref)(g)},(0,e.unref)(a.skdxPart)("sign-up-page","title"),{as:"h1"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(d.title),1)]),_:1},16,["id"]),d.error?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxAlert),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("sign-up-page","error"),{status:"danger"}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(d.error),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),l.providers.length?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:1},(0,e.unref)(a.skdxPart)("sign-up-page","providers"))),[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(l.providers,n=>((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxButton),(0,e.mergeProps)({key:n.id},{ref_for:!0},(0,e.unref)(a.skdxPart)("sign-up-page","provider"),{type:"button","data-provider":n.id,onClick:s=>p("sign-up",{providerId:n.id})}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(l.getProviderLabel(n)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):(0,e.createCommentVNode)("",!0),l.providers.length?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxDivider),(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(a.skdxPart)("sign-up-page","divider"))),null,16)):(0,e.createCommentVNode)("",!0),(0,e.createVNode)((0,e.unref)(t.SkdxForm),(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-up-page","form"),{onSubmit:v,onInput:S}),{default:(0,e.withCtx)(()=>[d.nameLabel!==void 0?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxField),(0,e.mergeProps)({key:0},(0,e.unref)(a.skdxPart)("sign-up-page","field"),{label:d.nameLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.SkdxTextField),{name:"name",required:""},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(k.SkdxTextFieldInput),{autocomplete:"name"})]),_:1})]),_:1},16,["label"])):(0,e.createCommentVNode)("",!0),(0,e.createVNode)((0,e.unref)(t.SkdxField),(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-up-page","field"),{label:d.emailLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.SkdxTextField),{name:"email",required:""},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(k.SkdxTextFieldInput),{type:"email",autocomplete:"email"})]),_:1})]),_:1},16,["label"]),(0,e.createVNode)((0,e.unref)(t.SkdxField),(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-up-page","field"),{label:d.passwordLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.SkdxPasswordInput),{name:"password",required:""},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(i.SkdxPasswordInputField),{autocomplete:"new-password"}),(0,e.createVNode)((0,e.unref)(i.SkdxPasswordInputToggle))]),_:1})]),_:1},16,["label"]),d.confirmPasswordLabel!==void 0?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxField),(0,e.mergeProps)({key:1},(0,e.unref)(a.skdxPart)("sign-up-page","field"),{label:d.confirmPasswordLabel,required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(t.SkdxPasswordInput),{name:c,required:""},{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(i.SkdxPasswordInputField),{autocomplete:"new-password"}),(0,e.createVNode)((0,e.unref)(i.SkdxPasswordInputToggle))]),_:1})]),_:1},16,["label"])):(0,e.createCommentVNode)("",!0),(0,e.renderSlot)(o.$slots,"default"),o.$slots.terms?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(t.SkdxField),(0,e.mergeProps)({key:2},(0,e.unref)(a.skdxPart)("sign-up-page","terms"),{required:""}),{default:(0,e.withCtx)(()=>[(0,e.createVNode)((0,e.unref)(x.SkdxFieldLabel),null,{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"terms"),r[0]||(r[0]=(0,e.createTextVNode)()),(0,e.createVNode)((0,e.unref)(x.SkdxFieldRequiredIndicator))]),_:3}),(0,e.createVNode)((0,e.unref)(t.SkdxCheckbox),{name:"terms",required:""})]),_:3},16)):(0,e.createCommentVNode)("",!0),(0,e.createVNode)((0,e.unref)(t.SkdxButton),(0,e.mergeProps)((0,e.unref)(a.skdxPart)("sign-up-page","submit"),{type:"submit",loading:d.pending??!1,disabled:d.pending??!1}),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(d.submitLabel),1)]),_:1},16,["loading","disabled"])]),_:3},16),o.$slots.footer?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:3},(0,e.unref)(a.skdxPart)("sign-up-page","footer"))),[(0,e.renderSlot)(o.$slots,"footer")],16)):(0,e.createCommentVNode)("",!0)],16)],16,N))}});exports.default=C;

package/dist/sign-up-page/SignUpPage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as e}from"../internal/part.js";import{defaultProviderLabel as a}from"../sign-in-page/types.js";import{Fragment as t,createBlock as s,createCommentVNode as r,createElementBlock as d,createElementVNode as i,createTextVNode as l,createVNode as o,defineComponent as n,guardReactiveProps as u,mergeProps as p,normalizeProps as m,openBlock as f,renderList as g,renderSlot as c,toDisplayString as b,unref as v,useId as k,useSlots as x,withCtx as w}from"vue";import{SkdxAlert as y,SkdxButton as L,SkdxCheckbox as S,SkdxDivider as P,SkdxField as _,SkdxForm as I,SkdxHeading as q,SkdxPasswordInput as C,SkdxTextField as F}from"@skdx/vue";import{SkdxTextFieldInput as h}from"@skdx/vue/primitives/text-field";import{SkdxFieldLabel as V,SkdxFieldRequiredIndicator as M}from"@skdx/vue/primitives/field";import{SkdxPasswordInputField as T,SkdxPasswordInputToggle as B}from"@skdx/vue/primitives/password-input";var E=["aria-labelledby"],$="confirmPassword",D=/* @__PURE__ */n({__name:"SignUpPage",props:{title:{default:"Create account"},providers:{default:()=>[]},error:{default:void 0},pending:{type:Boolean,default:!1},nameLabel:{default:void 0},emailLabel:{default:"Email"},passwordLabel:{default:"Password"},confirmPasswordLabel:{default:void 0},passwordMismatchMessage:{default:"Passwords do not match"},submitLabel:{default:"Create account"},getProviderLabel:{type:Function,default:a}},emits:["sign-up"],setup(a,{emit:n}){const D=a,N=n,H=x(),j=k();function A(e,a){const t=e.get(a);return"string"==typeof t?t:""}function R(e){e.preventDefault();const a=e.target,t=new FormData(a),s=A(t,"password"),r=void 0===D.confirmPasswordLabel?null:function(e){const a=e.elements.namedItem($);return a instanceof HTMLInputElement?a:null}(a);if(r&&r.value!==s)return r.setCustomValidity(D.passwordMismatchMessage),void a.reportValidity();const d={providerId:"credentials",email:A(t,"email"),password:s};void 0!==D.nameLabel&&(d.name=A(t,"name")),H.terms&&(d.termsAccepted=null!==t.get("terms")),N("sign-up",d)}function z(e){const a=e.target;a instanceof HTMLInputElement&&a.name===$&&a.setCustomValidity("")}return(n,k)=>(f(),d("section",p(v(e)("sign-up-page","root"),{"aria-labelledby":v(j)}),[i("div",m(u(v(e)("sign-up-page","panel"))),[o(v(q),p({id:v(j)},v(e)("sign-up-page","title"),{as:"h1"}),{default:w(()=>[l(b(a.title),1)]),_:1},16,["id"]),a.error?(f(),s(v(y),p({key:0},v(e)("sign-up-page","error"),{status:"danger"}),{default:w(()=>[l(b(a.error),1)]),_:1},16)):r("",!0),D.providers.length?(f(),d("div",m(p({key:1},v(e)("sign-up-page","providers"))),[(f(!0),d(t,null,g(D.providers,a=>(f(),s(v(L),p({key:a.id},{ref_for:!0},v(e)("sign-up-page","provider"),{type:"button","data-provider":a.id,onClick:e=>N("sign-up",{providerId:a.id})}),{default:w(()=>[l(b(D.getProviderLabel(a)),1)]),_:2},1040,["data-provider","onClick"]))),128))],16)):r("",!0),D.providers.length?(f(),s(v(P),m(p({key:2},v(e)("sign-up-page","divider"))),null,16)):r("",!0),o(v(I),p(v(e)("sign-up-page","form"),{onSubmit:R,onInput:z}),{default:w(()=>[void 0!==a.nameLabel?(f(),s(v(_),p({key:0},v(e)("sign-up-page","field"),{label:a.nameLabel,required:""}),{default:w(()=>[o(v(F),{name:"name",required:""},{default:w(()=>[o(v(h),{autocomplete:"name"})]),_:1})]),_:1},16,["label"])):r("",!0),o(v(_),p(v(e)("sign-up-page","field"),{label:a.emailLabel,required:""}),{default:w(()=>[o(v(F),{name:"email",required:""},{default:w(()=>[o(v(h),{type:"email",autocomplete:"email"})]),_:1})]),_:1},16,["label"]),o(v(_),p(v(e)("sign-up-page","field"),{label:a.passwordLabel,required:""}),{default:w(()=>[o(v(C),{name:"password",required:""},{default:w(()=>[o(v(T),{autocomplete:"new-password"}),o(v(B))]),_:1})]),_:1},16,["label"]),void 0!==a.confirmPasswordLabel?(f(),s(v(_),p({key:1},v(e)("sign-up-page","field"),{label:a.confirmPasswordLabel,required:""}),{default:w(()=>[o(v(C),{name:$,required:""},{default:w(()=>[o(v(T),{autocomplete:"new-password"}),o(v(B))]),_:1})]),_:1},16,["label"])):r("",!0),c(n.$slots,"default"),n.$slots.terms?(f(),s(v(_),p({key:2},v(e)("sign-up-page","terms"),{required:""}),{default:w(()=>[o(v(V),null,{default:w(()=>[c(n.$slots,"terms"),k[0]||(k[0]=l()),o(v(M))]),_:3}),o(v(S),{name:"terms",required:""})]),_:3},16)):r("",!0),o(v(L),p(v(e)("sign-up-page","submit"),{type:"submit",loading:a.pending??!1,disabled:a.pending??!1}),{default:w(()=>[l(b(a.submitLabel),1)]),_:1},16,["loading","disabled"])]),_:3},16),n.$slots.footer?(f(),d("div",m(p({key:3},v(e)("sign-up-page","footer"))),[c(n.$slots,"footer")],16)):r("",!0)],16)],16,E))}});export{D as default};

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

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

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

@@ -0,0 +1,2 @@
+export { default as SkdxSignUpPage } from './SignUpPage.vue.cjs';
+export type { SignUpDetail } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { default as SkdxSignUpPage } from './SignUpPage.vue.js';
+export type { SignUpDetail } from './types.js';

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

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

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

@@ -0,0 +1,25 @@
+/** The payload a `SkdxSignUpPage` reports when a provider button or the credentials form is used. */
+export interface SignUpDetail {
+    /** The id of the provider the user chose, or `'credentials'` for the form. */
+    providerId: string;
+    /**
+     * Name submitted by the credentials form, present only while the name field renders.
+     * @default undefined — no name field rendered, or a provider button was used.
+     */
+    name?: string | undefined;
+    /**
+     * Email address submitted by the credentials form.
+     * @default undefined — a provider button carries no field values.
+     */
+    email?: string | undefined;
+    /**
+     * Password submitted by the credentials form, already matched against the confirmation.
+     * @default undefined — a provider button carries no field values.
+     */
+    password?: string | undefined;
+    /**
+     * Whether the terms checkbox was ticked, present only while the terms field renders.
+     * @default undefined — no terms field rendered, or a provider button was used.
+     */
+    termsAccepted?: boolean | undefined;
+}

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

@@ -0,0 +1,25 @@
+/** The payload a `SkdxSignUpPage` reports when a provider button or the credentials form is used. */
+export interface SignUpDetail {
+    /** The id of the provider the user chose, or `'credentials'` for the form. */
+    providerId: string;
+    /**
+     * Name submitted by the credentials form, present only while the name field renders.
+     * @default undefined — no name field rendered, or a provider button was used.
+     */
+    name?: string | undefined;
+    /**
+     * Email address submitted by the credentials form.
+     * @default undefined — a provider button carries no field values.
+     */
+    email?: string | undefined;
+    /**
+     * Password submitted by the credentials form, already matched against the confirmation.
+     * @default undefined — a provider button carries no field values.
+     */
+    password?: string | undefined;
+    /**
+     * Whether the terms checkbox was ticked, present only while the terms field renders.
+     * @default undefined — no terms field rendered, or a provider button was used.
+     */
+    termsAccepted?: boolean | undefined;
+}

package/dist/stat-card/StatCard.vue.cjs

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

package/dist/stat-card/StatCard.vue.d.cts

@@ -0,0 +1,80 @@
+import type { StatCardSentiment, StatCardTrend } from './types.cjs';
+/**
+ * KPI tile block: a label, a value, an optional trend with sentiment colour, a description, a derived progress bar and a visual region, all inside one `role="group"` named by its own label.
+ *
+ * @example
+ * ```vue
+ * <SkdxStatCard label="Revenue" change="+12.4%" trend="up" sentiment="positive">
+ *   <template #value>$12,400</template>
+ * </SkdxStatCard>
+ * ```
+ */
+type __VLS_Props = {
+    /** Name of the metric, rendered into the label that names the group through aria-labelledby. */
+    label: string;
+    /**
+     * Already-formatted delta text such as "+12.4%", rendered inside the trend region.
+     * @default undefined — no trend region renders.
+     */
+    change?: string | undefined;
+    /**
+     * Direction of the change only, mirrored to data-trend on the root and the trend part.
+     * @default undefined — no direction is written.
+     */
+    trend?: StatCardTrend | undefined;
+    /**
+     * Whether the change is good or bad, independent of trend, mirrored to data-sentiment.
+     * @default undefined — the trend renders in the skin's neutral colour.
+     */
+    sentiment?: StatCardSentiment | undefined;
+    /**
+     * Visually hidden text read before the change, such as "Increased by".
+     * @default undefined — only the change text itself is announced.
+     */
+    changeLabel?: string | undefined;
+    /**
+     * Supporting text rendered below the value, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Percentage from 0 to 100, rendered into a derived Progress named by the label.
+     * @default undefined — no progress bar renders.
+     */
+    progress?: number | undefined;
+    /**
+     * Shows a skeleton in the value region and withholds the trend while true.
+     * @default false
+     */
+    loading?: boolean;
+};
+type __VLS_Slots = {
+    /** The metric's current reading, already formatted by the consumer. */
+    value?(): unknown;
+    /** Decorative glyph beside the label in the card header. */
+    icon?(): unknown;
+    /** Decorative glyph beside the change text in the trend region. */
+    'trend-icon'?(): unknown;
+    /** A chart or sparkline region the card sizes for the consumer to draw into. */
+    visual?(): unknown;
+    /** Content placed in a footer region below the card. */
+    footer?(): unknown;
+    /** Controls placed at the end of the header. */
+    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<{}>, {
+    progress: number | undefined;
+    loading: boolean;
+    description: string | undefined;
+    change: string | undefined;
+    trend: StatCardTrend | undefined;
+    sentiment: StatCardSentiment | undefined;
+    changeLabel: string | undefined;
+}, {}, {}, {}, 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/stat-card/StatCard.vue.d.ts

@@ -0,0 +1,80 @@
+import type { StatCardSentiment, StatCardTrend } from './types.js';
+/**
+ * KPI tile block: a label, a value, an optional trend with sentiment colour, a description, a derived progress bar and a visual region, all inside one `role="group"` named by its own label.
+ *
+ * @example
+ * ```vue
+ * <SkdxStatCard label="Revenue" change="+12.4%" trend="up" sentiment="positive">
+ *   <template #value>$12,400</template>
+ * </SkdxStatCard>
+ * ```
+ */
+type __VLS_Props = {
+    /** Name of the metric, rendered into the label that names the group through aria-labelledby. */
+    label: string;
+    /**
+     * Already-formatted delta text such as "+12.4%", rendered inside the trend region.
+     * @default undefined — no trend region renders.
+     */
+    change?: string | undefined;
+    /**
+     * Direction of the change only, mirrored to data-trend on the root and the trend part.
+     * @default undefined — no direction is written.
+     */
+    trend?: StatCardTrend | undefined;
+    /**
+     * Whether the change is good or bad, independent of trend, mirrored to data-sentiment.
+     * @default undefined — the trend renders in the skin's neutral colour.
+     */
+    sentiment?: StatCardSentiment | undefined;
+    /**
+     * Visually hidden text read before the change, such as "Increased by".
+     * @default undefined — only the change text itself is announced.
+     */
+    changeLabel?: string | undefined;
+    /**
+     * Supporting text rendered below the value, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Percentage from 0 to 100, rendered into a derived Progress named by the label.
+     * @default undefined — no progress bar renders.
+     */
+    progress?: number | undefined;
+    /**
+     * Shows a skeleton in the value region and withholds the trend while true.
+     * @default false
+     */
+    loading?: boolean;
+};
+type __VLS_Slots = {
+    /** The metric's current reading, already formatted by the consumer. */
+    value?(): unknown;
+    /** Decorative glyph beside the label in the card header. */
+    icon?(): unknown;
+    /** Decorative glyph beside the change text in the trend region. */
+    'trend-icon'?(): unknown;
+    /** A chart or sparkline region the card sizes for the consumer to draw into. */
+    visual?(): unknown;
+    /** Content placed in a footer region below the card. */
+    footer?(): unknown;
+    /** Controls placed at the end of the header. */
+    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<{}>, {
+    progress: number | undefined;
+    loading: boolean;
+    description: string | undefined;
+    change: string | undefined;
+    trend: StatCardTrend | undefined;
+    sentiment: StatCardSentiment | undefined;
+    changeLabel: string | undefined;
+}, {}, {}, {}, 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/stat-card/StatCard.vue.js

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

package/dist/stat-card/StatCard.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const a=require("../internal/part.cjs");let e=require("vue"),o=require("@skdx/vue");var s=["aria-labelledby","aria-busy","data-trend","data-sentiment","data-state"],i=["id"],c=["data-trend","data-sentiment"],u=(0,e.defineComponent)({__name:"StatCard",props:{label:{},change:{default:void 0},trend:{default:void 0},sentiment:{default:void 0},changeLabel:{default:void 0},description:{default:void 0},progress:{default:void 0},loading:{type:Boolean,default:!1}},setup(t){const d=t,n=(0,e.useId)(),l=(0,e.computed)(()=>d.change!==void 0&&!d.loading);return(r,m)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({role:"group"},(0,e.unref)(a.skdxPart)("stat-card","root"),{"aria-labelledby":(0,e.unref)(n),"aria-busy":t.loading?"true":void 0,"data-trend":t.trend,"data-sentiment":t.sentiment,"data-state":t.loading?"loading":void 0}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("stat-card","header"))),[r.$slots.icon?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.mergeProps)({key:0,"aria-hidden":"true"},(0,e.unref)(a.skdxPart)("stat-card","icon")),[(0,e.renderSlot)(r.$slots,"icon")],16)):(0,e.createCommentVNode)("",!0),(0,e.createElementVNode)("span",(0,e.mergeProps)({id:(0,e.unref)(n)},(0,e.unref)(a.skdxPart)("stat-card","label")),(0,e.toDisplayString)(t.label),17,i),r.$slots.actions?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:1},(0,e.unref)(a.skdxPart)("stat-card","actions"))),[(0,e.renderSlot)(r.$slots,"actions")],16)):(0,e.createCommentVNode)("",!0)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("stat-card","body"))),[(0,e.createElementVNode)("span",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(a.skdxPart)("stat-card","value"))),[t.loading?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxSkeleton),{key:0,shape:"line"})):((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxText),{key:1,as:"span",variant:"numeric"},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"value")]),_:3}))],16),l.value?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.mergeProps)({key:0,"data-trend":t.trend,"data-sentiment":t.sentiment},(0,e.unref)(a.skdxPart)("stat-card","trend")),[r.$slots["trend-icon"]?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.mergeProps)({key:0,"aria-hidden":"true"},(0,e.unref)(a.skdxPart)("stat-card","trend-icon")),[(0,e.renderSlot)(r.$slots,"trend-icon")],16)):(0,e.createCommentVNode)("",!0),t.changeLabel?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxVisuallyHidden),{key:1},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.changeLabel),1)]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createTextVNode)((0,e.toDisplayString)(t.change),1)],16,c)):(0,e.createCommentVNode)("",!0)],16),t.description?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxText),(0,e.mergeProps)({key:0,as:"p",tone:"muted"},(0,e.unref)(a.skdxPart)("stat-card","description")),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.description),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),typeof t.progress=="number"?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(o.SkdxProgress),(0,e.mergeProps)({key:1,value:t.progress,"aria-labelledby":(0,e.unref)(n)},(0,e.unref)(a.skdxPart)("stat-card","progress")),null,16,["value","aria-labelledby"])):(0,e.createCommentVNode)("",!0),r.$slots.visual?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(a.skdxPart)("stat-card","visual"))),[(0,e.renderSlot)(r.$slots,"visual")],16)):(0,e.createCommentVNode)("",!0),r.$slots.footer?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:3},(0,e.unref)(a.skdxPart)("stat-card","footer"))),[(0,e.renderSlot)(r.$slots,"footer")],16)):(0,e.createCommentVNode)("",!0)],16,s))}});exports.default=u;

package/dist/stat-card/StatCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as a}from"../internal/part.js";import{computed as e,createBlock as t,createCommentVNode as s,createElementBlock as d,createElementVNode as r,createTextVNode as o,defineComponent as n,guardReactiveProps as i,mergeProps as l,normalizeProps as c,openBlock as u,renderSlot as p,toDisplayString as v,unref as m,useId as y,withCtx as g}from"vue";import{SkdxProgress as k,SkdxSkeleton as f,SkdxText as b,SkdxVisuallyHidden as h}from"@skdx/vue";var $=["aria-labelledby","aria-busy","data-trend","data-sentiment","data-state"],x=["id"],S=["data-trend","data-sentiment"],P=/* @__PURE__ */n({__name:"StatCard",props:{label:{},change:{default:void 0},trend:{default:void 0},sentiment:{default:void 0},changeLabel:{default:void 0},description:{default:void 0},progress:{default:void 0},loading:{type:Boolean,default:!1}},setup(n){const P=n,_=y(),B=e(()=>void 0!==P.change&&!P.loading);return(e,y)=>(u(),d("div",l({role:"group"},m(a)("stat-card","root"),{"aria-labelledby":m(_),"aria-busy":n.loading?"true":void 0,"data-trend":n.trend,"data-sentiment":n.sentiment,"data-state":n.loading?"loading":void 0}),[r("div",c(i(m(a)("stat-card","header"))),[e.$slots.icon?(u(),d("span",l({key:0,"aria-hidden":"true"},m(a)("stat-card","icon")),[p(e.$slots,"icon")],16)):s("",!0),r("span",l({id:m(_)},m(a)("stat-card","label")),v(n.label),17,x),e.$slots.actions?(u(),d("div",c(l({key:1},m(a)("stat-card","actions"))),[p(e.$slots,"actions")],16)):s("",!0)],16),r("div",c(i(m(a)("stat-card","body"))),[r("span",c(i(m(a)("stat-card","value"))),[n.loading?(u(),t(m(f),{key:0,shape:"line"})):(u(),t(m(b),{key:1,as:"span",variant:"numeric"},{default:g(()=>[p(e.$slots,"value")]),_:3}))],16),B.value?(u(),d("span",l({key:0,"data-trend":n.trend,"data-sentiment":n.sentiment},m(a)("stat-card","trend")),[e.$slots["trend-icon"]?(u(),d("span",l({key:0,"aria-hidden":"true"},m(a)("stat-card","trend-icon")),[p(e.$slots,"trend-icon")],16)):s("",!0),n.changeLabel?(u(),t(m(h),{key:1},{default:g(()=>[o(v(n.changeLabel),1)]),_:1})):s("",!0),o(v(n.change),1)],16,S)):s("",!0)],16),n.description?(u(),t(m(b),l({key:0,as:"p",tone:"muted"},m(a)("stat-card","description")),{default:g(()=>[o(v(n.description),1)]),_:1},16)):s("",!0),"number"==typeof n.progress?(u(),t(m(k),l({key:1,value:n.progress,"aria-labelledby":m(_)},m(a)("stat-card","progress")),null,16,["value","aria-labelledby"])):s("",!0),e.$slots.visual?(u(),d("div",c(l({key:2},m(a)("stat-card","visual"))),[p(e.$slots,"visual")],16)):s("",!0),e.$slots.footer?(u(),d("div",c(l({key:3},m(a)("stat-card","footer"))),[p(e.$slots,"footer")],16)):s("",!0)],16,$))}});export{P as default};

package/dist/stat-card/index.cjs

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

package/dist/stat-card/index.d.cts

@@ -0,0 +1,2 @@
+export { default as SkdxStatCard } from './StatCard.vue.cjs';
+export type { StatCardSentiment, StatCardTrend } from './types.cjs';

package/dist/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SkdxStatCard } from './StatCard.vue.js';
+export type { StatCardSentiment, StatCardTrend } from './types.js';

package/dist/stat-card/index.js

@@ -0,0 +1 @@
+import t from"./StatCard.vue.js";export{t as SkdxStatCard};

package/dist/stat-card/types.d.cts

@@ -0,0 +1,4 @@
+/** Direction of a `SkdxStatCard`'s change, mirrored to `data-trend` on the root and the trend part. */
+export type StatCardTrend = 'up' | 'down' | 'neutral';
+/** Whether a `SkdxStatCard`'s change is good or bad, mirrored to `data-sentiment` for the skin's colour. */
+export type StatCardSentiment = 'positive' | 'negative' | 'neutral';

package/dist/stat-card/types.d.ts

@@ -0,0 +1,4 @@
+/** Direction of a `SkdxStatCard`'s change, mirrored to `data-trend` on the root and the trend part. */
+export type StatCardTrend = 'up' | 'down' | 'neutral';
+/** Whether a `SkdxStatCard`'s change is good or bad, mirrored to `data-sentiment` for the skin's colour. */
+export type StatCardSentiment = 'positive' | 'negative' | 'neutral';

package/dist/usage-card/UsageCard.vue.cjs

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

package/dist/usage-card/UsageCard.vue.d.cts

@@ -0,0 +1,66 @@
+import type { UsageCardStatus } from './types.cjs';
+/**
+ * Quota tile block: a label, the amount used against a limit, a derived meter and a status colour, all inside one `role="group"` named by its own label. Handles a finite, zero, unlimited or unknown limit without division errors, and derives over-limit from the numbers rather than a status prop.
+ *
+ * @example
+ * ```vue
+ * <SkdxUsageCard label="Storage" :used="42" :limit="50" unit="GB" />
+ * ```
+ */
+type __VLS_Props = {
+    /** Name of the quota, rendered into the label that names the group through aria-labelledby. */
+    label: string;
+    /** The current amount consumed, formatted by formatValue for the value region and the meter. */
+    used: number;
+    /**
+     * The finite cap used is measured against; null renders unlimitedLabel instead of a number. No meter or limit text renders when omitted.
+     * @default undefined — the limit is unknown, so no limit text or meter renders.
+     */
+    limit?: number | null | undefined;
+    /**
+     * Unit label rendered after the limit text, such as "GB" or "seats".
+     * @default undefined — no unit region renders.
+     */
+    unit?: string | undefined;
+    /**
+     * Formats used and limit for the consumer's own locale and precision.
+     * @default String — the raw number is rendered as-is.
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /**
+     * Text rendered in place of a limit number when limit is null.
+     * @default 'Unlimited'
+     */
+    unlimitedLabel?: string;
+    /**
+     * Supporting copy rendered below the meter, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Colour role written to data-status, tinting the meter fill and the used amount. Over-limit is derived automatically; this axis is policy the consumer decides.
+     * @default undefined — the skin's own default colour.
+     */
+    status?: UsageCardStatus | undefined;
+};
+type __VLS_Slots = {
+    /** Controls placed at the end of the header, such as a manage-plan link. */
+    actions?(): unknown;
+    /** Content placed in a footer region below the card, such as renewal or reset metadata. */
+    footer?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    status: UsageCardStatus | undefined;
+    description: string | undefined;
+    limit: number | null | undefined;
+    unit: string | undefined;
+    formatValue: ((value: number) => string) | undefined;
+    unlimitedLabel: 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/usage-card/UsageCard.vue.d.ts

@@ -0,0 +1,66 @@
+import type { UsageCardStatus } from './types.js';
+/**
+ * Quota tile block: a label, the amount used against a limit, a derived meter and a status colour, all inside one `role="group"` named by its own label. Handles a finite, zero, unlimited or unknown limit without division errors, and derives over-limit from the numbers rather than a status prop.
+ *
+ * @example
+ * ```vue
+ * <SkdxUsageCard label="Storage" :used="42" :limit="50" unit="GB" />
+ * ```
+ */
+type __VLS_Props = {
+    /** Name of the quota, rendered into the label that names the group through aria-labelledby. */
+    label: string;
+    /** The current amount consumed, formatted by formatValue for the value region and the meter. */
+    used: number;
+    /**
+     * The finite cap used is measured against; null renders unlimitedLabel instead of a number. No meter or limit text renders when omitted.
+     * @default undefined — the limit is unknown, so no limit text or meter renders.
+     */
+    limit?: number | null | undefined;
+    /**
+     * Unit label rendered after the limit text, such as "GB" or "seats".
+     * @default undefined — no unit region renders.
+     */
+    unit?: string | undefined;
+    /**
+     * Formats used and limit for the consumer's own locale and precision.
+     * @default String — the raw number is rendered as-is.
+     */
+    formatValue?: ((value: number) => string) | undefined;
+    /**
+     * Text rendered in place of a limit number when limit is null.
+     * @default 'Unlimited'
+     */
+    unlimitedLabel?: string;
+    /**
+     * Supporting copy rendered below the meter, in the skin's muted tone.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Colour role written to data-status, tinting the meter fill and the used amount. Over-limit is derived automatically; this axis is policy the consumer decides.
+     * @default undefined — the skin's own default colour.
+     */
+    status?: UsageCardStatus | undefined;
+};
+type __VLS_Slots = {
+    /** Controls placed at the end of the header, such as a manage-plan link. */
+    actions?(): unknown;
+    /** Content placed in a footer region below the card, such as renewal or reset metadata. */
+    footer?(): unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    status: UsageCardStatus | undefined;
+    description: string | undefined;
+    limit: number | null | undefined;
+    unit: string | undefined;
+    formatValue: ((value: number) => string) | undefined;
+    unlimitedLabel: 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/usage-card/UsageCard.vue.js

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

package/dist/usage-card/UsageCard.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const t=require("../internal/part.cjs"),c=require("./usage.cjs");let e=require("vue"),m=require("@skdx/vue");var k=["aria-labelledby","data-state","data-status"],P=["id"],x=(0,e.defineComponent)({__name:"UsageCard",props:{label:{},used:{},limit:{default:void 0},unit:{default:void 0},formatValue:{type:Function,default:void 0},unlimitedLabel:{default:"Unlimited"},description:{default:void 0},status:{default:void 0}},setup(r){const a=r,n=(0,e.useId)(),l=(0,e.computed)(()=>a.formatValue??String),i=(0,e.computed)(()=>c.normalizeUsage(a.used)),u=(0,e.computed)(()=>typeof a.limit=="number"?c.usageMeter(i.value,a.limit):null),p=(0,e.computed)(()=>u.value?.overLimit??!1),s=(0,e.computed)(()=>u.value?.range??null),d=(0,e.computed)(()=>{if(a.limit===null)return a.unlimitedLabel;if(u.value)return`/ ${l.value(u.value.limit)}`});function v(o,g,f){return`${l.value(o)} / ${l.value(f)}${a.unit?` ${a.unit}`:""}`}return(o,g)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({role:"group"},(0,e.unref)(t.skdxPart)("usage-card","root"),{"aria-labelledby":(0,e.unref)(n),"data-state":p.value?"over-limit":void 0,"data-status":r.status}),[(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(t.skdxPart)("usage-card","header"))),[(0,e.createElementVNode)("span",(0,e.mergeProps)({id:(0,e.unref)(n)},(0,e.unref)(t.skdxPart)("usage-card","label")),(0,e.toDisplayString)(r.label),17,P),o.$slots.actions?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:0},(0,e.unref)(t.skdxPart)("usage-card","actions"))),[(0,e.renderSlot)(o.$slots,"actions")],16)):(0,e.createCommentVNode)("",!0)],16),(0,e.createElementVNode)("div",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(t.skdxPart)("usage-card","value"))),[(0,e.createElementVNode)("span",(0,e.normalizeProps)((0,e.guardReactiveProps)((0,e.unref)(t.skdxPart)("usage-card","used"))),(0,e.toDisplayString)(l.value(i.value)),17),d.value!==void 0?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.normalizeProps)((0,e.mergeProps)({key:0},(0,e.unref)(t.skdxPart)("usage-card","limit"))),(0,e.toDisplayString)(d.value),17)):(0,e.createCommentVNode)("",!0),r.unit?((0,e.openBlock)(),(0,e.createElementBlock)("span",(0,e.normalizeProps)((0,e.mergeProps)({key:1},(0,e.unref)(t.skdxPart)("usage-card","unit"))),(0,e.toDisplayString)(r.unit),17)):(0,e.createCommentVNode)("",!0)],16),s.value?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(m.SkdxProgress),(0,e.mergeProps)({key:0,role:"meter",min:0,max:s.value?.max??0,value:s.value?.value??0,"aria-labelledby":(0,e.unref)(n),"get-value-label":v},(0,e.unref)(t.skdxPart)("usage-card","progress")),null,16,["max","value","aria-labelledby"])):(0,e.createCommentVNode)("",!0),r.description?((0,e.openBlock)(),(0,e.createBlock)((0,e.unref)(m.SkdxText),(0,e.mergeProps)({key:1,as:"p",tone:"muted"},(0,e.unref)(t.skdxPart)("usage-card","description")),{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.description),1)]),_:1},16)):(0,e.createCommentVNode)("",!0),o.$slots.footer?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.normalizeProps)((0,e.mergeProps)({key:2},(0,e.unref)(t.skdxPart)("usage-card","footer"))),[(0,e.renderSlot)(o.$slots,"footer")],16)):(0,e.createCommentVNode)("",!0)],16,k))}});exports.default=x;

package/dist/usage-card/UsageCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{skdxPart as e}from"../internal/part.js";import{normalizeUsage as a,usageMeter as t}from"./usage.js";import{computed as l,createBlock as s,createCommentVNode as u,createElementBlock as r,createElementVNode as i,createTextVNode as o,defineComponent as d,guardReactiveProps as n,mergeProps as v,normalizeProps as m,openBlock as c,renderSlot as p,toDisplayString as g,unref as f,useId as b,withCtx as k}from"vue";import{SkdxProgress as y,SkdxText as x}from"@skdx/vue";var $=["aria-labelledby","data-state","data-status"],P=["id"],S=/* @__PURE__ */d({__name:"UsageCard",props:{label:{},used:{},limit:{default:void 0},unit:{default:void 0},formatValue:{type:Function,default:void 0},unlimitedLabel:{default:"Unlimited"},description:{default:void 0},status:{default:void 0}},setup(d){const S=d,V=b(),C=l(()=>S.formatValue??String),B=l(()=>a(S.used)),L=l(()=>"number"==typeof S.limit?t(B.value,S.limit):null),N=l(()=>L.value?.overLimit??!1),U=l(()=>L.value?.range??null),_=l(()=>null===S.limit?S.unlimitedLabel:L.value?`/ ${C.value(L.value.limit)}`:void 0);function h(e,a,t){return`${C.value(e)} / ${C.value(t)}${S.unit?` ${S.unit}`:""}`}return(a,t)=>(c(),r("div",v({role:"group"},f(e)("usage-card","root"),{"aria-labelledby":f(V),"data-state":N.value?"over-limit":void 0,"data-status":d.status}),[i("div",m(n(f(e)("usage-card","header"))),[i("span",v({id:f(V)},f(e)("usage-card","label")),g(d.label),17,P),a.$slots.actions?(c(),r("div",m(v({key:0},f(e)("usage-card","actions"))),[p(a.$slots,"actions")],16)):u("",!0)],16),i("div",m(n(f(e)("usage-card","value"))),[i("span",m(n(f(e)("usage-card","used"))),g(C.value(B.value)),17),void 0!==_.value?(c(),r("span",m(v({key:0},f(e)("usage-card","limit"))),g(_.value),17)):u("",!0),d.unit?(c(),r("span",m(v({key:1},f(e)("usage-card","unit"))),g(d.unit),17)):u("",!0)],16),U.value?(c(),s(f(y),v({key:0,role:"meter",min:0,max:U.value?.max??0,value:U.value?.value??0,"aria-labelledby":f(V),"get-value-label":h},f(e)("usage-card","progress")),null,16,["max","value","aria-labelledby"])):u("",!0),d.description?(c(),s(f(x),v({key:1,as:"p",tone:"muted"},f(e)("usage-card","description")),{default:k(()=>[o(g(d.description),1)]),_:1},16)):u("",!0),a.$slots.footer?(c(),r("div",m(v({key:2},f(e)("usage-card","footer"))),[p(a.$slots,"footer")],16)):u("",!0)],16,$))}});export{S as default};

package/dist/usage-card/index.cjs

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

package/dist/usage-card/index.d.cts

@@ -0,0 +1,2 @@
+export { default as SkdxUsageCard } from './UsageCard.vue.cjs';
+export type { UsageCardStatus } from './types.cjs';

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

@@ -0,0 +1,2 @@
+export { default as SkdxUsageCard } from './UsageCard.vue.js';
+export type { UsageCardStatus } from './types.js';

package/dist/usage-card/index.js

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

package/dist/usage-card/types.d.cts

@@ -0,0 +1,2 @@
+/** Colour role of a `SkdxUsageCard`, mirrored to `data-status` for the skin's colour. */
+export type UsageCardStatus = 'info' | 'success' | 'warning' | 'danger' | (string & {});

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

@@ -0,0 +1,2 @@
+/** Colour role of a `SkdxUsageCard`, mirrored to `data-status` for the skin's colour. */
+export type UsageCardStatus = 'info' | 'success' | 'warning' | 'danger' | (string & {});

package/dist/usage-card/usage.cjs

@@ -0,0 +1 @@
+function a(i){return Number.isNaN(i)?0:Math.max(i,0)}function r(i,n){const t=a(i),e=a(n);return e===0?{limit:e,overLimit:t>0,range:null}:{limit:e,overLimit:t>e,range:{max:e,value:Math.min(t,e)}}}exports.normalizeUsage=a;exports.usageMeter=r;

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

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