@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/actions/button-group/index.cjs

@@ -0,0 +1,25 @@
+"use client";
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/actions/button-group/index.tsx
+const ButtonGroup = ({ as, orientation = "horizontal", attached = false, fullWidth = false, disabled = false, spacing, className, children, style, ...props }) => {
+	const Component = as ?? "div";
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-button-group", `puzzle-button-group--${orientation}`, attached && "puzzle-button-group--attached", fullWidth && "puzzle-button-group--full-width", disabled && "puzzle-button-group--disabled", className);
+	const groupStyle = {
+		...style,
+		...spacing !== void 0 ? { "--puzzle-button-group-gap": typeof spacing === "number" ? `${spacing}px` : spacing } : {}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		...props,
+		className: classes,
+		style: groupStyle,
+		role: props.role ?? "group",
+		"aria-disabled": disabled || void 0,
+		children: react.Children.map(children, (child) => disabled && (0, react.isValidElement)(child) ? (0, react.cloneElement)(child, { disabled: true }) : child)
+	});
+};
+exports.ButtonGroup = ButtonGroup;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/actions/button-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Children","isValidElement","cloneElement"],"sources":["../../../../src/components/actions/button-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./button-group.css\";\n\ntype ButtonGroupOwnProps<C extends ElementType> = {\n  as?: C;\n  orientation?: \"horizontal\" | \"vertical\";\n  attached?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  spacing?: number | string;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype ButtonGroupProps<C extends ElementType = \"div\"> = ButtonGroupOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof ButtonGroupOwnProps<C> | \"as\">;\n\nconst ButtonGroup = <C extends ElementType = \"div\">({\n  as,\n  orientation = \"horizontal\",\n  attached = false,\n  fullWidth = false,\n  disabled = false,\n  spacing,\n  className,\n  children,\n  style,\n  ...props\n}: ButtonGroupProps<C>) => {\n  const Component = as ?? \"div\";\n\n  const classes = cn(\n    \"puzzle-button-group\",\n    `puzzle-button-group--${orientation}`,\n    attached && \"puzzle-button-group--attached\",\n    fullWidth && \"puzzle-button-group--full-width\",\n    disabled && \"puzzle-button-group--disabled\",\n    className,\n  );\n\n  const groupStyle = {\n    ...style,\n    ...(spacing !== undefined\n      ? {\n          \"--puzzle-button-group-gap\":\n            typeof spacing === \"number\" ? `${spacing}px` : spacing,\n        }\n      : {}),\n  } as ComponentPropsWithRef<C>[\"style\"];\n\n  return (\n    <Component\n      {...props}\n      className={classes}\n      style={groupStyle}\n      role={props.role ?? \"group\"}\n      aria-disabled={disabled || undefined}\n    >\n      {Children.map(children, (child) =>\n        disabled && isValidElement<{ disabled?: boolean }>(child)\n          ? cloneElement(child, { disabled: true })\n          : child,\n      )}\n    </Component>\n  );\n};\n\nexport { ButtonGroup, type ButtonGroupProps };\n"],"mappings":";;;;;;AA6BA,MAAM,eAA8C,EAClD,IACA,cAAc,cACd,WAAW,OACX,YAAY,OACZ,WAAW,OACX,SACA,WACA,UACA,OACA,GAAG,YACsB;CACzB,MAAM,YAAY,MAAM;CAExB,MAAM,WAAA,GAAUA,gBAAAA,GAAAA,CACd,uBACA,wBAAwB,eACxB,YAAY,iCACZ,aAAa,mCACb,YAAY,iCACZ,SACF;CAEA,MAAM,aAAa;EACjB,GAAG;EACH,GAAI,YAAY,KAAA,IACZ,EACE,6BACE,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM,QACnD,IACA,CAAC;CACP;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACJ,WAAW;EACX,OAAO;EACP,MAAM,MAAM,QAAQ;EACpB,iBAAe,YAAY,KAAA;EAE1BC,UAAAA,MAAAA,SAAS,IAAI,WAAW,UACvB,aAAA,GAAYC,MAAAA,eAAAA,CAAuC,KAAK,KAAA,GACpDC,MAAAA,aAAAA,CAAa,OAAO,EAAE,UAAU,KAAK,CAAC,IACtC,KACN;CACS,CAAA;AAEf"}

package/dist/components/actions/button-group/index.d.cts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type ButtonGroupOwnProps<C extends ElementType> = {
+  as?: C;
+  orientation?: "horizontal" | "vertical";
+  attached?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  spacing?: number | string;
+  className?: string;
+  children?: ReactNode;
+};
+type ButtonGroupProps<C extends ElementType = "div"> = ButtonGroupOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof ButtonGroupOwnProps<C> | "as">;
+declare const ButtonGroup: <C extends ElementType = "div">({ as, orientation, attached, fullWidth, disabled, spacing, className, children, style, ...props }: ButtonGroupProps<C>) => import("react").JSX.Element;
+export { ButtonGroup, type ButtonGroupProps };

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

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from "react";
+type ButtonGroupOwnProps<C extends ElementType> = {
+  as?: C;
+  orientation?: "horizontal" | "vertical";
+  attached?: boolean;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  spacing?: number | string;
+  className?: string;
+  children?: ReactNode;
+};
+type ButtonGroupProps<C extends ElementType = "div"> = ButtonGroupOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof ButtonGroupOwnProps<C> | "as">;
+declare const ButtonGroup: <C extends ElementType = "div">({ as, orientation, attached, fullWidth, disabled, spacing, className, children, style, ...props }: ButtonGroupProps<C>) => import("react").JSX.Element;
+export { ButtonGroup, type ButtonGroupProps };

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

