@persona/design-system 0.1.5-pre.4

package/dist/ProgressBar.d.cts

@@ -0,0 +1,83 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import { Color } from "@persona/design-tokens";
+
+//#region components/ProgressBar/ProgressBar.d.ts
+type ProgressBarStatus = 'default' | 'exception' | 'success';
+type ProgressBarSize = 'sm' | 'md';
+type ProgressBarType = 'determinate' | 'indeterminate';
+interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {
+  /** Completion percentage, 0–100 */
+  percent?: number;
+  /** Size of the bar track */
+  size?: ProgressBarSize;
+  /** Status — affects fill color */
+  status?: ProgressBarStatus;
+  /**
+   * `'determinate'` shows a filled bar for a known percentage.
+   * `'indeterminate'` shows a scanning animation for unknown progress.
+   * @defaultValue 'determinate'
+   */
+  type?: ProgressBarType;
+  /** Label text */
+  label?: string;
+  /**
+   * Show a right-hand info slot: percentage while in progress, status icon when
+   * success or exception. The two are mutually exclusive — icon replaces percentage
+   * once the bar reaches a terminal state.
+   * Defaults to `true` when `successPercent` is set.
+   */
+  showInfo?: boolean;
+  /** Custom fill color (design-system token) — overrides status color */
+  fillColor?: Color;
+  /** Custom track/rail background color (design-system token) */
+  railColor?: Color;
+  /**
+   * Format function for the displayed percentage value.
+   * @defaultValue (percent) => `${percent}%`
+   */
+  format?: (percent: number) => string;
+  /**
+   * When set, renders a green success segment from 0 to `successPercent`%,
+   * with the main fill continuing from `successPercent`% to `percent`%.
+   * Clamped to [0, percent]. Also enables `showInfo` by default.
+   */
+  successPercent?: number;
+  /**
+   * Tooltip content shown when hovering the bar track.
+   * Use to surface a segment breakdown, e.g. "3 done / 3 in progress / 4 to do".
+   */
+  tooltip?: string;
+}
+/**
+ * ProgressBar shows the completion status of an operation as a filled bar.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar
+ *   percent={60}
+ *   size="md"
+ *   label="Uploading"
+ *   showInfo
+ * />
+ * ```
+ */
+declare const ProgressBar: ({
+  percent,
+  size,
+  status,
+  type,
+  label,
+  showInfo,
+  fillColor,
+  railColor,
+  format,
+  successPercent,
+  tooltip,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: ProgressBarProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProgressBar, ProgressBar as default, ProgressBarProps, ProgressBarSize, ProgressBarStatus, ProgressBarType };
+//# sourceMappingURL=ProgressBar.d.cts.map

package/dist/ProgressBar.d.mts

@@ -0,0 +1,83 @@
+import { Color } from "@persona/design-tokens";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region components/ProgressBar/ProgressBar.d.ts
+type ProgressBarStatus = 'default' | 'exception' | 'success';
+type ProgressBarSize = 'sm' | 'md';
+type ProgressBarType = 'determinate' | 'indeterminate';
+interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {
+  /** Completion percentage, 0–100 */
+  percent?: number;
+  /** Size of the bar track */
+  size?: ProgressBarSize;
+  /** Status — affects fill color */
+  status?: ProgressBarStatus;
+  /**
+   * `'determinate'` shows a filled bar for a known percentage.
+   * `'indeterminate'` shows a scanning animation for unknown progress.
+   * @defaultValue 'determinate'
+   */
+  type?: ProgressBarType;
+  /** Label text */
+  label?: string;
+  /**
+   * Show a right-hand info slot: percentage while in progress, status icon when
+   * success or exception. The two are mutually exclusive — icon replaces percentage
+   * once the bar reaches a terminal state.
+   * Defaults to `true` when `successPercent` is set.
+   */
+  showInfo?: boolean;
+  /** Custom fill color (design-system token) — overrides status color */
+  fillColor?: Color;
+  /** Custom track/rail background color (design-system token) */
+  railColor?: Color;
+  /**
+   * Format function for the displayed percentage value.
+   * @defaultValue (percent) => `${percent}%`
+   */
+  format?: (percent: number) => string;
+  /**
+   * When set, renders a green success segment from 0 to `successPercent`%,
+   * with the main fill continuing from `successPercent`% to `percent`%.
+   * Clamped to [0, percent]. Also enables `showInfo` by default.
+   */
+  successPercent?: number;
+  /**
+   * Tooltip content shown when hovering the bar track.
+   * Use to surface a segment breakdown, e.g. "3 done / 3 in progress / 4 to do".
+   */
+  tooltip?: string;
+}
+/**
+ * ProgressBar shows the completion status of an operation as a filled bar.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar
+ *   percent={60}
+ *   size="md"
+ *   label="Uploading"
+ *   showInfo
+ * />
+ * ```
+ */
+declare const ProgressBar: ({
+  percent,
+  size,
+  status,
+  type,
+  label,
+  showInfo,
+  fillColor,
+  railColor,
+  format,
+  successPercent,
+  tooltip,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: ProgressBarProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProgressBar, ProgressBar as default, ProgressBarProps, ProgressBarSize, ProgressBarStatus, ProgressBarType };
+//# sourceMappingURL=ProgressBar.d.mts.map

package/dist/ProgressIndicator.d.cts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithoutRef } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/ProgressIndicator/ProgressIndicator.d.ts
+type StepStatus = 'uncompleted' | 'completed' | 'error';
+interface ProgressIndicatorStep {
+  id: string;
+  label: string;
+  /** @default 'uncompleted' */
+  status?: StepStatus;
+  disabled?: boolean;
+}
+interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
+  steps: ProgressIndicatorStep[];
+  /** id of the step that should receive the active visual state */
+  activeStepId?: string;
+  /** @default 'vertical' */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * Called when a clickable step is activated via click or keyboard.
+   *
+   * Clickability rules:
+   * - `completed` and `error` steps are clickable (navigate back to review/edit)
+   * - The active step is not clickable (user is already there)
+   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
+   */
+  onStepClick?: (stepId: string) => void;
+}
+/**
+ * ProgressIndicator guides users through a sequence of steps.
+ *
+ * Interaction rules:
+ * - **Completed / error** steps are clickable — navigate back to review or fix.
+ * - **Active** step is not clickable — the user is already there.
+ * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
+ *
+ * Navigation does not clear later steps. If a change on an earlier step
+ * invalidates later data, the affected steps should be flagged and require
+ * re-confirmation before submission — this logic lives in the consuming component.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator
+ *   steps={[
+ *     { id: 'identity', label: 'Identity', status: 'completed' },
+ *     { id: 'address',  label: 'Address',  status: 'uncompleted' },
+ *     { id: 'review',   label: 'Review',   status: 'uncompleted' },
+ *   ]}
+ *   activeStepId="address"
+ *   onStepClick={(id) => navigate(id)}
+ * />
+ * ```
+ */
+declare const ProgressIndicator: ({
+  steps,
+  activeStepId,
+  layout,
+  onStepClick,
+  "aria-label": ariaLabel,
+  ...rest
+}: ProgressIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };
+//# sourceMappingURL=ProgressIndicator.d.cts.map

