@saas-ui/react 3.0.0-alpha.1 → 3.0.0-alpha.3

package/src/theme/recipes/chakra/code.ts

@@ -1,17 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-import { badgeRecipe } from './badge'
-
-const { variants, defaultVariants } = badgeRecipe
-
-export const codeRecipe = defineRecipe({
-  className: 'chakra-code',
-  base: {
-    fontFamily: 'mono',
-    alignItems: 'center',
-    display: 'inline-flex',
-    borderRadius: 'l2',
-  },
-  variants,
-  defaultVariants,
-})

package/src/theme/recipes/chakra/collapsible.ts

@@ -1,20 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { collapsibleAnatomy } from '@chakra-ui/react/anatomy'
-
-export const collapsibleSlotRecipe = defineSlotRecipe({
-  slots: collapsibleAnatomy.keys(),
-  className: 'chakra-collapsible',
-  base: {
-    content: {
-      overflow: 'hidden',
-      _open: {
-        animationName: 'expand-height, fade-in',
-        animationDuration: 'moderate',
-      },
-      _closed: {
-        animationName: 'collapse-height, fade-out',
-        animationDuration: 'moderate',
-      },
-    },
-  },
-})

package/src/theme/recipes/chakra/container.ts

@@ -1,26 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const containerRecipe = defineRecipe({
-  className: 'chakra-container',
-  base: {
-    position: 'relative',
-    maxWidth: '8xl',
-    w: '100%',
-    mx: 'auto',
-    px: { base: '4', md: '6', lg: '8' },
-  },
-  variants: {
-    centerContent: {
-      true: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-      },
-    },
-    fluid: {
-      true: {
-        maxWidth: 'full',
-      },
-    },
-  },
-})

package/src/theme/recipes/chakra/data-list.ts

