@sentropic/design-system-vue 0.1.0

package/dist/Menu.d.ts

@@ -0,0 +1,68 @@
+export type MenuActionItem = {
+    id?: string;
+    label: unknown;
+    disabled?: boolean;
+    variant?: "default" | "danger";
+    onClick?: () => void;
+};
+export type MenuDividerItem = {
+    type: "divider";
+    id?: string;
+};
+export type MenuGroupItem = {
+    type: "group";
+    id?: string;
+    label: unknown;
+    items: MenuActionItem[];
+};
+export type MenuItem = MenuActionItem | MenuDividerItem | MenuGroupItem;
+export type MenuProps = {
+    items: MenuItem[];
+    dense?: boolean;
+    role?: string;
+    class?: string;
+};
+export declare const Menu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => MenuItem[];
+        required: true;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    role: {
+        type: StringConstructor;
+        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, "select"[], "select", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => MenuItem[];
+        required: true;
+    };
+    dense: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    role: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onSelect?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    role: string;
+    dense: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../src/Menu.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB,CAAC;AACF,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,eAAe,GAAG,aAAa,CAAC;AASxE,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAOF,eAAO,MAAM,IAAI;;cAGW,MAAM,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;cAAhB,MAAM,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;4EAmG1C,CAAC"}

package/dist/Menu.js

@@ -0,0 +1,95 @@
+import { defineComponent, h, ref } from "vue";
+import { classNames } from "./classNames.js";
+function isDivider(item) {
+    return "type" in item && item.type === "divider";
+}
+function isGroup(item) {
+    return "type" in item && item.type === "group";
+}
+function moveIndex(index, max, delta) {
+    if (max <= 0)
+        return -1;
+    return (index + delta + max) % max;
+}
+export const Menu = defineComponent({
+    name: "Menu",
+    props: {
+        items: { type: Array, required: true },
+        dense: { type: Boolean, default: false },
+        role: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    emits: ["select"],
+    setup(props, { emit, attrs }) {
+        const rootRef = ref(null);
+        const handleItemKeyDown = (event, item) => {
+            const root = rootRef.value;
+            const focusable = Array.from(root?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []);
+            const currentIndex = focusable.indexOf(event.currentTarget);
+            const focusAt = (index) => focusable[index]?.focus();
+            if (event.key === "ArrowDown") {
+                event.preventDefault();
+                focusAt(moveIndex(currentIndex, focusable.length, 1));
+            }
+            else if (event.key === "ArrowUp") {
+                event.preventDefault();
+                focusAt(moveIndex(currentIndex < 0 ? focusable.length : currentIndex, focusable.length, -1));
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                focusAt(0);
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                focusAt(focusable.length - 1);
+            }
+            else if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                if (!item.disabled)
+                    emit("select", item);
+            }
+        };
+        return () => {
+            const children = props.items.map((item, index) => {
+                if (isDivider(item)) {
+                    return h("div", {
+                        key: item.id ?? index,
+                        class: "st-menu__divider",
+                        role: "separator",
+                    });
+                }
+                if (isGroup(item)) {
+                    return h("section", { key: item.id ?? index, class: "st-menu__group" }, [
+                        h("h3", {}, item.label),
+                        ...item.items.map((child) => h("button", {
+                            key: child.id ?? String(child.label),
+                            type: "button",
+                            role: "menuitem",
+                            class: "st-menu__item",
+                            disabled: child.disabled,
+                            onClick: () => emit("select", child),
+                            onKeydown: (event) => handleItemKeyDown(event, child),
+                        }, h("span", { class: "st-menu__itemLabel" }, child.label))),
+                    ]);
+                }
+                const actionItem = item;
+                return h("button", {
+                    key: actionItem.id ?? String(actionItem.label) ?? index,
+                    type: "button",
+                    role: "menuitem",
+                    disabled: actionItem.disabled,
+                    class: classNames("st-menu__item", actionItem.variant === "danger" && "st-menu__item--danger"),
+                    onClick: () => emit("select", actionItem),
+                    onKeydown: (event) => handleItemKeyDown(event, actionItem),
+                }, h("span", { class: "st-menu__itemLabel" }, actionItem.label));
+            });
+            return h("div", {
+                ...attrs,
+                ref: rootRef,
+                class: classNames("st-menu", props.dense && "st-menu--dense", props.class),
+                role: props.role ?? "menu",
+            }, children);
+        };
+    },
+});
+//# sourceMappingURL=Menu.js.map

package/dist/Menu.js.map

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

package/dist/MenuPopover.d.ts

