@sentropic/design-system-vue 0.10.0 → 0.12.0

package/dist/KpiCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiCard.d.ts","sourceRoot":"","sources":["../src/KpiCard.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,UAAU,CAAC;AACxD,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,OAAO;;cAG8B,MAAM,MAAM,GAAG,MAAM;;;;;;;;;;;;cAGpC,MAAM,kBAAkB;;;;cAC9B,MAAM,YAAY;;;;cACjB,MAAM,aAAa;;;;;;;;;;;;;;;;cAIjB,MAAM,MAAM,EAAE;;;;cAClB,MAAM,WAAW;;;;cACjB,MAAM,WAAW;;;;;;;;;;;cAXK,MAAM,MAAM,GAAG,MAAM;;;;;;;;;;;;cAGpC,MAAM,kBAAkB;;;;cAC9B,MAAM,YAAY;;;;cACjB,MAAM,aAAa;;;;;;;;;;;;;;;;cAIjB,MAAM,MAAM,EAAE;;;;cAClB,MAAM,WAAW;;;;cACjB,MAAM,WAAW;;;;;;;;;;;;;;;;;;;4EAyK3C,CAAC"}

package/dist/KpiCard.js

@@ -0,0 +1,155 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+import { Sparkline } from "./Sparkline.js";
+export const KpiCard = defineComponent({
+    name: "KpiCard",
+    props: {
+        value: { type: [Number, String], required: true },
+        label: { type: String, required: true },
+        delta: { type: Number, default: undefined },
+        deltaFormat: { type: String, default: "percent" },
+        trend: { type: String, default: undefined },
+        format: { type: String, default: "number" },
+        unit: { type: String, default: undefined },
+        currency: { type: String, default: "EUR" },
+        locale: { type: String, default: undefined },
+        sparkline: { type: Array, default: undefined },
+        size: { type: String, default: "md" },
+        tone: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const value = props.value;
+            const label = props.label;
+            const delta = props.delta;
+            const deltaFormat = props.deltaFormat ?? "percent";
+            const format = props.format ?? "number";
+            const unit = props.unit;
+            const currency = props.currency ?? "EUR";
+            const locale = props.locale;
+            const sparkline = props.sparkline;
+            const size = props.size ?? "md";
+            const tone = props.tone;
+            const resolvedTrend = props.trend ?? (delta == null ? undefined : delta > 0 ? "up" : delta < 0 ? "down" : "flat");
+            let formattedValue;
+            if (typeof value === "string") {
+                formattedValue = value;
+            }
+            else if (!Number.isFinite(value)) {
+                // Jamais de « NaN »/« ∞ » dans le DOM ni l'aria.
+                formattedValue = "—";
+            }
+            else if (format === "currency") {
+                // Un code devise invalide fait lever Intl ; on retombe sur le nombre brut.
+                try {
+                    formattedValue = new Intl.NumberFormat(locale, { style: "currency", currency }).format(value);
+                }
+                catch {
+                    formattedValue = new Intl.NumberFormat(locale).format(value);
+                }
+            }
+            else if (format === "percent") {
+                formattedValue = new Intl.NumberFormat(locale, {
+                    style: "percent",
+                    maximumFractionDigits: 2,
+                }).format(value);
+            }
+            else {
+                formattedValue = new Intl.NumberFormat(locale).format(value);
+            }
+            let formattedDelta;
+            if (delta != null && Number.isFinite(delta)) {
+                const sign = delta > 0 ? "+" : "";
+                if (deltaFormat === "percent") {
+                    const pct = new Intl.NumberFormat(locale, {
+                        style: "percent",
+                        maximumFractionDigits: 1,
+                    }).format(delta);
+                    formattedDelta = `${sign}${pct}`;
+                }
+                else {
+                    formattedDelta = `${sign}${new Intl.NumberFormat(locale).format(delta)}`;
+                }
+            }
+            const sparklineTone = resolvedTrend === "up" ? "success" : resolvedTrend === "down" ? "error" : "neutral";
+            const arrow = resolvedTrend === "up"
+                ? "M3 8.5 7 4l4 4.5"
+                : resolvedTrend === "down"
+                    ? "M3 5.5 7 10l4-4.5"
+                    : "M3 7h8";
+            const trendLabel = resolvedTrend === "up"
+                ? "en hausse"
+                : resolvedTrend === "down"
+                    ? "en baisse"
+                    : resolvedTrend === "flat"
+                        ? "stable"
+                        : undefined;
+            // L'unité est redondante quand le format est déjà autosuffisant.
+            const ariaUnit = format === "currency" || format === "percent" ? undefined : unit;
+            const ariaLabel = [
+                label,
+                formattedValue,
+                ariaUnit,
+                formattedDelta && `${formattedDelta} ${trendLabel ?? ""}`.trim(),
+            ]
+                .filter(Boolean)
+                .join(", ");
+            const classes = classNames("st-kpiCard", `st-kpiCard--${size}`, tone && `st-kpiCard--${tone}`, tone && "st-kpiCard--toned", props.class);
+            const valueChildren = [
+                h("span", { class: "st-kpiCard__number" }, formattedValue),
+            ];
+            if (unit) {
+                valueChildren.push(h("span", { class: "st-kpiCard__unit" }, unit));
+            }
+            const footerChildren = [];
+            if (formattedDelta) {
+                footerChildren.push(h("span", {
+                    class: `st-kpiCard__delta st-kpiCard__delta--${resolvedTrend ?? "flat"}`,
+                    "aria-hidden": "true",
+                }, [
+                    h("svg", {
+                        class: "st-kpiCard__arrow",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 14 14",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                    }, [
+                        h("path", {
+                            d: arrow,
+                            fill: "none",
+                            stroke: "currentColor",
+                            "stroke-width": "1.75",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round",
+                        }),
+                    ]),
+                    h("span", { class: "st-kpiCard__deltaValue" }, formattedDelta),
+                ]));
+            }
+            if (sparkline && sparkline.length > 0) {
+                footerChildren.push(h(Sparkline, {
+                    class: "st-kpiCard__sparkline",
+                    data: sparkline,
+                    tone: sparklineTone,
+                    area: true,
+                }));
+            }
+            const labelChildren = [];
+            if (tone) {
+                labelChildren.push(h("span", { class: "st-kpiCard__swatch", "aria-hidden": "true" }));
+            }
+            labelChildren.push(h("span", { class: "st-kpiCard__labelText" }, label));
+            const children = [
+                h("p", { class: "st-kpiCard__label" }, labelChildren),
+                h("p", { class: "st-kpiCard__value" }, valueChildren),
+            ];
+            if (formattedDelta || sparkline) {
+                children.push(h("div", { class: "st-kpiCard__footer" }, footerChildren));
+            }
+            return h("article", { ...attrs, class: classes, role: "group", "aria-label": ariaLabel }, children);
+        };
+    },
+});
+//# sourceMappingURL=KpiCard.js.map

