@pathscale/ui 1.1.34 → 1.1.36

package/dist/components/card/Card.css

@@ -0,0 +1,110 @@
+@layer components {
+  .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    border-radius: var(--card-radius, calc(var(--radius-box, 0.75rem) * 2));
+    padding: var(--card-padding, 1rem);
+    color: var(--card-fg, var(--color-base-content));
+    background-color: var(--card-bg, var(--color-base-100));
+    border: 1px solid var(--card-border, transparent);
+    box-shadow:
+      var(
+        --card-shadow,
+        0 8px 24px -18px rgb(0 0 0 / 0.45),
+        0 6px 14px -10px rgb(0 0 0 / 0.28)
+      );
+    transition:
+      background-color 160ms ease,
+      border-color 160ms ease,
+      box-shadow 200ms ease,
+      transform 200ms ease;
+  }
+
+  .card:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  .card--default {
+    --card-bg: var(--color-base-100);
+    --card-border: transparent;
+    --card-shadow:
+      0 8px 24px -18px rgb(0 0 0 / 0.45),
+      0 6px 14px -10px rgb(0 0 0 / 0.28);
+    --card-hover-shadow:
+      0 16px 30px -20px rgb(0 0 0 / 0.5),
+      0 8px 18px -12px rgb(0 0 0 / 0.35);
+  }
+
+  .card--flat {
+    --card-bg: var(--color-base-200);
+    --card-border: transparent;
+    --card-shadow: none;
+    --card-hover-shadow: none;
+  }
+
+  .card--bordered {
+    --card-bg: var(--color-base-100);
+    --card-border: var(--color-base-300);
+    --card-shadow: none;
+    --card-hover-shadow:
+      0 6px 20px -16px rgb(0 0 0 / 0.4),
+      0 5px 12px -10px rgb(0 0 0 / 0.28);
+  }
+
+  .card--shadow {
+    --card-bg: var(--color-base-100);
+    --card-border: transparent;
+    --card-shadow:
+      0 20px 40px -24px rgb(0 0 0 / 0.55),
+      0 12px 20px -14px rgb(0 0 0 / 0.35);
+    --card-hover-shadow:
+      0 26px 44px -26px rgb(0 0 0 / 0.6),
+      0 14px 24px -15px rgb(0 0 0 / 0.4);
+  }
+
+  .card--hoverable,
+  .card--pressable {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .card--hoverable:hover,
+    .card--pressable:hover {
+      box-shadow: var(--card-hover-shadow, var(--card-shadow));
+      transform: translateY(-1px);
+    }
+  }
+
+  .card--pressable:active,
+  .card--pressable[data-pressed="true"] {
+    transform: scale(0.99);
+  }
+
+  .card__header,
+  .card__body,
+  .card__footer {
+    display: flex;
+    width: 100%;
+  }
+
+  .card__header {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .card__body {
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .card__footer {
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}

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

@@ -1,29 +1,29 @@
-import "./card.css";
-import { type JSX } from "solid-js";
-import type { ComponentSize, ComponentVariant, ComponentColor, IComponentBaseProps } from "../types";
-import CardActions from "./CardActions";
-import CardBody from "./CardBody";
-import CardImage from "./CardImage";
-import CardTitle from "./CardTitle";
-export type CardProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
-    size?: ComponentSize;
-    border?: boolean;
-    variant?: Exclude<ComponentVariant, "soft"> | "border";
-    imageFull?: boolean;
-    side?: ComponentSize | boolean;
-    background?: ComponentColor | "base-100" | "base-200" | "base-300";
-    shadow?: "none" | "sm" | "md" | "lg" | "xl";
-    fullWidth?: boolean;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-labelledby"?: string;
-    role?: string;
+import "./Card.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CardVariant = "default" | "flat" | "bordered" | "shadow";
+type CardContextlessProps<T extends HTMLElement> = Omit<JSX.HTMLAttributes<T>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
 };
-declare const Card: {
-    (props: CardProps): JSX.Element;
-    Actions: typeof CardActions;
-    Body: typeof CardBody;
-    Title: typeof CardTitle;
-    Image: typeof CardImage;
+export type CardRootProps = CardContextlessProps<HTMLDivElement> & {
+    variant?: CardVariant;
+    isHoverable?: boolean;
+    isPressable?: boolean;
+};
+export type CardHeaderProps = CardContextlessProps<HTMLDivElement>;
+export type CardBodyProps = CardContextlessProps<HTMLDivElement>;
+export type CardFooterProps = CardContextlessProps<HTMLDivElement>;
+declare const CardRoot: ParentComponent<CardRootProps>;
+declare const CardHeader: Component<CardHeaderProps>;
+declare const CardBody: Component<CardBodyProps>;
+declare const CardFooter: Component<CardFooterProps>;
+declare const Card: ParentComponent<CardRootProps> & {
+    Root: ParentComponent<CardRootProps>;
+    Header: Component<CardHeaderProps>;
+    Body: Component<CardBodyProps>;
+    Content: Component<CardBodyProps>;
+    Footer: Component<CardFooterProps>;
 };
 export default Card;
+export { Card, CardRoot, CardHeader, CardBody, CardFooter };
+export type { CardRootProps as CardProps };

package/dist/components/card/Card.js

@@ -1,73 +1,52 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./card.css";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import "./Card.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__CardActions_js_327b246f__ from "./CardActions.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardBody_js_3648715c__ from "./CardBody.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardImage_js_0ac1c65a__ from "./CardImage.js";
-import * as __WEBPACK_EXTERNAL_MODULE__CardTitle_js_a12d15c2__ from "./CardTitle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__ from "./Card.classes.js";
 var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
-const DYNAMIC_MODIFIERS = {
-    side: {
-        true: "card-side",
-        xs: "card-side-xs",
-        sm: "card-side-sm",
-        md: "card-side-md",
-        lg: "card-side-lg"
-    }
+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 Card = (props)=>{
+const CardRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "size",
-        "border",
-        "variant",
-        "imageFull",
-        "side",
-        "background",
-        "shadow",
-        "fullWidth",
+        "children",
         "class",
         "className",
         "dataTheme",
         "style",
-        "aria-label",
-        "aria-describedby",
-        "aria-labelledby",
-        "role"
+        "variant",
+        "isHoverable",
+        "isPressable",
+        "onKeyDown",
+        "role",
+        "tabIndex"
     ]);
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("card", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
-        "w-full": local.fullWidth,
-        "shadow-sm": "sm" === local.shadow,
-        "shadow-md": "md" === local.shadow,
-        "shadow-lg": "lg" === local.shadow,
-        "shadow-xl": "xl" === local.shadow,
-        "shadow-none": "none" === local.shadow,
-        "bg-base-100": "base-100" === local.background,
-        "bg-base-200": "base-200" === local.background,
-        "bg-base-300": "base-300" === local.background,
-        "bg-primary": "primary" === local.background,
-        "bg-secondary": "secondary" === local.background,
-        "bg-accent": "accent" === local.background,
-        "bg-neutral": "neutral" === local.background,
-        "bg-info": "info" === local.background,
-        "bg-success": "success" === local.background,
-        "bg-warning": "warning" === local.background,
-        "bg-error": "error" === local.background,
-        "card-xl": "xl" === local.size,
-        "card-lg": "lg" === local.size,
-        "card-md": "md" === local.size,
-        "card-sm": "sm" === local.size,
-        "card-xs": "xs" === local.size,
-        "card-dash": "dash" === local.variant,
-        "card-border": false !== local.border || "outline" === local.variant || "border" === local.variant,
-        "image-full": local.imageFull,
-        [DYNAMIC_MODIFIERS.side[local.side?.toString()] ?? ""]: !!local.side
-    }));
+    const variant = ()=>local.variant ?? "default";
+    const handleKeyDown = (event)=>{
+        invokeEventHandler(local.onKeyDown, event);
+        if (event.defaultPrevented || !local.isPressable) return;
+        if ("Enter" !== event.key && " " !== event.key) return;
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        event.currentTarget.click();
+    };
     return (()=>{
         var _el$ = _tmpl$();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            class: classes,
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.variant[variant()], local.isHoverable && __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.flag.isHoverable, local.isPressable && __WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Root.flag.isPressable, local.class, local.className);
+            },
+            "data-slot": "card",
+            get ["data-variant"] () {
+                return variant();
+            },
+            get ["data-hoverable"] () {
+                return local.isHoverable ? "true" : "false";
+            },
+            get ["data-pressable"] () {
+                return local.isPressable ? "true" : "false";
+            },
             get ["data-theme"] () {
                 return local.dataTheme;
             },
