@pathscale/ui 1.1.34 → 1.1.36

package/dist/components/breadcrumbs/Breadcrumbs.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "breadcrumbs";
+    };
+    readonly Item: {
+        readonly base: readonly ["breadcrumbs__item", "breadcrumbs__link", "breadcrumbs__separator"];
+    };
+};

package/dist/components/breadcrumbs/Breadcrumbs.classes.js

@@ -0,0 +1,13 @@
+const CLASSES = {
+    Root: {
+        base: "breadcrumbs"
+    },
+    Item: {
+        base: [
+            "breadcrumbs__item",
+            "breadcrumbs__link",
+            "breadcrumbs__separator"
+        ]
+    }
+};
+export { CLASSES };

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Breadcrumbs.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)('<svg aria-hidden=true data-slot=breadcrumbs-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<nav>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a class=breadcrumbs__link data-slot=breadcrumbs-link>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=breadcrumbs__separator data-slot=breadcrumbs-separator>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=breadcrumbs__link data-slot=breadcrumbs-link>");
+import * as __WEBPACK_EXTERNAL_MODULE__Breadcrumbs_classes_js_83219ed5__ from "./Breadcrumbs.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=breadcrumbs-separator fill=none height=12 viewBox="0 0 24 24"width=12 xmlns=http://www.w3.org/2000/svg><path d="M9 18l6-6-6-6"stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<nav>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a data-slot=breadcrumbs-link>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=breadcrumbs-separator>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=breadcrumbs-link>");
 const BreadcrumbsContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const useBreadcrumbsContext = ()=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(BreadcrumbsContext);
@@ -29,7 +30,7 @@ const BreadcrumbsRoot = (props)=>{
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
                 "aria-label": "Breadcrumbs",
                 get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("breadcrumbs", local.class, local.className);
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Breadcrumbs_classes_js_83219ed5__.CLASSES.Root.base, local.class, local.className);
                 },
                 "data-slot": "breadcrumbs",
                 get ["data-theme"] () {
@@ -44,6 +45,7 @@ const BreadcrumbsRoot = (props)=>{
         }
     });
 };
+const [ITEM_CLASS, LINK_CLASS, SEPARATOR_CLASS] = __WEBPACK_EXTERNAL_MODULE__Breadcrumbs_classes_js_83219ed5__.CLASSES.Item.base;
 const BreadcrumbsItem = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -59,7 +61,7 @@ const BreadcrumbsItem = (props)=>{
         var _el$3 = _tmpl$5();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("breadcrumbs__item", local.class, local.className);
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(ITEM_CLASS, local.class, local.className);
             },
             "data-slot": "breadcrumbs-item",
             get ["data-theme"] () {
@@ -76,6 +78,7 @@ const BreadcrumbsItem = (props)=>{
             get fallback () {
                 return (()=>{
                     var _el$6 = _tmpl$6();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, LINK_CLASS);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
                         var _v$ = local.isCurrent ? "true" : void 0, _v$2 = local.isCurrent ? "page" : void 0;
@@ -91,6 +94,7 @@ const BreadcrumbsItem = (props)=>{
             },
             get children () {
                 var _el$4 = _tmpl$3();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, LINK_CLASS);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "href", local.href));
                 return _el$4;
@@ -102,6 +106,7 @@ const BreadcrumbsItem = (props)=>{
             },
             get children () {
                 var _el$5 = _tmpl$4();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$5, SEPARATOR_CLASS);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>ctx.separator() ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ChevronRight, {}));
                 return _el$5;
             }

package/dist/components/button/Button.classes.d.ts

@@ -0,0 +1,27 @@
+export declare const CLASSES: {
+    readonly base: "button";
+    readonly variant: {
+        readonly primary: "button--primary";
+        readonly secondary: "button--secondary";
+        readonly tertiary: "button--tertiary";
+        readonly outline: "button--outline";
+        readonly ghost: "button--ghost";
+        readonly danger: "button--danger";
+        readonly "danger-soft": "button--danger-soft";
+    };
+    readonly size: {
+        readonly sm: "button--sm";
+        readonly md: "button--md";
+        readonly lg: "button--lg";
+    };
+    readonly flag: {
+        readonly isIconOnly: "button--icon-only";
+        readonly fullWidth: "button--full-width";
+    };
+    readonly slot: {
+        readonly spinner: "button__spinner";
+        readonly icon: "button__icon";
+        readonly iconStart: "button__icon--start";
+        readonly iconEnd: "button__icon--end";
+    };
+};

