silver-ui 0.3.1 → 0.5.0

package/dist/{chunk-4H35H54I.cjs → chunk-RRXOSNCX.cjs}

@@ -1,15 +1,15 @@
 'use strict';
 
-var chunkMUUPZEZ5_cjs = require('./chunk-MUUPZEZ5.cjs');
+var chunk2GMDMZKI_cjs = require('./chunk-2GMDMZKI.cjs');
 var chunkVXBVSYPA_cjs = require('./chunk-VXBVSYPA.cjs');
-var chunkBAPCHFNX_cjs = require('./chunk-BAPCHFNX.cjs');
-var chunk2P6D43V2_cjs = require('./chunk-2P6D43V2.cjs');
-var chunkBRB52QFV_cjs = require('./chunk-BRB52QFV.cjs');
-var chunkKFDHP4WP_cjs = require('./chunk-KFDHP4WP.cjs');
+var chunkFFF57VHO_cjs = require('./chunk-FFF57VHO.cjs');
+var chunkXPHXAZCE_cjs = require('./chunk-XPHXAZCE.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunkBSI4BQEX_cjs = require('./chunk-BSI4BQEX.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
-var chunk4TIAKZ4Q_cjs = require('./chunk-4TIAKZ4Q.cjs');
-var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkJ4PIYOWT_cjs = require('./chunk-J4PIYOWT.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -82,9 +82,9 @@ function NumberInput({
 }) {
   const inputId = react.useId();
   const descriptionID = chunkQAO6QMNQ_cjs.isReactNode(description) ? `${inputId}-description` : void 0;
-  const statusMessageID = chunk2P6D43V2_cjs.getStatusMessageID(inputId, status);
-  const describedBy = chunk2P6D43V2_cjs.getDescribedBy(descriptionID, statusMessageID);
-  const inputGroup = chunkMUUPZEZ5_cjs.useInputGroup();
+  const statusMessageID = chunkXPHXAZCE_cjs.getStatusMessageID(inputId, status);
+  const describedBy = chunkXPHXAZCE_cjs.getDescribedBy(descriptionID, statusMessageID);
+  const inputGroup = chunk2GMDMZKI_cjs.useInputGroup();
   const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;
   const size = inputGroup?.size ?? sizeProp;
   const effectiveStatusType = status?.type ?? inputGroup?.statusType;
@@ -95,7 +95,7 @@ function NumberInput({
     }
     return value == null ? "" : String(value);
   }, [pendingInput, value]);
-  const necessity = chunkBAPCHFNX_cjs.getNecessity(isOptional, isRequired);
+  const necessity = chunkFFF57VHO_cjs.getNecessity(isOptional, isRequired);
   const inputWrapper = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -109,7 +109,7 @@ function NumberInput({
       ),
       style: inputGroup != null ? style : void 0,
       children: [
-        startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4TIAKZ4Q_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+        startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkJ4PIYOWT_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -169,7 +169,7 @@ function NumberInput({
         ),
         units != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.units, children: units }) : null,
         hasClear === true && value != null && !effectiveDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunkBRB52QFV_cjs.Button,
+          chunk5XMWGK3O_cjs.Button,
           {
             icon: lucideReact.X,
             isIconOnly: true,
@@ -180,8 +180,8 @@ function NumberInput({
           }
         ) : null,
         endContent,
-        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkKFDHP4WP_cjs.Spinner, { size: "sm" }) : null,
-        status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: chunk2P6D43V2_cjs.getStatusIcon(status.type) }) : null
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunkBSI4BQEX_cjs.Spinner, { size: "sm" }) : null,
+        status != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkVXBVSYPA_cjs.inputStyles.iconSlot, children: chunkXPHXAZCE_cjs.getStatusIcon(status.type) }) : null
       ]
     }
   );
