silver-ui 0.1.0

package/dist/chunk-Z2STCD6I.js

@@ -0,0 +1,165 @@
+import { toPixelSize } from './chunk-KLMODPEE.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Stack/Stack.recipe.ts
+var stackRecipe = cva({
+  base: {
+    display: "flex",
+    minW: 0
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        flexDirection: "row"
+      },
+      vertical: {
+        flexDirection: "column"
+      }
+    },
+    gap: {
+      0: { gap: "0" },
+      0.5: { gap: "0.5" },
+      1: { gap: "1" },
+      1.5: { gap: "1.5" },
+      2: { gap: "2" },
+      3: { gap: "3" },
+      4: { gap: "4" },
+      5: { gap: "5" },
+      6: { gap: "6" },
+      8: { gap: "8" },
+      10: { gap: "10" }
+    },
+    wrap: {
+      nowrap: {
+        flexWrap: "nowrap"
+      },
+      wrap: {
+        flexWrap: "wrap"
+      },
+      "wrap-reverse": {
+        flexWrap: "wrap-reverse"
+      }
+    }
+  },
+  defaultVariants: {
+    direction: "vertical",
+    wrap: "nowrap"
+  }
+});
+
+// src/components/Stack/Stack.tsx
+var mainAlignValues = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+var crossAlignValues = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+function Stack({
+  align,
+  children,
+  className,
+  "data-testid": dataTestId,
+  direction = "vertical",
+  as: Element = "div",
+  gap,
+  hAlign,
+  height,
+  justify,
+  ref,
+  style,
+  vAlign,
+  width,
+  wrap = "nowrap",
+  ...htmlProps
+}) {
+  const resolvedHAlign = hAlign ?? (direction === "horizontal" ? justify : align);
+  const resolvedVAlign = vAlign ?? (direction === "horizontal" ? align : justify);
+  const mainAlign = direction === "horizontal" ? resolvedHAlign : resolvedVAlign;
+  const crossAlign = direction === "horizontal" ? resolvedVAlign : resolvedHAlign;
+  const stackStyle = {
+    justifyContent: mainAlign != null && mainAlign in mainAlignValues ? mainAlignValues[mainAlign] : void 0,
+    alignItems: crossAlign != null && crossAlign in crossAlignValues ? crossAlignValues[crossAlign] : void 0,
+    width: toPixelSize(width),
+    height: toPixelSize(height),
+    ...style
+  };
+  return createElement(
+    Element,
+    {
+      ...htmlProps,
+      className: cx(stackRecipe({ direction, gap, wrap }), className),
+      "data-testid": dataTestId,
+      ref,
+      style: stackStyle
+    },
+    children
+  );
+}
+Stack.displayName = "Stack";
+function HStack({
+  align,
+  className,
+  "data-testid": dataTestId,
+  hAlign,
+  justify,
+  ref,
+  style,
+  vAlign,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      ...props,
+      className,
+      "data-testid": dataTestId,
+      direction: "horizontal",
+      hAlign: hAlign ?? justify,
+      ref,
+      style,
+      vAlign: vAlign ?? align
+    }
+  );
+}
+HStack.displayName = "HStack";
+function VStack({
+  align,
+  className,
+  "data-testid": dataTestId,
+  hAlign,
+  justify,
+  ref,
+  style,
+  vAlign,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      ...props,
+      className,
+      "data-testid": dataTestId,
+      direction: "vertical",
+      hAlign: hAlign ?? align,
+      ref,
+      style,
+      vAlign: vAlign ?? justify
+    }
+  );
+}
+VStack.displayName = "VStack";
+
+export { HStack, VStack, stackRecipe };
+//# sourceMappingURL=chunk-Z2STCD6I.js.map
+//# sourceMappingURL=chunk-Z2STCD6I.js.map

