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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-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: {},
-    },
-  },
-})