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

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

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

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

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

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

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