@telia/teddy 0.0.61 → 0.0.63

package/dist/components/breadcrumbs/breadcrumbs-link.d.ts

@@ -9,7 +9,7 @@ export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
     disableVisited?: boolean | undefined;
     ensureTargetArea?: boolean | undefined;
     silent?: boolean | undefined;
-    variant: "navigation" | "text" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+    variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
 } & React.RefAttributes<HTMLAnchorElement>, "ref">, "variant"> & {
     home?: boolean | undefined;
 } & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -15,7 +15,7 @@ export declare const Breadcrumbs: import('react').ForwardRefExoticComponent<Omit
         disableVisited?: boolean | undefined;
         ensureTargetArea?: boolean | undefined;
         silent?: boolean | undefined;
-        variant: "navigation" | "text" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
     } & import('react').RefAttributes<HTMLAnchorElement>, "ref">, "variant"> & {
         home?: boolean | undefined;
     } & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/components/card/card-illustration.d.ts

@@ -9,7 +9,7 @@ export type IllustrationProps = React.ComponentPropsWithoutRef<'div'> & {
 /** The illustration for the card */
 export declare const Illustration: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /** The inset allows make the image bleed out to the edges */
-    inset?: "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
+    inset?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
     rounded?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/card/card-link.d.ts

@@ -7,5 +7,5 @@ export declare const Link: React.ForwardRefExoticComponent<Omit<Omit<React.Detai
     disableVisited?: boolean | undefined;
     ensureTargetArea?: boolean | undefined;
     silent?: boolean | undefined;
-    variant: "navigation" | "text" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+    variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
 } & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

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

@@ -13,7 +13,7 @@ export declare const Card: import('react').ForwardRefExoticComponent<RootProps &
     Button: import('react').ForwardRefExoticComponent<import('..').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
     Content: import('react').ForwardRefExoticComponent<ContentProps & import('react').RefAttributes<HTMLDivElement>>;
     Illustration: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        inset?: "all" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom" | "left" | "right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
+        inset?: "all" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-right-left" | "bottom-left-right" | "top-bottom" | "left-right" | undefined;
         rounded?: boolean | undefined;
     } & import('react').RefAttributes<HTMLDivElement>>;
     Line: import('react').ForwardRefExoticComponent<LineProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -22,7 +22,7 @@ export declare const Card: import('react').ForwardRefExoticComponent<RootProps &
         disableVisited?: boolean | undefined;
         ensureTargetArea?: boolean | undefined;
         silent?: boolean | undefined;
-        variant: "navigation" | "text" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
+        variant: "text" | "navigation" | "text-negative" | "standalone" | "standalone-negative" | "navigation-negative";
     } & import('react').RefAttributes<HTMLAnchorElement>, "ref"> & import('react').RefAttributes<HTMLAnchorElement>>;
     Slot: import('react').ForwardRefExoticComponent<SlotProps & import('react').RefAttributes<HTMLDivElement>>;
     Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/checkbox/checkbox-group-item.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_checkbox_checkboxLabel = require("./checkbox-label.cjs");
