@coinbase/cds-web 0.0.0 → 8.13.1

package/dts/controls/SearchInput.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+import type { IconName } from '@coinbase/cds-common/types';
+import { type TextInputBaseProps } from './TextInput';
+export declare const scales: {
+    regular: number;
+    compact: number;
+};
+type HTMLElementProps = React.InputHTMLAttributes<HTMLInputElement> & Required<Pick<HTMLInputElement, 'value'>>;
+export type SearchInputBaseProps = Pick<TextInputBaseProps, 'accessibilityHint' | 'accessibilityLabel' | 'accessibilityLabelledBy' | 'compact' | 'disabled' | 'enableColorSurge' | 'helperTextErrorIconAccessibilityLabel' | 'placeholder' | 'testID' | 'testIDMap' | 'width'> & {
+    /**
+     * Callback is fired when a user hits enter on the keyboard. Can obtain the query
+     * through str parameter
+     */
+    onSearch?: (str: string) => void;
+    /**
+     * hide the start icon
+     * @default false
+     */
+    hideStartIcon?: boolean;
+    /**
+     * Set the start icon. You can only
+     * set it to search | backArrow icon. If
+     * you set this, the icon would not toggle
+     * between search and backArrow depending on
+     * the focus state
+     * @default search
+     */
+    startIcon?: Extract<IconName, 'search' | 'backArrow'>;
+    /**
+     * hide the end icon
+     * @default undefined
+     */
+    hideEndIcon?: boolean;
+    /**
+     * Set the end node
+     * @default undefined
+     */
+    end?: React.ReactNode;
+    /**
+     * Set the a11y label for the clear icon
+     */
+    clearIconAccessibilityLabel?: string | undefined;
+    /**
+     * Set the a11y label for the start icon
+     */
+    startIconAccessibilityLabel?: string | undefined;
+};
+export type SearchInputProps = SearchInputBaseProps & HTMLElementProps & {
+    onClear?: React.MouseEventHandler;
+    onChangeText: (text: string) => void;
+    /**
+     * Callback fired when pressed/clicked
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Adds border to input
+     * @default true
+     */
+    bordered?: boolean;
+};
+export declare const SearchInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<TextInputBaseProps, "width" | "disabled" | "placeholder" | "testID" | "compact" | "accessibilityLabel" | "accessibilityLabelledBy" | "accessibilityHint" | "enableColorSurge" | "testIDMap" | "helperTextErrorIconAccessibilityLabel"> & {
+    /**
+     * Callback is fired when a user hits enter on the keyboard. Can obtain the query
+     * through str parameter
+     */
+    onSearch?: (str: string) => void;
+    /**
+     * hide the start icon
+     * @default false
+     */
+    hideStartIcon?: boolean;
+    /**
+     * Set the start icon. You can only
+     * set it to search | backArrow icon. If
+     * you set this, the icon would not toggle
+     * between search and backArrow depending on
+     * the focus state
+     * @default search
+     */
+    startIcon?: Extract<IconName, "search" | "backArrow">;
+    /**
+     * hide the end icon
+     * @default undefined
+     */
+    hideEndIcon?: boolean;
+    /**
+     * Set the end node
+     * @default undefined
+     */
+    end?: React.ReactNode;
+    /**
+     * Set the a11y label for the clear icon
+     */
+    clearIconAccessibilityLabel?: string | undefined;
+    /**
+     * Set the a11y label for the start icon
+     */
+    startIconAccessibilityLabel?: string | undefined;
+} & React.InputHTMLAttributes<HTMLInputElement> & Required<Pick<HTMLInputElement, "value">> & {
+    onClear?: React.MouseEventHandler;
+    onChangeText: (text: string) => void;
+    /**
+     * Callback fired when pressed/clicked
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Adds border to input
+     * @default true
+     */
+    bordered?: boolean;
+} & React.RefAttributes<HTMLInputElement>>>;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/controls/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAa,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAUF,KAAK,gBAAgB,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GACjE,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,kBAAkB,EAChB,mBAAmB,GACnB,oBAAoB,GACpB,yBAAyB,GACzB,SAAS,GACT,UAAU,GACV,kBAAkB,GAClB,uCAAuC,GACvC,aAAa,GACb,QAAQ,GACR,WAAW,GACX,OAAO,CACV,GAAG;IACF;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC,CAAC;IACtD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjD;;OAEG;IACH,2BAA2B,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,gBAAgB,GAAG;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEJ,eAAO,MAAM,WAAW;IAtDtB;;;OAGG;eACQ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IAChC;;;OAGG;oBACa,OAAO;IACvB;;;;;;;OAOG;gBACS,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrD;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;UACG,KAAK,CAAC,SAAS;IACrB;;OAEG;kCAC2B,MAAM,GAAG,SAAS;IAChD;;OAEG;kCAC2B,MAAM,GAAG,SAAS;;cAKpC,KAAK,CAAC,iBAAiB;kBACnB,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI;IACpC;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;OAGG;eACQ,OAAO;2CAkGrB,CAAC"}

