@sentropic/design-system-vue 0.2.0 → 0.4.0

package/dist/DisplaySettings.d.ts

@@ -0,0 +1,90 @@
+export type DisplayFontScale = "normal" | "large" | "extra-large";
+export type DisplayContrast = "default" | "high";
+export type DisplayLineSpacing = "normal" | "comfortable";
+export interface DisplaySettingsState {
+    fontScale: DisplayFontScale;
+    contrast: DisplayContrast;
+    lineSpacing: DisplayLineSpacing;
+    reducedMotion: boolean;
+}
+export type DisplaySettingsProps = {
+    title?: string;
+    values?: Partial<DisplaySettingsState>;
+    showFontScale?: boolean;
+    showContrast?: boolean;
+    showLineSpacing?: boolean;
+    showReducedMotion?: boolean;
+    class?: string;
+};
+export declare const DisplaySettings: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    values: {
+        type: () => Partial<DisplaySettingsState>;
+        default: undefined;
+    };
+    showFontScale: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showContrast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLineSpacing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReducedMotion: {
+        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<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    values: {
+        type: () => Partial<DisplaySettingsState>;
+        default: undefined;
+    };
+    showFontScale: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showContrast: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLineSpacing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showReducedMotion: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    values: Partial<DisplaySettingsState>;
+    title: string;
+    showFontScale: boolean;
+    showContrast: boolean;
+    showLineSpacing: boolean;
+    showReducedMotion: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=DisplaySettings.d.ts.map

package/dist/DisplaySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplaySettings.d.ts","sourceRoot":"","sources":["../src/DisplaySettings.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,aAAa,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,eAAe,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AASF,eAAO,MAAM,eAAe;;;;;;cAIE,MAAM,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAnC,MAAM,OAAO,CAAC,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAsG/D,CAAC"}

package/dist/DisplaySettings.js

@@ -0,0 +1,91 @@
+import { defineComponent, h, ref, watch } from "vue";
+import { classNames } from "./classNames.js";
+const DEFAULT_SETTINGS = {
+    fontScale: "normal",
+    contrast: "default",
+    lineSpacing: "normal",
+    reducedMotion: false,
+};
+export const DisplaySettings = defineComponent({
+    name: "DisplaySettings",
+    props: {
+        title: { type: String, default: "Paramètres d’affichage" },
+        values: { type: Object, default: undefined },
+        showFontScale: { type: Boolean, default: true },
+        showContrast: { type: Boolean, default: true },
+        showLineSpacing: { type: Boolean, default: true },
+        showReducedMotion: { type: Boolean, default: true },
+        class: { type: String, default: undefined },
+    },
+    emits: ["change"],
+    setup(props, { emit, attrs }) {
+        const resolve = () => ({
+            fontScale: props.values?.fontScale ?? DEFAULT_SETTINGS.fontScale,
+            contrast: props.values?.contrast ?? DEFAULT_SETTINGS.contrast,
+            lineSpacing: props.values?.lineSpacing ?? DEFAULT_SETTINGS.lineSpacing,
+            reducedMotion: props.values?.reducedMotion ?? DEFAULT_SETTINGS.reducedMotion,
+        });
+        const state = ref(resolve());
+        watch(() => props.values, () => {
+            state.value = { ...state.value, ...resolve() };
+        }, { deep: true });
+        const update = (next) => {
+            state.value = { ...state.value, ...next };
+            emit("change", { ...state.value });
+        };
+        return () => h("div", { ...attrs, class: classNames("st-displaySettings", props.class) }, [
+            h("p", { class: "st-displaySettings__title" }, props.title),
+            h("div", { class: "st-displaySettings__grid" }, [
+                props.showFontScale
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Taille de texte"),
+                        h("select", {
+                            value: state.value.fontScale,
+                            onChange: (event) => update({ fontScale: event.target.value }),
+                        }, [
+                            h("option", { value: "normal" }, "Normale"),
+                            h("option", { value: "large" }, "Grande"),
+                            h("option", { value: "extra-large" }, "Très grande"),
+                        ]),
+                    ])
+                    : null,
+                props.showContrast
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Contraste"),
+                        h("select", {
+                            value: state.value.contrast,
+                            onChange: (event) => update({ contrast: event.target.value }),
+                        }, [
+                            h("option", { value: "default" }, "Standard"),
+                            h("option", { value: "high" }, "Élevé"),
+                        ]),
+                    ])
+                    : null,
+                props.showLineSpacing
+                    ? h("label", { class: "st-displaySettings__field" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Interligne"),
+                        h("select", {
+                            value: state.value.lineSpacing,
+                            onChange: (event) => update({ lineSpacing: event.target.value }),
+                        }, [
+                            h("option", { value: "normal" }, "Normal"),
+                            h("option", { value: "comfortable" }, "Confortable"),
+                        ]),
+                    ])
+                    : null,
+                props.showReducedMotion
+                    ? h("label", { class: "st-displaySettings__field st-displaySettings__field--switch" }, [
+                        h("span", { class: "st-displaySettings__label" }, "Animations (réduction)"),
+                        h("input", {
+                            type: "checkbox",
+                            role: "switch",
+                            checked: state.value.reducedMotion,
+                            onChange: (event) => update({ reducedMotion: event.target.checked }),
+                        }),
+                    ])
+                    : null,
+            ]),
+        ]);
+    },
+});
+//# sourceMappingURL=DisplaySettings.js.map

