silver-ui 0.1.0

package/dist/chunk-BCJ25X7C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/AccordionContext.tsx","../src/components/Accordion/Accordion.tsx","../src/components/Accordion/useCollapsible.ts","../src/components/Accordion/AccordionItem.tsx","../src/components/Accordion/Collapsible.tsx"],"names":["useState","styles","jsx"],"mappings":"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","file":"chunk-BCJ25X7C.js","sourcesContent":["import {createContext} from 'react';\n\nexport interface AccordionContextValue {\n  getIsOpen: (value: string) => boolean;\n  toggle: (value: string) => void;\n}\n\nexport const AccordionContext = createContext<AccordionContextValue | null>(\n  null,\n);\nAccordionContext.displayName = 'AccordionContext';\n","import {\n  useCallback,\n  useMemo,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {AccordionContext, type AccordionContextValue} from './AccordionContext';\n\n/**\n * A container that coordinates multiple `AccordionItem` children so that\n * one (`type=\"single\"`) or several (`type=\"multiple\"`) can be open at a\n * time. For a standalone disclosure widget, use `Collapsible` instead.\n */\ninterface AccordionBaseProps {\n  /**\n   * Accessible label for the accordion group. Provide either `aria-label`\n   * or `aria-labelledby`, not both.\n   */\n  'aria-label'?: string;\n  /**\n   * ID of an element that labels the accordion group. Provide either\n   * `aria-label` or `aria-labelledby`, not both.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * One or more `AccordionItem` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\nexport type AccordionProps =\n  | (AccordionBaseProps & {\n      /**\n       * Item value that is open on initial render, or `null` for all\n       * closed. Ignored when `value` is provided.\n       */\n      defaultValue?: string | null;\n      /**\n       * Called when the open item changes. Receives the item value string,\n       * or `null` when all items are closed.\n       */\n      onChange?: (value: string | null) => void;\n      /**\n       * Only one item can be open at a time. This is the default.\n       */\n      type?: 'single';\n      /**\n       * Controls which item is open externally. Pass `null` to close all\n       * items. When set, the component becomes controlled and `onChange`\n       * should be provided.\n       */\n      value?: string | null;\n    })\n  | (AccordionBaseProps & {\n      /**\n       * Item values that are open on initial render. Ignored when `value` is\n       * provided.\n       */\n      defaultValue?: string[];\n      /**\n       * Called when the set of open items changes. Receives an array of\n       * open item values.\n       */\n      onChange?: (value: string[]) => void;\n      /**\n       * Multiple items can be open simultaneously.\n       */\n      type: 'multiple';\n      /**\n       * Controls which items are open externally. When set, the component\n       * becomes controlled and `onChange` should be provided. Memoize array\n       * values to avoid unnecessary re-renders.\n       */\n      value?: string[];\n    });\n\nfunction normalizeToSet(\n  value: string | string[] | null | undefined,\n): ReadonlySet<string> {\n  if (value == null) {\n    return new Set();\n  }\n  return new Set(Array.isArray(value) ? value : [value]);\n}\n\nconst styles = {\n  root: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '3',\n  }),\n};\n\nexport function Accordion({\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  type = 'single',\n  defaultValue,\n  value: controlledValue,\n  onChange,\n  children,\n  className,\n  'data-testid': dataTestId,\n  ref,\n  style,\n}: AccordionProps): React.JSX.Element {\n  const isControlled = controlledValue !== undefined;\n  const [internalValue, setInternalValue] = useState<ReadonlySet<string>>(() =>\n    normalizeToSet(defaultValue),\n  );\n\n  const openValues = useMemo(\n    () => (isControlled ? normalizeToSet(controlledValue) : internalValue),\n    [isControlled, controlledValue, internalValue],\n  );\n\n  const getIsOpen = useCallback(\n    (itemValue: string) => openValues.has(itemValue),\n    [openValues],\n  );\n\n  const toggle = useCallback(\n    (itemValue: string) => {\n      let nextValues: ReadonlySet<string>;\n\n      if (type === 'single') {\n        nextValues = openValues.has(itemValue)\n          ? new Set()\n          : new Set([itemValue]);\n      } else {\n        const next = new Set(openValues);\n        if (next.has(itemValue)) {\n          next.delete(itemValue);\n        } else {\n          next.add(itemValue);\n        }\n        nextValues = next;\n      }\n\n      if (!isControlled) {\n        setInternalValue(nextValues);\n      }\n\n      if (onChange) {\n        const arr = [...nextValues];\n        if (type === 'single') {\n          (onChange as (value: string | null) => void)(arr[0] ?? null);\n        } else {\n          (onChange as (value: string[]) => void)(arr);\n        }\n      }\n    },\n    [type, openValues, isControlled, onChange],\n  );\n\n  const contextValue = useMemo<AccordionContextValue>(\n    () => ({getIsOpen, toggle}),\n    [getIsOpen, toggle],\n  );\n\n  return (\n    <AccordionContext value={contextValue}>\n      <div\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={cx(styles.root, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </AccordionContext>\n  );\n}\n\nAccordion.displayName = 'Accordion';\n","import {use, useState} from 'react';\nimport {AccordionContext} from './AccordionContext';\n\nexport interface CollapsibleConfig {\n  isDefaultOpen?: boolean;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface UseCollapsibleOptions {\n  config?: CollapsibleConfig;\n  value?: string;\n}\n\nexport interface UseCollapsibleReturn {\n  isOpen: boolean;\n  toggle: () => void;\n}\n\nexport function useCollapsible(\n  options: UseCollapsibleOptions,\n): UseCollapsibleReturn {\n  const {config, value} = options;\n\n  const group = use(AccordionContext);\n  const isMissingGroupValue = group != null && value == null;\n  const isControlledByGroup = group != null && value != null;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isMissingGroupValue) {\n      throw new Error(\n        'AccordionItem: `value` prop is required when used inside an Accordion.',\n      );\n    }\n  }\n\n  const [internalIsOpen, setInternalIsOpen] = useState(() => {\n    if (isControlledByGroup) {\n      return true;\n    }\n    if (config?.isOpen !== undefined) {\n      return config.isOpen;\n    }\n    return config?.isDefaultOpen ?? true;\n  });\n\n  let isOpen: boolean;\n  if (isControlledByGroup) {\n    isOpen = group.getIsOpen(value);\n  } else if (isMissingGroupValue) {\n    isOpen = false;\n  } else if (config?.isOpen !== undefined) {\n    isOpen = config.isOpen;\n  } else {\n    isOpen = internalIsOpen;\n  }\n\n  const toggle = () => {\n    if (isControlledByGroup) {\n      group.toggle(value);\n    } else if (isMissingGroupValue) {\n      return;\n    } else if (config?.isOpen !== undefined) {\n      config.onOpenChange?.(!isOpen);\n    } else {\n      setInternalIsOpen(prev => !prev);\n      config?.onOpenChange?.(!isOpen);\n    }\n  };\n\n  return {isOpen, toggle};\n}\n","import {ChevronDown} from 'lucide-react';\nimport {useId, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon} from '../Icon';\nimport {useCollapsible} from './useCollapsible';\n\n/**\n * A single expandable section within an `Accordion`, or a standalone\n * collapsible panel when used outside of an `Accordion` context. Prefer\n * the `Collapsible` wrapper for standalone usage.\n */\nexport interface AccordionItemProps {\n  /**\n   * Content revealed when the item is open.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the item is open on initial render. Ignored when `isOpen` is\n   * provided or the item is inside an `Accordion`. Defaults to `true`.\n   */\n  isDefaultOpen?: boolean;\n  /**\n   * Whether the trigger is disabled. Prevents toggling and applies disabled\n   * styling.\n   */\n  isDisabled?: boolean;\n  /**\n   * Controls the open state externally. When set, the component becomes\n   * controlled and `onOpenChange` should be provided. Ignored when the\n   * item is inside an `Accordion`.\n   */\n  isOpen?: boolean;\n  /**\n   * Called when the open state changes from user interaction.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Content rendered as the clickable trigger. Must be phrasing content\n   * (text, `<span>`, `<strong>`, icons, etc.) since it is placed inside a\n   * `<button>` element.\n   */\n  trigger: ReactNode;\n  /**\n   * Unique identifier used by a parent `Accordion` to track which items\n   * are open. Required when used inside an `Accordion`, ignored otherwise.\n   */\n  value?: string;\n}\n\nconst styles = {\n  root: css({\n    w: '100%',\n  }),\n  trigger: css({\n    all: 'unset',\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    w: '100%',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    fontSize: 'lg',\n    fontWeight: 'semibold',\n    color: 'fg',\n    textAlign: 'start',\n    py: 0,\n    _disabled: {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n      borderRadius: 'sm',\n    },\n  }),\n  chevron: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n    transitionProperty: 'transform',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    color: 'fg.muted',\n  }),\n  chevronOpen: css({\n    transform: 'rotate(180deg)',\n  }),\n  content: css({\n    pt: '1',\n  }),\n} as const;\n\nexport function AccordionItem({\n  trigger,\n  children,\n  isDefaultOpen,\n  isDisabled = false,\n  isOpen: controlledIsOpen,\n  onOpenChange,\n  value,\n  ref,\n  className,\n  'data-testid': dataTestId,\n  style,\n}: AccordionItemProps): React.JSX.Element {\n  const collapsibleConfig =\n    controlledIsOpen !== undefined\n      ? {isOpen: controlledIsOpen, onOpenChange}\n      : {isDefaultOpen: isDefaultOpen ?? true, onOpenChange};\n\n  const {isOpen, toggle} = useCollapsible({\n    config: collapsibleConfig,\n    value,\n  });\n\n  const id = useId();\n  const triggerId = `${id}-trigger`;\n  const panelId = `${id}-panel`;\n\n  return (\n    <div\n      className={cx(styles.root, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <button\n        aria-controls={panelId}\n        aria-expanded={isOpen}\n        className={styles.trigger}\n        disabled={isDisabled}\n        id={triggerId}\n        onClick={toggle}\n        type=\"button\">\n        {trigger}\n        <span\n          className={cx(\n            styles.chevron,\n            isOpen ? styles.chevronOpen : undefined,\n          )}>\n          <Icon icon={ChevronDown} size=\"md\" />\n        </span>\n      </button>\n      <div\n        aria-labelledby={triggerId}\n        className={styles.content}\n        hidden={!isOpen || undefined}\n        id={panelId}\n        role=\"region\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\nAccordionItem.displayName = 'AccordionItem';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {AccordionItem} from './AccordionItem';\n\n/**\n * A standalone disclosure widget that toggles the visibility of a content\n * panel. Use `Collapsible` for individual expand/collapse sections. For\n * coordinated groups where only one (or a subset) can be open at a time,\n * use `Accordion` with `AccordionItem` instead.\n */\nexport interface CollapsibleProps {\n  /**\n   * Content revealed when the collapsible is open.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the collapsible is open on initial render. Ignored when `isOpen`\n   * is provided. Defaults to `true`.\n   */\n  isDefaultOpen?: boolean;\n  /**\n   * Whether the trigger is disabled. Prevents toggling and applies disabled\n   * styling.\n   */\n  isDisabled?: boolean;\n  /**\n   * Controls the open state externally. When set, the component becomes\n   * controlled and `onOpenChange` should be provided to handle toggling.\n   */\n  isOpen?: boolean;\n  /**\n   * Called when the open state changes, either from a user click on the\n   * trigger or from a keyboard interaction.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Content rendered as the clickable trigger that toggles the panel. Must be\n   * phrasing content (text, `<span>`, `<strong>`, icons, etc.) since it is\n   * placed inside a `<button>` element.\n   */\n  trigger: ReactNode;\n}\n\nexport function Collapsible({\n  className,\n  'data-testid': dataTestId,\n  ref,\n  style,\n  ...props\n}: CollapsibleProps): React.JSX.Element {\n  return (\n    <AccordionItem\n      {...props}\n      className={className}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}\n    />\n  );\n}\n\nCollapsible.displayName = 'Collapsible';\n"]}

package/dist/chunk-BSBEPQLM.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+var chunk2OXKEUKG_cjs = require('./chunk-2OXKEUKG.cjs');
+var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ButtonGroup/ButtonGroup.recipe.ts
+var buttonGroupRecipe = chunkJAX62FUE_cjs.cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "stretch",
+    isolation: "isolate",
+    "& :where(button, a)": {
+      position: "relative"
+    },
+    "& :where(button, a):focus-visible": {
+      zIndex: 1
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderInlineStartWidth: "default",
+          borderInlineStartStyle: "solid",
+          borderInlineStartColor: "border"
+        },
+        "& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)": {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      },
+      vertical: {
+        flexDirection: "column",
+        "& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)": {
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          borderBlockStartWidth: "default",
+          borderBlockStartStyle: "solid",
+          borderBlockStartColor: "border"
+        },
+        "& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)": {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+function ButtonGroup({
+  children,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  label,
+  orientation = "horizontal",
+  ref,
+  size = "md",
+  style
+}) {
+  const contextValue = react.useMemo(
+    () => ({ isDisabled, orientation, size }),
+    [isDisabled, orientation, size]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk2OXKEUKG_cjs.ButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": label,
+      className: chunkSPDVNY2Z_cjs.cx(buttonGroupRecipe({ orientation }), className),
+      "data-orientation": orientation,
+      "data-testid": dataTestId,
+      ref,
+      role: "group",
+      style,
+      children
+    }
+  ) });
+}
+ButtonGroup.displayName = "ButtonGroup";
+
+exports.ButtonGroup = ButtonGroup;
+exports.buttonGroupRecipe = buttonGroupRecipe;
+//# sourceMappingURL=chunk-BSBEPQLM.cjs.map
+//# sourceMappingURL=chunk-BSBEPQLM.cjs.map

package/dist/chunk-BSBEPQLM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["cva","useMemo","jsx","ButtonGroupContext","cx"],"mappings":";;;;;;;;;AAEO,IAAM,oBAAoBA,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,gFAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA,QACF,8EAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,gFAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA,QACF,8EAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC;ACIM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACEC,cAAA,CAACC,oCAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWE,oBAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-BSBEPQLM.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        '& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        '& > :not(:last-child):is(button, a), & > :not(:last-child) :where(button, a)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button/Button';\nimport {buttonGroupRecipe} from './ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from './ButtonGroupContext';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}

package/dist/chunk-BTBOTNOE.cjs

@@ -0,0 +1,261 @@
+'use strict';
+
+var chunk2QM5XBX4_cjs = require('./chunk-2QM5XBX4.cjs');
+var chunk6SHL7FYO_cjs = require('./chunk-6SHL7FYO.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 SegmentedControlContext = react.createContext(null);
+SegmentedControlContext.displayName = "SegmentedControlContext";
+function useSegmentedControlContext() {
+  const context = react.use(SegmentedControlContext);
+  if (context == null) {
+    throw new Error(
+      "SegmentedControlItem must be used within a SegmentedControl."
+    );
+  }
+  return context;
+}
+var styles = {
+  root: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5",
+    p: "0.5",
+    bg: "surface.gray",
+    borderRadius: "md"
+  }),
+  fill: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    w: "full"
+  }),
+  disabled: chunkAZDWQGAX_cjs.css({
+    opacity: 0.5,
+    pointerEvents: "none"
+  })
+};
+function SegmentedControl({
+  children,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  label,
+  layout = "hug",
+  onChange,
+  ref,
+  size = "md",
+  style,
+  value
+}) {
+  const containerRef = react.useRef(null);
+  const handleChange = react.useCallback(
+    (nextValue) => {
+      onChange(nextValue);
+    },
+    [onChange]
+  );
+  const contextValue = react.useMemo(
+    () => ({ isDisabled, layout, onChange: handleChange, size, value }),
+    [handleChange, isDisabled, layout, size, value]
+  );
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      const container = containerRef.current;
+      if (container == null) {
+        return;
+      }
+      const items = Array.from(
+        container.querySelectorAll(
+          '[role="radio"]:not([aria-disabled="true"])'
+        )
+      );
+      if (items.length === 0) {
+        return;
+      }
+      const currentIndex = items.findIndex(
+        (item) => item === document.activeElement
+      );
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = items.length - 1;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      const nextValue = nextItem.dataset.value;
+      if (nextValue != null) {
+        handleChange(nextValue);
+      }
+    },
+    [handleChange, isDisabled]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SegmentedControlContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.root,
+        layout === "fill" ? styles.fill : void 0,
+        isDisabled ? styles.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      onKeyDown: handleKeyDown,
+      ref: chunk6SHL7FYO_cjs.mergeRefs(ref, containerRef),
+      role: "radiogroup",
+      style,
+      tabIndex: -1,
+      children
+    }
+  ) });
+}
+SegmentedControl.displayName = "SegmentedControl";
+var styles2 = {
+  item: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1",
+    borderWidth: 0,
+    borderStyle: "none",
+    bg: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    fontFamily: "body",
+    fontWeight: "medium",
+    lineHeight: "normal",
+    transitionProperty: "background-color, color, box-shadow",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    _hover: {
+      bg: "bg.subtle"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  selected: chunkAZDWQGAX_cjs.css({
+    bg: "bg",
+    color: "fg",
+    fontWeight: "semibold",
+    boxShadow: "sm",
+    _hover: {
+      bg: "bg"
+    }
+  }),
+  disabled: chunkAZDWQGAX_cjs.css({
+    color: "fg.disabled",
+    cursor: "default",
+    _hover: {
+      bg: "transparent"
+    }
+  }),
+  fill: chunkAZDWQGAX_cjs.css({
+    flex: 1
+  }),
+  icon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  size: {
+    sm: chunkAZDWQGAX_cjs.css({
+      h: "7",
+      px: "2",
+      borderRadius: "sm",
+      fontSize: "sm"
+    }),
+    md: chunkAZDWQGAX_cjs.css({
+      h: "9",
+      px: "3",
+      borderRadius: "sm",
+      fontSize: "sm"
+    }),
+    lg: chunkAZDWQGAX_cjs.css({
+      h: "11",
+      px: "3",
+      borderRadius: "md",
+      fontSize: "md"
+    })
+  }
+};
+function SegmentedControlItem({
+  className,
+  "data-testid": dataTestId,
+  icon,
+  isDisabled = false,
+  isLabelHidden = false,
+  label,
+  ref,
+  style,
+  value
+}) {
+  const context = useSegmentedControlContext();
+  const isSelected = context.value === value;
+  const isItemDisabled = context.isDisabled || isDisabled;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "aria-checked": isSelected,
+      "aria-disabled": isItemDisabled || void 0,
+      "aria-label": isLabelHidden ? label : void 0,
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles2.item,
+        styles2.size[context.size],
+        context.layout === "fill" ? styles2.fill : void 0,
+        isSelected ? styles2.selected : void 0,
+        isItemDisabled ? styles2.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      "data-value": value,
+      onClick: () => {
+        if (!isItemDisabled && !isSelected) {
+          context.onChange(value);
+        }
+      },
+      ref,
+      role: "radio",
+      style,
+      tabIndex: isSelected ? 0 : -1,
+      type: "button",
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon, size: context.size }) }) : null,
+        isLabelHidden ? /* @__PURE__ */ jsxRuntime.jsx(chunk2QM5XBX4_cjs.VisuallyHidden, { children: label }) : label
+      ]
+    }
+  );
+}
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlItem = SegmentedControlItem;
+//# sourceMappingURL=chunk-BTBOTNOE.cjs.map
+//# sourceMappingURL=chunk-BTBOTNOE.cjs.map

