@multiplatform.one/components 1.0.8 → 2.0.1

package/src/mdx/HR/index.tsx

@@ -1,8 +1,29 @@
+/**
+ * File: /src/mdx/HR/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 { EnsureFlexed, YStack } from 'tamagui';
 
 export const HR = () => (
-  <YStack my="$10" mx="auto" maxWidth="50%">
+  <YStack marginTop="$10" marginBottom="$10" marginLeft="auto" marginRight="auto" maxWidth="50%">
     <EnsureFlexed />
     <YStack borderBottomColor="$borderColor" borderBottomWidth={1} flex={1} />
   </YStack>

package/src/mdx/LI/index.tsx

@@ -1,8 +1,29 @@
+/**
+ * File: /src/mdx/LI/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 { Paragraph, styled } from 'tamagui';
 
 export const LI = styled(Paragraph, {
   display: 'list-item' as any,
   tag: 'li',
   size: '$5',
-  pb: '$1',
+  paddingBottom: '$1',
 });

package/src/mdx/MDXCodeBlock/MDXCodeBlock.stories.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/mdx/MDXCodeBlock/MDXCodeBlock.stories.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 { Meta, StoryObj } from '@storybook/react';
 import { MDXCodeBlock } from './index';
@@ -14,7 +35,7 @@ const meta: Meta = {
 export const main: StoryObj<typeof MDXCodeBlock> = {
   args: {
     isCollapsible: false,
-    bg: '$color3',
+    background: '$color3',
   },
   render: (args) => (
     <MDXCodeBlock {...args}>

package/src/mdx/MDXCodeBlock/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/mdx/MDXCodeBlock/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 23-04-2024 05:52:22
+ * 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, { useEffect, useRef, useState, useContext } from 'react';
 import type { MDXCodeBlockContextValue } from './MDXCodeBlockContext';
 import { Button, Spacer, TooltipSimple, XStack, YStack, getTokens } from 'tamagui';
@@ -50,7 +71,7 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
   }, [preRef]);
 
   return (
-    <YStack position="relative" mb="$4">
+    <YStack position="relative" marginBottom="$4">
       <ErrorBoundary>
         <YStack
           position="relative"
@@ -62,16 +83,16 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
         >
           {(!isCollapsed || !isCollapsible) && isCutoff && (
             <LinearGradient
-              pos="absolute"
-              b={0}
-              l={0}
-              r={0}
+              position="absolute"
+              bottom={0}
+              left={0}
+              right={0}
               height={200}
               colors={['$backgroundTransparent', '$background']}
-              zi={1000}
+              zIndex={1000}
             >
-              <Spacer f={1} />
-              <Button onPress={() => setIsCutoff(!isCutoff)} als="center">
+              <Spacer flex={1} />
+              <Button onPress={() => setIsCutoff(!isCutoff)} alignSelf="center">
                 Show more
               </Button>
               <Spacer size="$4" />
@@ -83,8 +104,8 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
               data-invert-line-highlight={isHighlightingLines}
               data-line-numbers={showLineNumbers}
               className={className}
-              p={0}
-              mb={0}
+              padding={0}
+              marginBottom={0}
               id={id}
             >
               <ScrollView
@@ -96,9 +117,9 @@ export function MDXCodeBlock(props: MDXCodeBlockProps) {
                 <Code
                   backgroundColor="transparent"
                   className={className}
-                  f={1}
-                  lineHeight={tokens.space[size || '$5']}
-                  p="$4"
+                  flex={1}
+                  lineHeight={tokens.space[size || '$5'] as any}
+                  padding="$4"
                   size={size ?? '$5'}
                   {...codeProps}
                 >

package/src/mdx/hooks/useCompileAndEvaluateMdx.ts

@@ -1,3 +1,25 @@
+/*
+ *  File: /src/mdx/hooks/useCompileAndEvaluateMdx.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 04-04-2024 15:50:39
+ *  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 type { ComponentType } from 'react';
 import { useCompileMdx } from './useCompileMdx';
 import { useEvaluateMdx } from './useEvaluateMdx';
 
@@ -5,7 +27,15 @@ export function useCompileAndEvaluateMdx(
   source: string,
   compileOptions?: Record<string, any>,
   evaluateOptions?: Record<string, any>,
-) {
+): {
+  Component?:
+    | ComponentType<{
+        components?: Record<string, any> | undefined;
+      }>
+    | undefined;
+  code?: string;
+  frontmatter?: Record<string, any>;
+} {
   const { code, frontmatter } = useCompileMdx(source, compileOptions);
   const Component = useEvaluateMdx(code, evaluateOptions);
   if (!code || !frontmatter || !Component) return {};

package/src/organize/SimpleCarousel/index.tsx

@@ -75,24 +75,24 @@ export function SimpleCarousel({
       <>
         <YStack
           height={carouselRef.current?.clientHeight}
-          bg="$backgroundTransparent"
+          backgroundColor="$backgroundTransparent"
           position="absolute"
           justifyContent="center"
           alignItems="center"
         >
-          <Text onPress={handlePressPrev} cur="pointer">
+          <Text onPress={handlePressPrev} cursor="pointer">
             <ChevronLeft color="gray" size="$4" {...sideArrowStyle} />
           </Text>
         </YStack>
         <YStack
           height={carouselRef.current?.clientHeight}
-          bg="$backgroundTransparent"
+          backgroundColor="$backgroundTransparent"
           position="absolute"
           justifyContent="center"
           alignItems="center"
           right={0}
         >
-          <Text onPress={handlePressNext} cur="pointer">
+          <Text onPress={handlePressNext} cursor="pointer">
             <ChevronRight color="gray" size="$4" {...sideArrowStyle} />
           </Text>
         </YStack>
@@ -104,18 +104,18 @@ export function SimpleCarousel({
     return (
       <YStack
         height={carouselRef.current?.clientHeight}
-        bg="$backgroundTransparent"
+        backgroundColor="$backgroundTransparent"
         position="absolute"
         justifyContent="flex-end"
         alignItems="center"
         left={0}
         right={0}
       >
-        <XStack gap="$2" ai="center" marginBottom={20}>
+        <XStack gap="$2" alignItems="center" marginBottom={20}>
           {Array.from({ length: childrenCount }).map((_, index) => (
             <Stack
               height={index === currentSlide ? 4 : 1}
-              bg="$backgroundHover"
+              backgroundColor="$backgroundHover"
               width={30}
               key={index}
               cursor="pointer"

package/src/organize/SimpleInput/index.tsx

@@ -120,8 +120,8 @@ export function SimpleInput({
             icon={iconBefore}
             unstyled={!(iconsAsButton || iconBeforeAsButton)}
             {...iconStyle}
-            jc="center"
-            ai="center"
+            justifyContent="center"
+            alignItems="center"
             scaleIcon={iconBeforeScale}
             width={iconPercentage}
             height="100%"
@@ -163,8 +163,8 @@ export function SimpleInput({
               setBorderWidth(2);
               props.onPress?.(e);
             }}
-            jc="center"
-            ai="center"
+            justifyContent="center"
+            alignItems="center"
             padding={0}
           />
         )}
@@ -172,8 +172,8 @@ export function SimpleInput({
           <Button
             icon={iconAfter}
             {...iconStyle}
-            jc="center"
-            ai="center"
+            justifyContent="center"
+            alignItems="center"
             scaleIcon={iconBeforeScale}
             width={iconPercentage}
             unstyled={!(iconsAsButton || iconAfterAsButton)}

package/src/organize/SimpleListItem/index.tsx

@@ -1,8 +1,29 @@
-import type { ListItemProps, YStackProps } from 'ui';
-import { YGroup, ListItem, XGroup } from 'ui';
+/**
+ * File: /src/organize/SimpleListItem/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 type { ListItemProps, YStackProps } from 'tamagui';
+import { YGroup, ListItem, XGroup } from 'tamagui';
 import React, { useMemo } from 'react';
 
-type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical' };
+type SimpleListProps = YStackProps & { orientation?: 'horizontal' | 'vertical'; bg?: any };
 type SimpleListItemProps = ListItemProps & {};
 
 const ListContext = React.createContext<SimpleListProps | null>(null);
@@ -26,7 +47,7 @@ export function SimpleListItem({ ...props }: SimpleListItemProps) {
   }
 
   function renderItem() {
-    return <ListItem hoverTheme bg={context?.backgroundColor || context?.bg} {...props} />;
+    return <ListItem hoverTheme backgroundColor={context?.backgroundColor || (context as any)?.bg} {...props} />;
   }
 
   if (context.orientation === 'horizontal') {

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

@@ -51,7 +51,7 @@ export const Custom = () => (
     <YStack gap width={400}>
       <AlertDialog.Title>Custom Alert</AlertDialog.Title>
       <AlertDialog.Description>this is a custom alert</AlertDialog.Description>
-      <XStack gap="$3" jc="flex-end">
+      <XStack gap="$3" justifyContent="flex-end">
         <AlertDialog.Cancel asChild>
           <Button>cancel</Button>
         </AlertDialog.Cancel>

package/src/panels/SimpleAlertDialog/index.tsx

@@ -71,7 +71,13 @@ export function SimpleAlertDialog({
         {trigger}
       </AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Overlay key="overlay" animation="quick" o={0.5} enterStyle={{ o: 0 }} exitStyle={{ o: 0 }} />
+        <AlertDialog.Overlay
+          key="overlay"
+          animation="quick"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
         <AlertDialog.Content
           bordered
           elevate
@@ -98,7 +104,7 @@ export function SimpleAlertDialog({
             <YStack gap>
               {title && <AlertDialog.Title {...titleStyle}>{title}</AlertDialog.Title>}
               {description && <AlertDialog.Description {...descriptionStyle}>{description}</AlertDialog.Description>}
-              <XStack gap="$3" jc="flex-end">
+              <XStack gap="$3" justifyContent="flex-end">
                 <AlertDialog.Cancel asChild>
                   <Button onPress={onCancel} {...buttonStyle}>
                     {cancel || 'cancel'}

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

@@ -60,7 +60,7 @@ function OpenWithFunction() {
   }
 
   return (
-    <YStack ai="flex-start">
+    <YStack alignItems="flex-start">
       <Button onPress={handlePress}>Press Me</Button>
       <SimpleDialog open={open} onOpenChange={handleOpenChange} title="Fill the details">
         <Input placeholder="Enter your first name" />

package/src/panels/SimpleDialog/index.tsx

@@ -84,7 +84,7 @@ export function SimpleDialog({
       }}
     >
       {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
-      <Adapt when="sm" platform="touch">
+      <Adapt when={'sm' as any} platform="touch">
         <Sheet zIndex={200000} modal dismissOnSnapToBottom>
           <Sheet.Frame padding="$4" gap>
             <Adapt.Contents />
@@ -100,9 +100,9 @@ export function SimpleDialog({
         <Dialog.Overlay
           key="overlay"
           animation="bouncy"
-          o={0.5}
-          enterStyle={{ o: 0 }}
-          exitStyle={{ o: 0 }}
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
           {...overlayStyle}
         />
         <Dialog.Content
@@ -143,7 +143,7 @@ export function SimpleDialog({
           {!withoutCloseButton && (
             <Unspaced>
               <Dialog.Close asChild gap>
-                <Button pos="absolute" t="$3" r="$3" size="$2" circular gap icon={X} />
+                <Button position="absolute" top="$3" right="$3" size="$2" circular gap icon={X} />
               </Dialog.Close>
             </Unspaced>
           )}

package/src/panels/SimplePopover/index.tsx

@@ -50,7 +50,7 @@ export function SimplePopover({
       <Popover.Trigger asChild {...triggerStyle}>
         {trigger}
       </Popover.Trigger>
-      <Adapt when="sm" platform="touch">
+      <Adapt when={'sm' as any} platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom>
           <Popover.Sheet.Frame padding="$4">
             <Adapt.Contents />

package/src/providers/AnimationDriverTogglerContextProvider.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/providers/AnimationDriverTogglerContextProvider.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 { AnimationDriver } from '@tamagui/web';
 import type { PropsWithChildren } from 'react';
@@ -25,7 +46,9 @@ export const AnimationDriverTogglerContextProvider = ({
   const [driverName, setDriverName] = useState<(typeof ANIMATION_DRIVERS)[number]>('react-native');
 
   const nextDriver = () => {
-    setDriverName(ANIMATION_DRIVERS[(ANIMATION_DRIVERS.indexOf(driverName) + 1) % ANIMATION_DRIVERS.length]);
+    const nextIndex = (ANIMATION_DRIVERS.indexOf(driverName) + 1) % ANIMATION_DRIVERS.length;
+    const nextDriverName = ANIMATION_DRIVERS[nextIndex];
+    setDriverName(nextDriverName as (typeof ANIMATION_DRIVERS)[number]);
   };
 
   const driver = useMemo(() => {

package/src/table/Table/index.tsx

@@ -1,3 +1,24 @@
+/**
+ * File: /src/table/Table/index.tsx
+ * Project: @multiplatform.one/components
+ * File Created: 04-04-2024 15:50:39
+ * 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 { TableCell } from '../TableCell';
 import { TableCol } from '../TableCol';
@@ -8,20 +29,20 @@ const StyledTableFrame = styled(ThemeableStack, {
   name: 'Table',
   context: TableContext,
   bordered: true,
-  br: '$4',
-  ov: 'hidden',
-  my: '$4',
+  borderRadius: '$4',
+  overflow: 'hidden',
+  marginVertical: '$4',
 });
 
 export const TableFrame = ({ heading, children, ...props }) => {
   return (
     <StyledTableFrame overflow={'scroll' as any} {...props}>
       {!!heading && (
-        <TableCell size="$4" bc="$color1" fow="500" color="$color9">
+        <TableCell size="$4" backgroundColor="$color1" fontWeight="500" color="$color9">
           {heading}
         </TableCell>
       )}
-      <XStack minWidth="100%" ai="stretch">
+      <XStack minWidth="100%" alignItems="stretch">
         {children}
       </XStack>
     </StyledTableFrame>

package/src/table/TableCell/index.ts

@@ -1,21 +1,42 @@
+/*
+ *  File: /src/table/TableCell/index.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 04-04-2024 15:50:39
+ *  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 { TableContext } from '../TableContext';
 import { styled, Paragraph } from 'tamagui';
 
 export const TableCell = styled(Paragraph, {
   name: 'TableCell',
   context: TableContext,
-  bbw: 1,
-  bbc: '$borderColor',
-  fd: 'row',
-  ai: 'center',
-  pos: 'relative',
-  f: 1,
-  jc: 'center',
-  ta: 'center',
-  h: '$4',
-  p: '$2',
-  px: '$3',
-  size: '$5',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  flexDirection: 'row',
+  alignItems: 'center',
+  position: 'relative',
+  flex: 1,
+  justifyContent: 'center',
+  textAlign: 'center',
+  height: '$4',
+  padding: '$2',
+  paddingHorizontal: '$3',
+  fontSize: '$5',
   ellipse: true,
   variants: {
     head: {

package/src/table/TableCol/index.ts

@@ -1,12 +1,33 @@
+/*
+ *  File: /src/table/TableCol/index.ts
+ *  Project: @multiplatform.one/components
+ *  File Created: 04-04-2024 15:50:39
+ *  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 { TableContext } from '../TableContext';
 import { styled, ThemeableStack } from 'tamagui';
 
 export const TableCol = styled(ThemeableStack, {
   name: 'TableCol',
   context: TableContext,
-  brw: 1,
-  brc: '$borderColor',
-  f: 1,
-  mr: -1,
-  fd: 'column',
+  borderWidth: 1,
+  borderColor: '$borderColor',
+  flex: 1,
+  marginRight: -1,
+  flexDirection: 'column',
 });