@metamask/design-system-react-native 0.6.0 → 0.8.0

package/dist/components/Input/Input.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const design_tokens_1 = require("@metamask/design-tokens");
+const react_1 = require("react");
+const react_native_1 = require("react-native/index.js");
+const types_1 = require("../../types/index.cjs");
+const Text_constants_1 = require("../Text/Text.constants.cjs");
+exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(autoFocus);
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const theme = (0, design_system_twrnc_preset_1.useTheme)();
+    const placeholderTextColor = (0, react_1.useMemo)(() => theme === design_system_twrnc_preset_1.Theme.Light
+        ? design_tokens_1.lightTheme.colors.text.alternative
+        : design_tokens_1.darkTheme.colors.text.alternative, [theme]);
+    const finalFontWeight = Text_constants_1.MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
+    const fontSuffix = Text_constants_1.TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];
+    const fontClass = `font-${types_1.FontFamily.Default}${fontSuffix}`;
+    const inputStyle = (0, react_1.useMemo)(() => tw.style(`text-${textVariant}`, fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+        !isDisabled &&
+        isFocused &&
+        'border-primary-default', twClassName), [
+        textVariant,
+        fontClass,
+        isStateStylesDisabled,
+        isDisabled,
+        isFocused,
+        twClassName,
+        tw,
+    ]);
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onBlurHandler = (0, react_1.useCallback)((e) => {
+        if (!isDisabled) {
+            setIsFocused(false);
+            onBlur?.(e);
+        }
+    }, [isDisabled, onBlur]);
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onFocusHandler = (0, react_1.useCallback)((e) => {
+        if (!isDisabled) {
+            setIsFocused(true);
+            onFocus?.(e);
+        }
+    }, [isDisabled, onFocus]);
+    const resolvedStyle = [
+        inputStyle,
+        react_native_1.Platform.OS === 'ios' && { textAlignVertical: 'center' },
+        style,
+    ].filter(Boolean);
+    return (<react_native_1.TextInput ref={ref} placeholderTextColor={placeholderTextColor} {...props} style={resolvedStyle} editable={!isDisabled && !isReadonly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);
+});
+//# sourceMappingURL=Input.cjs.map

package/dist/components/Input/Input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          `text-${textVariant}`,\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        textVariant,\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const resolvedStyle = [\n      inputStyle,\n      Platform.OS === 'ios' && { textAlignVertical: 'center' as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}

package/dist/components/Input/Input.d.cts

@@ -0,0 +1,10 @@
+import { TextInput } from "react-native/index.js";
+import { TextVariant } from "../../types/index.cjs";
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "editable"> & {
+    textVariant?: TextVariant | undefined;
+    isDisabled?: boolean | undefined;
+    isReadonly?: boolean | undefined;
+    isStateStylesDisabled?: boolean | undefined;
+    twClassName?: string | undefined;
+} & import("react").RefAttributes<TextInput>>;
+//# sourceMappingURL=Input.d.cts.map

package/dist/components/Input/Input.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAQtD,eAAO,MAAM,KAAK;;;;;;6CAoGjB,CAAC"}

package/dist/components/Input/Input.d.mts

@@ -0,0 +1,10 @@
+import { TextInput } from "react-native/index.js";
+import { TextVariant } from "../../types/index.mjs";
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react-native").TextInputProps, "editable"> & {
+    textVariant?: TextVariant | undefined;
+    isDisabled?: boolean | undefined;
+    isReadonly?: boolean | undefined;
+    isStateStylesDisabled?: boolean | undefined;
+    twClassName?: string | undefined;
+} & import("react").RefAttributes<TextInput>>;
+//# sourceMappingURL=Input.d.mts.map

package/dist/components/Input/Input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,SAAS,EAAE,8BAAqB;AAEnD,OAAO,EAAc,WAAW,EAAE,8BAAoB;AAQtD,eAAO,MAAM,KAAK;;;;;;6CAoGjB,CAAC"}

package/dist/components/Input/Input.mjs