package/dist/KpiCard.js.map

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

package/dist/SelectableList.d.ts

@@ -0,0 +1,98 @@
+import { type PropType } from "vue";
+export type SelectableListProps = {
+    /** Accessible name for the listbox (required for SR users). */
+    label?: string;
+    /** References the id of an external visible label (alternative to `label`). */
+    labelledby?: string;
+    /**
+     * Allow more than one selected row. Adds aria-multiselectable and toggles
+     * each row independently. Defaults to false (single-select).
+     */
+    multiple?: boolean;
+    /**
+     * Selected value(s). Controlled when provided. For single-select pass a
+     * string (or null); for multiple pass a string[]. When omitted the list is
+     * uncontrolled and keeps its own internal selection.
+     */
+    value?: string | string[] | null;
+    /**
+     * Fired with the new selection on every change. Receives a string|null for
+     * single-select and a string[] for multiple. Required for the controlled
+     * pattern; also fires for uncontrolled lists.
+     */
+    onChange?: (value: string | string[] | null) => void;
+    class?: string;
+};
+/**
+ * Accessible listbox that owns selection + a roving tabindex for its
+ * {@link SelectableRow} children. Arrow / Home / End move focus (roving),
+ * Space / Enter / click toggle the focused row. Single-select by default;
+ * `multiple` toggles rows independently. Controlled via `value`/`onChange`,
+ * otherwise it keeps its own internal selection. Pilots each child row through
+ * provide/inject (role="option" + the computed tabindex / aria-selected).
+ */
+export declare const SelectableList: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    labelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string | string[] | null>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string | string[] | null) => void>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: string | string[] | null) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    labelledby: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: PropType<string | string[] | null>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string | string[] | null) => void>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onChange?: ((_value: string | string[] | null) => any) | undefined;
+}>, {
+    multiple: boolean;
+    class: string;
+    onChange: (value: string | string[] | null) => void;
+    label: string;
+    value: string | string[] | null;
+    labelledby: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=SelectableList.d.ts.map

package/dist/SelectableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableList.d.ts","sourceRoot":"","sources":["../src/SelectableList.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AAOb,MAAM,MAAM,mBAAmB,GAAG;IAChC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAkBF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;cASI,QAAQ,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;;;;cAIzC,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;;;;;;;;;;qBAMtD,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;;;;;;;;;;;;;;;cAVd,QAAQ,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,CAAC;;;;cAIzC,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;;;;;;;;;;;;sBAAlC,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI;;;;4EA+IxE,CAAC"}

package/dist/SelectableList.js

@@ -0,0 +1,174 @@
+import { computed, defineComponent, h, provide, ref, } from "vue";
+import { classNames } from "./classNames.js";
+import { SELECTABLE_LIST_KEY, } from "./SelectableRow.js";
+function toSet(v) {
+    if (v == null)
+        return new Set();
+    return new Set(Array.isArray(v) ? v : [v]);
+}
+function sortByDom(list) {
+    return [...list].sort((a, b) => {
+        const pos = a.el.compareDocumentPosition(b.el);
+        if (pos & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        if (pos & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+/**
+ * Accessible listbox that owns selection + a roving tabindex for its
+ * {@link SelectableRow} children. Arrow / Home / End move focus (roving),
+ * Space / Enter / click toggle the focused row. Single-select by default;
+ * `multiple` toggles rows independently. Controlled via `value`/`onChange`,
+ * otherwise it keeps its own internal selection. Pilots each child row through
+ * provide/inject (role="option" + the computed tabindex / aria-selected).
+ */
+export const SelectableList = defineComponent({
+    name: "SelectableList",
+    props: {
+        label: { type: String, default: undefined },
+        labelledby: { type: String, default: undefined },
+        multiple: { type: Boolean, default: false },
+        value: {
+            // Vue skips type validation for null/undefined values, so [String, Array]
+            // accepts a string, a string[], or null/undefined (uncontrolled).
+            type: [String, Array],
+            default: undefined,
+        },
+        onChange: {
+            type: Function,
+            default: undefined,
+        },
+        class: { type: String, default: undefined },
+    },
+    emits: {
+        change: (_value) => true,
+    },
+    setup(props, { slots, attrs, emit }) {
+        // Controlled when the consumer passes `value` (including null).
+        const controlled = computed(() => props.value !== undefined);
+        // Internal selection for the uncontrolled case.
+        const internal = ref(new Set());
+        const selectedValues = computed(() => controlled.value ? toSet(props.value) : internal.value);
+        // Row registry, ordered by DOM position so arrow nav matches the visual
+        // order regardless of registration timing.
+        const entries = ref([]);
+        // The element holding the roving tab stop (tabindex 0). Null until a row is
+        // focused; until then the FIRST registered row is the default stop.
+        const tabStopEl = ref(null);
+        // Bumped on every selection / focus / registry change so child rows (which
+        // read `version`) re-render and recompute role / tabindex / aria-selected.
+        const version = ref(0);
+        function bump() {
+            version.value++;
+        }
+        function register(el, rowValue) {
+            entries.value = sortByDom([
+                ...entries.value.filter((e) => e.el !== el),
+                { el, value: rowValue },
+            ]);
+            bump();
+            return () => {
+                entries.value = entries.value.filter((e) => e.el !== el);
+                if (tabStopEl.value === el)
+                    tabStopEl.value = null;
+                bump();
+            };
+        }
+        // Default roving stop = first registered (DOM-ordered) row when none focused.
+        const effectiveTabStop = computed(() => tabStopEl.value ?? entries.value[0]?.el ?? null);
+        function valueOf(el) {
+            return entries.value.find((e) => e.el === el)?.value;
+        }
+        function isSelected(el) {
+            const v = valueOf(el);
+            return v !== undefined && selectedValues.value.has(v);
+        }
+        function isTabStop(el) {
+            return el === effectiveTabStop.value;
+        }
+        function fireChange(value) {
+            // `emit("change")` invokes the `onChange` prop/listener exactly once.
+            emit("change", value);
+        }
+        function emitNext(next) {
+            if (!controlled.value)
+                internal.value = next;
+            if (props.multiple)
+                fireChange([...next]);
+            else
+                fireChange(next.size ? [...next][0] : null);
+            bump();
+        }
+        function activate(el) {
+            const v = valueOf(el);
+            if (v === undefined)
+                return;
+            const current = selectedValues.value;
+            let next;
+            if (props.multiple) {
+                next = new Set(current);
+                if (next.has(v))
+                    next.delete(v);
+                else
+                    next.add(v);
+            }
+            else {
+                // Single-select toggles off when re-activating the selected row.
+                next = current.has(v) && current.size === 1 ? new Set() : new Set([v]);
+            }
+            emitNext(next);
+        }
+        function focusRow(el) {
+            tabStopEl.value = el;
+            bump();
+        }
+        function navigate(el, key) {
+            const list = entries.value;
+            if (list.length === 0)
+                return;
+            const idx = list.findIndex((e) => e.el === el);
+            if (idx === -1)
+                return;
+            let targetIdx = idx;
+            if (key === "ArrowDown" || key === "ArrowRight")
+                targetIdx = idx + 1;
+            else if (key === "ArrowUp" || key === "ArrowLeft")
+                targetIdx = idx - 1;
+            else if (key === "Home")
+                targetIdx = 0;
+            else if (key === "End")
+                targetIdx = list.length - 1;
+            // Clamp (no wrap) so Home/End and arrows stay within bounds.
+            targetIdx = Math.max(0, Math.min(list.length - 1, targetIdx));
+            const target = list[targetIdx]?.el;
+            if (target) {
+                tabStopEl.value = target;
+                target.focus();
+                bump();
+            }
+        }
+        const context = {
+            version,
+            managed: true,
+            itemRole: "option",
+            register,
+            isSelected,
+            isTabStop,
+            activate,
+            focusRow,
+            navigate,
+        };
+        provide(SELECTABLE_LIST_KEY, context);
+        return () => h("div", {
+            ...attrs,
+            class: classNames("st-selectableList", props.class),
+            role: "listbox",
+            "aria-label": props.labelledby ? undefined : props.label,
+            "aria-labelledby": props.labelledby,
+            "aria-multiselectable": props.multiple ? "true" : undefined,
+        }, slots.default?.());
+    },
+});
+//# sourceMappingURL=SelectableList.js.map

package/dist/SelectableList.js.map

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

package/dist/SelectableRow.d.ts

@@ -0,0 +1,140 @@
+import { type InjectionKey, type PropType, type VNode } from "vue";
+/**
+ * Shared context contract between {@link SelectableList} and its slotted
+ * {@link SelectableRow} children. The list owns selection + the roving tabindex
+ * and exposes the getters/callbacks the rows read to derive their own `role` /
+ * `tabindex` / `aria-selected`. When a row is used STANDALONE (no provider)
+ * `inject` returns undefined and the row falls back to its own state.
+ */
+export type SelectableListContext = {
+    /** Reactive bump incremented on every selection / focus / registry change. */
+    version: {
+        value: number;
+    };
+    /** True when the list manages selection/roving for its rows. */
+    readonly managed: true;
+    /** listbox role for the wrapper → rows are "option". */
+    readonly itemRole: "option";
+    /** Register a row element; returns an unregister callback. */
+    register: (el: HTMLElement, value: string | undefined) => () => void;
+    /** Is the row with this element currently selected? */
+    isSelected: (el: HTMLElement) => boolean;
+    /** Should the row with this element be the roving-tabindex stop (tabindex 0)? */
+    isTabStop: (el: HTMLElement) => boolean;
+    /** Row was activated (click / Space / Enter). The list toggles selection. */
+    activate: (el: HTMLElement) => void;
+    /** Row received focus → becomes the roving tab stop. */
+    focusRow: (el: HTMLElement) => void;
+    /** Arrow / Home / End navigation from a row. */
+    navigate: (el: HTMLElement, key: string) => void;
+};
+export declare const SELECTABLE_LIST_KEY: InjectionKey<SelectableListContext>;
+export type SelectableRowProps = {
+    /**
+     * Selected state. Honoured when the row is used STANDALONE; inside a
+     * {@link SelectableList} the list is the source of truth, so this prop is
+     * ignored for managed rows.
+     */
+    selected?: boolean;
+    /** Notified on every toggle with the new selected state (standalone rows). */
+    onSelect?: (selected: boolean) => void;
+    /** Non-interactive when true. */
+    disabled?: boolean;
+    /** Stable value, surfaced as `data-value` and used by the list for `value`. */
+    value?: string;
+    /**
+     * ARIA role for the standalone row. Defaults to "option" so a lone row still
+     * reads as a selectable item. Inside a list the role is forced to "option".
+     */
+    role?: string;
+    /**
+     * Opt-in left accent bar on the selected state. Off by default so the
+     * selected item is a calm tinted surface + accented text (two signals only).
+     */
+    accentBar?: boolean;
+    class?: string;
+};
+/**
+ * Compact, full-width selectable list/rail row. By DEFAULT the selected state
+ * is two calm signals — a tinted surface + accented text — deliberately NOT the
+ * off-theme "boudin box" it replaces, and NOT a reflow-causing font-weight
+ * bump. The fine left accent bar is OPT-IN via the `accentBar` prop. Focus is an
+ * EXTERNAL offset outline. role="option" + aria-selected, keyboard-activatable
+ * (Enter / Space), inert when disabled. Inside a {@link SelectableList} the list
+ * (via provide/inject) owns selection and the roving tabindex.
+ * Slots: default (content), leading (icon / avatar), trailing (meta / icon).
+ */
+export declare const SelectableRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onSelect: {
+        type: PropType<(selected: boolean) => void>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    accentBar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (_selected: boolean) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    selected: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onSelect: {
+        type: PropType<(selected: boolean) => void>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    role: {
+        type: StringConstructor;
+        default: string;
+    };
+    accentBar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSelect?: ((_selected: boolean) => any) | undefined;
+}>, {
+    class: string;
+    onSelect: (selected: boolean) => void;
+    disabled: boolean;
+    role: string;
+    value: string;
+    selected: boolean;
+    accentBar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=SelectableRow.d.ts.map

package/dist/SelectableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableRow.d.ts","sourceRoot":"","sources":["../src/SelectableRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,YAAY,EACjB,KAAK,QAAQ,EACb,KAAK,KAAK,EACX,MAAM,KAAK,CAAC;AAGb;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,8EAA8E;IAC9E,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,IAAI,CAAC;IACrE,uDAAuD;IACvD,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACzC,iFAAiF;IACjF,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,gDAAgD;IAChD,QAAQ,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAAY,CAAC,qBAAqB,CAEnE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa;;;;;;cAKF,QAAQ,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;wBAUrC,OAAO;;;;;;;cAVP,QAAQ,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAAjB,OAAO,KAAK,IAAI;;;;;;4EAiI1D,CAAC"}