package/dist/chunk-BTBOTNOE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SegmentedControl/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControl.tsx","../src/components/SegmentedControl/SegmentedControlItem.tsx"],"names":["createContext","use","css","useRef","useCallback","useMemo","jsx","cx","mergeRefs","styles","jsxs","Icon","VisuallyHidden"],"mappings":"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","file":"chunk-BTBOTNOE.cjs","sourcesContent":["import {createContext, use} from 'react';\n\nexport type SegmentedControlLayout = 'fill' | 'hug';\nexport type SegmentedControlSize = 'lg' | 'md' | 'sm';\n\nexport interface SegmentedControlContextValue {\n  isDisabled: boolean;\n  layout: SegmentedControlLayout;\n  onChange: (value: string) => void;\n  size: SegmentedControlSize;\n  value: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\nSegmentedControlContext.displayName = 'SegmentedControlContext';\n\nexport function useSegmentedControlContext(): SegmentedControlContextValue {\n  const context = use(SegmentedControlContext);\n  if (context == null) {\n    throw new Error(\n      'SegmentedControlItem must be used within a SegmentedControl.',\n    );\n  }\n  return context;\n}\n","import {\n  useCallback,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {\n  SegmentedControlContext,\n  type SegmentedControlLayout,\n  type SegmentedControlSize,\n} from './SegmentedControlContext';\n\nexport interface SegmentedControlProps<TValue extends string = string> {\n  /**\n   * SegmentedControlItem children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the entire control is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the radio group.\n   */\n  label: string;\n  /**\n   * Segment layout mode.\n   * @default 'hug'\n   */\n  layout?: SegmentedControlLayout;\n  /**\n   * Called when a segment is selected.\n   */\n  onChange: (value: TValue) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Control size.\n   * @default 'md'\n   */\n  size?: SegmentedControlSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current selected value.\n   */\n  value: TValue;\n}\n\nconst styles = {\n  root: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '0.5',\n    p: '0.5',\n    bg: 'surface.gray',\n    borderRadius: 'md',\n  }),\n  fill: css({\n    display: 'flex',\n    w: 'full',\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n} as const;\n\n/**\n * Segmented toggle control that allows selecting one option from a set.\n */\nexport function SegmentedControl<TValue extends string = string>({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  layout = 'hug',\n  onChange,\n  ref,\n  size = 'md',\n  style,\n  value,\n}: SegmentedControlProps<TValue>): React.JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const handleChange = useCallback(\n    (nextValue: string) => {\n      onChange(nextValue as TValue);\n    },\n    [onChange],\n  );\n  const contextValue = useMemo(\n    () => ({isDisabled, layout, onChange: handleChange, size, value}),\n    [handleChange, isDisabled, layout, size, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const container = containerRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const items = Array.from(\n        container.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n\n      if (items.length === 0) {\n        return;\n      }\n\n      const currentIndex = items.findIndex(\n        item => item === document.activeElement,\n      );\n      let nextIndex: number;\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown':\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = items.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      event.preventDefault();\n      const nextItem = items[nextIndex];\n      nextItem.focus();\n      const nextValue = nextItem.dataset.value;\n      if (nextValue != null) {\n        handleChange(nextValue);\n      }\n    },\n    [handleChange, isDisabled],\n  );\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        aria-orientation=\"horizontal\"\n        className={cx(\n          styles.root,\n          layout === 'fill' ? styles.fill : undefined,\n          isDisabled ? styles.disabled : undefined,\n          className,\n        )}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyDown}\n        ref={mergeRefs(ref, containerRef)}\n        role=\"radiogroup\"\n        style={style}\n        tabIndex={-1}>\n        {children}\n      </div>\n    </SegmentedControlContext>\n  );\n}\n\nSegmentedControl.displayName = 'SegmentedControl';\n","import type {CSSProperties, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useSegmentedControlContext} from './SegmentedControlContext';\n\nexport interface SegmentedControlItemProps<TValue extends string = string> {\n  /**\n   * Additional CSS class names applied to the segment.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the segment.\n   */\n  'data-testid'?: string;\n  /**\n   * Icon element displayed before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether this segment is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Accessible and visible label for the segment.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the segment button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the segment.\n   */\n  style?: CSSProperties;\n  /**\n   * Unique value represented by this segment.\n   */\n  value: TValue;\n}\n\nconst styles = {\n  item: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '1',\n    borderWidth: 0,\n    borderStyle: 'none',\n    bg: 'transparent',\n    color: 'fg.muted',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    fontWeight: 'medium',\n    lineHeight: 'normal',\n    transitionProperty: 'background-color, color, box-shadow',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    _hover: {\n      bg: 'bg.subtle',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  selected: css({\n    bg: 'bg',\n    color: 'fg',\n    fontWeight: 'semibold',\n    boxShadow: 'sm',\n    _hover: {\n      bg: 'bg',\n    },\n  }),\n  disabled: css({\n    color: 'fg.disabled',\n    cursor: 'default',\n    _hover: {\n      bg: 'transparent',\n    },\n  }),\n  fill: css({\n    flex: 1,\n  }),\n  icon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }),\n  size: {\n    sm: css({\n      h: '7',\n      px: '2',\n      borderRadius: 'sm',\n      fontSize: 'sm',\n    }),\n    md: css({\n      h: '9',\n      px: '3',\n      borderRadius: 'sm',\n      fontSize: 'sm',\n    }),\n    lg: css({\n      h: '11',\n      px: '3',\n      borderRadius: 'md',\n      fontSize: 'md',\n    }),\n  },\n} as const;\n\n/**\n * Individual segment within a `SegmentedControl`.\n */\nexport function SegmentedControlItem<TValue extends string = string>({\n  className,\n  'data-testid': dataTestId,\n  icon,\n  isDisabled = false,\n  isLabelHidden = false,\n  label,\n  ref,\n  style,\n  value,\n}: SegmentedControlItemProps<TValue>): React.JSX.Element {\n  const context = useSegmentedControlContext();\n  const isSelected = context.value === value;\n  const isItemDisabled = context.isDisabled || isDisabled;\n\n  return (\n    <button\n      aria-checked={isSelected}\n      aria-disabled={isItemDisabled || undefined}\n      aria-label={isLabelHidden ? label : undefined}\n      className={cx(\n        styles.item,\n        styles.size[context.size],\n        context.layout === 'fill' ? styles.fill : undefined,\n        isSelected ? styles.selected : undefined,\n        isItemDisabled ? styles.disabled : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      data-value={value}\n      onClick={() => {\n        if (!isItemDisabled && !isSelected) {\n          context.onChange(value);\n        }\n      }}\n      ref={ref}\n      role=\"radio\"\n      style={style}\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\">\n      {icon != null ? (\n        <span className={styles.icon}>\n          <Icon icon={icon} size={context.size} />\n        </span>\n      ) : null}\n      {isLabelHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n    </button>\n  );\n}\n\nSegmentedControlItem.displayName = 'SegmentedControlItem';\n"]}