@multiplatform.one/components 1.0.1 → 1.0.2

package/src/forms/FormSwitch/index.tsx

@@ -48,6 +48,11 @@ export function FormSwitch({
   thumbStyle,
   ...switchProps
 }: FormSwitchProps) {
+  switchProps = {
+    size: '$3',
+    animation: 'quick',
+    ...switchProps,
+  };
   const formContext = useFormContext();
   const id = useId();
   if (!formContext) {
@@ -92,8 +97,3 @@ export function FormSwitch({
     />
   );
 }
-
-FormSwitch.defaultProps = {
-  size: '$3',
-  Animation: 'quick',
-};

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

@@ -12,7 +12,7 @@ export default {
 };
 
 export const main = () => (
-  <SelectButton onValueChange={action('onValueChange')} space>
+  <SelectButton onValueChange={action('onValueChange')} gap>
     <SelectButton.OptionButton index={0} value="bmw">
       <Text>BMW</Text>
     </SelectButton.OptionButton>
@@ -29,7 +29,7 @@ export const main = () => (
 );
 
 export const x = () => (
-  <SelectButton onValueChange={action('onValueChange')} space xStack>
+  <SelectButton onValueChange={action('onValueChange')} gap xStack>
     <SelectButton.OptionButton index={0} value="bmw">
       <Text>BMW</Text>
     </SelectButton.OptionButton>

package/src/forms/SimpleForm/SimpleForm.stories.tsx

@@ -39,7 +39,7 @@ export default {
 };
 
 export const main = () => (
-  <SimpleForm padding="$4" space>
+  <SimpleForm padding="$4" gap>
     <FormInput name="firstName" label="First Name" />
     <FormInput name="lastName" label="Last Name" />
     <FormSelectSimple name="favoriteColor" label="Favorite Color">
@@ -76,7 +76,7 @@ export const main = () => (
       name="Gender"
       label="Gender"
       horizontal
-      spacingProps={{ space: true }}
+      spacingProps={{ gap: true }}
     /> */}
     <FormSubmitButton onSubmit={action('onSubmit')}>Submit</FormSubmitButton>
   </SimpleForm>

package/src/images/SvgUri/index.tsx

@@ -1,10 +1,31 @@
+/**
+ * File: /src/images/SvgUri/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 10-10-2023 06:39:34
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
-import type { StackPropsBase } from 'tamagui';
+import type { StackProps } from 'tamagui';
 import type { UriProps } from 'react-native-svg';
 
 const logger = console;
 
-export type SvgUriProps = StackPropsBase & UriProps;
+export type SvgUriProps = StackProps & UriProps;
 
 export function SvgUri(_props: SvgUriProps) {
   logger.error('use SimpleImage instead of SvgUri');

package/src/index.ts

@@ -26,7 +26,8 @@ export * from './helpers';
 export * from './hooks';
 export * from './images';
 export * from './layouts';
-export * from './mdx';
+// export * from './mdx';
+export * from './organize';
 export * from './panels';
 export * from './table';
-export * from './organize';
+export * from './tints';

package/src/layouts/Debug/index.tsx

@@ -25,11 +25,12 @@ import type { ThemeName } from 'tamagui';
 import type { WithLayout } from 'multiplatform.one';
 import { Select, YStack, XStack, Adapt, Popover, Circle } from 'tamagui';
 import { SelectSimple } from '../../forms/SelectSimple';
-import { createWithLayout, useLocale, useSupportedLocales } from 'multiplatform.one';
+import { createWithLayout } from 'multiplatform.one';
+import { useLocale, useSupportedLocales } from '@multiplatform.one/locales';
+import { useTheme } from 'multiplatform.one/theme';
+import { useTint } from '../../tints';
 // @ts-ignore
 import { config } from 'app/config';
-// @ts-ignore
-import { useThemeState } from 'app/state/theme';
 
 type ColorScheme = 'dark' | 'light';
 
@@ -46,21 +47,22 @@ export function DebugLayout<DebugViewProps>({
   children,
   debugView,
   debugViewProps,
-  rootThemeNames,
-  size,
-  subThemeNames,
+  rootThemeNames = ['system', 'light', 'dark'],
+  size = 12,
+  subThemeNames = ['blue', 'gray', 'green', 'orange', 'pink', 'purple', 'red', 'yellow'],
 }: DebugLayoutProps<DebugViewProps>) {
+  const { familiesNames, setFamily, name } = useTint();
   const DebugView = debugView;
+  const [theme, setTheme] = useTheme();
   const [locale, setLocale] = useLocale();
-  const themeState = useThemeState();
   const supportedLocales = useSupportedLocales();
 
   function handleSubThemeChange(subTheme: ThemeName) {
-    themeState.setSub(subTheme);
+    setTheme({ sub: subTheme });
   }
 
-  function handleRootThemeChange(rootTheme: ThemeName) {
-    themeState.setRoot(rootTheme as ColorScheme);
+  function handleRootThemeChange(rootTheme: ColorScheme) {
+    setTheme({ root: rootTheme });
   }
 
   function renderSubThemeItems() {
@@ -93,9 +95,19 @@ export function DebugLayout<DebugViewProps>({
     });
   }
 
+  function renderTintFamilyItems() {
+    return familiesNames.map((name, i) => {
+      return (
+        <Select.Item key={i + name} index={i} value={name}>
+          <Select.ItemText>{name}</Select.ItemText>
+        </Select.Item>
+      );
+    });
+  }
+
   function renderDebug() {
     return (
-      <XStack space m="$4" width={size} height={size}>
+      <XStack gap m="$4" width={size} height={size}>
         <Popover placement="right" size="$5">
           <Popover.Trigger>
             <Circle cursor="pointer" backgroundColor="$color9" width={size} height={size} />
@@ -109,22 +121,22 @@ export function DebugLayout<DebugViewProps>({
             </Popover.Sheet>
           </Adapt>
           <Popover.Content borderWidth={1} borderColor="$borderColor" elevate>
-            <XStack space>
+            <XStack gap>
               <SelectSimple
                 id="root-theme"
-                placeholder={themeState.root}
+                placeholder={theme.root}
                 width={96}
-                value={themeState.root}
+                value={theme.root || 'system'}
                 onValueChange={handleRootThemeChange}
               >
                 {renderRootThemeItems()}
               </SelectSimple>
               <SelectSimple
                 id="sub-theme"
-                placeholder={themeState.sub}
+                placeholder={theme.sub}
                 width={96}
                 backgroundColor="$color5"
-                value={themeState.sub}
+                value={theme.sub?.toString()}
                 onValueChange={handleSubThemeChange}
               >
                 {renderSubThemeItems()}
@@ -139,6 +151,16 @@ export function DebugLayout<DebugViewProps>({
               >
                 {renderLocaleItems()}
               </SelectSimple>
+              <SelectSimple
+                id="tint-families"
+                width={96}
+                placeholder={name.toString()}
+                backgroundColor="$color10"
+                value={name.toString()}
+                onValueChange={setFamily}
+              >
+                {renderTintFamilyItems()}
+              </SelectSimple>
             </XStack>
             {DebugView && <DebugView {...(debugViewProps as any)} />}
           </Popover.Content>
@@ -156,12 +178,6 @@ export function DebugLayout<DebugViewProps>({
   );
 }
 
-DebugLayout.defaultProps = {
-  rootThemeNames: ['light', 'dark'],
-  size: 12,
-  subThemeNames: ['blue', 'gray', 'green', 'orange', 'pink', 'purple', 'red', 'yellow'],
-};
-
 export function createWithDebugLayout<DebugViewProps>(
   extraLayouts?: WithLayout<any>[],
   debugLayoutProps: CreateWithDebugLayout<DebugViewProps> = {},

package/src/mdx/MDX/index.tsx

@@ -1,5 +1,26 @@
+/**
+ * File: /src/mdx/MDX/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 10-10-2023 06:39:34
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
-import type { Components } from '@mdx-js/react/lib';
+import type { MDXComponents } from '@mdx-js/react/lib';
 import type { DebugProp } from '@tamagui/web';
 import { mdxComponents } from '../components';
 import { useCompileAndEvaluateMdx } from '../hooks';
@@ -7,7 +28,7 @@ import { useMDXComponents } from '@mdx-js/react';
 
 export interface MDXProps {
   children: string;
-  components?: Components;
+  components?: MDXComponents;
   debug?: DebugProp;
 }
 

package/src/mdx/MDXCodeBlock/index.tsx

@@ -107,7 +107,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               </ScrollView>
             </Pre>
           )}
-          <XStack position="absolute" top="$3" right="$3" space="$3">
+          <XStack position="absolute" top="$3" right="$3" gap="$3">
             {(!isCollapsed || !isCollapsible) && !disableCopy && (
               <TooltipSimple label={hasCopied ? 'Copied' : 'Copy to clipboard'}>
                 <Button

package/src/mdx/components.tsx

@@ -1,5 +1,26 @@
+/**
+ * File: /src/mdx/components.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 10-10-2023 06:39:34
+ * Author: Clay Risser
+ * -----
+ * BitSpur (c) Copyright 2021 - 2024
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import React from 'react';
-import type { Components } from '@mdx-js/react/lib';
+import type { MDXComponents } from '@mdx-js/react/lib';
 import type { XStackProps } from 'tamagui';
 import { CodeInline } from '../code/Code';
 import { H1, H2, H3, H4, H5, H6, Paragraph, XStack, Text, YStack, styled } from 'tamagui';
@@ -33,7 +54,7 @@ export const TableHighlight = styled(YStack, {
   fullscreen: true,
 });
 
-export const mdxComponents: Components = {
+export const mdxComponents: MDXComponents = {
   h1: (props) => <H1 marginBottom="$2" {...sanitizeProps(props)} />,
   h2: (props) => <H2 paddingTop="$8" marginTop="$-4" marginBottom="$2" data-heading {...sanitizeProps(props)} />,
   h3: ({ children, id, ...props }) => (
@@ -126,15 +147,7 @@ export const mdxComponents: Components = {
 };
 
 const LinkHeading = ({ id, children, ...props }: { id?: string } & XStackProps) => (
-  <XStack
-    href={`#${id}`}
-    id={id}
-    data-id={id}
-    display="inline-flex"
-    alignItems="center"
-    space
-    {...sanitizeProps(props)}
-  >
+  <XStack href={`#${id}`} id={id} data-id={id} display="inline-flex" alignItems="center" gap {...sanitizeProps(props)}>
     {children}
     <YStack opacity={0.3}>
       <IconLink size={12} color="var(--color)" aria-hidden />

package/src/mdx/hooks/useCompileMdx.ts

@@ -1,3 +1,24 @@
+/*
+ *  File: /src/mdx/hooks/useCompileMdx.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 10-10-2023 06:39:34
+ *  Author: Clay Risser
+ *  -----
+ *  BitSpur (c) Copyright 2021 - 2024
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
 import { useState, useEffect } from 'react';
 
 export function useCompileMdx(
@@ -35,7 +56,7 @@ export function useCompileMdx(
         ...options,
         development: false,
         outputFormat: 'function-body',
-        useDynamicImport: true,
+        // useDynamicImport: true,
         remarkPlugins: [
           ...(options?.remarkPlugins || []),
           [remarkMdxFrontmatter, { name: 'frontmatter' }],

package/src/mdx/hooks/useEvaluateMdx.ts

@@ -1,6 +1,27 @@
+/*
+ *  File: /src/mdx/hooks/useEvaluateMdx.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 10-10-2023 06:39:34
+ *  Author: Clay Risser
+ *  -----
+ *  BitSpur (c) Copyright 2021 - 2024
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
 import * as jsxRuntime from 'react/jsx-runtime';
 import type { ComponentType } from 'react';
-import type { Components } from '@mdx-js/react/lib';
+import type { MDXComponents } from '@mdx-js/react/lib';
 import { useState, useEffect } from 'react';
 
 export function useEvaluateMdx(code?: string, options?: Record<string, any>) {
@@ -18,7 +39,7 @@ function evaluateMdx(code: string, options?: Record<string, any>) {
   return run(code, {
     ...jsxRuntime,
     ...options,
-  }).default as ComponentType<{ components?: Components }>;
+  }).default as ComponentType<{ components?: MDXComponents }>;
 }
 
 const AsyncFunction = Object.getPrototypeOf(run).constructor;

package/src/mdx/util/rehypeHighlightLine.ts

@@ -1,3 +1,24 @@
+/*
+ *  File: /src/mdx/util/rehypeHighlightLine.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 10-10-2023 06:39:34
+ *  Author: Clay Risser
+ *  -----
+ *  BitSpur (c) Copyright 2021 - 2024
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
 // https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-line.ts
 
 import parse from 'rehype-parse';
@@ -95,6 +116,8 @@ function applyMultilineFix(ast: any) {
     match.replace(/\n/g, `</span>\n<span class="token ${token}">`),
   );
   // HTML to AST
-  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(html);
-  return hast.children;
+  const hast = unified()
+    .use(parse as any, { emitParseErrors: true, fragment: true })
+    .parse(html);
+  return (hast as any).children;
 }

package/src/mdx/util/rehypeHighlightWord.ts

@@ -1,3 +1,24 @@
+/*
+ *  File: /src/mdx/util/rehypeHighlightWord.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 10-10-2023 06:39:34
+ *  Author: Clay Risser
+ *  -----
+ *  BitSpur (c) Copyright 2021 - 2024
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
 // https://github.com/tamagui/tamagui/blob/086f4d0a3ffb1767547e1ab9f51502c59a098504/apps/site/lib/rehype-highlight-word.ts
 
 import parse from 'rehype-parse';
@@ -10,6 +31,8 @@ const CALLOUT = /__(.*?)__/g;
 export function rehypeHighlightWord(code: Node | Content[]) {
   const html = toHtml(code);
   const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
-  const hast = unified().use(parse, { emitParseErrors: true, fragment: true }).parse(result);
-  return hast.children;
+  const hast = unified()
+    .use(parse as any, { emitParseErrors: true, fragment: true })
+    .parse(result);
+  return (hast as any).children;
 }

package/src/organize/SimpleAccordion/index.tsx

@@ -19,9 +19,9 @@
  * limitations under the License.
  */
 
-import type { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'ui';
-import { Accordion } from 'ui';
 import React from 'react';
+import type { AccordionContentProps, AccordionItemProps, AccordionTriggerProps } from 'tamagui';
+import { Accordion } from 'tamagui';
 
 interface SimpleAccordionProps {
   children: React.ReactNode;

package/src/organize/SimpleCarousel/index.tsx

@@ -111,7 +111,7 @@ export function SimpleCarousel({
         left={0}
         right={0}
       >
-        <XStack space="$2" ai="center" marginBottom={20}>
+        <XStack gap="$2" ai="center" marginBottom={20}>
           {Array.from({ length: childrenCount }).map((_, index) => (
             <Stack
               height={index === currentSlide ? 4 : 1}
@@ -132,7 +132,6 @@ export function SimpleCarousel({
     <YStack overflow="hidden">
       <XStack
         transform={[{ translateX: -currentSlide * (carouselRef.current?.clientWidth || 1) }]}
-        // TODO: transitionDuration="transform 0.5s ease"
         width="100%"
         animation="lazy"
         {...props}

package/src/organize/SimpleInput/index.tsx

@@ -19,11 +19,11 @@
  * limitations under the License.
  */
 
+import React, { useEffect } from 'react';
 import type { ButtonProps, ColorTokens, InputProps, SizeTokens, ThemeTokens, XStackProps } from 'tamagui';
+import type { IconProps } from '@tamagui/helpers-icon';
 import { Button, Input, XGroup, XStack } from 'tamagui';
 import { Eye, EyeOff } from '@tamagui/lucide-icons';
-import React, { useEffect } from 'react';
-import type { SvgProps } from 'react-native-svg';
 
 export interface BaseIconProps {
   size?: number | SizeTokens;
@@ -48,8 +48,6 @@ interface CustomProps {
   passwordWithoutIcon?: boolean;
 }
 
-type IconProps = SvgProps & BaseIconProps;
-
 export type SimpleInputProps = Omit<InputProps & CustomProps & XStackProps, 'ref'>;
 
 export function SimpleInput({

package/src/organize/SimpleListItem/SimpleListItem.stories.tsx

@@ -36,7 +36,7 @@ function Main() {
   const [orientation, setOrientation] = React.useState(true);
   return (
     <YStack fullscreen>
-      <XStack width={200} alignItems="center" space="$4" alignSelf="flex-start">
+      <XStack width={200} alignItems="center" gap="$4" alignSelf="flex-start">
         <Label paddingRight="$0" minWidth={90} justifyContent="flex-end" size="$2">
           {orientation ? 'Horizontal' : 'Vertical'}
         </Label>

package/src/organize/SimpleTabs/SimpleTabs.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import React from 'react';
-import { SimpleTabs, TabContent, TabsList, Tab } from './index';
-import { H5, SizableText } from 'tamagui';
+import { SimpleTabs, TabsList, TabsContent } from './index';
+import { H5, SizableText, Tabs, Separator, YStack, Switch, XStack, Text } from 'tamagui';
 
 export default {
   title: 'organize/SimpleTabs',
@@ -33,52 +33,47 @@ export default {
   },
 };
 
-export const horizontalTabs = () => (
-  <SimpleTabs defaultRoute="contact" fullScreen>
-    <TabsList>
-      <Tab path="home">Home</Tab>
-      <Tab path="about">About</Tab>
-      <Tab path="contact">Contact</Tab>
-      <Tab path="description">
-        <SizableText textAlign="center">Description</SizableText>
-      </Tab>
-    </TabsList>
-    <TabContent route="home">
-      <H5>Home</H5>
-    </TabContent>
-    <TabContent route="about">
-      <H5>About</H5>
-    </TabContent>
-    <TabContent route="contact">
-      <H5>Contact</H5>
-    </TabContent>
-    <TabContent route="description" jc="center" ai="center">
-      <H5>Default</H5>
-    </TabContent>
-  </SimpleTabs>
-);
+const Main = () => {
+  const [orientation, setOrientation] = React.useState<'horizontal' | 'vertical'>('horizontal');
+  const [isHorizontal, setIsHorizontal] = React.useState(true);
 
-export const verticalTabs = () => (
-  <SimpleTabs defaultRoute="about" orientation="vertical" width="100%" height="100%">
-    <TabsList fullHeight={false}>
-      <Tab path="home">Home</Tab>
-      <Tab path="about">About</Tab>
-      <Tab path="contact">Contact</Tab>
-      <Tab path="description">
-        <SizableText textAlign="center">Description</SizableText>
-      </Tab>
-    </TabsList>
-    <TabContent route="home">
-      <H5>Home</H5>
-    </TabContent>
-    <TabContent route="about">
-      <H5>About</H5>
-    </TabContent>
-    <TabContent route="contact">
-      <H5>Contact</H5>
-    </TabContent>
-    <TabContent route="description" jc="center" ai="center">
-      <H5>Default</H5>
-    </TabContent>
-  </SimpleTabs>
-);
+  React.useEffect(() => {
+    setOrientation(isHorizontal ? 'horizontal' : 'vertical');
+  }, [isHorizontal]);
+
+  return (
+    <YStack gap padding="$4">
+      <XStack gap>
+        <Switch size="$3" checked={isHorizontal} onCheckedChange={setIsHorizontal}>
+          <Switch.Thumb animation="bouncy" />
+        </Switch>
+        <Text>{orientation}</Text>
+      </XStack>
+      <SimpleTabs orientation={orientation} defaultValue="home">
+        <TabsList justifyContent="space-between" orientation={orientation}>
+          <Tabs.Tab value="home" flex={1}>
+            <SizableText textAlign="center">Home</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab value="about" flex={1}>
+            <SizableText textAlign="center">About</SizableText>
+          </Tabs.Tab>
+          <Tabs.Tab value="contact" flex={1}>
+            <SizableText textAlign="center">Contact</SizableText>
+          </Tabs.Tab>
+        </TabsList>
+        <Separator vertical={orientation === 'vertical'} />
+        <TabsContent value="home">
+          <H5>Home</H5>
+        </TabsContent>
+        <TabsContent value="about">
+          <H5>About</H5>
+        </TabsContent>
+        <TabsContent value="contact">
+          <H5>Contact</H5>
+        </TabsContent>
+      </SimpleTabs>
+    </YStack>
+  );
+};
+
+export const main = () => <Main />;