package/dist/DisplaySettings.js.map

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

package/dist/DonutChart.d.ts

@@ -1,16 +1,15 @@
+export type DonutChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
 export type DonutChartDatum = {
-    label?: string;
-    x?: string | number;
-    y?: number;
-    value?: number;
-    tone?: string;
+    label: string;
+    value: number;
+    tone?: DonutChartTone;
 };
-export type DonutChartTone = string;
 export type DonutChartProps = {
     data: DonutChartDatum[];
-    label?: string;
-    width?: number;
-    height?: number;
+    size?: number;
+    thickness?: number;
+    centerLabel?: string | null;
+    label: string;
     class?: string;
 };
 export declare const DonutChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -18,18 +17,22 @@ export declare const DonutChart: import("vue").DefineComponent<import("vue").Ext
         type: () => DonutChartDatum[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    width: {
+    size: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
-    height: {
+    thickness: {
         type: NumberConstructor;
+        default: number;
+    };
+    centerLabel: {
+        type: () => string | null;
         default: undefined;
     };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -41,26 +44,30 @@ export declare const DonutChart: import("vue").DefineComponent<import("vue").Ext
         type: () => DonutChartDatum[];
         required: true;
     };
-    label: {
-        type: StringConstructor;
-        default: string;
-    };
-    width: {
+    size: {
         type: NumberConstructor;
-        default: undefined;
+        default: number;
     };
-    height: {
+    thickness: {
         type: NumberConstructor;
+        default: number;
+    };
+    centerLabel: {
+        type: () => string | null;
         default: undefined;
     };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Readonly<{}>, {
     class: string;
-    label: string;
-    width: number;
-    height: number;
+    size: number;
+    thickness: number;
+    centerLabel: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=DonutChart.d.ts.map

package/dist/DonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../src/DonutChart.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACjH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,UAAU;;cAGI,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;cAAvB,MAAM,eAAe,EAAE;;;;;;;;;;;;;;;;;;;;;;;;4EAwChD,CAAC"}
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../src/DonutChart.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,UAAU;;cAGI,MAAM,eAAe,EAAE;;;;;;;;;;;;cAGI,MAAM,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;cAH9C,MAAM,eAAe,EAAE;;;;;;;;;;;;cAGI,MAAM,MAAM,GAAG,IAAI;;;;;;;;;;;;;;;;4EA6HvE,CAAC"}

package/dist/DonutChart.js

@@ -1,40 +1,118 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
 import { classNames } from "./classNames.js";
-const DATA_TONES = [
-    "category1", "category2", "category3", "category4",
-    "category5", "category6", "category7", "category8",
+import { chartDataList } from "./chartScale.js";
+const TONES = [
+    "category1",
+    "category2",
+    "category3",
+    "category4",
+    "category5",
+    "category6",
+    "category7",
+    "category8",
 ];
+const fmtPct = (p) => `${p.toFixed(p < 10 ? 1 : 0)}%`;
 export const DonutChart = defineComponent({
     name: "DonutChart",
     props: {
         data: { type: Array, required: true },
-        label: { type: String, default: "Donut chart" },
-        width: { type: Number, default: undefined },
-        height: { type: Number, default: undefined },
+        size: { type: Number, default: 220 },
+        thickness: { type: Number, default: 34 },
+        centerLabel: { type: [String, null], default: undefined },
+        label: { type: String, required: true },
         class: { type: String, default: undefined },
     },
     setup(props, { attrs }) {
+        const hoveredIndex = ref(null);
+        function handleLeave() {
+            hoveredIndex.value = null;
+        }
+        function handleVisualPointerMove(event) {
+            const target = event.target;
+            if (!(target instanceof Element)) {
+                hoveredIndex.value = null;
+                return;
+            }
+            const index = Number(target.getAttribute("data-chart-index"));
+            hoveredIndex.value = Number.isInteger(index) ? index : null;
+        }
         return () => {
-            const label = props.label ?? "Donut chart";
-            const total = props.data.reduce((sum, datum) => sum + (datum.value ?? datum.y ?? 0), 0);
-            return h("figure", {
-                ...attrs,
-                class: classNames("st-donutChart", props.class),
-                "aria-label": label,
-            }, [
-                h("span", { class: "st-visually-hidden" }, label),
-                h("svg", { viewBox: "0 0 120 120", "aria-hidden": "true" }, [
-                    ...props.data.map((datum, index) => h("circle", {
-                        key: index,
-                        class: classNames("st-donutChart__slice", `st-donutChart__slice--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`),
-                        cx: "60",
-                        cy: "60",
-                        r: 36 - index * 3,
-                        fill: "none",
-                        "stroke-width": "8",
-                    })),
-                    h("text", { class: "st-donutChart__center", x: "60", y: "64", "text-anchor": "middle" }, String(total)),
+            const size = props.size ?? 220;
+            const thickness = props.thickness ?? 34;
+            const centerLabel = props.centerLabel;
+            const label = props.label;
+            const data = props.data;
+            const total = data.reduce((sum, d) => sum + Math.max(d.value, 0), 0);
+            let items = [];
+            if (total > 0) {
+                const cx = size / 2;
+                const cy = size / 2;
+                const rOuter = size / 2 - 2;
+                const rInner = Math.max(rOuter - thickness, 1);
+                const TWO_PI = Math.PI * 2;
+                let angle = -Math.PI / 2;
+                const polar = (r, a) => [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+                items = data.map((d, i) => {
+                    const frac = Math.max(d.value, 0) / total;
+                    const span = Math.min(frac * TWO_PI, TWO_PI - 0.0001);
+                    const a0 = angle;
+                    const a1 = angle + span;
+                    angle = a1;
+                    const large = span > Math.PI ? 1 : 0;
+                    const [x0o, y0o] = polar(rOuter, a0);
+                    const [x1o, y1o] = polar(rOuter, a1);
+                    const [x1i, y1i] = polar(rInner, a1);
+                    const [x0i, y0i] = polar(rInner, a0);
+                    const path = `M ${x0o} ${y0o} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${rInner} ${rInner} 0 ${large} 0 ${x0i} ${y0i} Z`;
+                    return { d, path, tone: d.tone ?? TONES[i % TONES.length], pct: frac * 100 };
+                });
+            }
+            const dataValueItems = items.map((slice) => `${slice.d.label}: ${slice.d.value} (${fmtPct(slice.pct)})`);
+            const svgChildren = [];
+            if (total > 0) {
+                for (let i = 0; i < items.length; i++) {
+                    const slice = items[i];
+                    svgChildren.push(h("path", {
+                        key: slice.d.label,
+                        class: classNames("st-donutChart__slice", `st-donutChart__slice--${slice.tone}`, hoveredIndex.value !== null && hoveredIndex.value !== i && "st-donutChart__slice--dim"),
+                        d: slice.path,
+                        "data-chart-index": i,
+                    }));
+                }
+                if (centerLabel !== null) {
+                    svgChildren.push(h("text", {
+                        class: "st-donutChart__center",
+                        x: size / 2,
+                        y: size / 2,
+                        "text-anchor": "middle",
+                        "dominant-baseline": "central",
+                    }, String(centerLabel ?? total)));
+                }
+            }
+            const hovered = hoveredIndex.value !== null ? items[hoveredIndex.value] : undefined;
+            return h("div", { ...attrs, class: classNames("st-donutChart", props.class) }, [
+                h("div", {
+                    class: "st-donutChart__visual",
+                    role: "img",
+                    "aria-label": label,
+                    onPointermove: handleVisualPointerMove,
+                    onPointerleave: handleLeave,
+                }, [
+                    h("svg", {
+                        viewBox: `0 0 ${size} ${size}`,
+                        width: "100%",
+                        height: "100%",
+                        focusable: "false",
+                        "aria-hidden": "true",
+                    }, svgChildren),
                 ]),
+                chartDataList(label, dataValueItems),
+                hovered
+                    ? h("div", { class: "st-donutChart__tooltip", role: "presentation" }, [
+                        h("span", { class: "st-donutChart__tooltipLabel" }, hovered.d.label),
+                        h("span", { class: "st-donutChart__tooltipValue" }, `${hovered.d.value} · ${fmtPct(hovered.pct)}`),
+                    ])
+                    : null,
             ]);
         };
     },

package/dist/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sourceRoot":"","sources":["../src/DonutChart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAa7C,MAAM,UAAU,GAAG;IACjB,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;IAClD,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,IAAI,EAAE,YAAY;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAgC,EAAE,QAAQ,EAAE,IAAI,EAAE;QAChE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE;QAC/C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,aAAa,CAAC;YAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACxF,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC;gBAC/C,YAAY,EAAE,KAAK;aACpB,EACD;gBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,KAAK,CAAC;gBACjD,CAAC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE;oBAC1D,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACjC,CAAC,CAAC,QAAQ,EAAE;wBACV,GAAG,EAAE,KAAK;wBACV,KAAK,EAAE,UAAU,CACf,sBAAsB,EACtB,yBAAyB,KAAK,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,EAAE,CAC/E;wBACD,EAAE,EAAE,IAAI;wBACR,EAAE,EAAE,IAAI;wBACR,CAAC,EAAE,EAAE,GAAG,KAAK,GAAG,CAAC;wBACjB,IAAI,EAAE,MAAM;wBACZ,cAAc,EAAE,GAAG;qBACpB,CAAC,CACH;oBACD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,uBAAuB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC;iBACxG,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"DonutChart.js","sourceRoot":"","sources":["../src/DonutChart.ts"],"names":[],"mappings":"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"}

package/dist/Drawer.d.ts

@@ -53,9 +53,9 @@ export declare const Drawer: import("vue").DefineComponent<import("vue").Extract
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
+    open: boolean;
     class: string;
     title: string;
-    open: boolean;
     description: string;
     placement: DrawerPlacement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/Dropdown.d.ts

@@ -9,6 +9,7 @@ export type DropdownProps = {
     value?: string;
     open?: boolean;
     placeholder?: string;
+    onSelect?: (value: string) => void;
     class?: string;
 };
 export declare const Dropdown: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -32,6 +33,10 @@ export declare const Dropdown: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    onSelect: {
+        type: () => (value: string) => void;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -59,6 +64,10 @@ export declare const Dropdown: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
+    onSelect: {
+        type: () => (value: string) => void;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -67,10 +76,11 @@ export declare const Dropdown: import("vue").DefineComponent<import("vue").Extra
     onSelect?: ((...args: any[]) => any) | undefined;
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }>, {
+    open: boolean;
     class: string;
     label: string;
+    onSelect: (value: string) => void;
     value: string;
     placeholder: string;
-    open: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;cAIS,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAtB,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAiGlD,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;cAIS,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;cAIP,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;cAJ5C,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;cAIP,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;sBAAf,MAAM,KAAK,IAAI;;;4EA8FxE,CAAC"}

package/dist/Dropdown.js

@@ -8,6 +8,7 @@ export const Dropdown = defineComponent({
         value: { type: String, default: undefined },
         open: { type: Boolean, default: undefined },
         placeholder: { type: String, default: "Select" },
+        onSelect: { type: Function, default: undefined },
         class: { type: String, default: undefined },
     },
     emits: ["select", "update:open"],

package/dist/Dropdown.js.map

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

package/dist/FileUploader.d.ts

@@ -1,8 +1,17 @@
 export type FileUploadStatus = "idle" | "uploading" | "complete" | "error";
+/**
+ * Accepts both the flat React/Vue shape (`{ name, size }`) and the Svelte
+ * canonical shape (`{ file: { name, size } }`). When `file` is present it takes
+ * precedence so a consumer can pass the exact same item array used in Svelte.
+ */
 export type FileUploadItem = {
     id?: string;
-    name: string;
+    name?: string;
     size?: number;
+    file?: {
+        name: string;
+        size?: number;
+    };
     status?: FileUploadStatus;
     error?: string;
 };

package/dist/FileUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;cAIG,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;cAAtB,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;4EAgEhD,CAAC"}
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../src/FileUploader.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE3E;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;cAIG,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;cAAtB,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;4EAyEhD,CAAC"}

package/dist/FileUploader.js

@@ -1,5 +1,22 @@
 import { defineComponent, h } from "vue";
 import { classNames } from "./classNames.js";
+function formatFileSize(bytes) {
+    if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0)
+        return "";
+    if (bytes === 0)
+        return "0 B";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / Math.pow(1024, i);
+    const formatted = value >= 10 || i === 0 ? value.toFixed(0) : value.toFixed(1);
+    return `${formatted} ${units[i]}`;
+}
+function fileItemName(item) {
+    return item.file?.name ?? item.name;
+}
+function fileItemSize(item) {
+    return item.file?.size ?? item.size;
+}
 export const FileUploader = defineComponent({
     name: "FileUploader",
     props: {
@@ -24,15 +41,22 @@ export const FileUploader = defineComponent({
                     "aria-label": props.label,
                 }),
             ]),
-            h("ul", { class: "st-fileUploader__list" }, props.items.map((item, index) => h("li", {
-                key: item.id ?? item.name ?? index,
-                class: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`),
-            }, [
-                h("span", { class: "st-fileUploader__itemName st-fileUploader__name" }, item.name),
-                item.error
-                    ? h("span", { class: "st-fileUploader__itemError" }, item.error)
-                    : null,
-            ]))),
+            h("ul", { class: "st-fileUploader__list" }, props.items.map((item, index) => {
+                const name = fileItemName(item);
+                const sizeLabel = formatFileSize(fileItemSize(item));
+                return h("li", {
+                    key: item.id ?? name ?? index,
+                    class: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`),
+                }, [
+                    h("span", { class: "st-fileUploader__itemName st-fileUploader__name" }, name),
+                    sizeLabel
+                        ? h("span", { class: "st-fileUploader__itemSize" }, sizeLabel)
+                        : null,
+                    item.error
+                        ? h("span", { class: "st-fileUploader__itemError" }, item.error)
+                        : null,
+                ]);
+            })),
         ]);
     },
 });