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

package/src/theme/index.ts

@@ -0,0 +1,72 @@
+import { defineConfig } from '@chakra-ui/react'
+
+import { animationStyles } from './animation-styles'
+import { breakpoints } from './breakpoints'
+import { conditions } from './conditions'
+import { globalCss } from './global-css'
+import { layerStyles } from './layer-styles'
+import { recipes } from './recipes'
+import { semanticColors } from './semantic-tokens/colors'
+import { semanticRadii } from './semantic-tokens/radii'
+import { semanticShadows } from './semantic-tokens/shadows'
+import { slotRecipes } from './slot-recipes'
+import { textStyles } from './text-styles'
+import { animations } from './tokens/animations'
+import { aspectRatios } from './tokens/aspect-ratios'
+import { blurs } from './tokens/blurs'
+import { borders } from './tokens/borders'
+import { colors } from './tokens/colors'
+import { cursor } from './tokens/cursor'
+import { durations } from './tokens/durations'
+import { easings } from './tokens/easings'
+import { fontSizes } from './tokens/font-sizes'
+import { fontWeights } from './tokens/font-weights'
+import { fonts } from './tokens/fonts'
+import { keyframes } from './tokens/keyframes'
+import { letterSpacings } from './tokens/letter-spacing'
+import { lineHeights } from './tokens/line-heights'
+import { radii } from './tokens/radius'
+import { sizes } from './tokens/sizes'
+import { spacing } from './tokens/spacing'
+import { zIndices } from './tokens/z-indices'
+
+export const defaultThemeConfig = defineConfig({
+  preflight: true,
+  cssVarsPrefix: 'chakra',
+  cssVarsRoot: ':where(html, .chakra-theme)',
+  globalCss: globalCss,
+  theme: {
+    breakpoints: breakpoints,
+    keyframes: keyframes,
+    tokens: {
+      animations,
+      aspectRatios,
+      blurs,
+      borders,
+      colors,
+      durations,
+      easings,
+      fonts,
+      fontSizes,
+      fontWeights,
+      letterSpacings,
+      lineHeights,
+      radii,
+      spacing,
+      sizes,
+      zIndex: zIndices,
+      cursor,
+    },
+    semanticTokens: {
+      colors: semanticColors,
+      radii: semanticRadii,
+      shadows: semanticShadows,
+    },
+    recipes: recipes,
+    slotRecipes: slotRecipes,
+    textStyles: textStyles,
+    layerStyles: layerStyles,
+    animationStyles: animationStyles,
+  },
+  conditions,
+})

package/src/theme/layer-styles.ts