@@ -75,24 +54,101 @@ const Card = (props)=>{
                 return local.style;
             },
             get role () {
-                return local.role;
+                return local.role ?? (local.isPressable ? "button" : void 0);
+            },
+            get tabIndex () {
+                return local.tabIndex ?? (local.isPressable ? 0 : void 0);
             },
-            get ["aria-label"] () {
-                return local["aria-label"];
+            onKeyDown: handleKeyDown
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const CardHeader = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    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)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Header.base, local.class, local.className);
             },
-            get ["aria-describedby"] () {
-                return local["aria-describedby"];
+            "data-slot": "card-header",
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
-            get ["aria-labelledby"] () {
-                return local["aria-labelledby"];
+            get style () {
+                return local.style;
             }
-        }), false, false);
-        return _el$;
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const CardBody = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$();
+        (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)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Body.base, local.class, local.className);
+            },
+            "data-slot": "card-body",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const CardFooter = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Card_classes_js_d234b054__.CLASSES.Footer.base, local.class, local.className);
+            },
+            "data-slot": "card-footer",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
     })();
 };
-Card.Actions = __WEBPACK_EXTERNAL_MODULE__CardActions_js_327b246f__["default"];
-Card.Body = __WEBPACK_EXTERNAL_MODULE__CardBody_js_3648715c__["default"];
-Card.Title = __WEBPACK_EXTERNAL_MODULE__CardTitle_js_a12d15c2__["default"];
-Card.Image = __WEBPACK_EXTERNAL_MODULE__CardImage_js_0ac1c65a__["default"];
+const Card = Object.assign(CardRoot, {
+    Root: CardRoot,
+    Header: CardHeader,
+    Body: CardBody,
+    Content: CardBody,
+    Footer: CardFooter
+});
 const card_Card = Card;