package/dist/ProgressIndicator.d.mts

@@ -0,0 +1,64 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef } from "react";
+
+//#region components/ProgressIndicator/ProgressIndicator.d.ts
+type StepStatus = 'uncompleted' | 'completed' | 'error';
+interface ProgressIndicatorStep {
+  id: string;
+  label: string;
+  /** @default 'uncompleted' */
+  status?: StepStatus;
+  disabled?: boolean;
+}
+interface ProgressIndicatorProps extends ComponentPropsWithoutRef<'ol'> {
+  steps: ProgressIndicatorStep[];
+  /** id of the step that should receive the active visual state */
+  activeStepId?: string;
+  /** @default 'vertical' */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * Called when a clickable step is activated via click or keyboard.
+   *
+   * Clickability rules:
+   * - `completed` and `error` steps are clickable (navigate back to review/edit)
+   * - The active step is not clickable (user is already there)
+   * - Upcoming `uncompleted` steps are not clickable (sequential progression required)
+   */
+  onStepClick?: (stepId: string) => void;
+}
+/**
+ * ProgressIndicator guides users through a sequence of steps.
+ *
+ * Interaction rules:
+ * - **Completed / error** steps are clickable — navigate back to review or fix.
+ * - **Active** step is not clickable — the user is already there.
+ * - **Upcoming (uncompleted)** steps are not clickable — sequential progression required.
+ *
+ * Navigation does not clear later steps. If a change on an earlier step
+ * invalidates later data, the affected steps should be flagged and require
+ * re-confirmation before submission — this logic lives in the consuming component.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator
+ *   steps={[
+ *     { id: 'identity', label: 'Identity', status: 'completed' },
+ *     { id: 'address',  label: 'Address',  status: 'uncompleted' },
+ *     { id: 'review',   label: 'Review',   status: 'uncompleted' },
+ *   ]}
+ *   activeStepId="address"
+ *   onStepClick={(id) => navigate(id)}
+ * />
+ * ```
+ */
+declare const ProgressIndicator: ({
+  steps,
+  activeStepId,
+  layout,
+  onStepClick,
+  "aria-label": ariaLabel,
+  ...rest
+}: ProgressIndicatorProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProgressIndicator, ProgressIndicator as default, ProgressIndicatorProps, ProgressIndicatorStep, StepStatus };
+//# sourceMappingURL=ProgressIndicator.d.mts.map