package/dist/chunk-Z2STCD6I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stack/Stack.recipe.ts","../src/components/Stack/Stack.tsx","../src/components/Stack/HStack.tsx","../src/components/Stack/VStack.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-Z2STCD6I.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const stackRecipe = cva({\n  base: {\n    display: 'flex',\n    minW: 0,\n  },\n  variants: {\n    direction: {\n      horizontal: {\n        flexDirection: 'row',\n      },\n      vertical: {\n        flexDirection: 'column',\n      },\n    },\n    gap: {\n      0: {gap: '0'},\n      0.5: {gap: '0.5'},\n      1: {gap: '1'},\n      1.5: {gap: '1.5'},\n      2: {gap: '2'},\n      3: {gap: '3'},\n      4: {gap: '4'},\n      5: {gap: '5'},\n      6: {gap: '6'},\n      8: {gap: '8'},\n      10: {gap: '10'},\n    },\n    wrap: {\n      nowrap: {\n        flexWrap: 'nowrap',\n      },\n      wrap: {\n        flexWrap: 'wrap',\n      },\n      'wrap-reverse': {\n        flexWrap: 'wrap-reverse',\n      },\n    },\n  },\n  defaultVariants: {\n    direction: 'vertical',\n    wrap: 'nowrap',\n  },\n});\n\nexport type StackVariants = RecipeVariantProps<typeof stackRecipe>;\n","import {\n  createElement,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\nimport {toPixelSize, type SizeValue} from '../../internal/toPixelSize';\nimport type {SpacingStep} from '../Layout/types';\nimport {stackRecipe} from './Stack.recipe';\n\nexport type {SizeValue};\nexport type StackDirection = 'horizontal' | 'vertical';\nexport type StackMainAlignment =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'between'\n  | 'around'\n  | 'evenly';\nexport type StackCrossAlignment = 'start' | 'center' | 'end' | 'stretch';\nexport type StackAlignment = StackMainAlignment | StackCrossAlignment;\nexport type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\nexport type StackGap = SpacingStep;\n\nexport interface StackProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Cross-axis alignment.\n   */\n  align?: StackCrossAlignment;\n  /**\n   * HTML element type to render.\n   */\n  as?: ElementType;\n  /**\n   * Stack content.\n   */\n  children?: ReactNode;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Layout direction.\n   */\n  direction?: StackDirection;\n  /**\n   * Gap between children.\n   */\n  gap?: StackGap;\n  /**\n   * Horizontal alignment (overrides align/justify for horizontal axis).\n   */\n  hAlign?: StackAlignment;\n  /**\n   * Fixed height. Numbers are treated as pixels.\n   */\n  height?: SizeValue;\n  /**\n   * Main-axis alignment.\n   */\n  justify?: StackMainAlignment;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Vertical alignment (overrides align/justify for vertical axis).\n   */\n  vAlign?: StackAlignment;\n  /**\n   * Fixed width. Numbers are treated as pixels.\n   */\n  width?: SizeValue;\n  /**\n   * Flex wrap behavior.\n   */\n  wrap?: StackWrap;\n}\n\nconst mainAlignValues: Record<StackMainAlignment, string> = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n  between: 'space-between',\n  around: 'space-around',\n  evenly: 'space-evenly',\n};\n\nconst crossAlignValues: Record<StackCrossAlignment, string> = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n  stretch: 'stretch',\n};\n\nexport function Stack({\n  align,\n  children,\n  className,\n  'data-testid': dataTestId,\n  direction = 'vertical',\n  as: Element = 'div',\n  gap,\n  hAlign,\n  height,\n  justify,\n  ref,\n  style,\n  vAlign,\n  width,\n  wrap = 'nowrap',\n  ...htmlProps\n}: StackProps): React.JSX.Element {\n  const resolvedHAlign =\n    hAlign ?? (direction === 'horizontal' ? justify : align);\n  const resolvedVAlign =\n    vAlign ?? (direction === 'horizontal' ? align : justify);\n  const mainAlign =\n    direction === 'horizontal' ? resolvedHAlign : resolvedVAlign;\n  const crossAlign =\n    direction === 'horizontal' ? resolvedVAlign : resolvedHAlign;\n  const stackStyle: CSSProperties = {\n    justifyContent:\n      mainAlign != null && mainAlign in mainAlignValues\n        ? mainAlignValues[mainAlign as StackMainAlignment]\n        : undefined,\n    alignItems:\n      crossAlign != null && crossAlign in crossAlignValues\n        ? crossAlignValues[crossAlign as StackCrossAlignment]\n        : undefined,\n    width: toPixelSize(width),\n    height: toPixelSize(height),\n    ...style,\n  };\n\n  return createElement(\n    Element,\n    {\n      ...htmlProps,\n      className: cx(stackRecipe({direction, gap, wrap}), className),\n      'data-testid': dataTestId,\n      ref,\n      style: stackStyle,\n    },\n    children,\n  );\n}\n\nStack.displayName = 'Stack';\n","import type {Ref} from 'react';\nimport {\n  Stack,\n  type StackCrossAlignment,\n  type StackMainAlignment,\n  type StackProps,\n} from './Stack';\n\nexport interface HStackProps extends Omit<\n  StackProps,\n  'direction' | 'hAlign' | 'vAlign'\n> {\n  align?: StackCrossAlignment;\n  hAlign?: StackMainAlignment;\n  justify?: StackMainAlignment;\n  ref?: Ref<HTMLElement>;\n  vAlign?: StackCrossAlignment;\n}\n\nexport function HStack({\n  align,\n  className,\n  'data-testid': dataTestId,\n  hAlign,\n  justify,\n  ref,\n  style,\n  vAlign,\n  ...props\n}: HStackProps): React.JSX.Element {\n  return (\n    <Stack\n      {...props}\n      className={className}\n      data-testid={dataTestId}\n      direction=\"horizontal\"\n      hAlign={hAlign ?? justify}\n      ref={ref}\n      style={style}\n      vAlign={vAlign ?? align}\n    />\n  );\n}\n\nHStack.displayName = 'HStack';\n","import type {Ref} from 'react';\nimport {\n  Stack,\n  type StackCrossAlignment,\n  type StackMainAlignment,\n  type StackProps,\n} from './Stack';\n\nexport interface VStackProps extends Omit<\n  StackProps,\n  'direction' | 'hAlign' | 'vAlign'\n> {\n  align?: StackCrossAlignment;\n  hAlign?: StackCrossAlignment;\n  justify?: StackMainAlignment;\n  ref?: Ref<HTMLElement>;\n  vAlign?: StackMainAlignment;\n}\n\nexport function VStack({\n  align,\n  className,\n  'data-testid': dataTestId,\n  hAlign,\n  justify,\n  ref,\n  style,\n  vAlign,\n  ...props\n}: VStackProps): React.JSX.Element {\n  return (\n    <Stack\n      {...props}\n      className={className}\n      data-testid={dataTestId}\n      direction=\"vertical\"\n      hAlign={hAlign ?? align}\n      ref={ref}\n      style={style}\n      vAlign={vAlign ?? justify}\n    />\n  );\n}\n\nVStack.displayName = 'VStack';\n"]}