@@ -189,7 +189,7 @@ function NumberInput({
     return inputWrapper;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkBAPCHFNX_cjs.Field,
+    chunkFFF57VHO_cjs.Field,
     {
       className,
       description,
@@ -210,5 +210,5 @@ function NumberInput({
 NumberInput.displayName = "NumberInput";
 
 exports.NumberInput = NumberInput;
-//# sourceMappingURL=chunk-4H35H54I.cjs.map
-//# sourceMappingURL=chunk-4H35H54I.cjs.map
+//# sourceMappingURL=chunk-RRXOSNCX.cjs.map
+//# sourceMappingURL=chunk-RRXOSNCX.cjs.map

package/dist/chunk-RRXOSNCX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NumberInput/NumberInput.tsx"],"names":["css","useId","isReactNode","getStatusMessageID","getDescribedBy","useInputGroup","useState","useMemo","getNecessity","jsxs","cx","inputRecipe","jsx","inputStyles","Icon","Button","X","Spinner","getStatusIcon","Field"],"mappings":"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","file":"chunk-RRXOSNCX.cjs","sourcesContent":["import {X} from 'lucide-react';\nimport {\n  useId,\n  useMemo,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from 'components/Field';\nimport {inputRecipe, inputStyles} from 'components/Field/inputStyles';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from 'components/Field/inputUtils';\nimport {Icon, type IconComponent} from 'components/Icon';\nimport {useInputGroup} from 'components/InputGroup';\nimport {Spinner} from 'components/Spinner';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport {css} from 'styled-system/css';\n\ntype NumberInputBaseProps = {\n  /**\n   * HTML autocomplete attribute value.\n   */\n  autoComplete?: string;\n  /**\n   * Additional CSS class names applied to the input wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered after the input, before the status icon.\n   */\n  endContent?: ReactNode;\n  /**\n   * Whether to focus the input on mount.\n   * @default false\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * HTML name attribute.\n   */\n  htmlName?: string;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to restrict input to integer values only.\n   * @default false\n   */\n  isIntegerOnly?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon rendered beside the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum allowed value.\n   */\n  max?: number | null;\n  /**\n   * Minimum allowed value.\n   */\n  min?: number | null;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when Enter is pressed.\n   */\n  onEnter?: () => void;\n  /**\n   * Called when the input receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Keyboard event handler for the input.\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n  /**\n   * Placeholder text.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Icon shown before the input.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Step increment for the number input.\n   */\n  step?: number | null;\n  /**\n   * Inline styles applied to the input wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * Unit label displayed after the input value.\n   */\n  units?: string | null;\n  /**\n   * Controlled numeric value.\n   */\n  value: number | null;\n} & FieldNecessity;\n\ntype NumberInputNonClearableProps = NumberInputBaseProps & {\n  /**\n   * Whether to show a clear button.\n   */\n  hasClear?: false;\n  /**\n   * Called when the numeric value changes.\n   */\n  onChange: (value: number) => void;\n};\n\ntype NumberInputClearableProps = NumberInputBaseProps & {\n  /**\n   * Whether to show a clear button.\n   */\n  hasClear: true;\n  /**\n   * Called when the numeric value changes or is cleared.\n   */\n  onChange: (value: number | null) => void;\n};\n\nexport type NumberInputProps =\n  | NumberInputClearableProps\n  | NumberInputNonClearableProps;\n\nconst styles = {\n  units: css({\n    color: 'fg.muted',\n    fontFamily: 'body',\n    fontSize: 'sm',\n  }),\n} as const;\n\nfunction parseNumberInput(\n  input: string,\n  options: {isIntegerOnly: boolean},\n): number | null {\n  const trimmed = input.trim();\n  if (trimmed === '' || trimmed === '-') {\n    return null;\n  }\n  const number = Number(trimmed);\n  if (!Number.isFinite(number)) {\n    return null;\n  }\n  if (options.isIntegerOnly && !Number.isInteger(number)) {\n    return null;\n  }\n  return number;\n}\n\nfunction clampValue(\n  value: number,\n  min?: number | null,\n  max?: number | null,\n): number {\n  let clamped = value;\n  if (min != null && clamped < min) {\n    clamped = min;\n  }\n  if (max != null && clamped > max) {\n    clamped = max;\n  }\n  return clamped;\n}\n\n/**\n * Numeric input field with optional min/max bounds and step control.\n */\nexport function NumberInput({\n  label,\n  value,\n  onChange,\n  size: sizeProp = 'md',\n  description,\n  endContent,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isIntegerOnly = false,\n  isLoading = false,\n  hasClear,\n  hasAutoFocus = false,\n  htmlName,\n  autoComplete,\n  min,\n  max,\n  step,\n  units,\n  status,\n  labelIcon,\n  labelTooltip,\n  startIcon,\n  placeholder,\n  onFocus,\n  onBlur,\n  onEnter,\n  onKeyDown,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: NumberInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID = isReactNode(description)\n    ? `${inputId}-description`\n    : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const inputGroup = useInputGroup();\n  const effectiveDisabled = isDisabled || inputGroup?.isDisabled === true;\n  const size = inputGroup?.size ?? sizeProp;\n  const effectiveStatusType = status?.type ?? inputGroup?.statusType;\n  const [pendingInput, setPendingInput] = useState<string | null>(null);\n  const displayValue = useMemo(() => {\n    if (pendingInput != null) {\n      return pendingInput;\n    }\n    return value == null ? '' : String(value);\n  }, [pendingInput, value]);\n\n  const necessity = getNecessity(isOptional, isRequired);\n\n  const inputWrapper = (\n    <div\n      className={cx(\n        inputRecipe({\n          size,\n          status: effectiveStatusType,\n          isDisabled: effectiveDisabled,\n        }),\n        inputGroup != null ? className : undefined,\n      )}\n      style={inputGroup != null ? style : undefined}>\n      {startIcon != null ? (\n        <span className={inputStyles.iconSlot}>\n          <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        aria-label={inputGroup != null ? label : undefined}\n        aria-required={isRequired ?? undefined}\n        autoComplete={autoComplete}\n        // eslint-disable-next-line jsx-a11y-x/no-autofocus\n        autoFocus={hasAutoFocus}\n        className={inputStyles.control}\n        data-autofocus={hasAutoFocus || undefined}\n        data-testid={dataTestId}\n        disabled={effectiveDisabled}\n        id={inputId}\n        max={max ?? undefined}\n        min={min ?? undefined}\n        name={htmlName}\n        onBlur={event => {\n          if (pendingInput != null) {\n            const parsed = parseNumberInput(pendingInput, {isIntegerOnly});\n            if (parsed != null) {\n              const clamped = clampValue(parsed, min, max);\n              if (clamped !== value) {\n                onChange(clamped);\n              }\n            }\n            setPendingInput(null);\n          }\n          onBlur?.(event);\n        }}\n        onChange={(event: ChangeEvent<HTMLInputElement>) => {\n          const nextValue = event.target.value;\n          setPendingInput(nextValue);\n          const parsed = parseNumberInput(nextValue, {isIntegerOnly});\n          if (parsed != null) {\n            const clamped = clampValue(parsed, min, max);\n            if (clamped !== value) {\n              onChange(clamped);\n            }\n          }\n        }}\n        onFocus={onFocus}\n        onKeyDown={event => {\n          if (event.key === 'Enter' && !event.nativeEvent.isComposing) {\n            onEnter?.();\n          }\n          onKeyDown?.(event);\n        }}\n        placeholder={placeholder}\n        ref={ref}\n        required={isRequired ?? undefined}\n        step={step ?? undefined}\n        type=\"number\"\n        value={displayValue}\n      />\n      {units != null ? <span className={styles.units}>{units}</span> : null}\n      {hasClear === true && value != null && !effectiveDisabled ? (\n        <Button\n          icon={X}\n          isIconOnly\n          label={`Clear ${label}`}\n          onClick={() => onChange(null)}\n          size=\"sm\"\n          variant=\"ghost\"\n        />\n      ) : null}\n      {endContent}\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {status != null ? (\n        <span className={inputStyles.iconSlot}>\n          {getStatusIcon(status.type)}\n        </span>\n      ) : null}\n    </div>\n  );\n\n  if (inputGroup != null) {\n    return inputWrapper;\n  }\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      {inputWrapper}\n    </Field>\n  );\n}\n\nNumberInput.displayName = 'NumberInput';\n"]}

package/dist/{chunk-2VOB6LEI.js → chunk-S4IHNNA2.js}

@@ -1,11 +1,107 @@
-import { VisuallyHidden } from './chunk-EXYBQVZT.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
-import { css } from './chunk-OD4DHHZH.js';
 import { createContext, useRef, useCallback, useMemo, use } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/components/SegmentedControl/SegmentedControl.recipe.ts
+var segmentedControlRecipe = sva({
+  slots: ["root", "item", "icon"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5",
+      p: "0.5",
+      bg: "surface.gray",
+      borderRadius: "md"
+    },
+    item: {
+      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"
+      }
+    },
+    icon: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    }
+  },
+  variants: {
+    size: {
+      sm: { item: { h: "7", px: "2", borderRadius: "sm", fontSize: "sm" } },
+      md: { item: { h: "9", px: "3", borderRadius: "sm", fontSize: "sm" } },
+      lg: { item: { h: "11", px: "3", borderRadius: "md", fontSize: "md" } }
+    },
+    layout: {
+      hug: {},
+      fill: {
+        root: { display: "flex", w: "full" },
+        item: { flex: 1 }
+      }
+    },
+    isSelected: {
+      true: {
+        item: {
+          bg: "bg",
+          color: "fg",
+          fontWeight: "semibold",
+          boxShadow: "sm",
+          _hover: {
+            bg: "bg"
+          }
+        }
+      },
+      false: {}
+    },
+    isDisabled: {
+      true: {
+        root: {
+          opacity: 0.5,
+          pointerEvents: "none"
+        },
+        item: {
+          color: "fg.disabled",
+          cursor: "default",
+          _hover: {
+            bg: "transparent"
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    layout: "hug",
+    isSelected: false,
+    isDisabled: false
+  }
+});
 var SegmentedControlContext = createContext(null);
 SegmentedControlContext.displayName = "SegmentedControlContext";
 function useSegmentedControlContext() {
@@ -17,24 +113,6 @@ function useSegmentedControlContext() {
   }
   return context;
 }
-var styles = {
-  root: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "0.5",
-    p: "0.5",
-    bg: "surface.gray",
-    borderRadius: "md"
-  }),
-  fill: css({
-    display: "flex",
-    w: "full"
-  }),
-  disabled: css({
-    opacity: 0.5,
-    pointerEvents: "none"
-  })
-};
 function SegmentedControl({
   children,
   className,
@@ -59,6 +137,7 @@ function SegmentedControl({
     () => ({ isDisabled, layout, onChange: handleChange, size, value }),
     [handleChange, isDisabled, layout, size, value]
   );
+  const classes = segmentedControlRecipe({ isDisabled, layout });
   const handleKeyDown = useCallback(
     (event) => {
       if (isDisabled) {
@@ -114,12 +193,7 @@ function SegmentedControl({
       "aria-disabled": isDisabled || void 0,
       "aria-label": label,
       "aria-orientation": "horizontal",
-      className: cx(
-        styles.root,
-        layout === "fill" ? styles.fill : void 0,
-        isDisabled ? styles.disabled : void 0,
-        className
-      ),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       onKeyDown: handleKeyDown,
       ref: mergeRefs(ref, containerRef),
@@ -131,79 +205,6 @@ function SegmentedControl({
   ) });
 }
 SegmentedControl.displayName = "SegmentedControl";
-var styles2 = {
-  item: 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: css({
-    bg: "bg",
-    color: "fg",
-    fontWeight: "semibold",
-    boxShadow: "sm",
-    _hover: {
-      bg: "bg"
-    }
-  }),
-  disabled: css({
-    color: "fg.disabled",
-    cursor: "default",
-    _hover: {
-      bg: "transparent"
-    }
-  }),
-  fill: css({
-    flex: 1
-  }),
-  icon: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }),
-  size: {
-    sm: css({
-      h: "7",
-      px: "2",
-      borderRadius: "sm",
-      fontSize: "sm"
-    }),
-    md: css({
-      h: "9",
-      px: "3",
-      borderRadius: "sm",
-      fontSize: "sm"
-    }),
-    lg: css({
-      h: "11",
-      px: "3",
-      borderRadius: "md",
-      fontSize: "md"
-    })
-  }
-};
 function SegmentedControlItem({
   className,
   "data-testid": dataTestId,
@@ -218,20 +219,19 @@ function SegmentedControlItem({
   const context = useSegmentedControlContext();
   const isSelected = context.value === value;
   const isItemDisabled = context.isDisabled || isDisabled;
+  const classes = segmentedControlRecipe({
+    size: context.size,
+    layout: context.layout,
+    isSelected,
+    isDisabled: isItemDisabled
+  });
   return /* @__PURE__ */ jsxs(
     "button",
     {
       "aria-checked": isSelected,
       "aria-disabled": isItemDisabled || void 0,
       "aria-label": isLabelHidden ? label : void 0,
-      className: 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
-      ),
+      className: cx(classes.item, className),
       "data-testid": dataTestId,
       "data-value": value,
       onClick: () => {
@@ -245,7 +245,7 @@ function SegmentedControlItem({
       tabIndex: isSelected ? 0 : -1,
       type: "button",
       children: [
-        icon != null ? /* @__PURE__ */ jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: context.size }) }) : null,
+        icon != null ? /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: context.size }) }) : null,
         isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label
       ]
     }
@@ -254,5 +254,5 @@ function SegmentedControlItem({
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
 export { SegmentedControl, SegmentedControlItem };
-//# sourceMappingURL=chunk-2VOB6LEI.js.map
-//# sourceMappingURL=chunk-2VOB6LEI.js.map
+//# sourceMappingURL=chunk-S4IHNNA2.js.map
+//# sourceMappingURL=chunk-S4IHNNA2.js.map

package/dist/chunk-S4IHNNA2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SegmentedControl/SegmentedControl.recipe.ts","../src/components/SegmentedControl/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControl.tsx","../src/components/SegmentedControl/SegmentedControlItem.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-S4IHNNA2.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const segmentedControlRecipe = sva({\n  slots: ['root', 'item', 'icon'],\n  base: {\n    root: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '0.5',\n      p: '0.5',\n      bg: 'surface.gray',\n      borderRadius: 'md',\n    },\n    item: {\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    icon: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    },\n  },\n  variants: {\n    size: {\n      sm: {item: {h: '7', px: '2', borderRadius: 'sm', fontSize: 'sm'}},\n      md: {item: {h: '9', px: '3', borderRadius: 'sm', fontSize: 'sm'}},\n      lg: {item: {h: '11', px: '3', borderRadius: 'md', fontSize: 'md'}},\n    },\n    layout: {\n      hug: {},\n      fill: {\n        root: {display: 'flex', w: 'full'},\n        item: {flex: 1},\n      },\n    },\n    isSelected: {\n      true: {\n        item: {\n          bg: 'bg',\n          color: 'fg',\n          fontWeight: 'semibold',\n          boxShadow: 'sm',\n          _hover: {\n            bg: 'bg',\n          },\n        },\n      },\n      false: {},\n    },\n    isDisabled: {\n      true: {\n        root: {\n          opacity: 0.5,\n          pointerEvents: 'none',\n        },\n        item: {\n          color: 'fg.disabled',\n          cursor: 'default',\n          _hover: {\n            bg: 'transparent',\n          },\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    layout: 'hug',\n    isSelected: false,\n    isDisabled: false,\n  },\n});\n\nexport type SegmentedControlVariants = RecipeVariantProps<\n  typeof segmentedControlRecipe\n>;\n","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 {segmentedControlRecipe} from 'components/SegmentedControl/SegmentedControl.recipe';\nimport {\n  SegmentedControlContext,\n  type SegmentedControlLayout,\n  type SegmentedControlSize,\n} from 'components/SegmentedControl/SegmentedControlContext';\nimport {cx} from 'internal/cx';\nimport {mergeRefs} from 'internal/mergeRefs';\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\n/**\n * Segmented toggle control for selecting one option from a small set.\n *\n * Rendered as a radio group (`role=\"radiogroup\"`), so reach for it when picking\n * a value — filters, settings, or view modes whose content you render yourself.\n * If selecting an option should show or hide associated content panels, use\n * {@link Tabs} instead.\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  const classes = segmentedControlRecipe({isDisabled, layout});\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(classes.root, className)}\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 {Icon, type IconComponent} from 'components/Icon';\nimport {segmentedControlRecipe} from 'components/SegmentedControl/SegmentedControl.recipe';\nimport {useSegmentedControlContext} from 'components/SegmentedControl/SegmentedControlContext';\nimport {VisuallyHidden} from 'internal/VisuallyHidden';\nimport {cx} from 'internal/cx';\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\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  const classes = segmentedControlRecipe({\n    size: context.size,\n    layout: context.layout,\n    isSelected,\n    isDisabled: isItemDisabled,\n  });\n\n  return (\n    <button\n      aria-checked={isSelected}\n      aria-disabled={isItemDisabled || undefined}\n      aria-label={isLabelHidden ? label : undefined}\n      className={cx(classes.item, className)}\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={classes.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"]}

package/dist/{chunk-VEUZ5DZR.js → chunk-S5CMLG2E.js}

@@ -1,11 +1,11 @@
-import { nowMonotonicMilliseconds } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-RVENUWRD.js';
-import { token } from './chunk-76B2VLID.js';
-import { useLayer, useIsomorphicLayoutEffect } from './chunk-ZNUOFLCQ.js';
+import { Button } from './chunk-THTVYP5V.js';
+import { token } from './chunk-RJEZBOSH.js';
+import { VisuallyHidden } from './chunk-V2V5TTTL.js';
+import { useLayer, useIsomorphicLayoutEffect } from './chunk-EBJPUXFQ.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { cx } from './chunk-GUKZNXTB.js';
 import { css } from './chunk-OD4DHHZH.js';
-import { useRef, useEffect, useCallback, useMemo } from 'react';
+import { cx } from './chunk-PPNETWIP.js';
+import { useRef, useCallback, useEffect, useMemo } from 'react';
 import { X } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -77,28 +77,35 @@ var styles = {
     borderWidth: "default",
     borderStyle: "solid",
     borderColor: "border"
-  }),
-  closeButtonWrapper: css({
-    position: "absolute",
-    w: "1px",
-    h: "1px",
-    overflow: "hidden",
-    clipPath: "inset(50%)"
   })
 };
 function usePopover({
   onShow,
   onHide,
-  hasLightDismiss = true,
+  isDismissable = true,
   hasAutoFocus = true,
   hasSurface = true,
   hasCloseButton = true,
   closeButtonLabel = "Close popover",
   label,
-  role = "dialog"
+  role = "dialog",
+  layerId
 } = {}) {
   const skipAutoFocusRef = useRef(false);
-  const layer = useLayer({ hasLightDismiss, onShow, onHide });
+  const isDismissingRef = useRef(false);
+  const handleHide = useCallback(() => {
+    isDismissingRef.current = true;
+    requestAnimationFrame(() => {
+      isDismissingRef.current = false;
+    });
+    onHide?.();
+  }, [onHide]);
+  const layer = useLayer({
+    isDismissable,
+    id: layerId,
+    onShow,
+    onHide: handleHide
+  });
   const { containerRef: contentRef, focusFirst } = useFocusTrap({
     isActive: layer.isOpen,
     onEscape: layer.hide
@@ -120,6 +127,9 @@ function usePopover({
     [layer]
   );
   const toggle = useCallback(() => {
+    if (isDismissingRef.current) {
+      return;
+    }
     if (layer.isOpen) {
       layer.hide();
       return;
@@ -138,7 +148,7 @@ function usePopover({
             role,
             children: [
               children,
-              hasCloseButton ? /* @__PURE__ */ jsx("div", { className: styles.closeButtonWrapper, children: /* @__PURE__ */ jsx(
+              hasCloseButton ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
                 Button,
                 {
                   icon: X,
@@ -234,7 +244,7 @@ function Popover({
   width,
   label,
   hasCloseButton,
-  hasLightDismiss,
+  isDismissable,
   closeButtonLabel,
   padding,
   ref,
@@ -242,21 +252,19 @@ function Popover({
   className,
   style,
   role,
+  id,
   "data-testid": dataTestId
 }) {
   const wrapperRef = useRef(null);
   const isControlled = isOpen !== void 0;
-  const lastHideTimeRef = useRef(0);
   const popover = usePopover({
     closeButtonLabel,
     hasAutoFocus,
     hasCloseButton,
-    hasLightDismiss,
+    isDismissable,
     label,
-    onHide: () => {
-      lastHideTimeRef.current = nowMonotonicMilliseconds();
-      onOpenChange?.(false);
-    },
+    layerId: id,
+    onHide: () => onOpenChange?.(false),
     onShow: () => onOpenChange?.(true),
     role
   });
@@ -264,9 +272,6 @@ function Popover({
     if (!isEnabled) {
       return;
     }
-    if (nowMonotonicMilliseconds() - lastHideTimeRef.current < 50) {
-      return;
-    }
     popover.toggle();
   }, [isEnabled, popover]);
   const handleTriggerKeyDown = useCallback(
@@ -368,5 +373,5 @@ function Popover({
 Popover.displayName = "Popover";
 
 export { Popover, usePopover };
-//# sourceMappingURL=chunk-VEUZ5DZR.js.map
-//# sourceMappingURL=chunk-VEUZ5DZR.js.map
+//# sourceMappingURL=chunk-S5CMLG2E.js.map
+//# sourceMappingURL=chunk-S5CMLG2E.js.map

package/dist/chunk-S5CMLG2E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/useFocusTrap.ts","../src/components/Popover/usePopover.tsx","../src/components/Popover/Popover.tsx"],"names":["useRef","useCallback","useEffect","styles","jsx","jsxs"],"mappings":"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","file":"chunk-S5CMLG2E.js","sourcesContent":["import {useCallback, useEffect, useRef} from 'react';\n\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\nexport interface UseFocusTrapOptions {\n  isActive: boolean;\n  onEscape?: () => void;\n}\n\nexport interface UseFocusTrapReturn<T extends HTMLElement = HTMLElement> {\n  containerRef: React.RefObject<T | null>;\n  focusFirst: () => void;\n}\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  );\n}\n\nfunction focusFirstDescendant(container: HTMLElement): void {\n  getFocusableElements(container)[0]?.focus();\n}\n\nfunction focusLastDescendant(container: HTMLElement): void {\n  const elements = getFocusableElements(container);\n  elements.at(-1)?.focus();\n}\n\nexport function useFocusTrap<T extends HTMLElement = HTMLElement>({\n  isActive,\n  onEscape,\n}: UseFocusTrapOptions): UseFocusTrapReturn<T> {\n  const containerRef = useRef<T>(null);\n\n  const focusFirst = useCallback(() => {\n    if (containerRef.current != null) {\n      focusFirstDescendant(containerRef.current);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!isActive) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const container = containerRef.current;\n      if (container == null) {\n        return;\n      }\n\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onEscape?.();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = getFocusableElements(container);\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable.at(-1);\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        focusLastDescendant(container);\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        focusFirstDescendant(container);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isActive, onEscape]);\n\n  return {containerRef, focusFirst};\n}\n","import {X} from 'lucide-react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n  type RefCallback,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {VisuallyHidden} from 'internal';\nimport {useFocusTrap} from 'internal/useFocusTrap';\nimport {useLayer, type ContextRenderProps} from 'internal/useLayer';\nimport {css} from 'styled-system/css';\n\nexport type {LayerAlignment, LayerPlacement} from 'internal/useLayer';\n\nexport interface UsePopoverOptions {\n  /**\n   * Accessible label for the close button rendered when `hasCloseButton` is\n   * `true`. Defaults to `'Close popover'`.\n   */\n  closeButtonLabel?: string;\n  /**\n   * When `true`, focus moves to the first focusable element inside the popover\n   * when it opens. Defaults to `true`.\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * When `true`, renders a visually hidden close button inside the popover so\n   * assistive technology users can dismiss it. Defaults to `true`.\n   */\n  hasCloseButton?: boolean;\n  /**\n   * When `true`, wraps the content in a styled surface (background, border,\n   * shadow). Set to `false` to render unstyled content. Defaults to `true`.\n   */\n  hasSurface?: boolean;\n  /**\n   * When `true`, the popover can be dismissed by clicking outside or pressing\n   * Escape. Defaults to `true`.\n   */\n  isDismissable?: boolean;\n  /**\n   * Accessible label applied to the popover content via `aria-label`.\n   */\n  label?: string;\n  /**\n   * Id applied to the underlying layer element. Falls back to a generated id.\n   * Supply this when another element needs a stable `aria-controls` reference\n   * to the popover.\n   */\n  layerId?: string;\n  /**\n   * Called after the popover is hidden, including via light dismiss.\n   */\n  onHide?: () => void;\n  /**\n   * Called after the popover is shown.\n   */\n  onShow?: () => void;\n  /**\n   * ARIA role for the popover content. Defaults to `'dialog'`; use `'menu'` for\n   * menu-style popovers.\n   */\n  role?: 'dialog' | 'menu';\n}\n\nexport interface UsePopoverReturn {\n  /**\n   * CSS anchor name tying the popover content to the trigger for positioning.\n   */\n  anchorId: string;\n  /**\n   * Ref attached to the popover content element.\n   */\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  /**\n   * Hides the popover.\n   */\n  hide: () => void;\n  /**\n   * Id of the underlying layer element, matching `triggerProps['aria-controls']`.\n   */\n  id: string;\n  /**\n   * Whether the popover is currently open.\n   */\n  isOpen: boolean;\n  /**\n   * Renders the given children inside the popover layer.\n   */\n  render: (children: ReactNode, props?: ContextRenderProps) => ReactNode;\n  /**\n   * Shows the popover. Pass `isAutoFocusSkipped` to suppress moving focus into\n   * the content for this open.\n   */\n  show: (options?: {isAutoFocusSkipped?: boolean}) => void;\n  /**\n   * Toggles the popover between open and closed.\n   */\n  toggle: () => void;\n  /**\n   * ARIA props to spread onto the trigger element.\n   */\n  triggerProps: {\n    'aria-controls': string;\n    'aria-expanded': boolean;\n    'aria-haspopup': 'dialog' | 'menu';\n  };\n  /**\n   * Ref callback to attach to the trigger element for anchor positioning.\n   */\n  triggerRef: RefCallback<HTMLElement>;\n}\n\nconst styles = {\n  surface: css({\n    position: 'relative',\n    bg: 'bg',\n    borderRadius: 'md',\n    boxShadow: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n  }),\n} as const;\n\nexport function usePopover({\n  onShow,\n  onHide,\n  isDismissable = true,\n  hasAutoFocus = true,\n  hasSurface = true,\n  hasCloseButton = true,\n  closeButtonLabel = 'Close popover',\n  label,\n  role = 'dialog',\n  layerId,\n}: UsePopoverOptions = {}): UsePopoverReturn {\n  const skipAutoFocusRef = useRef(false);\n  // Guards against a light-dismiss close immediately re-opening the popover.\n  // When the trigger is clicked while the popover is open, the browser's native\n  // light dismiss closes it (firing `onHide`) *before* the trigger's own click\n  // handler runs `toggle()` — which would otherwise re-open it. The flag is\n  // cleared on the next animation frame: the browser never paints mid-gesture,\n  // so it is reliably still set when the spurious click arrives, yet cleared\n  // before any genuine later click.\n  const isDismissingRef = useRef(false);\n\n  const handleHide = useCallback(() => {\n    isDismissingRef.current = true;\n    requestAnimationFrame(() => {\n      isDismissingRef.current = false;\n    });\n    onHide?.();\n  }, [onHide]);\n\n  const layer = useLayer({\n    isDismissable,\n    id: layerId,\n    onShow,\n    onHide: handleHide,\n  });\n  const {containerRef: contentRef, focusFirst} = useFocusTrap<HTMLDivElement>({\n    isActive: layer.isOpen,\n    onEscape: layer.hide,\n  });\n\n  useEffect(() => {\n    if (!layer.isOpen) {\n      skipAutoFocusRef.current = false;\n      return;\n    }\n\n    if (hasAutoFocus && !skipAutoFocusRef.current) {\n      requestAnimationFrame(() => focusFirst());\n    }\n  }, [focusFirst, hasAutoFocus, layer.isOpen]);\n\n  const show = useCallback(\n    (options?: {isAutoFocusSkipped?: boolean}) => {\n      skipAutoFocusRef.current = options?.isAutoFocusSkipped ?? false;\n      layer.show();\n    },\n    [layer],\n  );\n\n  const toggle = useCallback(() => {\n    if (isDismissingRef.current) {\n      return;\n    }\n\n    if (layer.isOpen) {\n      layer.hide();\n      return;\n    }\n\n    show();\n  }, [layer, show]);\n\n  const render = useCallback(\n    (children: ReactNode, props?: ContextRenderProps): ReactNode => {\n      return layer.render(\n        <div\n          aria-label={label}\n          className={hasSurface ? styles.surface : undefined}\n          ref={contentRef}\n          role={role}>\n          {children}\n          {hasCloseButton ? (\n            <VisuallyHidden>\n              <Button\n                icon={X}\n                isIconOnly\n                label={closeButtonLabel}\n                onClick={layer.hide}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            </VisuallyHidden>\n          ) : null}\n        </div>,\n        {\n          ...props,\n          className: props?.className,\n        },\n      );\n    },\n    [\n      closeButtonLabel,\n      contentRef,\n      hasCloseButton,\n      hasSurface,\n      label,\n      layer,\n      role,\n    ],\n  );\n\n  const triggerProps = useMemo(\n    () => ({\n      'aria-controls': layer.id,\n      'aria-expanded': layer.isOpen,\n      'aria-haspopup': role,\n    }),\n    [layer.id, layer.isOpen, role],\n  );\n\n  return useMemo(\n    () => ({\n      anchorId: layer.anchorId,\n      contentRef,\n      hide: layer.hide,\n      id: layer.id,\n      isOpen: layer.isOpen,\n      render,\n      show,\n      toggle,\n      triggerProps,\n      triggerRef: layer.ref,\n    }),\n    [\n      contentRef,\n      layer.anchorId,\n      layer.hide,\n      layer.id,\n      layer.isOpen,\n      layer.ref,\n      render,\n      show,\n      toggle,\n      triggerProps,\n    ],\n  );\n}\n","import {\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport {usePopover} from 'components/Popover/usePopover';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport type {SpacingToken} from 'internal/spacingTokens';\nimport {useIsomorphicLayoutEffect} from 'internal/useIsomorphicLayoutEffect';\nimport type {LayerAlignment, LayerPlacement} from 'internal/useLayer';\nimport {css} from 'styled-system/css';\nimport {token} from 'styled-system/tokens';\n\nexport interface PopoverProps {\n  /**\n   * Alignment along the placement axis.\n   * @default 'start'\n   */\n  alignment?: LayerAlignment;\n  /**\n   * External trigger element. When provided without children, Popover attaches\n   * click and ARIA behavior directly to this element.\n   */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /**\n   * Trigger content. Must contain a `<button>` or `[role=\"button\"]`.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the popover content.\n   */\n  className?: string;\n  /**\n   * Label for the hidden close button.\n   * @default 'Close popover'\n   */\n  closeButtonLabel?: string;\n  /**\n   * Content displayed inside the popover dialog.\n   */\n  content: ReactNode;\n  /**\n   * Test ID applied to the popover content.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether to focus the first focusable item after opening.\n   * @default true\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to include a keyboard-accessible close button.\n   * @default true\n   */\n  hasCloseButton?: boolean;\n  /**\n   * Id applied to the popover content element. Falls back to a generated id.\n   * Supply this when another element needs a stable `aria-controls` reference\n   * to the popover.\n   */\n  id?: string;\n  /**\n   * Whether clicking outside or pressing Escape closes the popover.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /**\n   * Whether trigger interactions open the popover.\n   * @default true\n   */\n  isEnabled?: boolean;\n  /**\n   * Controlled open state.\n   */\n  isOpen?: boolean;\n  /**\n   * Accessible label for the popover dialog.\n   */\n  label?: string;\n  /**\n   * Callback fired when open state changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Inner padding of the popover content.\n   * @default 0\n   */\n  padding?: SpacingToken;\n  /**\n   * Position relative to the trigger.\n   * @default 'below'\n   */\n  placement?: LayerPlacement;\n  /**\n   * Ref forwarded to the popover content element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * ARIA role for the floating content.\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'menu';\n  /**\n   * Inline styles applied to the popover content.\n   */\n  style?: CSSProperties;\n  /**\n   * Width of the popover content.\n   */\n  width?: number | string;\n}\n\nconst BUTTON_SELECTOR = 'button, [role=\"button\"]';\n\nconst styles = {\n  anchor: css({\n    display: 'inline-flex',\n  }),\n  content: css({}),\n  gap: {\n    above: css({mb: '1'}),\n    below: css({mt: '1'}),\n    start: css({mr: '1'}),\n    end: css({ml: '1'}),\n  },\n} as const;\n\nfunction findTriggerButton(element: HTMLElement): HTMLElement | null {\n  if (element.matches(BUTTON_SELECTOR)) {\n    return element;\n  }\n\n  return element.querySelector<HTMLElement>(BUTTON_SELECTOR);\n}\n\n/**\n * A click-triggered floating dialog anchored to a trigger element.\n */\nexport function Popover({\n  anchorRef,\n  children,\n  content,\n  placement = 'below',\n  alignment = 'start',\n  isOpen,\n  onOpenChange,\n  isEnabled = true,\n  width,\n  label,\n  hasCloseButton,\n  isDismissable,\n  closeButtonLabel,\n  padding,\n  ref,\n  hasAutoFocus,\n  className,\n  style,\n  role,\n  id,\n  'data-testid': dataTestId,\n}: PopoverProps): React.JSX.Element {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const isControlled = isOpen !== undefined;\n\n  const popover = usePopover({\n    closeButtonLabel,\n    hasAutoFocus,\n    hasCloseButton,\n    isDismissable,\n    label,\n    layerId: id,\n    onHide: () => onOpenChange?.(false),\n    onShow: () => onOpenChange?.(true),\n    role,\n  });\n\n  const handleTriggerClick = useCallback(() => {\n    if (!isEnabled) {\n      return;\n    }\n\n    popover.toggle();\n  }, [isEnabled, popover]);\n\n  const handleTriggerKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleTriggerClick();\n      }\n    },\n    [handleTriggerClick],\n  );\n\n  // ARIA and listeners are applied imperatively because the trigger button can\n  // be any element the consumer renders — nested anywhere inside `children`, or\n  // an entirely external element via `anchorRef` — so Popover cannot inject\n  // props through JSX. This is safe: React only reconciles attributes present\n  // in its own virtual DOM, so it never clobbers these imperatively-set ones on\n  // re-render. The only dynamic attribute, `aria-expanded`, stays in sync\n  // because `popover.triggerProps` is memoized on the open state, so this\n  // callback (and the effect below that re-runs it) re-applies the fresh value\n  // on every toggle. Keep `triggerProps` in the dep arrays or that sync breaks.\n  const attachTrigger = useCallback(\n    (button: HTMLElement) => {\n      button.setAttribute(\n        'aria-haspopup',\n        popover.triggerProps['aria-haspopup'],\n      );\n      button.setAttribute(\n        'aria-expanded',\n        String(popover.triggerProps['aria-expanded']),\n      );\n      button.setAttribute(\n        'aria-controls',\n        popover.triggerProps['aria-controls'],\n      );\n      button.addEventListener('click', handleTriggerClick);\n\n      const needsKeyDown =\n        button.tagName !== 'BUTTON' && button.getAttribute('role') === 'button';\n      if (needsKeyDown) {\n        button.addEventListener('keydown', handleTriggerKeyDown);\n      }\n\n      return () => {\n        button.removeAttribute('aria-haspopup');\n        button.removeAttribute('aria-expanded');\n        button.removeAttribute('aria-controls');\n        button.removeEventListener('click', handleTriggerClick);\n        if (needsKeyDown) {\n          button.removeEventListener('keydown', handleTriggerKeyDown);\n        }\n      };\n    },\n    [handleTriggerClick, handleTriggerKeyDown, popover.triggerProps],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const anchor = anchorRef?.current ?? wrapperRef.current;\n    if (anchor == null) {\n      return;\n    }\n\n    popover.triggerRef(anchor);\n    const trigger = findTriggerButton(anchor);\n    if (trigger == null || !isEnabled) {\n      return () => {\n        popover.triggerRef(null);\n      };\n    }\n\n    const detach = attachTrigger(trigger);\n    return () => {\n      popover.triggerRef(null);\n      detach();\n    };\n  }, [anchorRef, attachTrigger, isEnabled, popover]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    if (isOpen === true && !popover.isOpen) {\n      popover.show();\n    } else if (isOpen === false && popover.isOpen) {\n      popover.hide();\n    }\n  }, [isControlled, isOpen, popover]);\n\n  const widthStyle =\n    width == null\n      ? undefined\n      : {width: typeof width === 'number' ? `${width}px` : width};\n\n  const paddingStyle =\n    padding != null && padding !== 0\n      ? {padding: token(`spacing.${padding}`)}\n      : undefined;\n\n  const popoverContent = popover.render(\n    <div\n      className={cx(styles.content, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={{...paddingStyle, ...widthStyle, ...style}}>\n      {content}\n    </div>,\n    {\n      placement,\n      alignment,\n      className: styles.gap[placement],\n      style: {minWidth: 'anchor-size(width)'},\n    },\n  );\n\n  if (anchorRef != null && !isReactNode(children)) {\n    return <>{popoverContent}</>;\n  }\n\n  return (\n    <>\n      <div className={styles.anchor} ref={wrapperRef}>\n        {children}\n      </div>\n      {popoverContent}\n    </>\n  );\n}\n\nPopover.displayName = 'Popover';\n"]}