package/dts/controls/SegmentedControl.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { IconName, IconSize, SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+export type SegmentedControlProps = {
+    /** The selected value */
+    value?: string;
+    /** Expand to 100% of parent width */
+    block?: boolean;
+    /** Callback fired when an option is selected */
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+} & (TextOptionProps | IconOptionProps) & SharedProps;
+export type TextOptions = readonly TextOption[];
+export type IconOptions = readonly IconOption[];
+type BaseOption = {
+    /** The option value */
+    value: string;
+} & Pick<SharedAccessibilityProps, 'accessibilityLabel'>;
+type TextOption = {
+    /** The option label to display in the control */
+    label: string;
+} & BaseOption;
+type TextOptionProps = {
+    type?: 'text';
+    /** The options to render as an array of values and labels */
+    options: TextOptions;
+};
+type IconOption = {
+    /** The option icon to display in the control */
+    label: IconName;
+    /** Whether the icon is active */
+    active?: boolean;
+} & BaseOption;
+type IconOptionProps = {
+    type: 'icon';
+    iconSize: IconSize;
+    /** The options to render as an array of values and IconNames  */
+    options: IconOptions;
+};
+export declare const SegmentedControl: React.MemoExoticComponent<React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLInputElement>>>;
+export {};
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/controls/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,KAAK,EACV,QAAQ,EACR,QAAQ,EACR,wBAAwB,EACxB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AA2IpC,MAAM,MAAM,qBAAqB,GAAG;IAClC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,CAAC,eAAe,GAAG,eAAe,CAAC,GACrC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,SAAS,UAAU,EAAE,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,SAAS,UAAU,EAAE,CAAC;AAEhD,KAAK,UAAU,GAAG;IAChB,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC;AAEzD,KAAK,UAAU,GAAG;IAChB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,UAAU,CAAC;AAEf,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,UAAU,CAAC;AAEf,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,QAAQ,CAAC;IACnB,iEAAiE;IACjE,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAyDF,eAAO,MAAM,gBAAgB,2HAA6C,CAAC"}

package/dts/controls/Select.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { SharedAccessibilityProps, SharedInputProps, SharedProps } from '@coinbase/cds-common/types';
+import type { DropdownProps } from '../dropdown/DropdownProps';
+import type { InputStackBaseProps } from './InputStack';
+export type SelectBaseProps = SharedProps & Omit<SharedInputProps, 'label'> & Pick<InputStackBaseProps, 'disabled' | 'focused' | 'startNode' | 'variant' | 'labelVariant'> & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & Pick<DropdownProps, 'disablePortal' | 'width'> & {
+    children?: React.ReactNode;
+    /** Event handler for when the Select Input trigger is pressed */
+    onClick?: () => void;
+    /** Pass a value that will prepopulate the select input. This will replace the placeholder text. */
+    value?: string;
+    /** Optional label for selected value when using a value/label object model */
+    valueLabel?: string;
+    /** Optional string placed above the input (or within if compact is enabled) to indicate purpose of the input */
+    label?: string;
+    /** Callback that is fired whenever a select option is selected */
+    onChange?: ((newValue: string) => void) | React.Dispatch<React.SetStateAction<string>>;
+};
+export type SelectProps = SelectBaseProps;
+export declare const Select: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & Omit<SharedInputProps, "label"> & Pick<InputStackBaseProps, "disabled" | "variant" | "startNode" | "focused" | "labelVariant"> & Pick<SharedAccessibilityProps, "accessibilityLabel" | "accessibilityLabelledBy" | "accessibilityHint"> & Pick<DropdownProps, "width" | "disablePortal"> & {
+    children?: React.ReactNode;
+    /** Event handler for when the Select Input trigger is pressed */
+    onClick?: () => void;
+    /** Pass a value that will prepopulate the select input. This will replace the placeholder text. */
+    value?: string;
+    /** Optional label for selected value when using a value/label object model */
+    valueLabel?: string;
+    /** Optional string placed above the input (or within if compact is enabled) to indicate purpose of the input */
+    label?: string;
+    /** Callback that is fired whenever a select option is selected */
+    onChange?: ((newValue: string) => void) | React.Dispatch<React.SetStateAction<string>>;
+} & React.RefAttributes<HTMLButtonElement>>>;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/controls/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EACV,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAM/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAIxD,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAC/B,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,cAAc,CAAC,GAC5F,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,IAAI,CAAC,aAAa,EAAE,eAAe,GAAG,OAAO,CAAC,GAAG;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gHAAgH;IAChH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CACxF,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC;AAE1C,eAAO,MAAM,MAAM;eAfJ,KAAK,CAAC,SAAS;IAC1B,iEAAiE;cACvD,MAAM,IAAI;IACpB,mGAAmG;YAC3F,MAAM;IACd,8EAA8E;iBACjE,MAAM;IACnB,gHAAgH;YACxG,MAAM;IACd,kEAAkE;eACvD,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;4CAoHzF,CAAC"}

package/dts/controls/SelectOption.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types';
+import { type CellBaseProps } from '../cells/Cell';
+import type { ListCellBaseProps } from '../cells/ListCell';
+import { type PressableProps } from '../system/Pressable';
+export declare const selectOptionStaticClassName = "cds-select-option";
+export type SelectOptionBaseProps = Omit<CellBaseProps, 'children' | 'selected'> & Pick<PressableProps<'a'>, 'href'> & Pick<ListCellBaseProps, 'title' | 'description' | 'multiline' | 'compact'> & Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
+    onClick?: React.MouseEventHandler;
+    /** Prevent menu from closing when an option is selected */
+    disableCloseOnOptionChange?: boolean;
+    /**
+     * Necessary to control roving tabindex for accessibility
+     * https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
+     * */
+    tabIndex?: number;
+    /** Unique identifier for each option */
+    value: string;
+};
+export type SelectOptionProps = SelectOptionBaseProps;
+export declare const SelectOption: React.MemoExoticComponent<({ title, description, multiline, compact, value, disableCloseOnOptionChange, onClick, tabIndex, accessibilityLabel, testID, disabled, ...props }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=SelectOption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../src/controls/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAG3E,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG3D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrE,eAAO,MAAM,2BAA2B,sBAAsB,CAAC;AA6E/D,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,GAE9E,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GACjC,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,aAAa,GAAG,WAAW,GAAG,SAAS,CAAC,GAC1E,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,GAAG;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,2DAA2D;IAC3D,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;;SAGK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAEtD,eAAO,MAAM,YAAY,+KAcpB,iBAAiB,6CA0ErB,CAAC"}

package/dts/controls/SelectStack.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SharedAccessibilityProps } from '@coinbase/cds-common/types';
+import type { SelectBaseProps } from './Select';
+export type SelectStackProps = {
+    children: React.ReactElement;
+    helperTextErrorIconAccessibilityLabel?: string;
+} & Pick<SelectBaseProps, 'compact' | 'label' | 'disabled' | 'helperText' | 'variant' | 'focused' | 'labelVariant'> & Pick<SharedAccessibilityProps, 'accessibilityLabelId' | 'accessibilityDescriptionId'>;
+export declare const SelectStack: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    children: React.ReactElement;
+    helperTextErrorIconAccessibilityLabel?: string;
+} & Pick<SelectBaseProps, "label" | "disabled" | "compact" | "variant" | "focused" | "labelVariant" | "helperText"> & Pick<SharedAccessibilityProps, "accessibilityLabelId" | "accessibilityDescriptionId"> & React.RefAttributes<HTMLElement>>>;
+//# sourceMappingURL=SelectStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStack.d.ts","sourceRoot":"","sources":["../../src/controls/SelectStack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAO3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,qCAAqC,CAAC,EAAE,MAAM,CAAC;CAChD,GAAG,IAAI,CACN,eAAe,EACf,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CACzF,GACC,IAAI,CAAC,wBAAwB,EAAE,sBAAsB,GAAG,4BAA4B,CAAC,CAAC;AAcxF,eAAO,MAAM,WAAW;cApBZ,KAAK,CAAC,YAAY;4CACY,MAAM;gPA+E/C,CAAC"}

