@sentropic/design-system-vue 0.6.0 → 0.7.0

package/dist/Collapsible.js

@@ -0,0 +1,72 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+let collapsibleCounter = 0;
+function ChevronDownIcon() {
+    return h("svg", {
+        width: 18,
+        height: 18,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": 2.25,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        focusable: "false",
+        "aria-hidden": "true",
+    }, [h("path", { d: "m6 9 6 6 6-6" })]);
+}
+export const Collapsible = defineComponent({
+    name: "Collapsible",
+    props: {
+        open: { type: Boolean, default: undefined },
+        title: { type: String, required: true },
+        disabled: { type: Boolean, default: false },
+        onToggle: {
+            type: Function,
+            default: undefined,
+        },
+        class: { type: String, default: undefined },
+    },
+    emits: ["toggle"],
+    setup(props, { slots, attrs, emit }) {
+        const uid = `st-collapsible-${(collapsibleCounter += 1)}`;
+        const internalOpen = ref(props.open ?? false);
+        return () => {
+            const isControlled = props.open !== undefined;
+            const open = isControlled ? props.open : internalOpen.value;
+            const classes = classNames("st-collapsible", open && "st-collapsible--open", props.class);
+            const toggle = () => {
+                if (props.disabled)
+                    return;
+                const next = !open;
+                if (!isControlled)
+                    internalOpen.value = next;
+                props.onToggle?.(next);
+                emit("toggle", next);
+            };
+            return h("div", { ...attrs, class: classes }, [
+                h("button", {
+                    type: "button",
+                    class: "st-collapsible__trigger",
+                    "aria-expanded": open ? "true" : "false",
+                    "aria-controls": `${uid}-region`,
+                    id: `${uid}-trigger`,
+                    disabled: props.disabled,
+                    onClick: toggle,
+                }, [
+                    h("span", { class: "st-collapsible__title" }, props.title),
+                    h("span", { class: "st-collapsible__icon", "aria-hidden": "true" }, [ChevronDownIcon()]),
+                ]),
+                open
+                    ? h("div", {
+                        class: "st-collapsible__region",
+                        role: "region",
+                        id: `${uid}-region`,
+                        "aria-labelledby": `${uid}-trigger`,
+                    }, slots.default?.())
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=Collapsible.js.map

package/dist/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sourceRoot":"","sources":["../src/Collapsible.ts"],"names":[],"mappings":"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"}

package/dist/Container.d.ts

@@ -45,7 +45,7 @@ export declare const Container: import("vue").DefineComponent<import("vue").Extr
 }>> & Readonly<{}>, {
     class: string;
     size: ContainerSize;
-    as: string;
     padding: boolean;
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Container.d.ts.map

package/dist/DataTable.d.ts

@@ -262,8 +262,8 @@ export declare const DataTable: import("vue").DefineComponent<import("vue").Extr
 }>> & Readonly<{}>, {
     class: string;
     caption: VNodeChild;
-    page: number;
     size: DataTableSize;
+    page: number;
     emptyLabel: string;
     selectable: DataTableSelectMode;
     selectedIds: string[];

package/dist/Flex.d.ts

@@ -87,11 +87,11 @@ export declare const Flex: import("vue").DefineComponent<import("vue").ExtractPr
 }>> & Readonly<{}>, {
     class: string;
     inline: boolean;
-    as: string;
     wrap: boolean;
     justify: FlexJustify;
     direction: FlexDirection;
     gap: number;
+    as: string;
     align: FlexAlign;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Flex.d.ts.map

package/dist/Footer.d.ts

@@ -59,8 +59,8 @@ export declare const Footer: import("vue").DefineComponent<import("vue").Extract
     };
 }>> & Readonly<{}>, {
     class: string;
-    columns: FooterColumn[];
     brand: undefined;
+    columns: FooterColumn[];
     links: FooterLink[];
     copyright: undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/Header.d.ts

@@ -80,10 +80,10 @@ export declare const Header: import("vue").DefineComponent<import("vue").Extract
 }>> & Readonly<{}>, {
     class: string;
     title: undefined;
-    sticky: boolean;
     brand: undefined;
     navigation: HeaderNavItem[];
     navItems: HeaderNavItem[];
     account: HeaderAccount;
+    sticky: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Header.d.ts.map

package/dist/Hidden.d.ts

@@ -45,8 +45,8 @@ export declare const Hidden: import("vue").DefineComponent<import("vue").Extract
     };
 }>> & Readonly<{}>, {
     class: string;
-    as: string;
     above: HiddenBreakpoint;
     below: HiddenBreakpoint;
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Hidden.d.ts.map

package/dist/IconButton.d.ts

@@ -55,7 +55,7 @@ export declare const IconButton: import("vue").DefineComponent<import("vue").Ext
     type: "button" | "reset" | "submit";
     class: string;
     disabled: boolean;
-    variant: IconButtonVariant;
     size: IconButtonSize;
+    variant: IconButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=IconButton.d.ts.map

package/dist/Inline.d.ts

@@ -62,10 +62,10 @@ export declare const Inline: import("vue").DefineComponent<import("vue").Extract
     };
 }>> & Readonly<{}>, {
     class: string;
-    as: string;
     wrap: boolean;
     justify: FlexJustify;
     gap: number;
+    as: string;
     align: FlexAlign;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Inline.d.ts.map

package/dist/RadioGroup.d.ts

@@ -0,0 +1,109 @@
+import type { PropType } from "vue";
+export interface RadioGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    helperText?: string;
+}
+export type RadioGroupProps = {
+    legend: string;
+    /** Valeur sélectionnée (contrôlée). */
+    value?: string;
+    onChange?: (value: string) => void;
+    orientation?: "vertical" | "horizontal";
+    /** Nom partagé garantissant l'exclusivité radio. Requis. */
+    name: string;
+    options?: RadioGroupOption[];
+    helperText?: string;
+    /** Désactive le groupe entier. */
+    disabled?: boolean;
+    class?: string;
+};
+export declare const RadioGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    legend: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    orientation: {
+        type: () => "vertical" | "horizontal";
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<RadioGroupOption[]>;
+        default: () => never[];
+    };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    legend: {
+        type: StringConstructor;
+        required: true;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    orientation: {
+        type: () => "vertical" | "horizontal";
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    options: {
+        type: PropType<RadioGroupOption[]>;
+        default: () => never[];
+    };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    onChange: (value: string) => void;
+    disabled: boolean;
+    orientation: "horizontal" | "vertical";
+    value: string;
+    helperText: string;
+    options: RadioGroupOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAIpC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;cAMC,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;;;;cAInC,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAKhC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;cATzB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;;;;cAInC,MAAM,UAAU,GAAG,YAAY;;;;;;;;cAKhC,QAAQ,CAAC,gBAAgB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;sBATR,MAAM,KAAK,IAAI;;;;;;4EAyDtD,CAAC"}

package/dist/RadioGroup.js

@@ -0,0 +1,58 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+import { Radio } from "./Radio.js";
+export const RadioGroup = defineComponent({
+    name: "RadioGroup",
+    props: {
+        legend: { type: String, required: true },
+        value: { type: String, default: undefined },
+        onChange: {
+            type: Function,
+            default: undefined,
+        },
+        orientation: {
+            type: String,
+            default: "vertical",
+        },
+        name: { type: String, required: true },
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        helperText: { type: String, default: undefined },
+        disabled: { type: Boolean, default: false },
+        class: { type: String, default: undefined },
+    },
+    emits: ["change"],
+    setup(props, { slots, attrs, emit }) {
+        function select(optionValue) {
+            if (optionValue === props.value)
+                return;
+            props.onChange?.(optionValue);
+            emit("change", optionValue);
+        }
+        return () => {
+            const classes = classNames("st-radioGroup", `st-radioGroup--${props.orientation}`, props.class);
+            return h("fieldset", { ...attrs, class: classes, disabled: props.disabled }, [
+                h("legend", { class: "st-radioGroup__legend" }, props.legend),
+                props.helperText
+                    ? h("p", { class: "st-radioGroup__help" }, props.helperText)
+                    : null,
+                h("div", { class: "st-radioGroup__options" }, [
+                    ...props.options.map((option) => h(Radio, {
+                        key: option.value,
+                        label: option.label,
+                        helperText: option.helperText,
+                        name: props.name,
+                        value: option.value,
+                        checked: props.value === option.value,
+                        disabled: option.disabled,
+                        onChange: () => select(option.value),
+                    })),
+                    slots.default?.(),
+                ]),
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAwBnC,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACxC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,QAAQ,EAAE;YACR,IAAI,EAAE,QAA6C;YACnD,OAAO,EAAE,SAAS;SACnB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAyC;YAC/C,OAAO,EAAE,UAAU;SACpB;QACD,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;QACtC,OAAO,EAAE;YACP,IAAI,EAAE,KAAqC;YAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE;SAClB;QACD,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAChD,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;IACjB,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE;QACjC,SAAS,MAAM,CAAC,WAAmB;YACjC,IAAI,WAAW,KAAK,KAAK,CAAC,KAAK;gBAAE,OAAO;YACxC,KAAK,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC;YAC9B,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,kBAAkB,KAAK,CAAC,WAAW,EAAE,EACrC,KAAK,CAAC,KAAK,CACZ,CAAC;YACF,OAAO,CAAC,CACN,UAAU,EACV,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACtD;gBACE,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC;gBAC7D,KAAK,CAAC,UAAU;oBACd,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC;oBAC5D,CAAC,CAAC,IAAI;gBACR,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,EAAE;oBAC5C,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAC9B,CAAC,CAAC,KAAK,EAAE;wBACP,GAAG,EAAE,MAAM,CAAC,KAAK;wBACjB,KAAK,EAAE,MAAM,CAAC,KAAK;wBACnB,UAAU,EAAE,MAAM,CAAC,UAAU;wBAC7B,IAAI,EAAE,KAAK,CAAC,IAAI;wBAChB,KAAK,EAAE,MAAM,CAAC,KAAK;wBACnB,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;wBACrC,QAAQ,EAAE,MAAM,CAAC,QAAQ;wBACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;qBACrC,CAAC,CACH;oBACD,KAAK,CAAC,OAAO,EAAE,EAAE;iBAClB,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/Row.d.ts

@@ -62,9 +62,9 @@ export declare const Row: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     class: string;
-    as: string;
     wrap: boolean;
     justify: FlexJustify;
+    as: string;
     align: FlexAlign;
     gutter: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/Stack.d.ts

@@ -53,9 +53,9 @@ export declare const Stack: import("vue").DefineComponent<import("vue").ExtractP
     };
 }>> & Readonly<{}>, {
     class: string;
-    as: string;
     justify: FlexJustify;
     gap: number;
+    as: string;
     align: FlexAlign;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Stack.d.ts.map

package/dist/Stepper.d.ts

@@ -0,0 +1,89 @@
+import type { PropType } from "vue";
+export interface StepperStep {
+    label: string;
+    description?: string;
+}
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperProps = {
+    steps: StepperStep[];
+    /** Index de l'étape courante (0-based). */
+    current?: number;
+    orientation?: StepperOrientation;
+    /** Autorise la navigation au clic sur les étapes. */
+    clickable?: boolean;
+    onStepClick?: (index: number) => void;
+    /** Étiquette a11y de la liste d'étapes. */
+    label?: string;
+    class?: string;
+};
+export declare const Stepper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    steps: {
+        type: PropType<StepperStep[]>;
+        required: true;
+    };
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: () => StepperOrientation;
+        default: string;
+    };
+    clickable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onStepClick: {
+        type: PropType<(index: number) => void>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "stepClick"[], "stepClick", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    steps: {
+        type: PropType<StepperStep[]>;
+        required: true;
+    };
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    orientation: {
+        type: () => StepperOrientation;
+        default: string;
+    };
+    clickable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onStepClick: {
+        type: PropType<(index: number) => void>;
+        default: undefined;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onStepClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    label: string;
+    orientation: StepperOrientation;
+    current: number;
+    clickable: boolean;
+    onStepClick: (index: number) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../src/Stepper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAqBF,eAAO,MAAM,OAAO;;cAGQ,QAAQ,CAAC,WAAW,EAAE,CAAC;;;;;;;;cAG7B,MAAM,kBAAkB;;;;;;;;cAKtB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;cAR7B,QAAQ,CAAC,WAAW,EAAE,CAAC;;;;;;;;cAG7B,MAAM,kBAAkB;;;;;;;;cAKtB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;;yBAAhB,MAAM,KAAK,IAAI;4EAwFtD,CAAC"}

package/dist/Stepper.js

@@ -0,0 +1,91 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+function CheckIcon() {
+    return h("svg", {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": 2.5,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        focusable: "false",
+        "aria-hidden": "true",
+    }, [h("path", { d: "M20 6 9 17l-5-5" })]);
+}
+export const Stepper = defineComponent({
+    name: "Stepper",
+    props: {
+        steps: { type: Array, required: true },
+        current: { type: Number, default: 0 },
+        orientation: {
+            type: String,
+            default: "horizontal",
+        },
+        clickable: { type: Boolean, default: false },
+        onStepClick: {
+            type: Function,
+            default: undefined,
+        },
+        label: { type: String, default: "Progression" },
+        class: { type: String, default: undefined },
+    },
+    emits: ["stepClick"],
+    setup(props, { attrs, emit }) {
+        function stateOf(index) {
+            if (index < props.current)
+                return "complete";
+            if (index === props.current)
+                return "current";
+            return "upcoming";
+        }
+        function handleClick(index) {
+            if (!props.clickable)
+                return;
+            props.onStepClick?.(index);
+            emit("stepClick", index);
+        }
+        return () => {
+            const classes = classNames("st-stepper", `st-stepper--${props.orientation}`, props.class);
+            return h("ol", { ...attrs, class: classes, "aria-label": props.label }, props.steps.map((step, index) => {
+                const state = stateOf(index);
+                const isLast = index === props.steps.length - 1;
+                return h("li", {
+                    key: index,
+                    class: classNames("st-stepper__step", `st-stepper__step--${state}`),
+                    "aria-current": state === "current" ? "step" : undefined,
+                }, [
+                    h("span", { class: "st-stepper__indicator" }, [
+                        props.clickable
+                            ? h("button", {
+                                type: "button",
+                                class: "st-stepper__circle st-stepper__circle--button",
+                                onClick: () => handleClick(index),
+                                "aria-label": step.label,
+                            }, [
+                                state === "complete"
+                                    ? CheckIcon()
+                                    : h("span", { class: "st-stepper__index" }, index + 1),
+                            ])
+                            : h("span", { class: "st-stepper__circle" }, [
+                                state === "complete"
+                                    ? CheckIcon()
+                                    : h("span", { class: "st-stepper__index" }, index + 1),
+                            ]),
+                        !isLast
+                            ? h("span", { class: "st-stepper__connector" })
+                            : null,
+                    ]),
+                    h("span", { class: "st-stepper__text" }, [
+                        h("span", { class: "st-stepper__label" }, step.label),
+                        step.description
+                            ? h("span", { class: "st-stepper__description" }, step.description)
+                            : null,
+                    ]),
+                ]);
+            }));
+        };
+    },
+});
+//# sourceMappingURL=Stepper.js.map

package/dist/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../src/Stepper.ts"],"names":[],"mappings":"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"}

package/dist/Typography.d.ts

@@ -0,0 +1,85 @@
+export type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "body-sm" | "caption" | "overline";
+export type TypographyWeight = "regular" | "medium" | "semibold" | "bold";
+export type TypographyTone = "primary" | "secondary" | "muted" | "inverse" | "link";
+export type TypographyAlign = "start" | "center" | "end" | "justify";
+export type TypographyProps = {
+    variant?: TypographyVariant;
+    /** Surcharge la balise déduite de la variante. */
+    as?: string;
+    weight?: TypographyWeight;
+    tone?: TypographyTone;
+    align?: TypographyAlign;
+    /** Tronque sur une ligne avec ellipsis. */
+    truncate?: boolean;
+    class?: string;
+};
+export declare const Typography: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => TypographyVariant;
+        default: string;
+    };
+    as: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    weight: {
+        type: () => TypographyWeight;
+        default: undefined;
+    };
+    tone: {
+        type: () => TypographyTone;
+        default: undefined;
+    };
+    align: {
+        type: () => TypographyAlign;
+        default: undefined;
+    };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: () => TypographyVariant;
+        default: string;
+    };
+    as: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    weight: {
+        type: () => TypographyWeight;
+        default: undefined;
+    };
+    tone: {
+        type: () => TypographyTone;
+        default: undefined;
+    };
+    align: {
+        type: () => TypographyAlign;
+        default: undefined;
+    };
+    truncate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    tone: TypographyTone;
+    weight: TypographyWeight;
+    variant: TypographyVariant;
+    as: string;
+    align: TypographyAlign;
+    truncate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../src/Typography.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAiBrE,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,UAAU;;cAGQ,MAAM,iBAAiB;;;;;;;;cAExB,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;cACnB,MAAM,eAAe;;;;;;;;;;;;;;;cAJnB,MAAM,iBAAiB;;;;;;;;cAExB,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;cACnB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;4EAmBhD,CAAC"}