@multiplatform.one/components 5.0.1 → 5.0.7

package/src/forms/Progress/FieldProgress.tsx

@@ -19,35 +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 { ProgressProps } from './Progress';
-import { FormField } from '../FormField';
-import { Progress } from './Progress';
-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 { useId } from "react";
+import { useProps } from "tamagui";
+import type { ProgressIndicatorProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { ProgressProps } from "./Progress";
+import { Progress } from "./Progress";
 
 export type FieldProgressProps<
   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<ProgressProps, 'id' | 'value'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    progressProps?: Omit<ProgressProps, 'id' | 'value'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<ProgressProps, "id" | "value"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    progressProps?: Omit<ProgressProps, "id" | "value">;
+    indicatorProps?: ProgressIndicatorProps;
   };
 
 export function FieldProgress<
   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: FieldProgressProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldProgressProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -61,6 +93,7 @@ export function FieldProgress<
     progressProps,
     validatorAdapter,
     validators,
+    indicatorProps,
     ...fieldProps
   } = useProps(props);
   form = form ?? useForm();
@@ -69,11 +102,13 @@ export function FieldProgress<
     return (
       <FormField {...fieldProps} id={id}>
         <Progress
-          borderColor={fieldProps.error ? '$red8' : undefined}
+          borderColor={fieldProps.error ? "$red8" : undefined}
           {...progressProps}
           id={id}
           value={value ?? (defaultValue as number)}
-        />
+        >
+          <Progress.Indicator animation="bouncy" {...indicatorProps} />
+        </Progress>
       </FormField>
     );
   }
@@ -91,15 +126,19 @@ export function FieldProgress<
       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} {...fieldProps} id={id}>
             <Progress
-              borderColor={error ? '$red8' : undefined}
+              borderColor={error ? "$red8" : undefined}
               {...progressProps}
               id={id}
               value={value ?? (field.state.value as number)}
-            />
+            >
+              <Progress.Indicator animation="bouncy" {...indicatorProps} />
+            </Progress>
           </FormField>
         );
       }}

package/src/forms/Progress/Progress.ts

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

package/src/forms/Progress/index.ts

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

package/src/forms/RadioGroup/FieldRadioGroup.stories.tsx

@@ -19,50 +19,49 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldRadioGroupProps } from './FieldRadioGroup';
-import { FieldRadioGroup } from './FieldRadioGroup';
-import { SubmitButton } from '../Button';
-import { YStack, Text } from 'tamagui';
-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 { Text, YStack } from "tamagui";
+import { SubmitButton } from "../Button";
+import type { FieldRadioGroupProps } from "./FieldRadioGroup";
+import { FieldRadioGroup } from "./FieldRadioGroup";
 
 export default {
-  title: 'forms/FieldRadioGroup',
+  title: "forms/FieldRadioGroup",
   component: FieldRadioGroup,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = (args) => <FieldRadioGroup {...args} />;
 const mainArgs: FieldRadioGroupProps = {
-  label: 'radio group',
+  label: "radio group",
   error: undefined,
-  helperText: 'Select an option',
+  helperText: "Select an option",
   mode: undefined,
-  size: 'SizeToken',
-  value: 'option1',
+  size: "SizeToken",
+  value: "option1",
 };
 main.args = mainArgs;
 
 export const form = () => {
   const form = useForm({
     defaultValues: {
-      option: 'option1',
+      option: "option1",
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
     <YStack>
       <FieldRadioGroup
         form={form}
-        gap
+        gap="$4"
         helperText="select an option"
         label="radio group"
         size="SizeToken"
         name="option"
-        onValueChange={action('onValueChange')}
+        onValueChange={action("onValueChange")}
         required
       >
         <FieldRadioGroup.Item size="SizeToken" value="option1">

package/src/forms/RadioGroup/FieldRadioGroup.tsx

@@ -19,37 +19,70 @@
  * 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 { RadioGroupItemProps, XStackProps } from 'tamagui';
-import type { RadioGroupProps } from './RadioGroup';
-import { FormField } from '../FormField';
-import { RadioGroup } from './RadioGroup';
-import { useForm, Field } from '@tanstack/react-form';
-import { useProps, XStack } from 'tamagui';
+import type { DeepKeys, DeepValue, Validator } from "@tanstack/form-core";
+import { Field, useForm } from "@tanstack/react-form";
+import { useId } from "react";
+import type { RadioGroupItemProps, XStackProps } from "tamagui";
+import { XStack, useProps } from "tamagui";
+import type { FormFieldProps } from "../FormField";
+import { FormField } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { RadioGroupProps } from "./RadioGroup";
+import { RadioGroup } from "./RadioGroup";
 
 export type FieldRadioGroupProps<
   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<RadioGroupProps, 'children' | 'value' | 'onValueChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    radioGroupProps?: Omit<RadioGroupProps, 'value' | 'id' | 'onValueChange' | 'children'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<RadioGroupProps, "children" | "value" | "onValueChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    radioGroupProps?: Omit<
+      RadioGroupProps,
+      "value" | "id" | "onValueChange" | "children"
+    >;
     horizontal?: boolean;
   };
 
 export function FieldRadioGroup<
   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: FieldRadioGroupProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldRadioGroupProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -98,7 +131,9 @@ export function FieldRadioGroup<
       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}
@@ -127,9 +162,11 @@ export function FieldRadioGroup<
   );
 }
 
-export interface FormRadioGroupItemProps extends XStackProps, Pick<RadioGroupItemProps, 'children' | 'value' | 'size'> {
+export interface FormRadioGroupItemProps
+  extends XStackProps,
+    Pick<RadioGroupItemProps, "children" | "value" | "size"> {
   disabled?: boolean;
-  itemProps?: Omit<RadioGroupItemProps, 'children' | 'value' | 'size'>;
+  itemProps?: Omit<RadioGroupItemProps, "children" | "value" | "size">;
 }
 
 export function FieldRadioGroupItem({

package/src/forms/RadioGroup/RadioGroup.ts

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

package/src/forms/RadioGroup/index.ts

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

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

@@ -19,33 +19,37 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { FieldSelectSimple } from './index';
-import { Select, YStack } from 'tamagui';
-import { SubmitButton } from '../Button';
-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 { Select, YStack } from "tamagui";
+import { SubmitButton } from "../Button";
+import { FieldSelectSimple } from "./index";
 
 export default {
-  title: 'forms/FieldSelectSimple',
+  title: "forms/FieldSelectSimple",
   component: FieldSelectSimple,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main = (args) => {
   const form = useForm({
     defaultValues: {
-      car: 'ford',
+      car: "ford",
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (
     <YStack>
-      <FieldSelectSimple label="SELECT VEHICLE" name="car" form={form} {...args}>
+      <FieldSelectSimple
+        label="SELECT VEHICLE"
+        name="car"
+        form={form}
+        {...args}
+      >
         <Select.Item key="bmw" index={0} value="bmw">
           <Select.ItemText>BMW</Select.ItemText>
         </Select.Item>

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 { 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,18 @@
-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 { 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 +29,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,21 @@
  * 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 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 +46,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";