silver-ui 0.1.0

package/dist/chunk-RCAA2CZJ.js

@@ -0,0 +1,232 @@
+import { Item } from './chunk-CA6645TQ.js';
+import { getStatusMessageID, getDescribedBy } from './chunk-3L3M7SJ3.js';
+import { fieldStatusRecipe } from './chunk-RLQYXUDO.js';
+import { Spinner } from './chunk-RGPL6EDK.js';
+import { Text } from './chunk-PZO5MZ46.js';
+import { VisuallyHidden } from './chunk-V5W7NZN5.js';
+import { Tooltip } from './chunk-EB5EHX6I.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Minus, Check, Info } from 'lucide-react';
+import { useId, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var styles = {
+  root: css({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  boxWrap: css({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  input: css({
+    position: "absolute",
+    inset: 0,
+    opacity: 0,
+    cursor: "pointer",
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  }),
+  box: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "border.emphasized",
+    borderRadius: "sm",
+    bg: "bg",
+    color: "fg.onPrimary",
+    pointerEvents: "none",
+    _peerFocusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  boxChecked: css({
+    bg: "primary",
+    borderColor: "primary"
+  }),
+  boxDisabled: css({
+    opacity: 0.55
+  }),
+  boxSize: {
+    sm: css({ w: "4.5", h: "4.5" }),
+    md: css({ w: "5.5", h: "5.5" })
+  },
+  icon: css({
+    w: "70%",
+    h: "70%"
+  }),
+  label: css({
+    cursor: "pointer"
+  }),
+  labelDisabled: css({
+    cursor: "not-allowed"
+  }),
+  indicator: css({
+    fontWeight: "normal",
+    color: "fg.muted"
+  }),
+  tooltipIcon: css({
+    display: "inline-flex",
+    color: "fg.muted"
+  })
+};
+function CheckboxInput({
+  label,
+  value,
+  onChange,
+  description,
+  endContent,
+  endContentPosition = "inline",
+  htmlName,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isReadOnly = false,
+  isLoading = false,
+  status,
+  labelIcon,
+  labelTooltip,
+  size = "md",
+  startContent,
+  onFocus,
+  onBlur,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const inputId = useId();
+  const descriptionId = useId();
+  const inputRef = useRef(null);
+  const statusMessageID = getStatusMessageID(inputId, status);
+  const describedBy = getDescribedBy(
+    description != null ? descriptionId : void 0,
+    statusMessageID
+  );
+  const isIndeterminate = value === "indeterminate";
+  const isChecked = value === true;
+  const isCheckedOrIndeterminate = isChecked || isIndeterminate;
+  useEffect(() => {
+    if (inputRef.current != null) {
+      inputRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate]);
+  const statusText = isOptional ? "Optional" : isRequired ? "Required" : null;
+  const control = /* @__PURE__ */ jsxs("span", { className: styles.boxWrap, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-busy": isLoading || void 0,
+        "aria-checked": isIndeterminate ? "mixed" : void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": status?.type === "error" || void 0,
+        "aria-readonly": isReadOnly || void 0,
+        checked: isChecked,
+        className: styles.input,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        id: inputId,
+        name: htmlName,
+        onBlur,
+        onChange: (event) => {
+          if (isReadOnly) {
+            event.preventDefault();
+            return;
+          }
+          onChange(event.target.checked, event);
+        },
+        onFocus,
+        readOnly: isReadOnly,
+        ref: mergeRefs(ref, inputRef),
+        required: isRequired,
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cx(
+          styles.box,
+          styles.boxSize[size],
+          isCheckedOrIndeterminate ? styles.boxChecked : void 0,
+          isDisabled ? styles.boxDisabled : void 0
+        ),
+        children: isLoading ? /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: "sm",
+            variant: isCheckedOrIndeterminate ? "onMedia" : "default"
+          }
+        ) : isIndeterminate ? /* @__PURE__ */ jsx(Icon, { className: styles.icon, icon: Minus }) : isChecked ? /* @__PURE__ */ jsx(Icon, { className: styles.icon, icon: Check }) : null
+      }
+    )
+  ] });
+  const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    labelIcon != null ? /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: labelIcon, size: "sm" }) : null,
+    label,
+    statusText != null ? /* @__PURE__ */ jsxs(Text, { as: "span", className: styles.indicator, type: "supporting", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+      statusText
+    ] }) : null,
+    labelTooltip != null ? /* @__PURE__ */ jsx(Tooltip, { content: labelTooltip, children: /* @__PURE__ */ jsx("span", { className: styles.tooltipIcon, children: /* @__PURE__ */ jsx(Icon, { icon: Info, size: "sm" }) }) }) : null
+  ] });
+  const labelNode = /* @__PURE__ */ jsx(
+    "label",
+    {
+      className: cx(
+        styles.label,
+        isDisabled ? styles.labelDisabled : void 0
+      ),
+      htmlFor: inputId,
+      children: isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labelContent }) : labelContent
+    }
+  );
+  const statusNode = status?.message != null ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": status.type === "error" ? "assertive" : "polite",
+      className: fieldStatusRecipe({
+        statusType: status.type,
+        statusVariant: "detached"
+      }),
+      id: statusMessageID,
+      role: status.type === "error" ? "alert" : "status",
+      children: status.message
+    }
+  ) : null;
+  const item = /* @__PURE__ */ jsx(
+    Item,
+    {
+      description: description != null ? /* @__PURE__ */ jsx("span", { id: descriptionId, children: description }) : void 0,
+      endContent,
+      endContentPosition,
+      isDisabled,
+      label: labelNode,
+      leadingContent: control,
+      startContent
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cx(styles.root, className), style, children: [
+    item,
+    statusNode
+  ] });
+}
+CheckboxInput.displayName = "CheckboxInput";
+
+export { CheckboxInput };
+//# sourceMappingURL=chunk-RCAA2CZJ.js.map
+//# sourceMappingURL=chunk-RCAA2CZJ.js.map