@@ -0,0 +1,25 @@
+"use client";
+import "./button-group.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/actions/button-group/index.tsx
+const ButtonGroup = ({ as, orientation = "horizontal", attached = false, fullWidth = false, disabled = false, spacing, className, children, style, ...props }) => {
+	const Component = as ?? "div";
+	const classes = cn("puzzle-button-group", `puzzle-button-group--${orientation}`, attached && "puzzle-button-group--attached", fullWidth && "puzzle-button-group--full-width", disabled && "puzzle-button-group--disabled", className);
+	const groupStyle = {
+		...style,
+		...spacing !== void 0 ? { "--puzzle-button-group-gap": typeof spacing === "number" ? `${spacing}px` : spacing } : {}
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		className: classes,
+		style: groupStyle,
+		role: props.role ?? "group",
+		"aria-disabled": disabled || void 0,
+		children: Children.map(children, (child) => disabled && isValidElement(child) ? cloneElement(child, { disabled: true }) : child)
+	});
+};
+export { ButtonGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/actions/button-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./button-group.css\";\n\ntype ButtonGroupOwnProps<C extends ElementType> = {\n  as?: C;\n  orientation?: \"horizontal\" | \"vertical\";\n  attached?: boolean;\n  fullWidth?: boolean;\n  disabled?: boolean;\n  spacing?: number | string;\n  className?: string;\n  children?: ReactNode;\n};\n\ntype ButtonGroupProps<C extends ElementType = \"div\"> = ButtonGroupOwnProps<C> &\n  Omit<ComponentPropsWithRef<C>, keyof ButtonGroupOwnProps<C> | \"as\">;\n\nconst ButtonGroup = <C extends ElementType = \"div\">({\n  as,\n  orientation = \"horizontal\",\n  attached = false,\n  fullWidth = false,\n  disabled = false,\n  spacing,\n  className,\n  children,\n  style,\n  ...props\n}: ButtonGroupProps<C>) => {\n  const Component = as ?? \"div\";\n\n  const classes = cn(\n    \"puzzle-button-group\",\n    `puzzle-button-group--${orientation}`,\n    attached && \"puzzle-button-group--attached\",\n    fullWidth && \"puzzle-button-group--full-width\",\n    disabled && \"puzzle-button-group--disabled\",\n    className,\n  );\n\n  const groupStyle = {\n    ...style,\n    ...(spacing !== undefined\n      ? {\n          \"--puzzle-button-group-gap\":\n            typeof spacing === \"number\" ? `${spacing}px` : spacing,\n        }\n      : {}),\n  } as ComponentPropsWithRef<C>[\"style\"];\n\n  return (\n    <Component\n      {...props}\n      className={classes}\n      style={groupStyle}\n      role={props.role ?? \"group\"}\n      aria-disabled={disabled || undefined}\n    >\n      {Children.map(children, (child) =>\n        disabled && isValidElement<{ disabled?: boolean }>(child)\n          ? cloneElement(child, { disabled: true })\n          : child,\n      )}\n    </Component>\n  );\n};\n\nexport { ButtonGroup, type ButtonGroupProps };\n"],"mappings":";;;;;;AA6BA,MAAM,eAA8C,EAClD,IACA,cAAc,cACd,WAAW,OACX,YAAY,OACZ,WAAW,OACX,SACA,WACA,UACA,OACA,GAAG,YACsB;CACzB,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,GACd,uBACA,wBAAwB,eACxB,YAAY,iCACZ,aAAa,mCACb,YAAY,iCACZ,SACF;CAEA,MAAM,aAAa;EACjB,GAAG;EACH,GAAI,YAAY,KAAA,IACZ,EACE,6BACE,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM,QACnD,IACA,CAAC;CACP;CAEA,OACE,oBAAC,WAAD;EACE,GAAI;EACJ,WAAW;EACX,OAAO;EACP,MAAM,MAAM,QAAQ;EACpB,iBAAe,YAAY,KAAA;EAE1B,UAAA,SAAS,IAAI,WAAW,UACvB,YAAY,eAAuC,KAAK,IACpD,aAAa,OAAO,EAAE,UAAU,KAAK,CAAC,IACtC,KACN;CACS,CAAA;AAEf"}

package/dist/components/actions/toggle-group/index.cjs

