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

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

@@ -0,0 +1,282 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { selectAnatomy } from '@chakra-ui/react/anatomy'
+
+export const selectSlotRecipe = defineSlotRecipe({
+  className: 'chakra-select',
+  slots: selectAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+      width: 'full',
+    },
+    trigger: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: 'full',
+      minH: 'var(--select-trigger-height)',
+      px: 'var(--select-trigger-padding-x)',
+      borderRadius: 'l2',
+      userSelect: 'none',
+      textAlign: 'start',
+      focusVisibleRing: 'inside',
+      _placeholderShown: {
+        color: 'fg.muted',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+      _invalid: {
+        borderColor: 'border.error',
+      },
+    },
+    indicatorGroup: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1',
+      pos: 'absolute',
+      right: '0',
+      top: '0',
+      bottom: '0',
+      px: 'var(--select-trigger-padding-x)',
+      pointerEvents: 'none',
+    },
+    indicator: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: { base: 'fg.muted', _disabled: 'fg.subtle', _invalid: 'fg.error' },
+    },
+    content: {
+      background: 'bg.panel',
+      display: 'flex',
+      flexDirection: 'column',
+      zIndex: 'dropdown',
+      borderRadius: 'l2',
+      outline: 0,
+      maxH: '96',
+      overflowY: 'auto',
+      boxShadow: 'md',
+      _open: {
+        animationStyle: 'slide-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'slide-fade-out',
+        animationDuration: 'fastest',
+      },
+    },
+    item: {
+      position: 'relative',
+      userSelect: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      cursor: 'option',
+      justifyContent: 'space-between',
+      flex: '1',
+      textAlign: 'start',
+      borderRadius: 'l1',
+      _highlighted: {
+        bg: { _light: 'bg.muted', _dark: 'bg.emphasized' },
+      },
+      _disabled: {
+        pointerEvents: 'none',
+        opacity: '0.5',
+      },
+      _icon: {
+        width: '4',
+        height: '4',
+      },
+    },
+    control: {
+      pos: 'relative',
+    },
+    itemText: {
+      flex: '1',
+    },
+    itemGroup: {
+      _first: { mt: '0' },
+    },
+    itemGroupLabel: {
+      py: '1',
+      fontWeight: 'medium',
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+      textStyle: 'sm',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    valueText: {
+      lineClamp: '1',
+      maxW: '80%',
+    },
+  },
+
+  variants: {
+    variant: {
+      outline: {
+        trigger: {
+          bg: 'transparent',
+          borderWidth: '1px',
+          borderColor: 'border',
+          _expanded: {
+            borderColor: 'border.emphasized',
+          },
+        },
+      },
+
+      subtle: {
+        trigger: {
+          borderWidth: '1px',
+          borderColor: 'transparent',
+          bg: 'bg.muted',
+        },
+      },
+    },
+
+    size: {
+      xs: {
+        root: {
+          '--select-trigger-height': 'sizes.8',
+          '--select-trigger-padding-x': 'spacing.2',
+        },
+        content: {
+          p: '1',
+          gap: '1',
+          textStyle: 'xs',
+        },
+        trigger: {
+          textStyle: 'xs',
+          gap: '1',
+        },
+        item: {
+          py: '1',
+          px: '2',
+        },
+        itemGroupLabel: {
+          py: '1',
+          px: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '3.5',
+            height: '3.5',
+          },
+        },
+      },
+
+      sm: {
+        root: {
+          '--select-trigger-height': 'sizes.9',
+          '--select-trigger-padding-x': 'spacing.2.5',
+        },
+        content: {
+          p: '1',
+          textStyle: 'sm',
+        },
+        trigger: {
+          textStyle: 'sm',
+          gap: '1',
+        },
+        indicator: {
+          _icon: {
+            width: '4',
+            height: '4',
+          },
+        },
+        item: {
+          py: '1',
+          px: '1.5',
+        },
+        itemGroup: {
+          mt: '1',
+        },
+        itemGroupLabel: {
+          py: '1',
+          px: '1.5',
+        },
+      },
+
+      md: {
+        root: {
+          '--select-trigger-height': 'sizes.10',
+          '--select-trigger-padding-x': 'spacing.3',
+        },
+        content: {
+          p: '1',
+          textStyle: 'sm',
+        },
+        itemGroup: {
+          mt: '1.5',
+        },
+        item: {
+          py: '1.5',
+          px: '2',
+        },
+        itemIndicator: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        itemGroupLabel: {
+          py: '1.5',
+          px: '2',
+        },
+        trigger: {
+          textStyle: 'sm',
+          gap: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '4',
+            height: '4',
+          },
+        },
+      },
+
+      lg: {
+        root: {
+          '--select-trigger-height': 'sizes.12',
+          '--select-trigger-padding-x': 'spacing.4',
+        },
+        content: {
+          p: '1.5',
+          textStyle: 'md',
+        },
+        itemGroup: {
+          mt: '2',
+        },
+        item: {
+          py: '2',
+          px: '3',
+        },
+        itemGroupLabel: {
+          py: '2',
+          px: '3',
+        },
+        trigger: {
+          textStyle: 'md',
+          py: '3',
+          gap: '2',
+        },
+        indicator: {
+          _icon: {
+            width: '5',
+            height: '5',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+})

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

@@ -0,0 +1,51 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const separatorRecipe = defineRecipe({
+  className: 'chakra-separator',
+  base: {
+    display: 'block',
+    borderColor: 'border',
+  },
+  variants: {
+    variant: {
+      solid: {
+        borderStyle: 'solid',
+      },
+      dashed: {
+        borderStyle: 'dashed',
+      },
+      dotted: {
+        borderStyle: 'dotted',
+      },
+    },
+    orientation: {
+      vertical: {
+        height: '100%',
+        borderInlineStartWidth: 'var(--separator-thickness)',
+      },
+      horizontal: {
+        width: '100%',
+        borderTopWidth: 'var(--separator-thickness)',
+      },
+    },
+    size: {
+      xs: {
+        '--separator-thickness': '0.5px',
+      },
+      sm: {
+        '--separator-thickness': '1px',
+      },
+      md: {
+        '--separator-thickness': '2px',
+      },
+      lg: {
+        '--separator-thickness': '3px',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    variant: 'solid',
+    orientation: 'horizontal',
+  },
+})

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

@@ -0,0 +1,53 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const skeletonRecipe = defineRecipe({
+  className: 'chakra-skeleton',
+  base: {},
+
+  variants: {
+    loading: {
+      true: {
+        borderRadius: 'l2',
+        boxShadow: 'none',
+        backgroundClip: 'padding-box',
+        cursor: 'default',
+        color: 'transparent',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        flexShrink: '0',
+        '&::before, &::after, *': {
+          visibility: 'hidden',
+        },
+      },
+      false: {
+        background: 'unset',
+        animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
+      },
+    },
+    variant: {
+      pulse: {
+        background: 'bg.emphasized',
+        animation: 'pulse',
+        animationDuration: 'var(--duration, 1.2s)',
+      },
+      shine: {
+        '--animate-from': '200%',
+        '--animate-to': '-200%',
+        '--start-color': 'colors.bg.muted',
+        '--end-color': 'colors.bg.emphasized',
+        backgroundImage:
+          'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
+        backgroundSize: '400% 100%',
+        animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
+      },
+      none: {
+        animation: 'none',
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'pulse',
+    loading: true,
+  },
+})

package/src/theme/recipes/chakra/skip-nav-link.ts

@@ -0,0 +1,34 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const skipNavLinkRecipe = defineRecipe({
+  className: 'chakra-skip-nav',
+  base: {
+    display: 'inline-flex',
+    bg: 'bg.panel',
+    padding: '2.5',
+    borderRadius: 'l2',
+    fontWeight: 'semibold',
+    focusVisibleRing: 'outside',
+    textStyle: 'sm',
+
+    // visually hidden
+    userSelect: 'none',
+    border: '0',
+    height: '1px',
+    width: '1px',
+    margin: '-1px',
+    outline: '0',
+    overflow: 'hidden',
+    position: 'absolute',
+    clip: 'rect(0 0 0 0)',
+
+    _focusVisible: {
+      clip: 'auto',
+      width: 'auto',
+      height: 'auto',
+      position: 'fixed',
+      top: '6',
+      insetStart: '6',
+    },
+  },
+})

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

@@ -0,0 +1,178 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { sliderAnatomy } from '@chakra-ui/react/anatomy'
+
+export const sliderSlotRecipe = defineSlotRecipe({
+  className: 'chakra-slider',
+  slots: sliderAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+      fontSize: 'sm',
+      position: 'relative',
+      isolation: 'isolate',
+      touchAction: 'none',
+    },
+    control: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      position: 'relative',
+    },
+    track: {
+      overflow: 'hidden',
+      borderRadius: 'full',
+      flex: '1',
+    },
+    range: {
+      width: 'inherit',
+      height: 'inherit',
+      _disabled: { bg: 'border.emphasized!' },
+    },
+    markerGroup: {
+      position: 'absolute!',
+      top: 'var(--slider-marker-top)',
+      insetInline: 'var(--slider-marker-inset)',
+      zIndex: '1',
+    },
+    marker: {
+      '--marker-bg': { base: 'white', _underValue: 'colors.bg' },
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '1.5',
+      color: 'fg.muted',
+      fontSize: 'xs',
+    },
+    markerIndicator: {
+      width: 'var(--slider-marker-size)',
+      height: 'var(--slider-marker-size)',
+      borderRadius: 'full',
+      bg: 'var(--marker-bg)',
+    },
+    thumb: {
+      width: 'var(--slider-thumb-size)',
+      height: 'var(--slider-thumb-size)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      outline: 0,
+      zIndex: '2',
+      borderRadius: 'full',
+
+      _focusVisible: {
+        ring: '2px',
+        ringColor: 'colorPalette.focusRing',
+        ringOffset: '2px',
+        ringOffsetColor: 'bg',
+      },
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          '--slider-thumb-size': 'sizes.4',
+          '--slider-track-size': 'sizes.1.5',
+          '--slider-marker-top': '6px',
+          '--slider-marker-size': 'sizes.1',
+          '--slider-marker-inset': '3px',
+        },
+      },
+      md: {
+        root: {
+          '--slider-thumb-size': 'sizes.5',
+          '--slider-track-size': 'sizes.2',
+          '--slider-marker-top': '8px',
+          '--slider-marker-size': 'sizes.1',
+          '--slider-marker-inset': '4px',
+        },
+      },
+      lg: {
+        root: {
+          '--slider-thumb-size': 'sizes.6',
+          '--slider-track-size': 'sizes.2.5',
+          '--slider-marker-top': '9px',
+          '--slider-marker-size': 'sizes.1.5',
+          '--slider-marker-inset': '5px',
+        },
+      },
+    },
+    variant: {
+      outline: {
+        track: {
+          shadow: 'inset',
+          bg: 'bg.emphasized/72',
+        },
+        range: {
+          bg: 'colorPalette.solid',
+        },
+        thumb: {
+          borderWidth: '2px',
+          borderColor: 'colorPalette.solid',
+          bg: 'bg',
+          _disabled: {
+            bg: 'border.emphasized',
+            borderColor: 'border.emphasized',
+          },
+        },
+      },
+      solid: {
+        track: {
+          bg: 'colorPalette.subtle',
+          _disabled: {
+            bg: 'bg.muted',
+          },
+        },
+        range: {
+          bg: 'colorPalette.solid',
+        },
+        thumb: {
+          bg: 'colorPalette.solid',
+          _disabled: {
+            bg: 'border.emphasized',
+          },
+        },
+      },
+    },
+    orientation: {
+      vertical: {
+        root: {
+          display: 'inline-flex',
+        },
+        control: {
+          flexDirection: 'column',
+          height: '100%',
+          minWidth: 'var(--slider-thumb-size)',
+        },
+        track: {
+          width: 'var(--slider-track-size)',
+        },
+        thumb: {
+          left: '50%',
+          translate: '-50% 0',
+        },
+      },
+      horizontal: {
+        control: {
+          flexDirection: 'row',
+          width: '100%',
+          minHeight: 'var(--slider-thumb-size)',
+        },
+        track: {
+          height: 'var(--slider-track-size)',
+        },
+        thumb: {
+          top: '50%',
+          translate: '0 -50%',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+    orientation: 'horizontal',
+  },
+})

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

@@ -0,0 +1,32 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const spinnerRecipe = defineRecipe({
+  className: 'chakra-spinner',
+  base: {
+    display: 'inline-block',
+    borderColor: 'currentColor',
+    borderStyle: 'solid',
+    borderWidth: '2px',
+    borderRadius: 'full',
+    width: 'var(--spinner-size)',
+    height: 'var(--spinner-size)',
+    animation: 'spin',
+    animationDuration: 'slowest',
+    '--spinner-track-color': 'transparent',
+    borderBottomColor: 'var(--spinner-track-color)',
+    borderInlineStartColor: 'var(--spinner-track-color)',
+  },
+  variants: {
+    size: {
+      inherit: { '--spinner-size': '1em' },
+      xs: { '--spinner-size': 'sizes.3' },
+      sm: { '--spinner-size': 'sizes.4' },
+      md: { '--spinner-size': 'sizes.5' },
+      lg: { '--spinner-size': 'sizes.8' },
+      xl: { '--spinner-size': 'sizes.10' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,79 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { statAnatomy } from '@chakra-ui/react/anatomy'
+
+export const statSlotRecipe = defineSlotRecipe({
+  className: 'chakra-stat',
+  slots: statAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+      position: 'relative',
+      flex: '1',
+    },
+    label: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    helpText: {
+      color: 'fg.muted',
+      textStyle: 'xs',
+    },
+    valueUnit: {
+      color: 'fg.muted',
+      textStyle: 'xs',
+      fontWeight: 'initial',
+      letterSpacing: 'initial',
+    },
+    valueText: {
+      verticalAlign: 'baseline',
+      fontWeight: 'semibold',
+      letterSpacing: 'tight',
+      fontFeatureSettings: 'pnum',
+      fontVariantNumeric: 'proportional-nums',
+      display: 'inline-flex',
+      gap: '1',
+    },
+    indicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginEnd: 1,
+      '& :where(svg)': {
+        w: '1em',
+        h: '1em',
+      },
+      '&[data-type=up]': {
+        color: 'fg.success',
+      },
+      '&[data-type=down]': {
+        color: 'fg.error',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        valueText: {
+          textStyle: 'xl',
+        },
+      },
+      md: {
+        valueText: {
+          textStyle: '2xl',
+        },
+      },
+      lg: {
+        valueText: {
+          textStyle: '3xl',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+})