@@ -0,0 +1,50 @@
+import { Theme, useTailwind, useTheme } from "@metamask/design-system-twrnc-preset";
+import { darkTheme, lightTheme } from "@metamask/design-tokens";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { Platform, TextInput } from "react-native/index.js";
+import { FontFamily, TextVariant } from "../../types/index.mjs";
+import { MAP_TEXT_VARIANT_FONTWEIGHT, TWCLASSMAP_TEXT_FONTWEIGHT } from "../Text/Text.constants.mjs";
+export const Input = forwardRef(({ style, textVariant = TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(autoFocus);
+    const tw = useTailwind();
+    const theme = useTheme();
+    const placeholderTextColor = useMemo(() => theme === Theme.Light
+        ? lightTheme.colors.text.alternative
+        : darkTheme.colors.text.alternative, [theme]);
+    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
+    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];
+    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;
+    const inputStyle = useMemo(() => tw.style(`text-${textVariant}`, fontClass, 'text-default', 'bg-default', 'border', 'border-transparent', !isStateStylesDisabled && isDisabled && 'opacity-50', !isStateStylesDisabled &&
+        !isDisabled &&
+        isFocused &&
+        'border-primary-default', twClassName), [
+        textVariant,
+        fontClass,
+        isStateStylesDisabled,
+        isDisabled,
+        isFocused,
+        twClassName,
+        tw,
+    ]);
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onBlurHandler = useCallback((e) => {
+        if (!isDisabled) {
+            setIsFocused(false);
+            onBlur?.(e);
+        }
+    }, [isDisabled, onBlur]);
+    /* istanbul ignore next: handler body covered by focus/blur tests */
+    const onFocusHandler = useCallback((e) => {
+        if (!isDisabled) {
+            setIsFocused(true);
+            onFocus?.(e);
+        }
+    }, [isDisabled, onFocus]);
+    const resolvedStyle = [
+        inputStyle,
+        Platform.OS === 'ios' && { textAlignVertical: 'center' },
+        style,
+    ].filter(Boolean);
+    return (<TextInput ref={ref} placeholderTextColor={placeholderTextColor} {...props} style={resolvedStyle} editable={!isDisabled && !isReadonly} autoFocus={autoFocus} onBlur={onBlurHandler} onFocus={onFocusHandler}/>);
+});
+//# sourceMappingURL=Input.mjs.map

package/dist/components/Input/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          `text-${textVariant}`,\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        textVariant,\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n\n    const resolvedStyle = [\n      inputStyle,\n      Platform.OS === 'ios' && { textAlignVertical: 'center' as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}

package/dist/components/Input/Input.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Input.types.cjs.map

package/dist/components/Input/Input.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextInputProps } from 'react-native';\n\nimport type { TextVariant } from '../../types';\n\nexport type InputProps = Omit<TextInputProps, 'editable'> & {\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMd\n   */\n  textVariant?: TextVariant;\n  /**\n   * Optional boolean to disable Input.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional boolean to show readonly input.\n   *\n   * @default false\n   */\n  isReadonly?: boolean;\n  /**\n   * Optional boolean to disable state styles.\n   *\n   * @default false\n   */\n  isStateStylesDisabled?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n};\n"]}

package/dist/components/Input/Input.types.d.cts

@@ -0,0 +1,33 @@
+import type { TextInputProps } from "react-native/index.js";
+import type { TextVariant } from "../../types/index.cjs";
+export type InputProps = Omit<TextInputProps, 'editable'> & {
+    /**
+     * Optional enum to select between Typography variants.
+     *
+     * @default BodyMd
+     */
+    textVariant?: TextVariant;
+    /**
+     * Optional boolean to disable Input.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional boolean to show readonly input.
+     *
+     * @default false
+     */
+    isReadonly?: boolean;
+    /**
+     * Optional boolean to disable state styles.
+     *
+     * @default false
+     */
+    isStateStylesDisabled?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=Input.types.d.cts.map

package/dist/components/Input/Input.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAAoB;AAE/C,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/Input/Input.types.d.mts

@@ -0,0 +1,33 @@
+import type { TextInputProps } from "react-native/index.js";
+import type { TextVariant } from "../../types/index.mjs";
+export type InputProps = Omit<TextInputProps, 'editable'> & {
+    /**
+     * Optional enum to select between Typography variants.
+     *
+     * @default BodyMd
+     */
+    textVariant?: TextVariant;
+    /**
+     * Optional boolean to disable Input.
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional boolean to show readonly input.
+     *
+     * @default false
+     */
+    isReadonly?: boolean;
+    /**
+     * Optional boolean to disable state styles.
+     *
+     * @default false
+     */
+    isStateStylesDisabled?: boolean;
+    /**
+     * Optional prop to add twrnc overriding classNames.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=Input.types.d.mts.map

package/dist/components/Input/Input.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,8BAAqB;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAAoB;AAE/C,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/Input/Input.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Input.types.mjs.map

package/dist/components/Input/Input.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextInputProps } from 'react-native';\n\nimport type { TextVariant } from '../../types';\n\nexport type InputProps = Omit<TextInputProps, 'editable'> & {\n  /**\n   * Optional enum to select between Typography variants.\n   *\n   * @default BodyMd\n   */\n  textVariant?: TextVariant;\n  /**\n   * Optional boolean to disable Input.\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Optional boolean to show readonly input.\n   *\n   * @default false\n   */\n  isReadonly?: boolean;\n  /**\n   * Optional boolean to disable state styles.\n   *\n   * @default false\n   */\n  isStateStylesDisabled?: boolean;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n};\n"]}

package/dist/components/Input/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input.cjs");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":";;;AAAA,qCAAgC;AAAvB,8FAAA,KAAK,OAAA","sourcesContent":["export { Input } from './Input';\nexport type { InputProps } from './Input.types';\n"]}

