@saas-ui/react 2.11.2 → 3.0.0-alpha.0

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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,225 @@
+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

@@ -0,0 +1,201 @@
+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

@@ -0,0 +1,88 @@
+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',
+  },
+})

package/src/theme/recipes/chakra/empty-state.ts

@@ -0,0 +1,88 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { emptyStateAnatomy } from '@chakra-ui/react/anatomy'
+
+export const emptyStateSlotRecipe = defineSlotRecipe({
+  slots: emptyStateAnatomy.keys(),
+  className: 'chakra-empty-state',
+  base: {
+    root: {
+      width: 'full',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    indicator: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: 'fg.subtle',
+      _icon: {
+        boxSize: '1em',
+      },
+    },
+    title: {
+      fontWeight: 'semibold',
+    },
+    description: {
+      textStyle: 'sm',
+      color: 'fg.muted',
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: {
+          px: '4',
+          py: '6',
+        },
+        title: {
+          textStyle: 'md',
+        },
+        content: {
+          gap: '4',
+        },
+        indicator: {
+          textStyle: '2xl',
+        },
+      },
+      md: {
+        root: {
+          px: '8',
+          py: '12',
+        },
+        title: {
+          textStyle: 'lg',
+        },
+        content: {
+          gap: '6',
+        },
+        indicator: {
+          textStyle: '4xl',
+        },
+      },
+      lg: {
+        root: {
+          px: '12',
+          py: '16',
+        },
+        title: {
+          textStyle: 'xl',
+        },
+        content: {
+          gap: '8',
+        },
+        indicator: {
+          textStyle: '6xl',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})