@coinbase/cds-web 0.0.0 → 8.13.2

package/dts/collapsible/useCollapsibleMotionProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollapsibleMotionProps.d.ts","sourceRoot":"","sources":["../../src/collapsible/useCollapsibleMotionProps.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,eAAO,MAAM,yBAAyB,GAAI,6DAIvC,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,WAAW,GAAG,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBxF,CAAC"}

package/dts/controls/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type ControlBaseProps } from './Control';
+export type CheckboxProps<T extends string> = ControlBaseProps<T> & {
+  /** Sets the checked/active color of the control.
+   * @default fgInverse
+   */
+  controlColor?: ThemeVars.Color;
+  /**
+   * Optional.Sets the border width of the control.
+   * @default 100
+   */
+  borderWidth?: ThemeVars.BorderWidth;
+};
+declare const CheckboxWithRef: <T extends string>(
+  props: CheckboxProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+  },
+) => React.ReactElement;
+export declare const Checkbox: typeof CheckboxWithRef &
+  React.MemoExoticComponent<typeof CheckboxWithRef>;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/dts/controls/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAejE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAyB3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAClE;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,eAAe,EA2Ef,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,QAAQ,EAA4B,OAAO,eAAe,GACrE,KAAK,CAAC,mBAAmB,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dts/controls/CheckboxCell.d.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties } from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { ResponsiveProp } from '../styles/styleProps';
+import { type PressableProps } from '../system/Pressable';
+import type { ControlBaseProps } from './Control';
+export type CheckboxCellBaseProps<T extends string> = Omit<
+  PressableProps<'label'>,
+  'title' | 'onChange'
+> &
+  Omit<
+    ControlBaseProps<T>,
+    'onChange' | 'title' | 'children' | 'iconStyle' | 'labelStyle' | 'checked'
+  > & {
+    checked?: boolean;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    onChange?: (inputChangeEvent: React.ChangeEvent<HTMLInputElement>) => void;
+    columnGap?: ResponsiveProp<ThemeVars.Space>;
+    rowGap?: ResponsiveProp<ThemeVars.Space>;
+    /** Custom ID for the title element. If not provided, a unique ID will be generated. */
+    titleId?: string;
+    /** Custom ID for the description element. If not provided, a unique ID will be generated. */
+    descriptionId?: string;
+  };
+export type CheckboxCellProps<T extends string> = CheckboxCellBaseProps<T> & {
+  classNames?: {
+    root?: string;
+    checkboxContainer?: string;
+    title?: string;
+    description?: string;
+    contentContainer?: string;
+  };
+  styles?: {
+    root?: CSSProperties;
+    checkboxContainer?: CSSProperties;
+    title?: CSSProperties;
+    description?: CSSProperties;
+    contentContainer?: CSSProperties;
+  };
+};
+declare const CheckboxCellWithRef: <T extends string>(
+  props: CheckboxCellProps<T> & {
+    ref?: React.Ref<HTMLLabelElement>;
+  },
+) => React.ReactElement;
+export declare const CheckboxCell: typeof CheckboxCellWithRef &
+  React.MemoExoticComponent<typeof CheckboxCellWithRef>;
+export {};
+//# sourceMappingURL=CheckboxCell.d.ts.map

package/dts/controls/CheckboxCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCell.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAoC,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CACxD,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,UAAU,CACrB,GACC,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACnB,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3E,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzC,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,qBAAqB,CAAC,CAAC,CAAC,GAAG;IAC3E,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,aAAa,CAAC;QACrB,iBAAiB,CAAC,EAAE,aAAa,CAAC;QAClC,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,WAAW,CAAC,EAAE,aAAa,CAAC;QAC5B,gBAAgB,CAAC,EAAE,aAAa,CAAC;KAClC,CAAC;CACH,CAAC;AASF,QAAA,MAAM,mBAAmB,EAmHnB,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dts/controls/CheckboxGroup.d.ts

