@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/tabs/Tabs.classes.d.ts

@@ -0,0 +1,14 @@
+export declare const CLASSES: {
+    readonly base: "tabs";
+    readonly slot: {
+        readonly listContainer: "tabs__list-container";
+        readonly list: "tabs__list";
+        readonly indicator: "tabs__indicator";
+        readonly tab: "tabs__tab";
+        readonly panel: "tabs__panel";
+        readonly separator: "tabs__separator";
+    };
+    readonly variant: {
+        readonly secondary: "tabs--secondary";
+    };
+};

package/dist/components/tabs/Tabs.classes.js

@@ -0,0 +1,15 @@
+const CLASSES = {
+    base: "tabs",
+    slot: {
+        listContainer: "tabs__list-container",
+        list: "tabs__list",
+        indicator: "tabs__indicator",
+        tab: "tabs__tab",
+        panel: "tabs__panel",
+        separator: "tabs__separator"
+    },
+    variant: {
+        secondary: "tabs--secondary"
+    }
+};
+export { CLASSES };

package/dist/components/tabs/Tabs.css

@@ -48,7 +48,7 @@
     width: 100%;
     align-items: center;
     justify-content: center;
-    border-radius: 1.5rem;
+    border-radius: var(--radius-box, 1rem);
     padding-inline: 1rem;
     text-align: center;
     white-space: nowrap;

package/dist/components/tabs/Tabs.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Tabs.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span class=tabs__indicator data-slot=tabs-indicator>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+import * as __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__ from "./Tabs.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
 const TabsContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -41,7 +42,7 @@ const TabsRoot = (props)=>{
     };
     const getTabId = (key)=>`${baseId}-tab-${String(key)}`;
     const getPanelId = (key)=>`${baseId}-panel-${String(key)}`;
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs", "secondary" === local.variant && "tabs--secondary", local.class);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.base, "secondary" === local.variant && __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.variant.secondary, local.class);
     const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
             orientation: local.orientation ?? "horizontal",
             variant: local.variant ?? "primary",
@@ -59,10 +60,9 @@ const TabsRoot = (props)=>{
         },
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return classes();
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: classes()
+                }), {
                 "data-slot": "tabs",
                 get ["data-orientation"] () {
                     return local.orientation ?? "horizontal";
@@ -80,10 +80,9 @@ const TabListContainer = (props)=>{
     ]);
     return (()=>{
         var _el$2 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__list-container", local.class);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.listContainer, local.class)
+            }), {
             "data-slot": "tabs-list-container"
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
@@ -178,27 +177,30 @@ const TabList = (props)=>{
             role: "tablist",
             get ["aria-orientation"] () {
                 return ctx.orientation;
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__list", local.class);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.list, local.class)
+            }), {
             "data-slot": "tabs-list",
             get ["data-orientation"] () {
                 return ctx.orientation;
             }
         }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children, _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = indicatorReady() ? "true" : "false", _v$2 = indicatorVisible() ? "true" : "false", _v$3 = indicatorStyle();
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "data-ready", _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "data-visible", _p$.t = _v$2);
-            _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$5, _v$3, _p$.a);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.indicator
+            }), {
+            "data-slot": "tabs-indicator",
+            get ["data-ready"] () {
+                return indicatorReady() ? "true" : "false";
+            },
+            get ["data-visible"] () {
+                return indicatorVisible() ? "true" : "false";
+            },
+            get style () {
+                return indicatorStyle();
+            }
+        }), false, false);
         return _el$4;
     })();
 };
@@ -215,11 +217,9 @@ const Tab = (props)=>{
     let tabRef;
     if (!ctx) return (()=>{
         var _el$6 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__tab", local.class);
-            }
-        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.tab, local.class)
+            })), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
         return _el$6;
     })();
