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

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

@@ -1,127 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { progressAnatomy } from '@chakra-ui/react/anatomy'
-
-export const progressSlotRecipe = defineSlotRecipe({
-  slots: progressAnatomy.keys(),
-  className: 'chakra-progress',
-  base: {
-    root: {
-      textStyle: 'sm',
-      position: 'relative',
-    },
-    track: {
-      overflow: 'hidden',
-      position: 'relative',
-    },
-    range: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      transitionProperty: 'width, height',
-      transitionDuration: 'slow',
-      height: '100%',
-      bgColor: 'var(--track-color)',
-      _indeterminate: {
-        '--animate-from-x': '-40%',
-        '--animate-to-x': '100%',
-        position: 'absolute',
-        willChange: 'left',
-        minWidth: '50%',
-        animation: 'position 1s ease infinite normal none running',
-        backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`,
-      },
-    },
-    label: {
-      display: 'inline-flex',
-      fontWeight: 'medium',
-    },
-    valueText: {
-      textStyle: 'xs',
-      lineHeight: '1',
-      fontWeight: 'medium',
-    },
-  },
-
-  variants: {
-    variant: {
-      outline: {
-        track: {
-          shadow: 'inset',
-          bgColor: 'bg.muted',
-        },
-        range: {
-          bgColor: 'colorPalette.solid',
-        },
-      },
-      subtle: {
-        track: {
-          bgColor: 'colorPalette.muted',
-        },
-        range: {
-          bgColor: 'colorPalette.solid/72',
-        },
-      },
-    },
-
-    shape: {
-      square: {},
-      rounded: {
-        track: {
-          borderRadius: 'l1',
-        },
-      },
-      full: {
-        track: {
-          borderRadius: 'full',
-        },
-      },
-    },
-
-    striped: {
-      true: {
-        range: {
-          backgroundImage: `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`,
-          backgroundSize: `var(--stripe-size) var(--stripe-size)`,
-          '--stripe-size': '1rem',
-          '--stripe-color': {
-            _light: 'rgba(255, 255, 255, 0.3)',
-            _dark: 'rgba(0, 0, 0, 0.3)',
-          },
-        },
-      },
-    },
-
-    animated: {
-      true: {
-        range: {
-          '--animate-from': 'var(--stripe-size)',
-          animation: 'bg-position 1s linear infinite',
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        track: { h: '1.5' },
-      },
-      sm: {
-        track: { h: '2' },
-      },
-      md: {
-        track: { h: '2.5' },
-      },
-      lg: {
-        track: { h: '3' },
-      },
-      xl: {
-        track: { h: '4' },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-    shape: 'rounded',
-  },
-})

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

@@ -1,220 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { radioCardAnatomy } from '@chakra-ui/react/anatomy'
-
-import { radiomarkRecipe } from './radiomark'
-
-export const radioCardSlotRecipe = defineSlotRecipe({
-  className: 'chakra-radio-card',
-  slots: radioCardAnatomy.keys(),
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1.5',
-      isolation: 'isolate',
-    },
-    item: {
-      flex: '1',
-      display: 'flex',
-      flexDirection: 'column',
-      userSelect: 'none',
-      position: 'relative',
-      borderRadius: 'l2',
-      _focus: {
-        bg: 'colorPalette.muted/20',
-      },
-      _disabled: {
-        opacity: '0.8',
-        borderColor: 'border.disabled',
-      },
-      _checked: {
-        zIndex: '1',
-      },
-    },
-    label: {
-      display: 'inline-flex',
-      fontWeight: 'medium',
-      textStyle: 'sm',
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-    itemText: {
-      fontWeight: 'medium',
-    },
-    itemDescription: {
-      opacity: '0.64',
-      textStyle: 'sm',
-    },
-    itemControl: {
-      display: 'inline-flex',
-      flex: '1',
-      pos: 'relative',
-      rounded: 'inherit',
-      justifyContent: 'var(--radio-card-justify)',
-      alignItems: 'var(--radio-card-align)',
-      _disabled: {
-        bg: 'bg.muted',
-      },
-    },
-    itemIndicator: radiomarkRecipe.base,
-    itemAddon: {
-      roundedBottom: 'inherit',
-      _disabled: {
-        color: 'fg.muted',
-      },
-    },
-    itemContent: {
-      display: 'flex',
-      flexDirection: 'column',
-      flex: '1',
-      gap: '1',
-      justifyContent: 'var(--radio-card-justify)',
-      alignItems: 'var(--radio-card-align)',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        item: {
-          textStyle: 'sm',
-        },
-        itemControl: {
-          padding: '3',
-          gap: '1.5',
-        },
-        itemAddon: {
-          px: '3',
-          py: '1.5',
-          borderTopWidth: '1px',
-        },
-        itemIndicator: radiomarkRecipe.variants?.size.sm,
-      },
-      md: {
-        item: {
-          textStyle: 'sm',
-        },
-        itemControl: {
-          padding: '4',
-          gap: '2.5',
-        },
-        itemAddon: {
-          px: '4',
-          py: '2',
-          borderTopWidth: '1px',
-        },
-        itemIndicator: radiomarkRecipe.variants?.size.md,
-      },
-      lg: {
-        item: {
-          textStyle: 'md',
-        },
-        itemControl: {
-          padding: '4',
-          gap: '3.5',
-        },
-        itemAddon: {
-          px: '4',
-          py: '2',
-          borderTopWidth: '1px',
-        },
-        itemIndicator: radiomarkRecipe.variants?.size.lg,
-      },
-    },
-
-    variant: {
-      surface: {
-        item: {
-          borderWidth: '1px',
-          _checked: {
-            bg: 'colorPalette.subtle',
-            color: 'colorPalette.fg',
-            borderColor: 'colorPalette.muted',
-          },
-        },
-        itemIndicator: radiomarkRecipe.variants?.variant.solid,
-      },
-
-      subtle: {
-        item: {
-          bg: 'bg.muted',
-        },
-        itemControl: {
-          _checked: {
-            bg: 'colorPalette.muted',
-            color: 'colorPalette.fg',
-          },
-        },
-        itemIndicator: radiomarkRecipe.variants?.variant.outline,
-      },
-
-      outline: {
-        item: {
-          borderWidth: '1px',
-          _checked: {
-            boxShadow: '0 0 0 1px var(--shadow-color)',
-            boxShadowColor: 'colorPalette.solid',
-            borderColor: 'colorPalette.solid',
-          },
-        },
-        itemIndicator: radiomarkRecipe.variants?.variant.solid,
-      },
-
-      solid: {
-        item: {
-          borderWidth: '1px',
-          _checked: {
-            bg: 'colorPalette.solid',
-            color: 'colorPalette.contrast',
-            borderColor: 'colorPalette.solid',
-          },
-        },
-        itemIndicator: radiomarkRecipe.variants?.variant.inverted,
-      },
-    },
-
-    justify: {
-      start: {
-        item: { '--radio-card-justify': 'flex-start' },
-      },
-      end: {
-        item: { '--radio-card-justify': 'flex-end' },
-      },
-      center: {
-        item: { '--radio-card-justify': 'center' },
-      },
-    },
-
-    align: {
-      start: {
-        item: { '--radio-card-align': 'flex-start' },
-        itemControl: { textAlign: 'start' },
-      },
-      end: {
-        item: { '--radio-card-align': 'flex-end' },
-        itemControl: { textAlign: 'end' },
-      },
-      center: {
-        item: { '--radio-card-align': 'center' },
-        itemControl: { textAlign: 'center' },
-      },
-    },
-
-    orientation: {
-      vertical: {
-        itemControl: { flexDirection: 'column' },
-      },
-      horizontal: {
-        itemControl: { flexDirection: 'row' },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'outline',
-    align: 'start',
-    orientation: 'horizontal',
-  },
-})

package/src/theme/recipes/chakra/radio-group.ts

@@ -1,72 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { radioGroupAnatomy } from '@chakra-ui/react/anatomy'
-
-import { radiomarkRecipe } from './radiomark'
-
-export const radioGroupSlotRecipe = defineSlotRecipe({
-  className: 'chakra-radio-group',
-  slots: radioGroupAnatomy.keys(),
-  base: {
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      position: 'relative',
-      fontWeight: 'medium',
-      _disabled: {
-        cursor: 'disabled',
-      },
-    },
-
-    itemControl: radiomarkRecipe.base,
-
-    label: {
-      userSelect: 'none',
-      textStyle: 'sm',
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-  },
-  variants: {
-    variant: {
-      outline: {
-        itemControl: radiomarkRecipe.variants?.variant?.outline,
-      },
-
-      subtle: {
-        itemControl: radiomarkRecipe.variants?.variant?.subtle,
-      },
-
-      solid: {
-        itemControl: radiomarkRecipe.variants?.variant?.solid,
-      },
-    },
-
-    size: {
-      xs: {
-        item: { textStyle: 'xs', gap: '1.5' },
-        itemControl: radiomarkRecipe.variants?.size?.xs,
-      },
-
-      sm: {
-        item: { textStyle: 'sm', gap: '2' },
-        itemControl: radiomarkRecipe.variants?.size?.sm,
-      },
-
-      md: {
-        item: { textStyle: 'sm', gap: '2.5' },
-        itemControl: radiomarkRecipe.variants?.size?.md,
-      },
-
-      lg: {
-        item: { textStyle: 'md', gap: '3' },
-        itemControl: radiomarkRecipe.variants?.size?.lg,
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'solid',
-  },
-})

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

@@ -1,107 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const radiomarkRecipe = defineRecipe({
-  className: 'chakra-radiomark',
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    verticalAlign: 'top',
-    color: 'white',
-    borderWidth: '1px',
-    borderColor: 'transparent',
-    borderRadius: 'full',
-    cursor: 'radio',
-    _focusVisible: {
-      outline: '2px solid',
-      outlineColor: 'colorPalette.focusRing',
-      outlineOffset: '2px',
-    },
-    _invalid: {
-      colorPalette: 'red',
-      borderColor: 'red.500',
-    },
-    _disabled: {
-      opacity: '0.5',
-      cursor: 'disabled',
-    },
-
-    '& .dot': {
-      height: '100%',
-      width: '100%',
-      borderRadius: 'full',
-      bg: 'currentColor',
-      scale: '0.4',
-    },
-  },
-
-  variants: {
-    variant: {
-      solid: {
-        borderWidth: '1px',
-        borderColor: 'border',
-        _checked: {
-          bg: 'colorPalette.solid',
-          color: 'colorPalette.contrast',
-          borderColor: 'colorPalette.solid',
-        },
-      },
-
-      subtle: {
-        borderWidth: '1px',
-        bg: 'colorPalette.muted',
-        borderColor: 'colorPalette.muted',
-        color: 'transparent',
-        _checked: {
-          color: 'colorPalette.fg',
-        },
-      },
-
-      outline: {
-        borderWidth: '1px',
-        borderColor: 'inherit',
-        _checked: {
-          color: 'colorPalette.fg',
-          borderColor: 'colorPalette.solid',
-        },
-        '& .dot': {
-          scale: '0.6',
-        },
-      },
-
-      inverted: {
-        bg: 'bg',
-        borderWidth: '1px',
-        borderColor: 'inherit',
-        _checked: {
-          color: 'colorPalette.solid',
-          borderColor: 'currentcolor',
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        boxSize: '3',
-      },
-
-      sm: {
-        boxSize: '4',
-      },
-
-      md: {
-        boxSize: '5',
-      },
-
-      lg: {
-        boxSize: '6',
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-})

package/src/theme/recipes/chakra/rating-group.ts

@@ -1,94 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { ratingGroupAnatomy } from '@chakra-ui/react/anatomy'
-
-export const ratingGroupSlotRecipe = defineSlotRecipe({
-  className: 'chakra-rating-group',
-  slots: ratingGroupAnatomy.keys(),
-  base: {
-    root: {
-      display: 'inline-flex',
-    },
-
-    control: {
-      display: 'inline-flex',
-      alignItems: 'center',
-    },
-
-    item: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      userSelect: 'none',
-    },
-
-    itemIndicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '1em',
-      height: '1em',
-      position: 'relative',
-
-      _icon: {
-        stroke: 'currentColor',
-        width: '100%',
-        height: '100%',
-        display: 'inline-block',
-        flexShrink: 0,
-        position: 'absolute',
-        left: 0,
-        top: 0,
-      },
-
-      '& [data-bg]': {
-        color: 'bg.emphasized',
-      },
-
-      '& [data-fg]': {
-        color: 'transparent',
-      },
-
-      '&[data-highlighted]:not([data-half])': {
-        '& [data-fg]': {
-          color: 'colorPalette.solid',
-        },
-      },
-
-      '&[data-half]': {
-        '& [data-fg]': {
-          color: 'colorPalette.solid',
-          clipPath: 'inset(0 50% 0 0)',
-        },
-      },
-    },
-  },
-
-  variants: {
-    size: {
-      xs: {
-        item: {
-          textStyle: 'sm',
-        },
-      },
-      sm: {
-        item: {
-          textStyle: 'md',
-        },
-      },
-      md: {
-        item: {
-          textStyle: 'xl',
-        },
-      },
-      lg: {
-        item: {
-          textStyle: '2xl',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})