@langchain/macaw-components 1.0.0-beta.0

package/dist/components/RadioButton/constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * RadioButton style constants following the Button pattern.
+ * Styles are organized by category for maintainability.
+ */
+/** Base styles applied to all radio buttons */
+export declare const radioButtonBaseStyles = "flex shrink-0 items-center justify-center rounded-full border bg-elevated transition-colors";
+/** Focus ring styles: brand border + shadow haze */
+export declare const radioButtonFocusStyles = "focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]";
+/** Size variant styles for the radio button */
+export declare const radioButtonSizeStyles: {
+    readonly sm: "size-4";
+    readonly md: "size-5";
+};
+/** Size variant styles for the indicator dot */
+export declare const radioButtonDotSizeStyles: {
+    readonly sm: "size-1.5";
+    readonly md: "size-2";
+};
+/**
+ * Indicator dot styles. The disabled fill is applied via Radix's `data-disabled`
+ * attribute, which is set on the Indicator whenever the radio button or its
+ * enclosing group is disabled — so it covers both item-level and group-level
+ * disabled states, not just the local `disabled` prop.
+ */
+export declare const radioButtonIndicatorStyles = "bg-control-thumb data-[disabled]:bg-control-disabled";
+/**
+ * Combined radio button root styles - convenience export for component use.
+ * All state styles combined as an array to be spread in cn().
+ */
+export declare const radioButtonRootStateStyles: readonly ["border-default", "data-[state=unchecked]:hover:bg-elevated-hover", "data-[state=checked]:border-transparent data-[state=checked]:bg-control-active hover:data-[state=checked]:bg-control-active-hover", "data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled", "data-[disabled]:data-[state=unchecked]:hover:border-disabled data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled  data-[state=unchecked]:hover:bg-disabled", "data-[disabled]:data-[state=checked]:border-disabled data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled"];

package/dist/components/RadioButton/constants.js