@@ -0,0 +1,60 @@
+import React, { type FieldsetHTMLAttributes } from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import type { FilteredHTMLAttributes } from '../types';
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ *
+ * @example
+ * // Instead of:
+ * <CheckboxGroup selectedValues={new Set(['value1'])} onChange={onChange}>
+ *   <Checkbox value="value1">Option 1</Checkbox>
+ * </CheckboxGroup>
+ *
+ * // Use:
+ * <ControlGroup
+ *   role="group"
+ *   ControlComponent={Checkbox}
+ *   options={[{ value: 'value1', children: 'Option 1' }]}
+ *   value={['value1']}
+ *   onChange={onChange}xw
+ * />
+ */
+export type CheckboxGroupBaseProps<T extends string | number> = FilteredHTMLAttributes<
+  FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  'onChange'
+> &
+  SharedProps & {
+    /** Checkbox elements that are part of the checkbox group. */
+    children: React.ReactElement[];
+    /** Set a label summary for the group of checkboxes. */
+    label?: React.ReactNode;
+    /** Checkbox options that are checked. */
+    selectedValues: Set<T>;
+    className?: string;
+    /** Handle change event when pressing on a checkbox option. */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    style?: React.CSSProperties;
+  };
+/**
+ * @deprecated CheckboxGroup is deprecated. Use ControlGroup with role="group" instead.
+ */
+export type CheckboxGroupProps<T extends string> = CheckboxGroupBaseProps<T>;
+declare const CheckboxGroupWithRef: React.ForwardRefExoticComponent<
+  FilteredHTMLAttributes<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> &
+    SharedProps & {
+      /** Checkbox elements that are part of the checkbox group. */
+      children: React.ReactElement[];
+      /** Set a label summary for the group of checkboxes. */
+      label?: React.ReactNode;
+      /** Checkbox options that are checked. */
+      selectedValues: Set<string>;
+      className?: string;
+      /** Handle change event when pressing on a checkbox option. */
+      onChange?: React.ChangeEventHandler<HTMLInputElement>;
+      style?: React.CSSProperties;
+    } & React.RefAttributes<HTMLFieldSetElement>
+>;
+export declare const CheckboxGroup: typeof CheckboxGroupWithRef &
+  React.MemoExoticComponent<typeof CheckboxGroupWithRef>;
+export {};
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dts/controls/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/controls/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,sBAAsB,EAK5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAYvD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,sBAAsB,CACpF,sBAAsB,CAAC,mBAAmB,CAAC,EAC3C,UAAU,CACX,GACC,WAAW,GAAG;IACZ,6DAA6D;IAC7D,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yCAAyC;IACzC,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAG7E,QAAA,MAAM,oBAAoB;IAlBtB,6DAA6D;cACnD,KAAK,CAAC,YAAY,EAAE;IAC9B,uDAAuD;YAC/C,KAAK,CAAC,SAAS;IACvB,yCAAyC;;gBAE7B,MAAM;IAClB,8DAA8D;eACnD,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC;YAC7C,KAAK,CAAC,aAAa;6CAiF7B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAiC,OAAO,oBAAoB,GACpF,KAAK,CAAC,mBAAmB,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dts/controls/Control.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import { type InteractableBaseProps } from '../system/Interactable';
+import type { FilteredHTMLAttributes } from '../types';
+export type ControlBaseProps<T extends string> = FilteredHTMLAttributes<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'color'
+> &
+  SharedProps &
+  Partial<
+    Pick<
+      InteractableBaseProps,
+      'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'color'
+    >
+  > & {
+    /** Label for the control option. */
+    children?: React.ReactNode;
+    /** Set the control to selected/on. */
+    checked?: boolean;
+    /** Disable user interaction. */
+    disabled?: boolean;
+    /** Set the control to ready-only. Similar effect as disabled. */
+    readOnly?: boolean;
+    /** Value of the option. Useful for multiple choice. */
+    value?: T;
+    /** Accessibility label describing the element. */
+    accessibilityLabel?: string;
+    /** Enable indeterminate state. Useful when you want to indicate that sub-items of a control are partially filled. */
+    indeterminate?: boolean;
+    /** Style for the icon element */
+    iconStyle?: React.CSSProperties;
+    /** Style for the label element */
+    labelStyle?: React.CSSProperties;
+  };
+export type ControlProps<T extends string> = ControlBaseProps<T> & {
+  label?: React.ReactNode;
+  children: React.ReactNode;
+};
+declare const ControlWithRef: <T extends string>(
+  props: ControlProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+  },
+) => React.ReactElement;
+export declare const Control: typeof ControlWithRef &
+  React.MemoExoticComponent<typeof ControlWithRef>;
+export {};
+//# sourceMappingURL=Control.d.ts.map

