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

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

@@ -0,0 +1,68 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { fieldAnatomy } from '@chakra-ui/react/anatomy'
+
+export const fieldSlotRecipe = defineSlotRecipe({
+  className: 'chakra-field',
+  slots: fieldAnatomy.keys(),
+  base: {
+    requiredIndicator: {
+      color: 'fg.error',
+      lineHeight: '1',
+    },
+    root: {
+      display: 'flex',
+      width: '100%',
+      position: 'relative',
+      gap: '1.5',
+    },
+    label: {
+      display: 'flex',
+      alignItems: 'center',
+      textAlign: 'start',
+      textStyle: 'sm',
+      fontWeight: 'medium',
+      gap: '1',
+      userSelect: 'none',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+    errorText: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      fontWeight: 'medium',
+      gap: '1',
+      color: 'fg.error',
+      textStyle: 'xs',
+    },
+    helperText: {
+      color: 'fg.muted',
+      textStyle: 'xs',
+    },
+  },
+
+  variants: {
+    orientation: {
+      vertical: {
+        root: {
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+        },
+      },
+      horizontal: {
+        root: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        },
+        label: {
+          flex: '0 0 var(--field-label-width, 80px)',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})

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

@@ -0,0 +1,62 @@
+import { fieldsetAnatomy } from '@ark-ui/anatomy'
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const fieldsetSlotRecipe = defineSlotRecipe({
+  className: 'fieldset',
+  slots: [...fieldsetAnatomy.keys(), 'content'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+    },
+    legend: {
+      color: 'fg',
+      fontWeight: 'medium',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+    helperText: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    errorText: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      color: 'fg.error',
+      gap: '2',
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: { spaceY: '2' },
+        content: { gap: '1.5' },
+        legend: { textStyle: 'sm' },
+      },
+      md: {
+        root: { spaceY: '4' },
+        content: { gap: '4' },
+        legend: { textStyle: 'sm' },
+      },
+      lg: {
+        root: { spaceY: '6' },
+        content: { gap: '4' },
+        legend: { textStyle: 'md' },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})

package/src/theme/recipes/chakra/file-upload.ts

@@ -0,0 +1,96 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { fileUploadAnatomy } from '@chakra-ui/react/anatomy'
+
+export const fileUploadSlotRecipe = defineSlotRecipe({
+  className: 'chakra-file-upload',
+  slots: fileUploadAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4',
+      width: '100%',
+      alignItems: 'flex-start',
+    },
+    label: {
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    dropzone: {
+      background: 'bg',
+      borderRadius: 'l3',
+      borderWidth: '2px',
+      borderStyle: 'dashed',
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: '4',
+      justifyContent: 'center',
+      minHeight: '2xs',
+      px: '3',
+      py: '2',
+      transition: 'backgrounds',
+      focusVisibleRing: 'outside',
+      _hover: {
+        bg: 'bg.subtle',
+      },
+      _dragging: {
+        bg: 'colorPalette.subtle',
+        borderStyle: 'solid',
+        borderColor: 'colorPalette.solid',
+      },
+    },
+    dropzoneContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      gap: '1',
+      textStyle: 'sm',
+    },
+    item: {
+      textStyle: 'sm',
+      animationName: 'fade-in',
+      animationDuration: 'moderate',
+      background: 'bg',
+      borderRadius: 'l2',
+      borderWidth: '1px',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '3',
+      p: '4',
+    },
+    itemGroup: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3',
+    },
+    itemName: {
+      color: 'fg',
+      fontWeight: 'medium',
+      lineClamp: '1',
+    },
+    itemContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.5',
+      flex: '1',
+    },
+    itemSizeText: {
+      color: 'fg.muted',
+      textStyle: 'xs',
+    },
+    itemDeleteTrigger: {
+      alignSelf: 'flex-start',
+    },
+    itemPreviewImage: {
+      width: '10',
+      height: '10',
+      objectFit: 'scale-down',
+    },
+  },
+
+  defaultVariants: {},
+})

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

@@ -0,0 +1,27 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const headingRecipe = defineRecipe({
+  className: 'chakra-heading',
+  base: {
+    fontFamily: 'heading',
+    fontWeight: 'semibold',
+  },
+  variants: {
+    size: {
+      xs: { textStyle: 'xs' },
+      sm: { textStyle: 'sm' },
+      md: { textStyle: 'md' },
+      lg: { textStyle: 'lg' },
+      xl: { textStyle: 'xl' },
+      '2xl': { textStyle: '2xl' },
+      '3xl': { textStyle: '3xl' },
+      '4xl': { textStyle: '4xl' },
+      '5xl': { textStyle: '5xl' },
+      '6xl': { textStyle: '6xl' },
+      '7xl': { textStyle: '7xl' },
+    },
+  },
+  defaultVariants: {
+    size: 'xl',
+  },
+})

