@pathscale/ui 1.1.33 → 1.1.35

package/dist/components/card/Card.js

@@ -1,73 +1,57 @@
 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";
 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 CARD_VARIANT_CLASS = {
+    default: "card--default",
+    flat: "card--flat",
+    bordered: "card--bordered",
+    shadow: "card--shadow"
 };
-const Card = (props)=>{
+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 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)("card", CARD_VARIANT_CLASS[variant()], local.isHoverable && "card--hoverable", local.isPressable && "card--pressable", 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 +59,101 @@ const Card = (props)=>{
                 return local.style;
             },
             get role () {
-                return local.role;
+                return local.role ?? (local.isPressable ? "button" : void 0);
             },
-            get ["aria-label"] () {
-                return local["aria-label"];
+            get tabIndex () {
+                return local.tabIndex ?? (local.isPressable ? 0 : void 0);
+            },
+            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)("card__header", 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)("card__body", 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)("card__footer", 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.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,97 @@
+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__context_js_80e2871f__ from "./context.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const VARIANT_CLASS_MAP = {
+    primary: "checkbox-group--primary",
+    secondary: "checkbox-group--secondary"
+};
+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)("checkbox-group", VARIANT_CLASS_MAP[variant()], isDisabled() && "checkbox-group--disabled", isInvalid() && "checkbox-group--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 };

package/dist/components/chip/Chip.css

@@ -0,0 +1,197 @@
+@layer components {
+  .chip {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.125rem;
+    border-radius: 9999px;
+    border: 1px solid var(--chip-border);
+    font-weight: 500;
+    line-height: 1.25;
+    white-space: nowrap;
+    user-select: none;
+
+    --chip-bg: var(--chip-solid-bg);
+    --chip-fg: var(--chip-solid-fg);
+    --chip-border: transparent;
+    --chip-remove-size: 0.875rem;
+    --chip-remove-hover: color-mix(in oklab, currentColor 14%, transparent);
+    --chip-solid-bg: var(--color-default);
+    --chip-solid-fg: var(--color-default-foreground);
+    --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
+    --chip-flat-fg: var(--color-default-foreground);
+    --chip-bordered-fg: var(--color-default-foreground);
+    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
+
+    background-color: var(--chip-bg);
+    color: var(--chip-fg);
+  }
+
+  .chip[data-disabled="true"] {
+    opacity: 0.5;
+  }
+
+  .chip--sm {
+    min-height: 1.25rem;
+    padding-inline: 0.375rem;
+    padding-block: 0;
+    font-size: 0.6875rem;
+    --chip-remove-size: 0.75rem;
+  }
+
+  .chip--md {
+    min-height: 1.5rem;
+    padding-inline: 0.5rem;
+    padding-block: 0.125rem;
+    font-size: 0.75rem;
+  }
+
+  .chip--lg {
+    min-height: 1.75rem;
+    padding-inline: 0.625rem;
+    padding-block: 0.1875rem;
+    font-size: 0.875rem;
+    --chip-remove-size: 1rem;
+  }
+
+  .chip--solid {
+    --chip-bg: var(--chip-solid-bg);
+    --chip-fg: var(--chip-solid-fg);
+    --chip-border: transparent;
+  }
+
+  .chip--flat {
+    --chip-bg: var(--chip-flat-bg);
+    --chip-fg: var(--chip-flat-fg);
+    --chip-border: transparent;
+  }
+
+  .chip--bordered {
+    --chip-bg: transparent;
+    --chip-fg: var(--chip-bordered-fg);
+    --chip-border: var(--chip-bordered-border);
+  }
+
+  .chip--default {
+    --chip-solid-bg: var(--color-default);
+    --chip-solid-fg: var(--color-default-foreground);
+    --chip-flat-bg: color-mix(in oklab, var(--color-default) 18%, transparent);
+    --chip-flat-fg: var(--color-default-foreground);
+    --chip-bordered-fg: var(--color-default-foreground);
+    --chip-bordered-border: color-mix(in oklab, var(--color-default) 44%, transparent);
+  }
+
+  .chip--primary {
+    --chip-solid-bg: var(--color-primary);
+    --chip-solid-fg: var(--color-primary-content);
+    --chip-flat-bg: color-mix(in oklab, var(--color-primary) 18%, transparent);
+    --chip-flat-fg: var(--color-primary);
+    --chip-bordered-fg: var(--color-primary);
+    --chip-bordered-border: color-mix(in oklab, var(--color-primary) 50%, transparent);
+  }
+
+  .chip--accent {
+    --chip-solid-bg: var(--color-accent);
+    --chip-solid-fg: var(--color-accent-content);
+    --chip-flat-bg: var(--color-accent-soft);
+    --chip-flat-fg: var(--color-accent-soft-foreground);
+    --chip-bordered-fg: var(--color-accent);
+    --chip-bordered-border: color-mix(in oklab, var(--color-accent) 52%, transparent);
+  }
+
+  .chip--success {
+    --chip-solid-bg: var(--color-success);
+    --chip-solid-fg: var(--color-success-content);
+    --chip-flat-bg: var(--color-success-soft);
+    --chip-flat-fg: var(--color-success-soft-foreground);
+    --chip-bordered-fg: var(--color-success);
+    --chip-bordered-border: color-mix(in oklab, var(--color-success) 52%, transparent);
+  }
+
+  .chip--warning {
+    --chip-solid-bg: var(--color-warning);
+    --chip-solid-fg: var(--color-warning-content);
+    --chip-flat-bg: var(--color-warning-soft);
+    --chip-flat-fg: var(--color-warning-soft-foreground);
+    --chip-bordered-fg: var(--color-warning);
+    --chip-bordered-border: color-mix(in oklab, var(--color-warning) 52%, transparent);
+  }
+
+  .chip--danger {
+    --chip-solid-bg: var(--color-danger);
+    --chip-solid-fg: var(--color-danger-foreground);
+    --chip-flat-bg: var(--color-danger-soft);
+    --chip-flat-fg: var(--color-danger-soft-foreground);
+    --chip-bordered-fg: var(--color-danger);
+    --chip-bordered-border: color-mix(in oklab, var(--color-danger) 52%, transparent);
+  }
+
+  .chip__label {
+    padding-inline: 0.125rem;
+  }
+
+  .chip__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .chip__icon > * {
+    width: 0.875rem;
+    height: 0.875rem;
+    pointer-events: none;
+  }
+
+  .chip--sm .chip__icon > * {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .chip--lg .chip__icon > * {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--chip-remove-size);
+    height: var(--chip-remove-size);
+    padding: 0;
+    border: 0;
+    border-radius: 9999px;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+    transition: background-color 120ms ease;
+  }
+
+  .chip__remove-icon,
+  .chip__remove-icon > * {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .chip__remove:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 1px;
+  }
+
+  @media (hover: hover) {
+    .chip__remove:hover {
+      background-color: var(--chip-remove-hover);
+    }
+  }
+
+  .chip__remove:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}