silver-ui 0.1.0

package/dist/chunk-YMC56K6R.cjs

@@ -0,0 +1,289 @@
+'use strict';
+
+var chunk47BELFYO_cjs = require('./chunk-47BELFYO.cjs');
+var chunkOA4KIVLO_cjs = require('./chunk-OA4KIVLO.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SELECTABLE_ROLES = /* @__PURE__ */ new Set([
+  "option",
+  "tab",
+  "row",
+  "gridcell",
+  "treeitem"
+]);
+var styles = {
+  root: chunkAZDWQGAX_cjs.css({
+    boxSizing: "border-box",
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    px: "2",
+    py: "2",
+    textAlign: "start",
+    borderRadius: "md"
+  }),
+  widthFull: chunkAZDWQGAX_cjs.css({
+    w: "full"
+  }),
+  alignStart: chunkAZDWQGAX_cjs.css({
+    alignItems: "flex-start"
+  }),
+  interactive: chunkAZDWQGAX_cjs.css({
+    cursor: "pointer",
+    transitionProperty: "background-color",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    _hover: { bg: "bg.subtle" },
+    _active: { bg: "bg.hover" },
+    "&:has(:focus-visible)": {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  highlighted: chunkAZDWQGAX_cjs.css({
+    bg: "bg.subtle"
+  }),
+  selected: chunkAZDWQGAX_cjs.css({
+    bg: "bg.selected"
+  }),
+  disabled: chunkAZDWQGAX_cjs.css({
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  }),
+  disabledContent: chunkAZDWQGAX_cjs.css({
+    opacity: 0.5
+  }),
+  interactiveContent: chunkAZDWQGAX_cjs.css({
+    all: "unset",
+    boxSizing: "border-box",
+    cursor: "inherit",
+    color: "inherit",
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    flex: 1,
+    minW: 0,
+    textAlign: "start",
+    textDecoration: "none"
+  }),
+  content: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    flex: 1,
+    minW: 0,
+    textAlign: "start"
+  }),
+  textContent: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minW: 0
+  }),
+  startContent: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    flexShrink: 0
+  }),
+  endContent: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    marginInlineStart: "auto"
+  }),
+  endContentInline: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0
+  }),
+  labelRow: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2"
+  }),
+  trailingContent: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0
+  })
+};
+function getMaxLines(explicitLines, content) {
+  if (explicitLines != null) {
+    return explicitLines;
+  }
+  return typeof content === "string" ? 1 : 0;
+}
+function Item({
+  align = "center",
+  "aria-current": ariaCurrent,
+  as: Component = "div",
+  className,
+  "data-testid": dataTestId,
+  description,
+  descriptionLines,
+  endContent,
+  endContentPosition = "end",
+  href,
+  isDisabled = false,
+  isHighlighted = false,
+  isSelected = false,
+  label,
+  labelLines,
+  leadingContent,
+  linkComponent,
+  onClick,
+  ref,
+  rel,
+  role,
+  startContent,
+  style,
+  target,
+  trailingContent,
+  width = "full"
+}) {
+  const LinkComponent = chunkOA4KIVLO_cjs.useLinkComponent(linkComponent);
+  const linkRel = chunkOA4KIVLO_cjs.useRel({ target, rel });
+  const isInteractive = href != null || onClick != null;
+  const hasParentRole = role != null;
+  const inlineEndContent = endContent != null && endContentPosition === "inline" ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.endContentInline,
+        isDisabled ? styles.disabledContent : void 0
+      ),
+      children: endContent
+    }
+  ) : null;
+  const labelAndDescription = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    inlineEndContent != null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.labelRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", maxLines: getMaxLines(labelLines, label), type: "body", children: label }),
+      inlineEndContent
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(chunk47BELFYO_cjs.Text, { as: "span", maxLines: getMaxLines(labelLines, label), type: "body", children: label }),
+    description != null ? /* @__PURE__ */ jsxRuntime.jsx(
+      chunk47BELFYO_cjs.Text,
+      {
+        as: "span",
+        maxLines: getMaxLines(descriptionLines, description),
+        type: "supporting",
+        children: description
+      }
+    ) : null
+  ] });
+  const handleContainerClick = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    const targetElement = event.target;
+    if (targetElement.closest("button, a, input, select, textarea")) {
+      return;
+    }
+    onClick?.(event);
+  };
+  const innerSlots = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    startContent != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.startContent, children: startContent }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.textContent, children: labelAndDescription }),
+    endContent != null && endContentPosition !== "inline" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: chunkSPDVNY2Z_cjs.cx(
+          styles.endContent,
+          isDisabled ? styles.disabledContent : void 0
+        ),
+        children: endContent
+      }
+    ) : null
+  ] });
+  const content = hasParentRole ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.content,
+        isDisabled ? styles.disabledContent : void 0
+      ),
+      children: innerSlots
+    }
+  ) : href != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    LinkComponent,
+    {
+      "aria-current": ariaCurrent ?? void 0,
+      "aria-disabled": isDisabled || void 0,
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.interactiveContent,
+        isDisabled ? styles.disabledContent : void 0
+      ),
+      href,
+      onClick: (e) => {
+        if (isDisabled) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      },
+      ref: void 0,
+      rel: linkRel,
+      tabIndex: isDisabled ? -1 : void 0,
+      target,
+      to: LinkComponent === "a" ? void 0 : href,
+      children: innerSlots
+    }
+  ) : onClick != null ? /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "aria-current": ariaCurrent ?? void 0,
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.interactiveContent,
+        isDisabled ? styles.disabledContent : void 0
+      ),
+      disabled: isDisabled,
+      onClick,
+      type: "button",
+      children: innerSlots
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.content,
+        isDisabled ? styles.disabledContent : void 0
+      ),
+      children: innerSlots
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      "aria-disabled": isDisabled || void 0,
+      "aria-selected": isSelected && role != null && SELECTABLE_ROLES.has(role) ? true : void 0,
+      className: chunkSPDVNY2Z_cjs.cx(
+        styles.root,
+        width === "full" ? styles.widthFull : void 0,
+        align === "start" ? styles.alignStart : void 0,
+        isInteractive ? styles.interactive : void 0,
+        isHighlighted ? styles.highlighted : void 0,
+        isSelected ? styles.selected : void 0,
+        isDisabled && !hasParentRole ? styles.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : void 0,
+      ref,
+      role,
+      style,
+      children: [
+        leadingContent,
+        content,
+        trailingContent != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.trailingContent, children: trailingContent }) : null
+      ]
+    }
+  );
+}
+Item.displayName = "Item";
+
+exports.Item = Item;
+//# sourceMappingURL=chunk-YMC56K6R.cjs.map
+//# sourceMappingURL=chunk-YMC56K6R.cjs.map