package/dist/PseudoClassProps-C5jpj6Rp.d.cts

@@ -0,0 +1,12 @@
+//#region types/PseudoClassProps.d.ts
+interface PseudoClassProps {
+  hovered?: boolean;
+  focused?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  checked?: boolean;
+  mixed?: boolean;
+}
+//#endregion
+export { PseudoClassProps as t };
+//# sourceMappingURL=PseudoClassProps-C5jpj6Rp.d.cts.map

package/dist/PseudoClassProps-mZgO_iZJ.d.mts

@@ -0,0 +1,12 @@
+//#region types/PseudoClassProps.d.ts
+interface PseudoClassProps {
+  hovered?: boolean;
+  focused?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  checked?: boolean;
+  mixed?: boolean;
+}
+//#endregion
+export { PseudoClassProps as t };
+//# sourceMappingURL=PseudoClassProps-mZgO_iZJ.d.mts.map

package/dist/PseudoClassProps.d.cts

@@ -0,0 +1,2 @@
+import { t as PseudoClassProps } from "./PseudoClassProps-C5jpj6Rp.cjs";
+export = PseudoClassProps;

package/dist/PseudoClassProps.d.mts

@@ -0,0 +1,2 @@
+import { t as PseudoClassProps } from "./PseudoClassProps-mZgO_iZJ.mjs";
+export { PseudoClassProps as default };

package/dist/Radio-mFfT6G3d.cjs

