@multiplatform.one/components 4.1.0 → 4.1.1

package/src/forms/Select/FieldSelectSimple.tsx

@@ -19,35 +19,71 @@
  * 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 { FormField } from '../FormField';
-import { useProps } from 'tamagui';
-import { SelectSimple } from './SelectSimple';
-import type { SelectSimpleProps } from './SelectSimple';
-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 { useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import { SelectSimple } from "./SelectSimple";
+import type { SelectSimpleProps } from "./SelectSimple";
 
 export type FieldSelectSimpleProps<
   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>, 'field'> &
-  Pick<SelectSimpleProps, 'placeholder' | 'value' | 'onOpenChange' | 'onValueChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    selectProps?: Omit<SelectSimpleProps, 'placeholder' | 'value' | 'id' | 'onOpenChange' | 'onValueChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "field"
+> &
+  Pick<
+    SelectSimpleProps,
+    "placeholder" | "value" | "onOpenChange" | "onValueChange"
+  > &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    selectProps?: Omit<
+      SelectSimpleProps,
+      "placeholder" | "value" | "id" | "onOpenChange" | "onValueChange"
+    >;
   };
 
 export function FieldSelectSimple<
   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: FieldSelectSimpleProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldSelectSimpleProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -98,7 +134,9 @@ export function FieldSelectSimple<
       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/Select/Select.ts

@@ -29,5 +29,5 @@ export type {
   SelectTriggerProps,
   SelectValueExtraProps,
   SelectViewportProps,
-} from 'tamagui';
-export { Select } from 'tamagui';
+} from "tamagui";
+export { Select } from "tamagui";