package/dts/controls/SelectTrigger.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SelectBaseProps } from './Select';
+export type SelectTriggerProps = Omit<SelectBaseProps, 'children' | 'focused' | 'width' | 'onChange' | 'onPress'> & {
+    triggerHasFocus: boolean;
+    /** Select Dropdown menu is opened */
+    visible?: boolean;
+    /** Event handler for when the Select Input trigger is pressed */
+    onClick?: () => void;
+};
+export declare const SelectTrigger: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<SelectBaseProps, "width" | "children" | "onChange" | "focused" | "onPress"> & {
+    triggerHasFocus: boolean;
+    /** Select Dropdown menu is opened */
+    visible?: boolean;
+    /** Event handler for when the Select Input trigger is pressed */
+    onClick?: () => void;
+} & React.RefAttributes<HTMLElement>>>;
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../src/controls/SelectTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAOhD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,eAAe,EACf,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAC1D,GAAG;IACF,eAAe,EAAE,OAAO,CAAC;IACzB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAeF,eAAO,MAAM,aAAa;qBApBP,OAAO;IACxB,qCAAqC;cAC3B,OAAO;IACjB,iEAAiE;cACvD,MAAM,IAAI;sCAwIrB,CAAC"}

package/dts/controls/Switch.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type ControlBaseProps } from './Control';
+export type SwitchProps = ControlBaseProps<string> & {
+    /** Sets the checked/active color of the control.
+     * @default bgPrimary
+     */
+    controlColor?: ThemeVars.Color;
+};
+export declare const Switch: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("../types").FilteredHTMLAttributes<React.InputHTMLAttributes<HTMLInputElement>, "color" | "value"> & import("@coinbase/cds-common").SharedProps & Partial<Pick<import("../system").InteractableBaseProps, "borderWidth" | "borderRadius" | "color" | "background" | "borderColor">> & {
+    children?: React.ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    value?: string | undefined;
+    accessibilityLabel?: string;
+    indeterminate?: boolean;
+    iconStyle?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+} & {
+    /** Sets the checked/active color of the control.
+     * @default bgPrimary
+     */
+    controlColor?: ThemeVars.Color;
+} & React.RefAttributes<HTMLInputElement>>>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/controls/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AASjE,OAAO,EAAW,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AA2B3D,MAAM,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG;IACnD;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAChC,CAAC;AAmFF,eAAO,MAAM,MAAM;;;;;;;;;;;IAvFjB;;OAEG;mBACY,SAAS,CAAC,KAAK;2CAoFS,CAAC"}