@@ -0,0 +1,154 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_focus = require("./mixins/focus.cjs");
+require("./variables/transitions.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let lodash = require("lodash");
+//#region components/Radio/Radio.tsx
+const Container = styled_components.default.div`
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  position: relative;
+
+  ${({ size }) => size === "sm" && styled_components.css`
+      align-items: center;
+      height: 16px;
+    `}
+
+  &${require_lib_pseudoClass.isDisabled} {
+    cursor: default;
+  }
+`;
+const Label = styled_components.default.label`
+  cursor: inherit;
+  padding: 0 ${_persona_design_tokens.Spacing[2]};
+  color: ${_persona_design_tokens.Color.TextSecondary};
+
+  ${({ size }) => size === "sm" ? styled_components.css`
+          ${_persona_design_tokens.Typography.TextSmall};
+          line-height: 16px;
+        ` : styled_components.css`
+          ${_persona_design_tokens.Typography.TextMedium};
+        `}
+
+  ${({ theme, disabled }) => disabled && styled_components.css`
+      cursor: default;
+      color: ${theme.color.text.disabled};
+    `}
+`;
+const RadioCircle = styled_components.default.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: box-shadow ${"200ms"};
+  border-radius: 100%;
+  height: ${_persona_design_tokens.Spacing[4]};
+  width: ${_persona_design_tokens.Spacing[4]};
+  flex: 0 0 16px;
+  box-sizing: border-box;
+  margin-top: ${({ size }) => size === "sm" ? 0 : "2px"};
+  border: 1px solid ${_persona_design_tokens.Color.BorderInputCheckbox};
+  background: ${_persona_design_tokens.Color.PrimaryWhite};
+`;
+const RadioInput = styled_components.default.input`
+  cursor: inherit;
+  height: ${_persona_design_tokens.Spacing[4]};
+  width: ${_persona_design_tokens.Spacing[4]};
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  top: ${({ $size }) => $size === "sm" ? 0 : "2px"};
+  border-radius: 100%;
+  z-index: 10; // this needs to be above the dot in the checked input
+
+  &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
+    border-color: ${_persona_design_tokens.Color.BorderInputCheckboxHover};
+  }
+
+  &${require_lib_pseudoClass.isChecked}, &:checked {
+    &${require_lib_pseudoClass.isHovered}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
+      background: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
+      border-color: ${_persona_design_tokens.Color.BackgroundInputActiveHover};
+    }
+  }
+
+  &${require_lib_pseudoClass.isFocusedVisible}${require_lib_pseudoClass.isNotDisabled} ~ ${RadioCircle} {
+    ${require_mixins_focus.focusStyle}
+  }
+
+  // RadioCircle state styles; Uses pure CSS
+  &${require_lib_pseudoClass.isDisabled} + ${RadioCircle} {
+    cursor: default;
+    background: ${_persona_design_tokens.Color.BackgroundInputDisabled};
+    border-color: ${_persona_design_tokens.Color.BorderInputDisabled};
+  }
+
+  &:checked + ${RadioCircle}, &${require_lib_pseudoClass.isChecked} + ${RadioCircle} {
+    border-color: ${_persona_design_tokens.Color.BackgroundInputActive};
+    background: ${_persona_design_tokens.Color.BackgroundInputActive};
+
+    &::after {
+      background: ${_persona_design_tokens.Color.BackgroundInputDefault};
+      height: 6px;
+      width: 6px;
+      border-radius: 100%;
+      content: '';
+      position: absolute;
+    }
+  }
+
+  &:checked${require_lib_pseudoClass.isDisabled} + ${RadioCircle}, &${require_lib_pseudoClass.isChecked}${require_lib_pseudoClass.isDisabled} + ${RadioCircle} {
+    border-color: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
+    background: ${_persona_design_tokens.Color.BackgroundInputActiveDisabled};
+  }
+`;
+const Radio = (0, react.forwardRef)(function Radio({ id, label, className, value, disabled, checked, defaultChecked, onChange, "data-test": dataTest, size = "md", ...elemProps }, ref) {
+	const field = require_useFormField.useFormField({ disabled });
+	const generatedId = (0, react.useMemo)(() => (0, lodash.uniqueId)("pds_radio__"), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
+		className,
+		disabled,
+		"data-test": dataTest,
+		size,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioInput, {
+				id: id || generatedId,
+				disabled: field.disabled,
+				onChange,
+				type: "radio",
+				value,
+				checked,
+				defaultChecked,
+				ref,
+				$size: size,
+				...elemProps
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioCircle, { size }),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
+				htmlFor: id || generatedId,
+				disabled: disabled ?? false,
+				size,
+				children: label
+			})
+		]
+	});
+});
+//#endregion
+Object.defineProperty(exports, "Radio", {
+	enumerable: true,
+	get: function() {
+		return Radio;
+	}
+});
+
+//# sourceMappingURL=Radio-mFfT6G3d.cjs.map

package/dist/Radio-mFfT6G3d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio-mFfT6G3d.cjs","names":["isDisabled","Spacing","Color","Typography","isHovered","isNotDisabled","isChecked","isFocusedVisible","focusStyle","useFormField"],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,YAAY,kBAAA,QAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,kBAAA,GAAG;;;MAGD;;KAEDA,wBAAAA,WAAW;;;;AAKhB,MAAM,QAAQ,kBAAA,QAAO,KAA+C;;eAErDC,uBAAAA,QAAQ,GAAG;WACfC,uBAAAA,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,kBAAA,GAAG;YACCC,uBAAAA,WAAW,UAAU;;YAGzB,kBAAA,GAAG;YACCA,uBAAAA,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,kBAAA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,kBAAA,QAAO,GAA0B;;;;;mCAKF;;YAEvCF,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpCC,uBAAAA,MAAM,oBAAoB;gBAChCA,uBAAAA,MAAM,aAAa;;AAGnC,MAAM,aAAa,kBAAA,QAAO,KAA6B;;YAE3CD,uBAAAA,QAAQ,GAAG;WACZA,uBAAAA,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhDG,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC5BH,uBAAAA,MAAM,yBAAyB;;;KAG9CI,wBAAAA,UAAU;OACRF,wBAAAA,YAAYC,wBAAAA,cAAc,KAAK,YAAY;oBAC9BH,uBAAAA,MAAM,2BAA2B;sBAC/BA,uBAAAA,MAAM,2BAA2B;;;;KAIlDK,wBAAAA,mBAAmBF,wBAAAA,cAAc,KAAK,YAAY;MACjDG,qBAAAA,WAAW;;;;KAIZR,wBAAAA,WAAW,KAAK,YAAY;;kBAEfE,uBAAAA,MAAM,wBAAwB;oBAC5BA,uBAAAA,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAKI,wBAAAA,UAAU,KAAK,YAAY;oBACxCJ,uBAAAA,MAAM,sBAAsB;kBAC9BA,uBAAAA,MAAM,sBAAsB;;;oBAG1BA,uBAAAA,MAAM,uBAAuB;;;;;;;;;aASpCF,wBAAAA,WAAW,KAAK,YAAY,KAAKM,wBAAAA,YAAYN,wBAAAA,WAAW,KAAK,YAAY;oBAClEE,uBAAAA,MAAM,8BAA8B;kBACtCA,uBAAAA,MAAM,8BAA8B;;;AAkBtD,MAAa,SAAA,GAAA,MAAA,YAAiD,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQO,qBAAAA,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,eAAA,GAAA,MAAA,gBAAA,GAAA,OAAA,UAAqC,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}

package/dist/Radio-w-L3Otuk.mjs

@@ -0,0 +1,147 @@
+import { isChecked, isDisabled, isFocusedVisible, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { focusStyle } from "./mixins/focus.mjs";
+import "./variables/transitions.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { uniqueId } from "lodash";
+//#region components/Radio/Radio.tsx
+const Container = styled.div`
+  cursor: pointer;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  position: relative;
+
+  ${({ size }) => size === "sm" && css`
+      align-items: center;
+      height: 16px;
+    `}
+
+  &${isDisabled} {
+    cursor: default;
+  }
+`;
+const Label = styled.label`
+  cursor: inherit;
+  padding: 0 ${Spacing[2]};
+  color: ${Color.TextSecondary};
+
+  ${({ size }) => size === "sm" ? css`
+          ${Typography.TextSmall};
+          line-height: 16px;
+        ` : css`
+          ${Typography.TextMedium};
+        `}
+
+  ${({ theme, disabled }) => disabled && css`
+      cursor: default;
+      color: ${theme.color.text.disabled};
+    `}
+`;
+const RadioCircle = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: box-shadow ${"200ms"};
+  border-radius: 100%;
+  height: ${Spacing[4]};
+  width: ${Spacing[4]};
+  flex: 0 0 16px;
+  box-sizing: border-box;
+  margin-top: ${({ size }) => size === "sm" ? 0 : "2px"};
+  border: 1px solid ${Color.BorderInputCheckbox};
+  background: ${Color.PrimaryWhite};
+`;
+const RadioInput = styled.input`
+  cursor: inherit;
+  height: ${Spacing[4]};
+  width: ${Spacing[4]};
+  margin: 0;
+  border: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  top: ${({ $size }) => $size === "sm" ? 0 : "2px"};
+  border-radius: 100%;
+  z-index: 10; // this needs to be above the dot in the checked input
+
+  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {
+    border-color: ${Color.BorderInputCheckboxHover};
+  }
+
+  &${isChecked}, &:checked {
+    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {
+      background: ${Color.BackgroundInputActiveHover};
+      border-color: ${Color.BackgroundInputActiveHover};
+    }
+  }
+
+  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {
+    ${focusStyle}
+  }
+
+  // RadioCircle state styles; Uses pure CSS
+  &${isDisabled} + ${RadioCircle} {
+    cursor: default;
+    background: ${Color.BackgroundInputDisabled};
+    border-color: ${Color.BorderInputDisabled};
+  }
+
+  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {
+    border-color: ${Color.BackgroundInputActive};
+    background: ${Color.BackgroundInputActive};
+
+    &::after {
+      background: ${Color.BackgroundInputDefault};
+      height: 6px;
+      width: 6px;
+      border-radius: 100%;
+      content: '';
+      position: absolute;
+    }
+  }
+
+  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {
+    border-color: ${Color.BackgroundInputActiveDisabled};
+    background: ${Color.BackgroundInputActiveDisabled};
+  }
+`;
+const Radio = forwardRef(function Radio({ id, label, className, value, disabled, checked, defaultChecked, onChange, "data-test": dataTest, size = "md", ...elemProps }, ref) {
+	const field = useFormField({ disabled });
+	const generatedId = useMemo(() => uniqueId("pds_radio__"), []);
+	return /* @__PURE__ */ jsxs(Container, {
+		className,
+		disabled,
+		"data-test": dataTest,
+		size,
+		children: [
+			/* @__PURE__ */ jsx(RadioInput, {
+				id: id || generatedId,
+				disabled: field.disabled,
+				onChange,
+				type: "radio",
+				value,
+				checked,
+				defaultChecked,
+				ref,
+				$size: size,
+				...elemProps
+			}),
+			/* @__PURE__ */ jsx(RadioCircle, { size }),
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: id || generatedId,
+				disabled: disabled ?? false,
+				size,
+				children: label
+			})
+		]
+	});
+});
+//#endregion
+export { Radio as t };
+
+//# sourceMappingURL=Radio-w-L3Otuk.mjs.map