package/dts/controls/Control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Control.d.ts","sourceRoot":"","sources":["../../src/controls/Control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AA2CvD,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,sBAAsB,CACrE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,OAAO,CAClB,GACC,WAAW,GACX,OAAO,CACL,IAAI,CACF,qBAAqB,EACrB,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,OAAO,CACxE,CACF,GAAG;IACF,oCAAoC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,kCAAkC;IAClC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEJ,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,cAAc,EAoHd,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC3D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,OAAO,EAA2B,OAAO,cAAc,GAClE,KAAK,CAAC,mBAAmB,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dts/controls/ControlGroup.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import { type BoxProps } from '../layout';
+export type ControlGroupOption<P> = Omit<P, 'onChange' | 'checked' | 'value'>;
+export type ControlGroupProps<
+  T extends string,
+  P extends {
+    value?: T;
+  },
+> = Omit<BoxProps<'div'>, 'children' | 'onChange' | 'as'> &
+  SharedProps & {
+    /** The control component to render for each option. */
+    ControlComponent: React.ComponentType<P>;
+    /** Control options for the group. */
+    options: (ControlGroupOption<P> & {
+      value: T;
+    })[];
+    /** Set a label for the group. */
+    label?: React.ReactNode;
+    /** Current selected value(s). Use a string for single-select (e.g., RadioGroup) and an array of strings for multi-select (e.g., CheckboxGroup). */
+    value: T | T[];
+    /** Handle change events. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** The role for the group. Use 'radiogroup' for radio buttons, 'group' for other controls. */
+    role?: 'group' | 'radiogroup';
+    /** The direction of the group. */
+    direction?: 'horizontal' | 'vertical';
+    /** The name of the group. */
+    name?: string;
+  };
+declare const ControlGroupWithRef: <
+  T extends string,
+  P extends {
+    value?: T;
+  },
+>(
+  props: ControlGroupProps<T, P> & {
+    ref?: React.Ref<HTMLDivElement>;
+  },
+) => React.ReactElement;
+export declare const ControlGroup: typeof ControlGroupWithRef &
+  React.MemoExoticComponent<typeof ControlGroupWithRef>;
+export {};
+//# sourceMappingURL=ControlGroup.d.ts.map

package/dts/controls/ControlGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.d.ts","sourceRoot":"","sources":["../../src/controls/ControlGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAW/C,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,CAAC,CAAA;CAAE,IAAI,IAAI,CAC7E,QAAQ,CAAC,KAAK,CAAC,EACf,UAAU,GAAG,UAAU,GAAG,IAAI,CAC/B,GACC,WAAW,GAAG;IACZ,uDAAuD;IACvD,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACzC,qCAAqC;IACrC,OAAO,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IAClD,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mJAAmJ;IACnJ,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,8FAA8F;IAC9F,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC9B,kCAAkC;IAClC,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,QAAA,MAAM,mBAAmB,EAyEnB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS;IAAE,KAAK,CAAC,EAAE,CAAC,CAAA;CAAE,EAC9C,KAAK,EAAE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAC/B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,KACE,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,YAAY,EAAgC,OAAO,mBAAmB,GACjF,KAAK,CAAC,mBAAmB,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dts/controls/HelperText.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type TextDefaultElement, type TextProps } from '../typography/Text';
+export type HelperTextProps = {
+  /** Color of helper text. negative color will render an icon */
+  color?: ThemeVars.Color;
+  /** Used to associate the helper text with an input */
+  id?: string;
+  /** Accessibility label for the error icon */
+  errorIconAccessibilityLabel?: string;
+  /** Test ID for the error icon */
+  errorIconTestID?: string;
+} & TextProps<TextDefaultElement>;
+export declare const HelperText: React.NamedExoticComponent<HelperTextProps>;
+//# sourceMappingURL=HelperText.d.ts.map

