@multiplatform.one/components 4.1.0 → 4.1.1

package/src/forms/Switch/FieldSwitch.tsx

@@ -19,35 +19,65 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { SwitchProps, SwitchThumbProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { Switch, useProps } from 'tamagui';
-import { useForm, Field } from '@tanstack/react-form';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import React, { useId } from "react";
+import type { SwitchProps, SwitchThumbProps } from "tamagui";
+import { Switch, useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
 
 export type FieldSwitchProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children' | 'field'> &
-  Pick<SwitchProps, 'checked' | 'onCheckedChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    switchProps?: Omit<SwitchProps, 'checked' | 'id' | 'onCheckedChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<SwitchProps, "checked" | "onCheckedChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    switchProps?: Omit<SwitchProps, "checked" | "id" | "onCheckedChange">;
     thumbStyle?: SwitchThumbProps;
   };
 
 export function FieldSwitch<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: FieldSwitchProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldSwitchProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -96,7 +126,9 @@ export function FieldSwitch<
       validators={validators}
     >
       {(field) => {
-        const error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : fieldProps.error;
+        const error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : fieldProps.error;
         return (
           <FormField
             error={error}

package/src/forms/Switch/Switch.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export type { SwitchProps, SwitchThumbProps } from 'tamagui';
-export { Switch } from 'tamagui';
+export type { SwitchProps, SwitchThumbProps } from "tamagui";
+export { Switch } from "tamagui";

package/src/forms/Switch/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './Switch';
-export * from './FieldSwitch';
+export * from "./Switch";
+export * from "./FieldSwitch";

package/src/forms/TextArea/FieldTextArea.stories.tsx

@@ -19,30 +19,35 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldTextAreaProps } from './FieldTextArea';
-import { Button, YStack } from 'tamagui';
-import { FieldTextArea } from './FieldTextArea';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import { Button, YStack } from "tamagui";
+import type { FieldTextAreaProps } from "./FieldTextArea";
+import { FieldTextArea } from "./FieldTextArea";
 
 export default {
-  title: 'forms/FieldTextArea',
+  title: "forms/FieldTextArea",
   component: FieldTextArea,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = () => (
-  <FieldTextArea label="Description" name="description" defaultValue="" onChangeText={action('onChangeText')} />
+  <FieldTextArea
+    label="Description"
+    name="description"
+    defaultValue=""
+    onChangeText={action("onChangeText")}
+  />
 );
 
 export const form = (args: FieldTextAreaProps) => {
   const form = useForm({
     defaultValues: {
-      textArea: '',
+      textArea: "",
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
@@ -54,11 +59,11 @@ export const form = (args: FieldTextAreaProps) => {
 };
 
 form.args = {
-  label: 'Sample Text Area',
-  defaultValue: 'This is a sample text area',
-  onChangeText: action('onChangeText'),
+  label: "Sample Text Area",
+  defaultValue: "This is a sample text area",
+  onChangeText: action("onChangeText"),
   textAreaProps: {
-    placeholder: 'Enter some text here...',
+    placeholder: "Enter some text here...",
     disabled: false,
   },
 };

package/src/forms/TextArea/FieldTextArea.tsx

@@ -19,34 +19,67 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import type { TextAreaProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps, TextArea } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import React, { useId } from "react";
+import type { TextAreaProps } from "tamagui";
+import { TextArea, useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
 
 export type FieldTextAreaProps<
   TParentData = any,
   TName extends DeepKeys<TParentData> = any,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children' | 'field'> &
-  Pick<TextAreaProps, 'value' | 'onChange' | 'onChangeText'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    textAreaProps?: Omit<TextAreaProps, 'value' | 'id' | 'onChange' | 'onChangeText'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<TextAreaProps, "value" | "onChange" | "onChangeText"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    textAreaProps?: Omit<
+      TextAreaProps,
+      "value" | "id" | "onChange" | "onChangeText"
+    >;
   };
 
 export function FieldTextArea<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
->(props: FieldTextAreaProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldTextAreaProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -93,7 +126,9 @@ export function FieldTextArea<
       validators={validators}
     >
       {(field) => {
-        const error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : fieldProps.error;
+        const error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : fieldProps.error;
         return (
           <FormField
             error={error}

package/src/forms/TextArea/TextArea.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export type { TextAreaProps } from 'tamagui';
-export { TextArea } from 'tamagui';
+export type { TextAreaProps } from "tamagui";
+export { TextArea } from "tamagui";

package/src/forms/TextArea/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './FieldTextArea';
-export * from './TextArea';
+export * from "./FieldTextArea";
+export * from "./TextArea";

package/src/forms/index.ts

@@ -19,15 +19,15 @@
  * limitations under the License.
  */
 
-export * from './Button';
-export * from './Checkbox';
-export * from './FormField';
-export * from './Input';
-export * from './Progress';
-export * from './RadioGroup';
-export * from './RadioGroup';
-export * from './Select';
-export * from './SelectButton';
-export * from './Slider';
-export * from './Switch';
-export * from './TextArea';
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./FormField";
+export * from "./Input";
+export * from "./Progress";
+export * from "./RadioGroup";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./SelectButton";
+export * from "./Slider";
+export * from "./Switch";
+export * from "./TextArea";

package/src/forms/types.ts

@@ -19,15 +19,35 @@
  * limitations under the License.
  */
 
-import type { FieldApi, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { UseFieldOptions, NodeType } from '@tanstack/react-form/dist/esm/types';
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApi,
+  Validator,
+} from "@tanstack/form-core";
+import type {
+  NodeType,
+  UseFieldOptions,
+} from "@tanstack/react-form/dist/esm/types";
 
 export type FieldComponentProps<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 > = {
-  children: (fieldApi: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>) => NodeType;
+  children: (
+    fieldApi: FieldApi<
+      TParentData,
+      TName,
+      TFieldValidator,
+      TFormValidator,
+      TData
+    >,
+  ) => NodeType;
 } & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>;

package/src/helpers.tsx

@@ -1,9 +1,13 @@
-import type { ReactNode, ComponentType } from 'react';
-import React from 'react';
-import { Text } from 'tamagui';
-import { isText } from 'multiplatform.one';
+import { isText } from "multiplatform.one";
+import type { ComponentType, ReactNode } from "react";
+import React from "react";
+import { Text } from "tamagui";
 
-export function useAutoText(children: any, Component: ComponentType<any> = Text, props?: any): ReactNode {
+export function useAutoText(
+  children: any,
+  Component: ComponentType<any> = Text,
+  props?: any,
+): ReactNode {
   if (isText(children)) {
     return <Component {...props}>{children?.toString()}</Component>;
   }

package/src/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from './useAssets';
-export * from './useClipboard';
+export * from "./useAssets";
+export * from "./useClipboard";

package/src/hooks/useAnimationDriverToggle.ts

@@ -1,8 +1,11 @@
-import { useContext } from 'react';
-import { AnimationDriverTogglerContext } from '../providers/AnimationDriverTogglerContextProvider';
+import { useContext } from "react";
+import { AnimationDriverTogglerContext } from "../providers/AnimationDriverTogglerContextProvider";
 
 export const useAnimationDriverToggler = () => {
   const contextValue = useContext(AnimationDriverTogglerContext);
-  if (!contextValue) throw new Error('Should be used within the AnimationDriverTogglerContext provider');
+  if (!contextValue)
+    throw new Error(
+      "Should be used within the AnimationDriverTogglerContext provider",
+    );
   return contextValue;
 };

package/src/hooks/useAssets/index.native.ts

@@ -1,14 +1,18 @@
-import type { Asset } from 'expo-asset';
-import type { StaticImageData } from 'next/image';
-import { useAssets as expoUseAssets } from 'expo-asset';
+import type { Asset } from "expo-asset";
+import { useAssets as expoUseAssets } from "expo-asset";
+import type { StaticImageData } from "next/image";
 
 const logger = console;
 
-export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
-  const modulesArr = (Array.isArray(modules) ? modules : [modules]).map((module: any) => {
-    if (typeof module.default !== 'undefined') return module.default;
-    return module;
-  });
+export function useAssets(
+  modules: any | any[],
+): (StaticImageData | undefined)[] {
+  const modulesArr = (Array.isArray(modules) ? modules : [modules]).map(
+    (module: any) => {
+      if (typeof module.default !== "undefined") return module.default;
+      return module;
+    },
+  );
   const [assets, err] = expoUseAssets(modulesArr);
   if (err) logger.error(err);
   if (!assets) return new Array(modulesArr.length);

package/src/hooks/useAssets/index.ts

@@ -1,11 +1,13 @@
-import type { StaticImageData } from 'next/image';
+import type { StaticImageData } from "next/image";
 
-export function useAssets(modules: any | any[]): (StaticImageData | undefined)[] {
-  const modulesArr: (StaticImageData | undefined)[] = (Array.isArray(modules) ? modules : [modules]).map(
-    (module: any) => {
-      if (typeof module.default !== 'undefined') return module.default;
-      return module;
-    },
-  );
+export function useAssets(
+  modules: any | any[],
+): (StaticImageData | undefined)[] {
+  const modulesArr: (StaticImageData | undefined)[] = (
+    Array.isArray(modules) ? modules : [modules]
+  ).map((module: any) => {
+    if (typeof module.default !== "undefined") return module.default;
+    return module;
+  });
   return modulesArr;
 }

package/src/hooks/useClipboard.ts

@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
-import { useEvent } from 'tamagui';
+import { useEffect, useState } from "react";
+import { useEvent } from "tamagui";
 
 export const copyToClipboard = (text: string) => {
   return navigator.clipboard.writeText(text);
 };
 
-export function useClipboard(text = '', timeout = 1500) {
+export function useClipboard(text = "", timeout = 1500) {
   const [hasCopied, setHasCopied] = useState(false);
 
   const onCopy = useEvent(async () => {

package/src/icons/CheckRegular.tsx

@@ -20,11 +20,11 @@
  * limitations under the License.
  */
 
-import { Polyline, Rect, Svg } from 'react-native-svg';
-import { memo } from 'react';
-import { themed } from './themed';
+import { memo } from "react";
+import { Polyline, Rect, Svg } from "react-native-svg";
+import { themed } from "./themed";
 
-function Icon({ color = 'black', size = 24, ...otherProps }) {
+function Icon({ color = "black", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />
@@ -39,6 +39,6 @@ function Icon({ color = 'black', size = 24, ...otherProps }) {
     </Svg>
   );
 }
-Icon.displayName = 'CheckRegular';
+Icon.displayName = "CheckRegular";
 const CheckRegular = memo(themed(Icon));
 export { CheckRegular };

package/src/icons/MinusRegular.tsx

@@ -20,11 +20,11 @@
  * limitations under the License.
  */
 
-import { Line, Rect, Svg } from 'react-native-svg';
-import { memo } from 'react';
-import { themed } from './themed';
+import { memo } from "react";
+import { Line, Rect, Svg } from "react-native-svg";
+import { themed } from "./themed";
 
-function Icon({ color = 'black', size = 24, ...otherProps }) {
+function Icon({ color = "black", size = 24, ...otherProps }) {
   return (
     <Svg viewBox="0 0 256 256" {...otherProps} height={size} width={size}>
       <Rect width="256" height="256" fill="none" />
@@ -42,6 +42,6 @@ function Icon({ color = 'black', size = 24, ...otherProps }) {
     </Svg>
   );
 }
-Icon.displayName = 'MinusRegular';
+Icon.displayName = "MinusRegular";
 const MinusRegular = memo(themed(Icon));
 export { MinusRegular };

package/src/icons/index.ts

@@ -19,5 +19,5 @@
  * limitations under the License.
  */
 
-export * from './CheckRegular';
-export * from './MinusRegular';
+export * from "./CheckRegular";
+export * from "./MinusRegular";

package/src/icons/themed.tsx

@@ -20,9 +20,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FC } from 'react';
-import { getTokens, getVariable, getVariableValue, useProps, useTheme } from 'tamagui';
+import React from "react";
+import type { FC } from "react";
+import {
+  getTokens,
+  getVariable,
+  getVariableValue,
+  useProps,
+  useTheme,
+} from "tamagui";
 
 export function themed<A extends FC>(Component: A) {
   return ((props: any) => {
@@ -32,9 +38,16 @@ export function themed<A extends FC>(Component: A) {
       <Component
         {...props}
         color={getVariable(
-          (color in theme ? theme[color] : undefined) || color || (!disableTheme ? theme.color : null) || '#000',
+          (color in theme ? theme[color] : undefined) ||
+            color ||
+            (!disableTheme ? theme.color : null) ||
+            "#000",
         )}
-        size={typeof size === 'string' ? getVariableValue(getTokens().size[size] || size) : size}
+        size={
+          typeof size === "string"
+            ? getVariableValue(getTokens().size[size] || size)
+            : size
+        }
       />
     );
   }) as A;

package/src/images/SimpleImage/index.stories.tsx

@@ -19,16 +19,16 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { useAssets } from '../../hooks';
-import { Props, SimpleImage } from './index';
-import { YStack } from 'tamagui';
+import React from "react";
+import { YStack } from "tamagui";
+import { useAssets } from "../../hooks";
+import { type Props, SimpleImage } from "./index";
 
 export default {
-  title: 'images/SimpleImage',
+  title: "images/SimpleImage",
   component: SimpleImage,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
@@ -92,10 +92,10 @@ export const withYStack = (args: Props) => (
 
 withYStack.args = {
   height: 200,
-  width: '50%',
-  backgroundColor: 'green',
+  width: "50%",
+  backgroundColor: "green",
   // loader: 'ImageLoader',
-  loading: 'lazy',
+  loading: "lazy",
 };
 
 export const withTamagui = (args: Props) => (
@@ -111,9 +111,9 @@ export const withTamagui = (args: Props) => (
 );
 
 withTamagui.args = {
-  height: '$20',
-  width: '100%',
-  backgroundColor: '$red8',
+  height: "$20",
+  width: "100%",
+  backgroundColor: "$red8",
   // loader: 'ImageLoader',
-  loading: 'lazy',
+  loading: "lazy",
 };