@@ -0,0 +1,116 @@
+import { defineLayerStyles } from '@chakra-ui/react'
+
+export const layerStyles: any = defineLayerStyles({
+  // fill: some background color + color combination
+  'fill.muted': {
+    value: {
+      background: 'colorPalette.muted',
+      color: 'colorPalette.fg',
+    },
+  },
+  'fill.subtle': {
+    value: {
+      background: 'colorPalette.subtle',
+      color: 'colorPalette.fg',
+    },
+  },
+  'fill.surface': {
+    value: {
+      background: 'colorPalette.muted',
+      color: 'colorPalette.fg',
+      boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+      boxShadowColor: 'colorPalette.subtle',
+    },
+  },
+  'fill.solid': {
+    value: {
+      background: 'colorPalette.solid',
+      color: 'colorPalette.contrast',
+    },
+  },
+
+  // outline: some border color + color combination
+  'outline.subtle': {
+    value: {
+      color: 'colorPalette.fg',
+      boxShadow: 'inset 0 0 0px 1px var(--shadow-color)',
+      boxShadowColor: 'colorPalette.subtle',
+    },
+  },
+  'outline.solid': {
+    value: {
+      borderWidth: '1px',
+      borderColor: 'colorPalette.solid',
+      color: 'colorPalette.fg',
+    },
+  },
+
+  // indicator: floating border color or left/bottom border
+  'indicator.bottom': {
+    value: {
+      position: 'relative',
+      '--indicator-color-fallback': 'colors.colorPalette.solid',
+      _before: {
+        content: `""`,
+        position: 'absolute',
+        bottom: 'var(--indicator-offset-y, 0)',
+        insetInline: 'var(--indicator-offset-x, 0)',
+        height: 'var(--indicator-thickness, 2px)',
+        background: 'var(--indicator-color, var(--indicator-color-fallback))',
+      },
+    },
+  },
+  'indicator.top': {
+    value: {
+      position: 'relative',
+      '--indicator-color-fallback': 'colors.colorPalette.solid',
+      _before: {
+        content: `""`,
+        position: 'absolute',
+        top: 'var(--indicator-offset-y, 0)',
+        insetInline: 'var(--indicator-offset-x, 0)',
+        height: 'var(--indicator-thickness, 2px)',
+        background: 'var(--indicator-color, var(--indicator-color-fallback))',
+      },
+    },
+  },
+  'indicator.start': {
+    value: {
+      position: 'relative',
+      '--indicator-color-fallback': 'colors.colorPalette.solid',
+      _before: {
+        content: `""`,
+        position: 'absolute',
+        insetInlineStart: 'var(--indicator-offset-x, 0)',
+        insetBlock: 'var(--indicator-offset-y, 0)',
+        width: 'var(--indicator-thickness, 2px)',
+        background: 'var(--indicator-color, var(--indicator-color-fallback))',
+      },
+    },
+  },
+  'indicator.end': {
+    value: {
+      position: 'relative',
+      '--indicator-color-fallback': 'colors.colorPalette.solid',
+      _before: {
+        content: `""`,
+        position: 'absolute',
+        insetInlineEnd: 'var(--indicator-offset-x, 0)',
+        insetBlock: 'var(--indicator-offset-y, 0)',
+        width: 'var(--indicator-thickness, 2px)',
+        background: 'var(--indicator-color, var(--indicator-color-fallback))',
+      },
+    },
+  },
+
+  disabled: {
+    value: {
+      opacity: '0.5',
+      cursor: 'not-allowed',
+    },
+  },
+
+  none: {
+    value: {},
+  },
+})

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