@@ -0,0 +1,124 @@
+"use client";
+const require_index = require("../button/index.cjs");
+;/* empty css                   */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+// src/components/actions/toggle-group/index.tsx
+const ToggleGroupContext = (0, react.createContext)(null);
+const useToggleGroupContext = () => {
+	const context = (0, react.useContext)(ToggleGroupContext);
+	if (!context) throw new Error("ToggleGroup.Item must be rendered inside a ToggleGroup.");
+	return context;
+};
+const ToggleGroupItem = ({ value, disabled = false, onClick, onFocus, onKeyDown, children, ...buttonProps }) => {
+	const context = useToggleGroupContext();
+	const isDisabled = context.disabled || disabled;
+	const isSelected = context.selectedValues.includes(value);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) context.toggleValue(value);
+	};
+	const handleFocus = (event) => {
+		context.rovingFocus.onItemFocus(value);
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented) context.rovingFocus.onItemKeyDown(event, value);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Button, {
+		...buttonProps,
+		ref: context.rovingFocus.getItemRef(value),
+		type: "button",
+		size: context.size,
+		variant: isSelected ? "toggle-active" : "toggle",
+		disabled: isDisabled,
+		tabIndex: context.rovingFocus.getItemTabIndex(value, isDisabled),
+		"aria-pressed": isSelected,
+		"data-state": isSelected ? "on" : "off",
+		"data-disabled": isDisabled ? "true" : void 0,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+const isToggleGroupItem = (child) => (0, react.isValidElement)(child) && child.type === ToggleGroupItem;
+const getToggleGroupItems = (children) => react.Children.toArray(children).flatMap((child) => {
+	if ((0, react.isValidElement)(child) && child.type === react.Fragment) return getToggleGroupItems(child.props.children);
+	return isToggleGroupItem(child) ? [child] : [];
+});
+const ToggleGroupRoot = (props) => {
+	const { type: groupType = "single", value, defaultValue, onValueChange, orientation = "horizontal", size = "md", dir = "ltr", disabled = false, loop = true, required = false, attached = false, fullWidth = false, spacing, children, className, style, role, ...rootProps } = props;
+	const isMultiple = groupType === "multiple";
+	const [uncontrolledValues, setUncontrolledValues] = (0, react.useState)(() => {
+		if (isMultiple) return [...defaultValue ?? []];
+		return defaultValue == null ? [] : [defaultValue];
+	});
+	const controlledValue = isMultiple ? value : value;
+	const isControlled = controlledValue !== void 0;
+	const selectedValues = isControlled ? isMultiple ? controlledValue : controlledValue == null ? [] : [controlledValue] : uncontrolledValues;
+	const toggleValue = (0, react.useCallback)((nextValue) => {
+		const isSelected = selectedValues.includes(nextValue);
+		let nextValues;
+		if (isMultiple) {
+			if (isSelected && required && selectedValues.length === 1) return;
+			nextValues = isSelected ? selectedValues.filter((item) => item !== nextValue) : [...selectedValues, nextValue];
+		} else {
+			if (isSelected && required) return;
+			nextValues = isSelected ? [] : [nextValue];
+		}
+		if (!(nextValues.length !== selectedValues.length || nextValues.some((item, index) => item !== selectedValues[index]))) return;
+		if (!isControlled) setUncontrolledValues(nextValues);
+		if (isMultiple) onValueChange?.(nextValues);
+		else onValueChange?.(nextValues[0]);
+	}, [
+		isControlled,
+		isMultiple,
+		onValueChange,
+		required,
+		selectedValues
+	]);
+	const rovingItems = getToggleGroupItems(children).map((item) => ({
+		id: item.props.value,
+		disabled: disabled || item.props.disabled
+	}));
+	const contextValue = {
+		selectedValues,
+		disabled,
+		size,
+		toggleValue,
+		rovingFocus: (0, _puzzle_ui_hooks.useRovingFocus)({
+			items: rovingItems,
+			orientation,
+			dir,
+			loop,
+			initialActiveId: selectedValues[0]
+		})
+	};
+	const groupStyle = spacing === void 0 ? style : {
+		...style,
+		"--puzzle-toggle-group-gap": typeof spacing === "number" ? `${spacing}px` : spacing
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...rootProps,
+			className: (0, _puzzle_ui_core.cn)("puzzle-toggle-group", className),
+			style: groupStyle,
+			role: role ?? "group",
+			dir,
+			"aria-disabled": disabled || void 0,
+			"data-orientation": orientation,
+			"data-attached": attached ? "true" : void 0,
+			"data-full-width": fullWidth ? "true" : void 0,
+			children
+		})
+	});
+};
+const ToggleGroup = Object.assign(ToggleGroupRoot, { Item: ToggleGroupItem });
+exports.ToggleGroup = ToggleGroup;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/actions/toggle-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["createContext","useContext","Button","isValidElement","Children","Fragment","useState","useCallback","useRovingFocus","cn"],"sources":["../../../../src/components/actions/toggle-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useState,\n  Fragment,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  Children,\n} from \"react\";\n\nimport { useRovingFocus, type UseRovingFocusReturn } from \"@puzzle-ui/hooks\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Button } from \"../button\";\n\nimport type {\n  ToggleGroupItemProps,\n  ToggleGroupMultipleProps,\n  ToggleGroupProps,\n  ToggleGroupSingleProps,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n} from \"./toggle-group.types\";\n\nimport \"./toggle-group.css\";\n\ntype ToggleGroupContextValue = {\n  selectedValues: string[];\n  disabled: boolean;\n  size: ToggleGroupSize;\n  toggleValue: (value: string) => void;\n  rovingFocus: UseRovingFocusReturn<HTMLButtonElement>;\n};\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nconst useToggleGroupContext = () => {\n  const context = useContext(ToggleGroupContext);\n\n  if (!context) {\n    throw new Error(\"ToggleGroup.Item must be rendered inside a ToggleGroup.\");\n  }\n\n  return context;\n};\n\nconst ToggleGroupItem = ({\n  value,\n  disabled = false,\n  onClick,\n  onFocus,\n  onKeyDown,\n  children,\n  ...buttonProps\n}: ToggleGroupItemProps) => {\n  const context = useToggleGroupContext();\n\n  const isDisabled = context.disabled || disabled;\n  const isSelected = context.selectedValues.includes(value);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      context.toggleValue(value);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    context.rovingFocus.onItemFocus(value);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented) {\n      context.rovingFocus.onItemKeyDown(event, value);\n    }\n  };\n\n  return (\n    <Button\n      {...buttonProps}\n      ref={context.rovingFocus.getItemRef(value)}\n      type=\"button\"\n      size={context.size}\n      variant={isSelected ? \"toggle-active\" : \"toggle\"}\n      disabled={isDisabled}\n      tabIndex={context.rovingFocus.getItemTabIndex(value, isDisabled)}\n      aria-pressed={isSelected}\n      data-state={isSelected ? \"on\" : \"off\"}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </Button>\n  );\n};\n\ntype ToggleGroupItemElement = ReactElement<\n  ToggleGroupItemProps,\n  typeof ToggleGroupItem\n>;\n\nconst isToggleGroupItem = (child: ReactNode): child is ToggleGroupItemElement =>\n  isValidElement<ToggleGroupItemProps>(child) && child.type === ToggleGroupItem;\n\nconst getToggleGroupItems = (children: ReactNode): ToggleGroupItemElement[] =>\n  Children.toArray(children).flatMap((child): ToggleGroupItemElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getToggleGroupItems(child.props.children);\n    }\n\n    return isToggleGroupItem(child) ? [child] : [];\n  });\n\nconst ToggleGroupRoot = (props: ToggleGroupProps): ReactElement => {\n  const {\n    type: groupType = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    orientation = \"horizontal\",\n    size = \"md\",\n    dir = \"ltr\",\n    disabled = false,\n    loop = true,\n    required = false,\n    attached = false,\n    fullWidth = false,\n    spacing,\n    children,\n    className,\n    style,\n    role,\n    ...rootProps\n  } = props;\n\n  const isMultiple = groupType === \"multiple\";\n\n  const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(() => {\n    if (isMultiple) {\n      return [...((defaultValue as string[] | undefined) ?? [])];\n    }\n\n    return defaultValue == null ? [] : [defaultValue as string];\n  });\n\n  const controlledValue = isMultiple\n    ? (value as string[] | undefined)\n    : (value as string | null | undefined);\n\n  const isControlled = controlledValue !== undefined;\n\n  const selectedValues = isControlled\n    ? isMultiple\n      ? (controlledValue as string[])\n      : controlledValue == null\n        ? []\n        : [controlledValue as string]\n    : uncontrolledValues;\n\n  const toggleValue = useCallback(\n    (nextValue: string) => {\n      const isSelected = selectedValues.includes(nextValue);\n\n      let nextValues: string[];\n\n      if (isMultiple) {\n        if (isSelected && required && selectedValues.length === 1) {\n          return;\n        }\n\n        nextValues = isSelected\n          ? selectedValues.filter((item) => item !== nextValue)\n          : [...selectedValues, nextValue];\n      } else {\n        if (isSelected && required) {\n          return;\n        }\n\n        nextValues = isSelected ? [] : [nextValue];\n      }\n\n      const hasChanged =\n        nextValues.length !== selectedValues.length ||\n        nextValues.some((item, index) => item !== selectedValues[index]);\n\n      if (!hasChanged) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValues(nextValues);\n      }\n\n      if (isMultiple) {\n        (onValueChange as ToggleGroupMultipleProps[\"onValueChange\"])?.(\n          nextValues,\n        );\n      } else {\n        (onValueChange as ToggleGroupSingleProps[\"onValueChange\"])?.(\n          nextValues[0],\n        );\n      }\n    },\n    [isControlled, isMultiple, onValueChange, required, selectedValues],\n  );\n\n  const groupItems = getToggleGroupItems(children);\n\n  const rovingItems = groupItems.map((item) => ({\n    id: item.props.value,\n    disabled: disabled || item.props.disabled,\n  }));\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: rovingItems,\n    orientation,\n    dir,\n    loop,\n    initialActiveId: selectedValues[0],\n  });\n\n  const contextValue: ToggleGroupContextValue = {\n    selectedValues,\n    disabled,\n    size,\n    toggleValue,\n    rovingFocus,\n  };\n\n  const groupStyle: CSSProperties | undefined =\n    spacing === undefined\n      ? style\n      : ({\n          ...style,\n          \"--puzzle-toggle-group-gap\":\n            typeof spacing === \"number\" ? `${spacing}px` : spacing,\n        } as CSSProperties);\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div\n        {...rootProps}\n        className={cn(\"puzzle-toggle-group\", className)}\n        style={groupStyle}\n        role={role ?? \"group\"}\n        dir={dir}\n        aria-disabled={disabled || undefined}\n        data-orientation={orientation}\n        data-attached={attached ? \"true\" : undefined}\n        data-full-width={fullWidth ? \"true\" : undefined}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n};\n\ntype ToggleGroupComponent = {\n  (props: ToggleGroupSingleProps): ReactElement;\n  (props: ToggleGroupMultipleProps): ReactElement;\n  Item: typeof ToggleGroupItem;\n};\n\nconst ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n}) as ToggleGroupComponent;\n\nexport {\n  ToggleGroup,\n  type ToggleGroupProps,\n  type ToggleGroupSingleProps,\n  type ToggleGroupMultipleProps,\n  type ToggleGroupItemProps,\n  type ToggleGroupSize,\n  type ToggleGroupOrientation,\n};\n"],"mappings":";;;;;;;;AA0CA,MAAM,sBAAA,GAAqBA,MAAAA,cAAAA,CAA8C,IAAI;AAE7E,MAAM,8BAA8B;CAClC,MAAM,WAAA,GAAUC,MAAAA,WAAAA,CAAW,kBAAkB;CAE7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,yDAAyD;CAG3E,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,OACA,WAAW,OACX,SACA,SACA,WACA,UACA,GAAG,kBACuB;CAC1B,MAAM,UAAU,sBAAsB;CAEtC,MAAM,aAAa,QAAQ,YAAY;CACvC,MAAM,aAAa,QAAQ,eAAe,SAAS,KAAK;CAExD,MAAM,eAAe,UAAyC;EAC5D,UAAU,KAAK;EAEf,IAAI,CAAC,MAAM,kBACT,QAAQ,YAAY,KAAK;CAE7B;CAEA,MAAM,eAAe,UAAyC;EAC5D,QAAQ,YAAY,YAAY,KAAK;EACrC,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB,UAA4C;EACjE,YAAY,KAAK;EAEjB,IAAI,CAAC,MAAM,kBACT,QAAQ,YAAY,cAAc,OAAO,KAAK;CAElD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,QAAD;EACE,GAAI;EACJ,KAAK,QAAQ,YAAY,WAAW,KAAK;EACzC,MAAK;EACL,MAAM,QAAQ;EACd,SAAS,aAAa,kBAAkB;EACxC,UAAU;EACV,UAAU,QAAQ,YAAY,gBAAgB,OAAO,UAAU;EAC/D,gBAAc;EACd,cAAY,aAAa,OAAO;EAChC,iBAAe,aAAa,SAAS,KAAA;EACrC,SAAS;EACT,SAAS;EACT,WAAW;EAEV;CACK,CAAA;AAEZ;AAOA,MAAM,qBAAqB,WAAA,GACzBC,MAAAA,eAAAA,CAAqC,KAAK,KAAK,MAAM,SAAS;AAEhE,MAAM,uBAAuB,aAC3BC,MAAAA,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,UAAoC;CACtE,KAAA,GACED,MAAAA,eAAAA,CAAyC,KAAK,KAC9C,MAAM,SAASE,MAAAA,UAEf,OAAO,oBAAoB,MAAM,MAAM,QAAQ;CAGjD,OAAO,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,CAAC;AAC/C,CAAC;AAEH,MAAM,mBAAmB,UAA0C;CACjE,MAAM,EACJ,MAAM,YAAY,UAClB,OACA,cACA,eACA,cAAc,cACd,OAAO,MACP,MAAM,OACN,WAAW,OACX,OAAO,MACP,WAAW,OACX,WAAW,OACX,YAAY,OACZ,SACA,UACA,WACA,OACA,MACA,GAAG,cACD;CAEJ,MAAM,aAAa,cAAc;CAEjC,MAAM,CAAC,oBAAoB,0BAAA,GAAyBC,MAAAA,SAAAA,OAAyB;EAC3E,IAAI,YACF,OAAO,CAAC,GAAK,gBAAyC,CAAC,CAAE;EAG3D,OAAO,gBAAgB,OAAO,CAAC,IAAI,CAAC,YAAsB;CAC5D,CAAC;CAED,MAAM,kBAAkB,aACnB,QACA;CAEL,MAAM,eAAe,oBAAoB,KAAA;CAEzC,MAAM,iBAAiB,eACnB,aACG,kBACD,mBAAmB,OACjB,CAAC,IACD,CAAC,eAAyB,IAC9B;CAEJ,MAAM,eAAA,GAAcC,MAAAA,YAAAA,EACjB,cAAsB;EACrB,MAAM,aAAa,eAAe,SAAS,SAAS;EAEpD,IAAI;EAEJ,IAAI,YAAY;GACd,IAAI,cAAc,YAAY,eAAe,WAAW,GACtD;GAGF,aAAa,aACT,eAAe,QAAQ,SAAS,SAAS,SAAS,IAClD,CAAC,GAAG,gBAAgB,SAAS;EACnC,OAAO;GACL,IAAI,cAAc,UAChB;GAGF,aAAa,aAAa,CAAC,IAAI,CAAC,SAAS;EAC3C;EAMA,IAAI,EAHF,WAAW,WAAW,eAAe,UACrC,WAAW,MAAM,MAAM,UAAU,SAAS,eAAe,MAAM,IAG/D;EAGF,IAAI,CAAC,cACH,sBAAsB,UAAU;EAGlC,IAAI,YACF,gBACE,UACF;OAEA,gBACE,WAAW,EACb;CAEJ,GACA;EAAC;EAAc;EAAY;EAAe;EAAU;CAAc,CACpE;CAIA,MAAM,cAFa,oBAAoB,QAEV,CAAC,CAAC,KAAK,UAAU;EAC5C,IAAI,KAAK,MAAM;EACf,UAAU,YAAY,KAAK,MAAM;CACnC,EAAE;CAUF,MAAM,eAAwC;EAC5C;EACA;EACA;EACA;EACA,cAAA,GAbkBC,iBAAAA,eAAAA,CAAkC;GACpD,OAAO;GACP;GACA;GACA;GACA,iBAAiB,eAAe;EAClC,CAOY;CACZ;CAEA,MAAM,aACJ,YAAY,KAAA,IACR,QACC;EACC,GAAG;EACH,6BACE,OAAO,YAAY,WAAW,GAAG,QAAQ,MAAM;CACnD;CAEN,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,GAAI;GACJ,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,uBAAuB,SAAS;GAC9C,OAAO;GACP,MAAM,QAAQ;GACT;GACL,iBAAe,YAAY,KAAA;GAC3B,oBAAkB;GAClB,iBAAe,WAAW,SAAS,KAAA;GACnC,mBAAiB,YAAY,SAAS,KAAA;GAErC;EACE,CAAA;CACsB,CAAA;AAEjC;AAQA,MAAM,cAAc,OAAO,OAAO,iBAAiB,EACjD,MAAM,gBACR,CAAC"}