package/dist/chunk-RCAA2CZJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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","file":"chunk-RCAA2CZJ.js","sourcesContent":["import {Check, Info, Minus} from 'lucide-react';\nimport {\n  useEffect,\n  useId,\n  useRef,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport type {FieldNecessity, InputStatus} from '../Field';\nimport {fieldStatusRecipe} from '../Field/Field.recipe';\nimport {getDescribedBy, getStatusMessageID} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\nimport {Tooltip} from '../Tooltip';\n\nexport type CheckboxInputSize = 'sm' | 'md';\nexport type CheckboxInputValue = boolean | 'indeterminate';\n\nexport type CheckboxInputProps = {\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the input element.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Content rendered after the label.\n   */\n  endContent?: ReactNode;\n  /**\n   * Where to place `endContent` within the item.\n   * `'end'` pushes it to the trailing edge; `'inline'` keeps it next to the label.\n   * @default 'inline'\n   */\n  endContentPosition?: 'end' | 'inline';\n  /**\n   * HTML name attribute for native form submission.\n   */\n  htmlName?: string;\n  /**\n   * Whether the checkbox 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   * Whether the checkbox is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the checkbox is read-only.\n   * @default false\n   */\n  isReadOnly?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Optional content shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the checked state changes.\n   */\n  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Called when the input receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the checkbox.\n   * @default 'md'\n   */\n  size?: CheckboxInputSize;\n  /**\n   * Content rendered after the checkbox control and before the label.\n   */\n  startContent?: ReactNode;\n  /**\n   * Validation status displayed below the checkbox.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current checked state: true, false, or 'indeterminate'.\n   */\n  value: CheckboxInputValue;\n} & FieldNecessity;\n\nconst styles = {\n  root: css({\n    display: 'flex',\n    flexDirection: 'column',\n  }),\n  boxWrap: css({\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }),\n  input: css({\n    position: 'absolute',\n    inset: 0,\n    opacity: 0,\n    cursor: 'pointer',\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  }),\n  box: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border.emphasized',\n    borderRadius: 'sm',\n    bg: 'bg',\n    color: 'fg.onPrimary',\n    pointerEvents: 'none',\n    _peerFocusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  boxChecked: css({\n    bg: 'primary',\n    borderColor: 'primary',\n  }),\n  boxDisabled: css({\n    opacity: 0.55,\n  }),\n  boxSize: {\n    sm: css({w: '4.5', h: '4.5'}),\n    md: css({w: '5.5', h: '5.5'}),\n  },\n  icon: css({\n    w: '70%',\n    h: '70%',\n  }),\n  label: css({\n    cursor: 'pointer',\n  }),\n  labelDisabled: css({\n    cursor: 'not-allowed',\n  }),\n  indicator: css({\n    fontWeight: 'normal',\n    color: 'fg.muted',\n  }),\n  tooltipIcon: css({\n    display: 'inline-flex',\n    color: 'fg.muted',\n  }),\n} as const;\n\n/**\n * A checkbox input with label, description, and validation support.\n */\nexport function CheckboxInput({\n  label,\n  value,\n  onChange,\n  description,\n  endContent,\n  endContentPosition = 'inline',\n  htmlName,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isReadOnly = false,\n  isLoading = false,\n  status,\n  labelIcon,\n  labelTooltip,\n  size = 'md',\n  startContent,\n  onFocus,\n  onBlur,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: CheckboxInputProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(\n    description != null ? descriptionId : undefined,\n    statusMessageID,\n  );\n  const isIndeterminate = value === 'indeterminate';\n  const isChecked = value === true;\n  const isCheckedOrIndeterminate = isChecked || isIndeterminate;\n\n  useEffect(() => {\n    if (inputRef.current != null) {\n      inputRef.current.indeterminate = isIndeterminate;\n    }\n  }, [isIndeterminate]);\n\n  const statusText = isOptional ? 'Optional' : isRequired ? 'Required' : null;\n\n  const control = (\n    <span className={styles.boxWrap}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-checked={isIndeterminate ? 'mixed' : undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        aria-readonly={isReadOnly || undefined}\n        checked={isChecked}\n        className={styles.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        name={htmlName}\n        onBlur={onBlur}\n        onChange={event => {\n          if (isReadOnly) {\n            event.preventDefault();\n            return;\n          }\n          onChange(event.target.checked, event);\n        }}\n        onFocus={onFocus}\n        readOnly={isReadOnly}\n        ref={mergeRefs(ref, inputRef)}\n        required={isRequired}\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cx(\n          styles.box,\n          styles.boxSize[size],\n          isCheckedOrIndeterminate ? styles.boxChecked : undefined,\n          isDisabled ? styles.boxDisabled : undefined,\n        )}>\n        {isLoading ? (\n          <Spinner\n            size=\"sm\"\n            variant={isCheckedOrIndeterminate ? 'onMedia' : 'default'}\n          />\n        ) : isIndeterminate ? (\n          <Icon className={styles.icon} icon={Minus} />\n        ) : isChecked ? (\n          <Icon className={styles.icon} icon={Check} />\n        ) : null}\n      </span>\n    </span>\n  );\n\n  const labelContent = (\n    <>\n      {labelIcon != null ? (\n        <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n      ) : null}\n      {label}\n      {statusText != null ? (\n        <Text as=\"span\" className={styles.indicator} type=\"supporting\">\n          <span aria-hidden=\"true\"> · </span>\n          {statusText}\n        </Text>\n      ) : null}\n      {labelTooltip != null ? (\n        <Tooltip content={labelTooltip}>\n          <span className={styles.tooltipIcon}>\n            <Icon icon={Info} size=\"sm\" />\n          </span>\n        </Tooltip>\n      ) : null}\n    </>\n  );\n\n  const labelNode = (\n    <label\n      className={cx(\n        styles.label,\n        isDisabled ? styles.labelDisabled : undefined,\n      )}\n      htmlFor={inputId}>\n      {isLabelHidden ? (\n        <VisuallyHidden>{labelContent}</VisuallyHidden>\n      ) : (\n        labelContent\n      )}\n    </label>\n  );\n\n  const statusNode =\n    status?.message != null ? (\n      <div\n        aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n        className={fieldStatusRecipe({\n          statusType: status.type,\n          statusVariant: 'detached',\n        })}\n        id={statusMessageID}\n        role={status.type === 'error' ? 'alert' : 'status'}>\n        {status.message}\n      </div>\n    ) : null;\n\n  const item = (\n    <Item\n      description={\n        description != null ? (\n          <span id={descriptionId}>{description}</span>\n        ) : undefined\n      }\n      endContent={endContent}\n      endContentPosition={endContentPosition}\n      isDisabled={isDisabled}\n      label={labelNode}\n      leadingContent={control}\n      startContent={startContent}\n    />\n  );\n\n  return (\n    <div className={cx(styles.root, className)} style={style}>\n      {item}\n      {statusNode}\n    </div>\n  );\n}\n\nCheckboxInput.displayName = 'CheckboxInput';\n"]}

package/dist/chunk-RDNMAV5B.js

@@ -0,0 +1,269 @@
+import { cx } from './chunk-PPNETWIP.js';
+import { useId, createElement, Fragment } from 'react';
+
+var colorTokenVariables = {
+  bg: "--silver-colors-bg",
+  bgGhostActive: "--silver-colors-bg-ghost-active",
+  bgGhostHover: "--silver-colors-bg-ghost-hover",
+  bgHover: "--silver-colors-bg-hover",
+  bgSelected: "--silver-colors-bg-selected",
+  bgSubtle: "--silver-colors-bg-subtle",
+  border: "--silver-colors-border",
+  borderEmphasized: "--silver-colors-border-emphasized",
+  destructive: "--silver-colors-destructive",
+  destructiveActive: "--silver-colors-destructive-active",
+  destructiveFg: "--silver-colors-destructive-fg",
+  destructiveHover: "--silver-colors-destructive-hover",
+  fg: "--silver-colors-fg",
+  fgDisabled: "--silver-colors-fg-disabled",
+  fgMuted: "--silver-colors-fg-muted",
+  fgOnPrimary: "--silver-colors-fg-on-primary",
+  primary: "--silver-colors-primary",
+  primaryActive: "--silver-colors-primary-active",
+  primaryHover: "--silver-colors-primary-hover",
+  primarySubtle: "--silver-colors-primary-subtle",
+  iconAccent: "--silver-colors-icon-accent",
+  iconBlue: "--silver-colors-icon-blue",
+  iconCyan: "--silver-colors-icon-cyan",
+  iconDisabled: "--silver-colors-icon-disabled",
+  iconError: "--silver-colors-icon-error",
+  iconGray: "--silver-colors-icon-gray",
+  iconGreen: "--silver-colors-icon-green",
+  iconInfo: "--silver-colors-icon-info",
+  iconOrange: "--silver-colors-icon-orange",
+  iconPink: "--silver-colors-icon-pink",
+  iconPrimary: "--silver-colors-icon-primary",
+  iconPurple: "--silver-colors-icon-purple",
+  iconRed: "--silver-colors-icon-red",
+  iconSecondary: "--silver-colors-icon-secondary",
+  iconSuccess: "--silver-colors-icon-success",
+  iconTeal: "--silver-colors-icon-teal",
+  iconTertiary: "--silver-colors-icon-tertiary",
+  iconWarning: "--silver-colors-icon-warning",
+  iconYellow: "--silver-colors-icon-yellow",
+  overlayScrim: "--silver-colors-overlay-scrim",
+  overlayScrimStrong: "--silver-colors-overlay-scrim-strong",
+  overlayScrimSubtle: "--silver-colors-overlay-scrim-subtle",
+  presenceError: "--silver-colors-presence-error",
+  presenceNeutral: "--silver-colors-presence-neutral",
+  presenceSuccess: "--silver-colors-presence-success",
+  skeleton: "--silver-colors-skeleton",
+  skeletonShimmer: "--silver-colors-skeleton-shimmer",
+  statusDisabledSolid: "--silver-colors-status-disabled-solid",
+  statusDisabledSolidFg: "--silver-colors-status-disabled-solid-fg",
+  statusErrorBorder: "--silver-colors-status-error-border",
+  statusErrorBorderHover: "--silver-colors-status-error-border-hover",
+  statusErrorFg: "--silver-colors-status-error-fg",
+  statusErrorSolid: "--silver-colors-status-error-solid",
+  statusErrorSolidFg: "--silver-colors-status-error-solid-fg",
+  statusInfoFg: "--silver-colors-status-info-fg",
+  statusInfoSolid: "--silver-colors-status-info-solid",
+  statusInfoSolidFg: "--silver-colors-status-info-solid-fg",
+  statusNeutralSolid: "--silver-colors-status-neutral-solid",
+  statusNeutralSolidFg: "--silver-colors-status-neutral-solid-fg",
+  statusSuccessBorder: "--silver-colors-status-success-border",
+  statusSuccessBorderHover: "--silver-colors-status-success-border-hover",
+  statusSuccessFg: "--silver-colors-status-success-fg",
+  statusSuccessSolid: "--silver-colors-status-success-solid",
+  statusSuccessSolidFg: "--silver-colors-status-success-solid-fg",
+  statusWarningBorder: "--silver-colors-status-warning-border",
+  statusWarningBorderHover: "--silver-colors-status-warning-border-hover",
+  statusWarningFg: "--silver-colors-status-warning-fg",
+  statusWarningSolid: "--silver-colors-status-warning-solid",
+  statusWarningSolidFg: "--silver-colors-status-warning-solid-fg",
+  surfaceBlue: "--silver-colors-surface-blue",
+  surfaceBlueAccent: "--silver-colors-surface-blue-accent",
+  surfaceBlueFg: "--silver-colors-surface-blue-fg",
+  surfaceBlueHover: "--silver-colors-surface-blue-hover",
+  surfaceCyan: "--silver-colors-surface-cyan",
+  surfaceCyanAccent: "--silver-colors-surface-cyan-accent",
+  surfaceCyanFg: "--silver-colors-surface-cyan-fg",
+  surfaceCyanHover: "--silver-colors-surface-cyan-hover",
+  surfaceGray: "--silver-colors-surface-gray",
+  surfaceGrayAccent: "--silver-colors-surface-gray-accent",
+  surfaceGrayFg: "--silver-colors-surface-gray-fg",
+  surfaceGrayHover: "--silver-colors-surface-gray-hover",
+  surfaceGreen: "--silver-colors-surface-green",
+  surfaceGreenAccent: "--silver-colors-surface-green-accent",
+  surfaceGreenFg: "--silver-colors-surface-green-fg",
+  surfaceGreenHover: "--silver-colors-surface-green-hover",
+  surfaceOrange: "--silver-colors-surface-orange",
+  surfaceOrangeAccent: "--silver-colors-surface-orange-accent",
+  surfaceOrangeFg: "--silver-colors-surface-orange-fg",
+  surfaceOrangeHover: "--silver-colors-surface-orange-hover",
+  surfacePink: "--silver-colors-surface-pink",
+  surfacePinkAccent: "--silver-colors-surface-pink-accent",
+  surfacePinkFg: "--silver-colors-surface-pink-fg",
+  surfacePinkHover: "--silver-colors-surface-pink-hover",
+  surfacePurple: "--silver-colors-surface-purple",
+  surfacePurpleAccent: "--silver-colors-surface-purple-accent",
+  surfacePurpleFg: "--silver-colors-surface-purple-fg",
+  surfacePurpleHover: "--silver-colors-surface-purple-hover",
+  surfaceRed: "--silver-colors-surface-red",
+  surfaceRedAccent: "--silver-colors-surface-red-accent",
+  surfaceRedFg: "--silver-colors-surface-red-fg",
+  surfaceRedHover: "--silver-colors-surface-red-hover",
+  surfaceTeal: "--silver-colors-surface-teal",
+  surfaceTealAccent: "--silver-colors-surface-teal-accent",
+  surfaceTealFg: "--silver-colors-surface-teal-fg",
+  surfaceTealHover: "--silver-colors-surface-teal-hover",
+  surfaceYellow: "--silver-colors-surface-yellow",
+  surfaceYellowAccent: "--silver-colors-surface-yellow-accent",
+  surfaceYellowFg: "--silver-colors-surface-yellow-fg",
+  surfaceYellowHover: "--silver-colors-surface-yellow-hover",
+  track: "--silver-colors-track",
+  trackDisabled: "--silver-colors-track-disabled",
+  trackEmphasized: "--silver-colors-track-emphasized"
+};
+var fontTokenVariables = {
+  body: "--silver-fonts-body",
+  mono: "--silver-fonts-mono"
+};
+var fontSizeTokenVariables = {
+  componentLg: "--silver-font-sizes-component-lg",
+  componentMd: "--silver-font-sizes-component-md",
+  componentSm: "--silver-font-sizes-component-sm",
+  iconLg: "--silver-font-sizes-icon-lg",
+  iconMd: "--silver-font-sizes-icon-md",
+  iconSm: "--silver-font-sizes-icon-sm"
+};
+var radiusTokenVariables = {
+  componentLg: "--silver-radii-component-lg",
+  componentMd: "--silver-radii-component-md",
+  componentSm: "--silver-radii-component-sm",
+  lg: "--silver-radii-lg",
+  md: "--silver-radii-md",
+  sm: "--silver-radii-sm"
+};
+var shadowTokenVariables = {
+  focus: "--silver-shadows-focus",
+  focusError: "--silver-shadows-focus-error",
+  focusSuccess: "--silver-shadows-focus-success",
+  focusWarning: "--silver-shadows-focus-warning"
+};
+var sizeTokenVariables = {
+  componentLg: "--silver-sizes-component-lg",
+  componentMd: "--silver-sizes-component-md",
+  componentSm: "--silver-sizes-component-sm",
+  iconLg: "--silver-sizes-icon-lg",
+  iconMd: "--silver-sizes-icon-md",
+  iconSm: "--silver-sizes-icon-sm"
+};
+var spacingTokenVariables = {
+  componentLg: "--silver-spacing-component-lg",
+  componentMd: "--silver-spacing-component-md",
+  componentSm: "--silver-spacing-component-sm",
+  focusOffset: "--silver-spacing-focus-offset",
+  focusOffsetLoose: "--silver-spacing-focus-offset-loose",
+  focusOffsetTight: "--silver-spacing-focus-offset-tight"
+};
+var paletteReferencePattern = /^(blue|cyan|gray|green|orange|pink|purple|red|teal|yellow)[.-](50|100|200|300|400|500|600|700|800|900)$/;
+function resolveThemeColorValue(value) {
+  const match = paletteReferencePattern.exec(value);
+  if (match == null) {
+    return value;
+  }
+  const [, paletteName, paletteStep] = match;
+  return `var(--silver-colors-${paletteName}-${paletteStep})`;
+}
+function assignTokenVariables(style, tokens, variables, resolveValue = (value) => value) {
+  if (tokens == null) {
+    return;
+  }
+  for (const tokenName of Object.keys(variables)) {
+    const value = tokens[tokenName];
+    if (value != null) {
+      style[variables[tokenName]] = resolveValue(value);
+    }
+  }
+}
+function createThemeStyle(tokens, style) {
+  return {
+    ...createThemeVariables(tokens),
+    ...style
+  };
+}
+function createThemeVariables(tokens) {
+  const themeStyle = {};
+  assignTokenVariables(
+    themeStyle,
+    tokens?.colors,
+    colorTokenVariables,
+    resolveThemeColorValue
+  );
+  assignTokenVariables(themeStyle, tokens?.fontSizes, fontSizeTokenVariables);
+  assignTokenVariables(themeStyle, tokens?.fonts, fontTokenVariables);
+  assignTokenVariables(themeStyle, tokens?.radii, radiusTokenVariables);
+  assignTokenVariables(themeStyle, tokens?.shadows, shadowTokenVariables);
+  assignTokenVariables(themeStyle, tokens?.sizes, sizeTokenVariables);
+  assignTokenVariables(themeStyle, tokens?.spacing, spacingTokenVariables);
+  return themeStyle;
+}
+function sanitizeThemeClassName(id) {
+  return `silver-theme-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+function serializeThemeVariables(variables) {
+  return Object.entries(variables).map(
+    ([name, value]) => `${name}: ${String(value).replace(/<\/style/gi, "<\\/style")};`
+  ).join("");
+}
+function createThemeCss(className, tokens, mode) {
+  const baseTokens = mode === "dark" ? tokens.dark ?? tokens.light : tokens.light ?? tokens.dark;
+  if (baseTokens == null) {
+    return void 0;
+  }
+  const selector = `.${className}`;
+  const baseCss = `${selector}{${serializeThemeVariables(createThemeVariables(baseTokens))}}`;
+  if (mode !== "system" || tokens.dark == null) {
+    return baseCss;
+  }
+  const darkVariables = serializeThemeVariables(
+    createThemeVariables(tokens.dark)
+  );
+  const darkSelector = `.${className}[data-theme="dark"],[data-theme="dark"] .${className}`;
+  const darkCss = `${darkSelector}{${darkVariables}}`;
+  return `${baseCss}@media (prefers-color-scheme: dark){${selector}{${darkVariables}}}${darkCss}`;
+}
+function Theme({
+  as: Element = "div",
+  children,
+  className,
+  "data-testid": dataTestId,
+  mode = "system",
+  ref,
+  style,
+  themes,
+  tokens,
+  ...htmlProps
+}) {
+  const themeId = useId();
+  const themeClassName = themes == null ? void 0 : sanitizeThemeClassName(themeId);
+  const themeCss = themes != null && themeClassName != null ? createThemeCss(themeClassName, themes, mode) : void 0;
+  const themeStyle = createThemeStyle(tokens, style);
+  return createElement(
+    Element,
+    {
+      ...htmlProps,
+      className: cx(themeClassName, className),
+      "data-testid": dataTestId,
+      "data-theme": mode === "system" ? void 0 : mode,
+      ref,
+      style: themeStyle
+    },
+    themeCss == null ? children : createElement(
+      Fragment,
+      null,
+      createElement(
+        "style",
+        dataTestId == null ? null : { "data-testid": `${dataTestId}-styles` },
+        themeCss
+      ),
+      children
+    )
+  );
+}
+Theme.displayName = "Theme";
+
+export { Theme };
+//# sourceMappingURL=chunk-RDNMAV5B.js.map
+//# sourceMappingURL=chunk-RDNMAV5B.js.map

package/dist/chunk-RDNMAV5B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Theme/Theme.tsx"],"names":[],"mappings":"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","file":"chunk-RDNMAV5B.js","sourcesContent":["import {\n  Fragment,\n  createElement,\n  useId,\n  type CSSProperties,\n  type ElementType,\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {cx} from '../../internal/cx';\n\nexport type ThemeMode = 'dark' | 'light' | 'system';\n\nexport type ThemePaletteName =\n  | 'blue'\n  | 'cyan'\n  | 'gray'\n  | 'green'\n  | 'orange'\n  | 'pink'\n  | 'purple'\n  | 'red'\n  | 'teal'\n  | 'yellow';\n\nexport type ThemePaletteStep =\n  | 50\n  | 100\n  | 200\n  | 300\n  | 400\n  | 500\n  | 600\n  | 700\n  | 800\n  | 900;\n\nexport type ThemePaletteReference =\n  | `${ThemePaletteName}.${ThemePaletteStep}`\n  | `${ThemePaletteName}-${ThemePaletteStep}`;\n\nexport type ThemeColorValue = ThemePaletteReference | (string & {});\ntype ThemeCssVariableName = `--silver-${string}`;\ntype ThemeCssVariables = Partial<Record<ThemeCssVariableName, string>>;\n\nexport interface ThemeColorTokens {\n  bg?: ThemeColorValue;\n  bgGhostActive?: ThemeColorValue;\n  bgGhostHover?: ThemeColorValue;\n  bgHover?: ThemeColorValue;\n  bgSelected?: ThemeColorValue;\n  bgSubtle?: ThemeColorValue;\n  border?: ThemeColorValue;\n  borderEmphasized?: ThemeColorValue;\n  destructive?: ThemeColorValue;\n  destructiveActive?: ThemeColorValue;\n  destructiveFg?: ThemeColorValue;\n  destructiveHover?: ThemeColorValue;\n  fg?: ThemeColorValue;\n  fgDisabled?: ThemeColorValue;\n  fgMuted?: ThemeColorValue;\n  fgOnPrimary?: ThemeColorValue;\n  iconAccent?: ThemeColorValue;\n  iconBlue?: ThemeColorValue;\n  iconCyan?: ThemeColorValue;\n  iconDisabled?: ThemeColorValue;\n  iconError?: ThemeColorValue;\n  iconGray?: ThemeColorValue;\n  iconGreen?: ThemeColorValue;\n  iconInfo?: ThemeColorValue;\n  iconOrange?: ThemeColorValue;\n  iconPink?: ThemeColorValue;\n  iconPrimary?: ThemeColorValue;\n  iconPurple?: ThemeColorValue;\n  iconRed?: ThemeColorValue;\n  iconSecondary?: ThemeColorValue;\n  iconSuccess?: ThemeColorValue;\n  iconTeal?: ThemeColorValue;\n  iconTertiary?: ThemeColorValue;\n  iconWarning?: ThemeColorValue;\n  iconYellow?: ThemeColorValue;\n  overlayScrim?: ThemeColorValue;\n  overlayScrimStrong?: ThemeColorValue;\n  overlayScrimSubtle?: ThemeColorValue;\n  presenceError?: ThemeColorValue;\n  presenceNeutral?: ThemeColorValue;\n  presenceSuccess?: ThemeColorValue;\n  primary?: ThemeColorValue;\n  primaryActive?: ThemeColorValue;\n  primaryHover?: ThemeColorValue;\n  primarySubtle?: ThemeColorValue;\n  skeleton?: ThemeColorValue;\n  skeletonShimmer?: ThemeColorValue;\n  statusDisabledSolid?: ThemeColorValue;\n  statusDisabledSolidFg?: ThemeColorValue;\n  statusErrorBorder?: ThemeColorValue;\n  statusErrorBorderHover?: ThemeColorValue;\n  statusErrorFg?: ThemeColorValue;\n  statusErrorSolid?: ThemeColorValue;\n  statusErrorSolidFg?: ThemeColorValue;\n  statusInfoFg?: ThemeColorValue;\n  statusInfoSolid?: ThemeColorValue;\n  statusInfoSolidFg?: ThemeColorValue;\n  statusNeutralSolid?: ThemeColorValue;\n  statusNeutralSolidFg?: ThemeColorValue;\n  statusSuccessBorder?: ThemeColorValue;\n  statusSuccessBorderHover?: ThemeColorValue;\n  statusSuccessFg?: ThemeColorValue;\n  statusSuccessSolid?: ThemeColorValue;\n  statusSuccessSolidFg?: ThemeColorValue;\n  statusWarningBorder?: ThemeColorValue;\n  statusWarningBorderHover?: ThemeColorValue;\n  statusWarningFg?: ThemeColorValue;\n  statusWarningSolid?: ThemeColorValue;\n  statusWarningSolidFg?: ThemeColorValue;\n  surfaceBlue?: ThemeColorValue;\n  surfaceBlueAccent?: ThemeColorValue;\n  surfaceBlueFg?: ThemeColorValue;\n  surfaceBlueHover?: ThemeColorValue;\n  surfaceCyan?: ThemeColorValue;\n  surfaceCyanAccent?: ThemeColorValue;\n  surfaceCyanFg?: ThemeColorValue;\n  surfaceCyanHover?: ThemeColorValue;\n  surfaceGray?: ThemeColorValue;\n  surfaceGrayAccent?: ThemeColorValue;\n  surfaceGrayFg?: ThemeColorValue;\n  surfaceGrayHover?: ThemeColorValue;\n  surfaceGreen?: ThemeColorValue;\n  surfaceGreenAccent?: ThemeColorValue;\n  surfaceGreenFg?: ThemeColorValue;\n  surfaceGreenHover?: ThemeColorValue;\n  surfaceOrange?: ThemeColorValue;\n  surfaceOrangeAccent?: ThemeColorValue;\n  surfaceOrangeFg?: ThemeColorValue;\n  surfaceOrangeHover?: ThemeColorValue;\n  surfacePink?: ThemeColorValue;\n  surfacePinkAccent?: ThemeColorValue;\n  surfacePinkFg?: ThemeColorValue;\n  surfacePinkHover?: ThemeColorValue;\n  surfacePurple?: ThemeColorValue;\n  surfacePurpleAccent?: ThemeColorValue;\n  surfacePurpleFg?: ThemeColorValue;\n  surfacePurpleHover?: ThemeColorValue;\n  surfaceRed?: ThemeColorValue;\n  surfaceRedAccent?: ThemeColorValue;\n  surfaceRedFg?: ThemeColorValue;\n  surfaceRedHover?: ThemeColorValue;\n  surfaceTeal?: ThemeColorValue;\n  surfaceTealAccent?: ThemeColorValue;\n  surfaceTealFg?: ThemeColorValue;\n  surfaceTealHover?: ThemeColorValue;\n  surfaceYellow?: ThemeColorValue;\n  surfaceYellowAccent?: ThemeColorValue;\n  surfaceYellowFg?: ThemeColorValue;\n  surfaceYellowHover?: ThemeColorValue;\n  track?: ThemeColorValue;\n  trackDisabled?: ThemeColorValue;\n  trackEmphasized?: ThemeColorValue;\n}\n\nexport interface ThemeFontTokens {\n  body?: string;\n  mono?: string;\n}\n\nexport interface ThemeFontSizeTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  iconLg?: string;\n  iconMd?: string;\n  iconSm?: string;\n}\n\nexport interface ThemeRadiusTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  lg?: string;\n  md?: string;\n  sm?: string;\n}\n\nexport interface ThemeShadowTokens {\n  focus?: string;\n  focusError?: string;\n  focusSuccess?: string;\n  focusWarning?: string;\n}\n\nexport interface ThemeSizeTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  iconLg?: string;\n  iconMd?: string;\n  iconSm?: string;\n}\n\nexport interface ThemeSpacingTokens {\n  componentLg?: string;\n  componentMd?: string;\n  componentSm?: string;\n  focusOffset?: string;\n  focusOffsetLoose?: string;\n  focusOffsetTight?: string;\n}\n\nexport interface ThemeTokens {\n  colors?: ThemeColorTokens;\n  fonts?: ThemeFontTokens;\n  fontSizes?: ThemeFontSizeTokens;\n  radii?: ThemeRadiusTokens;\n  shadows?: ThemeShadowTokens;\n  sizes?: ThemeSizeTokens;\n  spacing?: ThemeSpacingTokens;\n}\n\nexport interface ThemeModeTokens {\n  dark?: ThemeTokens;\n  light?: ThemeTokens;\n}\n\nexport interface ThemeProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * HTML element type to render.\n   * @default 'div'\n   */\n  as?: ElementType;\n  /**\n   * Theme content.\n   */\n  children?: ReactNode;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Theme mode. System mode omits data-theme and follows existing CSS/media\n   * query behavior.\n   * @default 'system'\n   */\n  mode?: ThemeMode;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Friendly token overrides mapped to Silver CSS custom properties.\n   */\n  themes?: ThemeModeTokens;\n  /**\n   * Friendly token overrides applied in every mode.\n   */\n  tokens?: ThemeTokens;\n}\n\nconst colorTokenVariables: Record<\n  keyof ThemeColorTokens,\n  ThemeCssVariableName\n> = {\n  bg: '--silver-colors-bg',\n  bgGhostActive: '--silver-colors-bg-ghost-active',\n  bgGhostHover: '--silver-colors-bg-ghost-hover',\n  bgHover: '--silver-colors-bg-hover',\n  bgSelected: '--silver-colors-bg-selected',\n  bgSubtle: '--silver-colors-bg-subtle',\n  border: '--silver-colors-border',\n  borderEmphasized: '--silver-colors-border-emphasized',\n  destructive: '--silver-colors-destructive',\n  destructiveActive: '--silver-colors-destructive-active',\n  destructiveFg: '--silver-colors-destructive-fg',\n  destructiveHover: '--silver-colors-destructive-hover',\n  fg: '--silver-colors-fg',\n  fgDisabled: '--silver-colors-fg-disabled',\n  fgMuted: '--silver-colors-fg-muted',\n  fgOnPrimary: '--silver-colors-fg-on-primary',\n  primary: '--silver-colors-primary',\n  primaryActive: '--silver-colors-primary-active',\n  primaryHover: '--silver-colors-primary-hover',\n  primarySubtle: '--silver-colors-primary-subtle',\n  iconAccent: '--silver-colors-icon-accent',\n  iconBlue: '--silver-colors-icon-blue',\n  iconCyan: '--silver-colors-icon-cyan',\n  iconDisabled: '--silver-colors-icon-disabled',\n  iconError: '--silver-colors-icon-error',\n  iconGray: '--silver-colors-icon-gray',\n  iconGreen: '--silver-colors-icon-green',\n  iconInfo: '--silver-colors-icon-info',\n  iconOrange: '--silver-colors-icon-orange',\n  iconPink: '--silver-colors-icon-pink',\n  iconPrimary: '--silver-colors-icon-primary',\n  iconPurple: '--silver-colors-icon-purple',\n  iconRed: '--silver-colors-icon-red',\n  iconSecondary: '--silver-colors-icon-secondary',\n  iconSuccess: '--silver-colors-icon-success',\n  iconTeal: '--silver-colors-icon-teal',\n  iconTertiary: '--silver-colors-icon-tertiary',\n  iconWarning: '--silver-colors-icon-warning',\n  iconYellow: '--silver-colors-icon-yellow',\n  overlayScrim: '--silver-colors-overlay-scrim',\n  overlayScrimStrong: '--silver-colors-overlay-scrim-strong',\n  overlayScrimSubtle: '--silver-colors-overlay-scrim-subtle',\n  presenceError: '--silver-colors-presence-error',\n  presenceNeutral: '--silver-colors-presence-neutral',\n  presenceSuccess: '--silver-colors-presence-success',\n  skeleton: '--silver-colors-skeleton',\n  skeletonShimmer: '--silver-colors-skeleton-shimmer',\n  statusDisabledSolid: '--silver-colors-status-disabled-solid',\n  statusDisabledSolidFg: '--silver-colors-status-disabled-solid-fg',\n  statusErrorBorder: '--silver-colors-status-error-border',\n  statusErrorBorderHover: '--silver-colors-status-error-border-hover',\n  statusErrorFg: '--silver-colors-status-error-fg',\n  statusErrorSolid: '--silver-colors-status-error-solid',\n  statusErrorSolidFg: '--silver-colors-status-error-solid-fg',\n  statusInfoFg: '--silver-colors-status-info-fg',\n  statusInfoSolid: '--silver-colors-status-info-solid',\n  statusInfoSolidFg: '--silver-colors-status-info-solid-fg',\n  statusNeutralSolid: '--silver-colors-status-neutral-solid',\n  statusNeutralSolidFg: '--silver-colors-status-neutral-solid-fg',\n  statusSuccessBorder: '--silver-colors-status-success-border',\n  statusSuccessBorderHover: '--silver-colors-status-success-border-hover',\n  statusSuccessFg: '--silver-colors-status-success-fg',\n  statusSuccessSolid: '--silver-colors-status-success-solid',\n  statusSuccessSolidFg: '--silver-colors-status-success-solid-fg',\n  statusWarningBorder: '--silver-colors-status-warning-border',\n  statusWarningBorderHover: '--silver-colors-status-warning-border-hover',\n  statusWarningFg: '--silver-colors-status-warning-fg',\n  statusWarningSolid: '--silver-colors-status-warning-solid',\n  statusWarningSolidFg: '--silver-colors-status-warning-solid-fg',\n  surfaceBlue: '--silver-colors-surface-blue',\n  surfaceBlueAccent: '--silver-colors-surface-blue-accent',\n  surfaceBlueFg: '--silver-colors-surface-blue-fg',\n  surfaceBlueHover: '--silver-colors-surface-blue-hover',\n  surfaceCyan: '--silver-colors-surface-cyan',\n  surfaceCyanAccent: '--silver-colors-surface-cyan-accent',\n  surfaceCyanFg: '--silver-colors-surface-cyan-fg',\n  surfaceCyanHover: '--silver-colors-surface-cyan-hover',\n  surfaceGray: '--silver-colors-surface-gray',\n  surfaceGrayAccent: '--silver-colors-surface-gray-accent',\n  surfaceGrayFg: '--silver-colors-surface-gray-fg',\n  surfaceGrayHover: '--silver-colors-surface-gray-hover',\n  surfaceGreen: '--silver-colors-surface-green',\n  surfaceGreenAccent: '--silver-colors-surface-green-accent',\n  surfaceGreenFg: '--silver-colors-surface-green-fg',\n  surfaceGreenHover: '--silver-colors-surface-green-hover',\n  surfaceOrange: '--silver-colors-surface-orange',\n  surfaceOrangeAccent: '--silver-colors-surface-orange-accent',\n  surfaceOrangeFg: '--silver-colors-surface-orange-fg',\n  surfaceOrangeHover: '--silver-colors-surface-orange-hover',\n  surfacePink: '--silver-colors-surface-pink',\n  surfacePinkAccent: '--silver-colors-surface-pink-accent',\n  surfacePinkFg: '--silver-colors-surface-pink-fg',\n  surfacePinkHover: '--silver-colors-surface-pink-hover',\n  surfacePurple: '--silver-colors-surface-purple',\n  surfacePurpleAccent: '--silver-colors-surface-purple-accent',\n  surfacePurpleFg: '--silver-colors-surface-purple-fg',\n  surfacePurpleHover: '--silver-colors-surface-purple-hover',\n  surfaceRed: '--silver-colors-surface-red',\n  surfaceRedAccent: '--silver-colors-surface-red-accent',\n  surfaceRedFg: '--silver-colors-surface-red-fg',\n  surfaceRedHover: '--silver-colors-surface-red-hover',\n  surfaceTeal: '--silver-colors-surface-teal',\n  surfaceTealAccent: '--silver-colors-surface-teal-accent',\n  surfaceTealFg: '--silver-colors-surface-teal-fg',\n  surfaceTealHover: '--silver-colors-surface-teal-hover',\n  surfaceYellow: '--silver-colors-surface-yellow',\n  surfaceYellowAccent: '--silver-colors-surface-yellow-accent',\n  surfaceYellowFg: '--silver-colors-surface-yellow-fg',\n  surfaceYellowHover: '--silver-colors-surface-yellow-hover',\n  track: '--silver-colors-track',\n  trackDisabled: '--silver-colors-track-disabled',\n  trackEmphasized: '--silver-colors-track-emphasized',\n};\n\nconst fontTokenVariables: Record<keyof ThemeFontTokens, ThemeCssVariableName> =\n  {\n    body: '--silver-fonts-body',\n    mono: '--silver-fonts-mono',\n  };\n\nconst fontSizeTokenVariables: Record<\n  keyof ThemeFontSizeTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-font-sizes-component-lg',\n  componentMd: '--silver-font-sizes-component-md',\n  componentSm: '--silver-font-sizes-component-sm',\n  iconLg: '--silver-font-sizes-icon-lg',\n  iconMd: '--silver-font-sizes-icon-md',\n  iconSm: '--silver-font-sizes-icon-sm',\n};\n\nconst radiusTokenVariables: Record<\n  keyof ThemeRadiusTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-radii-component-lg',\n  componentMd: '--silver-radii-component-md',\n  componentSm: '--silver-radii-component-sm',\n  lg: '--silver-radii-lg',\n  md: '--silver-radii-md',\n  sm: '--silver-radii-sm',\n};\n\nconst shadowTokenVariables: Record<\n  keyof ThemeShadowTokens,\n  ThemeCssVariableName\n> = {\n  focus: '--silver-shadows-focus',\n  focusError: '--silver-shadows-focus-error',\n  focusSuccess: '--silver-shadows-focus-success',\n  focusWarning: '--silver-shadows-focus-warning',\n};\n\nconst sizeTokenVariables: Record<keyof ThemeSizeTokens, ThemeCssVariableName> =\n  {\n    componentLg: '--silver-sizes-component-lg',\n    componentMd: '--silver-sizes-component-md',\n    componentSm: '--silver-sizes-component-sm',\n    iconLg: '--silver-sizes-icon-lg',\n    iconMd: '--silver-sizes-icon-md',\n    iconSm: '--silver-sizes-icon-sm',\n  };\n\nconst spacingTokenVariables: Record<\n  keyof ThemeSpacingTokens,\n  ThemeCssVariableName\n> = {\n  componentLg: '--silver-spacing-component-lg',\n  componentMd: '--silver-spacing-component-md',\n  componentSm: '--silver-spacing-component-sm',\n  focusOffset: '--silver-spacing-focus-offset',\n  focusOffsetLoose: '--silver-spacing-focus-offset-loose',\n  focusOffsetTight: '--silver-spacing-focus-offset-tight',\n};\n\nconst paletteReferencePattern =\n  /^(blue|cyan|gray|green|orange|pink|purple|red|teal|yellow)[.-](50|100|200|300|400|500|600|700|800|900)$/;\n\nfunction resolveThemeColorValue(value: ThemeColorValue): string {\n  const match = paletteReferencePattern.exec(value);\n\n  if (match == null) {\n    return value;\n  }\n\n  const [, paletteName, paletteStep] = match;\n  return `var(--silver-colors-${paletteName}-${paletteStep})`;\n}\n\nfunction assignTokenVariables<TTokenName extends string>(\n  style: ThemeCssVariables,\n  tokens: Partial<Record<TTokenName, string>> | undefined,\n  variables: Record<TTokenName, ThemeCssVariableName>,\n  resolveValue: (value: string) => string = value => value,\n): void {\n  if (tokens == null) {\n    return;\n  }\n\n  for (const tokenName of Object.keys(variables) as TTokenName[]) {\n    const value = tokens[tokenName];\n\n    if (value != null) {\n      style[variables[tokenName]] = resolveValue(value);\n    }\n  }\n}\n\nfunction createThemeStyle(\n  tokens: ThemeTokens | undefined,\n  style: CSSProperties | undefined,\n): CSSProperties {\n  return {\n    ...createThemeVariables(tokens),\n    ...style,\n  };\n}\n\nfunction createThemeVariables(\n  tokens: ThemeTokens | undefined,\n): ThemeCssVariables {\n  const themeStyle: ThemeCssVariables = {};\n\n  assignTokenVariables(\n    themeStyle,\n    tokens?.colors,\n    colorTokenVariables,\n    resolveThemeColorValue,\n  );\n  assignTokenVariables(themeStyle, tokens?.fontSizes, fontSizeTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.fonts, fontTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.radii, radiusTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.shadows, shadowTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.sizes, sizeTokenVariables);\n  assignTokenVariables(themeStyle, tokens?.spacing, spacingTokenVariables);\n\n  return themeStyle;\n}\n\nfunction sanitizeThemeClassName(id: string): string {\n  return `silver-theme-${id.replace(/[^a-zA-Z0-9_-]/g, '')}`;\n}\n\nfunction serializeThemeVariables(variables: ThemeCssVariables): string {\n  return Object.entries(variables)\n    .map(\n      ([name, value]) =>\n        `${name}: ${String(value).replace(/<\\/style/gi, '<\\\\/style')};`,\n    )\n    .join('');\n}\n\nfunction createThemeCss(\n  className: string,\n  tokens: ThemeModeTokens,\n  mode: ThemeMode,\n): string | undefined {\n  const baseTokens =\n    mode === 'dark'\n      ? (tokens.dark ?? tokens.light)\n      : (tokens.light ?? tokens.dark);\n\n  if (baseTokens == null) {\n    return undefined;\n  }\n\n  const selector = `.${className}`;\n  const baseCss = `${selector}{${serializeThemeVariables(createThemeVariables(baseTokens))}}`;\n\n  if (mode !== 'system' || tokens.dark == null) {\n    return baseCss;\n  }\n\n  const darkVariables = serializeThemeVariables(\n    createThemeVariables(tokens.dark),\n  );\n  const darkSelector = `.${className}[data-theme=\"dark\"],[data-theme=\"dark\"] .${className}`;\n  const darkCss = `${darkSelector}{${darkVariables}}`;\n\n  return `${baseCss}@media (prefers-color-scheme: dark){${selector}{${darkVariables}}}${darkCss}`;\n}\n\n/**\n * Scoped Silver UI theme provider backed by CSS custom properties.\n */\nexport function Theme({\n  as: Element = 'div',\n  children,\n  className,\n  'data-testid': dataTestId,\n  mode = 'system',\n  ref,\n  style,\n  themes,\n  tokens,\n  ...htmlProps\n}: ThemeProps): React.JSX.Element {\n  const themeId = useId();\n  const themeClassName =\n    themes == null ? undefined : sanitizeThemeClassName(themeId);\n  const themeCss =\n    themes != null && themeClassName != null\n      ? createThemeCss(themeClassName, themes, mode)\n      : undefined;\n  const themeStyle = createThemeStyle(tokens, style);\n\n  return createElement(\n    Element,\n    {\n      ...htmlProps,\n      className: cx(themeClassName, className),\n      'data-testid': dataTestId,\n      'data-theme': mode === 'system' ? undefined : mode,\n      ref,\n      style: themeStyle,\n    },\n    themeCss == null\n      ? children\n      : createElement(\n          Fragment,\n          null,\n          createElement(\n            'style',\n            dataTestId == null ? null : {'data-testid': `${dataTestId}-styles`},\n            themeCss,\n          ),\n          children,\n        ),\n  );\n}\n\nTheme.displayName = 'Theme';\n"]}