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

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

@@ -1,32 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const spinnerRecipe = defineRecipe({
-  className: 'chakra-spinner',
-  base: {
-    display: 'inline-block',
-    borderColor: 'currentColor',
-    borderStyle: 'solid',
-    borderWidth: '2px',
-    borderRadius: 'full',
-    width: 'var(--spinner-size)',
-    height: 'var(--spinner-size)',
-    animation: 'spin',
-    animationDuration: 'slowest',
-    '--spinner-track-color': 'transparent',
-    borderBottomColor: 'var(--spinner-track-color)',
-    borderInlineStartColor: 'var(--spinner-track-color)',
-  },
-  variants: {
-    size: {
-      inherit: { '--spinner-size': '1em' },
-      xs: { '--spinner-size': 'sizes.3' },
-      sm: { '--spinner-size': 'sizes.4' },
-      md: { '--spinner-size': 'sizes.5' },
-      lg: { '--spinner-size': 'sizes.8' },
-      xl: { '--spinner-size': 'sizes.10' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})

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

@@ -1,79 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { statAnatomy } from '@chakra-ui/react/anatomy'
-
-export const statSlotRecipe = defineSlotRecipe({
-  className: 'chakra-stat',
-  slots: statAnatomy.keys(),
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1',
-      position: 'relative',
-      flex: '1',
-    },
-    label: {
-      color: 'fg.muted',
-      textStyle: 'sm',
-    },
-    helpText: {
-      color: 'fg.muted',
-      textStyle: 'xs',
-    },
-    valueUnit: {
-      color: 'fg.muted',
-      textStyle: 'xs',
-      fontWeight: 'initial',
-      letterSpacing: 'initial',
-    },
-    valueText: {
-      verticalAlign: 'baseline',
-      fontWeight: 'semibold',
-      letterSpacing: 'tight',
-      fontFeatureSettings: 'pnum',
-      fontVariantNumeric: 'proportional-nums',
-      display: 'inline-flex',
-      gap: '1',
-    },
-    indicator: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginEnd: 1,
-      '& :where(svg)': {
-        w: '1em',
-        h: '1em',
-      },
-      '&[data-type=up]': {
-        color: 'fg.success',
-      },
-      '&[data-type=down]': {
-        color: 'fg.error',
-      },
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        valueText: {
-          textStyle: 'xl',
-        },
-      },
-      md: {
-        valueText: {
-          textStyle: '2xl',
-        },
-      },
-      lg: {
-        valueText: {
-          textStyle: '3xl',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})

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

@@ -1,48 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { statusAnatomy } from '@chakra-ui/react/anatomy'
-
-export const statusSlotRecipe = defineSlotRecipe({
-  className: 'chakra-status',
-  slots: statusAnatomy.keys(),
-
-  base: {
-    root: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '2',
-    },
-
-    indicator: {
-      width: '0.64em',
-      height: '0.64em',
-      flexShrink: 0,
-      borderRadius: 'full',
-      forcedColorAdjust: 'none',
-      bg: 'colorPalette.solid',
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        root: {
-          textStyle: 'xs',
-        },
-      },
-      md: {
-        root: {
-          textStyle: 'sm',
-        },
-      },
-      lg: {
-        root: {
-          textStyle: 'md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-  },
-})

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

@@ -1,218 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { stepsAnatomy } from '@chakra-ui/react/anatomy'
-
-export const stepsSlotRecipe = defineSlotRecipe({
-  className: 'chakra-steps',
-  slots: stepsAnatomy.keys(),
-  base: {
-    root: {
-      display: 'flex',
-      width: 'full',
-    },
-    list: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      '--steps-gutter': 'spacing.3',
-      '--steps-thickness': '2px',
-    },
-    title: {
-      fontWeight: 'medium',
-      color: 'fg',
-    },
-    description: {
-      color: 'fg.muted',
-    },
-    separator: {
-      bg: 'border',
-      flex: '1',
-    },
-    indicator: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      flexShrink: '0',
-      borderRadius: 'full',
-      fontWeight: 'medium',
-      width: 'var(--steps-size)',
-      height: 'var(--steps-size)',
-      _icon: {
-        flexShrink: '0',
-        width: 'var(--steps-icon-size)',
-        height: 'var(--steps-icon-size)',
-      },
-    },
-    item: {
-      position: 'relative',
-      display: 'flex',
-      flex: '1 0 0',
-      '&:last-of-type': {
-        flex: 'initial',
-        '& [data-part=separator]': {
-          display: 'none',
-        },
-      },
-    },
-    trigger: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '3',
-      textAlign: 'start',
-      focusVisibleRing: 'outside',
-      borderRadius: 'l2',
-    },
-    content: {
-      focusVisibleRing: 'outside',
-    },
-  },
-
-  variants: {
-    orientation: {
-      vertical: {
-        root: {
-          flexDirection: 'row',
-          height: '100%',
-        },
-        list: {
-          flexDirection: 'column',
-          alignItems: 'flex-start',
-        },
-        separator: {
-          position: 'absolute',
-          width: 'var(--steps-thickness)',
-          height: '100%',
-          maxHeight: 'calc(100% - var(--steps-size) - var(--steps-gutter) * 2)',
-          top: 'calc(var(--steps-size) + var(--steps-gutter))',
-          insetStart: 'calc(var(--steps-size) / 2 - 1px)',
-        },
-        item: {
-          alignItems: 'flex-start',
-        },
-      },
-      horizontal: {
-        root: {
-          flexDirection: 'column',
-          width: '100%',
-        },
-        list: {
-          flexDirection: 'row',
-          alignItems: 'center',
-        },
-        separator: {
-          width: '100%',
-          height: 'var(--steps-thickness)',
-          marginX: 'var(--steps-gutter)',
-        },
-        item: {
-          alignItems: 'center',
-        },
-      },
-    },
-
-    variant: {
-      solid: {
-        indicator: {
-          _incomplete: {
-            borderWidth: 'var(--steps-thickness)',
-          },
-          _current: {
-            bg: 'colorPalette.muted',
-            borderWidth: 'var(--steps-thickness)',
-            borderColor: 'colorPalette.solid',
-            color: 'colorPalette.fg',
-          },
-          _complete: {
-            bg: 'colorPalette.solid',
-            borderColor: 'colorPalette.solid',
-            color: 'colorPalette.contrast',
-          },
-        },
-        separator: {
-          _complete: {
-            bg: 'colorPalette.solid',
-          },
-        },
-      },
-      subtle: {
-        indicator: {
-          _incomplete: {
-            bg: 'bg.muted',
-          },
-          _current: {
-            bg: 'colorPalette.muted',
-            color: 'colorPalette.fg',
-          },
-          _complete: {
-            bg: 'colorPalette.emphasized',
-            color: 'colorPalette.fg',
-          },
-        },
-        separator: {
-          _complete: {
-            bg: 'colorPalette.emphasized',
-          },
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        root: {
-          gap: '2.5',
-        },
-        list: {
-          '--steps-size': 'sizes.6',
-          '--steps-icon-size': 'sizes.3.5',
-          textStyle: 'xs',
-        },
-        title: {
-          textStyle: 'sm',
-        },
-      },
-      sm: {
-        root: {
-          gap: '3',
-        },
-        list: {
-          '--steps-size': 'sizes.8',
-          '--steps-icon-size': 'sizes.4',
-          textStyle: 'xs',
-        },
-        title: {
-          textStyle: 'sm',
-        },
-      },
-      md: {
-        root: {
-          gap: '4',
-        },
-        list: {
-          '--steps-size': 'sizes.10',
-          '--steps-icon-size': 'sizes.4',
-          textStyle: 'sm',
-        },
-        title: {
-          textStyle: 'sm',
-        },
-      },
-      lg: {
-        root: {
-          gap: '6',
-        },
-        list: {
-          '--steps-size': 'sizes.11',
-          '--steps-icon-size': 'sizes.5',
-          textStyle: 'md',
-        },
-        title: {
-          textStyle: 'md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'solid',
-    orientation: 'horizontal',
-  },
-})

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

@@ -1,167 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { switchAnatomy } from '@chakra-ui/react/anatomy'
-
-export const switchSlotRecipe = defineSlotRecipe({
-  slots: switchAnatomy.keys(),
-  className: 'chakra-switch',
-  base: {
-    root: {
-      display: 'inline-flex',
-      gap: '2.5',
-      alignItems: 'center',
-      position: 'relative',
-      verticalAlign: 'middle',
-      '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
-      '--switch-x': {
-        base: 'var(--switch-diff)',
-        _rtl: 'calc(var(--switch-diff) * -1)',
-      },
-    },
-
-    label: {
-      lineHeight: '1',
-      userSelect: 'none',
-      fontSize: 'sm',
-      fontWeight: 'medium',
-      _disabled: {
-        opacity: '0.5',
-      },
-    },
-
-    indicator: {
-      position: 'absolute',
-      height: 'var(--switch-height)',
-      width: 'var(--switch-height)',
-      fontSize: 'var(--switch-indicator-font-size)',
-      fontWeight: 'medium',
-      flexShrink: 0,
-      userSelect: 'none',
-      display: 'grid',
-      placeContent: 'center',
-      transition: 'inset-inline-start 0.12s ease',
-      insetInlineStart: 'calc(var(--switch-x) - 2px)',
-      _checked: {
-        insetInlineStart: '2px',
-      },
-    },
-
-    control: {
-      display: 'inline-flex',
-      gap: '0.5rem',
-      flexShrink: 0,
-      justifyContent: 'flex-start',
-      cursor: 'switch',
-      borderRadius: 'full',
-      position: 'relative',
-      width: 'var(--switch-width)',
-      height: 'var(--switch-height)',
-      _disabled: {
-        opacity: '0.5',
-        cursor: 'not-allowed',
-      },
-      _invalid: {
-        outline: '2px solid',
-        outlineColor: 'border.error',
-        outlineOffset: '2px',
-      },
-    },
-
-    thumb: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: 0,
-      transitionProperty: 'translate',
-      transitionDuration: 'fast',
-      borderRadius: 'inherit',
-      _checked: {
-        translate: 'var(--switch-x) 0',
-      },
-    },
-  },
-
-  variants: {
-    variant: {
-      solid: {
-        control: {
-          borderRadius: 'full',
-          bg: 'bg.emphasized',
-          focusVisibleRing: 'outside',
-          _checked: {
-            bg: 'colorPalette.solid',
-          },
-        },
-        thumb: {
-          bg: 'white',
-          width: 'var(--switch-height)',
-          height: 'var(--switch-height)',
-          scale: '0.8',
-          boxShadow: 'sm',
-          _checked: {
-            bg: 'colorPalette.contrast',
-          },
-        },
-      },
-
-      raised: {
-        control: {
-          borderRadius: 'full',
-          height: 'calc(var(--switch-height) / 2)',
-          bg: 'bg.muted',
-          boxShadow: 'inset',
-          _checked: {
-            bg: 'colorPalette.solid/60',
-          },
-        },
-        thumb: {
-          width: 'var(--switch-height)',
-          height: 'var(--switch-height)',
-          position: 'relative',
-          top: 'calc(var(--switch-height) * -0.25)',
-          bg: 'white',
-          boxShadow: 'xs',
-          focusVisibleRing: 'outside',
-          _checked: {
-            bg: 'colorPalette.solid',
-          },
-        },
-      },
-    },
-
-    size: {
-      xs: {
-        root: {
-          '--switch-width': 'sizes.6',
-          '--switch-height': 'sizes.3',
-          '--switch-indicator-font-size': 'fontSizes.xs',
-        },
-      },
-      sm: {
-        root: {
-          '--switch-width': 'sizes.8',
-          '--switch-height': 'sizes.4',
-          '--switch-indicator-font-size': 'fontSizes.xs',
-        },
-      },
-      md: {
-        root: {
-          '--switch-width': 'sizes.10',
-          '--switch-height': 'sizes.5',
-          '--switch-indicator-font-size': 'fontSizes.sm',
-        },
-      },
-      lg: {
-        root: {
-          '--switch-width': 'sizes.12',
-          '--switch-height': 'sizes.6',
-          '--switch-indicator-font-size': 'fontSizes.md',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'solid',
-    size: 'md',
-  },
-})

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

@@ -1,172 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-import { tableAnatomy } from '@chakra-ui/react/anatomy'
-
-export const tableSlotRecipe = defineSlotRecipe({
-  className: 'chakra-table',
-  slots: tableAnatomy.keys(),
-  base: {
-    root: {
-      fontVariantNumeric: 'lining-nums tabular-nums',
-      borderCollapse: 'collapse',
-      width: 'full',
-      textAlign: 'start',
-      verticalAlign: 'top',
-    },
-    row: {
-      _selected: {
-        bg: 'colorPalette.subtle',
-      },
-    },
-    cell: {
-      textAlign: 'start',
-      alignItems: 'center',
-    },
-    columnHeader: {
-      fontWeight: 'medium',
-      textAlign: 'start',
-      color: 'fg',
-    },
-    caption: {
-      fontWeight: 'medium',
-      textStyle: 'xs',
-    },
-    footer: {
-      fontWeight: 'medium',
-    },
-  },
-
-  variants: {
-    interactive: {
-      true: {
-        body: {
-          '& tr': {
-            _hover: {
-              bg: 'colorPalette.subtle',
-            },
-          },
-        },
-      },
-    },
-
-    stickyHeader: {
-      true: {
-        header: {
-          '& :where(tr)': {
-            top: 'var(--table-sticky-offset, 0)',
-            position: 'sticky',
-            zIndex: 1,
-          },
-        },
-      },
-    },
-
-    striped: {
-      true: {
-        row: {
-          '&:nth-of-type(odd) td': {
-            bg: 'bg.muted',
-          },
-        },
-      },
-    },
-
-    showColumnBorder: {
-      true: {
-        columnHeader: {
-          '&:not(:last-of-type)': {
-            borderInlineEndWidth: '1px',
-          },
-        },
-        cell: {
-          '&:not(:last-of-type)': {
-            borderInlineEndWidth: '1px',
-          },
-        },
-      },
-    },
-
-    variant: {
-      line: {
-        columnHeader: {
-          borderBottomWidth: '1px',
-        },
-        cell: {
-          borderBottomWidth: '1px',
-        },
-        row: {
-          bg: 'bg',
-        },
-      },
-
-      outline: {
-        root: {
-          boxShadow: '0 0 0 1px {colors.border}',
-          overflow: 'hidden',
-        },
-        columnHeader: {
-          borderBottomWidth: '1px',
-        },
-        header: {
-          bg: 'bg.muted',
-        },
-        row: {
-          '&:not(:last-of-type)': {
-            borderBottomWidth: '1px',
-          },
-        },
-        footer: {
-          borderTopWidth: '1px',
-        },
-      },
-    },
-
-    size: {
-      sm: {
-        root: {
-          textStyle: 'sm',
-        },
-        columnHeader: {
-          px: '2',
-          py: '2',
-        },
-        cell: {
-          px: '2',
-          py: '2',
-        },
-      },
-
-      md: {
-        root: {
-          textStyle: 'sm',
-        },
-        columnHeader: {
-          px: '3',
-          py: '3',
-        },
-        cell: {
-          px: '3',
-          py: '3',
-        },
-      },
-
-      lg: {
-        root: {
-          textStyle: 'md',
-        },
-        columnHeader: {
-          px: '4',
-          py: '3',
-        },
-        cell: {
-          px: '4',
-          py: '3',
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'line',
-    size: 'md',
-  },
-})