package/dist/components/actions/toggle-group/index.d.cts

@@ -0,0 +1,10 @@
+import { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize } from "./toggle-group.types.cjs";
+import { ReactElement } from "react";
+declare const ToggleGroupItem: ({ value, disabled, onClick, onFocus, onKeyDown, children, ...buttonProps }: ToggleGroupItemProps) => import("react").JSX.Element;
+type ToggleGroupComponent = {
+  (props: ToggleGroupSingleProps): ReactElement;
+  (props: ToggleGroupMultipleProps): ReactElement;
+  Item: typeof ToggleGroupItem;
+};
+declare const ToggleGroup: ToggleGroupComponent;
+export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize };

package/dist/components/actions/toggle-group/index.d.ts

@@ -0,0 +1,10 @@
+import { ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize } from "./toggle-group.types.js";
+import { ReactElement } from "react";
+declare const ToggleGroupItem: ({ value, disabled, onClick, onFocus, onKeyDown, children, ...buttonProps }: ToggleGroupItemProps) => import("react").JSX.Element;
+type ToggleGroupComponent = {
+  (props: ToggleGroupSingleProps): ReactElement;
+  (props: ToggleGroupMultipleProps): ReactElement;
+  Item: typeof ToggleGroupItem;
+};
+declare const ToggleGroup: ToggleGroupComponent;
+export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupMultipleProps, type ToggleGroupOrientation, type ToggleGroupProps, type ToggleGroupSingleProps, type ToggleGroupSize };

