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

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

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

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

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

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

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

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

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