package/dts/controls/HelperText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelperText.d.ts","sourceRoot":"","sources":["../../src/controls/HelperText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,EAAQ,KAAK,kBAAkB,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,MAAM,eAAe,GAAG;IAC5B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,sDAAsD;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAC;AAOlC,eAAO,MAAM,UAAU,6CAoCrB,CAAC"}

package/dts/controls/InputIcon.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { IconProps } from '../icons/Icon';
+export type InputIconProps = {
+  /**
+   * If set to true, when parent input is focused, the icon will match the color of the focus state
+   * @default false
+   * */
+  disableInheritFocusStyle?: boolean;
+} & Omit<IconProps, 'size'> &
+  SharedProps;
+export declare const variantColorMap: Record<InputVariant, ThemeVars.Color>;
+export declare const InputIcon: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<Omit<InputIconProps, 'ref'> & React.RefAttributes<HTMLDivElement>>
+>;
+//# sourceMappingURL=InputIcon.d.ts.map

package/dts/controls/InputIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputIcon.d.ts","sourceRoot":"","sources":["../../src/controls/InputIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAM/C,MAAM,MAAM,cAAc,GAAG;IAC3B;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GACzB,WAAW,CAAC;AAEd,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,CAOjE,CAAC;AAEF,eAAO,MAAM,SAAS,+HAqBrB,CAAC"}

package/dts/controls/InputIconButton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { IconButtonVariant, InputVariant } from '@coinbase/cds-common/types';
+import { type IconButtonDefaultElement, type IconButtonProps } from '../buttons/IconButton';
+export declare const variantTransformMap: Record<InputVariant, IconButtonVariant>;
+export type InputIconButtonProps = IconButtonProps<IconButtonDefaultElement> & {
+  /**
+   * If set to true, when parent input is focused, the icon will match the color of the focus state
+   * @default false
+   * */
+  disableInheritFocusStyle?: boolean;
+};
+export declare const InputIconButton: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<InputIconButtonProps, 'ref'> & React.RefAttributes<HTMLButtonElement>
+  >
+>;
+//# sourceMappingURL=InputIconButton.d.ts.map

package/dts/controls/InputIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputIconButton.d.ts","sourceRoot":"","sources":["../../src/controls/InputIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAElF,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,eAAe,EACrB,MAAM,uBAAuB,CAAC;AAK/B,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAOvE,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAC,wBAAwB,CAAC,GAAG;IAC7E;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe,wIAwB3B,CAAC"}

package/dts/controls/InputLabel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type TextProps } from '../typography/Text';
+export type InputLabelProps = TextProps<'label'>;
+export declare const InputLabel: React.NamedExoticComponent<InputLabelProps>;
+//# sourceMappingURL=InputLabel.d.ts.map

package/dts/controls/InputLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.d.ts","sourceRoot":"","sources":["../../src/controls/InputLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,UAAU,6CAgBrB,CAAC"}