package/dist/components/actions/toggle-group/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { Button } from "../button/index.js";
+import "./toggle-group.css";
+import { cn } from "@puzzle-ui/core";
+import { Children, Fragment, createContext, isValidElement, useCallback, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRovingFocus } from "@puzzle-ui/hooks";
+// src/components/actions/toggle-group/index.tsx
+const ToggleGroupContext = createContext(null);
+const useToggleGroupContext = () => {
+	const context = useContext(ToggleGroupContext);
+	if (!context) throw new Error("ToggleGroup.Item must be rendered inside a ToggleGroup.");
+	return context;
+};
+const ToggleGroupItem = ({ value, disabled = false, onClick, onFocus, onKeyDown, children, ...buttonProps }) => {
+	const context = useToggleGroupContext();
+	const isDisabled = context.disabled || disabled;
+	const isSelected = context.selectedValues.includes(value);
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) context.toggleValue(value);
+	};
+	const handleFocus = (event) => {
+		context.rovingFocus.onItemFocus(value);
+		onFocus?.(event);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented) context.rovingFocus.onItemKeyDown(event, value);
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		ref: context.rovingFocus.getItemRef(value),
+		type: "button",
+		size: context.size,
+		variant: isSelected ? "toggle-active" : "toggle",
+		disabled: isDisabled,
+		tabIndex: context.rovingFocus.getItemTabIndex(value, isDisabled),
+		"aria-pressed": isSelected,
+		"data-state": isSelected ? "on" : "off",
+		"data-disabled": isDisabled ? "true" : void 0,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		children
+	});
+};
+const isToggleGroupItem = (child) => isValidElement(child) && child.type === ToggleGroupItem;
+const getToggleGroupItems = (children) => Children.toArray(children).flatMap((child) => {
+	if (isValidElement(child) && child.type === Fragment) return getToggleGroupItems(child.props.children);
+	return isToggleGroupItem(child) ? [child] : [];
+});
+const ToggleGroupRoot = (props) => {
+	const { type: groupType = "single", value, defaultValue, onValueChange, orientation = "horizontal", size = "md", dir = "ltr", disabled = false, loop = true, required = false, attached = false, fullWidth = false, spacing, children, className, style, role, ...rootProps } = props;
+	const isMultiple = groupType === "multiple";
+	const [uncontrolledValues, setUncontrolledValues] = useState(() => {
+		if (isMultiple) return [...defaultValue ?? []];
+		return defaultValue == null ? [] : [defaultValue];
+	});
+	const controlledValue = isMultiple ? value : value;
+	const isControlled = controlledValue !== void 0;
+	const selectedValues = isControlled ? isMultiple ? controlledValue : controlledValue == null ? [] : [controlledValue] : uncontrolledValues;
+	const toggleValue = useCallback((nextValue) => {
+		const isSelected = selectedValues.includes(nextValue);
+		let nextValues;
+		if (isMultiple) {
+			if (isSelected && required && selectedValues.length === 1) return;
+			nextValues = isSelected ? selectedValues.filter((item) => item !== nextValue) : [...selectedValues, nextValue];
+		} else {
+			if (isSelected && required) return;
+			nextValues = isSelected ? [] : [nextValue];
+		}
+		if (!(nextValues.length !== selectedValues.length || nextValues.some((item, index) => item !== selectedValues[index]))) return;
+		if (!isControlled) setUncontrolledValues(nextValues);
+		if (isMultiple) onValueChange?.(nextValues);
+		else onValueChange?.(nextValues[0]);
+	}, [
+		isControlled,
+		isMultiple,
+		onValueChange,
+		required,
+		selectedValues
+	]);
+	const rovingItems = getToggleGroupItems(children).map((item) => ({
+		id: item.props.value,
+		disabled: disabled || item.props.disabled
+	}));
+	const contextValue = {
+		selectedValues,
+		disabled,
+		size,
+		toggleValue,
+		rovingFocus: useRovingFocus({
+			items: rovingItems,
+			orientation,
+			dir,
+			loop,
+			initialActiveId: selectedValues[0]
+		})
+	};
+	const groupStyle = spacing === void 0 ? style : {
+		...style,
+		"--puzzle-toggle-group-gap": typeof spacing === "number" ? `${spacing}px` : spacing
+	};
+	return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...rootProps,
+			className: cn("puzzle-toggle-group", className),
+			style: groupStyle,
+			role: role ?? "group",
+			dir,
+			"aria-disabled": disabled || void 0,
+			"data-orientation": orientation,
+			"data-attached": attached ? "true" : void 0,
+			"data-full-width": fullWidth ? "true" : void 0,
+			children
+		})
+	});
+};
+const ToggleGroup = Object.assign(ToggleGroupRoot, { Item: ToggleGroupItem });
+export { ToggleGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/actions/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/actions/toggle-group/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useState,\n  Fragment,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  Children,\n} from \"react\";\n\nimport { useRovingFocus, type UseRovingFocusReturn } from \"@puzzle-ui/hooks\";\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Button } from \"../button\";\n\nimport type {\n  ToggleGroupItemProps,\n  ToggleGroupMultipleProps,\n  ToggleGroupProps,\n  ToggleGroupSingleProps,\n  ToggleGroupOrientation,\n  ToggleGroupSize,\n} from \"./toggle-group.types\";\n\nimport \"./toggle-group.css\";\n\ntype ToggleGroupContextValue = {\n  selectedValues: string[];\n  disabled: boolean;\n  size: ToggleGroupSize;\n  toggleValue: (value: string) => void;\n  rovingFocus: UseRovingFocusReturn<HTMLButtonElement>;\n};\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nconst useToggleGroupContext = () => {\n  const context = useContext(ToggleGroupContext);\n\n  if (!context) {\n    throw new Error(\"ToggleGroup.Item must be rendered inside a ToggleGroup.\");\n  }\n\n  return context;\n};\n\nconst ToggleGroupItem = ({\n  value,\n  disabled = false,\n  onClick,\n  onFocus,\n  onKeyDown,\n  children,\n  ...buttonProps\n}: ToggleGroupItemProps) => {\n  const context = useToggleGroupContext();\n\n  const isDisabled = context.disabled || disabled;\n  const isSelected = context.selectedValues.includes(value);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      context.toggleValue(value);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    context.rovingFocus.onItemFocus(value);\n    onFocus?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (!event.defaultPrevented) {\n      context.rovingFocus.onItemKeyDown(event, value);\n    }\n  };\n\n  return (\n    <Button\n      {...buttonProps}\n      ref={context.rovingFocus.getItemRef(value)}\n      type=\"button\"\n      size={context.size}\n      variant={isSelected ? \"toggle-active\" : \"toggle\"}\n      disabled={isDisabled}\n      tabIndex={context.rovingFocus.getItemTabIndex(value, isDisabled)}\n      aria-pressed={isSelected}\n      data-state={isSelected ? \"on\" : \"off\"}\n      data-disabled={isDisabled ? \"true\" : undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </Button>\n  );\n};\n\ntype ToggleGroupItemElement = ReactElement<\n  ToggleGroupItemProps,\n  typeof ToggleGroupItem\n>;\n\nconst isToggleGroupItem = (child: ReactNode): child is ToggleGroupItemElement =>\n  isValidElement<ToggleGroupItemProps>(child) && child.type === ToggleGroupItem;\n\nconst getToggleGroupItems = (children: ReactNode): ToggleGroupItemElement[] =>\n  Children.toArray(children).flatMap((child): ToggleGroupItemElement[] => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return getToggleGroupItems(child.props.children);\n    }\n\n    return isToggleGroupItem(child) ? [child] : [];\n  });\n\nconst ToggleGroupRoot = (props: ToggleGroupProps): ReactElement => {\n  const {\n    type: groupType = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    orientation = \"horizontal\",\n    size = \"md\",\n    dir = \"ltr\",\n    disabled = false,\n    loop = true,\n    required = false,\n    attached = false,\n    fullWidth = false,\n    spacing,\n    children,\n    className,\n    style,\n    role,\n    ...rootProps\n  } = props;\n\n  const isMultiple = groupType === \"multiple\";\n\n  const [uncontrolledValues, setUncontrolledValues] = useState<string[]>(() => {\n    if (isMultiple) {\n      return [...((defaultValue as string[] | undefined) ?? [])];\n    }\n\n    return defaultValue == null ? [] : [defaultValue as string];\n  });\n\n  const controlledValue = isMultiple\n    ? (value as string[] | undefined)\n    : (value as string | null | undefined);\n\n  const isControlled = controlledValue !== undefined;\n\n  const selectedValues = isControlled\n    ? isMultiple\n      ? (controlledValue as string[])\n      : controlledValue == null\n        ? []\n        : [controlledValue as string]\n    : uncontrolledValues;\n\n  const toggleValue = useCallback(\n    (nextValue: string) => {\n      const isSelected = selectedValues.includes(nextValue);\n\n      let nextValues: string[];\n\n      if (isMultiple) {\n        if (isSelected && required && selectedValues.length === 1) {\n          return;\n        }\n\n        nextValues = isSelected\n          ? selectedValues.filter((item) => item !== nextValue)\n          : [...selectedValues, nextValue];\n      } else {\n        if (isSelected && required) {\n          return;\n        }\n\n        nextValues = isSelected ? [] : [nextValue];\n      }\n\n      const hasChanged =\n        nextValues.length !== selectedValues.length ||\n        nextValues.some((item, index) => item !== selectedValues[index]);\n\n      if (!hasChanged) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValues(nextValues);\n      }\n\n      if (isMultiple) {\n        (onValueChange as ToggleGroupMultipleProps[\"onValueChange\"])?.(\n          nextValues,\n        );\n      } else {\n        (onValueChange as ToggleGroupSingleProps[\"onValueChange\"])?.(\n          nextValues[0],\n        );\n      }\n    },\n    [isControlled, isMultiple, onValueChange, required, selectedValues],\n  );\n\n  const groupItems = getToggleGroupItems(children);\n\n  const rovingItems = groupItems.map((item) => ({\n    id: item.props.value,\n    disabled: disabled || item.props.disabled,\n  }));\n\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: rovingItems,\n    orientation,\n    dir,\n    loop,\n    initialActiveId: selectedValues[0],\n  });\n\n  const contextValue: ToggleGroupContextValue = {\n    selectedValues,\n    disabled,\n    size,\n    toggleValue,\n    rovingFocus,\n  };\n\n  const groupStyle: CSSProperties | undefined =\n    spacing === undefined\n      ? style\n      : ({\n          ...style,\n          \"--puzzle-toggle-group-gap\":\n            typeof spacing === \"number\" ? `${spacing}px` : spacing,\n        } as CSSProperties);\n\n  return (\n    <ToggleGroupContext.Provider value={contextValue}>\n      <div\n        {...rootProps}\n        className={cn(\"puzzle-toggle-group\", className)}\n        style={groupStyle}\n        role={role ?? \"group\"}\n        dir={dir}\n        aria-disabled={disabled || undefined}\n        data-orientation={orientation}\n        data-attached={attached ? \"true\" : undefined}\n        data-full-width={fullWidth ? \"true\" : undefined}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n};\n\ntype ToggleGroupComponent = {\n  (props: ToggleGroupSingleProps): ReactElement;\n  (props: ToggleGroupMultipleProps): ReactElement;\n  Item: typeof ToggleGroupItem;\n};\n\nconst ToggleGroup = Object.assign(ToggleGroupRoot, {\n  Item: ToggleGroupItem,\n}) as ToggleGroupComponent;\n\nexport {\n  ToggleGroup,\n  type ToggleGroupProps,\n  type ToggleGroupSingleProps,\n  type ToggleGroupMultipleProps,\n  type ToggleGroupItemProps,\n  type ToggleGroupSize,\n  type ToggleGroupOrientation,\n};\n"],"mappings":"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"}

