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

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

@@ -0,0 +1,280 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { tabsAnatomy } from '@chakra-ui/react/anatomy'
+
+export const tabsSlotRecipe = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  className: 'chakra-tabs',
+  base: {
+    root: {
+      '--tabs-trigger-radius': 'radii.l2',
+      position: 'relative',
+      _horizontal: {
+        display: 'block',
+      },
+      _vertical: {
+        display: 'flex',
+      },
+    },
+    list: {
+      display: 'inline-flex',
+      position: 'relative',
+      isolation: 'isolate',
+      '--tabs-indicator-shadow': 'shadows.xs',
+      '--tabs-indicator-bg': 'colors.bg',
+      minH: 'var(--tabs-height)',
+      _horizontal: {
+        flexDirection: 'row',
+      },
+      _vertical: {
+        flexDirection: 'column',
+      },
+    },
+    trigger: {
+      outline: '0',
+      minW: 'var(--tabs-height)',
+      height: 'var(--tabs-height)',
+      display: 'flex',
+      alignItems: 'center',
+      fontWeight: 'medium',
+      position: 'relative',
+      cursor: 'button',
+      gap: '2',
+      _focusVisible: {
+        zIndex: 1,
+        outline: '2px solid',
+        outlineColor: 'colorPalette.focusRing',
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        opacity: 0.5,
+      },
+    },
+    content: {
+      focusVisibleRing: 'inside',
+      _horizontal: {
+        width: '100%',
+        pt: 'var(--tabs-content-padding)',
+      },
+      _vertical: {
+        height: '100%',
+        ps: 'var(--tabs-content-padding)',
+      },
+    },
+    indicator: {
+      width: 'var(--width)',
+      height: 'var(--height)',
+      borderRadius: 'var(--tabs-indicator-radius)',
+      bg: 'var(--tabs-indicator-bg)',
+      shadow: 'var(--tabs-indicator-shadow)',
+      zIndex: -1,
+    },
+  },
+
+  variants: {
+    fitted: {
+      true: {
+        list: {
+          display: 'flex',
+        },
+        trigger: {
+          flex: 1,
+          textAlign: 'center',
+          justifyContent: 'center',
+        },
+      },
+    },
+
+    justify: {
+      start: {
+        list: {
+          justifyContent: 'flex-start',
+        },
+      },
+      center: {
+        list: {
+          justifyContent: 'center',
+        },
+      },
+      end: {
+        list: {
+          justifyContent: 'flex-end',
+        },
+      },
+    },
+
+    size: {
+      sm: {
+        root: {
+          '--tabs-height': 'sizes.9',
+          '--tabs-content-padding': 'spacing.3',
+        },
+        trigger: {
+          py: '1',
+          px: '3',
+          textStyle: 'sm',
+        },
+      },
+      md: {
+        root: {
+          '--tabs-height': 'sizes.10',
+          '--tabs-content-padding': 'spacing.4',
+        },
+        trigger: {
+          py: '2',
+          px: '4',
+          textStyle: 'sm',
+        },
+      },
+      lg: {
+        root: {
+          '--tabs-height': 'sizes.11',
+          '--tabs-content-padding': 'spacing.4.5',
+        },
+        trigger: {
+          py: '2',
+          px: '4.5',
+          textStyle: 'md',
+        },
+      },
+    },
+
+    variant: {
+      line: {
+        list: {
+          display: 'flex',
+          borderColor: 'border',
+          _horizontal: {
+            borderBottomWidth: '1px',
+          },
+          _vertical: {
+            borderEndWidth: '1px',
+          },
+        },
+        trigger: {
+          color: 'fg.muted',
+          _disabled: {
+            _active: { bg: 'initial' },
+          },
+          _selected: {
+            color: 'fg',
+            _horizontal: {
+              layerStyle: 'indicator.bottom',
+              '--indicator-offset-y': '-1px',
+              '--indicator-color': 'colors.colorPalette.solid',
+            },
+            _vertical: {
+              layerStyle: 'indicator.end',
+              '--indicator-offset-x': '-1px',
+            },
+          },
+        },
+      },
+
+      subtle: {
+        trigger: {
+          borderRadius: 'var(--tabs-trigger-radius)',
+          color: 'fg.muted',
+          _selected: {
+            bg: 'colorPalette.subtle',
+            color: 'colorPalette.fg',
+          },
+        },
+      },
+
+      enclosed: {
+        list: {
+          bg: 'bg.muted',
+          padding: '1',
+          borderRadius: 'l3',
+          minH: 'calc(var(--tabs-height) - 4px)',
+        },
+        trigger: {
+          justifyContent: 'center',
+          color: 'fg.muted',
+          borderRadius: 'var(--tabs-trigger-radius)',
+          _selected: {
+            bg: 'bg',
+            color: 'colorPalette.fg',
+            shadow: 'xs',
+          },
+        },
+      },
+
+      outline: {
+        list: {
+          '--line-thickness': '1px',
+          '--line-offset': 'calc(var(--line-thickness) * -1)',
+          borderColor: 'border',
+          display: 'flex',
+          _horizontal: {
+            _before: {
+              content: '""',
+              position: 'absolute',
+              bottom: '0px',
+              width: '100%',
+              borderBottomWidth: 'var(--line-thickness)',
+              borderBottomColor: 'border',
+            },
+          },
+          _vertical: {
+            _before: {
+              content: '""',
+              position: 'absolute',
+              insetInline: 'var(--line-offset)',
+              height: 'calc(100% - calc(var(--line-thickness) * 2))',
+              borderEndWidth: 'var(--line-thickness)',
+              borderEndColor: 'border',
+            },
+          },
+        },
+        trigger: {
+          color: 'fg.muted',
+          borderWidth: '1px',
+          borderColor: 'transparent',
+          _selected: {
+            bg: 'currentBg',
+            color: 'colorPalette.fg',
+          },
+          _horizontal: {
+            borderTopRadius: 'var(--tabs-trigger-radius)',
+            marginBottom: 'var(--line-offset)',
+            marginEnd: { _notLast: 'var(--line-offset)' },
+            _selected: {
+              borderColor: 'border',
+              borderBottomColor: 'transparent',
+            },
+          },
+          _vertical: {
+            borderStartRadius: 'var(--tabs-trigger-radius)',
+            marginEnd: 'var(--line-offset)',
+            marginBottom: { _notLast: 'var(--line-offset)' },
+            _selected: {
+              borderColor: 'border',
+              borderEndColor: 'transparent',
+            },
+          },
+        },
+      },
+
+      plain: {
+        trigger: {
+          color: 'fg.muted',
+          _selected: {
+            color: 'colorPalette.fg',
+          },
+          borderRadius: 'var(--tabs-trigger-radius)',
+          '&[data-selected][data-ssr]': {
+            bg: 'var(--tabs-indicator-bg)',
+            shadow: 'var(--tabs-indicator-shadow)',
+            borderRadius: 'var(--tabs-indicator-radius)',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'line',
+  },
+})

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

@@ -0,0 +1,131 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { tagAnatomy } from '@chakra-ui/react/anatomy'
+
+import { badgeRecipe } from './badge'
+
+const badgeVariant = badgeRecipe.variants?.variant
+
+export const tagSlotRecipe = defineSlotRecipe({
+  slots: tagAnatomy.keys(),
+  className: 'chakra-tag',
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      maxWidth: '100%',
+      userSelect: 'none',
+      borderRadius: 'l2',
+      focusVisibleRing: 'outside',
+    },
+    label: {
+      lineClamp: '1',
+    },
+    closeTrigger: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      outline: '0',
+      borderRadius: 'l1',
+      color: 'currentColor',
+      focusVisibleRing: 'inside',
+      focusRingWidth: '2px',
+    },
+    startElement: {
+      flexShrink: 0,
+      boxSize: 'var(--tag-element-size)',
+      ms: 'var(--tag-element-offset)',
+      '&:has([data-scope=avatar])': {
+        boxSize: 'var(--tag-avatar-size)',
+        ms: 'calc(var(--tag-element-offset) * 1.5)',
+      },
+      _icon: { boxSize: '100%' },
+    },
+    endElement: {
+      flexShrink: 0,
+      boxSize: 'var(--tag-element-size)',
+      me: 'var(--tag-element-offset)',
+      _icon: { boxSize: '100%' },
+      '&:has(button)': {
+        ms: 'calc(var(--tag-element-offset) * -1)',
+      },
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: {
+          px: '1.5',
+          minH: '4.5',
+          gap: '1',
+          '--tag-avatar-size': 'spacing.3',
+          '--tag-element-size': 'spacing.3',
+          '--tag-element-offset': '-2px',
+        },
+        label: {
+          textStyle: 'xs',
+        },
+      },
+      md: {
+        root: {
+          px: '1.5',
+          minH: '5',
+          gap: '1',
+          '--tag-avatar-size': 'spacing.3.5',
+          '--tag-element-size': 'spacing.3.5',
+          '--tag-element-offset': '-2px',
+        },
+        label: {
+          textStyle: 'xs',
+        },
+      },
+      lg: {
+        root: {
+          px: '2',
+          minH: '6',
+          gap: '1.5',
+          '--tag-avatar-size': 'spacing.4.5',
+          '--tag-element-size': 'spacing.4',
+          '--tag-element-offset': '-3px',
+        },
+        label: {
+          textStyle: 'sm',
+        },
+      },
+      xl: {
+        root: {
+          px: '2.5',
+          minH: '8',
+          gap: '1.5',
+          '--tag-avatar-size': 'spacing.6',
+          '--tag-element-size': 'spacing.4.5',
+          '--tag-element-offset': '-4px',
+        },
+        label: {
+          textStyle: 'sm',
+        },
+      },
+    },
+
+    variant: {
+      subtle: {
+        root: badgeVariant?.subtle,
+      },
+      solid: {
+        root: badgeVariant?.solid,
+      },
+      outline: {
+        root: badgeVariant?.outline,
+      },
+      surface: {
+        root: badgeVariant?.surface,
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'surface',
+  },
+})

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

@@ -0,0 +1,88 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const textareaRecipe = defineRecipe({
+  className: 'chakra-textarea',
+  base: {
+    width: '100%',
+    minWidth: '0',
+    outline: '0',
+    position: 'relative',
+    appearance: 'none',
+    textAlign: 'start',
+    borderRadius: 'l2',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+    '--focus-color': 'colors.colorPalette.focusRing',
+    '--error-color': 'colors.border.error',
+    _invalid: {
+      focusRingColor: 'var(--error-color)',
+      borderColor: 'var(--error-color)',
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        textStyle: 'xs',
+        px: '2',
+        py: '1.5',
+        scrollPaddingBottom: '1.5',
+      },
+      sm: {
+        textStyle: 'sm',
+        px: '2.5',
+        py: '2',
+        scrollPaddingBottom: '2',
+      },
+      md: {
+        textStyle: 'sm',
+        px: '3',
+        py: '2',
+        scrollPaddingBottom: '2',
+      },
+      lg: {
+        textStyle: 'md',
+        px: '4',
+        py: '3',
+        scrollPaddingBottom: '3',
+      },
+      xl: {
+        textStyle: 'md',
+        px: '4.5',
+        py: '3.5',
+        scrollPaddingBottom: '3.5',
+      },
+    },
+
+    variant: {
+      outline: {
+        bg: 'transparent',
+        borderWidth: '1px',
+        borderColor: 'border',
+        focusVisibleRing: 'inside',
+      },
+      subtle: {
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        bg: 'bg.muted',
+        focusVisibleRing: 'inside',
+      },
+      flushed: {
+        bg: 'transparent',
+        borderBottomWidth: '1px',
+        borderBottomColor: 'border',
+        borderRadius: '0',
+        px: '0',
+        _focusVisible: {
+          borderColor: 'var(--focus-color)',
+          boxShadow: '0px 1px 0px 0px var(--focus-color)',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+})

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

@@ -0,0 +1,138 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+import { timelineAnatomy } from '@chakra-ui/react/anatomy'
+
+export const timelineSlotRecipe = defineSlotRecipe({
+  slots: timelineAnatomy.keys(),
+  className: 'chakra-timeline',
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      '--timeline-thickness': '1px',
+      '--timeline-gutter': '4px',
+    },
+    item: {
+      display: 'flex',
+      position: 'relative',
+      alignItems: 'flex-start',
+      flexShrink: 0,
+      gap: '4',
+      _last: {
+        '& :where(.chakra-timeline__separator)': { display: 'none' },
+      },
+    },
+    separator: {
+      position: 'absolute',
+      borderStartWidth: 'var(--timeline-thickness)',
+      ms: 'calc(-1 * var(--timeline-thickness) / 2)',
+      insetInlineStart: 'calc(var(--timeline-indicator-size) / 2)',
+      insetBlock: '0',
+      borderColor: 'border',
+    },
+    indicator: {
+      outline: '2px solid {colors.bg}',
+      position: 'relative',
+      flexShrink: '0',
+      boxSize: 'var(--timeline-indicator-size)',
+      fontSize: 'var(--timeline-font-size)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'full',
+      fontWeight: 'medium',
+    },
+    connector: {
+      alignSelf: 'stretch',
+      position: 'relative',
+    },
+    content: {
+      pb: '6',
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'full',
+      gap: '2',
+    },
+    title: {
+      display: 'flex',
+      fontWeight: 'medium',
+      flexWrap: 'wrap',
+      gap: '1.5',
+      alignItems: 'center',
+      mt: 'var(--timeline-margin)',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'xs',
+    },
+  },
+
+  variants: {
+    variant: {
+      subtle: {
+        indicator: {
+          bg: 'bg.muted',
+        },
+      },
+      solid: {
+        indicator: {
+          bg: 'bg.inverted',
+          color: 'fg.inverted',
+        },
+      },
+      outline: {
+        indicator: {
+          bg: 'bg',
+          borderWidth: '2px',
+        },
+      },
+      plain: {},
+    },
+
+    size: {
+      sm: {
+        root: {
+          '--timeline-indicator-size': 'sizes.4',
+          '--timeline-font-size': 'fontSizes.2xs',
+        },
+        title: {
+          textStyle: 'xs',
+        },
+      },
+      md: {
+        root: {
+          '--timeline-indicator-size': 'sizes.5',
+          '--timeline-font-size': 'fontSizes.xs',
+        },
+        title: {
+          textStyle: 'sm',
+        },
+      },
+      lg: {
+        root: {
+          '--timeline-indicator-size': 'sizes.6',
+          '--timeline-font-size': 'fontSizes.xs',
+        },
+        title: {
+          mt: '0.5',
+          textStyle: 'sm',
+        },
+      },
+      xl: {
+        root: {
+          '--timeline-indicator-size': 'sizes.8',
+          '--timeline-font-size': 'fontSizes.sm',
+        },
+        title: {
+          mt: '1.5',
+          textStyle: 'sm',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'solid',
+  },
+})