package/dist/chunk-Z2UFJIZU.cjs

@@ -0,0 +1,207 @@
+'use strict';
+
+var chunkNILB6Y4Z_cjs = require('./chunk-NILB6Y4Z.cjs');
+var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
+var chunkMKAOIB2O_cjs = require('./chunk-MKAOIB2O.cjs');
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ToggleButtonGroupContext = react.createContext(null);
+ToggleButtonGroupContext.displayName = "ToggleButtonGroupContext";
+function useToggleButtonGroup() {
+  return react.use(ToggleButtonGroupContext);
+}
+var styles = {
+  group: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1"
+  }),
+  vertical: chunkAZDWQGAX_cjs.css({
+    flexDirection: "column",
+    alignItems: "stretch"
+  })
+};
+function ToggleButtonGroup({
+  children,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  label,
+  orientation = "horizontal",
+  ref,
+  size,
+  style,
+  ...props
+}) {
+  const isMultiple = props.type === "multiple";
+  const { onChange, value } = props;
+  const selectedValues = react.useMemo(() => {
+    if (isMultiple) {
+      return new Set(value);
+    }
+    return value == null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]);
+  }, [isMultiple, value]);
+  const onToggle = react.useCallback(
+    (itemValue) => {
+      if (isMultiple) {
+        const current2 = value;
+        onChange(
+          current2.includes(itemValue) ? current2.filter((v) => v !== itemValue) : [...current2, itemValue]
+        );
+        return;
+      }
+      const current = value;
+      onChange(
+        current === itemValue ? null : itemValue
+      );
+    },
+    [isMultiple, value, onChange]
+  );
+  const contextValue = react.useMemo(
+    () => ({ isDisabled, onToggle, selectedValues, size }),
+    [isDisabled, onToggle, selectedValues, size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": label,
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.group,
+        orientation === "vertical" ? styles.vertical : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: "group",
+      style,
+      children
+    }
+  ) });
+}
+ToggleButtonGroup.displayName = "ToggleButtonGroup";
+var styles2 = {
+  selected: chunkAZDWQGAX_cjs.css({
+    bg: "bg.subtle",
+    fontWeight: "semibold",
+    _hover: { bg: "bg.subtle" },
+    _active: { bg: "bg.subtle" }
+  }),
+  content: chunkAZDWQGAX_cjs.css({
+    display: "contents"
+  }),
+  labelWrapper: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    minW: 0
+  }),
+  label: chunkAZDWQGAX_cjs.css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    minW: 0
+  }),
+  widthReservation: chunkAZDWQGAX_cjs.css({
+    display: "block",
+    h: 0,
+    overflow: "hidden",
+    visibility: "hidden",
+    pointerEvents: "none",
+    fontWeight: "semibold"
+  }),
+  icon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  spinner: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    color: "inherit"
+  })
+};
+function ToggleButton({
+  children,
+  className,
+  "data-testid": dataTestId,
+  icon,
+  isDisabled: isDisabledProp = false,
+  isIconOnly = false,
+  isLoading = false,
+  isSelected: isSelectedProp = false,
+  label,
+  onChange,
+  selectedIcon,
+  ref,
+  size: sizeProp,
+  style,
+  tooltip,
+  value
+}) {
+  const group = useToggleButtonGroup();
+  if (process.env.NODE_ENV !== "production") {
+    if (group != null && value == null) {
+      throw new Error(
+        "ToggleButton: `value` prop is required when used inside a ToggleButtonGroup."
+      );
+    }
+  }
+  const isSelected = group != null && value != null ? group.selectedValues.has(value) : isSelectedProp;
+  const size = sizeProp ?? group?.size ?? "md";
+  const isDisabled = isDisabledProp || group?.isDisabled === true;
+  const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;
+  const visibleLabel = children ?? label;
+  const handleClick = (event) => {
+    if (isDisabled || isLoading) {
+      event.preventDefault();
+      return;
+    }
+    if (group != null && value != null) {
+      group.onToggle(value);
+      return;
+    }
+    onChange?.(!isSelected);
+  };
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "aria-busy": isLoading || void 0,
+      "aria-label": isIconOnly || isLoading ? label : void 0,
+      "aria-pressed": isSelected,
+      className: chunkSPDVNY2Z_cjs.cx(
+        chunkNILB6Y4Z_cjs.buttonRecipe({ variant: "ghost", size, iconOnly: isIconOnly }),
+        isSelected ? styles2.selected : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      disabled: isDisabled || isLoading,
+      onClick: handleClick,
+      ref,
+      style,
+      type: "button",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": isLoading || void 0, className: styles2.content, children: [
+        resolvedIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: resolvedIcon, size }) }) : null,
+        !isIconOnly ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles2.labelWrapper, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.label, children: visibleLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles2.widthReservation, children: visibleLabel })
+        ] }) : null,
+        !isIconOnly && isLoading ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles2.spinner, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size }) }) : null
+      ] })
+    }
+  );
+  if (tooltip != null) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkMKAOIB2O_cjs.Tooltip, { content: tooltip, children: button });
+  }
+  return button;
+}
+ToggleButton.displayName = "ToggleButton";
+
+exports.ToggleButton = ToggleButton;
+exports.ToggleButtonGroup = ToggleButtonGroup;
+//# sourceMappingURL=chunk-Z2UFJIZU.cjs.map
+//# sourceMappingURL=chunk-Z2UFJIZU.cjs.map