+const components_checkbox_checkboxTrigger = require("./checkbox-trigger.cjs");
+const components_checkbox_checkboxGroup = require("./checkbox-group.cjs");
+const components_flex_flex = require("../flex/flex.cjs");
+const tokens_spacing_variables = require("../../tokens/spacing/variables.cjs");
+const components_checkbox_checkboxGroupList = require("./checkbox-group-list.cjs");
+const Item = React.forwardRef(
+  ({ children, value, ...props }, forwardedRef) => {
+    const rootContext = React.useContext(components_checkbox_checkboxGroup.CheckboxGroupContext);
+    const listContext = React.useContext(components_checkbox_checkboxGroupList.ListContext);
+    const isRegistered = React.useRef(false);
+    const fallbackId = React.useId();
+    const id = props.id || fallbackId;
+    if (!rootContext) {
+      throw new Error("CheckboxGroup.Item must be used within a CheckboxGroup");
+    }
+    const isDisabled = rootContext.disabled || props.disabled;
+    const checked = rootContext.isSelected(value);
+    const isIndeterminate = rootContext.isIndeterminate(value);
+    const childrenNodes = rootContext.getChildren(value);
+    const isParent = childrenNodes.length > 0;
+    const ariaControls = isParent ? childrenNodes.map((child) => child.id) : void 0;
+    React.useEffect(() => {
+      if (listContext.parentValue && !isRegistered.current) {
+        rootContext.registerChild({ value, parentValue: listContext.parentValue, id });
+        isRegistered.current = true;
+      }
+    }, [listContext.parentValue, value, rootContext, id]);
+    return /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", ml: `calc(${listContext.level - 1} * ${tokens_spacing_variables.teddySpacing250})`, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(components_checkbox_checkboxLabel.Label, { ref: forwardedRef, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components_checkbox_checkboxTrigger.Trigger,
+        {
+          name: rootContext.name,
+          disabled: isDisabled,
+          required: rootContext.required,
+          checked: isIndeterminate ? "indeterminate" : checked,
+          onCheckedChange: () => {
+            if (listContext.parentValue) {
+              rootContext.toggleItem(value);
+            } else {
+              rootContext.toggleParent(value);
+            }
+          },
+          id,
+          "aria-checked": isIndeterminate ? "mixed" : checked,
+          "aria-controls": ariaControls == null ? void 0 : ariaControls.join(" ")
+        }
+      ),
+      children
+    ] }) }) });
+  }
+);
+Item.displayName = "CheckboxGroup.Item";
+exports.Item = Item;

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { LabelProps } from './checkbox-label';
+
+export type ItemProps = Omit<LabelProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> & {
+    value: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+export declare const Item: React.ForwardRefExoticComponent<Omit<LabelProps, "defaultChecked" | "checked" | "onCheckedChange"> & {
+    value: string;
+    disabled?: boolean | undefined;
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useContext, useRef, useId, useEffect } from "react";
+import { Label } from "./checkbox-label.js";
+import { Trigger } from "./checkbox-trigger.js";
+import { CheckboxGroupContext } from "./checkbox-group.js";
+import { Flex } from "../flex/flex.js";
+import { teddySpacing250 } from "../../tokens/spacing/variables.js";
+import { ListContext } from "./checkbox-group-list.js";
+const Item = React__default.forwardRef(
+  ({ children, value, ...props }, forwardedRef) => {
+    const rootContext = useContext(CheckboxGroupContext);
+    const listContext = useContext(ListContext);
+    const isRegistered = useRef(false);
+    const fallbackId = useId();
+    const id = props.id || fallbackId;
+    if (!rootContext) {
+      throw new Error("CheckboxGroup.Item must be used within a CheckboxGroup");
+    }
+    const isDisabled = rootContext.disabled || props.disabled;
+    const checked = rootContext.isSelected(value);
+    const isIndeterminate = rootContext.isIndeterminate(value);
+    const childrenNodes = rootContext.getChildren(value);
+    const isParent = childrenNodes.length > 0;
+    const ariaControls = isParent ? childrenNodes.map((child) => child.id) : void 0;
+    useEffect(() => {
+      if (listContext.parentValue && !isRegistered.current) {
+        rootContext.registerChild({ value, parentValue: listContext.parentValue, id });
+        isRegistered.current = true;
+      }
+    }, [listContext.parentValue, value, rootContext, id]);
+    return /* @__PURE__ */ jsx(Flex, { direction: "column", ml: `calc(${listContext.level - 1} * ${teddySpacing250})`, asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Label, { ref: forwardedRef, ...props, children: [
+      /* @__PURE__ */ jsx(
+        Trigger,
+        {
+          name: rootContext.name,
+          disabled: isDisabled,
+          required: rootContext.required,
+          checked: isIndeterminate ? "indeterminate" : checked,
+          onCheckedChange: () => {
+            if (listContext.parentValue) {
+              rootContext.toggleItem(value);
+            } else {
+              rootContext.toggleParent(value);
+            }
+          },
+          id,
+          "aria-checked": isIndeterminate ? "mixed" : checked,
+          "aria-controls": ariaControls == null ? void 0 : ariaControls.join(" ")
+        }
+      ),
+      children
+    ] }) }) });
+  }
+);
+Item.displayName = "CheckboxGroup.Item";
+export {
+  Item
+};