package/dist/components/button/Button.classes.js

@@ -0,0 +1,28 @@
+const CLASSES = {
+    base: "button",
+    variant: {
+        primary: "button--primary",
+        secondary: "button--secondary",
+        tertiary: "button--tertiary",
+        outline: "button--outline",
+        ghost: "button--ghost",
+        danger: "button--danger",
+        "danger-soft": "button--danger-soft"
+    },
+    size: {
+        sm: "button--sm",
+        md: "button--md",
+        lg: "button--lg"
+    },
+    flag: {
+        isIconOnly: "button--icon-only",
+        fullWidth: "button--full-width"
+    },
+    slot: {
+        spinner: "button__spinner",
+        icon: "button__icon",
+        iconStart: "button__icon--start",
+        iconEnd: "button__icon--end"
+    }
+};
+export { CLASSES };

package/dist/components/button/Button.css

@@ -64,7 +64,10 @@
     }
   }
 
-  .button svg:not([data-slot="spinner"] svg) {
+  .button__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     pointer-events: none;
     margin-block: 0.125rem;
     height: 1rem;
@@ -73,6 +76,12 @@
     align-self: center;
   }
 
+  .button__icon > * {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
   .button--sm {
     height: 2.25rem;
     padding-inline: 0.75rem;

package/dist/components/button/Button.d.ts

@@ -1,7 +1,8 @@
 import "./Button.css";
 import { type JSX } from "solid-js";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "danger" | "danger-soft";
-type ButtonSize = "sm" | "md" | "lg";
+import { CLASSES } from "./Button.classes";
+export type ButtonVariant = keyof typeof CLASSES.variant;
+export type ButtonSize = keyof typeof CLASSES.size;
 type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -9,8 +10,10 @@ type ButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled">
     fullWidth?: boolean;
     isDisabled?: boolean;
     isPending?: boolean;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
     className?: string;
 };
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;
-export type { ButtonProps, ButtonVariant, ButtonSize };
+export type { ButtonProps };

package/dist/components/button/Button.js

@@ -2,21 +2,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Button.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)("<span class=button__spinner data-slot=spinner aria-hidden=true>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
-const VARIANT_CLASS_MAP = {
-    primary: "button--primary",
-    secondary: "button--secondary",
-    tertiary: "button--tertiary",
-    outline: "button--outline",
-    ghost: "button--ghost",
-    danger: "button--danger",
-    "danger-soft": "button--danger-soft"
-};
-const SIZE_CLASS_MAP = {
-    sm: "button--sm",
-    md: "button--md",
-    lg: "button--lg"
-};
+import * as __WEBPACK_EXTERNAL_MODULE__button_group_context_js_9dfe2267__ from "../button-group/context.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__ from "./Button.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=spinner aria-hidden=true>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=button-start-icon>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=button-end-icon>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
 const Button = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
@@ -28,14 +16,18 @@ const Button = (props)=>{
         "fullWidth",
         "isDisabled",
         "isPending",
+        "startIcon",
+        "endIcon",
         "type"
     ]);
-    const variant = ()=>local.variant ?? "primary";
-    const size = ()=>local.size ?? "md";
-    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.isPending);
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("button", VARIANT_CLASS_MAP[variant()], SIZE_CLASS_MAP[size()], local.isIconOnly && "button--icon-only", local.fullWidth && "button--full-width", local.class, local.className);
+    const buttonGroupContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__button_group_context_js_9dfe2267__.ButtonGroupContext);
+    const variant = ()=>local.variant ?? buttonGroupContext?.variant() ?? "primary";
+    const size = ()=>local.size ?? buttonGroupContext?.size() ?? "md";
+    const fullWidth = ()=>local.fullWidth ?? buttonGroupContext?.fullWidth();
+    const disabled = ()=>Boolean(local.isDisabled ?? buttonGroupContext?.isDisabled()) || Boolean(local.isPending);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.variant[variant()], __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.size[size()], local.isIconOnly && __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.flag.isIconOnly, fullWidth() && __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.flag.fullWidth, local.class, local.className);
     return (()=>{
-        var _el$ = _tmpl$2();
+        var _el$ = _tmpl$4();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get type () {
                 return local.type ?? "button";
@@ -59,10 +51,34 @@ const Button = (props)=>{
                 return local.isPending;
             },
             get children () {
-                return _tmpl$();
+                var _el$2 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.slot.spinner));
+                return _el$2;
+            }
+        }), null);
+        (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 local.startIcon;
+            },
+            get children () {
+                var _el$3 = _tmpl$2();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.startIcon);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.slot.iconStart)));
+                return _el$3;
             }
         }), null);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children, null);
