silver-ui 0.1.0

package/dist/chunk-2UTRYTT3.cjs

@@ -0,0 +1,285 @@
+'use strict';
+
+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 lucideReact = require('lucide-react');
+
+var AccordionContext = react.createContext(
+  null
+);
+AccordionContext.displayName = "AccordionContext";
+function normalizeToSet(value) {
+  if (value == null) {
+    return /* @__PURE__ */ new Set();
+  }
+  return new Set(Array.isArray(value) ? value : [value]);
+}
+var styles = {
+  root: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "3"
+  })
+};
+function Accordion({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  type = "single",
+  defaultValue,
+  value: controlledValue,
+  onChange,
+  children,
+  className,
+  "data-testid": dataTestId,
+  ref,
+  style
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = react.useState(
+    () => normalizeToSet(defaultValue)
+  );
+  const openValues = react.useMemo(
+    () => isControlled ? normalizeToSet(controlledValue) : internalValue,
+    [isControlled, controlledValue, internalValue]
+  );
+  const getIsOpen = react.useCallback(
+    (itemValue) => openValues.has(itemValue),
+    [openValues]
+  );
+  const toggle = react.useCallback(
+    (itemValue) => {
+      let nextValues;
+      if (type === "single") {
+        nextValues = openValues.has(itemValue) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([itemValue]);
+      } else {
+        const next = new Set(openValues);
+        if (next.has(itemValue)) {
+          next.delete(itemValue);
+        } else {
+          next.add(itemValue);
+        }
+        nextValues = next;
+      }
+      if (!isControlled) {
+        setInternalValue(nextValues);
+      }
+      if (onChange) {
+        const arr = [...nextValues];
+        if (type === "single") {
+          onChange(arr[0] ?? null);
+        } else {
+          onChange(arr);
+        }
+      }
+    },
+    [type, openValues, isControlled, onChange]
+  );
+  const contextValue = react.useMemo(
+    () => ({ getIsOpen, toggle }),
+    [getIsOpen, toggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: chunkSPDVNY2Z_cjs.cx(styles.root, className),
+      "data-testid": dataTestId,
+      ref,
+      role: "group",
+      style,
+      children
+    }
+  ) });
+}
+Accordion.displayName = "Accordion";
+function useCollapsible(options) {
+  const { config, value } = options;
+  const group = react.use(AccordionContext);
+  const isMissingGroupValue = group != null && value == null;
+  const isControlledByGroup = group != null && value != null;
+  if (process.env.NODE_ENV !== "production") {
+    if (isMissingGroupValue) {
+      throw new Error(
+        "AccordionItem: `value` prop is required when used inside an Accordion."
+      );
+    }
+  }
+  const [internalIsOpen, setInternalIsOpen] = react.useState(() => {
+    if (isControlledByGroup) {
+      return true;
+    }
+    if (config?.isOpen !== void 0) {
+      return config.isOpen;
+    }
+    return config?.isDefaultOpen ?? true;
+  });
+  let isOpen;
+  if (isControlledByGroup) {
+    isOpen = group.getIsOpen(value);
+  } else if (isMissingGroupValue) {
+    isOpen = false;
+  } else if (config?.isOpen !== void 0) {
+    isOpen = config.isOpen;
+  } else {
+    isOpen = internalIsOpen;
+  }
+  const toggle = () => {
+    if (isControlledByGroup) {
+      group.toggle(value);
+    } else if (isMissingGroupValue) {
+      return;
+    } else if (config?.isOpen !== void 0) {
+      config.onOpenChange?.(!isOpen);
+    } else {
+      setInternalIsOpen((prev) => !prev);
+      config?.onOpenChange?.(!isOpen);
+    }
+  };
+  return { isOpen, toggle };
+}
+var styles2 = {
+  root: chunkAZDWQGAX_cjs.css({
+    w: "100%"
+  }),
+  trigger: chunkAZDWQGAX_cjs.css({
+    all: "unset",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    w: "100%",
+    cursor: "pointer",
+    fontFamily: "body",
+    fontSize: "lg",
+    fontWeight: "semibold",
+    color: "fg",
+    textAlign: "start",
+    py: 0,
+    _disabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset",
+      borderRadius: "sm"
+    }
+  }),
+  chevron: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    color: "fg.muted"
+  }),
+  chevronOpen: chunkAZDWQGAX_cjs.css({
+    transform: "rotate(180deg)"
+  }),
+  content: chunkAZDWQGAX_cjs.css({
+    pt: "1"
+  })
+};
+function AccordionItem({
+  trigger,
+  children,
+  isDefaultOpen,
+  isDisabled = false,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  value,
+  ref,
+  className,
+  "data-testid": dataTestId,
+  style
+}) {
+  const collapsibleConfig = controlledIsOpen !== void 0 ? { isOpen: controlledIsOpen, onOpenChange } : { isDefaultOpen: isDefaultOpen ?? true, onOpenChange };
+  const { isOpen, toggle } = useCollapsible({
+    config: collapsibleConfig,
+    value
+  });
+  const id = react.useId();
+  const triggerId = `${id}-trigger`;
+  const panelId = `${id}-panel`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(styles2.root, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            "aria-controls": panelId,
+            "aria-expanded": isOpen,
+            className: styles2.trigger,
+            disabled: isDisabled,
+            id: triggerId,
+            onClick: toggle,
+            type: "button",
+            children: [
+              trigger,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: chunkSPDVNY2Z_cjs.cx(
+                    styles2.chevron,
+                    isOpen ? styles2.chevronOpen : void 0
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.ChevronDown, size: "md" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-labelledby": triggerId,
+            className: styles2.content,
+            hidden: !isOpen || void 0,
+            id: panelId,
+            role: "region",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+AccordionItem.displayName = "AccordionItem";
+function Collapsible({
+  className,
+  "data-testid": dataTestId,
+  ref,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionItem,
+    {
+      ...props,
+      className,
+      "data-testid": dataTestId,
+      ref,
+      style
+    }
+  );
+}
+Collapsible.displayName = "Collapsible";
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;
+exports.Collapsible = Collapsible;
+//# sourceMappingURL=chunk-2UTRYTT3.cjs.map
+//# sourceMappingURL=chunk-2UTRYTT3.cjs.map

package/dist/chunk-2UTRYTT3.cjs.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":["createContext","css","useState","useMemo","useCallback","jsx","cx","use","styles","useId","jsxs","Icon","ChevronDown"],"mappings":"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","file":"chunk-2UTRYTT3.cjs","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-2WP6NYYY.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Spinner/Spinner.recipe.ts
+var spinnerRecipe = chunkJAX62FUE_cjs.cva({
+  base: {
+    "--spinner-size": "var(--silver-sizes-icon-md)",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    verticalAlign: "middle",
+    color: "primary",
+    w: "var(--spinner-size)",
+    h: "var(--spinner-size)"
+  },
+  variants: {
+    size: {
+      sm: {
+        "--spinner-size": "var(--silver-sizes-icon-sm)"
+      },
+      md: {
+        "--spinner-size": "var(--silver-sizes-icon-md)"
+      },
+      lg: {
+        "--spinner-size": "var(--silver-sizes-icon-lg)"
+      },
+      xl: {
+        "--spinner-size": "2.25rem"
+      }
+    },
+    variant: {
+      default: {
+        color: "primary"
+      },
+      onMedia: {
+        color: "fg.onPrimary"
+      }
+    },
+    hasLabel: {
+      true: {
+        flexDirection: "column",
+        gap: "2",
+        w: "auto",
+        h: "auto"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    hasLabel: false
+  }
+});
+var styles = {
+  visual: chunkAZDWQGAX_cjs.css({
+    display: "block",
+    w: "var(--spinner-size)",
+    h: "var(--spinner-size)",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    aspectRatio: "square",
+    borderRadius: "full",
+    borderWidth: "emphasized",
+    borderStyle: "solid",
+    borderColor: "currentColor",
+    borderTopColor: "transparent",
+    animation: "spin 0.8s linear infinite",
+    "@media (prefers-reduced-motion: reduce)": {
+      animation: "none"
+    }
+  })
+};
+function Spinner({
+  size,
+  variant,
+  label,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref,
+  "aria-label": ariaLabelFromProps
+}) {
+  const hasLabel = typeof label === "string" && label !== "";
+  const ariaLabel = ariaLabelFromProps != null && ariaLabelFromProps !== "" ? ariaLabelFromProps : hasLabel ? label : "Loading";
+  const labelColor = variant === "onMedia" ? "inherit" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: chunkSPDVNY2Z_cjs.cx(spinnerRecipe({ size, variant, hasLabel }), className),
+      "data-testid": dataTestId,
+      ref,
+      role: "status",
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles.visual }),
+        hasLabel ? /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", color: labelColor, type: "label", children: label }) : null
+      ]
+    }
+  );
+}
+Spinner.displayName = "Spinner";
+
+exports.Spinner = Spinner;
+exports.spinnerRecipe = spinnerRecipe;
+//# sourceMappingURL=chunk-2WP6NYYY.cjs.map
+//# sourceMappingURL=chunk-2WP6NYYY.cjs.map

package/dist/chunk-2WP6NYYY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/Spinner.recipe.ts","../src/components/Spinner/Spinner.tsx"],"names":["cva","css","jsxs","cx","jsx","Text"],"mappings":"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","file":"chunk-2WP6NYYY.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const spinnerRecipe = cva({\n  base: {\n    '--spinner-size': 'var(--silver-sizes-icon-md)',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n    color: 'primary',\n    w: 'var(--spinner-size)',\n    h: 'var(--spinner-size)',\n  },\n  variants: {\n    size: {\n      sm: {\n        '--spinner-size': 'var(--silver-sizes-icon-sm)',\n      },\n      md: {\n        '--spinner-size': 'var(--silver-sizes-icon-md)',\n      },\n      lg: {\n        '--spinner-size': 'var(--silver-sizes-icon-lg)',\n      },\n      xl: {\n        '--spinner-size': '2.25rem',\n      },\n    },\n    variant: {\n      default: {\n        color: 'primary',\n      },\n      onMedia: {\n        color: 'fg.onPrimary',\n      },\n    },\n    hasLabel: {\n      true: {\n        flexDirection: 'column',\n        gap: '2',\n        w: 'auto',\n        h: 'auto',\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'default',\n    hasLabel: false,\n  },\n});\n\nexport type SpinnerVariants = RecipeVariantProps<typeof spinnerRecipe>;\n","import type {CSSProperties, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Text} from '../Text';\nimport {spinnerRecipe, type SpinnerVariants} from './Spinner.recipe';\n\ntype SpinnerSize = NonNullable<SpinnerVariants>['size'];\ntype SpinnerVariant = NonNullable<SpinnerVariants>['variant'];\n\n/**\n * A compact loading indicator for pending or indeterminate work.\n *\n * Spinner renders with `role=\"status\"` and an accessible name so assistive\n * technologies can announce loading state without exposing the decorative visual.\n */\nexport interface SpinnerProps {\n  /**\n   * Accessible label for the loading status. Defaults to a string label when\n   * provided, otherwise \"Loading\".\n   */\n  'aria-label'?: string;\n  /**\n   * Optionally adjust rendering by setting the className.\n   */\n  className?: string;\n  /**\n   * Test id applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional visible label shown below the spinner.\n   */\n  label?: string;\n  /**\n   * Ref forwarded to the root span element.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * Visual size of the spinner. Matches Button size names. Default is `md`.\n   */\n  size?: SpinnerSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Visual style variant for the spinner. Default is `default`.\n   */\n  variant?: SpinnerVariant;\n}\n\nconst styles = {\n  visual: css({\n    display: 'block',\n    w: 'var(--spinner-size)',\n    h: 'var(--spinner-size)',\n    flexShrink: 0,\n    boxSizing: 'border-box',\n    aspectRatio: 'square',\n    borderRadius: 'full',\n    borderWidth: 'emphasized',\n    borderStyle: 'solid',\n    borderColor: 'currentColor',\n    borderTopColor: 'transparent',\n    animation: 'spin 0.8s linear infinite',\n    '@media (prefers-reduced-motion: reduce)': {\n      animation: 'none',\n    },\n  }),\n};\n\nexport function Spinner({\n  size,\n  variant,\n  label,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n  'aria-label': ariaLabelFromProps,\n}: SpinnerProps): React.JSX.Element {\n  const hasLabel = typeof label === 'string' && label !== '';\n  const ariaLabel =\n    ariaLabelFromProps != null && ariaLabelFromProps !== ''\n      ? ariaLabelFromProps\n      : hasLabel\n        ? label\n        : 'Loading';\n  const labelColor = variant === 'onMedia' ? 'inherit' : undefined;\n\n  return (\n    <span\n      aria-label={ariaLabel}\n      className={cx(spinnerRecipe({size, variant, hasLabel}), className)}\n      data-testid={dataTestId}\n      ref={ref}\n      role=\"status\"\n      style={style}>\n      <span aria-hidden=\"true\" className={styles.visual} />\n      {hasLabel ? (\n        <Text as=\"span\" color={labelColor} type=\"label\">\n          {label}\n        </Text>\n      ) : null}\n    </span>\n  );\n}\n\nSpinner.displayName = 'Spinner';\n"]}