package/dist/components/checkbox/checkbox-group-label.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_checkbox_checkboxGroup = require("./checkbox-group.cjs");
+const clsx = require("clsx");
+const components_checkbox_checkboxLabel = require("./checkbox-label.cjs");
+const components_label_label = require("../label/label.cjs");
+const components_text_text = require("../text/text.cjs");
+const GroupLabel = React.forwardRef((props, forwardedRef) => {
+  const rootContext = React.useContext(components_checkbox_checkboxGroup.CheckboxGroupContext);
+  const fallbackId = React.useId();
+  const id = props.id || fallbackId;
+  const classes = clsx([components_checkbox_checkboxLabel.styles[`${components_checkbox_checkboxLabel.rootClassName}__label`]], props.className);
+  React.useEffect(() => {
+    rootContext == null ? void 0 : rootContext.setLabelId(id);
+  }, [id, rootContext]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components_label_label.Label,
+    {
+      asChild: true,
+      disabled: rootContext == null ? void 0 : rootContext.disabled,
+      isRequired: rootContext == null ? void 0 : rootContext.required,
+      ...props,
+      className: classes,
+      id: rootContext == null ? void 0 : rootContext.labelId,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx(components_text_text.Text, { children: props.children })
+    }
+  );
+});
+GroupLabel.displayName = "GroupLabel";
+exports.GroupLabel = GroupLabel;

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Label } from '../label';
+
+export type GroupLabelProps = React.ComponentPropsWithoutRef<typeof Label>;
+export declare const GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<import('@radix-ui/react-label').LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
+    disabled?: boolean | undefined;
+    isRequired?: boolean | undefined;
+} & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useId } from "react";
+import { CheckboxGroupContext } from "./checkbox-group.js";
+import clsx from "clsx";
+import { s as styles, rootClassName } from "./checkbox-label.js";
+import { Label } from "../label/label.js";
+import { Text } from "../text/text.js";
+const GroupLabel = React__default.forwardRef((props, forwardedRef) => {
+  const rootContext = React__default.useContext(CheckboxGroupContext);
+  const fallbackId = useId();
+  const id = props.id || fallbackId;
+  const classes = clsx([styles[`${rootClassName}__label`]], props.className);
+  React__default.useEffect(() => {
+    rootContext == null ? void 0 : rootContext.setLabelId(id);
+  }, [id, rootContext]);
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      asChild: true,
+      disabled: rootContext == null ? void 0 : rootContext.disabled,
+      isRequired: rootContext == null ? void 0 : rootContext.required,
+      ...props,
+      className: classes,
+      id: rootContext == null ? void 0 : rootContext.labelId,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx(Text, { children: props.children })
+    }
+  );
+});
+GroupLabel.displayName = "GroupLabel";
+export {
+  GroupLabel
+};