package/dts/controls/InputStack.d.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { InputVariant } from '@coinbase/cds-common/types/InputBaseProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import { type BoxBaseProps, type BoxDefaultElement, type BoxProps } from '../layout/Box';
+export type InputStackBaseProps = SharedProps & {
+  /** Width of the border.
+   * @default 100
+   */
+  borderWidth?: ThemeVars.BorderWidth;
+  /**
+   * Determines the sentiment of the input. Because
+   * we allow startContent and endContent to be custom ReactNode,
+   * the content placed inside these slots will not change colors according
+   * to the variant. You will have to add that yourself
+   * @default foregroundMuted
+   */
+  variant?: InputVariant;
+  /**
+   * Width of input as a percentage string.
+   * @default 100%
+   * */
+  width?: BoxBaseProps['width'];
+  /**
+   * Height of input
+   */
+  height?: BoxBaseProps['height'];
+  /**
+   * Toggles input interactability and opacity
+   * @default false
+   */
+  disabled?: boolean;
+  /** Prepends custom content to the start. Content is not part of input */
+  prependNode?: React.ReactNode;
+  /** Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component */
+  startNode?: React.ReactNode;
+  /** Appends custom content to the end. Content is not part of input */
+  appendNode?: React.ReactNode;
+  /** Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component */
+  endNode?: React.ReactNode;
+  /** Editable area of the Input */
+  inputNode: React.ReactNode;
+  /** Text shown below input. Used for when label is not enough to indicate what this input does */
+  helperTextNode?: React.ReactNode;
+  /** A message indicating the purpose of this input */
+  labelNode?: React.ReactNode;
+  /** This should only be used when focused styles need to be persisted */
+  focused?: boolean;
+  /**
+   * Leverage one of the borderRadius styles we offer to round the corners of the input.
+   * @default 200
+   */
+  borderRadius?: BoxBaseProps['borderRadius'];
+  /**
+   * Disable default focus styles
+   * @default false
+   */
+  disableFocusedStyle?: boolean;
+  /**
+   * Enable Color Surge motion
+   */
+  enableColorSurge?: boolean;
+  /**
+   * The variant of the label. Only used when compact is not true.
+   * @default 'outside'
+   */
+  labelVariant?: 'inside' | 'outside';
+};
+export type InputStackProps = Omit<
+  BoxProps<BoxDefaultElement>,
+  'width' | 'height' | 'borderRadius'
+> &
+  InputStackBaseProps;
+export declare const InputStack: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<Omit<InputStackProps, 'ref'> & React.RefAttributes<HTMLElement>>
+>;
+//# sourceMappingURL=InputStack.d.ts.map

package/dts/controls/InputStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputStack.d.ts","sourceRoot":"","sources":["../../src/controls/InputStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAIjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAyDzF,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;IACpC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;SAGK;IACL,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,uHAAuH;IACvH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mHAAmH;IACnH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iGAAiG;IACjG,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,wEAAwE;IACxE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,QAAQ,CAAC,iBAAiB,CAAC,EAC3B,OAAO,GAAG,QAAQ,GAAG,cAAc,CACpC,GACC,mBAAmB,CAAC;AAEtB,eAAO,MAAM,UAAU,6HA8HtB,CAAC"}

package/dts/controls/NativeInput.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { TextAlignProps } from '@coinbase/cds-common/types/TextBaseProps';
+export type NativeInputProps = {
+  compact?: boolean;
+  /** Custom container spacing if needed. This will add to the existing spacing */
+  containerSpacing?: string;
+  /**
+   * Text Align Input
+   * @default start
+   * */
+  align?: TextAlignProps['align'];
+  /**
+   * Callback fired when pressed/clicked
+   */
+  onClick?: React.MouseEventHandler;
+} & SharedProps &
+  Pick<
+    SharedAccessibilityProps,
+    'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
+  > &
+  React.InputHTMLAttributes<HTMLInputElement>;
+export declare const NativeInput: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    {
+      compact?: boolean;
+      /** Custom container spacing if needed. This will add to the existing spacing */
+      containerSpacing?: string;
+      /**
+       * Text Align Input
+       * @default start
+       * */
+      align?: TextAlignProps['align'];
+      /**
+       * Callback fired when pressed/clicked
+       */
+      onClick?: React.MouseEventHandler;
+    } & SharedProps &
+      Pick<
+        SharedAccessibilityProps,
+        'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'
+      > &
+      React.InputHTMLAttributes<HTMLInputElement> &
+      React.RefAttributes<HTMLInputElement>
+  >
+>;
+//# sourceMappingURL=NativeInput.d.ts.map