package/dist/components/Input/index.d.cts

@@ -0,0 +1,3 @@
+export { Input } from "./Input.cjs";
+export type { InputProps } from "./Input.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Input/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}

package/dist/components/Input/index.d.mts

@@ -0,0 +1,3 @@
+export { Input } from "./Input.mjs";
+export type { InputProps } from "./Input.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Input/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}

package/dist/components/Input/index.mjs

@@ -0,0 +1,2 @@
+export { Input } from "./Input.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/Input/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB","sourcesContent":["export { Input } from './Input';\nexport type { InputProps } from './Input.types';\n"]}

package/dist/components/Label/Label.cjs

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+const react_1 = __importDefault(require("react"));
+const Text_1 = require("../Text/index.cjs");
+const Label = ({ ...props }) => (<Text_1.Text variant={Text_1.TextVariant.BodyMd} {...props}/>);
+exports.Label = Label;
+//# sourceMappingURL=Label.cjs.map

package/dist/components/Label/Label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.cjs","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4CAA4C;AAIrC,MAAM,KAAK,GAAyB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC3D,CAAC,WAAI,CAAC,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CACjD,CAAC;AAFW,QAAA,KAAK,SAEhB","sourcesContent":["import React from 'react';\n\nimport { Text, TextVariant } from '../Text';\n\nimport type { LabelProps } from './Label.types';\n\nexport const Label: React.FC<LabelProps> = ({ ...props }) => (\n  <Text variant={TextVariant.BodyMd} {...props} />\n);\n"]}

package/dist/components/Label/Label.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { LabelProps } from "./Label.types.cjs";
+export declare const Label: React.FC<LabelProps>;
+//# sourceMappingURL=Label.d.cts.map

package/dist/components/Label/Label.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.cts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAEhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAEtC,CAAC"}

package/dist/components/Label/Label.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { LabelProps } from "./Label.types.mjs";
+export declare const Label: React.FC<LabelProps>;
+//# sourceMappingURL=Label.d.mts.map

package/dist/components/Label/Label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.mts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAI1B,OAAO,KAAK,EAAE,UAAU,EAAE,0BAAsB;AAEhD,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAEtC,CAAC"}

package/dist/components/Label/Label.mjs

@@ -0,0 +1,11 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { Text, TextVariant } from "../Text/index.mjs";
+export const Label = ({ ...props }) => (<Text variant={TextVariant.BodyMd} {...props}/>);
+//# sourceMappingURL=Label.mjs.map

package/dist/components/Label/Label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.mjs","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,0BAAgB;AAI5C,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAC3D,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CACjD,CAAC","sourcesContent":["import React from 'react';\n\nimport { Text, TextVariant } from '../Text';\n\nimport type { LabelProps } from './Label.types';\n\nexport const Label: React.FC<LabelProps> = ({ ...props }) => (\n  <Text variant={TextVariant.BodyMd} {...props} />\n);\n"]}

package/dist/components/Label/Label.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Label.types.cjs.map

