@multiplatform.one/components 5.0.1 → 5.0.7

package/src/organize/SimpleTabs/index.tsx

@@ -19,15 +19,14 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { TabsProps, TabsContentProps, TabsListProps } from 'tamagui';
-import { Separator } from 'tamagui';
-import { Tabs } from 'tamagui';
+import type { TabsContentProps, TabsListProps, TabsProps } from "tamagui";
+import { Separator } from "tamagui";
+import { Tabs } from "tamagui";
 
 export type SimpleTabsProps = TabsProps;
 
 export function SimpleTabs({ ...props }: SimpleTabsProps) {
-  if (props.orientation === 'vertical') return <VerticalTabs {...props} />;
+  if (props.orientation === "vertical") return <VerticalTabs {...props} />;
   return <HorizontalTabs {...props} />;
 }
 
@@ -90,8 +89,10 @@ export function TabsContent(props: TabsContentProps) {
 export function TabsList(props: TabsListProps) {
   return (
     <Tabs.List
-      separator={<Separator vertical={props.orientation === 'horizontal'} />}
-      disablePassBorderRadius={props.orientation === 'horizontal' ? 'bottom' : 'end'}
+      separator={<Separator vertical={props.orientation === "horizontal"} />}
+      disablePassBorderRadius={
+        props.orientation === "horizontal" ? "bottom" : "end"
+      }
       aria-label="Manage your account"
       {...props}
     >

package/src/organize/index.ts

@@ -19,8 +19,9 @@
  * limitations under the License.
  */
 
-export * from './SimpleAccordion';
-export * from './SimpleCarousel';
-export * from './SimpleInput';
-export * from './SimpleListItem';
-export * from './SimpleTabs';
+export * from "./SimpleAccordion";
+export * from "./SimpleCarousel";
+export * from "./SimpleInput";
+export * from "./SimpleListItem";
+export * from "./SimpleTabs";
+export * from "./SimpleParagraph";

package/src/panels/SimpleAlertDialog/SimpleAlertDialog.stories.tsx

@@ -19,15 +19,15 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SimpleAlertDialog } from './index';
-import { AlertDialog, Button, XStack, YStack } from 'tamagui';
-import type { AlterDialogSimpleProps } from './index';
+import { useState } from "react";
+import { AlertDialog, Button, XStack, YStack } from "tamagui";
+import type { AlterDialogSimpleProps } from "./index";
+import { SimpleAlertDialog } from "./index";
 
 export default {
-  title: 'panels/SimpleAlertDialog',
+  title: "panels/SimpleAlertDialog",
   component: SimpleAlertDialog,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = (args) => (
@@ -42,10 +42,10 @@ export const main = (args) => (
 );
 
 const mainArgs: AlterDialogSimpleProps = {
-  title: 'Are you sure?',
-  description: 'This action cannot be undone',
-  cancel: 'Cancel',
-  accept: 'Delete',
+  title: "Are you sure?",
+  description: "This action cannot be undone",
+  cancel: "Cancel",
+  accept: "Delete",
 };
 main.args = mainArgs;
 export const Custom = (args) => (
@@ -57,7 +57,7 @@ export const Custom = (args) => (
     {...mainArgs}
     {...args}
   >
-    <YStack gap width={400}>
+    <YStack gap="$4" width={400}>
       <AlertDialog.Title>Custom Alert</AlertDialog.Title>
       <AlertDialog.Description>this is a custom alert</AlertDialog.Description>
       <XStack gap="$3" justifyContent="flex-end">
@@ -73,7 +73,7 @@ export const Custom = (args) => (
 );
 
 const Open = (args) => {
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = useState(true);
   return (
     <YStack>
       <SimpleAlertDialog
@@ -85,7 +85,9 @@ const Open = (args) => {
         onOpenChange={setOpen}
         {...args}
       />
-      <Button onPress={() => setOpen((prev) => !prev)}>{open ? 'close' : 'open'}</Button>
+      <Button onPress={() => setOpen((prev) => !prev)}>
+        {open ? "close" : "open"}
+      </Button>
     </YStack>
   );
 };

package/src/panels/SimpleAlertDialog/index.tsx

@@ -19,18 +19,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { ReactNode } from 'react';
-import { AlertDialog, Button, XStack, YStack } from 'tamagui';
+import type { ReactNode } from "react";
+import { AlertDialog, Button, XStack, YStack } from "tamagui";
 import type {
+  AlertDialogActionProps,
   AlertDialogContentProps,
   AlertDialogDescriptionProps,
   AlertDialogProps,
   AlertDialogTitleProps,
   AlertDialogTriggerProps,
   ButtonProps,
-  AlertDialogActionProps,
-} from 'tamagui';
+} from "tamagui";
 
 export type AlterDialogSimpleProps = AlertDialogProps & {
   accept?: string;
@@ -38,7 +37,7 @@ export type AlterDialogSimpleProps = AlertDialogProps & {
   cancel?: string;
   title?: ReactNode;
   trigger?: JSX.Element | undefined;
-  description: ReactNode;
+  description?: ReactNode;
   titleStyle?: AlertDialogTitleProps;
   descriptionStyle?: AlertDialogDescriptionProps;
   contentStyle?: AlertDialogContentProps;
@@ -83,7 +82,7 @@ export function SimpleAlertDialog({
           elevate
           key="content"
           animation={[
-            'bouncy',
+            "bouncy",
             {
               opacity: {
                 overshootClamping: true,
@@ -101,18 +100,24 @@ export function SimpleAlertDialog({
           {children ? (
             children
           ) : (
-            <YStack gap>
-              {title && <AlertDialog.Title {...titleStyle}>{title}</AlertDialog.Title>}
-              {description && <AlertDialog.Description {...descriptionStyle}>{description}</AlertDialog.Description>}
+            <YStack gap="$4">
+              {title && (
+                <AlertDialog.Title {...titleStyle}>{title}</AlertDialog.Title>
+              )}
+              {description && (
+                <AlertDialog.Description {...descriptionStyle}>
+                  {description}
+                </AlertDialog.Description>
+              )}
               <XStack gap="$3" justifyContent="flex-end">
                 <AlertDialog.Cancel asChild>
                   <Button onPress={onCancel} {...buttonStyle}>
-                    {cancel || 'cancel'}
+                    {cancel || "cancel"}
                   </Button>
                 </AlertDialog.Cancel>
                 <AlertDialog.Action asChild {...actionStyle}>
                   <Button theme="active" onPress={onAccept} {...buttonStyle}>
-                    {accept || 'accept'}
+                    {accept || "accept"}
                   </Button>
                 </AlertDialog.Action>
               </XStack>

package/src/panels/SimpleDialog/SimpleDialog.stories.tsx

@@ -19,23 +19,23 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import type { Meta } from '@storybook/react';
-import { Button, Input, Dialog, YStack } from 'tamagui';
-import { SimpleDialog } from './index';
-import { action } from '@storybook/addon-actions';
-import { Text } from 'tamagui';
-import type { SimpleDialogProps } from './index';
+import { action } from "@storybook/addon-actions";
+import type { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Button, Dialog, Input, YStack } from "tamagui";
+import { Text } from "tamagui";
+import { SimpleDialog } from "./index";
+import type { SimpleDialogProps } from "./index";
 
 const meta: Meta = {
-  title: 'panels/SimpleDialog',
+  title: "panels/SimpleDialog",
   component: SimpleDialog,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 export const main = (args) => (
   <SimpleDialog
-    onOpenChange={action('onOpenChange')}
+    onOpenChange={action("onOpenChange")}
     trigger={<Button>Press Me</Button>}
     title="Fill the details"
     withoutCloseButton
@@ -50,7 +50,7 @@ export const main = (args) => (
 );
 const mainArgs: SimpleDialogProps = {
   // title: 'Simple Dialog Example',
-  description: 'This is a simple dialog example.',
+  description: "This is a simple dialog example.",
   withoutCloseButton: false,
 };
 main.args = mainArgs;
@@ -63,14 +63,18 @@ function OpenWithFunction() {
   }
 
   function handleOpenChange(open) {
-    action('onOpenChange')();
+    action("onOpenChange")();
     setOpen(open);
   }
 
   return (
     <YStack alignItems="flex-start">
       <Button onPress={handlePress}>Press Me</Button>
-      <SimpleDialog open={open} onOpenChange={handleOpenChange} title="Fill the details">
+      <SimpleDialog
+        open={open}
+        onOpenChange={handleOpenChange}
+        title="Fill the details"
+      >
         <Input placeholder="Enter your first name" />
         <Input placeholder="Enter your last name" />
         <Dialog.Close>
@@ -91,7 +95,7 @@ export const customPosition = (args) => (
     {...args}
     trigger={<Button>open Dialog</Button>}
     withoutCloseButton
-    portalStyle={{ jc: 'flex-start', paddingTop: 10 }}
+    portalStyle={{ jc: "flex-start", paddingTop: 10 }}
   >
     <YStack width={800} height={400}>
       <Input placeholder={args.search} />
@@ -100,7 +104,7 @@ export const customPosition = (args) => (
 );
 
 customPosition.args = {
-  search: 'search',
+  search: "search",
 };
 
 export const rightSideDialog = (args) => (
@@ -109,7 +113,7 @@ export const rightSideDialog = (args) => (
     asRightSideSheet
     withoutCloseButton
     transitionWidth={400}
-    contentStyle={{ animation: 'quick' }}
+    contentStyle={{ animation: "quick" }}
     {...args}
   >
     <YStack width={400}>
@@ -123,7 +127,7 @@ export const rightSideDialog = (args) => (
 
 rightSideDialog.args = {
   asRightSideSheet: true,
-  contentStyle: { animation: 'quick' },
+  contentStyle: { animation: "quick" },
   transitionWidth: 400,
 };
 
@@ -133,7 +137,7 @@ export const leftSideDialog = (args) => (
     asLeftSideSheet
     withoutCloseButton
     transitionWidth={300}
-    contentStyle={{ animation: 'lazy' }}
+    contentStyle={{ animation: "lazy" }}
     {...args}
   >
     <YStack width={300}>
@@ -147,6 +151,6 @@ export const leftSideDialog = (args) => (
 
 leftSideDialog.args = {
   asLeftSideSheet: true,
-  contentStyle: { animation: 'lazy' },
+  contentStyle: { animation: "lazy" },
   transitionWidth: 300,
 };

package/src/panels/SimpleDialog/index.tsx

@@ -19,19 +19,19 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import { X } from "@tamagui/lucide-icons";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
 import type {
-  DialogProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
   DialogContentProps,
-  DialogPortalProps,
+  DialogDescriptionProps,
   DialogOverlayProps,
+  DialogPortalProps,
+  DialogProps,
+  DialogTitleProps,
   SizeTokens,
-} from 'tamagui';
-import type { ReactNode } from 'react';
-import { Adapt, Button, Dialog, Sheet, Unspaced } from 'tamagui';
-import { X } from '@tamagui/lucide-icons';
+} from "tamagui";
+import { Adapt, Button, Dialog, Sheet, Unspaced } from "tamagui";
 
 export type SimpleDialogProps = DialogProps & {
   contentStyle?: DialogContentProps;
@@ -66,10 +66,10 @@ export function SimpleDialog({
   transitionWidth,
   ...props
 }: SimpleDialogProps) {
-  const [open, setOpen] = React.useState(props.open);
+  const [open, setOpen] = useState(props.open);
 
   useEffect(() => {
-    if (typeof props.open === 'undefined' || props.open === open) return;
+    if (typeof props.open === "undefined" || props.open === open) return;
     setOpen(props.open);
   }, [props.open]);
 
@@ -84,17 +84,17 @@ export function SimpleDialog({
       }}
     >
       {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
-      <Adapt when={'sm' as any} platform="touch">
+      <Adapt when={"sm" as any} platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
-          <Sheet.Frame padding="$4" gap>
+          <Sheet.Frame padding="$4" gap="$4">
             <Adapt.Contents />
           </Sheet.Frame>
           <Sheet.Overlay />
         </Sheet>
       </Adapt>
       <Dialog.Portal
-        {...(asRightSideSheet && { jc: 'flex-start', ai: 'flex-end' })}
-        {...(asLeftSideSheet && { jc: 'flex-start', ai: 'flex-start' })}
+        {...(asRightSideSheet && { jc: "flex-start", ai: "flex-end" })}
+        {...(asLeftSideSheet && { jc: "flex-start", ai: "flex-start" })}
         {...portalStyle}
       >
         <Dialog.Overlay
@@ -110,7 +110,7 @@ export function SimpleDialog({
           elevate
           key="content"
           animation={[
-            'quick',
+            "quick",
             {
               opacity: {
                 overshootClamping: true,
@@ -119,19 +119,19 @@ export function SimpleDialog({
           ]}
           enterStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
           exitStyle={{ x: 0, y: -150, opacity: 0, scale: 0.4 }}
-          gap
+          gap="$4"
           {...(asRightSideSheet && {
             enterStyle: { x: transitionWidth || 200, opacity: 0 },
             exitStyle: { x: transitionWidth || 200, opacity: 0 },
-            position: 'absolute',
+            position: "absolute",
             top: 0,
             bottom: 0,
           })}
           {...(asLeftSideSheet && {
             enterStyle: { x: -(transitionWidth || 100), opacity: 0 },
             exitStyle: { x: -(transitionWidth || 100), opacity: 0 },
-            animation: 'bouncy',
-            position: 'absolute',
+            animation: "bouncy",
+            position: "absolute",
             top: 0,
             bottom: 0,
           })}
@@ -140,12 +140,24 @@ export function SimpleDialog({
           <Dialog.Title disabled={!title} {...titleStyle}>
             {title}
           </Dialog.Title>
-          {description && <Dialog.Description {...descriptionStyle}>{description}</Dialog.Description>}
+          {description && (
+            <Dialog.Description {...descriptionStyle}>
+              {description}
+            </Dialog.Description>
+          )}
           {children}
           {!withoutCloseButton && (
             <Unspaced>
-              <Dialog.Close asChild gap>
-                <Button position="absolute" top="$3" right="$3" size="$2" circular gap icon={X} />
+              <Dialog.Close asChild gap="$4">
+                <Button
+                  position="absolute"
+                  top="$3"
+                  right="$3"
+                  size="$2"
+                  circular
+                  gap="$4"
+                  icon={X}
+                />
               </Dialog.Close>
             </Unspaced>
           )}

package/src/panels/SimplePopover/SimplePopover.stories.tsx

@@ -19,18 +19,31 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import { SimplePopover } from './index';
-import { Text, YStack, XStack, Switch, Label, Button, Input, Popover } from 'tamagui';
-import type { SimplePopoverProps } from './index';
+import { useState } from "react";
+import {
+  Button,
+  Input,
+  Label,
+  Popover,
+  Switch,
+  Text,
+  XStack,
+  YStack,
+} from "tamagui";
+import { SimplePopover } from "./index";
+import type { SimplePopoverProps } from "./index";
 
 export default {
-  title: 'panels/SimplePopover',
+  title: "panels/SimplePopover",
   component: SimplePopover,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 export const main = (args) => (
-  <SimplePopover trigger={<Button>Click here to get a Popover</Button>} title="Popover content" {...args}>
+  <SimplePopover
+    trigger={<Button>Click here to get a Popover</Button>}
+    title="Popover content"
+    {...args}
+  >
     <Text>Popover content</Text>
   </SimplePopover>
 );
@@ -39,7 +52,11 @@ function Hoverable(args) {
   const [hoverable, setHoverable] = useState(true);
   return (
     <YStack>
-      <SimplePopover hoverable={hoverable} trigger={<Button>Click here to get a Popover</Button>} {...args}>
+      <SimplePopover
+        hoverable={hoverable}
+        trigger={<Button>Click here to get a Popover</Button>}
+        {...args}
+      >
         <YStack>
           <Text>popover content</Text>
         </YStack>

package/src/panels/SimplePopover/index.tsx

@@ -1,7 +1,11 @@
-import type { PopoverArrowProps, PopoverContentProps, PopoverProps, PopoverTriggerProps } from 'tamagui';
-import { Adapt, Button, Popover } from 'tamagui';
-import React from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
+import type {
+  PopoverArrowProps,
+  PopoverContentProps,
+  PopoverProps,
+  PopoverTriggerProps,
+} from "tamagui";
+import { Adapt, Button, Popover } from "tamagui";
 
 export type SimplePopoverProps = PopoverProps & {
   contentStyle?: PopoverContentProps;
@@ -32,7 +36,11 @@ export function SimplePopover({
             <Adapt.Contents />
           </Popover.Sheet.Frame>
 
-          <Popover.Sheet.Overlay animation="lazy" enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <Popover.Sheet.Overlay
+            animation="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
         </Popover.Sheet>
       </Adapt>
       <Popover.Content
@@ -42,7 +50,7 @@ export function SimplePopover({
         exitStyle={{ y: -10, opacity: 0 }}
         elevate
         animation={[
-          'quick',
+          "quick",
           {
             opacity: {
               overshootClamping: true,
@@ -51,7 +59,13 @@ export function SimplePopover({
         ]}
         {...contentStyle}
       >
-        {arrow && <Popover.Arrow borderWidth={1} borderColor="$borderColor" {...arrowStyle} />}
+        {arrow && (
+          <Popover.Arrow
+            borderWidth={1}
+            borderColor="$borderColor"
+            {...arrowStyle}
+          />
+        )}
         {children}
       </Popover.Content>
     </Popover>

package/src/panels/SimpleSheet/SimpleSheet.stories.tsx

@@ -19,19 +19,21 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SimpleSheet } from './index';
-import type { Meta } from '@storybook/react';
-import { YStack, Button } from 'tamagui';
-import type { SimpleSheetProps } from './index';
-import { action } from '@storybook/addon-actions';
+import { action } from "@storybook/addon-actions";
+import type { Meta } from "@storybook/react";
+import { useState } from "react";
+import { Button, YStack } from "tamagui";
+import type { SimpleSheetProps } from "./index";
+import { SimpleSheet } from "./index";
 
 const meta: Meta = {
-  title: 'panels/SimpleSheet',
+  title: "panels/SimpleSheet",
   component: SimpleSheet,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
-export const main = (args) => <SimpleSheet onSheetChange={action('onSheetChange')} {...args} />;
+export const main = (args) => (
+  <SimpleSheet onSheetChange={action("onSheetChange")} {...args} />
+);
 const mainArgs: SimpleSheetProps = {
   forceRemoveScrollEnabled: true,
   modal: true,
@@ -45,7 +47,7 @@ const mainArgs: SimpleSheetProps = {
 };
 
 function Sheet() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
     <YStack padding="$4" fullscreen>

package/src/panels/SimpleSheet/index.tsx

@@ -19,21 +19,36 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import type { SheetProps, DialogOverlayProps, YStackProps } from 'tamagui';
-import { Sheet } from '@tamagui/sheet';
+import { Sheet } from "@tamagui/sheet";
+import type { DialogOverlayProps, SheetProps, YStackProps } from "tamagui";
 
 export type SimpleSheetProps = SheetProps & {
   overlayStyle?: DialogOverlayProps;
   frameStyle?: YStackProps;
 };
 
-export function SimpleSheet({ children, overlayStyle, frameStyle, ...props }: SimpleSheetProps) {
+export function SimpleSheet({
+  children,
+  overlayStyle,
+  frameStyle,
+  ...props
+}: SimpleSheetProps) {
   return (
     <Sheet zIndex={100_000} {...props}>
-      <Sheet.Overlay animation="lazy" enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} {...overlayStyle} />
+      <Sheet.Overlay
+        animation="lazy"
+        enterStyle={{ opacity: 0 }}
+        exitStyle={{ opacity: 0 }}
+        {...overlayStyle}
+      />
       <Sheet.Handle />
-      <Sheet.Frame padding="$4" justifyContent="center" alignItems="center" gap="$5" {...frameStyle}>
+      <Sheet.Frame
+        padding="$4"
+        justifyContent="center"
+        alignItems="center"
+        gap="$5"
+        {...frameStyle}
+      >
         {children}
       </Sheet.Frame>
     </Sheet>

package/src/panels/SimpleTooltip/SimpleTooltip.stories.tsx

@@ -19,26 +19,26 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { SimpleToolTipProps, SimpleTooltip } from './index';
-import { Button, Label, Switch, Text, XStack, YStack } from 'tamagui';
-import type { Meta } from '@storybook/react';
+import type { Meta } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { Button, Label, Switch, Text, XStack, YStack } from "tamagui";
+import { type SimpleToolTipProps, SimpleTooltip } from "./index";
 
 const meta: Meta = {
-  title: 'panels/SimpleTooltip',
+  title: "panels/SimpleTooltip",
   component: SimpleTooltip,
-  parameters: { status: { type: 'beta' } },
+  parameters: { status: { type: "beta" } },
 };
 
 function Tooltip(args: SimpleToolTipProps) {
-  const [arrow, setArrow] = React.useState(args.arrow);
+  const [arrow, setArrow] = useState(args.arrow);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setArrow(args.arrow);
   }, [args.arrow]);
   return (
     <YStack gap="$4">
-      <XStack gap padding="$4" alignItems="center">
+      <XStack gap="$4" padding="$4" alignItems="center">
         <Switch size="$3" checked={arrow} onCheckedChange={setArrow}>
           <Switch.Thumb animation="bouncy" />
         </Switch>
@@ -54,10 +54,10 @@ function Tooltip(args: SimpleToolTipProps) {
 export const main = (args) => <Tooltip {...args} />;
 main.args = {
   arrow: true,
-  themeStyle: { background: 'black', color: 'white' },
-  triggerStyle: { background: 'black', color: 'white' },
-  contentStyle: { background: 'black', color: 'white' },
-  arrowStyle: { background: 'black' },
+  themeStyle: { background: "black", color: "white" },
+  triggerStyle: { background: "black", color: "white" },
+  contentStyle: { background: "black", color: "white" },
+  arrowStyle: { background: "black" },
 };
 
 export default meta;