+        (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 local.endIcon;
+            },
+            get children () {
+                var _el$4 = _tmpl$3();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.endIcon);
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.slot.icon, __WEBPACK_EXTERNAL_MODULE__Button_classes_js_e06fc199__.CLASSES.slot.iconEnd)));
+                return _el$4;
+            }
+        }), null);
         return _el$;
     })();
 };

package/dist/components/button-group/ButtonGroup.classes.d.ts

@@ -0,0 +1,15 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "button-group";
+        readonly orientation: {
+            readonly horizontal: "button-group--horizontal";
+            readonly vertical: "button-group--vertical";
+        };
+        readonly flag: {
+            readonly fullWidth: "button-group--full-width";
+        };
+    };
+    readonly Separator: {
+        readonly base: "button-group__separator";
+    };
+};

package/dist/components/button-group/ButtonGroup.classes.js

@@ -0,0 +1,16 @@
+const CLASSES = {
+    Root: {
+        base: "button-group",
+        orientation: {
+            horizontal: "button-group--horizontal",
+            vertical: "button-group--vertical"
+        },
+        flag: {
+            fullWidth: "button-group--full-width"
+        }
+    },
+    Separator: {
+        base: "button-group__separator"
+    }
+};
+export { CLASSES };

package/dist/components/button-group/ButtonGroup.css