package/dist/chunk-Z2UFJIZU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToggleButton/ToggleButtonGroup.tsx","../src/components/ToggleButton/ToggleButton.tsx"],"names":["createContext","use","css","useMemo","useCallback","current","jsx","cx","styles","buttonRecipe","Icon","jsxs","Spinner","Tooltip"],"mappings":"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","file":"chunk-Z2UFJIZU.cjs","sourcesContent":["import {\n  createContext,\n  use,\n  useCallback,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button';\n\nexport type ToggleButtonGroupOrientation = 'horizontal' | 'vertical';\n\ninterface ToggleButtonGroupContextValue {\n  isDisabled?: boolean;\n  onToggle: (value: string) => void;\n  selectedValues: Set<string>;\n  size?: ButtonSize;\n}\n\nconst ToggleButtonGroupContext =\n  createContext<ToggleButtonGroupContextValue | null>(null);\n\nToggleButtonGroupContext.displayName = 'ToggleButtonGroupContext';\n\nexport function useToggleButtonGroup(): ToggleButtonGroupContextValue | null {\n  return use(ToggleButtonGroupContext);\n}\n\ninterface ToggleButtonGroupBaseProps {\n  /**\n   * Toggle button children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the group root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the group root.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Group orientation.\n   * @default 'horizontal'\n   */\n  orientation?: ToggleButtonGroupOrientation;\n  /**\n   * Ref forwarded to the group root.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for buttons in the group.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the group root.\n   */\n  style?: CSSProperties;\n}\n\nexport interface ToggleButtonGroupSingleProps extends ToggleButtonGroupBaseProps {\n  /**\n   * Called with the selected value when selection changes, or `null`\n   * when the active button is deselected.\n   */\n  onChange: (value: string | null) => void;\n  /**\n   * Single-selection mode. Clicking the active button clears selection.\n   * @default 'single'\n   */\n  type?: 'single';\n  /**\n   * Currently selected value, or `null` for no selection.\n   */\n  value: string | null;\n}\n\nexport interface ToggleButtonGroupMultipleProps extends ToggleButtonGroupBaseProps {\n  /**\n   * Called with the array of selected values when selection changes.\n   */\n  onChange: (value: string[]) => void;\n  /**\n   * Multiple-selection mode.\n   */\n  type: 'multiple';\n  /**\n   * Currently selected values.\n   */\n  value: string[];\n}\n\nexport type ToggleButtonGroupProps =\n  | ToggleButtonGroupSingleProps\n  | ToggleButtonGroupMultipleProps;\n\nconst styles = {\n  group: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '1',\n  }),\n  vertical: css({\n    flexDirection: 'column',\n    alignItems: 'stretch',\n  }),\n} as const;\n\n/**\n * Groups related ToggleButtons and manages shared selection state.\n */\nexport function ToggleButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size,\n  style,\n  ...props\n}: ToggleButtonGroupProps): React.JSX.Element {\n  const isMultiple = props.type === 'multiple';\n  const {onChange, value} = props;\n\n  const selectedValues = useMemo(() => {\n    if (isMultiple) {\n      return new Set(value as string[]);\n    }\n\n    return value == null ? new Set<string>() : new Set([value as string]);\n  }, [isMultiple, value]);\n\n  const onToggle = useCallback(\n    (itemValue: string) => {\n      if (isMultiple) {\n        const current = value as string[];\n        (onChange as (v: string[]) => void)(\n          current.includes(itemValue)\n            ? current.filter(v => v !== itemValue)\n            : [...current, itemValue],\n        );\n        return;\n      }\n\n      const current = value as string | null;\n      (onChange as (v: string | null) => void)(\n        current === itemValue ? null : itemValue,\n      );\n    },\n    [isMultiple, value, onChange],\n  );\n\n  const contextValue = useMemo(\n    () => ({isDisabled, onToggle, selectedValues, size}),\n    [isDisabled, onToggle, selectedValues, size],\n  );\n\n  return (\n    <ToggleButtonGroupContext value={contextValue}>\n      <div\n        aria-label={label}\n        className={cx(\n          styles.group,\n          orientation === 'vertical' ? styles.vertical : undefined,\n          className,\n        )}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ToggleButtonGroupContext>\n  );\n}\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n","import type {CSSProperties, MouseEvent, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {buttonRecipe} from '../Button';\nimport type {ButtonSize} from '../Button';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Tooltip} from '../Tooltip';\nimport {useToggleButtonGroup} from './ToggleButtonGroup';\n\nexport interface ToggleButtonProps {\n  /**\n   * Custom visible content. When omitted, `label` is rendered.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the button root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the button root.\n   */\n  'data-testid'?: string;\n  /**\n   * Icon element rendered before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether the button is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label and render a square icon button.\n   * @default false\n   */\n  isIconOnly?: boolean;\n  /**\n   * Whether the button is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the button is currently selected.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Accessible label for the button.\n   */\n  label: string;\n  /**\n   * Called when the selected state should change.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * Ref forwarded to the button root.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Icon element rendered when the button is selected.\n   */\n  selectedIcon?: IconComponent;\n  /**\n   * Visual size of the button.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the button root.\n   */\n  style?: CSSProperties;\n  /**\n   * Tooltip text shown on hover.\n   */\n  tooltip?: string;\n  /**\n   * Value identifier when used inside `ToggleButtonGroup`.\n   */\n  value?: string;\n}\n\nconst styles = {\n  selected: css({\n    bg: 'bg.subtle',\n    fontWeight: 'semibold',\n    _hover: {bg: 'bg.subtle'},\n    _active: {bg: 'bg.subtle'},\n  }),\n  content: css({\n    display: 'contents',\n  }),\n  labelWrapper: css({\n    display: 'inline-flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minW: 0,\n  }),\n  label: css({\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    minW: 0,\n  }),\n  widthReservation: css({\n    display: 'block',\n    h: 0,\n    overflow: 'hidden',\n    visibility: 'hidden',\n    pointerEvents: 'none',\n    fontWeight: 'semibold',\n  }),\n  icon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }),\n  spinner: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    color: 'inherit',\n  }),\n} as const;\n\n/**\n * Button that toggles between selected and unselected states.\n */\nexport function ToggleButton({\n  children,\n  className,\n  'data-testid': dataTestId,\n  icon,\n  isDisabled: isDisabledProp = false,\n  isIconOnly = false,\n  isLoading = false,\n  isSelected: isSelectedProp = false,\n  label,\n  onChange,\n  selectedIcon,\n  ref,\n  size: sizeProp,\n  style,\n  tooltip,\n  value,\n}: ToggleButtonProps): React.JSX.Element {\n  const group = useToggleButtonGroup();\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (group != null && value == null) {\n      throw new Error(\n        'ToggleButton: `value` prop is required when used inside a ToggleButtonGroup.',\n      );\n    }\n  }\n\n  const isSelected =\n    group != null && value != null\n      ? group.selectedValues.has(value)\n      : isSelectedProp;\n  const size = sizeProp ?? group?.size ?? 'md';\n  const isDisabled = isDisabledProp || group?.isDisabled === true;\n  const resolvedIcon = isSelected && selectedIcon != null ? selectedIcon : icon;\n  const visibleLabel = children ?? label;\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (isDisabled || isLoading) {\n      event.preventDefault();\n      return;\n    }\n\n    if (group != null && value != null) {\n      group.onToggle(value);\n      return;\n    }\n\n    onChange?.(!isSelected);\n  };\n\n  const button = (\n    <button\n      aria-busy={isLoading || undefined}\n      aria-label={isIconOnly || isLoading ? label : undefined}\n      aria-pressed={isSelected}\n      className={cx(\n        buttonRecipe({variant: 'ghost', size, iconOnly: isIconOnly}),\n        isSelected ? styles.selected : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      disabled={isDisabled || isLoading}\n      onClick={handleClick}\n      ref={ref}\n      style={style}\n      type=\"button\">\n      <span aria-hidden={isLoading || undefined} className={styles.content}>\n        {resolvedIcon != null ? (\n          <span className={styles.icon}>\n            <Icon icon={resolvedIcon} size={size} />\n          </span>\n        ) : null}\n        {!isIconOnly ? (\n          <span className={styles.labelWrapper}>\n            <span className={styles.label}>{visibleLabel}</span>\n            <span aria-hidden=\"true\" className={styles.widthReservation}>\n              {visibleLabel}\n            </span>\n          </span>\n        ) : null}\n        {!isIconOnly && isLoading ? (\n          <span aria-hidden=\"true\" className={styles.spinner}>\n            <Spinner size={size} />\n          </span>\n        ) : null}\n      </span>\n    </button>\n  );\n\n  if (tooltip != null) {\n    return <Tooltip content={tooltip}>{button}</Tooltip>;\n  }\n\n  return button;\n}\n\nToggleButton.displayName = 'ToggleButton';\n"]}

package/dist/chunk-Z4TZAJS3.js

@@ -0,0 +1,14 @@
+import { createContext, use } from 'react';
+
+// src/components/ButtonGroup/ButtonGroupContext.ts
+var ButtonGroupContext = createContext(
+  null
+);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroup() {
+  return use(ButtonGroupContext);
+}
+
+export { ButtonGroupContext, useButtonGroup };
+//# sourceMappingURL=chunk-Z4TZAJS3.js.map
+//# sourceMappingURL=chunk-Z4TZAJS3.js.map

package/dist/chunk-Z4TZAJS3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroupContext.ts"],"names":[],"mappings":";;;AAWO,IAAM,kBAAA,GAAqB,aAAA;AAAA,EAChC;AACF;AACA,kBAAA,CAAmB,WAAA,GAAc,oBAAA;AAE1B,SAAS,cAAA,GAAiD;AAC/D,EAAA,OAAO,IAAI,kBAAkB,CAAA;AAC/B","file":"chunk-Z4TZAJS3.js","sourcesContent":["import {createContext, use} from 'react';\nimport type {ButtonSize} from '../Button/Button';\n\nexport type ButtonGroupOrientation = 'horizontal' | 'vertical';\n\nexport interface ButtonGroupContextValue {\n  isDisabled: boolean;\n  orientation: ButtonGroupOrientation;\n  size: ButtonSize;\n}\n\nexport const ButtonGroupContext = createContext<ButtonGroupContextValue | null>(\n  null,\n);\nButtonGroupContext.displayName = 'ButtonGroupContext';\n\nexport function useButtonGroup(): ButtonGroupContextValue | null {\n  return use(ButtonGroupContext);\n}\n"]}

package/dist/chunk-ZC7H4S4T.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Badge/Badge.recipe.ts
+var badgeRecipe = chunkJAX62FUE_cjs.cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "full",
+    fontFamily: "body",
+    lineHeight: "none",
+    fontWeight: "medium",
+    whiteSpace: "nowrap"
+  },
+  variants: {
+    size: {
+      sm: { gap: "1", h: "5", px: "2", fontSize: "sm" },
+      md: { gap: "1.5", h: "6", px: "2.5", fontSize: "sm" },
+      lg: { gap: "2", h: "7", px: "3", fontSize: "md" }
+    },
+    color: {
+      neutral: { bg: "surface.gray", color: "fg" },
+      info: { bg: "status.info.solid", color: "status.info.solidFg" },
+      success: { bg: "status.success.solid", color: "status.success.solidFg" },
+      warning: { bg: "status.warning.solid", color: "status.warning.solidFg" },
+      error: { bg: "status.error.solid", color: "status.error.solidFg" },
+      blue: { bg: "surface.blue", color: "surface.blue.fg" },
+      cyan: { bg: "surface.cyan", color: "surface.cyan.fg" },
+      green: { bg: "surface.green", color: "surface.green.fg" },
+      orange: { bg: "surface.orange", color: "surface.orange.fg" },
+      pink: { bg: "surface.pink", color: "surface.pink.fg" },
+      purple: { bg: "surface.purple", color: "surface.purple.fg" },
+      red: { bg: "surface.red", color: "surface.red.fg" },
+      teal: { bg: "surface.teal", color: "surface.teal.fg" },
+      yellow: { bg: "surface.yellow", color: "surface.yellow.fg" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "neutral"
+  }
+});
+function Badge({
+  "aria-label": ariaLabel,
+  className,
+  "data-testid": dataTestId,
+  icon,
+  label,
+  ref,
+  role,
+  size = "md",
+  style,
+  color = "neutral"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: chunkSPDVNY2Z_cjs.cx(badgeRecipe({ size, color }), className),
+      "data-testid": dataTestId,
+      ref,
+      role,
+      style,
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { "aria-hidden": "true", color: "inherit", icon, size }) : null,
+        label
+      ]
+    }
+  );
+}
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.badgeRecipe = badgeRecipe;
+//# sourceMappingURL=chunk-ZC7H4S4T.cjs.map
+//# sourceMappingURL=chunk-ZC7H4S4T.cjs.map

