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

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

@@ -1,124 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { menuAnatomy } from '@chakra-ui/react/anatomy'
-
-export const menuSlotRecipe = defineSlotRecipe({
-  className: 'chakra-menu',
-  slots: menuAnatomy.keys(),
-  base: {
-    content: {
-      outline: 0,
-      bg: 'bg.panel',
-      boxShadow: 'lg',
-      color: 'fg',
-      '--menu-z-index': 'zIndex.dropdown',
-      zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
-      borderRadius: 'l2',
-      overflow: 'hidden',
-      _open: {
-        animationStyle: 'slide-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'slide-fade-out',
-        animationDuration: 'faster',
-      },
-    },
-    item: {
-      textDecoration: 'none',
-      color: 'fg',
-      userSelect: 'none',
-      borderRadius: 'l3',
-      width: '100%',
-      display: 'flex',
-      cursor: 'menuitem',
-      alignItems: 'center',
-      textAlign: 'start',
-      position: 'relative',
-      flex: '0 0 auto',
-      outline: 0,
-      _disabled: {
-        layerStyle: 'disabled',
-      },
-    },
-    itemText: {
-      flex: '1',
-    },
-    itemGroupLabel: {
-      px: '2',
-      py: '1.5',
-      fontWeight: 'semibold',
-      textStyle: 'sm',
-    },
-    indicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: '0',
-    },
-    itemCommand: {
-      opacity: '0.6',
-      textStyle: 'xs',
-      ms: 'auto',
-      ps: '4',
-      letterSpacing: 'widest',
-    },
-    separator: {
-      height: '1px',
-      bg: 'bg.muted',
-      my: '1',
-      mx: '-1',
-    },
-  },
-
-  variants: {
-    variant: {
-      subtle: {
-        item: {
-          _highlighted: {
-            bg: 'bg.subtle',
-          },
-        },
-      },
-      solid: {
-        item: {
-          _highlighted: {
-            bg: 'colorPalette.solid',
-            color: 'colorPalette.contrast',
-          },
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        content: {
-          minW: '8rem',
-          padding: '1',
-        },
-        item: {
-          gap: '1',
-          textStyle: 'xs',
-          py: '1',
-          px: '1.5',
-        },
-      },
-      md: {
-        content: {
-          minW: '8rem',
-          padding: '1.5',
-        },
-        item: {
-          gap: '2',
-          textStyle: 'sm',
-          py: '1.5',
-          px: '2',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'subtle',
-  },
-})

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

@@ -1,140 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy'
-
-import { selectSlotRecipe } from './select'
-
-export const nativeSelectSlotRecipe = defineSlotRecipe({
-  className: 'chakra-native-select',
-  slots: nativeSelectAnatomy.keys(),
-
-  base: {
-    root: {
-      height: 'fit-content',
-      display: 'flex',
-      width: '100%',
-      position: 'relative',
-    },
-    field: {
-      width: '100%',
-      minWidth: '0',
-      outline: '0',
-      appearance: 'none',
-      borderRadius: 'l2',
-      _disabled: {
-        layerStyle: 'disabled',
-      },
-      _invalid: {
-        borderColor: 'border.error',
-      },
-      focusVisibleRing: 'inside',
-      lineHeight: 'normal',
-      '& > option, & > optgroup': {
-        bg: 'inherit',
-      },
-    },
-    indicator: {
-      position: 'absolute',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      pointerEvents: 'none',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      height: '100%',
-      color: 'fg.muted',
-      _disabled: {
-        opacity: '0.5',
-      },
-      _invalid: {
-        color: 'fg.error',
-      },
-      _icon: {
-        width: '1em',
-        height: '1em',
-      },
-    },
-  },
-
-  variants: {
-    variant: {
-      outline: {
-        field: selectSlotRecipe.variants?.variant.outline.trigger,
-      },
-      subtle: {
-        field: selectSlotRecipe.variants?.variant.subtle.trigger,
-      },
-      plain: {
-        field: {
-          bg: 'transparent',
-          color: 'fg',
-          focusRingWidth: '2px',
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        field: {
-          textStyle: 'xs',
-          ps: '2',
-          pe: '6',
-          height: '6',
-        },
-        indicator: {
-          textStyle: 'sm',
-          insetEnd: '1.5',
-        },
-      },
-      sm: {
-        field: {
-          textStyle: 'sm',
-          ps: '2.5',
-          pe: '8',
-          height: '8',
-        },
-        indicator: {
-          textStyle: 'md',
-          insetEnd: '2',
-        },
-      },
-      md: {
-        field: {
-          textStyle: 'sm',
-          ps: '3',
-          pe: '8',
-          height: '10',
-        },
-        indicator: {
-          textStyle: 'lg',
-          insetEnd: '2',
-        },
-      },
-      lg: {
-        field: {
-          textStyle: 'md',
-          ps: '4',
-          pe: '8',
-          height: '11',
-        },
-        indicator: {
-          textStyle: 'xl',
-          insetEnd: '3',
-        },
-      },
-      xl: {
-        field: {
-          textStyle: 'md',
-          ps: '4.5',
-          pe: '10',
-          height: '12',
-        },
-        indicator: {
-          textStyle: 'xl',
-          insetEnd: '3',
-        },
-      },
-    },
-  },
-
-  defaultVariants: selectSlotRecipe.defaultVariants,
-})

package/src/theme/recipes/chakra/number-input.ts

@@ -1,115 +0,0 @@
-import { defineSlotRecipe, defineStyle } from '@chakra-ui/react'
-import { numberInputAnatomy } from '@chakra-ui/react/anatomy'
-
-import { mapEntries } from '../../utils.ts'
-import { inputRecipe } from './input.ts'
-
-const triggerStyle = defineStyle({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flex: '1',
-  userSelect: 'none',
-  cursor: 'button',
-  lineHeight: '1',
-  color: 'fg.muted',
-  '--stepper-base-radius': 'radii.xs',
-  '--stepper-radius': 'calc(var(--stepper-base-radius) + 1px)',
-  _icon: {
-    boxSize: '1em',
-  },
-  _disabled: {
-    opacity: '0.5',
-  },
-  _hover: {
-    bg: 'bg.muted',
-  },
-  _active: {
-    bg: 'bg.emphasized',
-  },
-})
-
-export const numberInputSlotRecipe = defineSlotRecipe({
-  className: 'chakra-number-input',
-  slots: numberInputAnatomy.keys(),
-  base: {
-    root: {
-      position: 'relative',
-      zIndex: '0',
-      isolation: 'isolate',
-    },
-    input: {
-      ...inputRecipe.base,
-      verticalAlign: 'top',
-      pe: 'calc(var(--stepper-width) + 0.5rem)',
-    },
-    control: {
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'absolute',
-      top: '0',
-      insetEnd: '0px',
-      margin: '1px',
-      width: 'var(--stepper-width)',
-      height: 'calc(100% - 2px)',
-      zIndex: '1',
-      borderStartWidth: '1px',
-      divideY: '1px',
-    },
-    incrementTrigger: {
-      ...triggerStyle,
-      borderTopEndRadius: 'var(--stepper-radius)',
-    },
-    decrementTrigger: {
-      ...triggerStyle,
-      borderBottomEndRadius: 'var(--stepper-radius)',
-    },
-    valueText: {
-      fontWeight: 'medium',
-      fontFeatureSettings: 'pnum',
-      fontVariantNumeric: 'proportional-nums',
-    },
-  },
-  variants: {
-    size: {
-      xs: {
-        input: inputRecipe.variants!.size.xs,
-        control: {
-          fontSize: '2xs',
-          '--stepper-width': 'sizes.4',
-        },
-      },
-      sm: {
-        input: inputRecipe.variants!.size.sm,
-        control: {
-          fontSize: 'xs',
-          '--stepper-width': 'sizes.5',
-        },
-      },
-      md: {
-        input: inputRecipe.variants!.size.md,
-        control: {
-          fontSize: 'sm',
-          '--stepper-width': 'sizes.6',
-        },
-      },
-      lg: {
-        input: inputRecipe.variants!.size.lg,
-        control: {
-          fontSize: 'sm',
-          '--stepper-width': 'sizes.6',
-        },
-      },
-    },
-
-    variant: mapEntries(inputRecipe.variants!.variant, (key, variantStyles) => [
-      key,
-      { input: variantStyles },
-    ]),
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'outline',
-  },
-})

package/src/theme/recipes/chakra/pin-input.ts

@@ -1,27 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { pinInputAnatomy } from '@chakra-ui/react/anatomy'
-
-import { mapEntries } from '../../utils.ts'
-import { inputRecipe } from './input'
-
-const { variants, defaultVariants } = inputRecipe
-
-export const pinInputSlotRecipe = defineSlotRecipe({
-  className: 'chakra-pin-input',
-  slots: pinInputAnatomy.keys(),
-  base: {
-    input: {
-      ...inputRecipe.base,
-      textAlign: 'center',
-      width: 'var(--input-height)',
-    },
-  },
-  variants: {
-    size: mapEntries(variants!.size, (key, value) => [key, { input: value }]),
-    variant: mapEntries(variants!.variant, (key, value) => [
-      key,
-      { input: value },
-    ]),
-  },
-  defaultVariants: defaultVariants,
-})

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

@@ -1,86 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { popoverAnatomy } from '@chakra-ui/react/anatomy'
-
-export const popoverSlotRecipe = defineSlotRecipe({
-  className: 'chakra-popover',
-  slots: popoverAnatomy.keys(),
-  base: {
-    content: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      textStyle: 'sm',
-      '--popover-bg': 'colors.bg.panel',
-      bg: 'var(--popover-bg)',
-      boxShadow: 'lg',
-      '--popover-size': 'sizes.xs',
-      '--popover-mobile-size': 'calc(100dvw - 1rem)',
-      width: {
-        base: 'min(var(--popover-mobile-size), var(--popover-size))',
-        sm: 'var(--popover-size)',
-      },
-      borderRadius: 'l3',
-      '--popover-z-index': 'zIndex.popover',
-      zIndex: 'calc(var(--popover-z-index) + var(--layer-index, 0))',
-      outline: '0',
-      transformOrigin: 'var(--transform-origin)',
-      _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'faster',
-      },
-    },
-    header: {
-      paddingInline: 'var(--popover-padding)',
-      paddingTop: 'var(--popover-padding)',
-    },
-    body: {
-      padding: 'var(--popover-padding)',
-      flex: '1',
-    },
-    footer: {
-      display: 'flex',
-      alignItems: 'center',
-      paddingInline: 'var(--popover-padding)',
-      paddingBottom: 'var(--popover-padding)',
-    },
-    arrow: {
-      '--arrow-size': 'sizes.3',
-      '--arrow-background': 'var(--popover-bg)',
-    },
-    arrowTip: {
-      borderTopWidth: '1px',
-      borderInlineStartWidth: '1px',
-    },
-  },
-  variants: {
-    size: {
-      xs: {
-        content: {
-          '--popover-padding': 'spacing.3',
-        },
-      },
-      sm: {
-        content: {
-          '--popover-padding': 'spacing.4',
-        },
-      },
-      md: {
-        content: {
-          '--popover-padding': 'spacing.5',
-        },
-      },
-      lg: {
-        content: {
-          '--popover-padding': 'spacing.6',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})

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

@@ -1,94 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { progressAnatomy } from '@chakra-ui/react/anatomy'
-
-export const progressCircleSlotRecipe = defineSlotRecipe({
-  className: 'chakra-progress-circle',
-  slots: progressAnatomy.keys(),
-  base: {
-    root: {
-      display: 'inline-flex',
-      textStyle: 'sm',
-      position: 'relative',
-    },
-    circle: {
-      _indeterminate: {
-        animation: 'spin 2s linear infinite',
-      },
-    },
-    circleTrack: {
-      '--track-color': 'colors.colorPalette.muted',
-      stroke: 'var(--track-color)',
-    },
-    circleRange: {
-      stroke: 'colorPalette.solid',
-      transitionProperty: 'stroke-dasharray',
-      transitionDuration: '0.6s',
-      _indeterminate: {
-        animation: 'circular-progress 1.5s linear infinite',
-      },
-    },
-    label: {
-      display: 'inline-flex',
-    },
-    valueText: {
-      lineHeight: '1',
-      fontWeight: 'medium',
-      letterSpacing: 'tight',
-      fontVariantNumeric: 'tabular-nums',
-    },
-  },
-
-  variants: {
-    size: {
-      xs: {
-        circle: {
-          '--size': '24px',
-          '--thickness': '4px',
-        },
-        valueText: {
-          textStyle: '2xs',
-        },
-      },
-      sm: {
-        circle: {
-          '--size': '32px',
-          '--thickness': '5px',
-        },
-        valueText: {
-          textStyle: '2xs',
-        },
-      },
-      md: {
-        circle: {
-          '--size': '40px',
-          '--thickness': '6px',
-        },
-        valueText: {
-          textStyle: 'xs',
-        },
-      },
-      lg: {
-        circle: {
-          '--size': '48px',
-          '--thickness': '7px',
-        },
-        valueText: {
-          textStyle: 'sm',
-        },
-      },
-      xl: {
-        circle: {
-          '--size': '64px',
-          '--thickness': '8px',
-        },
-        valueText: {
-          textStyle: 'sm',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})

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