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

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

@@ -0,0 +1,67 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const badgeRecipe = defineRecipe({
+  className: 'chakra-badge',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: 'l2',
+    gap: '1',
+    fontWeight: 'medium',
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: 'colorPalette.solid',
+        color: 'colorPalette.contrast',
+      },
+      subtle: {
+        bg: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+      },
+      outline: {
+        color: 'colorPalette.fg',
+        shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+        shadowColor: 'colorPalette.muted',
+      },
+      surface: {
+        bg: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+        shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+        shadowColor: 'colorPalette.muted',
+      },
+      plain: {
+        color: 'colorPalette.fg',
+      },
+    },
+    size: {
+      xs: {
+        textStyle: '2xs',
+        px: '1',
+        minH: '4',
+      },
+      sm: {
+        textStyle: 'xs',
+        px: '1.5',
+        minH: '5',
+      },
+      md: {
+        textStyle: 'sm',
+        px: '2',
+        minH: '6',
+      },
+      lg: {
+        textStyle: 'sm',
+        px: '2.5',
+        minH: '7',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'subtle',
+    size: 'sm',
+  },
+})

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

@@ -0,0 +1,83 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { blockquoteAnatomy } from '@chakra-ui/react/anatomy'
+
+export const blockquoteSlotRecipe = defineSlotRecipe({
+  className: 'chakra-blockquote',
+  slots: blockquoteAnatomy.keys(),
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2',
+    },
+    caption: {
+      textStyle: 'sm',
+      color: 'fg.muted',
+    },
+    icon: {
+      boxSize: '5',
+    },
+  },
+
+  variants: {
+    justify: {
+      start: {
+        root: {
+          alignItems: 'flex-start',
+          textAlign: 'start',
+        },
+      },
+      center: {
+        root: {
+          alignItems: 'center',
+          textAlign: 'center',
+        },
+      },
+      end: {
+        root: {
+          alignItems: 'flex-end',
+          textAlign: 'end',
+        },
+      },
+    },
+
+    variant: {
+      subtle: {
+        root: {
+          paddingX: '5',
+          borderStartWidth: '4px',
+          borderStartColor: 'colorPalette.muted',
+        },
+        icon: {
+          color: 'colorPalette.fg',
+        },
+      },
+
+      solid: {
+        root: {
+          paddingX: '5',
+          borderStartWidth: '4px',
+          borderStartColor: 'colorPalette.solid',
+        },
+        icon: {
+          color: 'colorPalette.solid',
+        },
+      },
+
+      plain: {
+        root: {
+          paddingX: '5',
+        },
+        icon: {
+          color: 'colorPalette.solid',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'subtle',
+    justify: 'start',
+  },
+})

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

@@ -0,0 +1,94 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { breadcrumbAnatomy } from '@chakra-ui/react/anatomy'
+
+export const breadcrumbSlotRecipe = defineSlotRecipe({
+  className: 'chakra-breadcrumb',
+  slots: breadcrumbAnatomy.keys(),
+  base: {
+    list: {
+      display: 'flex',
+      alignItems: 'center',
+      wordBreak: 'break-word',
+      color: 'fg.muted',
+    },
+    link: {
+      outline: '0',
+      textDecoration: 'none',
+      borderRadius: 'l1',
+      focusRing: 'outside',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '2',
+    },
+    item: {
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+    separator: {
+      color: 'fg.muted',
+      opacity: '0.8',
+      _icon: {
+        boxSize: '1em',
+      },
+    },
+    ellipsis: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      _icon: {
+        boxSize: '1em',
+      },
+    },
+  },
+
+  variants: {
+    variant: {
+      underline: {
+        link: {
+          color: 'colorPalette.fg',
+          textDecoration: 'underline',
+          textUnderlineOffset: '0.2em',
+          textDecorationColor: 'colorPalette.muted',
+        },
+        currentLink: {
+          color: 'colorPalette.fg',
+        },
+      },
+      plain: {
+        link: {
+          color: 'fg.muted',
+          _hover: { color: 'fg' },
+        },
+        currentLink: {
+          color: 'fg',
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        list: {
+          gap: '1',
+          textStyle: 'xs',
+        },
+      },
+      md: {
+        list: {
+          gap: '1.5',
+          textStyle: 'sm',
+        },
+      },
+      lg: {
+        list: {
+          gap: '2',
+          textStyle: 'md',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'plain',
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,99 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { cardAnatomy } from '@chakra-ui/react/anatomy'
+
+export const cardSlotRecipe = defineSlotRecipe({
+  className: 'chakra-card',
+  slots: cardAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      minWidth: '0',
+      wordWrap: 'break-word',
+      borderRadius: 'l3',
+      color: 'fg',
+      textAlign: 'start',
+    },
+    title: {
+      fontWeight: 'semibold',
+    },
+    description: {
+      color: 'fg.muted',
+      fontSize: 'sm',
+    },
+    header: {
+      paddingInline: 'var(--card-padding)',
+      paddingTop: 'var(--card-padding)',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+    },
+    body: {
+      padding: 'var(--card-padding)',
+      flex: '1',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      paddingInline: 'var(--card-padding)',
+      paddingBottom: 'var(--card-padding)',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          '--card-padding': 'spacing.4',
+        },
+        title: {
+          textStyle: 'md',
+        },
+      },
+      md: {
+        root: {
+          '--card-padding': 'spacing.6',
+        },
+        title: {
+          textStyle: 'lg',
+        },
+      },
+      lg: {
+        root: {
+          '--card-padding': 'spacing.7',
+        },
+        title: {
+          textStyle: 'xl',
+        },
+      },
+    },
+
+    variant: {
+      elevated: {
+        root: {
+          bg: 'bg.panel',
+          boxShadow: 'md',
+        },
+      },
+      outline: {
+        root: {
+          bg: 'bg.panel',
+          borderWidth: '1px',
+          borderColor: 'border',
+        },
+      },
+      subtle: {
+        root: {
+          bg: 'bg.muted',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+})

package/src/theme/recipes/chakra/checkbox-card.ts

@@ -0,0 +1,212 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { checkboxCardAnatomy } from '@chakra-ui/react/anatomy'
+
+import { checkmarkRecipe } from './checkmark'
+
+export const checkboxCardSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: 'chakra-checkbox-card',
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      userSelect: 'none',
+      position: 'relative',
+      borderRadius: 'l2',
+      flex: '1',
+      focusVisibleRing: 'outside',
+      _disabled: {
+        opacity: '0.8',
+        borderColor: 'border.subtle',
+      },
+      _invalid: {
+        outline: '2px solid',
+        outlineColor: 'border.error',
+      },
+    },
+    control: {
+      display: 'inline-flex',
+      flex: '1',
+      position: 'relative',
+      borderRadius: 'inherit',
+      justifyContent: 'var(--checkbox-card-justify)',
+      alignItems: 'var(--checkbox-card-align)',
+    },
+    label: {
+      fontWeight: 'medium',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '2',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+    description: {
+      opacity: '0.64',
+      textStyle: 'sm',
+    },
+    addon: {
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+    indicator: checkmarkRecipe.base,
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1',
+      gap: '1',
+      justifyContent: 'var(--checkbox-card-justify)',
+      alignItems: 'var(--checkbox-card-align)',
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: {
+          textStyle: 'sm',
+        },
+        control: {
+          padding: '3',
+          gap: '1.5',
+        },
+        addon: {
+          px: '3',
+          py: '1.5',
+          borderTopWidth: '1px',
+        },
+        indicator: checkmarkRecipe.variants?.size.sm,
+      },
+      md: {
+        root: {
+          textStyle: 'sm',
+        },
+        control: {
+          padding: '4',
+          gap: '2.5',
+        },
+        addon: {
+          px: '4',
+          py: '2',
+          borderTopWidth: '1px',
+        },
+        indicator: checkmarkRecipe.variants?.size.md,
+      },
+      lg: {
+        root: {
+          textStyle: 'md',
+        },
+        control: {
+          padding: '4',
+          gap: '3.5',
+        },
+        addon: {
+          px: '4',
+          py: '2',
+          borderTopWidth: '1px',
+        },
+        indicator: checkmarkRecipe.variants?.size.lg,
+      },
+    },
+
+    variant: {
+      surface: {
+        root: {
+          borderWidth: '1px',
+          borderColor: 'border',
+          _checked: {
+            bg: 'colorPalette.subtle',
+            color: 'colorPalette.fg',
+            borderColor: 'colorPalette.muted',
+          },
+          _disabled: {
+            bg: 'bg.muted',
+          },
+        },
+        indicator: checkmarkRecipe.variants?.variant.solid,
+      },
+
+      subtle: {
+        root: {
+          bg: 'bg.muted',
+        },
+        control: {
+          _checked: {
+            bg: 'colorPalette.muted',
+            color: 'colorPalette.fg',
+          },
+        },
+        indicator: checkmarkRecipe.variants?.variant.plain,
+      },
+
+      outline: {
+        root: {
+          borderWidth: '1px',
+          borderColor: 'border',
+          _checked: {
+            boxShadow: '0 0 0 1px var(--shadow-color)',
+            boxShadowColor: 'colorPalette.solid',
+            borderColor: 'colorPalette.solid',
+          },
+        },
+        indicator: checkmarkRecipe.variants?.variant.solid,
+      },
+
+      solid: {
+        root: {
+          borderWidth: '1px',
+          _checked: {
+            bg: 'colorPalette.solid',
+            color: 'colorPalette.contrast',
+            borderColor: 'colorPalette.solid',
+          },
+        },
+        indicator: checkmarkRecipe.variants?.variant.inverted,
+      },
+    },
+
+    justify: {
+      start: {
+        root: { '--checkbox-card-justify': 'flex-start' },
+      },
+      end: {
+        root: { '--checkbox-card-justify': 'flex-end' },
+      },
+      center: {
+        root: { '--checkbox-card-justify': 'center' },
+      },
+    },
+
+    align: {
+      start: {
+        root: { '--checkbox-card-align': 'flex-start' },
+        content: { textAlign: 'start' },
+      },
+      end: {
+        root: { '--checkbox-card-align': 'flex-end' },
+        content: { textAlign: 'end' },
+      },
+      center: {
+        root: { '--checkbox-card-align': 'center' },
+        content: { textAlign: 'center' },
+      },
+    },
+
+    orientation: {
+      vertical: {
+        control: { flexDirection: 'column' },
+      },
+      horizontal: {
+        control: { flexDirection: 'row' },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+    align: 'start',
+    orientation: 'horizontal',
+  },
+})

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

@@ -0,0 +1,70 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { checkboxAnatomy } from '@chakra-ui/react/anatomy'
+
+import { checkmarkRecipe } from './checkmark'
+
+export const checkboxSlotRecipe = defineSlotRecipe({
+  slots: checkboxAnatomy.keys(),
+  className: 'chakra-checkbox',
+  base: {
+    root: {
+      display: 'inline-flex',
+      gap: '2',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      position: 'relative',
+    },
+
+    control: checkmarkRecipe.base,
+
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+      _disabled: {
+        opacity: '0.5',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: { gap: '1.5' },
+        label: { textStyle: 'xs' },
+        control: checkmarkRecipe.variants?.size?.xs,
+      },
+      sm: {
+        root: { gap: '2' },
+        label: { textStyle: 'sm' },
+        control: checkmarkRecipe.variants?.size?.sm,
+      },
+      md: {
+        root: { gap: '2.5' },
+        label: { textStyle: 'sm' },
+        control: checkmarkRecipe.variants?.size?.md,
+      },
+      lg: {
+        root: { gap: '3' },
+        label: { textStyle: 'md' },
+        control: checkmarkRecipe.variants?.size?.lg,
+      },
+    },
+
+    variant: {
+      outline: {
+        control: checkmarkRecipe.variants?.variant?.outline,
+      },
+      solid: {
+        control: checkmarkRecipe.variants?.variant?.solid,
+      },
+      subtle: {
+        control: checkmarkRecipe.variants?.variant?.subtle,
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,83 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const checkmarkRecipe = defineRecipe({
+  className: 'chakra-checkmark',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: '0',
+    color: 'white',
+    borderWidth: '1px',
+    borderColor: 'transparent',
+    borderRadius: 'l1',
+    focusVisibleRing: 'outside',
+    _invalid: {
+      colorPalette: 'red',
+      borderColor: 'border.error',
+    },
+    _disabled: {
+      opacity: '0.5',
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        boxSize: '3',
+      },
+      sm: {
+        boxSize: '4',
+      },
+      md: {
+        boxSize: '5',
+        p: '0.5',
+      },
+      lg: {
+        boxSize: '6',
+        p: '0.5',
+      },
+    },
+
+    variant: {
+      solid: {
+        borderColor: 'border',
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          bg: 'colorPalette.solid',
+          color: 'colorPalette.contrast',
+          borderColor: 'colorPalette.solid',
+        },
+      },
+      outline: {
+        borderColor: 'border',
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          color: 'colorPalette.fg',
+          borderColor: 'colorPalette.solid',
+        },
+      },
+      subtle: {
+        bg: 'colorPalette.muted',
+        borderColor: 'colorPalette.muted',
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          color: 'colorPalette.fg',
+        },
+      },
+      plain: {
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          color: 'colorPalette.fg',
+        },
+      },
+      inverted: {
+        borderColor: 'border',
+        color: 'colorPalette.fg',
+        '&:is([data-state=checked], [data-state=indeterminate])': {
+          borderColor: 'colorPalette.solid',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+})