@@ -0,0 +1,145 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { accordionAnatomy } from '@chakra-ui/react/anatomy'
+
+export const accordionSlotRecipe = defineSlotRecipe({
+  className: 'chakra-accordion',
+  slots: accordionAnatomy.keys(),
+  base: {
+    root: {
+      width: 'full',
+      '--accordion-radius': 'radii.l2',
+    },
+    item: {
+      overflowAnchor: 'none',
+    },
+    itemTrigger: {
+      display: 'flex',
+      alignItems: 'center',
+      width: 'full',
+      outline: '0',
+      gap: '3',
+      fontWeight: 'medium',
+      borderRadius: 'var(--accordion-radius)',
+      _focusVisible: {
+        outline: '2px solid',
+        outlineColor: 'colorPalette.focusRing',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    itemBody: {
+      pt: 'var(--accordion-padding-y)',
+      pb: 'calc(var(--accordion-padding-y) * 2)',
+    },
+    itemContent: {
+      overflow: 'hidden',
+      borderRadius: 'var(--accordion-radius)',
+      _open: {
+        animationName: 'expand-height, fade-in',
+        animationDuration: 'moderate',
+      },
+      _closed: {
+        animationName: 'collapse-height, fade-out',
+        animationDuration: 'moderate',
+      },
+    },
+    itemIndicator: {
+      transition: 'rotate 0.2s',
+      transformOrigin: 'center',
+      color: 'fg.subtle',
+      _open: {
+        rotate: '180deg',
+      },
+      _icon: {
+        width: '1.2em',
+        height: '1.2em',
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      outline: {
+        item: {
+          borderBottomWidth: '1px',
+        },
+      },
+
+      subtle: {
+        itemTrigger: {
+          px: 'var(--accordion-padding-x)',
+        },
+        itemContent: {
+          px: 'var(--accordion-padding-x)',
+        },
+        item: {
+          borderRadius: 'var(--accordion-radius)',
+          _open: {
+            bg: 'colorPalette.subtle',
+          },
+        },
+      },
+
+      enclosed: {
+        root: {
+          borderWidth: '1px',
+          borderRadius: 'var(--accordion-radius)',
+          divideY: '1px',
+          overflow: 'hidden',
+        },
+        itemTrigger: {
+          px: 'var(--accordion-padding-x)',
+        },
+        itemContent: {
+          px: 'var(--accordion-padding-x)',
+        },
+        item: {
+          _open: {
+            bg: 'bg.subtle',
+          },
+        },
+      },
+
+      plain: {},
+    },
+
+    size: {
+      sm: {
+        root: {
+          '--accordion-padding-x': 'spacing.3',
+          '--accordion-padding-y': 'spacing.2',
+        },
+        itemTrigger: {
+          textStyle: 'sm',
+          py: 'var(--accordion-padding-y)',
+        },
+      },
+      md: {
+        root: {
+          '--accordion-padding-x': 'spacing.4',
+          '--accordion-padding-y': 'spacing.2',
+        },
+        itemTrigger: {
+          textStyle: 'md',
+          py: 'var(--accordion-padding-y)',
+        },
+      },
+      lg: {
+        root: {
+          '--accordion-padding-x': 'spacing.4.5',
+          '--accordion-padding-y': 'spacing.2.5',
+        },
+        itemTrigger: {
+          textStyle: 'lg',
+          py: 'var(--accordion-padding-y)',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+})

package/src/theme/recipes/chakra/action-bar.ts

@@ -0,0 +1,62 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { actionBarAnatomy } from '@chakra-ui/react/anatomy'
+
+export const actionBarSlotRecipe = defineSlotRecipe({
+  className: 'chakra-action-bar',
+  slots: actionBarAnatomy.keys(),
+  base: {
+    positioner: {
+      position: 'fixed',
+      display: 'flex',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      insetInline: '0',
+      top: 'unset',
+      bottom: 'calc(env(safe-area-inset-bottom) + 20px)',
+    },
+
+    content: {
+      bg: 'bg.panel',
+      shadow: 'md',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '3',
+      borderRadius: 'l3',
+      py: '2.5',
+      px: '3',
+      pointerEvents: 'auto',
+      // Stabilize the position of the action bar when the scrollbar is hidden
+      // by using the scrollbar width to offset the position.
+      translate: 'calc(-1 * var(--scrollbar-width) / 2) 0px',
+
+      _open: {
+        animationName: 'slide-from-bottom, fade-in',
+        animationDuration: 'moderate',
+      },
+
+      _closed: {
+        animationName: 'slide-to-bottom, fade-out',
+        animationDuration: 'faster',
+      },
+    },
+
+    separator: {
+      width: '1px',
+      height: '5',
+      bg: 'border',
+    },
+
+    selectionTrigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '2',
+      alignSelf: 'stretch',
+      textStyle: 'sm',
+      px: '4',
+      py: '1',
+      borderRadius: 'l2',
+      borderWidth: '1px',
+      borderStyle: 'dashed',
+    },
+  },
+})

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

@@ -0,0 +1,157 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { alertAnatomy } from '@chakra-ui/react/anatomy'
+
+export const alertSlotRecipe = defineSlotRecipe({
+  slots: alertAnatomy.keys(),
+  className: 'chakra-alert',
+
+  base: {
+    root: {
+      width: 'full',
+      display: 'flex',
+      alignItems: 'flex-start',
+      position: 'relative',
+      borderRadius: 'l3',
+    },
+    title: {
+      fontWeight: 'medium',
+    },
+    description: {
+      display: 'inline',
+    },
+    indicator: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      width: '1em',
+      height: '1em',
+    },
+    content: {
+      display: 'flex',
+      flex: '1',
+      gap: '1',
+    },
+  },
+
+  variants: {
+    status: {
+      info: {
+        root: { colorPalette: 'blue' },
+      },
+      warning: {
+        root: { colorPalette: 'orange' },
+      },
+      success: {
+        root: { colorPalette: 'green' },
+      },
+      error: {
+        root: { colorPalette: 'red' },
+      },
+      neutral: {
+        root: { colorPalette: 'gray' },
+      },
+    },
+
+    inline: {
+      true: {
+        content: {
+          display: 'inline-flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+        },
+      },
+      false: {
+        content: {
+          display: 'flex',
+          flexDirection: 'column',
+        },
+      },
+    },
+
+    variant: {
+      subtle: {
+        root: {
+          bg: 'colorPalette.subtle',
+          color: 'colorPalette.fg',
+        },
+      },
+
+      surface: {
+        root: {
+          bg: 'colorPalette.subtle',
+          color: 'colorPalette.fg',
+          shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+          shadowColor: 'colorPalette.muted',
+        },
+        indicator: {
+          color: 'colorPalette.fg',
+        },
+      },
+
+      outline: {
+        root: {
+          color: 'colorPalette.fg',
+          shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+          shadowColor: 'colorPalette.muted',
+        },
+        indicator: {
+          color: 'colorPalette.fg',
+        },
+      },
+
+      solid: {
+        root: {
+          bg: 'colorPalette.solid',
+          color: 'colorPalette.contrast',
+        },
+        indicator: {
+          color: 'colorPalette.contrast',
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        root: {
+          gap: '2',
+          px: '3',
+          py: '3',
+          textStyle: 'xs',
+        },
+        indicator: {
+          textStyle: 'lg',
+        },
+      },
+      md: {
+        root: {
+          gap: '3',
+          px: '4',
+          py: '4',
+          textStyle: 'sm',
+        },
+        indicator: {
+          textStyle: 'xl',
+        },
+      },
+      lg: {
+        root: {
+          gap: '3',
+          px: '4',
+          py: '4',
+          textStyle: 'md',
+        },
+        indicator: {
+          textStyle: '2xl',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    status: 'info',
+    variant: 'subtle',
+    size: 'md',
+    inline: false,
+  },
+})

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

@@ -0,0 +1,141 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { avatarAnatomy } from '@chakra-ui/react/anatomy'
+
+export const avatarSlotRecipe = defineSlotRecipe({
+  slots: avatarAnatomy.keys(),
+  className: 'chakra-avatar',
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'medium',
+      position: 'relative',
+      verticalAlign: 'top',
+      flexShrink: '0',
+      userSelect: 'none',
+      width: 'var(--avatar-size)',
+      height: 'var(--avatar-size)',
+      fontSize: 'var(--avatar-font-size)',
+      borderRadius: 'var(--avatar-radius)',
+      '&[data-group-item]': {
+        borderWidth: '2px',
+        borderColor: 'bg',
+      },
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      borderRadius: 'var(--avatar-radius)',
+    },
+    fallback: {
+      lineHeight: '1',
+      textTransform: 'uppercase',
+      fontWeight: 'medium',
+      fontSize: 'var(--avatar-font-size)',
+      borderRadius: 'var(--avatar-radius)',
+    },
+  },
+
+  variants: {
+    size: {
+      full: {
+        root: {
+          '--avatar-size': '100%',
+          '--avatar-font-size': '100%',
+        },
+      },
+      '2xs': {
+        root: {
+          '--avatar-font-size': 'fontSizes.2xs',
+          '--avatar-size': 'sizes.6',
+        },
+      },
+      xs: {
+        root: {
+          '--avatar-font-size': 'fontSizes.xs',
+          '--avatar-size': 'sizes.8',
+        },
+      },
+      sm: {
+        root: {
+          '--avatar-font-size': 'fontSizes.sm',
+          '--avatar-size': 'sizes.9',
+        },
+      },
+      md: {
+        root: {
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.10',
+        },
+      },
+      lg: {
+        root: {
+          '--avatar-font-size': 'fontSizes.md',
+          '--avatar-size': 'sizes.11',
+        },
+      },
+      xl: {
+        root: {
+          '--avatar-font-size': 'fontSizes.lg',
+          '--avatar-size': 'sizes.12',
+        },
+      },
+      '2xl': {
+        root: {
+          '--avatar-font-size': 'fontSizes.xl',
+          '--avatar-size': 'sizes.16',
+        },
+      },
+    },
+
+    variant: {
+      solid: {
+        root: {
+          bg: 'colorPalette.solid',
+          color: 'colorPalette.contrast',
+        },
+      },
+      subtle: {
+        root: {
+          bg: 'colorPalette.muted',
+          color: 'colorPalette.fg',
+        },
+      },
+      outline: {
+        root: {
+          color: 'colorPalette.fg',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.muted',
+        },
+      },
+    },
+
+    shape: {
+      square: {},
+      rounded: {
+        root: { '--avatar-radius': 'radii.l3' },
+      },
+      full: {
+        root: { '--avatar-radius': 'radii.full' },
+      },
+    },
+
+    borderless: {
+      true: {
+        root: {
+          '&[data-group-item]': {
+            borderWidth: '0px',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    shape: 'full',
+    variant: 'subtle',
+  },
+})