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

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

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

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

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

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

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

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

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