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

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

@@ -1,83 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { blockquoteAnatomy } from '@chakra-ui/react/anatomy'
-
-export const blockquoteSlotRecipe = defineSlotRecipe({
-  className: 'chakra-blockquote',
-  slots: blockquoteAnatomy.keys(),
-  base: {
-    root: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '2',
-    },
-    caption: {
-      textStyle: 'sm',
-      color: 'fg.muted',
-    },
-    icon: {
-      boxSize: '5',
-    },
-  },
-
-  variants: {
-    justify: {
-      start: {
-        root: {
-          alignItems: 'flex-start',
-          textAlign: 'start',
-        },
-      },
-      center: {
-        root: {
-          alignItems: 'center',
-          textAlign: 'center',
-        },
-      },
-      end: {
-        root: {
-          alignItems: 'flex-end',
-          textAlign: 'end',
-        },
-      },
-    },
-
-    variant: {
-      subtle: {
-        root: {
-          paddingX: '5',
-          borderStartWidth: '4px',
-          borderStartColor: 'colorPalette.muted',
-        },
-        icon: {
-          color: 'colorPalette.fg',
-        },
-      },
-
-      solid: {
-        root: {
-          paddingX: '5',
-          borderStartWidth: '4px',
-          borderStartColor: 'colorPalette.solid',
-        },
-        icon: {
-          color: 'colorPalette.solid',
-        },
-      },
-
-      plain: {
-        root: {
-          paddingX: '5',
-        },
-        icon: {
-          color: 'colorPalette.solid',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'subtle',
-    justify: 'start',
-  },
-})

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

@@ -1,94 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { breadcrumbAnatomy } from '@chakra-ui/react/anatomy'
-
-export const breadcrumbSlotRecipe = defineSlotRecipe({
-  className: 'chakra-breadcrumb',
-  slots: breadcrumbAnatomy.keys(),
-  base: {
-    list: {
-      display: 'flex',
-      alignItems: 'center',
-      wordBreak: 'break-word',
-      color: 'fg.muted',
-    },
-    link: {
-      outline: '0',
-      textDecoration: 'none',
-      borderRadius: 'l1',
-      focusRing: 'outside',
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '2',
-    },
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-    },
-    separator: {
-      color: 'fg.muted',
-      opacity: '0.8',
-      _icon: {
-        boxSize: '1em',
-      },
-    },
-    ellipsis: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      _icon: {
-        boxSize: '1em',
-      },
-    },
-  },
-
-  variants: {
-    variant: {
-      underline: {
-        link: {
-          color: 'colorPalette.fg',
-          textDecoration: 'underline',
-          textUnderlineOffset: '0.2em',
-          textDecorationColor: 'colorPalette.muted',
-        },
-        currentLink: {
-          color: 'colorPalette.fg',
-        },
-      },
-      plain: {
-        link: {
-          color: 'fg.muted',
-          _hover: { color: 'fg' },
-        },
-        currentLink: {
-          color: 'fg',
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        list: {
-          gap: '1',
-          textStyle: 'xs',
-        },
-      },
-      md: {
-        list: {
-          gap: '1.5',
-          textStyle: 'sm',
-        },
-      },
-      lg: {
-        list: {
-          gap: '2',
-          textStyle: 'md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'plain',
-    size: 'md',
-  },
-})

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

@@ -1,99 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { cardAnatomy } from '@chakra-ui/react/anatomy'
-
-export const cardSlotRecipe = defineSlotRecipe({
-  className: 'chakra-card',
-  slots: cardAnatomy.keys(),
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      minWidth: '0',
-      wordWrap: 'break-word',
-      borderRadius: 'l3',
-      color: 'fg',
-      textAlign: 'start',
-    },
-    title: {
-      fontWeight: 'semibold',
-    },
-    description: {
-      color: 'fg.muted',
-      fontSize: 'sm',
-    },
-    header: {
-      paddingInline: 'var(--card-padding)',
-      paddingTop: 'var(--card-padding)',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1.5',
-    },
-    body: {
-      padding: 'var(--card-padding)',
-      flex: '1',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '2',
-      paddingInline: 'var(--card-padding)',
-      paddingBottom: 'var(--card-padding)',
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        root: {
-          '--card-padding': 'spacing.4',
-        },
-        title: {
-          textStyle: 'md',
-        },
-      },
-      md: {
-        root: {
-          '--card-padding': 'spacing.6',
-        },
-        title: {
-          textStyle: 'lg',
-        },
-      },
-      lg: {
-        root: {
-          '--card-padding': 'spacing.7',
-        },
-        title: {
-          textStyle: 'xl',
-        },
-      },
-    },
-
-    variant: {
-      elevated: {
-        root: {
-          bg: 'bg.panel',
-          boxShadow: 'md',
-        },
-      },
-      outline: {
-        root: {
-          bg: 'bg.panel',
-          borderWidth: '1px',
-          borderColor: 'border',
-        },
-      },
-      subtle: {
-        root: {
-          bg: 'bg.muted',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-})

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

@@ -1,212 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { checkboxCardAnatomy } from '@chakra-ui/react/anatomy'
-
-import { checkmarkRecipe } from './checkmark'
-
-export const checkboxCardSlotRecipe = defineSlotRecipe({
-  slots: checkboxCardAnatomy.keys(),
-  className: 'chakra-checkbox-card',
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      userSelect: 'none',
-      position: 'relative',
-      borderRadius: 'l2',
-      flex: '1',
-      focusVisibleRing: 'outside',
-      _disabled: {
-        opacity: '0.8',
-        borderColor: 'border.subtle',
-      },
-      _invalid: {
-        outline: '2px solid',
-        outlineColor: 'border.error',
-      },
-    },
-    control: {
-      display: 'inline-flex',
-      flex: '1',
-      position: 'relative',
-      borderRadius: 'inherit',
-      justifyContent: 'var(--checkbox-card-justify)',
-      alignItems: 'var(--checkbox-card-align)',
-    },
-    label: {
-      fontWeight: 'medium',
-      display: 'flex',
-      alignItems: 'center',
-      gap: '2',
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-    description: {
-      opacity: '0.64',
-      textStyle: 'sm',
-    },
-    addon: {
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-    indicator: checkmarkRecipe.base,
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: '1',
-      gap: '1',
-      justifyContent: 'var(--checkbox-card-justify)',
-      alignItems: 'var(--checkbox-card-align)',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        root: {
-          textStyle: 'sm',
-        },
-        control: {
-          padding: '3',
-          gap: '1.5',
-        },
-        addon: {
-          px: '3',
-          py: '1.5',
-          borderTopWidth: '1px',
-        },
-        indicator: checkmarkRecipe.variants?.size.sm,
-      },
-      md: {
-        root: {
-          textStyle: 'sm',
-        },
-        control: {
-          padding: '4',
-          gap: '2.5',
-        },
-        addon: {
-          px: '4',
-          py: '2',
-          borderTopWidth: '1px',
-        },
-        indicator: checkmarkRecipe.variants?.size.md,
-      },
-      lg: {
-        root: {
-          textStyle: 'md',
-        },
-        control: {
-          padding: '4',
-          gap: '3.5',
-        },
-        addon: {
-          px: '4',
-          py: '2',
-          borderTopWidth: '1px',
-        },
-        indicator: checkmarkRecipe.variants?.size.lg,
-      },
-    },
-
-    variant: {
-      surface: {
-        root: {
-          borderWidth: '1px',
-          borderColor: 'border',
-          _checked: {
-            bg: 'colorPalette.subtle',
-            color: 'colorPalette.fg',
-            borderColor: 'colorPalette.muted',
-          },
-          _disabled: {
-            bg: 'bg.muted',
-          },
-        },
-        indicator: checkmarkRecipe.variants?.variant.solid,
-      },
-
-      subtle: {
-        root: {
-          bg: 'bg.muted',
-        },
-        control: {
-          _checked: {
-            bg: 'colorPalette.muted',
-            color: 'colorPalette.fg',
-          },
-        },
-        indicator: checkmarkRecipe.variants?.variant.plain,
-      },
-
-      outline: {
-        root: {
-          borderWidth: '1px',
-          borderColor: 'border',
-          _checked: {
-            boxShadow: '0 0 0 1px var(--shadow-color)',
-            boxShadowColor: 'colorPalette.solid',
-            borderColor: 'colorPalette.solid',
-          },
-        },
-        indicator: checkmarkRecipe.variants?.variant.solid,
-      },
-
-      solid: {
-        root: {
-          borderWidth: '1px',
-          _checked: {
-            bg: 'colorPalette.solid',
-            color: 'colorPalette.contrast',
-            borderColor: 'colorPalette.solid',
-          },
-        },
-        indicator: checkmarkRecipe.variants?.variant.inverted,
-      },
-    },
-
-    justify: {
-      start: {
-        root: { '--checkbox-card-justify': 'flex-start' },
-      },
-      end: {
-        root: { '--checkbox-card-justify': 'flex-end' },
-      },
-      center: {
-        root: { '--checkbox-card-justify': 'center' },
-      },
-    },
-
-    align: {
-      start: {
-        root: { '--checkbox-card-align': 'flex-start' },
-        content: { textAlign: 'start' },
-      },
-      end: {
-        root: { '--checkbox-card-align': 'flex-end' },
-        content: { textAlign: 'end' },
-      },
-      center: {
-        root: { '--checkbox-card-align': 'center' },
-        content: { textAlign: 'center' },
-      },
-    },
-
-    orientation: {
-      vertical: {
-        control: { flexDirection: 'column' },
-      },
-      horizontal: {
-        control: { flexDirection: 'row' },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'outline',
-    align: 'start',
-    orientation: 'horizontal',
-  },
-})

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

@@ -1,70 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { checkboxAnatomy } from '@chakra-ui/react/anatomy'
-
-import { checkmarkRecipe } from './checkmark'
-
-export const checkboxSlotRecipe = defineSlotRecipe({
-  slots: checkboxAnatomy.keys(),
-  className: 'chakra-checkbox',
-  base: {
-    root: {
-      display: 'inline-flex',
-      gap: '2',
-      alignItems: 'center',
-      verticalAlign: 'top',
-      position: 'relative',
-    },
-
-    control: checkmarkRecipe.base,
-
-    label: {
-      fontWeight: 'medium',
-      userSelect: 'none',
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-  },
-
-  variants: {
-    size: {
-      xs: {
-        root: { gap: '1.5' },
-        label: { textStyle: 'xs' },
-        control: checkmarkRecipe.variants?.size?.xs,
-      },
-      sm: {
-        root: { gap: '2' },
-        label: { textStyle: 'sm' },
-        control: checkmarkRecipe.variants?.size?.sm,
-      },
-      md: {
-        root: { gap: '2.5' },
-        label: { textStyle: 'sm' },
-        control: checkmarkRecipe.variants?.size?.md,
-      },
-      lg: {
-        root: { gap: '3' },
-        label: { textStyle: 'md' },
-        control: checkmarkRecipe.variants?.size?.lg,
-      },
-    },
-
-    variant: {
-      outline: {
-        control: checkmarkRecipe.variants?.variant?.outline,
-      },
-      solid: {
-        control: checkmarkRecipe.variants?.variant?.solid,
-      },
-      subtle: {
-        control: checkmarkRecipe.variants?.variant?.subtle,
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-})

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

@@ -1,83 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const checkmarkRecipe = defineRecipe({
-  className: 'chakra-checkmark',
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: '0',
-    color: 'white',
-    borderWidth: '1px',
-    borderColor: 'transparent',
-    borderRadius: 'l1',
-    focusVisibleRing: 'outside',
-    _invalid: {
-      colorPalette: 'red',
-      borderColor: 'border.error',
-    },
-    _disabled: {
-      opacity: '0.5',
-    },
-  },
-  variants: {
-    size: {
-      xs: {
-        boxSize: '3',
-      },
-      sm: {
-        boxSize: '4',
-      },
-      md: {
-        boxSize: '5',
-        p: '0.5',
-      },
-      lg: {
-        boxSize: '6',
-        p: '0.5',
-      },
-    },
-
-    variant: {
-      solid: {
-        borderColor: 'border',
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          bg: 'colorPalette.solid',
-          color: 'colorPalette.contrast',
-          borderColor: 'colorPalette.solid',
-        },
-      },
-      outline: {
-        borderColor: 'border',
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          color: 'colorPalette.fg',
-          borderColor: 'colorPalette.solid',
-        },
-      },
-      subtle: {
-        bg: 'colorPalette.muted',
-        borderColor: 'colorPalette.muted',
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          color: 'colorPalette.fg',
-        },
-      },
-      plain: {
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          color: 'colorPalette.fg',
-        },
-      },
-      inverted: {
-        borderColor: 'border',
-        color: 'colorPalette.fg',
-        '&:is([data-state=checked], [data-state=indeterminate])': {
-          borderColor: 'colorPalette.solid',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-})

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 { collapsibleAnataomy } from '@chakra-ui/react/anatomy'
-
-export const collapsibleSlotRecipe = defineSlotRecipe({
-  slots: collapsibleAnataomy.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',
-      },
-    },
-  },
-})