@@ -0,0 +1,55 @@
+import { SELECTION_CONTROL_SIZES } from "../../utils/componentSizes.js";
+//#region packages/components/src/components/RadioButton/constants.ts
+/**
+* RadioButton style constants following the Button pattern.
+* Styles are organized by category for maintainability.
+*/
+/** Base styles applied to all radio buttons */
+var radioButtonBaseStyles = "flex shrink-0 items-center justify-center rounded-full border bg-elevated transition-colors";
+/** Focus ring styles: brand border + shadow haze */
+var radioButtonFocusStyles = "focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]";
+/** Size variant styles for the radio button */
+var radioButtonSizeStyles = {
+	sm: SELECTION_CONTROL_SIZES.sm.className,
+	md: SELECTION_CONTROL_SIZES.md.className
+};
+/** Size variant styles for the indicator dot */
+var radioButtonDotSizeStyles = {
+	sm: "size-1.5",
+	md: "size-2"
+};
+/**
+* State styles using Radix data attributes.
+* These are combined and applied via cn() in the component.
+*/
+var radioButtonStateStyles = {
+	default: "border-default",
+	uncheckedHover: "data-[state=unchecked]:hover:bg-elevated-hover",
+	checked: "data-[state=checked]:border-transparent data-[state=checked]:bg-control-active hover:data-[state=checked]:bg-control-active-hover",
+	disabledBase: "data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled",
+	disabledUnchecked: "data-[disabled]:data-[state=unchecked]:hover:border-disabled data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled  data-[state=unchecked]:hover:bg-disabled",
+	disabledChecked: "data-[disabled]:data-[state=checked]:border-disabled data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled"
+};
+/**
+* Indicator dot styles. The disabled fill is applied via Radix's `data-disabled`
+* attribute, which is set on the Indicator whenever the radio button or its
+* enclosing group is disabled — so it covers both item-level and group-level
+* disabled states, not just the local `disabled` prop.
+*/
+var radioButtonIndicatorStyles = "bg-control-thumb data-[disabled]:bg-control-disabled";
+/**
+* Combined radio button root styles - convenience export for component use.
+* All state styles combined as an array to be spread in cn().
+*/
+var radioButtonRootStateStyles = [
+	radioButtonStateStyles.default,
+	radioButtonStateStyles.uncheckedHover,
+	radioButtonStateStyles.checked,
+	radioButtonStateStyles.disabledBase,
+	radioButtonStateStyles.disabledUnchecked,
+	radioButtonStateStyles.disabledChecked
+];
+//#endregion
+export { radioButtonBaseStyles, radioButtonDotSizeStyles, radioButtonFocusStyles, radioButtonIndicatorStyles, radioButtonRootStateStyles, radioButtonSizeStyles };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/RadioButton/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/RadioButton/constants.ts"],"sourcesContent":["import {\n  SELECTION_CONTROL_SIZES,\n  type SelectionControlSize,\n} from '../../utils/componentSizes';\n\n/**\n * RadioButton style constants following the Button pattern.\n * Styles are organized by category for maintainability.\n */\n\n/** Base styles applied to all radio buttons */\nexport const radioButtonBaseStyles =\n  'flex shrink-0 items-center justify-center rounded-full border bg-elevated transition-colors';\n\n/** Focus ring styles: brand border + shadow haze */\nexport const radioButtonFocusStyles =\n  'focus-visible:border-brand focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)]';\n\n/** Size variant styles for the radio button */\nexport const radioButtonSizeStyles = {\n  sm: SELECTION_CONTROL_SIZES.sm.className,\n  md: SELECTION_CONTROL_SIZES.md.className,\n} as const satisfies Record<SelectionControlSize, string>;\n\n/** Size variant styles for the indicator dot */\nexport const radioButtonDotSizeStyles = {\n  sm: 'size-1.5',\n  md: 'size-2',\n} as const satisfies Record<SelectionControlSize, string>;\n\n/**\n * State styles using Radix data attributes.\n * These are combined and applied via cn() in the component.\n */\nconst radioButtonStateStyles = {\n  // Default border (unchecked state)\n  default: 'border-default',\n\n  // Unchecked hover - slight background change\n  uncheckedHover: 'data-[state=unchecked]:hover:bg-elevated-hover',\n\n  // Checked state - filled with brand color\n  checked:\n    'data-[state=checked]:border-transparent data-[state=checked]:bg-control-active hover:data-[state=checked]:bg-control-active-hover',\n\n  // Disabled base - applies to all states when disabled\n  disabledBase:\n    'data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled',\n\n  // Disabled unchecked - override hover effects\n  disabledUnchecked:\n    'data-[disabled]:data-[state=unchecked]:hover:border-disabled data-[disabled]:data-[state=unchecked]:hover:shadow-none data-[disabled]:hover:bg-disabled  data-[state=unchecked]:hover:bg-disabled',\n\n  // Disabled checked - override hover effects\n  disabledChecked:\n    'data-[disabled]:data-[state=checked]:border-disabled data-[disabled]:data-[state=checked]:bg-disabled data-[disabled]:data-[state=checked]:hover:bg-disabled',\n} as const;\n\n/**\n * Indicator dot styles. The disabled fill is applied via Radix's `data-disabled`\n * attribute, which is set on the Indicator whenever the radio button or its\n * enclosing group is disabled — so it covers both item-level and group-level\n * disabled states, not just the local `disabled` prop.\n */\nexport const radioButtonIndicatorStyles =\n  'bg-control-thumb data-[disabled]:bg-control-disabled';\n\n/**\n * Combined radio button root styles - convenience export for component use.\n * All state styles combined as an array to be spread in cn().\n */\nexport const radioButtonRootStateStyles = [\n  radioButtonStateStyles.default,\n  radioButtonStateStyles.uncheckedHover,\n  radioButtonStateStyles.checked,\n  radioButtonStateStyles.disabledBase,\n  radioButtonStateStyles.disabledUnchecked,\n  radioButtonStateStyles.disabledChecked,\n] as const;\n"],"mappings":";;;;;;;AAWA,IAAa,wBACX;;AAGF,IAAa,yBACX;;AAGF,IAAa,wBAAwB;CACnC,IAAI,wBAAwB,GAAG;CAC/B,IAAI,wBAAwB,GAAG;AACjC;;AAGA,IAAa,2BAA2B;CACtC,IAAI;CACJ,IAAI;AACN;;;;;AAMA,IAAM,yBAAyB;CAE7B,SAAS;CAGT,gBAAgB;CAGhB,SACE;CAGF,cACE;CAGF,mBACE;CAGF,iBACE;AACJ;;;;;;;AAQA,IAAa,6BACX;;;;;AAMF,IAAa,6BAA6B;CACxC,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;CACvB,uBAAuB;AACzB"}

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioButton } from './RadioButton.js';
+export type { RadioButtonProps } from './RadioButton.js';

package/dist/components/RadioButton/index.js