package/dist/components/Label/Label.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.cjs","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Label component props.\n *\n * Extends TextProps to inherit all text styling and React Native text properties\n * such as testID and accessibilityLabel.\n */\nexport type LabelProps = TextProps;\n"]}

package/dist/components/Label/Label.types.d.cts

@@ -0,0 +1,9 @@
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * Label component props.
+ *
+ * Extends TextProps to inherit all text styling and React Native text properties
+ * such as testID and accessibilityLabel.
+ */
+export type LabelProps = TextProps;
+//# sourceMappingURL=Label.types.d.cts.map

package/dist/components/Label/Label.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.cts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC"}

package/dist/components/Label/Label.types.d.mts

@@ -0,0 +1,9 @@
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * Label component props.
+ *
+ * Extends TextProps to inherit all text styling and React Native text properties
+ * such as testID and accessibilityLabel.
+ */
+export type LabelProps = TextProps;
+//# sourceMappingURL=Label.types.d.mts.map

package/dist/components/Label/Label.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.mts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC"}

package/dist/components/Label/Label.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Label.types.mjs.map

package/dist/components/Label/Label.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.mjs","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Label component props.\n *\n * Extends TextProps to inherit all text styling and React Native text properties\n * such as testID and accessibilityLabel.\n */\nexport type LabelProps = TextProps;\n"]}

package/dist/components/Label/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = void 0;
+var Label_1 = require("./Label.cjs");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.Label; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/Label/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":";;;AAAA,qCAAgC;AAAvB,8FAAA,KAAK,OAAA","sourcesContent":["export { Label } from './Label';\nexport type { LabelProps } from './Label.types';\n"]}

package/dist/components/Label/index.d.cts

@@ -0,0 +1,3 @@
+export { Label } from "./Label.cjs";
+export type { LabelProps } from "./Label.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Label/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}

package/dist/components/Label/index.d.mts

@@ -0,0 +1,3 @@
+export { Label } from "./Label.mjs";
+export type { LabelProps } from "./Label.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/Label/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB;AAChC,YAAY,EAAE,UAAU,EAAE,0BAAsB"}

package/dist/components/Label/index.mjs

@@ -0,0 +1,2 @@
+export { Label } from "./Label.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/Label/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,oBAAgB","sourcesContent":["export { Label } from './Label';\nexport type { LabelProps } from './Label.types';\n"]}