-export { card_Card as default };
+export { Card, CardBody, CardFooter, CardHeader, CardRoot, card_Card as default };

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

@@ -1 +1 @@
-export { default, type CardProps } from "./Card";
+export { default, Card, CardRoot, CardHeader, CardBody, CardFooter, type CardProps, type CardVariant, type CardRootProps, type CardHeaderProps, type CardBodyProps, type CardFooterProps, } from "./Card";

package/dist/components/card/index.js

@@ -1,3 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__ from "./Card.js";
+var __webpack_exports__Card = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.Card;
+var __webpack_exports__CardBody = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardBody;
+var __webpack_exports__CardFooter = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardFooter;
+var __webpack_exports__CardHeader = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardHeader;
+var __webpack_exports__CardRoot = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__.CardRoot;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Card_js_d67c086a__["default"];
-export { __webpack_exports__default as default };
+export { __webpack_exports__Card as Card, __webpack_exports__CardBody as CardBody, __webpack_exports__CardFooter as CardFooter, __webpack_exports__CardHeader as CardHeader, __webpack_exports__CardRoot as CardRoot, __webpack_exports__default as default };

package/dist/components/checkbox/Checkbox.js

@@ -2,6 +2,7 @@ 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";
+import * as __WEBPACK_EXTERNAL_MODULE__checkbox_group_context_js_31d5d7d2__ from "../checkbox-group/context.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 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">');
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -13,6 +14,7 @@ const VARIANT_CLASS_MAP = {
 };
 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 +27,8 @@ const Checkbox_Checkbox = (props)=>{
         "variant",
         "checked",
         "defaultChecked",
+        "value",
+        "name",
         "disabled",
         "onChange",
         "dataTheme",
@@ -32,11 +36,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,6 +53,7 @@ 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 (()=>{
@@ -57,6 +65,12 @@ const Checkbox_Checkbox = (props)=>{
             type: "checkbox",
             class: "checkbox__input",
             "data-slot": "checkbox-input",
+            get value () {
+                return local.value;
+            },
+            get name () {
+                return name();
+            },
             get checked () {
                 return isSelected();
             },

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 };