@@ -0,0 +1,52 @@
+import type { MenuItem } from "./Menu.js";
+export type MenuPopoverPlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+export type MenuPopoverProps = {
+    items?: MenuItem[];
+    open?: boolean;
+    placement?: MenuPopoverPlacement;
+    class?: string;
+};
+export type { MenuItem };
+export declare const MenuPopover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => MenuItem[];
+        default: () => never[];
+    };
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placement: {
+        type: () => MenuPopoverPlacement;
+        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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: () => MenuItem[];
+        default: () => never[];
+    };
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placement: {
+        type: () => MenuPopoverPlacement;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    items: MenuItem[];
+    class: string;
+    open: boolean;
+    placement: MenuPopoverPlacement;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=MenuPopover.d.ts.map

package/dist/MenuPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.d.ts","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;AAE3F,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,eAAO,MAAM,WAAW;;cAGI,MAAM,QAAQ,EAAE;;;;;;;;cAEX,MAAM,oBAAoB;;;;;;;;;;;cAF/B,MAAM,QAAQ,EAAE;;;;;;;;cAEX,MAAM,oBAAoB;;;;;;;;;;;;4EA8BzD,CAAC"}

package/dist/MenuPopover.js

@@ -0,0 +1,28 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+import { Menu } from "./Menu.js";
+export const MenuPopover = defineComponent({
+    name: "MenuPopover",
+    props: {
+        items: { type: Array, default: () => [] },
+        open: { type: Boolean, default: true },
+        placement: { type: String, default: "bottom-start" },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            return h("div", {
+                ...attrs,
+                class: classNames("st-menuPopover", `st-menuPopover--${props.placement}`, props.class),
+            }, [
+                slots.trigger?.(),
+                props.open
+                    ? h("div", { class: "st-menuPopover__content" }, props.items && props.items.length
+                        ? h(Menu, { items: props.items, role: "presentation" })
+                        : slots.default?.())
+                    : null,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=MenuPopover.js.map

package/dist/MenuPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAcjC,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,KAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;QAC7D,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QACtC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAoC,EAAE,OAAO,EAAE,cAAc,EAAE;QAClF,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,gBAAgB,EAChB,mBAAmB,KAAK,CAAC,SAAS,EAAE,EACpC,KAAK,CAAC,KAAK,CACZ;aACF,EACD;gBACE,KAAK,CAAC,OAAO,EAAE,EAAE;gBACjB,KAAK,CAAC,IAAI;oBACR,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,yBAAyB,EAAE,EACpC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;wBAC/B,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;wBACvD,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CACtB;oBACH,CAAC,CAAC,IAAI;aACT,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/MenuTriggerButton.d.ts

@@ -0,0 +1,39 @@
+export type MenuTriggerButtonProps = {
+    open?: boolean;
+    disabled?: boolean;
+    class?: string;
+};
+export declare const MenuTriggerButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    disabled: boolean;
+    open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=MenuTriggerButton.d.ts.map

package/dist/MenuTriggerButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerButton.d.ts","sourceRoot":"","sources":["../src/MenuTriggerButton.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAyB5B,CAAC"}

package/dist/MenuTriggerButton.js

@@ -0,0 +1,22 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+export const MenuTriggerButton = defineComponent({
+    name: "MenuTriggerButton",
+    props: {
+        open: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { slots, attrs }) {
+        return () => {
+            return h("button", {
+                ...attrs,
+                type: "button",
+                class: classNames("st-menuTriggerButton st-button st-button--secondary st-button--sm", props.class),
+                "aria-expanded": props.open,
+                disabled: props.disabled,
+            }, slots.default?.());
+        };
+    },
+});
+//# sourceMappingURL=MenuTriggerButton.js.map

package/dist/MenuTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerButton.js","sourceRoot":"","sources":["../src/MenuTriggerButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAC/C,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QACvC,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,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,GAAG,KAAK;gBACR,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU,CACf,mEAAmE,EACnE,KAAK,CAAC,KAAK,CACZ;gBACD,eAAe,EAAE,KAAK,CAAC,IAAI;gBAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ;aACzB,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/MessageActions.d.ts

@@ -0,0 +1,46 @@
+export type MessageActionVariant = "default" | "danger";
+export type MessageAction = {
+    id?: string;
+    label: unknown;
+    disabled?: boolean;
+    variant?: MessageActionVariant;
+    onClick?: () => void;
+};
+export type MessageActionsProps = {
+    actions: MessageAction[];
+    visibility?: "always" | "hover";
+    class?: string;
+};
+export declare const MessageActions: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    actions: {
+        type: () => MessageAction[];
+        required: true;
+    };
+    visibility: {
+        type: () => "always" | "hover";
+        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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: () => MessageAction[];
+        required: true;
+    };
+    visibility: {
+        type: () => "always" | "hover";
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    visibility: "always" | "hover";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=MessageActions.d.ts.map

package/dist/MessageActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.d.ts","sourceRoot":"","sources":["../src/MessageActions.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc;;cAGG,MAAM,aAAa,EAAE;;;;cAE7B,MAAM,QAAQ,GAAG,OAAO;;;;;;;;;;;cAFhB,MAAM,aAAa,EAAE;;;;cAE7B,MAAM,QAAQ,GAAG,OAAO;;;;;;;;;;4EAsC5C,CAAC"}

package/dist/MessageActions.js

@@ -0,0 +1,30 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+export const MessageActions = defineComponent({
+    name: "MessageActions",
+    props: {
+        actions: { type: Array, required: true },
+        visibility: {
+            type: String,
+            default: "always",
+        },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const visibility = props.visibility ?? "always";
+            return h("nav", {
+                ...attrs,
+                class: classNames("st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", props.class),
+                "aria-label": "Message actions",
+            }, props.actions.map((action, index) => h("button", {
+                key: action.id ?? index,
+                type: "button",
+                class: classNames("st-button st-button--ghost st-button--sm", action.variant === "danger" && "st-button--danger"),
+                disabled: action.disabled,
+                onClick: action.onClick,
+            }, action.label)));
+        };
+    },
+});
+//# sourceMappingURL=MessageActions.js.map

package/dist/MessageActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageActions.js","sourceRoot":"","sources":["../src/MessageActions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAiB7C,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAA8B,EAAE,QAAQ,EAAE,IAAI,EAAE;QACjE,UAAU,EAAE;YACV,IAAI,EAAE,MAAkC;YACxC,OAAO,EAAE,QAAQ;SAClB;QACD,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,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,QAAQ,CAAC;YAChD,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,mBAAmB,EACnB,UAAU,KAAK,OAAO,IAAI,8BAA8B,EACxD,KAAK,CAAC,KAAK,CACZ;gBACD,YAAY,EAAE,iBAAiB;aAChC,EACD,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAClC,CAAC,CACC,QAAQ,EACR;gBACE,GAAG,EAAE,MAAM,CAAC,EAAE,IAAI,KAAK;gBACvB,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,UAAU,CACf,0CAA0C,EAC1C,MAAM,CAAC,OAAO,KAAK,QAAQ,IAAI,mBAAmB,CACnD;gBACD,QAAQ,EAAE,MAAM,CAAC,QAAQ;gBACzB,OAAO,EAAE,MAAM,CAAC,OAAO;aACxB,EACD,MAAM,CAAC,KAAe,CACvB,CACF,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/MessageStatusBadge.d.ts

@@ -0,0 +1,50 @@
+import type { ChatMessageStatus } from "./ChatMessage.js";
+export type MessageStatusBadgeTone = "neutral" | "info" | "success" | "warning" | "error";
+export type MessageStatusBadgeProps = {
+    status: ChatMessageStatus;
+    tone?: MessageStatusBadgeTone;
+    labels?: Partial<Record<ChatMessageStatus, unknown>>;
+    class?: string;
+};
+export declare const MessageStatusBadge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    status: {
+        type: () => ChatMessageStatus;
+        required: true;
+    };
+    tone: {
+        type: () => MessageStatusBadgeTone;
+        default: undefined;
+    };
+    labels: {
+        type: () => Partial<Record<ChatMessageStatus, unknown>>;
+        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, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    status: {
+        type: () => ChatMessageStatus;
+        required: true;
+    };
+    tone: {
+        type: () => MessageStatusBadgeTone;
+        default: undefined;
+    };
+    labels: {
+        type: () => Partial<Record<ChatMessageStatus, unknown>>;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    tone: MessageStatusBadgeTone;
+    labels: Partial<Record<ChatMessageStatus, unknown>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=MessageStatusBadge.d.ts.map

package/dist/MessageStatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusBadge.d.ts","sourceRoot":"","sources":["../src/MessageStatusBadge.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAE1D,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1F,MAAM,MAAM,uBAAuB,GAAG;IACpC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;cAGD,MAAM,iBAAiB;;;;cACzB,MAAM,sBAAsB;;;;cAElC,MAAM,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;cAHzC,MAAM,iBAAiB;;;;cACzB,MAAM,sBAAsB;;;;cAElC,MAAM,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;;;;;;;;;;;4EA6CrE,CAAC"}

package/dist/MessageStatusBadge.js

@@ -0,0 +1,44 @@
+import { defineComponent, h } from "vue";
+import { classNames } from "./classNames.js";
+export const MessageStatusBadge = defineComponent({
+    name: "MessageStatusBadge",
+    props: {
+        status: { type: String, required: true },
+        tone: { type: String, default: undefined },
+        labels: {
+            type: Object,
+            default: undefined,
+        },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { attrs }) {
+        return () => {
+            const status = props.status;
+            const normalized = status === "sent"
+                ? "completed"
+                : status === "streaming"
+                    ? "processing"
+                    : status === "error"
+                        ? "failed"
+                        : status;
+            const resolvedTone = props.tone ??
+                (normalized === "completed"
+                    ? "success"
+                    : normalized === "failed"
+                        ? "error"
+                        : normalized === "processing"
+                            ? "info"
+                            : "neutral");
+            const label = (props.labels?.[status] ?? props.labels?.[normalized]) ??
+                (normalized.charAt(0).toUpperCase() + normalized.slice(1));
+            return h("span", {
+                ...attrs,
+                class: classNames("st-messageStatusBadge", `st-badge st-badge--${resolvedTone}`, props.class),
+            }, [
+                h("span", { class: "st-messageStatusBadge__dot", "aria-hidden": "true" }),
+                label,
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=MessageStatusBadge.js.map

package/dist/MessageStatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusBadge.js","sourceRoot":"","sources":["../src/MessageStatusBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAY7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,eAAe,CAAC;IAChD,IAAI,EAAE,oBAAoB;IAC1B,KAAK,EAAE;QACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAiC,EAAE,QAAQ,EAAE,IAAI,EAAE;QACnE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAsC,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1E,MAAM,EAAE;YACN,IAAI,EAAE,MAA2D;YACjE,OAAO,EAAE,SAAS;SACnB;QACD,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,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC5B,MAAM,UAAU,GACd,MAAM,KAAK,MAAM;gBACf,CAAC,CAAC,WAAW;gBACb,CAAC,CAAC,MAAM,KAAK,WAAW;oBACtB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,MAAM,KAAK,OAAO;wBAClB,CAAC,CAAC,QAAQ;wBACV,CAAC,CAAC,MAAM,CAAC;YACjB,MAAM,YAAY,GAChB,KAAK,CAAC,IAAI;gBACV,CAAC,UAAU,KAAK,WAAW;oBACzB,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,UAAU,KAAK,QAAQ;wBACvB,CAAC,CAAC,OAAO;wBACT,CAAC,CAAC,UAAU,KAAK,YAAY;4BAC3B,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,SAAS,CAAC,CAAC;YACrB,MAAM,KAAK,GACT,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC,UAA+B,CAAC,CAAC;gBAC3E,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7D,OAAO,CAAC,CACN,MAAM,EACN;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CACf,uBAAuB,EACvB,sBAAsB,YAAY,EAAE,EACpC,KAAK,CAAC,KAAK,CACZ;aACF,EACD;gBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;gBACzE,KAAe;aAChB,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/Modal.d.ts

@@ -0,0 +1,51 @@
+export type ModalProps = {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    class?: string;
+};
+export declare const Modal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    description: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    class: string;
+    title: string;
+    open: boolean;
+    description: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgFhB,CAAC"}

package/dist/Modal.js

@@ -0,0 +1,66 @@
+import { defineComponent, h, onUnmounted, ref, watch } from "vue";
+import { classNames } from "./classNames.js";
+export const Modal = defineComponent({
+    name: "Modal",
+    props: {
+        open: { type: Boolean, default: false },
+        title: { type: String, default: undefined },
+        description: { type: String, default: undefined },
+        class: { type: String, default: undefined },
+    },
+    emits: ["close"],
+    setup(props, { emit, slots, attrs }) {
+        const dialogRef = ref(null);
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                emit("close");
+            }
+        };
+        watch(() => props.open, (open) => {
+            if (open) {
+                document.body.style.overflow = "hidden";
+                document.addEventListener("keydown", onKeyDown);
+            }
+            else {
+                document.body.style.overflow = "";
+                document.removeEventListener("keydown", onKeyDown);
+            }
+        });
+        onUnmounted(() => {
+            document.body.style.overflow = "";
+            document.removeEventListener("keydown", onKeyDown);
+        });
+        return () => {
+            if (!props.open)
+                return null;
+            return h("div", { class: "st-modal__backdrop" }, h("section", {
+                ...attrs,
+                ref: dialogRef,
+                class: classNames("st-modal", props.class),
+                role: "dialog",
+                "aria-modal": "true",
+                "aria-label": props.title || "Modal",
+                tabindex: -1,
+            }, [
+                h("div", { class: "st-modal__header" }, [
+                    props.title ? h("h2", { class: "st-modal__title" }, props.title) : null,
+                    h("button", {
+                        type: "button",
+                        class: "st-modal__close",
+                        "aria-label": "Close",
+                        onClick: () => emit("close"),
+                    }, "x"),
+                ]),
+                props.description
+                    ? h("p", { class: "st-modal__description" }, props.description)
+                    : null,
+                h("div", { class: "st-modal__body" }, slots.default?.()),
+                slots.footer
+                    ? h("div", { class: "st-modal__footer" }, slots.footer())
+                    : null,
+            ]));
+        };
+    },
+});
+//# sourceMappingURL=Modal.js.map