package/dist/Radio-w-L3Otuk.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio-w-L3Otuk.mjs","names":[],"sources":["../components/Radio/Radio.tsx"],"sourcesContent":["import { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { uniqueId } from 'lodash';\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport {\n  isChecked,\n  isDisabled,\n  isFocusedVisible,\n  isHovered,\n  isNotDisabled,\n} from 'design-system/lib/pseudoClass';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst Container = styled.div<{ size: 'md' | 'sm'; disabled?: boolean }>`\n  cursor: pointer;\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: nowrap;\n  position: relative;\n\n  ${({ size }) =>\n    size === 'sm' &&\n    css`\n      align-items: center;\n      height: 16px;\n    `}\n\n  &${isDisabled} {\n    cursor: default;\n  }\n`;\n\nconst Label = styled.label<{ disabled: boolean; size: 'md' | 'sm' }>`\n  cursor: inherit;\n  padding: 0 ${Spacing[2]};\n  color: ${Color.TextSecondary};\n\n  ${({ size }) =>\n    size === 'sm'\n      ? css`\n          ${Typography.TextSmall};\n          line-height: 16px;\n        `\n      : css`\n          ${Typography.TextMedium};\n        `}\n\n  ${({ theme, disabled }) =>\n    disabled &&\n    css`\n      cursor: default;\n      color: ${theme.color.text.disabled};\n    `}\n`;\n\nconst RadioCircle = styled.div<{ size: 'md' | 'sm' }>`\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: box-shadow ${TransitionDuration.Fast};\n  border-radius: 100%;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  flex: 0 0 16px;\n  box-sizing: border-box;\n  margin-top: ${({ size }) => (size === 'sm' ? 0 : '2px')};\n  border: 1px solid ${Color.BorderInputCheckbox};\n  background: ${Color.PrimaryWhite};\n`;\n\nconst RadioInput = styled.input<{ $size: 'md' | 'sm' }>`\n  cursor: inherit;\n  height: ${Spacing[4]};\n  width: ${Spacing[4]};\n  margin: 0;\n  border: 0;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n  top: ${({ $size }) => ($size === 'sm' ? 0 : '2px')};\n  border-radius: 100%;\n  z-index: 10; // this needs to be above the dot in the checked input\n\n  &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n    border-color: ${Color.BorderInputCheckboxHover};\n  }\n\n  &${isChecked}, &:checked {\n    &${isHovered}${isNotDisabled} ~ ${RadioCircle} {\n      background: ${Color.BackgroundInputActiveHover};\n      border-color: ${Color.BackgroundInputActiveHover};\n    }\n  }\n\n  &${isFocusedVisible}${isNotDisabled} ~ ${RadioCircle} {\n    ${focusStyle}\n  }\n\n  // RadioCircle state styles; Uses pure CSS\n  &${isDisabled} + ${RadioCircle} {\n    cursor: default;\n    background: ${Color.BackgroundInputDisabled};\n    border-color: ${Color.BorderInputDisabled};\n  }\n\n  &:checked + ${RadioCircle}, &${isChecked} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActive};\n    background: ${Color.BackgroundInputActive};\n\n    &::after {\n      background: ${Color.BackgroundInputDefault};\n      height: 6px;\n      width: 6px;\n      border-radius: 100%;\n      content: '';\n      position: absolute;\n    }\n  }\n\n  &:checked${isDisabled} + ${RadioCircle}, &${isChecked}${isDisabled} + ${RadioCircle} {\n    border-color: ${Color.BackgroundInputActiveDisabled};\n    background: ${Color.BackgroundInputActiveDisabled};\n  }\n`;\n\nexport interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * If not provided, a unique ID will be generated.\n   */\n  id?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  label?: ReactNode;\n  disabled?: boolean;\n  checked?: boolean;\n  value: string;\n  'data-test'?: string;\n  size?: 'md' | 'sm';\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    id,\n    label,\n    className,\n    value,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    'data-test': dataTest,\n    size = 'md',\n    ...elemProps\n  },\n  ref,\n) {\n  const field = useFormField({ disabled });\n  const generatedId = useMemo(() => uniqueId('pds_radio__'), []);\n\n  return (\n    <Container className={className} disabled={disabled} data-test={dataTest} size={size}>\n      <RadioInput\n        id={id || generatedId}\n        disabled={field.disabled}\n        onChange={onChange}\n        type='radio'\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        ref={ref}\n        $size={size}\n        {...elemProps}\n      />\n      <RadioCircle size={size} />\n      {label && (\n        <Label htmlFor={id || generatedId} disabled={disabled ?? false} size={size}>\n          {label}\n        </Label>\n      )}\n    </Container>\n  );\n});\n\nexport default Radio;\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,YAAY,OAAO,GAA8C;;;;;;;KAOlE,EAAE,WACH,SAAS,QACT,GAAG;;;MAGD;;KAED,WAAW;;;;AAKhB,MAAM,QAAQ,OAAO,KAA+C;;eAErD,QAAQ,GAAG;WACf,MAAM,cAAc;;KAE1B,EAAE,WACH,SAAS,OACL,GAAG;YACC,WAAW,UAAU;;YAGzB,GAAG;YACC,WAAW,WAAW;UACxB;;KAEL,EAAE,OAAO,eACV,YACA,GAAG;;eAEQ,MAAM,MAAM,KAAK,SAAS;MACnC;;AAGN,MAAM,cAAc,OAAO,GAA0B;;;;;mCAKF;;YAEvC,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;iBAGL,EAAE,WAAY,SAAS,OAAO,IAAI,MAAO;sBACpC,MAAM,oBAAoB;gBAChC,MAAM,aAAa;;AAGnC,MAAM,aAAa,OAAO,KAA6B;;YAE3C,QAAQ,GAAG;WACZ,QAAQ,GAAG;;;;;;UAMZ,EAAE,YAAa,UAAU,OAAO,IAAI,MAAO;;;;KAIhD,YAAY,cAAc,KAAK,YAAY;oBAC5B,MAAM,yBAAyB;;;KAG9C,UAAU;OACR,YAAY,cAAc,KAAK,YAAY;oBAC9B,MAAM,2BAA2B;sBAC/B,MAAM,2BAA2B;;;;KAIlD,mBAAmB,cAAc,KAAK,YAAY;MACjD,WAAW;;;;KAIZ,WAAW,KAAK,YAAY;;kBAEf,MAAM,wBAAwB;oBAC5B,MAAM,oBAAoB;;;gBAG9B,YAAY,KAAK,UAAU,KAAK,YAAY;oBACxC,MAAM,sBAAsB;kBAC9B,MAAM,sBAAsB;;;oBAG1B,MAAM,uBAAuB;;;;;;;;;aASpC,WAAW,KAAK,YAAY,KAAK,YAAY,WAAW,KAAK,YAAY;oBAClE,MAAM,8BAA8B;kBACtC,MAAM,8BAA8B;;;AAkBtD,MAAa,QAAQ,WAAyC,SAAS,MACrE,EACE,IACA,OACA,WACA,OACA,UACA,SACA,gBACA,UACA,aAAa,UACb,OAAO,MACP,GAAG,aAEL,KACA;CACA,MAAM,QAAQ,aAAa,EAAE,UAAU,CAAC;CACxC,MAAM,cAAc,cAAc,SAAS,cAAc,EAAE,EAAE,CAAC;AAE9D,QACE,qBAAC,WAAD;EAAsB;EAAqB;EAAU,aAAW;EAAgB;YAAhF;GACE,oBAAC,YAAD;IACE,IAAI,MAAM;IACV,UAAU,MAAM;IACN;IACV,MAAK;IACE;IACE;IACO;IACX;IACL,OAAO;IACP,GAAI;IACJ,CAAA;GACF,oBAAC,aAAD,EAAmB,MAAQ,CAAA;GAC1B,SACC,oBAAC,OAAD;IAAO,SAAS,MAAM;IAAa,UAAU,YAAY;IAAa;cACnE;IACK,CAAA;GAEA;;EAEd"}