package/src/theme/recipes/chakra/hover-card.ts

@@ -0,0 +1,68 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { hoverCardAnatomy } from '@chakra-ui/react/anatomy'
+
+export const hoverCardSlotRecipe = defineSlotRecipe({
+  className: 'chakra-hover-card',
+  slots: hoverCardAnatomy.keys(),
+  base: {
+    content: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      textStyle: 'sm',
+      '--hovercard-bg': 'colors.bg.panel',
+      bg: 'var(--hovercard-bg)',
+      boxShadow: 'lg',
+      maxWidth: '80',
+      borderRadius: 'l3',
+      zIndex: 'popover',
+      transformOrigin: 'var(--transform-origin)',
+      outline: '0',
+      _open: {
+        animationStyle: 'slide-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'slide-fade-out',
+        animationDuration: 'faster',
+      },
+    },
+    arrow: {
+      '--arrow-size': 'sizes.3',
+      '--arrow-background': 'var(--hovercard-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: '0.5px',
+      borderInlineStartWidth: '0.5px',
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        content: {
+          padding: '3',
+        },
+      },
+      sm: {
+        content: {
+          padding: '4',
+        },
+      },
+      md: {
+        content: {
+          padding: '5',
+        },
+      },
+      lg: {
+        content: {
+          padding: '6',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,30 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const iconRecipe = defineRecipe({
+  className: 'chakra-icon',
+  base: {
+    display: 'inline-block',
+    lineHeight: '1em',
+    flexShrink: '0',
+    color: 'currentcolor',
+    verticalAlign: 'middle',
+    width: 'var(--icon-size)',
+    height: 'var(--icon-size)',
+  },
+
+  variants: {
+    size: {
+      inherit: { '--icon-size': '1em' },
+      xs: { '--icon-size': 'sizes.3' },
+      sm: { '--icon-size': 'sizes.4' },
+      md: { '--icon-size': 'sizes.5' },
+      lg: { '--icon-size': 'sizes.6' },
+      xl: { '--icon-size': 'sizes.7' },
+      '2xl': { '--icon-size': 'sizes.8' },
+    },
+  },
+
+  defaultVariants: {
+    size: 'inherit',
+  },
+})

package/src/theme/recipes/chakra/input-addon.ts

@@ -0,0 +1,40 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+import { inputRecipe } from './input'
+
+export const inputAddonRecipe = defineRecipe({
+  className: 'chakra-input-addon',
+  base: {
+    flex: '0 0 auto',
+    width: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    size: inputRecipe.variants!.size,
+    variant: {
+      outline: {
+        border: '1px solid',
+        borderColor: { _light: 'border', _dark: 'whiteAlpha.50' },
+        bg: 'bg.muted',
+      },
+      subtle: {
+        border: '2px solid',
+        borderColor: 'transparent',
+        bg: { _light: 'gray.100', _dark: 'whiteAlpha.50' },
+      },
+      flushed: {
+        borderBottom: '1px solid',
+        borderColor: 'inherit',
+        borderRadius: '0',
+        px: '0',
+        bg: 'transparent',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+})

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

@@ -0,0 +1,96 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const inputRecipe = defineRecipe({
+  className: 'chakra-input',
+  base: {
+    width: '100%',
+    minWidth: '0',
+    outline: '0',
+    position: 'relative',
+    appearance: 'none',
+    textAlign: 'start',
+    borderRadius: 'l2',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+    height: 'var(--input-height)',
+    minW: 'var(--input-height)',
+    '--focus-color': 'colors.colorPalette.focusRing',
+    '--error-color': 'colors.border.error',
+    _invalid: {
+      focusRingColor: 'var(--error-color)',
+      borderColor: 'var(--error-color)',
+    },
+  },
+
+  variants: {
+    size: {
+      '2xs': {
+        textStyle: 'xs',
+        px: '2',
+        '--input-height': 'sizes.7',
+      },
+      xs: {
+        textStyle: 'xs',
+        px: '2',
+        '--input-height': 'sizes.8',
+      },
+      sm: {
+        textStyle: 'sm',
+        px: '2.5',
+        '--input-height': 'sizes.9',
+      },
+      md: {
+        textStyle: 'sm',
+        px: '3',
+        '--input-height': 'sizes.10',
+      },
+      lg: {
+        textStyle: 'md',
+        px: '4',
+        '--input-height': 'sizes.11',
+      },
+      xl: {
+        textStyle: 'md',
+        px: '4.5',
+        '--input-height': 'sizes.12',
+      },
+      '2xl': {
+        textStyle: 'lg',
+        px: '5',
+        '--input-height': 'sizes.16',
+      },
+    },
+
+    variant: {
+      outline: {
+        bg: 'transparent',
+        borderWidth: '1px',
+        borderColor: 'border',
+        focusVisibleRing: 'inside',
+      },
+      subtle: {
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        bg: 'bg.muted',
+        focusVisibleRing: 'inside',
+      },
+      flushed: {
+        bg: 'transparent',
+        borderBottomWidth: '1px',
+        borderBottomColor: 'border',
+        borderRadius: '0',
+        px: '0',
+        _focusVisible: {
+          borderColor: 'var(--focus-color)',
+          boxShadow: '0px 1px 0px 0px var(--focus-color)',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+})

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

@@ -0,0 +1,60 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const kbdRecipe = defineRecipe({
+  className: 'chakra-kbd',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    fontWeight: 'medium',
+    fontFamily: 'mono',
+    flexShrink: '0',
+    whiteSpace: 'nowrap',
+    wordSpacing: '-0.5em',
+    userSelect: 'none',
+    px: '1',
+    borderRadius: 'l2',
+  },
+
+  variants: {
+    variant: {
+      raised: {
+        bg: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+        borderWidth: '1px',
+        borderBottomWidth: '2px',
+        borderColor: 'colorPalette.muted',
+      },
+      outline: {
+        borderWidth: '1px',
+        color: 'colorPalette.fg',
+      },
+      subtle: {
+        bg: 'colorPalette.muted',
+        color: 'colorPalette.fg',
+      },
+      plain: {
+        color: 'colorPalette.fg',
+      },
+    },
+
+    size: {
+      sm: {
+        textStyle: 'xs',
+        height: '4.5',
+      },
+      md: {
+        textStyle: 'sm',
+        height: '5',
+      },
+      lg: {
+        textStyle: 'md',
+        height: '6',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'raised',
+  },
+})

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

@@ -0,0 +1,37 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const linkRecipe = defineRecipe({
+  className: 'chakra-link',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    outline: 'none',
+    gap: '1.5',
+    cursor: 'pointer',
+    borderRadius: 'l1',
+    focusRing: 'outside',
+  },
+
+  variants: {
+    variant: {
+      underline: {
+        color: 'colorPalette.fg',
+        textDecoration: 'underline',
+        textUnderlineOffset: '3px',
+        textDecorationColor: 'currentColor/20',
+      },
+      plain: {
+        color: 'colorPalette.fg',
+        _hover: {
+          textDecoration: 'underline',
+          textUnderlineOffset: '3px',
+          textDecorationColor: 'currentColor/20',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'plain',
+  },
+})

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

@@ -0,0 +1,67 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { listAnatomy } from '@chakra-ui/react/anatomy'
+
+export const listSlotRecipe = defineSlotRecipe({
+  className: 'chakra-list',
+  slots: listAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--list-gap)',
+      '& :where(ul, ol)': {
+        marginTop: 'var(--list-gap)',
+      },
+    },
+    item: {
+      whiteSpace: 'normal',
+      display: 'list-item',
+    },
+    indicator: {
+      marginEnd: '2',
+      minHeight: '1lh',
+      flexShrink: 0,
+      display: 'inline-block',
+      verticalAlign: 'middle',
+    },
+  },
+
+  variants: {
+    variant: {
+      marker: {
+        root: {
+          listStyle: 'revert',
+          listStylePosition: 'inside',
+        },
+        item: {
+          _marker: {
+            color: 'fg.subtle',
+          },
+        },
+      },
+
+      plain: {
+        item: {
+          alignItems: 'flex-start',
+          display: 'inline-flex',
+        },
+      },
+    },
+
+    align: {
+      center: {
+        item: { alignItems: 'center' },
+      },
+      start: {
+        item: { alignItems: 'flex-start' },
+      },
+      end: {
+        item: { alignItems: 'flex-end' },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'marker',
+  },
+})

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

@@ -0,0 +1,27 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const markRecipe = defineRecipe({
+  className: 'chakra-mark',
+  base: {
+    bg: 'transparent',
+    color: 'inherit',
+    whiteSpace: 'nowrap',
+  },
+
+  variants: {
+    variant: {
+      subtle: {
+        bg: 'colorPalette.subtle',
+        color: 'inherit',
+      },
+      solid: {
+        bg: 'colorPalette.solid',
+        color: 'colorPalette.contrast',
+      },
+      text: {
+        fontWeight: 'medium',
+      },
+      plain: {},
+    },
+  },
+})