@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/chatbubble/ChatBubble.js

@@ -1,5 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./chat.css";
+import "./ChatBubble.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__ChatBubbleHeader_js_27ae7dae__ from "./ChatBubbleHeader.js";
@@ -7,7 +7,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__ChatBubbleTime_js_4a8b0bdd__ from "./Chat
 import * as __WEBPACK_EXTERNAL_MODULE__ChatBubbleAvatar_js_15308dcc__ from "./ChatBubbleAvatar.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ChatBubbleMessage_js_98a4ad66__ from "./ChatBubbleMessage.js";
 import * as __WEBPACK_EXTERNAL_MODULE__ChatBubbleFooter_js_337289df__ from "./ChatBubbleFooter.js";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const ChatBubble = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -17,19 +17,16 @@ const ChatBubble = (props)=>{
         "className",
         "style"
     ]);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("chat", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "chat-end": local.end,
-            "chat-start": !local.end
-        }), local.class, local.className));
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.base, local.end ? __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.align.end : __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.align.start, local.class, local.className));
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             get ["data-theme"] () {
                 return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
+            }
+        }, ()=>({
+                class: classes()
+            }), {
             get style () {
                 return local.style;
             }

package/dist/components/chatbubble/ChatBubbleAvatar.js

@@ -1,7 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__avatar_index_js_ad25bec4__ from "../avatar/index.js";
-const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__avatar_index_js_ad25bec4__["default"], {
+import * as __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
+const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__avatar_index_js_ad25bec4__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
         get size () {
             return props.size ?? "sm";
         },
@@ -10,10 +11,10 @@ const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d
         },
         get variant () {
             return props.variant;
-        },
-        get ["class"] () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("chat-image", props.class);
-        },
+        }
+    }, ()=>({
+            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.slot.avatar, props.class, props.className)
+        }), {
         get dataTheme () {
             return props.dataTheme;
         },
@@ -37,6 +38,6 @@ const ChatBubbleAvatar = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d
                 })
             ];
         }
-    });
+    }));
 const chatbubble_ChatBubbleAvatar = ChatBubbleAvatar;
 export { chatbubble_ChatBubbleAvatar as default };

package/dist/components/chatbubble/ChatBubbleFooter.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ChatBubbleFooterProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const ChatBubbleFooter: (props: ChatBubbleFooterProps) => JSX.Element;

package/dist/components/chatbubble/ChatBubbleFooter.js

@@ -1,14 +1,20 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const ChatBubbleFooter = (props)=>(()=>{
+const ChatBubbleFooter = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className"
+    ]);
+    return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("chat-footer opacity-50", props.class);
-            }
-        }), false, false);
+        (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__ChatBubble_classes_js_4ceb888a__.CLASSES.slot.footer, local.class, local.className)
+            })), false, false);
         return _el$;
     })();
+};
 const chatbubble_ChatBubbleFooter = ChatBubbleFooter;
 export { chatbubble_ChatBubbleFooter as default };

package/dist/components/chatbubble/ChatBubbleHeader.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ChatBubbleHeaderProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
 declare const ChatBubbleHeader: (props: ChatBubbleHeaderProps) => JSX.Element;

package/dist/components/chatbubble/ChatBubbleHeader.js

@@ -1,14 +1,20 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const ChatBubbleHeader_ChatBubbleHeader = (props)=>(()=>{
+const ChatBubbleHeader_ChatBubbleHeader = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className"
+    ]);
+    return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("chat-header", props.class);
-            }
-        }), false, false);
+        (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__ChatBubble_classes_js_4ceb888a__.CLASSES.slot.header, local.class, local.className)
+            })), false, false);
         return _el$;
     })();
+};
 const ChatBubbleHeader = ChatBubbleHeader_ChatBubbleHeader;
 export { ChatBubbleHeader as default };

package/dist/components/chatbubble/ChatBubbleMessage.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ChatBubbleMessageProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps & {
     color?: "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error";

package/dist/components/chatbubble/ChatBubbleMessage.js

@@ -1,24 +1,23 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const ChatBubbleMessage_ChatBubbleMessage = (props)=>{
-    const bubbleClass = (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-        "chat-bubble": true,
-        "chat-bubble-neutral": "neutral" === props.color,
-        "chat-bubble-primary": "primary" === props.color,
-        "chat-bubble-secondary": "secondary" === props.color,
-        "chat-bubble-accent": "accent" === props.color,
-        "chat-bubble-info": "info" === props.color,
-        "chat-bubble-success": "success" === props.color,
-        "chat-bubble-warning": "warning" === props.color,
-        "chat-bubble-error": "error" === props.color
-    });
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "color",
+        "class",
+        "className"
+    ]);
+    const colorClass = ()=>{
+        if (!local.color) return;
+        return __WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.color[local.color];
+    };
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
+        (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)(bubbleClass, props.class);
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ChatBubble_classes_js_4ceb888a__.CLASSES.slot.message, colorClass(), local.class, local.className);
             }
         }), false, false);
         return _el$;