package/dist/components/checkbox/checkbox-group-list.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_flex_flex = require("../flex/flex.cjs");
+const components_checkbox_checkboxGroup = require("./checkbox-group.cjs");
+const ListContext = React.createContext({
+  parentValue: void 0,
+  level: 0
+});
+const List = React.forwardRef((props, forwardedRef) => {
+  const { children, parentValue, ...rest } = props;
+  const rootContext = React.useContext(components_checkbox_checkboxGroup.CheckboxGroupContext);
+  const listContext = React.useContext(ListContext);
+  const level = typeof listContext.level === "number" ? listContext.level + 1 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ListContext.Provider, { value: { parentValue, level }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    components_flex_flex.Flex,
+    {
+      asChild: true,
+      role: "group",
+      "aria-labelledby": rootContext == null ? void 0 : rootContext.labelId,
+      align: "start",
+      direction: (rootContext == null ? void 0 : rootContext.direction) || "column",
+      dir: (rootContext == null ? void 0 : rootContext.direction) || "column",
+      gapX: "200",
+      gapY: "50",
+      m: "0",
+      p: "0",
+      ...rest,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children })
+    }
+  ) });
+});
+List.displayName = "List";
+exports.List = List;
+exports.ListContext = ListContext;

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+export type ListProps = Omit<React.ComponentPropsWithoutRef<typeof Flex>, 'as' | 'asChild'> & {
+    parentValue?: string;
+};
+export declare const ListContext: React.Context<{
+    parentValue: string | undefined;
+    level: number;
+}>;
+declare const List: React.ForwardRefExoticComponent<Omit<Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    asChild: true;
+    as?: undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as?: "span" | undefined;
+    asChild?: false | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as: "div";
+    asChild?: false | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "as" | "asChild"> & {
+    parentValue?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { List };

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

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { Flex } from "../flex/flex.js";
+import { CheckboxGroupContext } from "./checkbox-group.js";
+const ListContext = React__default.createContext({
+  parentValue: void 0,
+  level: 0
+});
+const List = React__default.forwardRef((props, forwardedRef) => {
+  const { children, parentValue, ...rest } = props;
+  const rootContext = React__default.useContext(CheckboxGroupContext);
+  const listContext = React__default.useContext(ListContext);
+  const level = typeof listContext.level === "number" ? listContext.level + 1 : 0;
+  return /* @__PURE__ */ jsx(ListContext.Provider, { value: { parentValue, level }, children: /* @__PURE__ */ jsx(
+    Flex,
+    {
+      asChild: true,
+      role: "group",
+      "aria-labelledby": rootContext == null ? void 0 : rootContext.labelId,
+      align: "start",
+      direction: (rootContext == null ? void 0 : rootContext.direction) || "column",
+      dir: (rootContext == null ? void 0 : rootContext.direction) || "column",
+      gapX: "200",
+      gapY: "50",
+      m: "0",
+      p: "0",
+      ...rest,
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsx("ul", { children })
+    }
+  ) });
+});
+List.displayName = "List";
+export {
+  List,
+  ListContext
+};

package/dist/components/checkbox/checkbox-group.cjs

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const components_flex_flex = require("../flex/flex.cjs");
+const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
+const Group = React.forwardRef(
+  ({
+    children,
+    direction = "column",
+    name,
+    required = false,
+    disabled = false,
+    defaultValue,
+    as = "div",
+    asChild = false,
+    value: controlledValue,
+    onValueChange,
+    ...props
+  }, forwardRef) => {
+    const [value = [], setValue] = reactUseControllableState.useControllableState({
+      prop: controlledValue,
+      defaultProp: defaultValue || [],
+      onChange: onValueChange
+    });
+    const [labelId, setLabelId] = React.useState(void 0);
+    const [checkboxHierarchy, setCheckboxHierarchy] = React.useState([]);
+    const getChildren = React.useCallback(
+      (parentValue) => checkboxHierarchy.filter((node) => node.parentValue === parentValue),
+      [checkboxHierarchy]
+    );
+    const toggleItem = React.useCallback(
+      (itemValue) => {
+        setValue((prev) => {
+          var _a;
+          const newValue = (prev == null ? void 0 : prev.includes(itemValue)) ? prev.filter((v) => v !== itemValue) : [...prev || [], itemValue];
+          const parent = (_a = checkboxHierarchy.find((node) => node.value === itemValue)) == null ? void 0 : _a.parentValue;
+          if (parent) {
+            const siblings = getChildren(parent);
+            const allSiblingsSelected = siblings.every((sibling) => newValue.includes(sibling.value));
+            return allSiblingsSelected ? [...newValue, parent] : newValue.filter((v) => v !== parent);
+          }
+          return newValue;
+        });
+      },
+      [setValue, checkboxHierarchy, getChildren]
+    );
+    const toggleParent = React.useCallback(
+      (parentValue) => {
+        setValue((prev) => {
+          const children2 = getChildren(parentValue);
+          const allChildrenSelected = children2.every((child) => prev == null ? void 0 : prev.includes(child.value));
+          const parentSelected = prev == null ? void 0 : prev.includes(parentValue);
+          if (allChildrenSelected && parentSelected) {
+            return prev == null ? void 0 : prev.filter((v) => v !== parentValue && !children2.some((child) => child.value === v));
+          } else {
+            return [.../* @__PURE__ */ new Set([...prev || [], parentValue, ...children2.map((child) => child.value)])];
+          }
+        });
+      },
+      [setValue, getChildren]
+    );
+    const isSelected = React.useCallback((itemValue) => (value == null ? void 0 : value.includes(itemValue)) || false, [value]);
+    const isIndeterminate = React.useCallback(
+      (parentValue) => {
+        const children2 = getChildren(parentValue);
+        if (children2.length === 0)
+          return false;
+        const selectedChildren = children2.filter((child) => (value == null ? void 0 : value.includes(child.value)) || false);
+        return selectedChildren.length > 0 && selectedChildren.length < children2.length;
+      },
+      [getChildren, value]
+    );
+    const registerChild = React.useCallback((node) => {
+      setCheckboxHierarchy((prev) => [...prev, node]);
+    }, []);
+    const contextValue = React.useMemo(
+      () => ({
+        name,
+        required,
+        disabled,
+        direction,
+        value,
+        toggleItem,
+        toggleParent,
+        isSelected,
+        isIndeterminate,
+        registerChild,
+        labelId,
+        setLabelId,
+        getChildren
+      }),
+      [
+        name,
+        required,
+        disabled,
+        direction,
+        value,
+        toggleItem,
+        toggleParent,
+        isSelected,
+        isIndeterminate,
+        registerChild,
+        labelId,
+        setLabelId,
+        getChildren
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      components_flex_flex.Flex,
+      {
+        direction: "column",
+        ref: forwardRef,
+        "data-disabled": disabled ? "" : void 0,
+        ...asChild ? { asChild: true } : { as },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+const CheckboxGroupContext = React.createContext(void 0);
+Group.displayName = "CheckboxGroup";
+exports.CheckboxGroupContext = CheckboxGroupContext;
+exports.Group = Group;

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

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+import { Flex } from '../flex';
+
+export type GroupProps = Omit<React.ComponentPropsWithoutRef<typeof Flex>, 'direction' | 'value' | 'onValueChange' | 'defaultValue'> & {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    defaultValue?: string[];
+    value?: string[];
+    direction?: 'row' | 'column';
+    onValueChange?: (value: string[]) => void;
+};
+export declare const Group: React.ForwardRefExoticComponent<Omit<Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    asChild: true;
+    as?: undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as?: "span" | undefined;
+    asChild?: false | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<import('../../utils/generate-styling/flex').FlexChildren & import('../../utils/generate-styling/grid').GridChildren & import('../../utils/generate-styling/position').PositionProps & import('../../utils/generate-styling/inset').InsetProps & import('../../utils/generate-styling/margin').MarginProps & import('../../utils/generate-styling/padding').PaddingProps & import('../../utils/generate-styling/width').WidthProps & import('../../utils/generate-styling/height').HeightProps & import('../../utils/generate-styling/color').ColorProps & {
+    display?: import('../../utils/generate-styling').DisplayChildren | undefined;
+} & import('../../utils/generate-styling/gap').GapProps & {
+    align?: import('../../utils/generate-styling/align').Align | undefined;
+    justify?: import('../../utils/generate-styling/justify').Justify | undefined;
+} & import('../../utils/generate-styling/flex').FlexLayout & {
+    as: "div";
+    asChild?: false | undefined;
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "defaultValue" | "direction" | "value" | "onValueChange"> & {
+    name?: string | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    defaultValue?: string[] | undefined;
+    value?: string[] | undefined;
+    direction?: "row" | "column" | undefined;
+    onValueChange?: ((value: string[]) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+type CheckboxNode = {
+    value: string;
+    parentValue?: string;
+    id: string;
+};
+type CheckboxGroupContextValue = {
+    name?: string;
+    required: boolean;
+    disabled: boolean;
+    value: string[];
+    direction: 'row' | 'column';
+    toggleItem: (itemValue: string) => void;
+    toggleParent: (parentValue: string) => void;
+    isSelected: (value: string) => boolean;
+    isIndeterminate: (value: string) => boolean;
+    registerChild: (item: CheckboxNode) => void;
+    labelId: string | undefined;
+    setLabelId: (id: string) => void;
+    getChildren: (parentValue: string) => CheckboxNode[];
+};
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue | undefined>;
+export {};