package/dts/controls/TextInput.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import type { SharedInputProps } from '@coinbase/cds-common/types/InputBaseProps';
+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';
+import type { InputStackBaseProps } from './InputStack';
+export type TextInputBaseProps = {
+    /**
+     * Callback fired when pressed/clicked
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Customize the element which the input area will be rendered as. Adds ability to render the input area
+     * as a `<textarea />`, `<input />` etc...
+     * By default, the input area will be rendered as an `<input />`.
+     * @danger Use this at your own risk, and don't use unless ABSOLUTELY NECESSARY. You may see weird UI when focusing etc..
+     * Our default input handles all of the UI/Accessibility needs for your out of the box, but inputNode will not include
+     * those.
+     * */
+    inputNode?: React.ReactElement;
+    /**
+     * Adds border to input
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Aligns text inside input and helperText
+     * @default start
+     */
+    align?: TextAlignProps['align'];
+    /**
+     * Adds suffix text to the end of input
+     */
+    suffix?: string;
+    /** Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component */
+    start?: React.ReactNode;
+    /** Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component */
+    end?: React.ReactNode;
+    /**
+     * Add ability to test individual parts of the input
+     */
+    testIDMap?: {
+        start?: string;
+        end?: string;
+        label?: string;
+        helperText?: string;
+    };
+    /**
+     * Accessibility label for helper text error icon when variant='negative'
+     * @default 'error'
+     */
+    helperTextErrorIconAccessibilityLabel?: string;
+} & SharedProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy' | 'accessibilityHint'> & SharedInputProps & Pick<InputStackBaseProps, 'height' | 'variant' | 'width' | 'disabled' | 'borderRadius' | 'enableColorSurge' | 'labelVariant'> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'width' | 'className'>;
+export type TextInputProps = TextInputBaseProps;
+export declare const TextInput: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    /**
+     * Callback fired when pressed/clicked
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Customize the element which the input area will be rendered as. Adds ability to render the input area
+     * as a `<textarea />`, `<input />` etc...
+     * By default, the input area will be rendered as an `<input />`.
+     * @danger Use this at your own risk, and don't use unless ABSOLUTELY NECESSARY. You may see weird UI when focusing etc..
+     * Our default input handles all of the UI/Accessibility needs for your out of the box, but inputNode will not include
+     * those.
+     * */
+    inputNode?: React.ReactElement;
+    /**
+     * Adds border to input
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Aligns text inside input and helperText
+     * @default start
+     */
+    align?: TextAlignProps["align"];
+    /**
+     * Adds suffix text to the end of input
+     */
+    suffix?: string;
+    /** Adds content to the start of the inner input. Refer to diagram for location of startNode in InputStack component */
+    start?: React.ReactNode;
+    /** Adds content to the end of the inner input. Refer to diagram for location of endNode in InputStack component */
+    end?: React.ReactNode;
+    /**
+     * Add ability to test individual parts of the input
+     */
+    testIDMap?: {
+        start?: string;
+        end?: string;
+        label?: string;
+        helperText?: string;
+    };
+    /**
+     * Accessibility label for helper text error icon when variant='negative'
+     * @default 'error'
+     */
+    helperTextErrorIconAccessibilityLabel?: string;
+} & SharedProps & Pick<SharedAccessibilityProps, "accessibilityLabel" | "accessibilityLabelledBy" | "accessibilityHint"> & SharedInputProps & Pick<InputStackBaseProps, "borderRadius" | "height" | "width" | "disabled" | "variant" | "enableColorSurge" | "labelVariant"> & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "width"> & React.RefAttributes<HTMLInputElement>>>;
+//# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/controls/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAgB,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAChG,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;AAU/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AA8CxD,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC;;;;;;;SAOK;IACL,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uHAAuH;IACvH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mHAAmH;IACnH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF;;;OAGG;IACH,qCAAqC,CAAC,EAAE,MAAM,CAAC;CAChD,GAAG,WAAW,GACb,IAAI,CACF,wBAAwB,EACxB,oBAAoB,GAAG,yBAAyB,GAAG,mBAAmB,CACvE,GACD,gBAAgB,GAChB,IAAI,CACF,mBAAmB,EACjB,QAAQ,GACR,SAAS,GACT,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,cAAc,CACjB,GACD,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,CAAC;AAE3E,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAkBhD,eAAO,MAAM,SAAS;IAjFpB;;OAEG;cACO,KAAK,CAAC,iBAAiB;IACjC;;;;;;;SAOK;gBACO,KAAK,CAAC,YAAY;IAC9B;;;OAGG;eACQ,OAAO;IAClB;;;OAGG;YACK,cAAc,CAAC,OAAO,CAAC;IAC/B;;OAEG;aACM,MAAM;IACf,uHAAuH;YAC/G,KAAK,CAAC,SAAS;IACvB,mHAAmH;UAC7G,KAAK,CAAC,SAAS;IACrB;;OAEG;gBACS;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IACD;;;OAGG;4CACqC,MAAM;gYAmQ/C,CAAC"}