@@ -0,0 +1,117 @@
+@layer components {
+  .button-group {
+    display: inline-flex;
+    height: auto;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+  }
+
+  .button-group--horizontal {
+    flex-direction: row;
+  }
+
+  .button-group--vertical {
+    flex-direction: column;
+  }
+
+  .button-group .button {
+    border-radius: 0;
+  }
+
+  .button-group--horizontal .button:first-child {
+    border-start-start-radius: 1.5rem;
+    border-end-start-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:last-child {
+    border-start-end-radius: 1.5rem;
+    border-end-end-radius: 1.5rem;
+  }
+
+  .button-group--horizontal .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:last-child {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  .button-group--vertical .button:first-child:last-child {
+    border-radius: 1.5rem;
+  }
+
+  .button-group .button:active,
+  .button-group .button[data-pressed="true"] {
+    transform: none;
+  }
+
+  .button-group .button:focus-visible,
+  .button-group .button[data-focus-visible="true"] {
+    outline-offset: -1px;
+  }
+
+  .button-group__separator {
+    background-color: currentColor;
+    opacity: 0.15;
+    border-radius: 4px;
+    position: absolute;
+    pointer-events: none;
+    transition: opacity 150ms var(--ease-smooth);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button-group__separator {
+      transition: none;
+    }
+  }
+
+  .button-group--horizontal .button-group__separator {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  .button-group--vertical .button-group__separator {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+
+  .button-group--horizontal .button--outline:first-child {
+    border-inline-end-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:last-child {
+    border-inline-start-width: 0;
+  }
+
+  .button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+    border-inline-width: 0;
+  }
+
+  .button-group--vertical .button--outline:first-child {
+    border-bottom-width: 0;
+  }
+
+  .button-group--vertical .button--outline:last-child {
+    border-top-width: 0;
+  }
+
+  .button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  .button-group--full-width {
+    width: 100%;
+  }
+}

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import "./ButtonGroup.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { ButtonSize, ButtonVariant } from "../button";
+import type { IComponentBaseProps } from "../types";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export type ButtonGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    orientation?: ButtonGroupOrientation;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    isDisabled?: boolean;
+    fullWidth?: boolean;
+};
+export type ButtonGroupSeparatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps;
+declare const ButtonGroupRoot: ParentComponent<ButtonGroupRootProps>;
+declare const ButtonGroupSeparator: Component<ButtonGroupSeparatorProps>;
+declare const ButtonGroup: ParentComponent<ButtonGroupRootProps> & {
+    Root: ParentComponent<ButtonGroupRootProps>;
+    Separator: Component<ButtonGroupSeparatorProps>;
+};
+export default ButtonGroup;
+export { ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator };
+export type { ButtonGroupRootProps as ButtonGroupProps };

package/dist/components/button-group/ButtonGroup.js

@@ -0,0 +1,88 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./ButtonGroup.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__ButtonGroup_classes_js_da79d854__ from "./ButtonGroup.classes.js";
+import * as __WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__ from "./context.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 ButtonGroupRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "size",
+        "variant",
+        "isDisabled",
+        "fullWidth",
+        "role"
+    ]);
+    const orientation = ()=>local.orientation ?? "horizontal";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.ButtonGroupContext.Provider, {
+        value: {
+            size: ()=>local.size,
+            variant: ()=>local.variant,
+            isDisabled: ()=>local.isDisabled,
+            fullWidth: ()=>local.fullWidth
+        },
+        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 (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ButtonGroup_classes_js_da79d854__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__ButtonGroup_classes_js_da79d854__.CLASSES.Root.orientation[orientation()], local.fullWidth && __WEBPACK_EXTERNAL_MODULE__ButtonGroup_classes_js_da79d854__.CLASSES.Root.flag.fullWidth, local.class, local.className);
+                },
+                "data-slot": "button-group",
+                get ["data-orientation"] () {
+                    return orientation();
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                get role () {
+                    return local.role ?? "group";
+                },
+                get ["aria-disabled"] () {
+                    return local.isDisabled ? "true" : void 0;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const ButtonGroupSeparator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        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)(others, {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ButtonGroup_classes_js_da79d854__.CLASSES.Separator.base, local.class, local.className);
+            },
+            "data-slot": "button-group-separator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+};
+const ButtonGroup = Object.assign(ButtonGroupRoot, {
+    Root: ButtonGroupRoot,
+    Separator: ButtonGroupSeparator
+});
+const button_group_ButtonGroup = ButtonGroup;
+export { ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator, button_group_ButtonGroup as default };

package/dist/components/button-group/context.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonSize, ButtonVariant } from "../button";
+export type ButtonGroupContextValue = {
+    size: () => ButtonSize | undefined;
+    variant: () => ButtonVariant | undefined;
+    isDisabled: () => boolean | undefined;
+    fullWidth: () => boolean | undefined;
+};
+export declare const ButtonGroupContext: import("solid-js").Context<ButtonGroupContextValue | undefined>;

package/dist/components/button-group/context.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const ButtonGroupContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+export { ButtonGroupContext };

package/dist/components/button-group/index.d.ts

@@ -0,0 +1 @@
+export { default, ButtonGroup, ButtonGroupRoot, ButtonGroupSeparator, type ButtonGroupProps, type ButtonGroupRootProps, type ButtonGroupSeparatorProps, type ButtonGroupOrientation, } from "./ButtonGroup";

package/dist/components/button-group/index.js

@@ -0,0 +1,6 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__ from "./ButtonGroup.js";
+var __webpack_exports__ButtonGroup = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroup;
+var __webpack_exports__ButtonGroupRoot = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroupRoot;
+var __webpack_exports__ButtonGroupSeparator = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__.ButtonGroupSeparator;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ButtonGroup_js_df72aaf5__["default"];
+export { __webpack_exports__ButtonGroup as ButtonGroup, __webpack_exports__ButtonGroupRoot as ButtonGroupRoot, __webpack_exports__ButtonGroupSeparator as ButtonGroupSeparator, __webpack_exports__default as default };

package/dist/components/card/Card.classes.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "card";
+        readonly variant: {
+            readonly default: "card--default";
+            readonly flat: "card--flat";
+            readonly bordered: "card--bordered";
+            readonly shadow: "card--shadow";
+        };
+        readonly flag: {
+            readonly isHoverable: "card--hoverable";
+            readonly isPressable: "card--pressable";
+        };
+    };
+    readonly Header: {
+        readonly base: "card__header";
+    };
+    readonly Body: {
+        readonly base: "card__body";
+    };
+    readonly Footer: {
+        readonly base: "card__footer";
+    };
+};

package/dist/components/card/Card.classes.js

@@ -0,0 +1,25 @@
+const CLASSES = {
+    Root: {
+        base: "card",
+        variant: {
+            default: "card--default",
+            flat: "card--flat",
+            bordered: "card--bordered",
+            shadow: "card--shadow"
+        },
+        flag: {
+            isHoverable: "card--hoverable",
+            isPressable: "card--pressable"
+        }
+    },
+    Header: {
+        base: "card__header"
+    },
+    Body: {
+        base: "card__body"
+    },
+    Footer: {
+        base: "card__footer"
+    }
+};
+export { CLASSES };