@@ -1,80 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { dataListAnatomy } from '@chakra-ui/react/anatomy'
-
-export const dataListSlotRecipe = defineSlotRecipe({
-  slots: dataListAnatomy.keys(),
-  className: 'chakra-data-list',
-  base: {
-    itemLabel: {
-      color: 'fg.muted',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '1',
-    },
-    itemValue: {
-      display: 'flex',
-      minWidth: '0',
-      flex: '1',
-    },
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        root: {
-          display: 'flex',
-          flexDirection: 'column',
-        },
-        item: {
-          display: 'inline-flex',
-          alignItems: 'center',
-          gap: '4',
-        },
-        itemLabel: {
-          minWidth: '120px',
-        },
-      },
-      vertical: {
-        root: {
-          display: 'flex',
-          flexDirection: 'column',
-        },
-        item: {
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '1',
-        },
-      },
-    },
-    size: {
-      sm: {
-        root: {
-          gap: '3',
-        },
-        item: {
-          textStyle: 'xs',
-        },
-      },
-      md: {
-        root: {
-          gap: '4',
-        },
-        item: {
-          textStyle: 'sm',
-        },
-      },
-      lg: {
-        root: {
-          gap: '5',
-        },
-        item: {
-          textStyle: 'md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    orientation: 'vertical',
-  },
-})

package/src/theme/recipes/chakra/dialog.ts

@@ -1,225 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { dialogAnatomy } from '@chakra-ui/react/anatomy'
-
-export const dialogSlotRecipe = defineSlotRecipe({
-  slots: dialogAnatomy.keys(),
-  className: 'chakra-dialog',
-  base: {
-    backdrop: {
-      bg: 'blackAlpha.500',
-      pos: 'fixed',
-      left: 0,
-      top: 0,
-      w: '100vw',
-      h: '100dvh',
-      zIndex: 'modal',
-      _open: {
-        animationName: 'fade-in',
-        animationDuration: 'slow',
-      },
-      _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'moderate',
-      },
-    },
-    positioner: {
-      display: 'flex',
-      width: '100vw',
-      height: '100dvh',
-      position: 'fixed',
-      left: 0,
-      top: 0,
-      '--dialog-z-index': 'zIndex.modal',
-      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
-      justifyContent: 'center',
-      overscrollBehaviorY: 'none',
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      width: '100%',
-      outline: 0,
-      borderRadius: 'l3',
-      textStyle: 'sm',
-      my: 'var(--dialog-margin, var(--dialog-base-margin))',
-      '--dialog-z-index': 'zIndex.modal',
-      zIndex: 'calc(var(--dialog-z-index) + var(--layer-index, 0))',
-      bg: 'bg.panel',
-      boxShadow: 'lg',
-      _open: {
-        animationDuration: 'moderate',
-      },
-      _closed: {
-        animationDuration: 'faster',
-      },
-    },
-    header: {
-      flex: 0,
-      px: '6',
-      pt: '6',
-      pb: '4',
-    },
-    body: {
-      flex: '1',
-      px: '6',
-      pt: '2',
-      pb: '6',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      gap: '3',
-      px: '6',
-      pt: '2',
-      pb: '4',
-    },
-    title: {
-      textStyle: 'lg',
-      fontWeight: 'semibold',
-    },
-    description: {
-      color: 'fg.muted',
-    },
-  },
-
-  variants: {
-    placement: {
-      center: {
-        positioner: {
-          alignItems: 'center',
-        },
-        content: {
-          '--dialog-base-margin': 'auto',
-          mx: 'auto',
-        },
-      },
-      top: {
-        positioner: {
-          alignItems: 'flex-start',
-        },
-        content: {
-          '--dialog-base-margin': 'spacing.16',
-          mx: 'auto',
-        },
-      },
-      bottom: {
-        positioner: {
-          alignItems: 'flex-end',
-        },
-        content: {
-          '--dialog-base-margin': 'spacing.16',
-          mx: 'auto',
-        },
-      },
-    },
-
-    scrollBehavior: {
-      inside: {
-        positioner: {
-          overflow: 'hidden',
-        },
-        content: {
-          maxH: 'calc(100% - 7.5rem)',
-        },
-        body: {
-          overflow: 'auto',
-        },
-      },
-      outside: {
-        positioner: {
-          overflow: 'auto',
-          pointerEvents: 'auto',
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        content: {
-          maxW: 'sm',
-        },
-      },
-      sm: {
-        content: {
-          maxW: 'md',
-        },
-      },
-      md: {
-        content: {
-          maxW: 'lg',
-        },
-      },
-      lg: {
-        content: {
-          maxW: '2xl',
-        },
-      },
-      xl: {
-        content: {
-          maxW: '4xl',
-        },
-      },
-      cover: {
-        positioner: {
-          padding: '10',
-        },
-        content: {
-          width: '100%',
-          height: '100%',
-          '--dialog-margin': '0',
-        },
-      },
-      full: {
-        content: {
-          maxW: '100vw',
-          minH: '100vh',
-          '--dialog-margin': '0',
-          borderRadius: '0',
-        },
-      },
-    },
-
-    motionPreset: {
-      scale: {
-        content: {
-          _open: { animationName: 'scale-in, fade-in' },
-          _closed: { animationName: 'scale-out, fade-out' },
-        },
-      },
-      'slide-in-bottom': {
-        content: {
-          _open: { animationName: 'slide-from-bottom, fade-in' },
-          _closed: { animationName: 'slide-to-bottom, fade-out' },
-        },
-      },
-      'slide-in-top': {
-        content: {
-          _open: { animationName: 'slide-from-top, fade-in' },
-          _closed: { animationName: 'slide-to-top, fade-out' },
-        },
-      },
-      'slide-in-left': {
-        content: {
-          _open: { animationName: 'slide-from-left, fade-in' },
-          _closed: { animationName: 'slide-to-left, fade-out' },
-        },
-      },
-      'slide-in-right': {
-        content: {
-          _open: { animationName: 'slide-from-right, fade-in' },
-          _closed: { animationName: 'slide-to-right, fade-out' },
-        },
-      },
-      none: {},
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    scrollBehavior: 'outside',
-    placement: 'top',
-    motionPreset: 'scale',
-  },
-})

package/src/theme/recipes/chakra/drawer.ts

@@ -1,201 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { drawerAnatomy } from '@chakra-ui/react/anatomy'
-
-export const drawerSlotRecipe = defineSlotRecipe({
-  slots: drawerAnatomy.keys(),
-  className: 'chakra-drawer',
-  base: {
-    backdrop: {
-      bg: 'blackAlpha.500',
-      pos: 'fixed',
-      insetInlineStart: 0,
-      top: 0,
-      w: '100vw',
-      h: '100dvh',
-      zIndex: 'modal',
-      _open: {
-        animationName: 'fade-in',
-        animationDuration: 'slow',
-      },
-      _closed: {
-        animationName: 'fade-out',
-        animationDuration: 'moderate',
-      },
-    },
-    positioner: {
-      display: 'flex',
-      width: '100vw',
-      height: '100dvh',
-      position: 'fixed',
-      insetInlineStart: 0,
-      top: 0,
-      zIndex: 'modal',
-      overscrollBehaviorY: 'none',
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      width: '100%',
-      outline: 0,
-      zIndex: 'modal',
-      textStyle: 'sm',
-      maxH: '100dvh',
-      color: 'inherit',
-      bg: 'bg.panel',
-      boxShadow: 'lg',
-      _open: {
-        animationDuration: 'slowest',
-        animationTimingFunction: 'ease-in-smooth',
-      },
-      _closed: {
-        animationDuration: 'slower',
-        animationTimingFunction: 'ease-in-smooth',
-      },
-    },
-    header: {
-      flex: 0,
-      px: '6',
-      pt: '6',
-      pb: '4',
-    },
-    body: {
-      px: '6',
-      py: '2',
-      flex: '1',
-      overflow: 'auto',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-end',
-      gap: '3',
-      px: '6',
-      pt: '2',
-      pb: '4',
-    },
-    title: {
-      textStyle: 'lg',
-      fontWeight: 'semibold',
-    },
-    description: {
-      color: 'fg.muted',
-    },
-  },
-
-  variants: {
-    size: {
-      xs: {
-        content: {
-          maxW: 'xs',
-        },
-      },
-      sm: {
-        content: {
-          maxW: 'md',
-        },
-      },
-      md: {
-        content: {
-          maxW: 'lg',
-        },
-      },
-      lg: {
-        content: {
-          maxW: '2xl',
-        },
-      },
-      xl: {
-        content: {
-          maxW: '4xl',
-        },
-      },
-      full: {
-        content: {
-          maxW: '100vw',
-          h: '100dvh',
-        },
-      },
-    },
-
-    placement: {
-      start: {
-        positioner: {
-          justifyContent: 'flex-start',
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: 'slide-from-left-full, fade-in',
-              _rtl: 'slide-from-right-full, fade-in',
-            },
-          },
-          _closed: {
-            animationName: {
-              base: 'slide-to-left-full, fade-out',
-              _rtl: 'slide-to-right-full, fade-out',
-            },
-          },
-        },
-      },
-
-      end: {
-        positioner: {
-          justifyContent: 'flex-end',
-        },
-        content: {
-          _open: {
-            animationName: {
-              base: 'slide-from-right-full, fade-in',
-              _rtl: 'slide-from-left-full, fade-in',
-            },
-          },
-          _closed: {
-            animationName: {
-              base: 'slide-to-right-full, fade-out',
-              _rtl: 'slide-to-right-full, fade-out',
-            },
-          },
-        },
-      },
-
-      top: {
-        positioner: {
-          alignItems: 'flex-start',
-        },
-        content: {
-          maxW: '100%',
-          _open: { animationName: 'slide-from-top-full, fade-in' },
-          _closed: { animationName: 'slide-to-top-full, fade-out' },
-        },
-      },
-
-      bottom: {
-        positioner: {
-          alignItems: 'flex-end',
-        },
-        content: {
-          maxW: '100%',
-          _open: { animationName: 'slide-from-bottom-full, fade-in' },
-          _closed: { animationName: 'slide-to-bottom-full, fade-out' },
-        },
-      },
-    },
-
-    contained: {
-      true: {
-        positioner: {
-          padding: '4',
-        },
-        content: {
-          borderRadius: 'l3',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'xs',
-    placement: 'end',
-  },
-})

package/src/theme/recipes/chakra/editable.ts

@@ -1,88 +0,0 @@
-import { defineSlotRecipe, defineStyle } from '@chakra-ui/react'
-import { editableAnatomy } from '@chakra-ui/react/anatomy'
-
-const sharedStyles = defineStyle({
-  fontSize: 'inherit',
-  fontWeight: 'inherit',
-  textAlign: 'inherit',
-  bg: 'transparent',
-  borderRadius: 'l2',
-})
-
-export const editableSlotRecipe = defineSlotRecipe({
-  slots: editableAnatomy.keys(),
-  className: 'chakra-editable',
-  base: {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      position: 'relative',
-      gap: '1.5',
-      width: 'full',
-    },
-    preview: {
-      ...sharedStyles,
-      py: '1',
-      px: '1',
-      display: 'inline-flex',
-      alignItems: 'center',
-      transitionProperty: 'common',
-      transitionDuration: 'normal',
-      cursor: 'text',
-      _hover: {
-        bg: 'bg.muted',
-      },
-      _disabled: {
-        userSelect: 'none',
-      },
-    },
-    input: {
-      ...sharedStyles,
-      outline: '0',
-      py: '1',
-      px: '1',
-      transitionProperty: 'common',
-      transitionDuration: 'normal',
-      width: 'full',
-      focusVisibleRing: 'inside',
-      focusRingWidth: '2px',
-      _placeholder: { opacity: 0.6 },
-    },
-
-    control: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '1.5',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        root: {
-          textStyle: 'sm',
-        },
-        preview: { minH: '8' },
-        input: { minH: '8' },
-      },
-      md: {
-        root: {
-          textStyle: 'sm',
-        },
-        preview: { minH: '9' },
-        input: { minH: '9' },
-      },
-      lg: {
-        root: {
-          textStyle: 'md',
-        },
-        preview: { minH: '10' },
-        input: { minH: '10' },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})