package/dts/controls/NativeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeInput.d.ts","sourceRoot":"","sources":["../../src/controls/NativeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAiF/E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;SAGK;IACL,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAE9C,eAAO,MAAM,WAAW;cAnBZ,OAAO;IACjB,gFAAgF;uBAC7D,MAAM;IACzB;;;SAGK;YACG,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;cACO,KAAK,CAAC,iBAAiB;gNA4DlC,CAAC"}

package/dts/controls/NativeTextArea.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+import type { BoxProps } from '../layout/Box';
+import type { TextInputBaseProps } from './TextInput';
+export type NativeTextAreaBaseProp = {
+  /** Custom container spacing if needed. This will add to the existing spacing */
+  containerSpacing?: string;
+  /**
+   * Callback fired when pressed/clicked
+   */
+  onClick?: React.MouseEventHandler;
+} & SharedProps &
+  Pick<TextInputBaseProps, 'compact'>;
+export type NativeTextAreaProp = NativeTextAreaBaseProp & BoxProps<'textarea'>;
+export declare const NativeTextArea: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    Omit<NativeTextAreaProp, 'ref'> & React.RefAttributes<HTMLTextAreaElement>
+  >
+>;
+//# sourceMappingURL=NativeTextArea.d.ts.map

package/dts/controls/NativeTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTextArea.d.ts","sourceRoot":"","sources":["../../src/controls/NativeTextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAsCtD,MAAM,MAAM,sBAAsB,GAAG;IACnC,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;CACnC,GAAG,WAAW,GACb,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEtC,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,wIAqC1B,CAAC"}

package/dts/controls/Radio.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type ControlBaseProps } from './Control';
+export type RadioProps<T extends string> = ControlBaseProps<T> & {
+  /** Sets the checked/active color of the control.
+   * @default bgPrimary
+   */
+  controlColor?: ThemeVars.Color;
+};
+declare const RadioWithRef: <T extends string>(
+  props: RadioProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+  },
+) => React.ReactElement;
+export declare const Radio: typeof RadioWithRef & React.MemoExoticComponent<typeof RadioWithRef>;
+export {};
+//# sourceMappingURL=Radio.d.ts.map

package/dts/controls/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAcjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAuC3D,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAC/D;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,YAAY,EA2CZ,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACzD,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,KAAK,EAAyB,OAAO,YAAY,GAC5D,KAAK,CAAC,mBAAmB,CAAC,OAAO,YAAY,CAAC,CAAC"}

package/dts/controls/RadioCell.d.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties } from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { ResponsiveProp } from '../styles/styleProps';
+import { type PressableProps } from '../system';
+import type { ControlBaseProps } from './Control';
+export type RadioCellBaseProps<T extends string> = Omit<
+  PressableProps<'label'>,
+  'title' | 'onChange'
+> &
+  Omit<
+    ControlBaseProps<T>,
+    'onChange' | 'title' | 'children' | 'iconStyle' | 'labelStyle' | 'checked'
+  > & {
+    checked?: boolean;
+    title: React.ReactNode;
+    onChange?: (inputChangeEvent: React.ChangeEvent<HTMLInputElement>) => void;
+    description?: React.ReactNode;
+    columnGap?: ResponsiveProp<ThemeVars.Space>;
+    rowGap?: ResponsiveProp<ThemeVars.Space>;
+    /** Custom ID for the title element. If not provided, a unique ID will be generated. */
+    titleId?: string;
+    /** Custom ID for the description element. If not provided, a unique ID will be generated. */
+    descriptionId?: string;
+  };
+export type RadioCellProps<T extends string> = RadioCellBaseProps<T> & {
+  classNames?: {
+    root?: string;
+    radioContainer?: string;
+    title?: string;
+    description?: string;
+    contentContainer?: string;
+  };
+  styles?: {
+    root?: CSSProperties;
+    radioContainer?: CSSProperties;
+    title?: CSSProperties;
+    description?: CSSProperties;
+    contentContainer?: CSSProperties;
+  };
+};
+declare const RadioCellWithRef: <T extends string>(
+  props: RadioCellProps<T> & {
+    ref?: React.Ref<HTMLLabelElement>;
+  },
+) => React.ReactElement;
+export declare const RadioCell: typeof RadioCellWithRef &
+  React.MemoExoticComponent<typeof RadioCellWithRef>;
+export {};
+//# sourceMappingURL=RadioCell.d.ts.map