package/dist/components/chatbubble/ChatBubbleTime.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 export type ChatBubbleTimeProps = JSX.HTMLAttributes<HTMLTimeElement> & IComponentBaseProps;
 declare const ChatBubbleTime: (props: ChatBubbleTimeProps) => JSX.Element;

package/dist/components/chatbubble/ChatBubbleTime.js

@@ -1,14 +1,20 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__ChatBubble_classes_js_4ceb888a__ from "./ChatBubble.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<time>");
-const ChatBubbleTime = (props)=>(()=>{
+const ChatBubbleTime = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className"
+    ]);
+    return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(props, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("text-xs opacity-50", props.class);
-            }
-        }), false, false);
+        (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__ChatBubble_classes_js_4ceb888a__.CLASSES.slot.time, local.class, local.className)
+            })), false, false);
         return _el$;
     })();
+};
 const chatbubble_ChatBubbleTime = ChatBubbleTime;
 export { chatbubble_ChatBubbleTime as default };

package/dist/components/checkbox/Checkbox.classes.d.ts

@@ -0,0 +1,17 @@
+export declare const CLASSES: {
+    readonly base: "checkbox";
+    readonly slot: {
+        readonly input: "checkbox__input";
+        readonly control: "checkbox__control";
+        readonly indicator: "checkbox__indicator";
+        readonly content: "checkbox__content";
+        readonly description: "checkbox__description";
+    };
+    readonly variant: {
+        readonly primary: "checkbox--primary";
+        readonly secondary: "checkbox--secondary";
+    };
+    readonly flag: {
+        readonly disabled: "checkbox--disabled";
+    };
+};

package/dist/components/checkbox/Checkbox.classes.js

@@ -0,0 +1,18 @@
+const CLASSES = {
+    base: "checkbox",
+    slot: {
+        input: "checkbox__input",
+        control: "checkbox__control",
+        indicator: "checkbox__indicator",
+        content: "checkbox__content",
+        description: "checkbox__description"
+    },
+    variant: {
+        primary: "checkbox--primary",
+        secondary: "checkbox--secondary"
+    },
+    flag: {
+        disabled: "checkbox--disabled"
+    }
+};
+export { CLASSES };

package/dist/components/checkbox/Checkbox.js

@@ -2,17 +2,16 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Checkbox.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=checkbox-default-indicator--indeterminate fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-width=3 viewBox="0 0 24 24"><line x1=21 x2=3 y1=12 y2=12>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=checkbox__description data-slot=description>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=checkbox__content data-slot=checkbox-content>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=checkbox><input><span class=checkbox__control data-slot=checkbox-control aria-hidden=true><span class=checkbox__indicator data-slot=checkbox-indicator>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=checkbox-default-indicator--checkmark fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox="0 0 17 18"><polyline points="1 9 7 14 15 4">');
+import * as __WEBPACK_EXTERNAL_MODULE__checkbox_group_context_js_31d5d7d2__ from "../checkbox-group/context.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__ from "./Checkbox.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=checkbox-default-indicator--indeterminate fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-width=3 viewBox="0 0 24 24"><line x1=21 x2=3 y1=12 y2=12>'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input><span><span>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=checkbox-default-indicator--checkmark fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox="0 0 17 18"><polyline points="1 9 7 14 15 4">');
 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 VARIANT_CLASS_MAP = {
-    primary: "checkbox--primary",
-    secondary: "checkbox--secondary"
-};
 const Checkbox_Checkbox = (props)=>{
     let inputRef;
+    const group = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(__WEBPACK_EXTERNAL_MODULE__checkbox_group_context_js_31d5d7d2__.CheckboxGroupContext);
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
         "className",
@@ -25,6 +24,8 @@ const Checkbox_Checkbox = (props)=>{
         "variant",
         "checked",
         "defaultChecked",
+        "value",
+        "name",
         "disabled",
         "onChange",
         "dataTheme",
@@ -32,11 +33,14 @@ const Checkbox_Checkbox = (props)=>{
     ]);
     const [internalSelected, setInternalSelected] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultChecked));
     const isControlled = ()=>void 0 !== local.checked;
