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

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

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

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

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

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