package/dist/chunk-YMC56K6R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Item/Item.tsx"],"names":["css","useLinkComponent","useRel","jsx","cx","jsxs","Fragment","Text"],"mappings":"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","file":"chunk-YMC56K6R.cjs","sourcesContent":["/* eslint-disable @eslint-react/static-components -- intentional polymorphism via as/link component props */\n\nimport type {\n  AriaAttributes,\n  CSSProperties,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n  Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {useRel} from '../../internal/linkAccessibility';\nimport type {LinkComponent as LinkComponentType} from '../Link';\nimport {useLinkComponent} from '../Link';\nimport {Text} from '../Text';\n\nconst SELECTABLE_ROLES = new Set([\n  'option',\n  'tab',\n  'row',\n  'gridcell',\n  'treeitem',\n]);\n\nexport type ItemAlign = 'center' | 'start';\nexport type ItemElement = 'div' | 'li' | 'span';\n\nexport interface ItemProps {\n  /**\n   * Vertical alignment of the start and end content slots.\n   * @default 'center'\n   */\n  align?: ItemAlign;\n  /**\n   * ARIA current indicator forwarded to the interactive element.\n   */\n  'aria-current'?: AriaAttributes['aria-current'];\n  /**\n   * HTML element used for the root.\n   * @default 'div'\n   */\n  as?: ItemElement;\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   * Supporting text shown below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Maximum number of description lines before truncation.\n   */\n  descriptionLines?: number;\n  /**\n   * Content rendered after the label and description.\n   * Position controlled by `endContentPosition`.\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 'end'\n   */\n  endContentPosition?: 'end' | 'inline';\n  /**\n   * Link URL. When set, the content area renders as a link.\n   */\n  href?: string;\n  /**\n   * Whether the item is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item should show highlighted styling.\n   * @default false\n   */\n  isHighlighted?: boolean;\n  /**\n   * Whether the item is selected.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Primary item label.\n   */\n  label: ReactNode;\n  /**\n   * Maximum number of label lines before truncation.\n   */\n  labelLines?: number;\n  /**\n   * Content rendered outside the interactive area, before it.\n   */\n  leadingContent?: ReactNode;\n  /**\n   * Custom link component used when href is set.\n   */\n  linkComponent?: LinkComponentType;\n  /**\n   * Click handler. When set without href, the content area renders as a\n   * button. When set with href, also fires on link clicks.\n   */\n  onClick?: MouseEventHandler<HTMLElement>;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Link relationship. `noopener noreferrer` are added for `_blank` targets.\n   */\n  rel?: string;\n  /**\n   * ARIA role applied to the root element. When set, click handling is attached\n   * to the root so parent composite widgets can own keyboard behavior.\n   */\n  role?: string;\n  /**\n   * Leading visual content, such as an icon, avatar, or image.\n   */\n  startContent?: ReactNode;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Link target.\n   */\n  target?: string;\n  /**\n   * Content rendered outside the interactive area, after it.\n   */\n  trailingContent?: ReactNode;\n  /**\n   * Width of the root element.\n   * @default 'full'\n   */\n  width?: 'full' | 'auto';\n}\n\nconst styles = {\n  root: css({\n    boxSizing: 'border-box',\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    px: '2',\n    py: '2',\n    textAlign: 'start',\n    borderRadius: 'md',\n  }),\n  widthFull: css({\n    w: 'full',\n  }),\n  alignStart: css({\n    alignItems: 'flex-start',\n  }),\n  interactive: css({\n    cursor: 'pointer',\n    transitionProperty: 'background-color',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    _hover: {bg: 'bg.subtle'},\n    _active: {bg: 'bg.hover'},\n    '&:has(:focus-visible)': {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  highlighted: css({\n    bg: 'bg.subtle',\n  }),\n  selected: css({\n    bg: 'bg.selected',\n  }),\n  disabled: css({\n    cursor: 'not-allowed',\n    pointerEvents: 'none',\n  }),\n  disabledContent: css({\n    opacity: 0.5,\n  }),\n  interactiveContent: css({\n    all: 'unset',\n    boxSizing: 'border-box',\n    cursor: 'inherit',\n    color: 'inherit',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    flex: 1,\n    minW: 0,\n    textAlign: 'start',\n    textDecoration: 'none',\n  }),\n  content: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    flex: 1,\n    minW: 0,\n    textAlign: 'start',\n  }),\n  textContent: css({\n    display: 'flex',\n    flexDirection: 'column',\n    flex: 1,\n    minW: 0,\n  }),\n  startContent: css({\n    display: 'inline-flex',\n    flexShrink: 0,\n  }),\n  endContent: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    marginInlineStart: 'auto',\n  }),\n  endContentInline: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n  }),\n  labelRow: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n  }),\n  trailingContent: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n  }),\n} as const;\n\nfunction getMaxLines(\n  explicitLines: number | undefined,\n  content: ReactNode,\n): number {\n  if (explicitLines != null) {\n    return explicitLines;\n  }\n\n  return typeof content === 'string' ? 1 : 0;\n}\n\n/**\n * Shared start content, label, description, and end content row primitive.\n */\nexport function Item({\n  align = 'center',\n  'aria-current': ariaCurrent,\n  as: Component = 'div',\n  className,\n  'data-testid': dataTestId,\n  description,\n  descriptionLines,\n  endContent,\n  endContentPosition = 'end',\n  href,\n  isDisabled = false,\n  isHighlighted = false,\n  isSelected = false,\n  label,\n  labelLines,\n  leadingContent,\n  linkComponent,\n  onClick,\n  ref,\n  rel,\n  role,\n  startContent,\n  style,\n  target,\n  trailingContent,\n  width = 'full',\n}: ItemProps): React.JSX.Element {\n  const LinkComponent = useLinkComponent(linkComponent);\n  const linkRel = useRel({target, rel});\n  const isInteractive = href != null || onClick != null;\n  const hasParentRole = role != null;\n\n  const inlineEndContent =\n    endContent != null && endContentPosition === 'inline' ? (\n      <span\n        className={cx(\n          styles.endContentInline,\n          isDisabled ? styles.disabledContent : undefined,\n        )}>\n        {endContent}\n      </span>\n    ) : null;\n\n  const labelAndDescription = (\n    <>\n      {inlineEndContent != null ? (\n        <span className={styles.labelRow}>\n          <Text as=\"span\" maxLines={getMaxLines(labelLines, label)} type=\"body\">\n            {label}\n          </Text>\n          {inlineEndContent}\n        </span>\n      ) : (\n        <Text as=\"span\" maxLines={getMaxLines(labelLines, label)} type=\"body\">\n          {label}\n        </Text>\n      )}\n      {description != null ? (\n        <Text\n          as=\"span\"\n          maxLines={getMaxLines(descriptionLines, description)}\n          type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </>\n  );\n\n  const handleContainerClick = (event: MouseEvent<HTMLElement>) => {\n    if (isDisabled) {\n      return;\n    }\n\n    const targetElement = event.target as HTMLElement;\n    if (targetElement.closest('button, a, input, select, textarea')) {\n      return;\n    }\n\n    onClick?.(event);\n  };\n\n  const innerSlots = (\n    <>\n      {startContent != null ? (\n        <span className={styles.startContent}>{startContent}</span>\n      ) : null}\n      <span className={styles.textContent}>{labelAndDescription}</span>\n      {endContent != null && endContentPosition !== 'inline' ? (\n        <span\n          className={cx(\n            styles.endContent,\n            isDisabled ? styles.disabledContent : undefined,\n          )}>\n          {endContent}\n        </span>\n      ) : null}\n    </>\n  );\n\n  const content = hasParentRole ? (\n    <span\n      className={cx(\n        styles.content,\n        isDisabled ? styles.disabledContent : undefined,\n      )}>\n      {innerSlots}\n    </span>\n  ) : href != null ? (\n    <LinkComponent\n      aria-current={ariaCurrent ?? undefined}\n      aria-disabled={isDisabled || undefined}\n      className={cx(\n        styles.interactiveContent,\n        isDisabled ? styles.disabledContent : undefined,\n      )}\n      href={href}\n      onClick={(e: MouseEvent<HTMLElement>) => {\n        if (isDisabled) {\n          e.preventDefault();\n          return;\n        }\n        onClick?.(e);\n      }}\n      ref={undefined}\n      rel={linkRel}\n      tabIndex={isDisabled ? -1 : undefined}\n      target={target}\n      to={LinkComponent === 'a' ? undefined : href}>\n      {innerSlots}\n    </LinkComponent>\n  ) : onClick != null ? (\n    <button\n      aria-current={ariaCurrent ?? undefined}\n      className={cx(\n        styles.interactiveContent,\n        isDisabled ? styles.disabledContent : undefined,\n      )}\n      disabled={isDisabled}\n      onClick={onClick}\n      type=\"button\">\n      {innerSlots}\n    </button>\n  ) : (\n    <span\n      className={cx(\n        styles.content,\n        isDisabled ? styles.disabledContent : undefined,\n      )}>\n      {innerSlots}\n    </span>\n  );\n\n  return (\n    <Component\n      aria-disabled={isDisabled || undefined}\n      aria-selected={\n        isSelected && role != null && SELECTABLE_ROLES.has(role)\n          ? true\n          : undefined\n      }\n      className={cx(\n        styles.root,\n        width === 'full' ? styles.widthFull : undefined,\n        align === 'start' ? styles.alignStart : undefined,\n        isInteractive ? styles.interactive : undefined,\n        isHighlighted ? styles.highlighted : undefined,\n        isSelected ? styles.selected : undefined,\n        isDisabled && !hasParentRole ? styles.disabled : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      onClick={\n        hasParentRole\n          ? onClick\n          : isInteractive\n            ? handleContainerClick\n            : undefined\n      }\n      ref={ref as Ref<never>}\n      role={role}\n      style={style}>\n      {leadingContent}\n      {content}\n      {trailingContent != null ? (\n        <span className={styles.trailingContent}>{trailingContent}</span>\n      ) : null}\n    </Component>\n  );\n}\n\nItem.displayName = 'Item';\n"]}

package/dist/chunk-YOFCBZAX.js

@@ -0,0 +1,286 @@
+import { getStatusMessageID, getDescribedBy } from './chunk-3L3M7SJ3.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 { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Info } from 'lucide-react';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var styles = {
+  field: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "1",
+    w: "fit-content"
+  }),
+  spreadField: css({
+    w: "full"
+  }),
+  row: css({
+    display: "flex",
+    alignItems: "center",
+    gap: "2"
+  }),
+  spread: css({
+    justifyContent: "space-between",
+    w: "full"
+  }),
+  labelWrapper: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    minW: 0
+  }),
+  label: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "1",
+    w: "fit-content",
+    color: "fg.muted",
+    cursor: "pointer"
+  }),
+  labelDisabled: css({
+    color: "fg.disabled",
+    cursor: "not-allowed"
+  }),
+  labelIcon: css({
+    display: "inline-flex",
+    alignItems: "center"
+  }),
+  requiredness: css({
+    fontWeight: "normal",
+    color: "fg.muted"
+  }),
+  tooltipIcon: css({
+    display: "inline-flex",
+    color: "fg.muted"
+  }),
+  status: css({
+    fontFamily: "body",
+    fontSize: "sm",
+    lineHeight: "normal",
+    px: "2",
+    py: "1.5",
+    mt: "1",
+    borderRadius: "md"
+  }),
+  statusColor: {
+    warning: css({ bg: "surface.yellow", color: "surface.yellow.fg" }),
+    error: css({ bg: "surface.red", color: "surface.red.fg" }),
+    success: css({ bg: "surface.green", color: "surface.green.fg" })
+  },
+  control: css({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    w: "10",
+    h: "6",
+    borderRadius: "full",
+    isolation: "isolate",
+    "&:has(input:focus-visible)": {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    },
+    '& [data-switch-track][data-selected="true"]': {
+      bg: "primary"
+    },
+    "&:has(input:active:not(:disabled)) [data-switch-track]": {
+      bg: "primary.active"
+    }
+  }),
+  input: css({
+    position: "absolute",
+    inset: 0,
+    m: 0,
+    p: 0,
+    opacity: 0,
+    cursor: "pointer",
+    zIndex: 1,
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  }),
+  track: css({
+    display: "flex",
+    alignItems: "center",
+    w: "10",
+    h: "6",
+    p: "1",
+    borderRadius: "full",
+    bg: "track.emphasized",
+    transitionProperty: "background-color",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    pointerEvents: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    }
+  }),
+  trackOn: css({
+    bg: "primary"
+  }),
+  trackDisabled: css({
+    opacity: 0.5
+  }),
+  thumb: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "4",
+    h: "4",
+    borderRadius: "full",
+    bg: "bg",
+    color: "primary",
+    transform: "translateX(0)",
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0s"
+    }
+  }),
+  thumbOn: css({
+    transform: "translateX(16px)"
+  })
+};
+function Switch({
+  className,
+  "data-testid": dataTestId,
+  description,
+  isDisabled = false,
+  isLabelHidden = false,
+  isLoading = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  labelPosition = "end",
+  labelSpacing = "default",
+  onBlur,
+  onChange,
+  onFocus,
+  ref,
+  status,
+  style,
+  isSelected
+}) {
+  const inputId = useId();
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = getStatusMessageID(inputId, status);
+  const describedBy = getDescribedBy(descriptionID, statusMessageID);
+  const requirednessText = isOptional ? "Optional" : isRequired ? "Required" : null;
+  const control = /* @__PURE__ */ jsxs("span", { className: styles.control, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-busy": isLoading || void 0,
+        "aria-describedby": describedBy,
+        "aria-invalid": status?.type === "error" || void 0,
+        checked: isSelected,
+        className: styles.input,
+        "data-testid": dataTestId,
+        disabled: isDisabled,
+        id: inputId,
+        onBlur,
+        onChange: (event) => onChange(event.target.checked, event),
+        onFocus,
+        ref,
+        required: isRequired,
+        role: "switch",
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cx(
+          styles.track,
+          isSelected ? styles.trackOn : void 0,
+          isDisabled ? styles.trackDisabled : void 0
+        ),
+        "data-selected": isSelected ? "true" : void 0,
+        "data-switch-track": "",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(styles.thumb, isSelected ? styles.thumbOn : void 0),
+            children: isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null
+          }
+        )
+      }
+    ),
+    isLoading ? /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", children: "Loading" }) }) : null
+  ] });
+  const labelNode = /* @__PURE__ */ jsxs("div", { className: styles.labelWrapper, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: cx(
+          styles.label,
+          isDisabled ? styles.labelDisabled : void 0
+        ),
+        htmlFor: inputId,
+        children: [
+          labelIcon != null ? /* @__PURE__ */ jsx("span", { className: styles.labelIcon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: labelIcon, size: "sm" }) }) : null,
+          /* @__PURE__ */ jsx(Text, { as: "span", color: "inherit", type: "label", children: label }),
+          requirednessText != null ? /* @__PURE__ */ jsxs(Text, { as: "span", className: styles.requiredness, type: "supporting", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+            requirednessText
+          ] }) : null,
+          labelTooltip != null ? /* @__PURE__ */ jsx(Tooltip, { content: labelTooltip, children: /* @__PURE__ */ jsx("span", { className: styles.tooltipIcon, children: /* @__PURE__ */ jsx(Icon, { icon: Info, size: "sm" }) }) }) : null
+        ]
+      }
+    ),
+    description != null ? /* @__PURE__ */ jsx(Text, { as: "span", color: "secondary", id: descriptionID, type: "supporting", children: description }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        styles.field,
+        labelSpacing === "spread" ? styles.spreadField : void 0,
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              styles.row,
+              labelSpacing === "spread" ? styles.spread : void 0
+            ),
+            children: [
+              labelPosition === "start" ? isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labelNode }) : labelNode : control,
+              labelPosition === "start" ? control : isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labelNode }) : labelNode
+            ]
+          }
+        ),
+        status?.message != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-live": status.type === "error" ? "assertive" : "polite",
+            className: cx(styles.status, styles.statusColor[status.type]),
+            id: statusMessageID,
+            role: status.type === "error" ? "alert" : "status",
+            children: status.message
+          }
+        ) : null
+      ]
+    }
+  );
+}
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=chunk-YOFCBZAX.js.map
+//# sourceMappingURL=chunk-YOFCBZAX.js.map