package/dist/chunk-ZC7H4S4T.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Badge/Badge.recipe.ts","../src/components/Badge/Badge.tsx"],"names":["cva","jsxs","cx","Icon"],"mappings":"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","file":"chunk-ZC7H4S4T.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const badgeRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'full',\n    fontFamily: 'body',\n    lineHeight: 'none',\n    fontWeight: 'medium',\n    whiteSpace: 'nowrap',\n  },\n  variants: {\n    size: {\n      sm: {gap: '1', h: '5', px: '2', fontSize: 'sm'},\n      md: {gap: '1.5', h: '6', px: '2.5', fontSize: 'sm'},\n      lg: {gap: '2', h: '7', px: '3', fontSize: 'md'},\n    },\n    color: {\n      neutral: {bg: 'surface.gray', color: 'fg'},\n      info: {bg: 'status.info.solid', color: 'status.info.solidFg'},\n      success: {bg: 'status.success.solid', color: 'status.success.solidFg'},\n      warning: {bg: 'status.warning.solid', color: 'status.warning.solidFg'},\n      error: {bg: 'status.error.solid', color: 'status.error.solidFg'},\n      blue: {bg: 'surface.blue', color: 'surface.blue.fg'},\n      cyan: {bg: 'surface.cyan', color: 'surface.cyan.fg'},\n      green: {bg: 'surface.green', color: 'surface.green.fg'},\n      orange: {bg: 'surface.orange', color: 'surface.orange.fg'},\n      pink: {bg: 'surface.pink', color: 'surface.pink.fg'},\n      purple: {bg: 'surface.purple', color: 'surface.purple.fg'},\n      red: {bg: 'surface.red', color: 'surface.red.fg'},\n      teal: {bg: 'surface.teal', color: 'surface.teal.fg'},\n      yellow: {bg: 'surface.yellow', color: 'surface.yellow.fg'},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'neutral',\n  },\n});\n\nexport type BadgeVariants = RecipeVariantProps<typeof badgeRecipe>;\n","import type {CSSProperties, Ref} from 'react';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {badgeRecipe} from './Badge.recipe';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\nexport type BadgeColor =\n  | 'neutral'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'blue'\n  | 'cyan'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\n/**\n * A compact status label, category marker, or count.\n */\nexport interface BadgeProps {\n  /**\n   * Accessible label for the badge.\n   */\n  'aria-label'?: string;\n  /**\n   * Additional CSS class names applied to the badge.\n   */\n  className?: string;\n  /**\n   * Visual color.\n   * @default 'neutral'\n   */\n  color?: BadgeColor;\n  /**\n   * Test ID applied to the badge.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional icon rendered before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Badge text or count.\n   */\n  label: string | number;\n  /**\n   * Ref forwarded to the badge element.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * ARIA role for the badge element.\n   */\n  role?: string;\n  /**\n   * Badge size.\n   * @default 'md'\n   */\n  size?: BadgeSize;\n  /**\n   * Inline styles applied to the badge.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * A compact status label, category marker, or count.\n */\nexport function Badge({\n  'aria-label': ariaLabel,\n  className,\n  'data-testid': dataTestId,\n  icon,\n  label,\n  ref,\n  role,\n  size = 'md',\n  style,\n  color = 'neutral',\n}: BadgeProps): React.JSX.Element {\n  return (\n    <span\n      aria-label={ariaLabel}\n      className={cx(badgeRecipe({size, color}), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      role={role}\n      style={style}>\n      {icon != null ? (\n        <Icon aria-hidden=\"true\" color=\"inherit\" icon={icon} size={size} />\n      ) : null}\n      {label}\n    </span>\n  );\n}\n\nBadge.displayName = 'Badge';\n"]}