package/dist/components/RadioButton/RadioButton.cjs

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = void 0;
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native/index.js");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+const getRadioButtonBorderClass = (isReadOnly, isDanger, isChecked) => {
+    if (isReadOnly) {
+        return 'border-background-default';
+    }
+    if (isDanger) {
+        return 'border-error-default';
+    }
+    if (isChecked) {
+        return 'border-primary-default';
+    }
+    return 'border-default';
+};
+const getRadioButtonDotClass = (isReadOnly, isDanger) => {
+    if (isReadOnly) {
+        return 'bg-icon-alternative';
+    }
+    if (isDanger) {
+        return 'bg-error-default';
+    }
+    return 'bg-primary-default';
+};
+const RadioButton = ({ onPress, label, labelProps, isChecked = false, isDisabled = false, isReadOnly = false, isDanger = false, touchableOpacityProps, radioButtonContainerProps, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    return (<react_native_1.View {...props} style={[
+            tw.style('flex-row items-center', isDisabled ? 'opacity-50' : 'opacity-100', twClassName),
+            style,
+        ]}>
+      <react_native_1.TouchableOpacity onPress={onPress} disabled={isDisabled || isReadOnly} accessible accessibilityRole="radio" accessibilityState={{
+            checked: isChecked,
+            disabled: isDisabled,
+        }} accessibilityLabel={typeof label === 'string' ? label : undefined} {...touchableOpacityProps} style={[
+            tw.style('flex-row items-center'),
+            touchableOpacityProps?.style,
+        ]}>
+        <react_native_1.View {...radioButtonContainerProps} style={[
+            tw.style('size-5 items-center justify-center rounded-full border-2 bg-default', getRadioButtonBorderClass(isReadOnly, isDanger, isChecked)),
+            radioButtonContainerProps?.style,
+        ]}>
+          {isChecked && (<react_native_1.View style={tw.style('size-3 rounded-full', getRadioButtonDotClass(isReadOnly, isDanger))}/>)}
+        </react_native_1.View>
+        {label ? (<TextOrChildren_1.TextOrChildren textProps={{ ...labelProps, twClassName: 'ml-3' }}>
+            {label}
+          </TextOrChildren_1.TextOrChildren>) : null}
+      </react_native_1.TouchableOpacity>
+    </react_native_1.View>);
+};
+exports.RadioButton = RadioButton;
+//# sourceMappingURL=RadioButton.cjs.map

package/dist/components/RadioButton/RadioButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.cjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAsD;AAEtD,gFAAmE;AAInE,MAAM,yBAAyB,GAAG,CAChC,UAAmB,EACnB,QAAiB,EACjB,SAAkB,EACV,EAAE;IACV,IAAI,UAAU,EAAE;QACd,OAAO,2BAA2B,CAAC;KACpC;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,sBAAsB,CAAC;KAC/B;IACD,IAAI,SAAS,EAAE;QACb,OAAO,wBAAwB,CAAC;KACjC;IACD,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAC7B,UAAmB,EACnB,QAAiB,EACT,EAAE;IACV,IAAI,UAAU,EAAE;QACd,OAAO,qBAAqB,CAAC;KAC9B;IACD,IAAI,QAAQ,EAAE;QACZ,OAAO,kBAAkB,CAAC;KAC3B;IACD,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAEK,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,QAAQ,GAAG,KAAK,EAChB,qBAAqB,EACrB,yBAAyB,EACzB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACS,EAAE,EAAE;IACrB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,mBAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,UAAU,IAAI,UAAU,CAAC,CACnC,UAAU,CACV,iBAAiB,CAAC,OAAO,CACzB,kBAAkB,CAAC,CAAC;YAClB,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC,CACF,kBAAkB,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,uBAAuB,CAAC;YACjC,qBAAqB,EAAE,KAAK;SAC7B,CAAC,CAEF;QAAA,CAAC,mBAAI,CACH,IAAI,yBAAyB,CAAC,CAC9B,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,qEAAqE,EACrE,yBAAyB,CAAC,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC,CAC3D;YACD,yBAAyB,EAAE,KAAK;SACjC,CAAC,CAEF;UAAA,CAAC,SAAS,IAAI,CACZ,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CACb,qBAAqB,EACrB,sBAAsB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAC7C,CAAC,EACF,CACH,CACH;QAAA,EAAE,mBAAI,CACN;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAChE;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,+BAAc,CAAC,CAClB,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,+BAAgB,CACpB;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAvEW,QAAA,WAAW,eAuEtB","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { View, TouchableOpacity } from 'react-native';\n\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { RadioButtonProps } from './RadioButton.types';\n\nconst getRadioButtonBorderClass = (\n  isReadOnly: boolean,\n  isDanger: boolean,\n  isChecked: boolean,\n): string => {\n  if (isReadOnly) {\n    return 'border-background-default';\n  }\n  if (isDanger) {\n    return 'border-error-default';\n  }\n  if (isChecked) {\n    return 'border-primary-default';\n  }\n  return 'border-default';\n};\n\nconst getRadioButtonDotClass = (\n  isReadOnly: boolean,\n  isDanger: boolean,\n): string => {\n  if (isReadOnly) {\n    return 'bg-icon-alternative';\n  }\n  if (isDanger) {\n    return 'bg-error-default';\n  }\n  return 'bg-primary-default';\n};\n\nexport const RadioButton = ({\n  onPress,\n  label,\n  labelProps,\n  isChecked = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isDanger = false,\n  touchableOpacityProps,\n  radioButtonContainerProps,\n  twClassName,\n  style,\n  ...props\n}: RadioButtonProps) => {\n  const tw = useTailwind();\n\n  return (\n    <View\n      {...props}\n      style={[\n        tw.style(\n          'flex-row items-center',\n          isDisabled ? 'opacity-50' : 'opacity-100',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <TouchableOpacity\n        onPress={onPress}\n        disabled={isDisabled || isReadOnly}\n        accessible\n        accessibilityRole=\"radio\"\n        accessibilityState={{\n          checked: isChecked,\n          disabled: isDisabled,\n        }}\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n        {...touchableOpacityProps}\n        style={[\n          tw.style('flex-row items-center'),\n          touchableOpacityProps?.style,\n        ]}\n      >\n        <View\n          {...radioButtonContainerProps}\n          style={[\n            tw.style(\n              'size-5 items-center justify-center rounded-full border-2 bg-default',\n              getRadioButtonBorderClass(isReadOnly, isDanger, isChecked),\n            ),\n            radioButtonContainerProps?.style,\n          ]}\n        >\n          {isChecked && (\n            <View\n              style={tw.style(\n                'size-3 rounded-full',\n                getRadioButtonDotClass(isReadOnly, isDanger),\n              )}\n            />\n          )}\n        </View>\n        {label ? (\n          <TextOrChildren textProps={{ ...labelProps, twClassName: 'ml-3' }}>\n            {label}\n          </TextOrChildren>\n        ) : null}\n      </TouchableOpacity>\n    </View>\n  );\n};\n"]}

package/dist/components/RadioButton/RadioButton.constants.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SAMPLE_RADIOBUTTON_PROPS = void 0;
+// Sample props for stories and tests
+exports.SAMPLE_RADIOBUTTON_PROPS = {
+    label: 'Sample RadioButton Label',
+    isChecked: false,
+    isDisabled: false,
+    isReadOnly: false,
+    isDanger: false,
+};
+//# sourceMappingURL=RadioButton.constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.constants.cjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":";;;AAEA,qCAAqC;AACxB,QAAA,wBAAwB,GAAqB;IACxD,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["import type { RadioButtonProps } from './RadioButton.types';\n\n// Sample props for stories and tests\nexport const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps = {\n  label: 'Sample RadioButton Label',\n  isChecked: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isDanger: false,\n};\n"]}

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

@@ -0,0 +1,3 @@
+import type { RadioButtonProps } from "./RadioButton.types.cjs";
+export declare const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps;
+//# sourceMappingURL=RadioButton.constants.d.cts.map

package/dist/components/RadioButton/RadioButton.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.constants.d.cts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAG5D,eAAO,MAAM,wBAAwB,EAAE,gBAMtC,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { RadioButtonProps } from "./RadioButton.types.mjs";
+export declare const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps;
+//# sourceMappingURL=RadioButton.constants.d.mts.map

package/dist/components/RadioButton/RadioButton.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.constants.d.mts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAG5D,eAAO,MAAM,wBAAwB,EAAE,gBAMtC,CAAC"}

package/dist/components/RadioButton/RadioButton.constants.mjs

@@ -0,0 +1,9 @@
+// Sample props for stories and tests
+export const SAMPLE_RADIOBUTTON_PROPS = {
+    label: 'Sample RadioButton Label',
+    isChecked: false,
+    isDisabled: false,
+    isReadOnly: false,
+    isDanger: false,
+};
+//# sourceMappingURL=RadioButton.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.constants.mjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":"AAEA,qCAAqC;AACrC,MAAM,CAAC,MAAM,wBAAwB,GAAqB;IACxD,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["import type { RadioButtonProps } from './RadioButton.types';\n\n// Sample props for stories and tests\nexport const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps = {\n  label: 'Sample RadioButton Label',\n  isChecked: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isDanger: false,\n};\n"]}

package/dist/components/RadioButton/RadioButton.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { RadioButtonProps } from "./RadioButton.types.cjs";
+export declare const RadioButton: ({ onPress, label, labelProps, isChecked, isDisabled, isReadOnly, isDanger, touchableOpacityProps, radioButtonContainerProps, twClassName, style, ...props }: RadioButtonProps) => React.JSX.Element;
+//# sourceMappingURL=RadioButton.d.cts.map

package/dist/components/RadioButton/RadioButton.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.cts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAgC5D,eAAO,MAAM,WAAW,gKAarB,gBAAgB,sBA0DlB,CAAC"}

package/dist/components/RadioButton/RadioButton.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { RadioButtonProps } from "./RadioButton.types.mjs";
+export declare const RadioButton: ({ onPress, label, labelProps, isChecked, isDisabled, isReadOnly, isDanger, touchableOpacityProps, radioButtonContainerProps, twClassName, style, ...props }: RadioButtonProps) => React.JSX.Element;
+//# sourceMappingURL=RadioButton.d.mts.map

package/dist/components/RadioButton/RadioButton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.d.mts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAgC5D,eAAO,MAAM,WAAW,gKAarB,gBAAgB,sBA0DlB,CAAC"}