package/dist/chunk-YOFCBZAX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAsGA,IAAM,MAAA,GAAS;AAAA,EACb,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,GAAA,EAAK,GAAA;AAAA,IACL,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,KAAK,GAAA,CAAI;AAAA,IACP,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK;AAAA,GACN,CAAA;AAAA,EACD,QAAQ,GAAA,CAAI;AAAA,IACV,cAAA,EAAgB,eAAA;AAAA,IAChB,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,cAAc,GAAA,CAAI;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,GAAA,EAAK,KAAA;AAAA,IACL,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,GAAA;AAAA,IACL,CAAA,EAAG,aAAA;AAAA,IACH,KAAA,EAAO,UAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,eAAe,GAAA,CAAI;AAAA,IACjB,KAAA,EAAO,aAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,WAAW,GAAA,CAAI;AAAA,IACb,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,cAAc,GAAA,CAAI;AAAA,IAChB,UAAA,EAAY,QAAA;AAAA,IACZ,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,OAAA,EAAS,aAAA;AAAA,IACT,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,QAAQ,GAAA,CAAI;AAAA,IACV,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,EAAA,EAAI,GAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,GAAA;AAAA,IACJ,YAAA,EAAc;AAAA,GACf,CAAA;AAAA,EACD,WAAA,EAAa;AAAA,IACX,SAAS,GAAA,CAAI,EAAC,IAAI,gBAAA,EAAkB,KAAA,EAAO,qBAAoB,CAAA;AAAA,IAC/D,OAAO,GAAA,CAAI,EAAC,IAAI,aAAA,EAAe,KAAA,EAAO,kBAAiB,CAAA;AAAA,IACvD,SAAS,GAAA,CAAI,EAAC,IAAI,eAAA,EAAiB,KAAA,EAAO,oBAAmB;AAAA,GAC/D;AAAA,EACA,SAAS,GAAA,CAAI;AAAA,IACX,QAAA,EAAU,UAAA;AAAA,IACV,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,UAAA,EAAY,CAAA;AAAA,IACZ,CAAA,EAAG,IAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,YAAA,EAAc,MAAA;AAAA,IACd,SAAA,EAAW,SAAA;AAAA,IACX,4BAAA,EAA8B;AAAA,MAC5B,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,SAAA;AAAA,MACd,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,6CAAA,EAA+C;AAAA,MAC7C,EAAA,EAAI;AAAA,KACN;AAAA,IACA,wDAAA,EAA0D;AAAA,MACxD,EAAA,EAAI;AAAA;AACN,GACD,CAAA;AAAA,EACD,OAAO,GAAA,CAAI;AAAA,IACT,QAAA,EAAU,UAAA;AAAA,IACV,KAAA,EAAO,CAAA;AAAA,IACP,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,OAAA,EAAS,CAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,CAAA;AAAA,IACR,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ;AAAA;AACV,GACD,CAAA;AAAA,EACD,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,CAAA,EAAG,IAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,YAAA,EAAc,MAAA;AAAA,IACd,EAAA,EAAI,kBAAA;AAAA,IACJ,kBAAA,EAAoB,kBAAA;AAAA,IACpB,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B,SAAA;AAAA,IAC1B,aAAA,EAAe,MAAA;AAAA,IACf,yCAAA,EAA2C;AAAA,MACzC,kBAAA,EAAoB;AAAA;AACtB,GACD,CAAA;AAAA,EACD,SAAS,GAAA,CAAI;AAAA,IACX,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,eAAe,GAAA,CAAI;AAAA,IACjB,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,OAAO,GAAA,CAAI;AAAA,IACT,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,CAAA,EAAG,GAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,YAAA,EAAc,MAAA;AAAA,IACd,EAAA,EAAI,IAAA;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,SAAA,EAAW,eAAA;AAAA,IACX,kBAAA,EAAoB,WAAA;AAAA,IACpB,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B,SAAA;AAAA,IAC1B,yCAAA,EAA2C;AAAA,MACzC,kBAAA,EAAoB;AAAA;AACtB,GACD,CAAA;AAAA,EACD,SAAS,GAAA,CAAI;AAAA,IACX,SAAA,EAAW;AAAA,GACZ;AACH,CAAA;AAKO,SAAS,MAAA,CAAO;AAAA,EACrB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,YAAA,GAAe,SAAA;AAAA,EACf,MAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,aAAA,GACJ,WAAA,IAAe,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GAAiB,MAAA;AACnD,EAAA,MAAM,eAAA,GAAkB,kBAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,WAAA,GAAc,cAAA,CAAe,aAAA,EAAe,eAAe,CAAA;AACjE,EAAA,MAAM,gBAAA,GAAmB,UAAA,GACrB,UAAA,GACA,UAAA,GACE,UAAA,GACA,IAAA;AACN,EAAA,MAAM,OAAA,mBACJ,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,OAAA,EACtB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,aAAW,SAAA,IAAa,MAAA;AAAA,QACxB,kBAAA,EAAkB,WAAA;AAAA,QAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,QAC1C,OAAA,EAAS,UAAA;AAAA,QACT,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,aAAA,EAAa,UAAA;AAAA,QACb,QAAA,EAAU,UAAA;AAAA,QACV,EAAA,EAAI,OAAA;AAAA,QACJ,MAAA;AAAA,QACA,UAAU,CAAA,KAAA,KAAS,QAAA,CAAS,KAAA,CAAM,MAAA,CAAO,SAAS,KAAK,CAAA;AAAA,QACvD,OAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA,EAAU,UAAA;AAAA,QACV,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAK;AAAA;AAAA,KACP;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,KAAA;AAAA,UACP,UAAA,GAAa,OAAO,OAAA,GAAU,MAAA;AAAA,UAC9B,UAAA,GAAa,OAAO,aAAA,GAAgB;AAAA,SACtC;AAAA,QACA,eAAA,EAAe,aAAa,MAAA,GAAS,MAAA;AAAA,QACrC,mBAAA,EAAkB,EAAA;AAAA,QAClB,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,EAAA,CAAG,MAAA,CAAO,OAAO,UAAA,GAAa,MAAA,CAAO,UAAU,MAAS,CAAA;AAAA,YAClE,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAK,MAAK,CAAA,GAAK;AAAA;AAAA;AACvC;AAAA,KACF;AAAA,IACC,SAAA,uBACE,cAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAK,IAAA,EAAK,QAAA,EAAS,QAAA,EAAA,SAAA,EAAO,CAAA,EAC7B,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEF,EAAA,MAAM,SAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,YAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,KAAA;AAAA,UACP,UAAA,GAAa,OAAO,aAAA,GAAgB;AAAA,SACtC;AAAA,QACA,OAAA,EAAS,OAAA;AAAA,QACR,QAAA,EAAA;AAAA,UAAA,SAAA,IAAa,IAAA,mBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,SAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,aAAY,IAAA,EAAM,SAAA,EAAW,IAAA,EAAK,IAAA,EAAK,GACrD,CAAA,GACE,IAAA;AAAA,0BACJ,GAAA,CAAC,QAAK,EAAA,EAAG,MAAA,EAAO,OAAM,SAAA,EAAU,IAAA,EAAK,SAClC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UACC,gBAAA,IAAoB,IAAA,mBACnB,IAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,QAAO,SAAA,EAAW,MAAA,CAAO,YAAA,EAAc,IAAA,EAAK,YAAA,EACnD,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,QAAA,EAAA,QAAA,EAAG,CAAA;AAAA,YAC3B;AAAA,WAAA,EACH,CAAA,GACE,IAAA;AAAA,UACH,gBAAgB,IAAA,mBACf,GAAA,CAAC,WAAQ,OAAA,EAAS,YAAA,EAChB,8BAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,WAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,EAAM,MAAK,IAAA,EAAK,CAAA,EAC9B,GACF,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,IACC,WAAA,IAAe,IAAA,mBACd,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,KAAA,EAAM,WAAA,EAAY,EAAA,EAAI,aAAA,EAAe,IAAA,EAAK,YAAA,EACvD,uBACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,CAAO,KAAA;AAAA,QACP,YAAA,KAAiB,QAAA,GAAW,MAAA,CAAO,WAAA,GAAc,MAAA;AAAA,QACjD;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,MAAA,CAAO,GAAA;AAAA,cACP,YAAA,KAAiB,QAAA,GAAW,MAAA,CAAO,MAAA,GAAS;AAAA,aAC9C;AAAA,YACC,QAAA,EAAA;AAAA,cAAA,aAAA,KAAkB,UACjB,aAAA,mBACE,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,SAAA,EAAU,IAE3B,SAAA,GAGF,OAAA;AAAA,cAED,kBAAkB,OAAA,GACjB,OAAA,GACE,gCACF,GAAA,CAAC,cAAA,EAAA,EAAgB,qBAAU,CAAA,GAE3B;AAAA;AAAA;AAAA,SAEJ;AAAA,QACC,MAAA,EAAQ,WAAW,IAAA,mBAClB,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAW,MAAA,CAAO,IAAA,KAAS,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,YACnD,SAAA,EAAW,GAAG,MAAA,CAAO,MAAA,EAAQ,OAAO,WAAA,CAAY,MAAA,CAAO,IAAI,CAAC,CAAA;AAAA,YAC5D,EAAA,EAAI,eAAA;AAAA,YACJ,IAAA,EAAM,MAAA,CAAO,IAAA,KAAS,OAAA,GAAU,OAAA,GAAU,QAAA;AAAA,YACzC,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA,SACV,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-YOFCBZAX.js","sourcesContent":["import {Info} from 'lucide-react';\nimport {\n  useId,\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 type {FieldNecessity, InputStatus, InputStatusType} from '../Field';\nimport {getDescribedBy, getStatusMessageID} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\nimport {Tooltip} from '../Tooltip';\n\nexport type SwitchLabelPosition = 'end' | 'start';\nexport type SwitchLabelSpacing = 'default' | 'spread';\n\nexport type SwitchProps = {\n  /**\n   * Additional CSS class names applied to the field root.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the checkbox input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the switch 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 switch is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Whether the switch is on.\n   */\n  isSelected: boolean;\n  /**\n   * Switch label.\n   */\n  label: string;\n  /**\n   * Content rendered before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Which side of the switch the label appears on.\n   * @default 'end'\n   */\n  labelPosition?: SwitchLabelPosition;\n  /**\n   * Spacing behavior between label and switch.\n   * @default 'default'\n   */\n  labelSpacing?: SwitchLabelSpacing;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when the switch 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 switch receives focus.\n   */\n  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n  /**\n   * Ref forwarded to the checkbox input.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Validation status displayed below the switch.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the field root.\n   */\n  style?: CSSProperties;\n} & FieldNecessity;\n\nconst styles = {\n  field: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '1',\n    w: 'fit-content',\n  }),\n  spreadField: css({\n    w: 'full',\n  }),\n  row: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n  }),\n  spread: css({\n    justifyContent: 'space-between',\n    w: 'full',\n  }),\n  labelWrapper: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n    minW: 0,\n  }),\n  label: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '1',\n    w: 'fit-content',\n    color: 'fg.muted',\n    cursor: 'pointer',\n  }),\n  labelDisabled: css({\n    color: 'fg.disabled',\n    cursor: 'not-allowed',\n  }),\n  labelIcon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n  }),\n  requiredness: css({\n    fontWeight: 'normal',\n    color: 'fg.muted',\n  }),\n  tooltipIcon: css({\n    display: 'inline-flex',\n    color: 'fg.muted',\n  }),\n  status: css({\n    fontFamily: 'body',\n    fontSize: 'sm',\n    lineHeight: 'normal',\n    px: '2',\n    py: '1.5',\n    mt: '1',\n    borderRadius: 'md',\n  }),\n  statusColor: {\n    warning: css({bg: 'surface.yellow', color: 'surface.yellow.fg'}),\n    error: css({bg: 'surface.red', color: 'surface.red.fg'}),\n    success: css({bg: 'surface.green', color: 'surface.green.fg'}),\n  } satisfies Record<InputStatusType, string>,\n  control: css({\n    position: 'relative',\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    w: '10',\n    h: '6',\n    borderRadius: 'full',\n    isolation: 'isolate',\n    '&:has(input:focus-visible)': {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n    '& [data-switch-track][data-selected=\"true\"]': {\n      bg: 'primary',\n    },\n    '&:has(input:active:not(:disabled)) [data-switch-track]': {\n      bg: 'primary.active',\n    },\n  }),\n  input: css({\n    position: 'absolute',\n    inset: 0,\n    m: 0,\n    p: 0,\n    opacity: 0,\n    cursor: 'pointer',\n    zIndex: 1,\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  }),\n  track: css({\n    display: 'flex',\n    alignItems: 'center',\n    w: '10',\n    h: '6',\n    p: '1',\n    borderRadius: 'full',\n    bg: 'track.emphasized',\n    transitionProperty: 'background-color',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    pointerEvents: 'none',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0s',\n    },\n  }),\n  trackOn: css({\n    bg: 'primary',\n  }),\n  trackDisabled: css({\n    opacity: 0.5,\n  }),\n  thumb: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    w: '4',\n    h: '4',\n    borderRadius: 'full',\n    bg: 'bg',\n    color: 'primary',\n    transform: 'translateX(0)',\n    transitionProperty: 'transform',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    '@media (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0s',\n    },\n  }),\n  thumbOn: css({\n    transform: 'translateX(16px)',\n  }),\n} as const;\n\n/**\n * A controlled switch for boolean settings.\n */\nexport function Switch({\n  className,\n  'data-testid': dataTestId,\n  description,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  labelPosition = 'end',\n  labelSpacing = 'default',\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  status,\n  style,\n  isSelected,\n}: SwitchProps): React.JSX.Element {\n  const inputId = useId();\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const requirednessText = isOptional\n    ? 'Optional'\n    : isRequired\n      ? 'Required'\n      : null;\n  const control = (\n    <span className={styles.control}>\n      <input\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-invalid={status?.type === 'error' || undefined}\n        checked={isSelected}\n        className={styles.input}\n        data-testid={dataTestId}\n        disabled={isDisabled}\n        id={inputId}\n        onBlur={onBlur}\n        onChange={event => onChange(event.target.checked, event)}\n        onFocus={onFocus}\n        ref={ref}\n        required={isRequired}\n        role=\"switch\"\n        type=\"checkbox\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cx(\n          styles.track,\n          isSelected ? styles.trackOn : undefined,\n          isDisabled ? styles.trackDisabled : undefined,\n        )}\n        data-selected={isSelected ? 'true' : undefined}\n        data-switch-track=\"\">\n        <span\n          className={cx(styles.thumb, isSelected ? styles.thumbOn : undefined)}>\n          {isLoading ? <Spinner size=\"sm\" /> : null}\n        </span>\n      </span>\n      {isLoading ? (\n        <VisuallyHidden>\n          <span role=\"status\">Loading</span>\n        </VisuallyHidden>\n      ) : null}\n    </span>\n  );\n  const labelNode = (\n    <div className={styles.labelWrapper}>\n      <label\n        className={cx(\n          styles.label,\n          isDisabled ? styles.labelDisabled : undefined,\n        )}\n        htmlFor={inputId}>\n        {labelIcon != null ? (\n          <span className={styles.labelIcon}>\n            <Icon color=\"secondary\" icon={labelIcon} size=\"sm\" />\n          </span>\n        ) : null}\n        <Text as=\"span\" color=\"inherit\" type=\"label\">\n          {label}\n        </Text>\n        {requirednessText != null ? (\n          <Text as=\"span\" className={styles.requiredness} type=\"supporting\">\n            <span aria-hidden=\"true\"> · </span>\n            {requirednessText}\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      </label>\n      {description != null ? (\n        <Text as=\"span\" color=\"secondary\" id={descriptionID} type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  return (\n    <div\n      className={cx(\n        styles.field,\n        labelSpacing === 'spread' ? styles.spreadField : undefined,\n        className,\n      )}\n      style={style}>\n      <div\n        className={cx(\n          styles.row,\n          labelSpacing === 'spread' ? styles.spread : undefined,\n        )}>\n        {labelPosition === 'start' ? (\n          isLabelHidden ? (\n            <VisuallyHidden>{labelNode}</VisuallyHidden>\n          ) : (\n            labelNode\n          )\n        ) : (\n          control\n        )}\n        {labelPosition === 'start' ? (\n          control\n        ) : isLabelHidden ? (\n          <VisuallyHidden>{labelNode}</VisuallyHidden>\n        ) : (\n          labelNode\n        )}\n      </div>\n      {status?.message != null ? (\n        <div\n          aria-live={status.type === 'error' ? 'assertive' : 'polite'}\n          className={cx(styles.status, styles.statusColor[status.type])}\n          id={statusMessageID}\n          role={status.type === 'error' ? 'alert' : 'status'}>\n          {status.message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nSwitch.displayName = 'Switch';\n"]}