-    const isSelected = ()=>isControlled() ? Boolean(local.checked) : internalSelected();
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]);
+    const optionValue = ()=>null != local.value ? String(local.value) : void 0;
+    const isGrouped = ()=>Boolean(group && void 0 !== optionValue());
+    const isSelected = ()=>isGrouped() ? Boolean(group?.value().includes(optionValue())) : isControlled() ? Boolean(local.checked) : internalSelected();
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(group?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(group?.isInvalid());
     const isIndeterminate = ()=>Boolean(local.isIndeterminate) || Boolean(local.indeterminate);
-    const variant = ()=>local.variant ?? "primary";
+    const variant = ()=>local.variant ?? group?.variant() ?? "primary";
+    const name = ()=>local.name ?? group?.name();
     const hasContent = ()=>null != local.children || null != local.description;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (!inputRef) return;
@@ -46,17 +50,52 @@ const Checkbox_Checkbox = (props)=>{
         invokeEventHandler(local.onChange, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
+        if (group && void 0 !== optionValue()) return void group.toggleValue(optionValue(), event.currentTarget.checked, event);
         if (!isControlled()) setInternalSelected(event.currentTarget.checked);
     };
     return (()=>{
-        var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.variant[variant()], isDisabled() && __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "checkbox",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-indeterminate"] () {
+                return isIndeterminate() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            },
+            get ["data-has-description"] () {
+                return null != local.description ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
             inputRef = el;
         }, _el$2);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "checkbox",
-            class: "checkbox__input",
+            type: "checkbox"
+        }, ()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.slot.input
+            }), {
             "data-slot": "checkbox-input",
+            get value () {
+                return local.value;
+            },
+            get name () {
+                return name();
+            },
             get checked () {
                 return isSelected();
             },
@@ -71,12 +110,23 @@ const Checkbox_Checkbox = (props)=>{
             },
             onChange: handleChange
         }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.slot.control
+            }), {
+            "data-slot": "checkbox-control",
+            "aria-hidden": "true"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.slot.indicator
+            }), {
+            "data-slot": "checkbox-indicator"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return isIndeterminate();
             },
             get fallback () {
-                return _tmpl$6();
+                return _tmpl$5();
             },
             get children () {
                 return _tmpl$();
@@ -87,7 +137,12 @@ const Checkbox_Checkbox = (props)=>{
                 return hasContent();
             },
             get children () {
-                var _el$6 = _tmpl$4();
+                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)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.slot.content
+                    }), {
+                    "data-slot": "checkbox-content"
+                }), false, true);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
                     get when () {
                         return local.children;
@@ -104,6 +159,11 @@ const Checkbox_Checkbox = (props)=>{
                     },
                     get children () {
                         var _el$8 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Checkbox_classes_js_b04c974d__.CLASSES.slot.description
+                            }), {
+                            "data-slot": "description"
+                        }), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.description);
                         return _el$8;
                     }
@@ -111,27 +171,6 @@ const Checkbox_Checkbox = (props)=>{
                 return _el$6;
             }
         }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("checkbox", VARIANT_CLASS_MAP[variant()], isDisabled() && "checkbox--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isSelected() ? "true" : "false", _v$4 = isIndeterminate() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false", _v$6 = isInvalid() ? "true" : "false", _v$7 = null != local.description ? "true" : "false", _v$8 = isDisabled() ? "true" : "false";
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-selected", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-indeterminate", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.i = _v$5);
-            _v$6 !== _p$.n && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-invalid", _p$.n = _v$6);
-            _v$7 !== _p$.s && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-has-description", _p$.s = _v$7);
-            _v$8 !== _p$.h && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.h = _v$8);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0,
-            n: void 0,
-            s: void 0,
-            h: void 0
-        });
         return _el$;
     })();
 };

package/dist/components/checkbox-group/CheckboxGroup.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "checkbox-group";
+    readonly variant: {
+        readonly primary: "checkbox-group--primary";
+        readonly secondary: "checkbox-group--secondary";
+    };
+    readonly flag: {
+        readonly disabled: "checkbox-group--disabled";
+        readonly invalid: "checkbox-group--invalid";
+    };
+};

package/dist/components/checkbox-group/CheckboxGroup.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "checkbox-group",
+    variant: {
+        primary: "checkbox-group--primary",
+        secondary: "checkbox-group--secondary"
+    },
+    flag: {
+        disabled: "checkbox-group--disabled",
+        invalid: "checkbox-group--invalid"
+    }
+};
+export { CLASSES };