@@ -277,7 +277,7 @@ const Tab = (props)=>{
         if (isDisabled()) return;
         ctx.setSelectedKey(local.id);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__tab", local.class);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.tab, local.class);
     return (()=>{
         var _el$7 = _tmpl$3();
         var _ref$ = tabRef;
@@ -286,10 +286,10 @@ const Tab = (props)=>{
             get id () {
                 return ctx.getTabId(local.id);
             },
-            role: "tab",
-            get ["class"] () {
-                return classes();
-            },
+            role: "tab"
+        }, ()=>({
+                class: classes()
+            }), {
             "data-slot": "tabs-tab",
             get ["data-selected"] () {
                 return isSelected() ? "true" : "false";
@@ -343,10 +343,10 @@ const TabPanel = (props)=>{
             role: "tabpanel",
             get ["aria-labelledby"] () {
                 return ctx.getTabId(local.id);
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__panel", local.class);
-            },
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.panel, local.class)
+            }), {
             "data-slot": "tabs-panel",
             get ["data-orientation"] () {
                 return ctx.orientation;
@@ -366,10 +366,10 @@ const TabSeparator = (props)=>{
     return (()=>{
         var _el$0 = _tmpl$4();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            "aria-hidden": "true",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tabs__separator", local.class);
-            },
+            "aria-hidden": "true"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.separator, local.class)
+            }), {
             "data-slot": "tabs-separator"
         }), false, false);
         return _el$0;

package/dist/components/tag/Tag.classes.d.ts

@@ -0,0 +1,20 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "tag";
+        readonly size: {
+            readonly sm: "tag--sm";
+            readonly md: "tag--md";
+            readonly lg: "tag--lg";
+        };
+        readonly variant: {
+            readonly default: "tag--default";
+            readonly surface: "tag--surface";
+        };
+    };
+    readonly slot: {
+        readonly icon: "tag__icon";
+        readonly iconStart: "tag__icon--start";
+        readonly iconEnd: "tag__icon--end";
+        readonly removeButton: "tag__remove-button";
+    };
+};

package/dist/components/tag/Tag.classes.js

@@ -0,0 +1,21 @@
+const CLASSES = {
+    Root: {
+        base: "tag",
+        size: {
+            sm: "tag--sm",
+            md: "tag--md",
+            lg: "tag--lg"
+        },
+        variant: {
+            default: "tag--default",
+            surface: "tag--surface"
+        }
+    },
+    slot: {
+        icon: "tag__icon",
+        iconStart: "tag__icon--start",
+        iconEnd: "tag__icon--end",
+        removeButton: "tag__remove-button"
+    }
+};
+export { CLASSES };

package/dist/components/tag/Tag.css