package/dts/controls/RadioCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCell.d.ts","sourceRoot":"","sources":["../../src/controls/RadioCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAoC,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAKjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAG3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAIlD,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CACrD,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,UAAU,CACrB,GACC,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACnB,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAC3E,GAAG;IACF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACzC,uFAAuF;IACvF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6FAA6F;IAC7F,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEJ,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B,CAAC;IACF,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,aAAa,CAAC;QACrB,cAAc,CAAC,EAAE,aAAa,CAAC;QAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;QACtB,WAAW,CAAC,EAAE,aAAa,CAAC;QAC5B,gBAAgB,CAAC,EAAE,aAAa,CAAC;KAClC,CAAC;CACH,CAAC;AASF,QAAA,MAAM,gBAAgB,EAiHhB,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,EAA6B,OAAO,gBAAgB,GACxE,KAAK,CAAC,mBAAmB,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dts/controls/RadioGroup.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+import type { SharedAccessibilityProps, SharedProps, ThemeVars } from '@coinbase/cds-common';
+import type { BoxBaseProps } from '../layout';
+import type { GroupBaseProps } from '../layout/Group';
+import type { FilteredHTMLAttributes } from '../types';
+import { Radio, type RadioProps } from './Radio';
+import { useHandleRadioSelect } from './useHandleRadioSelect';
+export { Radio, type RadioProps, useHandleRadioSelect };
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ *
+ * @example
+ * // Instead of:
+ * <RadioGroup options={{ value1: 'Label 1' }} value={value} onChange={onChange} name="radio" />
+ *
+ * // Use:
+ * <ControlGroup
+ *   role="radiogroup"
+ *   ControlComponent={Radio}
+ *   options={[{ value: 'value1', children: 'Label 1' }]}
+ *   value={value}
+ *   onChange={(e) => onChange(e.target.value)}
+ *   name="radio"
+ * />
+ */
+export type RadioGroupBaseProps<T extends string> = FilteredHTMLAttributes<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onChange' | 'color'
+> &
+  SharedProps &
+  Pick<SharedAccessibilityProps, 'accessibilityLabelledBy'> &
+  Pick<GroupBaseProps<BoxBaseProps>, 'direction' | 'gap'> & {
+    /**
+     * Multiple choice options for the radio group. The object key represents
+     * the radio input value and the object value represents the radio option label.
+     */
+    options: Record<T, string | React.ReactNode>;
+    /** Set a label summary for the group of radios. */
+    label?: React.ReactNode;
+    /** Currently selected value. */
+    value?: T;
+    /** Field name of the multiple choice radio group. */
+    name: string;
+    /** Handle change event when pressing on a radio option. */
+    onChange?: (value: T) => void;
+    /** Sets the checked/active color of each control in the group.
+     * @default bgPrimary
+     */
+    controlColor?: ThemeVars.Color;
+  };
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ */
+export type RadioGroupProps<T extends string> = RadioGroupBaseProps<T>;
+declare const RadioGroupWithRef: <T extends string>(
+  props: RadioGroupProps<T> & {
+    ref?: React.Ref<HTMLInputElement>;
+  },
+) => React.ReactElement;
+/**
+ * @deprecated RadioGroup is deprecated. Use ControlGroup with role="radiogroup" instead.
+ */
+export declare const RadioGroup: typeof RadioGroupWithRef &
+  React.MemoExoticComponent<typeof RadioGroupWithRef>;
+//# sourceMappingURL=RadioGroup.d.ts.map