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

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',
+  },
+})

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

@@ -0,0 +1,117 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { segmentGroupAnatomy } from '@chakra-ui/react/anatomy'
+
+export const segmentGroupSlotRecipe = defineSlotRecipe({
+  className: 'chakra-segment-group',
+  slots: segmentGroupAnatomy.keys(),
+  base: {
+    root: {
+      '--segment-radius': 'radii.l2',
+      borderRadius: 'l2',
+      display: 'inline-flex',
+      boxShadow: 'inset',
+      minW: 'max-content',
+      textAlign: 'center',
+      position: 'relative',
+      isolation: 'isolate',
+      bg: 'bg.muted',
+    },
+
+    item: {
+      display: 'flex',
+      alignItems: 'center',
+      userSelect: 'none',
+      fontSize: 'sm',
+      position: 'relative',
+      color: 'fg',
+      borderRadius: 'var(--segment-radius)',
+      _disabled: {
+        opacity: '0.5',
+      },
+      '&:has(input:focus-visible)': {
+        focusRing: 'outside',
+      },
+      _before: {
+        content: '""',
+        position: 'absolute',
+        insetInlineStart: 0,
+        insetBlock: '1.5',
+        bg: 'border',
+        width: '1px',
+        transition: 'opacity 0.2s',
+      },
+      '& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type': {
+        _before: {
+          opacity: '0',
+        },
+      },
+
+      '&[data-state=checked][data-ssr]': {
+        shadow: 'sm',
+        bg: 'bg',
+        borderRadius: 'var(--segment-radius)',
+      },
+    },
+
+    indicator: {
+      shadow: 'sm',
+      pos: 'absolute',
+      bg: { _light: 'bg', _dark: 'bg.emphasized' },
+      width: 'var(--width)',
+      height: 'var(--height)',
+      top: 'var(--top)',
+      left: 'var(--left)',
+      zIndex: -1,
+      borderRadius: 'var(--segment-radius)',
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: {
+          height: '6',
+        },
+        item: {
+          textStyle: 'xs',
+          px: '3',
+          gap: '1',
+        },
+      },
+      sm: {
+        root: {
+          height: '8',
+        },
+        item: {
+          textStyle: 'sm',
+          px: '4',
+          gap: '2',
+        },
+      },
+      md: {
+        root: {
+          height: '10',
+        },
+        item: {
+          textStyle: 'sm',
+          px: '4',
+          gap: '2',
+        },
+      },
+      lg: {
+        root: {
+          height: '10',
+        },
+        item: {
+          textStyle: 'md',
+          px: '5',
+          gap: '3',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})