@@ -0,0 +1,2 @@
+import { RadioButton } from "./RadioButton.js";
+export { RadioButton };

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,26 @@
+import type { SelectionControlSize } from '../../utils/componentSizes.js';
+export interface RadioCardProps {
+    value: string;
+    children?: React.ReactNode;
+    /**
+     * Content revealed only when the card is selected.
+     * When provided, collapse/expand behavior is enabled automatically
+     * using CSS `group-has-[[role=radio][data-state=checked]]`
+     */
+    collapsible?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    radioPosition?: 'left' | 'right';
+    /** Indicator size. The card height remains content-driven. */
+    size?: SelectionControlSize;
+    /**
+     * Hides the visible radio indicator while keeping it in the DOM so that
+     * the selection state (border highlight, collapsible reveal) still works.
+     * Use when the card design itself is the only selection affordance needed.
+     */
+    hideIndicator?: boolean;
+    'data-testid'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+export declare const RadioCard: import("react").ForwardRefExoticComponent<RadioCardProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/RadioCard/RadioCard.js

@@ -0,0 +1,43 @@
+import { cn } from "../../utils/cn.js";
+import { radioButtonBaseStyles, radioButtonDotSizeStyles, radioButtonFocusStyles, radioButtonIndicatorStyles, radioButtonRootStateStyles, radioButtonSizeStyles } from "../RadioButton/constants.js";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region packages/components/src/components/RadioCard/RadioCard.tsx
+var RadioCard = forwardRef(({ value, children, collapsible, className, disabled, radioPosition = "left", size = "sm", hideIndicator = false, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
+	const id = useId();
+	const radioItem = /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		ref,
+		id,
+		value,
+		disabled,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"data-testid": dataTestId,
+		className: cn(radioButtonBaseStyles, radioButtonFocusStyles, radioButtonSizeStyles[size], radioButtonRootStateStyles, "shrink-0"),
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: cn("flex items-center justify-center rounded-full", radioButtonDotSizeStyles[size], radioButtonIndicatorStyles) })
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		htmlFor: id,
+		className: cn("group/rc", "flex items-center rounded-lg border-2 border-secondary p-space-4 transition-colors has-[[role=radio][data-state=checked]]:border-brand", size === "sm" ? "gap-space-3" : "gap-space-4", disabled ? "cursor-not-allowed" : "cursor-pointer", !disabled && "hover:bg-primary-hover", disabled && "text-disabled", className),
+		children: [
+			hideIndicator ? /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: radioItem
+			}) : radioPosition === "left" && radioItem,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-space-2",
+				children: [children, collapsible != null && /* @__PURE__ */ jsx("div", {
+					className: "hidden group-has-[[role=radio][data-state=checked]]/rc:block",
+					children: collapsible
+				})]
+			}),
+			!hideIndicator && radioPosition === "right" && radioItem
+		]
+	});
+});
+RadioCard.displayName = "RadioCard";
+//#endregion
+export { RadioCard };
+
+//# sourceMappingURL=RadioCard.js.map

