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

package/src/theme/index.ts

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

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

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

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

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

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