package/dist/components/actions/toggle-group/toggle-group.css

@@ -0,0 +1,67 @@
+.puzzle-toggle-group {
+  align-items: stretch;
+  gap: var(--puzzle-toggle-group-gap, var(--puzzle-space-2, .5rem));
+  vertical-align: middle;
+  min-width: 0;
+  display: inline-flex;
+}
+
+.puzzle-toggle-group > .puzzle-button {
+  flex: none;
+}
+
+.puzzle-toggle-group[data-orientation="horizontal"] {
+  flex-direction: row;
+}
+
+.puzzle-toggle-group[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.puzzle-toggle-group[data-full-width="true"] {
+  width: 100%;
+  display: flex;
+}
+
+.puzzle-toggle-group[data-full-width="true"] > .puzzle-button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.puzzle-toggle-group[data-attached="true"] {
+  gap: 0;
+}
+
+.puzzle-toggle-group[data-attached="true"][data-orientation="horizontal"] > .puzzle-button:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: -1px;
+}
+
+.puzzle-toggle-group[data-attached="true"][data-orientation="horizontal"] > .puzzle-button:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.puzzle-toggle-group[data-attached="true"][data-orientation="vertical"] > .puzzle-button:not(:first-child) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  margin-block-start: -1px;
+}
+
+.puzzle-toggle-group[data-attached="true"][data-orientation="vertical"] > .puzzle-button:not(:last-child) {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+
+@media (forced-colors: active) {
+  .puzzle-toggle-group > .puzzle-button {
+    border-color: buttontext;
+  }
+
+  .puzzle-toggle-group > .puzzle-button[aria-pressed="true"] {
+    outline-offset: -3px;
+    outline: 1px solid highlight;
+  }
+}

package/dist/components/actions/toggle-group/toggle-group.types.d.cts

@@ -0,0 +1,54 @@
+import { ButtonNativeProps, ButtonSize } from "../button/button.types.cjs";
+import { ComponentPropsWithoutRef, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
+type ToggleGroupOrientation = "horizontal" | "vertical";
+type ToggleGroupSize = ButtonSize;
+type ToggleGroupBaseProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "dir"> & {
+  /** Layout direction of the items. Defaults to horizontal. */
+  orientation?: ToggleGroupOrientation;
+  /** Size of every item. Defaults to medium. */
+  size?: ToggleGroupSize;
+  /** Text direction, used to interpret horizontal arrow keys. */
+  dir?: "ltr" | "rtl";
+  /** Disables every item in the group. */
+  disabled?: boolean;
+  /** Whether keyboard navigation wraps at the first and last item. */
+  loop?: boolean;
+  /**
+   * Prevents the last selected value from being deselected.
+   * It does not force an initial selection.
+   */
+  required?: boolean;
+  /** Joins the item borders and removes the inner corner radii. */
+  attached?: boolean;
+  /** Makes the group fill its available inline size. */
+  fullWidth?: boolean;
+  /**
+   * Space between items. A number is interpreted as pixels.
+   * Defaults to the Puzzle spacing token.
+   */
+  spacing?: number | string;
+  children: ReactNode;
+};
+type ToggleGroupSingleProps = ToggleGroupBaseProps & {
+  type?: "single";
+  value?: string | null;
+  defaultValue?: string;
+  onValueChange?: (value: string | undefined) => void;
+};
+type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
+  type: "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+type ToggleGroupItemProps = Omit<ButtonNativeProps, "value" | "variant" | "disabled" | "size" | "onClick" | "onFocus" | "onKeyDown" | "tabIndex" | "aria-pressed" | "type" | "ref"> & {
+  /** Unique value identifying this item within the group. */
+  value: string;
+  /** Disables this item without disabling the rest of the group. */
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onFocus?: FocusEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+};
+export type { ToggleGroupBaseProps, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize };

package/dist/components/actions/toggle-group/toggle-group.types.d.ts

@@ -0,0 +1,54 @@
+import { ButtonNativeProps, ButtonSize } from "../button/button.types.js";
+import { ComponentPropsWithoutRef, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode } from "react";
+type ToggleGroupOrientation = "horizontal" | "vertical";
+type ToggleGroupSize = ButtonSize;
+type ToggleGroupBaseProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "dir"> & {
+  /** Layout direction of the items. Defaults to horizontal. */
+  orientation?: ToggleGroupOrientation;
+  /** Size of every item. Defaults to medium. */
+  size?: ToggleGroupSize;
+  /** Text direction, used to interpret horizontal arrow keys. */
+  dir?: "ltr" | "rtl";
+  /** Disables every item in the group. */
+  disabled?: boolean;
+  /** Whether keyboard navigation wraps at the first and last item. */
+  loop?: boolean;
+  /**
+   * Prevents the last selected value from being deselected.
+   * It does not force an initial selection.
+   */
+  required?: boolean;
+  /** Joins the item borders and removes the inner corner radii. */
+  attached?: boolean;
+  /** Makes the group fill its available inline size. */
+  fullWidth?: boolean;
+  /**
+   * Space between items. A number is interpreted as pixels.
+   * Defaults to the Puzzle spacing token.
+   */
+  spacing?: number | string;
+  children: ReactNode;
+};
+type ToggleGroupSingleProps = ToggleGroupBaseProps & {
+  type?: "single";
+  value?: string | null;
+  defaultValue?: string;
+  onValueChange?: (value: string | undefined) => void;
+};
+type ToggleGroupMultipleProps = ToggleGroupBaseProps & {
+  type: "multiple";
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+};
+type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+type ToggleGroupItemProps = Omit<ButtonNativeProps, "value" | "variant" | "disabled" | "size" | "onClick" | "onFocus" | "onKeyDown" | "tabIndex" | "aria-pressed" | "type" | "ref"> & {
+  /** Unique value identifying this item within the group. */
+  value: string;
+  /** Disables this item without disabling the rest of the group. */
+  disabled?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onFocus?: FocusEventHandler<HTMLButtonElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
+};
+export type { ToggleGroupBaseProps, ToggleGroupItemProps, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupSize };