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

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

@@ -1,96 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { toastAnatomy } from '@chakra-ui/react/anatomy'
-
-export const toastSlotRecipe = defineSlotRecipe({
-  slots: toastAnatomy.keys(),
-  className: 'chakra-toast',
-  base: {
-    root: {
-      width: 'full',
-      display: 'flex',
-      alignItems: 'flex-start',
-      position: 'relative',
-      gap: '3',
-      py: '4',
-      ps: '4',
-      pe: '6',
-      borderRadius: 'l2',
-      translate: 'var(--x) var(--y)',
-      scale: 'var(--scale)',
-      zIndex: 'var(--z-index)',
-      height: 'var(--height)',
-      opacity: 'var(--opacity)',
-      willChange: 'translate, opacity, scale',
-      transition:
-        'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',
-      transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',
-      _closed: {
-        transition: 'translate 400ms, scale 400ms, opacity 200ms',
-        transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',
-      },
-      bg: 'bg.panel',
-      color: 'fg',
-      boxShadow: 'xl',
-      '--toast-trigger-bg': 'colors.bg.muted',
-      '&[data-type=warning]': {
-        bg: 'orange.solid',
-        color: 'orange.contrast',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=success]': {
-        bg: 'green.solid',
-        color: 'green.contrast',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-      '&[data-type=error]': {
-        bg: 'red.solid',
-        color: 'red.contrast',
-        '--toast-trigger-bg': '{white/10}',
-        '--toast-border-color': '{white/40}',
-      },
-    },
-    title: {
-      fontWeight: 'medium',
-      textStyle: 'sm',
-      marginEnd: '2',
-    },
-    description: {
-      display: 'inline',
-      textStyle: 'sm',
-      opacity: '0.8',
-    },
-    indicator: {
-      flexShrink: '0',
-      boxSize: '5',
-    },
-    actionTrigger: {
-      textStyle: 'sm',
-      fontWeight: 'medium',
-      height: '8',
-      px: '3',
-      borderRadius: 'l2',
-      alignSelf: 'center',
-      borderWidth: '1px',
-      borderColor: 'var(--toast-border-color, inherit)',
-      transition: 'background 200ms',
-      _hover: {
-        bg: 'var(--toast-trigger-bg)',
-      },
-    },
-    closeTrigger: {
-      position: 'absolute',
-      top: '1',
-      insetEnd: '1',
-      padding: '1',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: '{currentColor/60}',
-      borderRadius: 'l2',
-      textStyle: 'md',
-      transition: 'background 200ms',
-    },
-  },
-})

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

@@ -1,40 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { tooltipAnatomy } from '@chakra-ui/react/anatomy'
-
-export const tooltipSlotRecipe = defineSlotRecipe({
-  slots: tooltipAnatomy.keys(),
-  className: 'chakra-tooltip',
-  base: {
-    content: {
-      '--tooltip-bg': 'colors.bg.inverted',
-      bg: 'var(--tooltip-bg)',
-      color: 'fg.inverted',
-      px: '2.5',
-      py: '1',
-      borderRadius: 'l2',
-      fontWeight: 'medium',
-      textStyle: 'xs',
-      boxShadow: 'md',
-      maxW: 'xs',
-      zIndex: 'tooltip',
-      transformOrigin: 'var(--transform-origin)',
-      _open: {
-        animationStyle: 'scale-fade-in',
-        animationDuration: 'fast',
-      },
-      _closed: {
-        animationStyle: 'scale-fade-out',
-        animationDuration: 'fast',
-      },
-    },
-    arrow: {
-      '--arrow-size': 'sizes.2',
-      '--arrow-background': 'var(--tooltip-bg)',
-    },
-    arrowTip: {
-      borderTopWidth: '1px',
-      borderInlineStartWidth: '1px',
-      borderColor: 'var(--tooltip-bg)',
-    },
-  },
-})

package/src/theme/recipes.ts

@@ -1,46 +0,0 @@
-import { buttonRecipe } from '#components/button/button.recipe.ts'
-import { commandRecipe } from '#components/command/command.recipe.ts'
-import { iconBadgeRecipe } from '#components/icon-badge/icon-badge.recipe.ts'
-
-import { badgeRecipe } from './recipes/chakra/badge'
-import { checkmarkRecipe } from './recipes/chakra/checkmark'
-import { codeRecipe } from './recipes/chakra/code'
-import { containerRecipe } from './recipes/chakra/container'
-import { headingRecipe } from './recipes/chakra/heading'
-import { iconRecipe } from './recipes/chakra/icon'
-import { inputRecipe } from './recipes/chakra/input'
-import { inputAddonRecipe } from './recipes/chakra/input-addon'
-import { kbdRecipe } from './recipes/chakra/kbd'
-import { linkRecipe } from './recipes/chakra/link'
-import { markRecipe } from './recipes/chakra/mark'
-import { radiomarkRecipe } from './recipes/chakra/radiomark'
-import { separatorRecipe } from './recipes/chakra/separator'
-import { skeletonRecipe } from './recipes/chakra/skeleton'
-import { skipNavLinkRecipe } from './recipes/chakra/skip-nav-link'
-import { spinnerRecipe } from './recipes/chakra/spinner'
-import { textareaRecipe } from './recipes/chakra/textarea'
-
-export const recipes = {
-  // Chakra UI Recipes
-  badge: badgeRecipe,
-  button: buttonRecipe,
-  code: codeRecipe,
-  container: containerRecipe,
-  heading: headingRecipe,
-  input: inputRecipe,
-  inputAddon: inputAddonRecipe,
-  kbd: kbdRecipe,
-  link: linkRecipe,
-  mark: markRecipe,
-  separator: separatorRecipe,
-  skeleton: skeletonRecipe,
-  skipNavLink: skipNavLinkRecipe,
-  spinner: spinnerRecipe,
-  textarea: textareaRecipe,
-  icon: iconRecipe,
-  checkmark: checkmarkRecipe,
-  radiomark: radiomarkRecipe,
-  // Saas UI
-  command: commandRecipe,
-  iconBadge: iconBadgeRecipe,
-}

package/src/theme/semantic-tokens/colors.ts

@@ -1,403 +0,0 @@
-import { defineSemanticTokens } from '@chakra-ui/react'
-
-export const semanticColors = defineSemanticTokens.colors({
-  presence: {
-    online: {
-      value: { _light: '{colors.green.500}', _dark: '{colors.green.500}' },
-    },
-    offline: {
-      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' },
-    },
-    busy: {
-      value: { _light: '{colors.orange.500}', _dark: '{colors.orange.500}' },
-    },
-    dnd: {
-      value: { _light: '{colors.red.500}', _dark: '{colors.red.500}' },
-    },
-    away: {
-      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' },
-    },
-  },
-  sidebar: {
-    bg: {
-      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
-    },
-    fg: {
-      value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
-    },
-    border: {
-      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
-    },
-    accent: {
-      bg: {
-        value: { _light: '{colors.gray.200/40}', _dark: '{colors.gray.900}' },
-      },
-      fg: {
-        value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
-      },
-    },
-  },
-  bg: {
-    DEFAULT: {
-      value: { _light: '{colors.white}', _dark: '{colors.black}' },
-    },
-    muted: {
-      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
-    },
-    inverted: {
-      value: { _light: '{colors.black}', _dark: '{colors.white}' },
-    },
-    panel: {
-      value: { _light: '{colors.white}', _dark: '{colors.gray.950}' },
-    },
-    error: {
-      value: { _light: '{colors.red.50}', _dark: '{colors.red.950}' },
-    },
-    warning: {
-      value: { _light: '{colors.orange.50}', _dark: '{colors.orange.950}' },
-    },
-    success: {
-      value: { _light: '{colors.green.50}', _dark: '{colors.green.950}' },
-    },
-    info: {
-      value: { _light: '{colors.blue.50}', _dark: '{colors.blue.950}' },
-    },
-  },
-  fg: {
-    DEFAULT: {
-      value: { _light: '{colors.black}', _dark: '{colors.gray.50}' },
-    },
-    subtle: {
-      value: { _light: '{colors.gray.600}', _dark: '{colors.gray.400}' },
-    },
-    muted: {
-      value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' },
-    },
-    inverted: {
-      value: { _light: '{colors.gray.50}', _dark: '{colors.black}' },
-    },
-    error: {
-      value: { _light: '{colors.red.500}', _dark: '{colors.red.400}' },
-    },
-    warning: {
-      value: { _light: '{colors.orange.600}', _dark: '{colors.orange.300}' },
-    },
-    success: {
-      value: { _light: '{colors.green.600}', _dark: '{colors.green.300}' },
-    },
-    info: {
-      value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' },
-    },
-  },
-  border: {
-    DEFAULT: {
-      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
-    },
-    subtle: {
-      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
-    },
-    muted: {
-      value: { _light: '{colors.gray.50}', _dark: '{colors.gray.950}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
-    },
-    inverted: {
-      value: { _light: '{colors.gray.800}', _dark: '{colors.gray.200}' },
-    },
-    error: {
-      value: { _light: '{colors.red.500}', _dark: '{colors.red.400}' },
-    },
-    warning: {
-      value: { _light: '{colors.orange.500}', _dark: '{colors.orange.400}' },
-    },
-    success: {
-      value: { _light: '{colors.green.500}', _dark: '{colors.green.400}' },
-    },
-    info: {
-      value: { _light: '{colors.blue.500}', _dark: '{colors.blue.400}' },
-    },
-  },
-  focusRing: {
-    value: { _light: '{colors.blue.600/50}', _dark: '{colors.blue.500/50}' },
-  },
-
-  accent: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.purple.700}', _dark: '{colors.purple.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.purple.50}', _dark: '{colors.purple.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.purple.100}', _dark: '{colors.purple.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.purple.200}', _dark: '{colors.purple.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.purple.600}', _dark: '{colors.purple.600}' },
-    },
-  },
-
-  neutral: {
-    contrast: {
-      value: { _light: '{colors.white}', _dark: '{colors.black}' },
-    },
-    fg: {
-      value: { _light: '{colors.gray.800}', _dark: '{colors.gray.200}' },
-    },
-    muted: {
-      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
-    },
-    subtle: {
-      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
-    },
-    solid: {
-      value: { _light: '{colors.gray.900}', _dark: '{colors.white}' },
-    },
-  },
-
-  gray: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.gray.900}', _dark: '{colors.gray.200}' },
-    },
-    muted: {
-      value: { _light: '{colors.gray.100}', _dark: '{colors.gray.900}' },
-    },
-    subtle: {
-      value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.gray.300}', _dark: '{colors.gray.700}' },
-    },
-    solid: {
-      value: { _light: '{colors.gray.500}', _dark: '{colors.gray.500}' },
-    },
-  },
-
-  red: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.red.700}', _dark: '{colors.red.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.red.50}', _dark: '{colors.red.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.red.100}', _dark: '{colors.red.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.red.200}', _dark: '{colors.red.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.red.600}', _dark: '{colors.red.600}' },
-    },
-  },
-
-  orange: {
-    contrast: {
-      value: { _light: 'white', _dark: 'black' },
-    },
-    fg: {
-      value: { _light: '{colors.orange.700}', _dark: '{colors.orange.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.orange.50}', _dark: '{colors.orange.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.orange.100}', _dark: '{colors.orange.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.orange.200}', _dark: '{colors.orange.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.orange.600}', _dark: '{colors.orange.500}' },
-    },
-  },
-
-  green: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.green.700}', _dark: '{colors.green.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.green.50}', _dark: '{colors.green.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.green.100}', _dark: '{colors.green.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.green.200}', _dark: '{colors.green.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.green.600}', _dark: '{colors.green.600}' },
-    },
-  },
-
-  blue: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.blue.700}', _dark: '{colors.blue.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.blue.50}', _dark: '{colors.blue.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.blue.100}', _dark: '{colors.blue.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.blue.200}', _dark: '{colors.blue.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.blue.600}', _dark: '{colors.blue.600}' },
-    },
-  },
-
-  yellow: {
-    contrast: {
-      value: { _light: 'black', _dark: 'black' },
-    },
-    fg: {
-      value: { _light: '{colors.yellow.700}', _dark: '{colors.yellow.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.yellow.50}', _dark: '{colors.yellow.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.yellow.100}', _dark: '{colors.yellow.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.yellow.200}', _dark: '{colors.yellow.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.yellow.300}', _dark: '{colors.yellow.300}' },
-    },
-  },
-
-  teal: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.teal.700}', _dark: '{colors.teal.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.teal.50}', _dark: '{colors.teal.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.teal.100}', _dark: '{colors.teal.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.teal.200}', _dark: '{colors.teal.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.teal.600}', _dark: '{colors.teal.600}' },
-    },
-  },
-
-  indigo: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.indigo.700}', _dark: '{colors.indigo.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.indigo.50}', _dark: '{colors.indigo.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.indigo.100}', _dark: '{colors.indigo.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.indigo.200}', _dark: '{colors.indigo.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.indigo.600}', _dark: '{colors.indigo.600}' },
-    },
-  },
-
-  purple: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.purple.700}', _dark: '{colors.purple.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.purple.50}', _dark: '{colors.purple.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.purple.100}', _dark: '{colors.purple.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.purple.200}', _dark: '{colors.purple.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.purple.600}', _dark: '{colors.purple.600}' },
-    },
-  },
-
-  pink: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.pink.700}', _dark: '{colors.pink.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.pink.50}', _dark: '{colors.pink.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.pink.100}', _dark: '{colors.pink.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.pink.200}', _dark: '{colors.pink.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.pink.600}', _dark: '{colors.pink.600}' },
-    },
-  },
-
-  cyan: {
-    contrast: {
-      value: { _light: 'white', _dark: 'white' },
-    },
-    fg: {
-      value: { _light: '{colors.cyan.700}', _dark: '{colors.cyan.300}' },
-    },
-    muted: {
-      value: { _light: '{colors.cyan.50}', _dark: '{colors.cyan.950}' },
-    },
-    subtle: {
-      value: { _light: '{colors.cyan.100}', _dark: '{colors.cyan.900}' },
-    },
-    emphasized: {
-      value: { _light: '{colors.cyan.200}', _dark: '{colors.cyan.800}' },
-    },
-    solid: {
-      value: { _light: '{colors.cyan.600}', _dark: '{colors.cyan.600}' },
-    },
-  },
-})