package/dist/components/RadioCard/RadioCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/RadioCard/RadioCard.tsx"],"sourcesContent":["import { forwardRef, useId } from 'react';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils/cn';\nimport type { SelectionControlSize } from '../../utils/componentSizes';\nimport {\n  radioButtonBaseStyles,\n  radioButtonDotSizeStyles,\n  radioButtonFocusStyles,\n  radioButtonIndicatorStyles,\n  radioButtonRootStateStyles,\n  radioButtonSizeStyles,\n} from '../RadioButton/constants';\n\nexport interface RadioCardProps {\n  value: string;\n  children?: React.ReactNode;\n  /**\n   * Content revealed only when the card is selected.\n   * When provided, collapse/expand behavior is enabled automatically\n   * using CSS `group-has-[[role=radio][data-state=checked]]`\n   */\n  collapsible?: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  radioPosition?: 'left' | 'right';\n  /** Indicator size. The card height remains content-driven. */\n  size?: SelectionControlSize;\n  /**\n   * Hides the visible radio indicator while keeping it in the DOM so that\n   * the selection state (border highlight, collapsible reveal) still works.\n   * Use when the card design itself is the only selection affordance needed.\n   */\n  hideIndicator?: boolean;\n  'data-testid'?: string;\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n}\n\nexport const RadioCard = forwardRef<HTMLButtonElement, RadioCardProps>(\n  (\n    {\n      value,\n      children,\n      collapsible,\n      className,\n      disabled,\n      radioPosition = 'left',\n      size = 'sm',\n      hideIndicator = false,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    },\n    ref\n  ) => {\n    const id = useId();\n\n    const radioItem = (\n      <RadioGroupPrimitive.Item\n        ref={ref}\n        id={id}\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-testid={dataTestId}\n        className={cn(\n          radioButtonBaseStyles,\n          radioButtonFocusStyles,\n          radioButtonSizeStyles[size],\n          radioButtonRootStateStyles,\n          'shrink-0'\n        )}\n      >\n        <RadioGroupPrimitive.Indicator\n          className={cn(\n            'flex items-center justify-center rounded-full',\n            radioButtonDotSizeStyles[size],\n            radioButtonIndicatorStyles\n          )}\n        />\n      </RadioGroupPrimitive.Item>\n    );\n\n    return (\n      <label\n        htmlFor={id}\n        className={cn(\n          // Named group so nested collapsible content can reference it safely\n          // even when RadioCards are nested inside other groups.\n          'group/rc',\n          'flex items-center rounded-lg border-2 border-secondary p-space-4 transition-colors has-[[role=radio][data-state=checked]]:border-brand',\n          size === 'sm' ? 'gap-space-3' : 'gap-space-4',\n          disabled ? 'cursor-not-allowed' : 'cursor-pointer',\n          !disabled && 'hover:bg-primary-hover',\n          disabled && 'text-disabled',\n          className\n        )}\n      >\n        {/* When hideIndicator, keep the radio item in the DOM (so CSS has()\n            and screen readers still work) but remove it from layout flow. */}\n        {hideIndicator ? (\n          <span className=\"sr-only\">{radioItem}</span>\n        ) : (\n          radioPosition === 'left' && radioItem\n        )}\n\n        <div className=\"flex min-w-0 flex-1 flex-col gap-space-2\">\n          {children}\n          {collapsible != null && (\n            <div className=\"hidden group-has-[[role=radio][data-state=checked]]/rc:block\">\n              {collapsible}\n            </div>\n          )}\n        </div>\n\n        {!hideIndicator && radioPosition === 'right' && radioItem}\n      </label>\n    );\n  }\n);\n\nRadioCard.displayName = 'RadioCard';\n"],"mappings":";;;;;;AAwCA,IAAa,YAAY,YAErB,EACE,OACA,UACA,aACA,WACA,UACA,gBAAgB,QAChB,OAAO,MACP,gBAAgB,OAChB,eAAe,YACf,cAAc,WACd,mBAAmB,kBAErB,QACG;CACH,MAAM,KAAK,MAAM;CAEjB,MAAM,YACJ,oBAAC,oBAAoB,MAArB;EACO;EACD;EACG;EACG;EACV,cAAY;EACZ,mBAAiB;EACjB,eAAa;EACb,WAAW,GACT,uBACA,wBACA,sBAAsB,OACtB,4BACA,UACF;EAEA,UAAA,oBAAC,oBAAoB,WAArB,EACE,WAAW,GACT,iDACA,yBAAyB,OACzB,0BACF,EACD,CAAA;CACuB,CAAA;CAG5B,OACE,qBAAC,SAAD;EACE,SAAS;EACT,WAAW,GAGT,YACA,0IACA,SAAS,OAAO,gBAAgB,eAChC,WAAW,uBAAuB,kBAClC,CAAC,YAAY,0BACb,YAAY,iBACZ,SACF;EAZF,UAAA;GAgBG,gBACC,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAgB,CAAA,IAE3C,kBAAkB,UAAU;GAG9B,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,UACA,eAAe,QACd,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA,CAEJ;;GAEJ,CAAC,iBAAiB,kBAAkB,WAAW;EAC3C;;AAEX,CACF;AAEA,UAAU,cAAc"}

package/dist/components/RadioCard/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioCard } from './RadioCard.js';
+export type { RadioCardProps } from './RadioCard.js';

package/dist/components/RadioCard/index.js

@@ -0,0 +1,2 @@
+import { RadioCard } from "./RadioCard.js";
+export { RadioCard };

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { RadioGroup };

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,17 @@
+import { cn } from "../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region packages/components/src/components/RadioGroup/RadioGroup.tsx
+var RadioGroup = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+		className: cn("flex flex-col gap-space-3", className),
+		...props,
+		ref
+	});
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","names":[],"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils/cn';\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Root\n>;\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn('flex flex-col gap-space-3', className)}\n      {...props}\n      ref={ref}\n    />\n  );\n});\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nexport { RadioGroup };\n"],"mappings":";;;;;AAUA,IAAM,aAAa,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAAC,oBAAoB,MAArB;EACE,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;EACC;CACN,CAAA;AAEL,CAAC;AACD,WAAW,cAAc,oBAAoB,KAAK"}

package/dist/components/RadioGroup/RadioGroupItem.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroupItem };

package/dist/components/RadioGroup/RadioGroupItem.js

@@ -0,0 +1,22 @@
+import { cn } from "../../utils/cn.js";
+import { SELECTION_CONTROL_HIT_AREA_STYLES } from "../../utils/componentSizes.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+//#region packages/components/src/components/RadioGroup/RadioGroupItem.tsx
+var RadioGroupItem = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+		ref,
+		className: cn("flex items-start justify-end gap-space-3 self-stretch rounded-full border border-subtle bg-surface-level-1 p-space-3 transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled data-[disabled]:data-[state=checked]:bg-disabled data-[state=checked]:bg-brand data-[state=checked]:p-space-2", "focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none", SELECTION_CONTROL_HIT_AREA_STYLES, className),
+		...props,
+		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+			className: "group flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-control-thumb group-data-[disabled]:bg-control-disabled" })
+		})
+	});
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+//#endregion
+export { RadioGroupItem };
+
+//# sourceMappingURL=RadioGroupItem.js.map

package/dist/components/RadioGroup/RadioGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupItem.js","names":[],"sources":["../../../src/components/RadioGroup/RadioGroupItem.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils/cn';\nimport { SELECTION_CONTROL_HIT_AREA_STYLES } from '../../utils/componentSizes';\n\nexport type RadioGroupItemProps = React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive.Item\n>;\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(({ className, ...props }, ref) => {\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        'flex items-start justify-end gap-space-3 self-stretch rounded-full border border-subtle bg-surface-level-1 p-space-3 transition-colors data-[disabled]:cursor-not-allowed data-[disabled]:border-disabled data-[disabled]:bg-disabled data-[disabled]:data-[state=checked]:bg-disabled data-[state=checked]:bg-brand data-[state=checked]:p-space-2',\n        'focus-visible:shadow-[0_0_0_4px_var(--bg-brand-subtle)] focus-visible:outline-none',\n        SELECTION_CONTROL_HIT_AREA_STYLES,\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator className=\"group flex items-center justify-center\">\n        <div className=\"size-2 rounded-full bg-control-thumb group-data-[disabled]:bg-control-disabled\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n});\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nexport { RadioGroupItem };\n"],"mappings":";;;;;;AAWA,IAAM,iBAAiB,QAAM,YAG1B,EAAE,WAAW,GAAG,SAAS,QAAQ;CAClC,OACE,oBAAC,oBAAoB,MAArB;EACO;EACL,WAAW,GACT,uVACA,sFACA,mCACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,oBAAoB,WAArB;GAA+B,WAAU;GACvC,UAAA,oBAAC,OAAD,EAAK,WAAU,iFAAkF,CAAA;EACpE,CAAA;CACP,CAAA;AAE9B,CAAC;AACD,eAAe,cAAc,oBAAoB,KAAK"}