package/dts/controls/__figma__/Checkbox.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Checkbox.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/Checkbox.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/CheckboxCell.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CheckboxCell.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxCell.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/CheckboxCell.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/CheckboxGroup.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CheckboxGroup.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/CheckboxGroup.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/NativeTextArea.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NativeTextArea.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTextArea.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/NativeTextArea.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/RadioCell.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioCell.figma.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioCell.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/RadioCell.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/RadioGroup.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=RadioGroup.figma.d.ts.map

package/dts/controls/__figma__/RadioGroup.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/RadioGroup.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/SearchInput.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SearchInput.figma.d.ts.map

package/dts/controls/__figma__/SearchInput.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/SearchInput.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/Select.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Select.figma.d.ts.map

package/dts/controls/__figma__/Select.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/Select.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/SelectOption.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SelectOption.figma.d.ts.map

package/dts/controls/__figma__/SelectOption.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/SelectOption.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/Switch.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Switch.figma.d.ts.map

package/dts/controls/__figma__/Switch.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/Switch.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__figma__/TextInput.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextInput.figma.d.ts.map

package/dts/controls/__figma__/TextInput.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.figma.d.ts","sourceRoot":"","sources":["../../../src/controls/__figma__/TextInput.figma.tsx"],"names":[],"mappings":""}