package/src/forms/Select/SelectSimple.stories.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
-import { Select } from 'tamagui';
-import { SelectSimple } from './SelectSimple';
-import { action } from '@storybook/addon-actions';
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import { Select } from "tamagui";
+import { SelectSimple } from "./SelectSimple";
 
 export default {
-  title: 'forms/SelectSimple',
+  title: "forms/SelectSimple",
   component: SelectSimple,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main = (args) => {
   return (
-    <SelectSimple onValueChange={action('onValueChange')} {...args}>
+    <SelectSimple onValueChange={action("onValueChange")} {...args}>
       <Select.Item key="bmw" index={0} value="bmw">
         <Select.ItemText>BMW</Select.ItemText>
       </Select.Item>
@@ -30,10 +30,10 @@ export const main = (args) => {
   );
 };
 const mainArgs = {
-  name: 'FormSelectSimple',
-  placeholder: 'select one of these',
-  defaultValue: 'bmw',
-  value: 'bmw',
-  onValueChange: 'string',
+  name: "FormSelectSimple",
+  placeholder: "select one of these",
+  defaultValue: "bmw",
+  value: "bmw",
+  onValueChange: "string",
 };
 main.args = mainArgs;

package/src/forms/Select/SelectSimple.tsx

@@ -19,19 +19,22 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { SelectProps } from './Select';
-import type { SelectTriggerProps } from 'tamagui';
-import { Select } from './Select';
-import { styled } from 'tamagui';
+import React from "react";
+import type { ReactNode } from "react";
+import type { SelectTriggerProps } from "tamagui";
+import { styled } from "tamagui";
+import type { SelectProps } from "./Select";
+import { Select } from "./Select";
 
 const StyledSelectTrigger = styled(Select.Trigger, {
   paddingVertical: 0,
 });
 
 export type SelectSimpleProps = SelectTriggerProps &
-  Pick<SelectProps, 'onOpenChange' | 'onValueChange' | 'id' | 'value' | 'defaultValue'> & { placeholder?: ReactNode };
+  Pick<
+    SelectProps,
+    "onOpenChange" | "onValueChange" | "id" | "value" | "defaultValue"
+  > & { placeholder?: ReactNode };
 
 export function SelectSimple({
   children,
@@ -44,11 +47,17 @@ export function SelectSimple({
   ...triggerProps
 }: SelectSimpleProps) {
   return (
-    <Select id={id} onOpenChange={onOpenChange} onValueChange={onValueChange} value={value} defaultValue={defaultValue}>
+    <Select
+      id={id}
+      onOpenChange={onOpenChange}
+      onValueChange={onValueChange}
+      value={value}
+      defaultValue={defaultValue}
+    >
       <StyledSelectTrigger {...triggerProps}>
         <Select.Value placeholder={placeholder} />
       </StyledSelectTrigger>
-      <Select.Adapt when={'sm' as any} platform="touch">
+      <Select.Adapt when={"sm" as any} platform="touch">
         <Select.Sheet modal dismissOnSnapToBottom>
           <Select.Sheet.Frame>
             <Select.Sheet.ScrollView>

package/src/forms/Select/index.ts

@@ -19,6 +19,6 @@
  * limitations under the License.
  */
 
-export * from './FieldSelectSimple';
-export * from './Select';
-export * from './SelectSimple';
+export * from "./FieldSelectSimple";
+export * from "./Select";
+export * from "./SelectSimple";

package/src/forms/SelectButton/OptionButton.tsx

@@ -19,16 +19,16 @@
  * limitations under the License.
  */
 
-import React, { useContext, useState, useEffect, useCallback } from 'react';
-import type { ButtonProps } from '../Button';
-import type { ComponentProps } from 'react';
-import type { GestureResponderEvent } from 'react-native';
-import { Button } from '../Button';
-import { SelectButtonContext } from './context';
-import { styled } from 'tamagui';
+import React, { useContext, useState, useEffect, useCallback } from "react";
+import type { ComponentProps } from "react";
+import type { GestureResponderEvent } from "react-native";
+import { styled } from "tamagui";
+import type { ButtonProps } from "../Button";
+import { Button } from "../Button";
+import { SelectButtonContext } from "./context";
 
 const defaultSelectedStyle: ButtonProps = {
-  backgroundColor: '$color7',
+  backgroundColor: "$color7",
 };
 
 const StyledButton = styled(Button, {
@@ -51,7 +51,13 @@ export type OptionButtonProps = ButtonProps & {
   value: string;
 };
 
-export function OptionButton({ index, value, selectedStyle, onPress, ...buttonProps }: OptionButtonProps) {
+export function OptionButton({
+  index,
+  value,
+  selectedStyle,
+  onPress,
+  ...buttonProps
+}: OptionButtonProps) {
   const [selected, setSelected] = useState(false);
   const context = useContext(SelectButtonContext);
   const mergedSelectedStyle = {
@@ -68,7 +74,10 @@ export function OptionButton({ index, value, selectedStyle, onPress, ...buttonPr
   }, [context.setValues]);
 
   useEffect(() => {
-    setSelected(typeof context.selectedIndex !== 'undefined' && context.selectedIndex === index);
+    setSelected(
+      typeof context.selectedIndex !== "undefined" &&
+        context.selectedIndex === index,
+    );
   }, [context.selectedIndex]);
 
   const handlePress = useCallback(

package/src/forms/SelectButton/SelectButton.stories.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { SelectButton } from './SelectButton';
-import { Text } from 'tamagui';
-import { action } from '@storybook/addon-actions';
+import { action } from "@storybook/addon-actions";
+import React from "react";
+import { Text } from "tamagui";
+import { SelectButton } from "./SelectButton";
 
 export default {
-  title: 'forms/SelectButton',
+  title: "forms/SelectButton",
   component: SelectButton,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
@@ -31,8 +31,8 @@ export const main = (args) => {
 };
 
 const mainArgs = {
-  value: 'bmw',
-  selectedValue: 'bmw',
+  value: "bmw",
+  selectedValue: "bmw",
 };
 
 main.args = mainArgs;

package/src/forms/SelectButton/SelectButton.tsx

@@ -19,12 +19,12 @@
  * limitations under the License.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
-import type { OptionButtonProps } from './OptionButton';
-import type { YStackProps, ButtonProps } from 'tamagui';
-import { OptionButton } from './OptionButton';
-import { SelectButtonContext } from './context';
-import { YStack, XStack } from 'tamagui';
+import React, { useState, useMemo, useEffect } from "react";
+import type { ButtonProps, YStackProps } from "tamagui";
+import { XStack, YStack } from "tamagui";
+import type { OptionButtonProps } from "./OptionButton";
+import { OptionButton } from "./OptionButton";
+import { SelectButtonContext } from "./context";
 
 export type SelectButtonProps = YStackProps & {
   onValueChange?: (value: string) => unknown;
@@ -58,16 +58,16 @@ export function SelectButton({
     const selectedIndexStr = selectedIndex?.toString();
     if (
       onValueChange &&
-      typeof selectedIndex !== 'undefined' &&
-      typeof selectedIndexStr !== 'undefined' &&
+      typeof selectedIndex !== "undefined" &&
+      typeof selectedIndexStr !== "undefined" &&
       selectedIndexStr in values
     ) {
-      onValueChange(values?.[selectedIndexStr] || '');
+      onValueChange(values?.[selectedIndexStr] || "");
     }
   }, [selectedIndex]);
 
   useEffect(() => {
-    if (typeof selectedValue === 'undefined') return;
+    if (typeof selectedValue === "undefined") return;
     for (const [index, value] of Object.entries(values)) {
       const indexNum = Number(index);
       if (value === selectedValue && !Number.isNaN(indexNum)) {

package/src/forms/SelectButton/context.ts

@@ -19,11 +19,13 @@
  * limitations under the License.
  */
 
-import type { ButtonProps } from 'tamagui';
-import type { Dispatch, SetStateAction } from 'react';
-import { createContext } from 'react';
+import type { Dispatch, SetStateAction } from "react";
+import { createContext } from "react";
+import type { ButtonProps } from "tamagui";
 
-export const SelectButtonContext = createContext<SelectButtonContextValue>({ values: {} });
+export const SelectButtonContext = createContext<SelectButtonContextValue>({
+  values: {},
+});
 
 interface SelectButtonContextValue {
   selectedIndex?: number;

package/src/forms/SelectButton/index.ts

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

package/src/forms/Slider/FieldSlider.stories.tsx

@@ -40,26 +40,28 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Button, Text, YStack } from 'tamagui';
-import { FieldSlider } from './FieldSlider';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
-import type { FieldSliderProps } from './FieldSlider';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import { Button, Text, YStack } from "tamagui";
+import { FieldSlider } from "./FieldSlider";
+import type { FieldSliderProps } from "./FieldSlider";
 
 export default {
-  title: 'forms/FieldSlider',
+  title: "forms/FieldSlider",
   component: FieldSlider,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-export const main = (args) => <FieldSlider onValueChange={action(`onValueChange`)} {...args} />;
+export const main = (args) => (
+  <FieldSlider onValueChange={action("onValueChange")} {...args} />
+);
 const mainArgs: FieldSliderProps = {
-  label: 'film',
+  label: "film",
   error: undefined,
-  helperText: 'please check this slider',
+  helperText: "please check this slider",
   value: undefined,
 };
 main.args = mainArgs;
@@ -72,13 +74,18 @@ export const form = () => {
       sliderValue: [0],
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
     <YStack padding="$4" justifyContent="center" space>
       <Text>{[sliderValue]}</Text>
-      <FieldSlider form={form} name="sliderValue" label="formSlider" onValueChange={(e) => setSliderValue(e)} />
+      <FieldSlider
+        form={form}
+        name="sliderValue"
+        label="formSlider"
+        onValueChange={(e) => setSliderValue(e)}
+      />
       <Button onPress={form.handleSubmit}>Submit</Button>
     </YStack>
   );

package/src/forms/Slider/FieldSlider.tsx

@@ -19,37 +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 { SliderProps } from './Slider';
-import type { SliderThumbProps } from 'tamagui';
-import { FormField } from '../FormField';
-import { Slider } from './Slider';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps } 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 { SliderThumbProps } from "tamagui";
+import { useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { SliderProps } from "./Slider";
+import { Slider } from "./Slider";
 
 export type FieldSliderProps<
   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<SliderProps, 'value' | 'onValueChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    sliderProps?: Omit<SliderProps, 'value' | 'id' | 'onValueChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<SliderProps, "value" | "onValueChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    sliderProps?: Omit<SliderProps, "value" | "id" | "onValueChange">;
     thumbProps?: SliderThumbProps;
   };
 
 export function FieldSlider<
   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: FieldSliderProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldSliderProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -73,11 +103,23 @@ export function FieldSlider<
   if (!form || !name) {
     return (
       <FormField {...fieldProps} id={id} onBlur={onBlur}>
-        <Slider {...sliderProps} id={id} defaultValue={defaultValue as number[]} onValueChange={onValueChange}>
+        <Slider
+          {...sliderProps}
+          id={id}
+          defaultValue={defaultValue as number[]}
+          onValueChange={onValueChange}
+        >
           <Slider.Track>
             <Slider.TrackActive />
           </Slider.Track>
-          <Slider.Thumb bordered circular elevate size="$2" index={0} {...thumbProps} />
+          <Slider.Thumb
+            bordered
+            circular
+            elevate
+            size="$2"
+            index={0}
+            {...thumbProps}
+          />
         </Slider>
       </FormField>
     );
@@ -96,7 +138,9 @@ export function FieldSlider<
       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}
@@ -119,7 +163,14 @@ export function FieldSlider<
               <Slider.Track>
                 <Slider.TrackActive />
               </Slider.Track>
-              <Slider.Thumb bordered circular elevate size="$2" index={0} {...thumbProps} />
+              <Slider.Thumb
+                bordered
+                circular
+                elevate
+                size="$2"
+                index={0}
+                {...thumbProps}
+              />
             </Slider>
           </FormField>
         );

package/src/forms/Slider/Slider.ts

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

package/src/forms/Slider/index.ts

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

package/src/forms/Switch/FieldSwitch.stories.tsx

@@ -19,27 +19,29 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldSwitchProps } from './FieldSwitch';
-import { FieldSwitch } from './FieldSwitch';
-import { action } from '@storybook/addon-actions';
-import { useForm } from '@tanstack/react-form';
-import { Button, YStack } from 'tamagui';
+import { action } from "@storybook/addon-actions";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import { Button, YStack } from "tamagui";
+import type { FieldSwitchProps } from "./FieldSwitch";
+import { FieldSwitch } from "./FieldSwitch";
 
 export default {
-  title: 'forms/FieldSwitch',
+  title: "forms/FieldSwitch",
   component: FieldSwitch,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
-export const main = (args) => <FieldSwitch onCheckedChange={action('onCheckedChange')} {...args} />;
+export const main = (args) => (
+  <FieldSwitch onCheckedChange={action("onCheckedChange")} {...args} />
+);
 const mainArgs: FieldSwitchProps<any, any> = {
   asyncAlways: true,
   asyncDebounceMs: 500,
   defaultValue: false,
-  mode: 'array',
+  mode: "array",
 };
 main.args = mainArgs;
 
@@ -49,7 +51,7 @@ export const form = () => {
       switch: false,
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (