@multiplatform.one/components 4.1.0 → 4.1.1

package/src/code/Code/index.ts

@@ -19,44 +19,44 @@
  * limitations under the License.
  */
 
-import type { GetProps } from 'tamagui';
-import { Paragraph, styled } from 'tamagui';
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
+import type { GetProps } from "tamagui";
+import { Paragraph, styled } from "tamagui";
 
 export const Code = styled(Paragraph, {
-  name: 'Code',
-  borderRadius: '$4',
-  cursor: 'inherit',
+  name: "Code",
+  borderRadius: "$4",
+  cursor: "inherit",
   // @ts-ignore
-  fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  fontFamily: Platform.OS === "web" ? "$mono" : undefined,
   lineHeight: 18,
-  padding: '$1',
+  padding: "$1",
   // @ts-ignore
-  size: '$3',
-  tag: 'code',
-  whiteSpace: 'pre',
+  size: "$3",
+  tag: "code",
+  whiteSpace: "pre",
   variants: {
     colored: {
       true: {
-        backgroundColor: '$background',
-        color: '$color',
+        backgroundColor: "$background",
+        color: "$color",
       },
     },
   } as const,
 });
 
 export const CodeInline = styled(Paragraph, {
-  name: 'CodeInline',
-  backgroundColor: '$background',
-  borderRadius: '$3',
-  color: '$colorHover',
-  cursor: 'inherit',
+  name: "CodeInline",
+  backgroundColor: "$background",
+  borderRadius: "$3",
+  color: "$colorHover",
+  cursor: "inherit",
   // @ts-ignore
-  fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  fontFamily: Platform.OS === "web" ? "$mono" : undefined,
   // @ts-ignore
-  fontSize: '85%',
-  padding: '$1.5',
-  tag: 'code',
+  fontSize: "85%",
+  padding: "$1.5",
+  tag: "code",
 });
 
 export type CodeProps = GetProps<typeof Code>;

package/src/code/CodeBlock/CodeBlock.stories.ts

@@ -1,17 +1,17 @@
-import { CodeBlock } from './index';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "./index";
 
 const meta: Meta = {
-  title: 'code/CodeBlock',
+  title: "code/CodeBlock",
   component: CodeBlock,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main: StoryObj<typeof CodeBlock> = {
   args: {
-    backgroundColor: '$color2',
+    backgroundColor: "$color2",
     debug: false,
     disableCopy: false,
     isCollapsible: false,

package/src/code/CodeBlock/index.tsx

@@ -1,15 +1,23 @@
-import React, { useMemo } from 'react';
-import type { MDXCodeBlockContextValue } from '../../mdx/MDXCodeBlock/MDXCodeBlockContext';
-import type { MDXProps } from '../../mdx/MDX';
-import { MDX } from '../../mdx/MDX';
-import { MDXCodeBlockContext } from '../../mdx/MDXCodeBlock/MDXCodeBlockContext';
+import React, { useMemo } from "react";
+import type { MDXProps } from "../../mdx/MDX";
+import { MDX } from "../../mdx/MDX";
+import type { MDXCodeBlockContextValue } from "../../mdx/MDXCodeBlock/MDXCodeBlockContext";
+import { MDXCodeBlockContext } from "../../mdx/MDXCodeBlock/MDXCodeBlockContext";
 
-export interface CodeBlockProps extends Omit<MDXProps, 'children'>, MDXCodeBlockContextValue {
+export interface CodeBlockProps
+  extends Omit<MDXProps, "children">,
+    MDXCodeBlockContextValue {
   children?: string;
   language?: string;
 }
 
-export function CodeBlock({ children, language = 'tsx', components, debug, ...props }: CodeBlockProps) {
+export function CodeBlock({
+  children,
+  language = "tsx",
+  components,
+  debug,
+  ...props
+}: CodeBlockProps) {
   const mdxString = useMemo(
     () => `\`\`\`${language}
 ${children?.trim()}

package/src/code/Pre/index.ts

@@ -1,9 +1,9 @@
-import { YStack, styled } from 'tamagui';
+import { YStack, styled } from "tamagui";
 
 export const Pre = styled(YStack, {
-  backgroundColor: '$background',
-  borderRadius: '$4',
-  overflow: 'visible',
-  padding: '$4',
-  tag: 'pre',
+  backgroundColor: "$background",
+  borderRadius: "$4",
+  overflow: "visible",
+  padding: "$4",
+  tag: "pre",
 });

package/src/code/index.ts

@@ -1,3 +1,3 @@
-export * from './Code';
-export * from './CodeBlock';
-export * from './Pre';
+export * from "./Code";
+export * from "./CodeBlock";
+export * from "./Pre";

package/src/forms/Button/Button.tsx

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

package/src/forms/Button/SubmitButton.stories.tsx

@@ -19,24 +19,24 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SubmitButton, SubmitButtonProps } from './SubmitButton';
-import { useForm } from '@tanstack/react-form';
-import { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import { SubmitButton, type SubmitButtonProps } from "./SubmitButton";
 
 const meta: Meta = {
-  title: 'forms/SubmitButton',
+  title: "forms/SubmitButton",
   component: SubmitButton,
   parameters: {
-    status: { type: 'beta' },
+    status: { type: "beta" },
   },
 };
 
 export const main = (args) => {
   const form = useForm({
     defaultValues: {
-      firstName: 'Hello',
-      lastName: 'Bob',
+      firstName: "Hello",
+      lastName: "Bob",
       age: 24,
       isGraduate: true,
     },
@@ -45,7 +45,7 @@ export const main = (args) => {
 };
 
 const mainArgs: Partial<SubmitButtonProps> = {
-  children: 'Submit',
+  children: "Submit",
 };
 
 main.args = mainArgs;

package/src/forms/Button/SubmitButton.tsx

@@ -19,24 +19,32 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { ButtonProps } from './Button';
-import type { FormApi } from '@tanstack/react-form';
-import type { Validator } from '@tanstack/form-core';
-import { Button } from './Button';
-import { useForm } from '@tanstack/react-form';
+import type { Validator } from "@tanstack/form-core";
+import type { FormApi } from "@tanstack/react-form";
+import { useForm } from "@tanstack/react-form";
+import React from "react";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
 
 export type SubmitButtonProps<
   TParentData = any,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 > = ButtonProps & {
   form: FormApi<TParentData, TFormValidator>;
 };
 
 export function SubmitButton<
   TParentData,
-  TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
->({ form, onPress, ...buttonProps }: SubmitButtonProps<TParentData, TFormValidator>) {
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>({
+  form,
+  onPress,
+  ...buttonProps
+}: SubmitButtonProps<TParentData, TFormValidator>) {
   form = form || useForm();
   return (
     <Button

package/src/forms/Button/index.ts

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

package/src/forms/Checkbox/Checkbox.ts

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

package/src/forms/Checkbox/FieldCheckbox.stories.tsx

@@ -19,24 +19,26 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { FieldCheckboxProps } from './FieldCheckbox';
-import { Button, YStack } from 'tamagui';
-import { FieldCheckbox } from './FieldCheckbox';
-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 { FieldCheckboxProps } from "./FieldCheckbox";
+import { FieldCheckbox } from "./FieldCheckbox";
 
 export default {
-  title: 'forms/FieldCheckBox',
+  title: "forms/FieldCheckBox",
   component: FieldCheckbox,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
-export const main = (args) => <FieldCheckbox onCheckedChange={action('onCheckedChange')} {...args} />;
+export const main = (args) => (
+  <FieldCheckbox onCheckedChange={action("onCheckedChange")} {...args} />
+);
 const mainArgs: FieldCheckboxProps = {
-  label: 'Hello',
+  label: "Hello",
   error: undefined,
-  helperText: 'please check this box',
+  helperText: "please check this box",
   checked: undefined,
 };
 main.args = mainArgs;
@@ -48,7 +50,7 @@ export const form = () => {
       bar: true,
     },
     onSubmit: async ({ value }) => {
-      action('onSubmit')(value);
+      action("onSubmit")(value);
     },
   });
   return (

package/src/forms/Checkbox/FieldCheckbox.tsx

@@ -19,36 +19,69 @@
  * limitations under the License.
  */
 
-import React, { useId } from 'react';
-import type { CheckboxProps } from './Checkbox';
-import type { CheckedState, FontSizeTokens } from 'tamagui';
-import type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
-import type { FieldComponentProps } from '../types';
-import type { FormFieldProps } from '../FormField';
-import { CheckRegular, MinusRegular } from '../../icons';
-import { Checkbox } from './Checkbox';
-import { Field, useForm } from '@tanstack/react-form';
-import { useProps, XStack, Label, Paragraph, YStack } 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 { CheckedState, FontSizeTokens } from "tamagui";
+import { Label, Paragraph, XStack, YStack, useProps } from "tamagui";
+import { CheckRegular, MinusRegular } from "../../icons";
+import type { FormFieldProps } from "../FormField";
+import type { FieldComponentProps } from "../types";
+import type { CheckboxProps } from "./Checkbox";
+import { Checkbox } from "./Checkbox";
 
 export type FieldCheckboxProps<
   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<CheckboxProps, 'checked' | 'children' | 'onCheckedChange'> &
-  Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'children'>> & {
-    checkboxProps?: Omit<CheckboxProps, 'children' | 'checked' | 'id' | 'onCheckedChange'>;
+> = Omit<
+  FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
+  "children" | "field"
+> &
+  Pick<CheckboxProps, "checked" | "children" | "onCheckedChange"> &
+  Partial<
+    Omit<
+      FieldComponentProps<
+        TParentData,
+        TName,
+        TFieldValidator,
+        TFormValidator,
+        TData
+      >,
+      "children"
+    >
+  > & {
+    checkboxProps?: Omit<
+      CheckboxProps,
+      "children" | "checked" | "id" | "onCheckedChange"
+    >;
   };
 
 export function FieldCheckbox<
   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: FieldCheckboxProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+>(
+  props: FieldCheckboxProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
   let {
     asyncAlways,
     asyncDebounceMs,
@@ -75,20 +108,21 @@ export function FieldCheckbox<
   } = useProps(props);
   form = form || useForm();
   const id = fieldProps.id || useId();
-  helperText = error && typeof error === 'string' ? error : helperText;
+  helperText = error && typeof error === "string" ? error : helperText;
   if (!form || !name) {
     return (
-      <YStack theme={error ? 'red' : undefined} {...fieldProps} onBlur={onBlur}>
+      <YStack theme={error ? "red" : undefined} {...fieldProps} onBlur={onBlur}>
         <XStack gap="$2" alignItems="center">
           <Checkbox
             {...checkboxProps}
             onCheckedChange={onCheckedChange}
-            checked={checked ?? (defaultValue as boolean | 'indeterminate')}
+            checked={checked ?? (defaultValue as boolean | "indeterminate")}
             id={id}
           >
             {children ?? (
               <Checkbox.Indicator>
-                {(checked ?? (defaultValue as boolean | 'indeterminate')) === 'indeterminate' ? (
+                {(checked ?? (defaultValue as boolean | "indeterminate")) ===
+                "indeterminate" ? (
                   <MinusRegular />
                 ) : (
                   <CheckRegular />
@@ -97,14 +131,23 @@ export function FieldCheckbox<
             )}
           </Checkbox>
           {label && (
-            <Label htmlFor={id} size={size || '$3'} color={error ? '$red10' : undefined} {...labelProps}>
+            <Label
+              htmlFor={id}
+              size={size || "$3"}
+              color={error ? "$red10" : undefined}
+              {...labelProps}
+            >
               {label}
-              {required && ` *`}
+              {required && " *"}
             </Label>
           )}
         </XStack>
         {helperText && (
-          <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+          <Paragraph
+            paddingLeft="$2"
+            size={size as FontSizeTokens}
+            color={error ? "$red10" : undefined}
+          >
             {helperText}
           </Paragraph>
         )}
@@ -125,11 +168,13 @@ export function FieldCheckbox<
       validators={validators}
     >
       {(field) => {
-        error = field.state.meta.errors.length ? field.state.meta.errors.join(', ') : error;
-        helperText = typeof error === 'string' ? error : helperText;
+        error = field.state.meta.errors.length
+          ? field.state.meta.errors.join(", ")
+          : error;
+        helperText = typeof error === "string" ? error : helperText;
         return (
           <YStack
-            theme={error ? 'red' : undefined}
+            theme={error ? "red" : undefined}
             {...fieldProps}
             onBlur={(e) => {
               field.handleBlur();
@@ -148,7 +193,8 @@ export function FieldCheckbox<
               >
                 {children ?? (
                   <Checkbox.Indicator>
-                    {(checked ?? (field.state.value as CheckedState)) === 'indeterminate' ? (
+                    {(checked ?? (field.state.value as CheckedState)) ===
+                    "indeterminate" ? (
                       <MinusRegular />
                     ) : (
                       <CheckRegular />
@@ -157,14 +203,23 @@ export function FieldCheckbox<
                 )}
               </Checkbox>
               {label && (
-                <Label htmlFor={id} size={size || '$3'} color={error ? '$red10' : undefined} {...labelProps}>
+                <Label
+                  htmlFor={id}
+                  size={size || "$3"}
+                  color={error ? "$red10" : undefined}
+                  {...labelProps}
+                >
                   {label}
-                  {required && ` *`}
+                  {required && " *"}
                 </Label>
               )}
             </XStack>
             {helperText && (
-              <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+              <Paragraph
+                paddingLeft="$2"
+                size={size as FontSizeTokens}
+                color={error ? "$red10" : undefined}
+              >
                 {helperText}
               </Paragraph>
             )}

package/src/forms/Checkbox/index.ts

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

package/src/forms/FormField.tsx

@@ -19,17 +19,31 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { DeepKeys, DeepValue, Validator, FieldApi } from '@tanstack/form-core';
-import type { LabelProps, YStackProps, SizeTokens, FontSizeTokens } from 'tamagui';
-import type { ReactNode } from 'react';
-import { Label, Paragraph, YStack, useProps } from 'tamagui';
+import type {
+  DeepKeys,
+  DeepValue,
+  FieldApi,
+  Validator,
+} from "@tanstack/form-core";
+import React from "react";
+import type { ReactNode } from "react";
+import type {
+  FontSizeTokens,
+  LabelProps,
+  SizeTokens,
+  YStackProps,
+} from "tamagui";
+import { Label, Paragraph, YStack, useProps } from "tamagui";
 
 export interface FormFieldProps<
   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>,
 > extends YStackProps {
   children: ReactNode;
@@ -38,7 +52,7 @@ export interface FormFieldProps<
   helperText?: string;
   id?: string;
   label?: ReactNode;
-  labelProps?: Omit<LabelProps, 'htmlFor' | 'ref'>;
+  labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
   required?: boolean;
   size?: SizeTokens;
 }
@@ -46,25 +60,59 @@ export interface FormFieldProps<
 export function FormField<
   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: FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
-  let { children, error, field, helperText, id, label, labelProps, required, size, ...stackProps } = useProps(props);
-  error = field?.state.meta.errors.length ? field.state.meta.errors.join(', ') : error;
-  helperText = error && typeof error === 'string' ? error : helperText;
+>(
+  props: FormFieldProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+) {
+  let {
+    children,
+    error,
+    field,
+    helperText,
+    id,
+    label,
+    labelProps,
+    required,
+    size,
+    ...stackProps
+  } = useProps(props);
+  error = field?.state.meta.errors.length
+    ? field.state.meta.errors.join(", ")
+    : error;
+  helperText = error && typeof error === "string" ? error : helperText;
   return (
-    <YStack theme={error ? 'red' : undefined} {...stackProps}>
+    <YStack theme={error ? "red" : undefined} {...stackProps}>
       {label && (
-        <Label htmlFor={id} size={size || '$3'} color={error ? '$red10' : undefined} {...labelProps}>
+        <Label
+          htmlFor={id}
+          size={size || "$3"}
+          color={error ? "$red10" : undefined}
+          {...labelProps}
+        >
           {label}
-          {required && ` *`}
+          {required && " *"}
         </Label>
       )}
       <YStack>
         {children}
         {helperText && (
-          <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+          <Paragraph
+            paddingLeft="$2"
+            size={size as FontSizeTokens}
+            color={error ? "$red10" : undefined}
+          >
             {helperText}
           </Paragraph>
         )}