package/dist/components/checkbox-group/CheckboxGroup.css

@@ -0,0 +1,10 @@
+@layer components {
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .checkbox-group [data-slot="checkbox"] {
+    margin-top: 1rem;
+  }
+}

package/dist/components/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,18 @@
+import "./CheckboxGroup.css";
+import { type Component, type JSX } from "solid-js";
+import type { CheckboxVariant } from "../checkbox";
+import type { IComponentBaseProps } from "../types";
+export type CheckboxGroupVariant = CheckboxVariant;
+export type CheckboxGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    children?: JSX.Element | ((values: string[]) => JSX.Element);
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    name?: string;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    variant?: CheckboxGroupVariant;
+};
+declare const CheckboxGroup: Component<CheckboxGroupProps>;
+export default CheckboxGroup;

package/dist/components/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,94 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./CheckboxGroup.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__CheckboxGroup_classes_js_352c9ffa__ from "./CheckboxGroup.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>");
+const CheckboxGroup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "value",
+        "defaultValue",
+        "onChange",
+        "name",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "variant",
+        "role"
+    ]);
+    const [internalValue, setInternalValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultValue ?? []);
+    const isControlled = ()=>void 0 !== local.value;
+    const selectedValues = ()=>isControlled() ? local.value ?? [] : internalValue();
+    const variant = ()=>local.variant ?? "primary";
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
+    const isInvalid = ()=>Boolean(local.isInvalid);
+    const handleToggle = (optionValue, checked)=>{
+        const currentValues = selectedValues();
+        const nextValues = checked ? currentValues.includes(optionValue) ? currentValues : [
+            ...currentValues,
+            optionValue
+        ] : currentValues.filter((value)=>value !== optionValue);
+        if (!isControlled()) setInternalValue(nextValues);
+        local.onChange?.(nextValues);
+    };
+    const contextValue = {
+        value: selectedValues,
+        name: ()=>local.name,
+        variant,
+        isDisabled,
+        isInvalid,
+        toggleValue: (optionValue, checked, event)=>{
+            if (event.defaultPrevented || isDisabled()) return;
+            handleToggle(optionValue, checked);
+        }
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__context_js_80e2871f__.CheckboxGroupContext.Provider, {
+        value: contextValue,
+        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 role () {
+                    return local.role ?? "group";
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                "data-slot": "checkbox-group",
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : "false";
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : "false";
+                },
+                get ["class"] () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__CheckboxGroup_classes_js_352c9ffa__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_classes_js_352c9ffa__.CLASSES.variant[variant()], isDisabled() && __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_classes_js_352c9ffa__.CLASSES.flag.disabled, isInvalid() && __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_classes_js_352c9ffa__.CLASSES.flag.invalid, local.class, local.className);
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
+                var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>"function" == typeof local.children);
+                return ()=>_c$() ? local.children(selectedValues()) : local.children;
+            })());
+            return _el$;
+        }
+    });
+};
+const checkbox_group_CheckboxGroup = CheckboxGroup;
+export { checkbox_group_CheckboxGroup as default };

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

@@ -0,0 +1,11 @@
+import { type Accessor } from "solid-js";
+import type { CheckboxVariant } from "../checkbox";
+export type CheckboxGroupContextValue = {
+    value: Accessor<string[]>;
+    name: Accessor<string | undefined>;
+    variant: Accessor<CheckboxVariant>;
+    isDisabled: Accessor<boolean>;
+    isInvalid: Accessor<boolean>;
+    toggleValue: (optionValue: string, checked: boolean, event: Event) => void;
+};
+export declare const CheckboxGroupContext: import("solid-js").Context<CheckboxGroupContextValue | undefined>;

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

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

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

@@ -0,0 +1,4 @@
+import CheckboxGroup from "./CheckboxGroup";
+export type { CheckboxGroupProps, CheckboxGroupVariant } from "./CheckboxGroup";
+export { CheckboxGroup };
+export default CheckboxGroup;

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

@@ -0,0 +1,4 @@
+import * as __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_js_11417210__ from "./CheckboxGroup.js";
+const checkbox_group = __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_js_11417210__["default"];
+var __webpack_exports__CheckboxGroup = __WEBPACK_EXTERNAL_MODULE__CheckboxGroup_js_11417210__["default"];
+export { checkbox_group as default, __webpack_exports__CheckboxGroup as CheckboxGroup };