package/dist/components/RadioGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { RadioGroup } from './RadioGroup.js';
+export type { RadioGroupProps } from './RadioGroup.js';
+export { RadioGroupItem } from './RadioGroupItem.js';
+export type { RadioGroupItemProps } from './RadioGroupItem.js';

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,3 @@
+import { RadioGroup } from "./RadioGroup.js";
+import { RadioGroupItem } from "./RadioGroupItem.js";
+export { RadioGroup, RadioGroupItem };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,84 @@
+import type { ReactNode } from 'react';
+import { type ControlSize } from '../../utils/componentSizes.js';
+export interface SelectOption<T extends string = string> {
+    /** The value used for selection and filtering */
+    value: T;
+    /** Display label (defaults to value if not provided) */
+    label?: string;
+    /** Secondary description text displayed below the label */
+    description?: string;
+    /** Element displayed on the right side of the item (e.g. badge, shortcut) */
+    rightDecorator?: ReactNode;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+export interface SelectGroup<T extends string = string> {
+    heading?: string;
+    options: SelectOption<T>[];
+}
+export type SelectSize = ControlSize;
+interface SelectBaseProps<T extends string = string> {
+    /** The currently selected value */
+    value?: T;
+    /** Callback when selection changes. Receives undefined when deselected. */
+    onChange: (value: T | undefined) => void;
+    /** Placeholder text when no value is selected */
+    placeholder?: string;
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Exact trigger height: xs=20px, sm=24px, md=32px, lg=40px. */
+    size?: SelectSize;
+    /** Text to show when no options match the search */
+    emptyText?: string;
+    /** Allow deselecting the current value by clicking it again (default: false) */
+    allowDeselect?: boolean;
+    /** Hide the search input (default: true, search is hidden) */
+    hideSearch?: boolean;
+    /** Disable client-side filtering by cmdk (default: false). Set true for server-side filtering. */
+    disableFilter?: boolean;
+    /** Callback when the search input value changes. Useful for server-side filtering. */
+    onSearchChange?: (query: string) => void;
+    /** Whether more items are currently being loaded */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading (default: 5) */
+    loadingRows?: number;
+    /** Callback when the user scrolls near the end of the list. Use for infinite loading. */
+    onEndReached?: () => void;
+    /** Distance in pixels from the bottom to trigger onEndReached (default: 50) */
+    endReachedThresholdPx?: number;
+    /** Additional class name for the trigger button */
+    triggerClassName?: string;
+    /** Additional class name for the popover content */
+    contentClassName?: string;
+    /** Custom render function for the selected value in the trigger */
+    renderValue?: (option: SelectOption<T>) => ReactNode;
+    /** Custom render function for each option in the list */
+    renderOption?: (option: SelectOption<T>, isSelected: boolean) => ReactNode;
+    /** Side of the trigger to align the popover */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment of the popover relative to the trigger */
+    align?: 'start' | 'center' | 'end';
+    /** aria-label for the trigger button */
+    'aria-label'?: string;
+    /** Test id for the trigger button */
+    'data-testid'?: string;
+}
+export type SelectProps<T extends string = string> = SelectBaseProps<T> & ({
+    options: SelectOption<T>[];
+    groups?: never;
+} | {
+    groups: SelectGroup<T>[];
+    options?: never;
+}) & ({
+    /** Controlled open state */
+    open: boolean;
+    /** Callback when open state changes (required when `open` is provided) */
+    onOpenChange: (open: boolean) => void;
+} | {
+    open?: never;
+    onOpenChange?: never;
+});
+export declare function Select<T extends string = string>(props: SelectProps<T>): React.ReactElement<unknown>;
+export {};

package/dist/components/Select/Select.js

@@ -0,0 +1,120 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { CaretDownIcon } from "../../icons/PaddedPhosphorIcons.js";
+import { Icon } from "../Icon/Icon.js";
+import { Button } from "../Button/Button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+import { CommandMenu } from "../Command/CommandMenu.js";
+import { CONTROL_ICON_SIZES } from "../../utils/controlIconSizes.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Select/Select.tsx
+function optionToItem(opt) {
+	return {
+		value: opt.value,
+		label: opt.label,
+		description: opt.description,
+		rightDecorator: opt.rightDecorator,
+		disabled: opt.disabled,
+		keywords: opt.label ? [opt.label] : void 0
+	};
+}
+function OptionSelect({ value, onChange, options, groups, placeholder = "Select...", searchPlaceholder = "Search...", disabled = false, size = "sm", emptyText = "No results found.", open: controlledOpen, onOpenChange: controlledOnOpenChange, allowDeselect, hideSearch = true, disableFilter, onSearchChange, loading, loadingRows, onEndReached, endReachedThresholdPx, triggerClassName, contentClassName, renderValue, renderOption, side, align = "start", "aria-label": ariaLabel, "data-testid": dataTestId }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isControlled = controlledOpen !== void 0;
+	const open = isControlled ? controlledOpen : uncontrolledOpen;
+	const setOpen = isControlled ? controlledOnOpenChange : setUncontrolledOpen;
+	const allOptions = useMemo(() => groups ? groups.flatMap((g) => g.options) : options ?? [], [groups, options]);
+	const selectedOption = useMemo(() => allOptions.find((opt) => opt.value === value), [allOptions, value]);
+	const handleSelect = useCallback((optionValue) => {
+		const match = allOptions.find((o) => o.value === optionValue);
+		if (!match) return;
+		if (allowDeselect && match.value === value) onChange(void 0);
+		else onChange(match.value);
+		setOpen(false);
+	}, [
+		allowDeselect,
+		value,
+		onChange,
+		setOpen,
+		allOptions
+	]);
+	const items = useMemo(() => (options ?? []).map(optionToItem), [options]);
+	const commandGroups = useMemo(() => groups?.map((g) => ({
+		heading: g.heading,
+		items: g.options.map(optionToItem)
+	})), [groups]);
+	const renderItem = renderOption ? (item, isSelected) => {
+		const option = allOptions.find((o) => o.value === item.value);
+		return option ? renderOption(option, isSelected) : null;
+	} : void 0;
+	const searchInputSize = size === "xs" ? "sm" : size === "lg" ? "md" : size;
+	const triggerButtonSize = size === "lg" ? "md" : size;
+	const commandMenuSharedProps = {
+		value,
+		onSelect: handleSelect,
+		placeholder: searchPlaceholder,
+		emptyText,
+		hideSearch,
+		disableFilter,
+		onSearchChange,
+		loading,
+		loadingRows,
+		onEndReached,
+		endReachedThresholdPx,
+		renderItem,
+		inputSize: searchInputSize
+	};
+	const triggerContent = selectedOption && renderValue ? renderValue(selectedOption) : /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		variant: triggerButtonSize,
+		weight: "normal",
+		className: "min-w-0 truncate text-left",
+		children: selectedOption ? selectedOption.label ?? selectedOption.value : placeholder
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-label": ariaLabel ?? placeholder,
+				variant: "outlined",
+				color: "secondary",
+				size: triggerButtonSize,
+				className: cn("box-border w-full justify-between py-0", CONTROL_SIZES[size].heightClassName, triggerClassName),
+				disabled,
+				"data-testid": dataTestId,
+				children: [triggerContent, /* @__PURE__ */ jsx(Icon, {
+					"aria-hidden": true,
+					icon: CaretDownIcon,
+					iconClassName: CONTROL_ICON_SIZES[size].iconClassName,
+					className: "text-inherit",
+					weight: "regular"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: cn("w-max min-w-[var(--radix-popover-trigger-width)] max-w-[min(24rem,calc(100vw-1rem))] p-0 text-primary", contentClassName),
+			side,
+			align,
+			onCloseAutoFocus: (e) => e.preventDefault(),
+			children: commandGroups ? /* @__PURE__ */ jsx(CommandMenu, {
+				groups: commandGroups,
+				...commandMenuSharedProps
+			}) : /* @__PURE__ */ jsx(CommandMenu, {
+				items,
+				...commandMenuSharedProps
+			})
+		})]
+	});
+}
+function Select(props) {
+	return /* @__PURE__ */ jsx(OptionSelect, { ...props });
+}
+//#endregion
+export { Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useCallback, useMemo, useState } from 'react';\n\nimport { CaretDownIcon } from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport { CONTROL_SIZES, type ControlSize } from '../../utils/componentSizes';\nimport { CONTROL_ICON_SIZES } from '../../utils/controlIconSizes';\nimport { Button } from '../Button';\nimport { CommandMenu } from '../Command/CommandMenu';\nimport type { CommandMenuGroup, CommandMenuItem } from '../Command/CommandMenu';\nimport { Icon } from '../Icon';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Text } from '../Text';\n\nexport interface SelectOption<T extends string = string> {\n  /** The value used for selection and filtering */\n  value: T;\n  /** Display label (defaults to value if not provided) */\n  label?: string;\n  /** Secondary description text displayed below the label */\n  description?: string;\n  /** Element displayed on the right side of the item (e.g. badge, shortcut) */\n  rightDecorator?: ReactNode;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n}\n\nexport interface SelectGroup<T extends string = string> {\n  heading?: string;\n  options: SelectOption<T>[];\n}\n\nexport type SelectSize = ControlSize;\n\ninterface SelectBaseProps<T extends string = string> {\n  /** The currently selected value */\n  value?: T;\n  /** Callback when selection changes. Receives undefined when deselected. */\n  onChange: (value: T | undefined) => void;\n  /** Placeholder text when no value is selected */\n  placeholder?: string;\n  /** Placeholder text for the search input */\n  searchPlaceholder?: string;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Exact trigger height: xs=20px, sm=24px, md=32px, lg=40px. */\n  size?: SelectSize;\n  /** Text to show when no options match the search */\n  emptyText?: string;\n  /** Allow deselecting the current value by clicking it again (default: false) */\n  allowDeselect?: boolean;\n  /** Hide the search input (default: true, search is hidden) */\n  hideSearch?: boolean;\n  /** Disable client-side filtering by cmdk (default: false). Set true for server-side filtering. */\n  disableFilter?: boolean;\n  /** Callback when the search input value changes. Useful for server-side filtering. */\n  onSearchChange?: (query: string) => void;\n  /** Whether more items are currently being loaded */\n  loading?: boolean;\n  /** Number of skeleton rows to show while loading (default: 5) */\n  loadingRows?: number;\n  /** Callback when the user scrolls near the end of the list. Use for infinite loading. */\n  onEndReached?: () => void;\n  /** Distance in pixels from the bottom to trigger onEndReached (default: 50) */\n  endReachedThresholdPx?: number;\n  /** Additional class name for the trigger button */\n  triggerClassName?: string;\n  /** Additional class name for the popover content */\n  contentClassName?: string;\n  /** Custom render function for the selected value in the trigger */\n  renderValue?: (option: SelectOption<T>) => ReactNode;\n  /** Custom render function for each option in the list */\n  renderOption?: (option: SelectOption<T>, isSelected: boolean) => ReactNode;\n  /** Side of the trigger to align the popover */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /** Alignment of the popover relative to the trigger */\n  align?: 'start' | 'center' | 'end';\n  /** aria-label for the trigger button */\n  'aria-label'?: string;\n  /** Test id for the trigger button */\n  'data-testid'?: string;\n}\n\nexport type SelectProps<T extends string = string> = SelectBaseProps<T> &\n  (\n    | {\n        options: SelectOption<T>[];\n        groups?: never;\n      }\n    | {\n        groups: SelectGroup<T>[];\n        options?: never;\n      }\n  ) &\n  (\n    | {\n        /** Controlled open state */\n        open: boolean;\n        /** Callback when open state changes (required when `open` is provided) */\n        onOpenChange: (open: boolean) => void;\n      }\n    | {\n        open?: never;\n        onOpenChange?: never;\n      }\n  );\n\nfunction optionToItem(opt: SelectOption): CommandMenuItem {\n  return {\n    value: opt.value,\n    label: opt.label,\n    description: opt.description,\n    rightDecorator: opt.rightDecorator,\n    disabled: opt.disabled,\n    keywords: opt.label ? [opt.label] : undefined,\n  };\n}\n\nfunction OptionSelect<T extends string = string>({\n  value,\n  onChange,\n  options,\n  groups,\n  placeholder = 'Select...',\n  searchPlaceholder = 'Search...',\n  disabled = false,\n  size = 'sm',\n  emptyText = 'No results found.',\n  open: controlledOpen,\n  onOpenChange: controlledOnOpenChange,\n  allowDeselect,\n  hideSearch = true,\n  disableFilter,\n  onSearchChange,\n  loading,\n  loadingRows,\n  onEndReached,\n  endReachedThresholdPx,\n  triggerClassName,\n  contentClassName,\n  renderValue,\n  renderOption,\n  side,\n  align = 'start',\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: SelectProps<T>) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n  const setOpen = isControlled ? controlledOnOpenChange : setUncontrolledOpen;\n\n  const allOptions = useMemo<SelectOption<T>[]>(\n    () => (groups ? groups.flatMap((g) => g.options) : (options ?? [])),\n    [groups, options]\n  );\n\n  const selectedOption = useMemo(\n    () => allOptions.find((opt) => opt.value === value),\n    [allOptions, value]\n  );\n\n  const handleSelect = useCallback(\n    (optionValue: string) => {\n      const match = allOptions.find((o) => o.value === optionValue);\n      if (!match) return;\n      if (allowDeselect && match.value === value) {\n        onChange(undefined);\n      } else {\n        onChange(match.value);\n      }\n      setOpen(false);\n    },\n    [allowDeselect, value, onChange, setOpen, allOptions]\n  );\n\n  const items: CommandMenuItem[] = useMemo(\n    () => (options ?? []).map(optionToItem),\n    [options]\n  );\n\n  const commandGroups: CommandMenuGroup[] | undefined = useMemo(\n    () =>\n      groups?.map((g) => ({\n        heading: g.heading,\n        items: g.options.map(optionToItem),\n      })),\n    [groups]\n  );\n\n  const renderItem = renderOption\n    ? (item: CommandMenuItem, isSelected: boolean) => {\n        const option = allOptions.find((o) => o.value === item.value);\n        return option ? renderOption(option, isSelected) : null;\n      }\n    : undefined;\n  const searchInputSize = size === 'xs' ? 'sm' : size === 'lg' ? 'md' : size;\n  const triggerButtonSize = size === 'lg' ? 'md' : size;\n\n  const commandMenuSharedProps = {\n    value,\n    onSelect: handleSelect,\n    placeholder: searchPlaceholder,\n    emptyText,\n    hideSearch,\n    disableFilter,\n    onSearchChange,\n    loading,\n    loadingRows,\n    onEndReached,\n    endReachedThresholdPx,\n    renderItem,\n    inputSize: searchInputSize,\n  };\n\n  const triggerContent =\n    selectedOption && renderValue ? (\n      renderValue(selectedOption)\n    ) : (\n      <Text\n        as=\"span\"\n        variant={triggerButtonSize}\n        weight=\"normal\"\n        className=\"min-w-0 truncate text-left\"\n      >\n        {selectedOption\n          ? (selectedOption.label ?? selectedOption.value)\n          : placeholder}\n      </Text>\n    );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-label={ariaLabel ?? placeholder}\n          variant=\"outlined\"\n          color=\"secondary\"\n          size={triggerButtonSize}\n          className={cn(\n            'box-border w-full justify-between py-0',\n            CONTROL_SIZES[size].heightClassName,\n            triggerClassName\n          )}\n          disabled={disabled}\n          data-testid={dataTestId}\n        >\n          {triggerContent}\n          <Icon\n            aria-hidden\n            icon={CaretDownIcon}\n            iconClassName={CONTROL_ICON_SIZES[size].iconClassName}\n            className=\"text-inherit\"\n            weight=\"regular\"\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        className={cn(\n          'w-max min-w-[var(--radix-popover-trigger-width)] max-w-[min(24rem,calc(100vw-1rem))] p-0 text-primary',\n          contentClassName\n        )}\n        side={side}\n        align={align}\n        onCloseAutoFocus={(e) => e.preventDefault()}\n      >\n        {commandGroups ? (\n          <CommandMenu groups={commandGroups} {...commandMenuSharedProps} />\n        ) : (\n          <CommandMenu items={items} {...commandMenuSharedProps} />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function Select<T extends string = string>(\n  props: SelectProps<T>\n): React.ReactElement<unknown> {\n  return <OptionSelect {...props} />;\n}\n"],"mappings":"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"}

package/dist/components/Select/SelectPrimitive.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as RadixSelect from '@radix-ui/react-select';
+export declare const SelectRoot: typeof RadixSelect.Root;
+export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger> & {
+    iconClassName?: string;
+};
+export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    iconClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectContent: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    checkmarkPosition?: "left" | "right";
+    selectedIndicator?: "checkmark" | "background";
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<RadixSelect.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<RadixSelect.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;