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

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

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

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

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

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