package/src/theme/semantic-tokens/radii.ts

@@ -1,7 +0,0 @@
-import { defineSemanticTokens } from '@chakra-ui/react'
-
-export const semanticRadii = defineSemanticTokens.radii({
-  l1: { value: '{radii.xs}' },
-  l2: { value: '{radii.sm}' },
-  l3: { value: '{radii.md}' },
-})

package/src/theme/semantic-tokens/shadows.ts

@@ -1,52 +0,0 @@
-import { defineSemanticTokens } from '@chakra-ui/react'
-
-export const semanticShadows = defineSemanticTokens.shadows({
-  xs: {
-    value: {
-      base: '0px 1px 2px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.100}',
-      _dark:
-        '0px 1px 1px {colors.blackAlpha.800}, 0px 0px 1px inset {colors.whiteAlpha.300}',
-    },
-  },
-  sm: {
-    value: {
-      base: '0px 4px 4px -1px {colors.blackAlpha.50}, 0px 0px 1px 1px {colors.blackAlpha.100}',
-      _dark:
-        '0px 2px 4px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
-    },
-  },
-  md: {
-    value: {
-      base: '0px 4px 8px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
-      _dark:
-        '0px 4px 8px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
-    },
-  },
-  lg: {
-    value: {
-      base: '0px 8px 16px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
-      _dark:
-        '0px 8px 16px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
-    },
-  },
-  xl: {
-    value: {
-      base: '0px 16px 24px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
-      _dark:
-        '0px 16px 24px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
-    },
-  },
-  '2xl': {
-    value: {
-      base: '0px 24px 40px {colors.blackAlpha.300}, 0px 0px 1px {colors.blackAlpha.400}',
-      _dark:
-        '0px 24px 40px {colors.blackAlpha.700}, 0px 0px 1px inset {colors.whiteAlpha.400}',
-    },
-  },
-  inset: {
-    value: {
-      base: 'inset 0 0 0 1px {colors.blackAlpha.100}',
-      _dark: 'inset 0 0 0 1px {colors.whiteAlpha.100}',
-    },
-  },
-})