package/dts/controls/__stories__/AddressForm.d.ts

@@ -0,0 +1,4 @@
+export declare const AddressForm: ({ ...props }: {
+    [x: string]: any;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddressForm.d.ts.map

package/dts/controls/__stories__/AddressForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressForm.d.ts","sourceRoot":"","sources":["../../../src/controls/__stories__/AddressForm.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,GAAI;;CAAY,4CAoCvC,CAAC"}

package/dts/controls/__stories__/Checkbox.stories.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+export declare const Normal: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomColor: () => import("react/jsx-runtime").JSX.Element;
+export declare const Indeterminate: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkNormal: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoLabel: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const DisabledUnselected: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReadOnlyUnselected: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        /**
+         * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
+         * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
+         */
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const ReadOnlySelected: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        /**
+         * Color contrast ratio doesn't need to meet 4.5:1, as the element is disabled
+         * @link https://dequeuniversity.com/rules/axe/4.3/color-contrast
+         */
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export declare const MultiLineLabel: () => import("react/jsx-runtime").JSX.Element;
+export declare const Group: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomLayoutCheckboxGroup: () => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    title: string;
+    component: (<T extends string>(props: import("..").CheckboxProps<T> & {
+        ref?: React.Ref<HTMLInputElement>;
+    }) => React.ReactElement) & React.NamedExoticComponent<import("../../types").FilteredHTMLAttributes<React.InputHTMLAttributes<HTMLInputElement>, "color" | "value"> & import("@coinbase/cds-common").SharedProps & Partial<Pick<import("../../system").InteractableBaseProps, "borderWidth" | "borderRadius" | "color" | "background" | "borderColor">> & {
+        children?: React.ReactNode;
+        checked?: boolean;
+        disabled?: boolean;
+        readOnly?: boolean;
+        value?: string | undefined;
+        accessibilityLabel?: string;
+        indeterminate?: boolean;
+        iconStyle?: React.CSSProperties;
+        labelStyle?: React.CSSProperties;
+    } & {
+        controlColor?: import("@coinbase/cds-common").ThemeVars.Color;
+        borderWidth?: import("@coinbase/cds-common").ThemeVars.BorderWidth;
+    } & {
+        ref?: React.Ref<HTMLInputElement>;
+    }> & {
+        readonly type: <T extends string>(props: import("..").CheckboxProps<T> & {
+            ref?: React.Ref<HTMLInputElement>;
+        }) => React.ReactElement;
+    };
+};
+export default _default;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/controls/__stories__/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,eAAO,MAAM,MAAM,+CAOlB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAqCvB,CAAC;AAEF,eAAO,MAAM,aAAa,+CAWzB,CAAC;AASF,eAAO,MAAM,UAAU,+CAYtB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAGnB,CAAC;AAKF,eAAO,MAAM,kBAAkB,+CAI9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;QAE7B;;;WAGG;;;;;;;;;;CALqF,CAAC;AAS3F,eAAO,MAAM,gBAAgB;;;QAM3B;;;WAGG;;;;;;;;;;CALJ,CAAC;AASF,eAAO,MAAM,cAAc,+CAM1B,CAAC;AAYF,eAAO,MAAM,KAAK,+CAqBjB,CAAC;AAQF,eAAO,MAAM,yBAAyB,+CAqBrC,CAAC;;;;WA1EM,CAAC;;;;;;;;;;;;;;;;;;eAAD,CAAC;;;;AA4ET,wBAGE"}