@@ -0,0 +1,121 @@
+@layer components {
+  .tag {
+    --tag-optical-offset: 0.031em;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transform-origin: center;
+    cursor: pointer;
+    transition:
+      color 100ms ease,
+      transform 100ms ease,
+      opacity 100ms ease,
+      background-color 100ms ease,
+      box-shadow 100ms ease;
+
+    --tag-bg-default: var(--color-default);
+    --tag-fg-default: var(--color-default-foreground);
+    --tag-bg-default-hover: var(--color-default-hover);
+    --tag-bg-surface: var(--color-surface, var(--color-base-200));
+    --tag-fg-surface: var(--color-surface-foreground, var(--color-base-content));
+    --tag-bg-surface-hover: var(--color-surface-hover, var(--color-base-300));
+    --tag-bg-selected: var(--color-accent-soft);
+    --tag-fg-selected: var(--color-accent-soft-foreground);
+    --tag-bg-selected-hover: var(--color-accent-soft-hover);
+    --tag-bg: var(--tag-bg-default);
+    --tag-fg: var(--tag-fg-default);
+    --tag-bg-hover: var(--tag-bg-default-hover);
+
+    background-color: var(--tag-bg);
+    color: var(--tag-fg);
+  }
+
+  .tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  .tag__icon > * {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .tag:is([data-disabled="true"], [aria-disabled="true"]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tag:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .tag:is([data-selected="true"], [aria-selected="true"]) {
+    background-color: var(--tag-bg-selected);
+    color: var(--tag-fg-selected);
+  }
+
+  @media (hover: hover) {
+    .tag:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      background-color: var(--tag-bg-hover);
+    }
+
+    .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) {
+      background-color: var(--tag-bg-selected-hover);
+    }
+  }
+
+  .tag--sm {
+    padding-inline: 0.5rem;
+    padding-block: 0.125rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .tag--md {
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .tag--lg {
+    padding-inline: 0.625rem;
+    padding-block: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .tag--default {
+    --tag-bg: var(--tag-bg-default);
+    --tag-fg: var(--tag-fg-default);
+    --tag-bg-hover: var(--tag-bg-default-hover);
+  }
+
+  .tag--surface {
+    --tag-bg: var(--tag-bg-surface);
+    --tag-fg: var(--tag-fg-surface);
+    --tag-bg-hover: var(--tag-bg-surface-hover);
+  }
+
+  .tag__remove-button {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: inherit;
+  }
+
+  .tag__remove-button > * {
+    width: inherit;
+    height: inherit;
+    pointer-events: none;
+  }
+}

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,33 @@
+import "./Tag.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import { type CloseButtonProps } from "../close-button";
+import type { IComponentBaseProps } from "../types";
+export type TagSize = "sm" | "md" | "lg";
+export type TagVariant = "default" | "surface";
+type TagRenderProps = {
+    isSelected: boolean;
+    isDisabled: boolean;
+    allowsRemoving: boolean;
+};
+export type TagRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    id?: string | number;
+    textValue?: string;
+    isDisabled?: boolean;
+    size?: TagSize;
+    variant?: TagVariant;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    children?: JSX.Element | ((props: TagRenderProps) => JSX.Element);
+};
+export type TagRemoveButtonProps = Omit<CloseButtonProps, "isDisabled"> & IComponentBaseProps & {
+    isDisabled?: boolean;
+};
+declare const TagRoot: ParentComponent<TagRootProps>;
+declare const TagRemoveButton: Component<TagRemoveButtonProps>;
+declare const Tag: ParentComponent<TagRootProps> & {
+    Root: ParentComponent<TagRootProps>;
+    RemoveButton: Component<TagRemoveButtonProps>;
+};
+export default Tag;
+export { Tag, TagRoot, TagRemoveButton };
+export type { TagRootProps as TagProps, TagRenderProps };

package/dist/components/tag/Tag.js

@@ -0,0 +1,242 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Tag.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__close_button_index_js_620c3b77__ from "../close-button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__tag_group_context_js_fcbb3264__ from "../tag-group/context.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__ from "./Tag.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const toSlug = (value)=>value.trim().toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
+const extractTextValue = (nodes)=>{
+    for (const node of nodes){
+        if ("string" == typeof node && node.trim().length > 0) return node.trim();
+        if ("number" == typeof node) return String(node);
+    }
+};
+const TagContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const TagRoot = (props)=>{
+    const fallbackKey = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const group = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__tag_group_context_js_fcbb3264__.TagGroupContext);
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id",
+        "textValue",
+        "isDisabled",
+        "size",
+        "variant",
+        "startIcon",
+        "endIcon",
+        "onClick",
+        "onKeyDown",
+        "role",
+        "tabIndex"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const isRenderFnChild = ()=>"function" == typeof local.children;
+    const derivedText = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>isRenderFnChild() ? void 0 : extractTextValue(resolvedChildren.toArray()));
+    const tagKey = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (null != local.id) return String(local.id);
+        if (local.textValue) return toSlug(local.textValue);
+        if (derivedText()) return toSlug(derivedText());
+        return fallbackKey;
+    });
+    const size = ()=>local.size ?? group?.size() ?? "md";
+    const variant = ()=>local.variant ?? group?.variant() ?? "default";
+    const isSelectable = ()=>Boolean(group && "none" !== group.selectionMode());
+    const isSelected = ()=>Boolean(group?.selectedKeys().has(tagKey()));
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(group?.isDisabled()) || Boolean(group?.disabledKeys().has(tagKey()));
+    const allowsRemoving = ()=>Boolean(group?.allowsRemoving()) && Boolean(tagKey());
+    const renderState = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+            isSelected: isSelected(),
+            isDisabled: isDisabled(),
+            allowsRemoving: allowsRemoving()
+        }));
+    const handleSelect = (event)=>{
+        if (!group || !isSelectable() || isDisabled()) return;
+        group.selectKey(tagKey(), event);
+    };
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        handleSelect(event);
+    };
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented) return;
+        if (event.target !== event.currentTarget) return;
+        if (!isSelectable() || isDisabled()) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        event.preventDefault();
+        handleSelect(event);
+    };
+    const remove = (event)=>{
+        if (!group || !allowsRemoving() || isDisabled()) return;
+        event.preventDefault();
+        event.stopPropagation();
+        group.removeKey(tagKey(), event);
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TagContext.Provider, {
+        value: {
+            allowsRemoving,
+            isDisabled,
+            removeIcon: ()=>local.endIcon,
+            remove
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.Root.size[size()], __WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.Root.variant[variant()], local.class, local.className)
+                }), {
+                "data-slot": "tag",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get ["data-size"] () {
+                    return size();
+                },
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-selected"] () {
+                    return isSelected() ? "true" : "false";
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-key"] () {
+                    return tagKey();
+                },
+                get ["aria-selected"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!isSelectable())() ? isSelected() ? "true" : "false" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get role () {
+                    return local.role ?? (isSelectable() ? "option" : void 0);
+                },
+                get tabIndex () {
+                    return local.tabIndex ?? (isSelectable() && !isDisabled() ? 0 : void 0);
+                },
+                get style () {
+                    return local.style;
+                },
+                onClick: handleClick,
+                onKeyDown: handleKeyDown
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                get when () {
+                    return isRenderFnChild();
+                },
+                get fallback () {
+                    return [
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return local.startIcon;
+                            },
+                            get children () {
+                                var _el$2 = _tmpl$2();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.slot.iconStart)
+                                    }), {
+                                    "data-slot": "tag-start-icon"
+                                }), false, true);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.startIcon);
+                                return _el$2;
+                            }
+                        }),
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(resolvedChildren),
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return allowsRemoving() && local.endIcon;
+                            },
+                            get children () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TagRemoveButton, {
+                                    get children () {
+                                        return local.endIcon;
+                                    }
+                                });
+                            }
+                        }),
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return !allowsRemoving() && local.endIcon;
+                            },
+                            get children () {
+                                var _el$3 = _tmpl$2();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                        class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.slot.iconEnd)
+                                    }), {
+                                    "data-slot": "tag-end-icon"
+                                }), false, true);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.endIcon);
+                                return _el$3;
+                            }
+                        })
+                    ];
+                },
+                get children () {
+                    return local.children(renderState());
+                }
+            }));
+            return _el$;
+        }
+    });
+};
+const TagRemoveButton = (props)=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TagContext);
+    const hasIcon = ()=>null != props.children || null != props.startIcon || null != props.endIcon || context?.removeIcon() != null;
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick",
+        "isDisabled",
+        "aria-label"
+    ]);
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        context?.remove(event);
+    };
+    if (!context?.allowsRemoving()) return null;
+    if (!hasIcon()) return null;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__close_button_index_js_620c3b77__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["aria-label"] () {
+            return local["aria-label"] ?? "Remove tag";
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tag_classes_js_e42200b9__.CLASSES.slot.removeButton, local.class, local.className)
+        }), {
+        "data-slot": "tag-remove-button",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get style () {
+            return local.style;
+        },
+        get isDisabled () {
+            return local.isDisabled ?? context.isDisabled();
+        },
+        onClick: handleClick,
+        get children () {
+            return local.children ?? context.removeIcon();
+        }
+    }));
+};
+const Tag_Tag = Object.assign(TagRoot, {
+    Root: TagRoot,
+    RemoveButton: TagRemoveButton
+});
+const Tag = Tag_Tag;
+export { Tag_Tag as Tag, TagRemoveButton, TagRoot, Tag as default };

package/dist/components/tag/index.d.ts

@@ -0,0 +1 @@
+export { default, Tag, TagRoot, TagRemoveButton, type TagProps, type TagRootProps, type TagRemoveButtonProps, type TagSize, type TagVariant, } from "./Tag";

package/dist/components/tag/index.js

@@ -0,0 +1,6 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Tag_js_f7333ee7__ from "./Tag.js";
+var __webpack_exports__Tag = __WEBPACK_EXTERNAL_MODULE__Tag_js_f7333ee7__.Tag;
+var __webpack_exports__TagRemoveButton = __WEBPACK_EXTERNAL_MODULE__Tag_js_f7333ee7__.TagRemoveButton;
+var __webpack_exports__TagRoot = __WEBPACK_EXTERNAL_MODULE__Tag_js_f7333ee7__.TagRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Tag_js_f7333ee7__["default"];
+export { __webpack_exports__Tag as Tag, __webpack_exports__TagRemoveButton as TagRemoveButton, __webpack_exports__TagRoot as TagRoot, __webpack_exports__default as default };

package/dist/components/tag-group/TagGroup.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "tag-group";
+    };
+    readonly List: {
+        readonly base: "tag-group__list";
+    };
+};