@discourser/design-system 0.9.3 → 0.9.4

package/src/preset/recipes/badge.ts

@@ -0,0 +1,49 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const badge = defineRecipe({
+  className: 'badge',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: 'l2',
+    lineHeight: '1',
+    fontWeight: 'medium',
+    fontVariantNumeric: 'tabular-nums',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+  },
+  defaultVariants: {
+    variant: 'subtle',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: 'colorPalette.solid.bg',
+        color: 'colorPalette.solid.fg',
+      },
+      surface: {
+        bg: 'colorPalette.surface.bg',
+        borderWidth: '1px',
+        borderColor: 'colorPalette.surface.border',
+        color: 'colorPalette.surface.fg',
+      },
+      subtle: {
+        bg: 'colorPalette.subtle.bg',
+        color: 'colorPalette.subtle.fg',
+      },
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'colorPalette.outline.border',
+        color: 'colorPalette.outline.fg',
+      },
+    },
+    size: {
+      sm: { fontSize: 'xs', px: '1.5', h: '4.5', gap: '0.5', _icon: { boxSize: '2.5' } },
+      md: { fontSize: 'xs', px: '2', h: '5', gap: '1', _icon: { boxSize: '3' } },
+      lg: { fontSize: 'xs', px: '2.5', h: '5.5', gap: '1', _icon: { boxSize: '3.5' } },
+      xl: { fontSize: 'sm', px: '2.5', h: '6', gap: '1.5', _icon: { boxSize: '4' } },
+      '2xl': { fontSize: 'md', px: '3', h: '7', gap: '1.5', _icon: { boxSize: '4.5' } },
+    },
+  },
+})

package/src/preset/recipes/button.ts

@@ -0,0 +1,110 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const button = defineRecipe({
+  className: 'button',
+  jsx: ['Button', 'IconButton', 'CloseButton', 'ButtonGroup'],
+  base: {
+    alignItems: 'center',
+    appearance: 'none',
+    borderRadius: 'l2',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexShrink: '0',
+    fontWeight: 'semibold',
+    gap: '2',
+    isolation: 'isolate',
+    justifyContent: 'center',
+    outline: '0',
+    position: 'relative',
+    transition: 'colors',
+    transitionProperty: 'background-color, border-color, color, box-shadow',
+    userSelect: 'none',
+    verticalAlign: 'middle',
+    whiteSpace: 'nowrap',
+    _icon: {
+      flexShrink: '0',
+    },
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+    focusVisibleRing: 'outside',
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: 'colorPalette.solid.bg',
+        color: 'colorPalette.solid.fg',
+        _hover: {
+          bg: 'colorPalette.solid.bg.hover',
+        },
+      },
+      surface: {
+        bg: 'colorPalette.surface.bg',
+        borderWidth: '1px',
+        borderColor: 'colorPalette.surface.border',
+        color: 'colorPalette.surface.fg',
+        _hover: {
+          borderColor: 'colorPalette.surface.border.hover',
+        },
+        _active: {
+          bg: 'colorPalette.surface.bg.active',
+        },
+        _on: {
+          bg: 'colorPalette.surface.bg.active',
+        },
+      },
+      subtle: {
+        bg: 'colorPalette.subtle.bg',
+        color: 'colorPalette.subtle.fg',
+        _hover: {
+          bg: 'colorPalette.subtle.bg.hover',
+        },
+        _active: {
+          bg: 'colorPalette.subtle.bg.active',
+        },
+        _on: {
+          bg: 'colorPalette.subtle.bg.active',
+        },
+      },
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'colorPalette.outline.border',
+        color: 'colorPalette.outline.fg',
+        _hover: {
+          bg: 'colorPalette.outline.bg.hover',
+        },
+        _active: {
+          bg: 'colorPalette.outline.bg.active',
+        },
+        _on: {
+          bg: 'colorPalette.outline.bg.active',
+        },
+      },
+      plain: {
+        color: 'colorPalette.plain.fg',
+        _hover: {
+          bg: 'colorPalette.plain.bg.hover',
+        },
+        _active: {
+          bg: 'colorPalette.plain.bg.active',
+        },
+        _on: {
+          bg: 'colorPalette.plain.bg.active',
+        },
+      },
+    },
+    size: {
+      '2xs': { h: '6', minW: '6', textStyle: 'xs', px: '2', _icon: { boxSize: '3.5' } },
+      xs: { h: '8', minW: '8', textStyle: 'sm', px: '2.5', _icon: { boxSize: '4' } },
+      sm: { h: '9', minW: '9', textStyle: 'sm', px: '3', _icon: { boxSize: '4' } },
+      md: { h: '10', minW: '10', textStyle: 'sm', px: '3.5', _icon: { boxSize: '5' } },
+      lg: { h: '11', minW: '11', textStyle: 'md', px: '4', _icon: { boxSize: '5' } },
+      xl: { h: '12', minW: '12', textStyle: 'md', px: '4.5', _icon: { boxSize: '5.5' } },
+      '2xl': { h: '16', minW: '16', textStyle: 'xl', px: '6', _icon: { boxSize: '6' } },
+    },
+  },
+})

package/src/preset/recipes/card.ts

@@ -0,0 +1,69 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const card = defineSlotRecipe({
+  className: 'card',
+  slots: ['root', 'header', 'body', 'footer', 'title', 'description'],
+  base: {
+    root: {
+      borderRadius: 'l3',
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      position: 'relative',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+      p: '6',
+    },
+    body: {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      pb: '6',
+      px: '6',
+    },
+    footer: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      gap: '3',
+      pb: '6',
+      pt: '2',
+      px: '6',
+    },
+    title: {
+      textStyle: 'lg',
+      fontWeight: 'semibold',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      elevated: {
+        root: {
+          bg: 'neutral.surface.bg',
+          boxShadow: 'lg',
+        },
+      },
+      outline: {
+        root: {
+          bg: 'neutral.surface.bg',
+          borderWidth: '1px',
+          borderColor: 'border.default',
+        },
+      },
+      subtle: {
+        root: {
+          bg: 'neutral.subtle.bg',
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/checkbox.ts

@@ -0,0 +1,109 @@
+import { checkboxAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const checkbox = defineSlotRecipe({
+  slots: checkboxAnatomy.keys(),
+  className: 'checkbox',
+  base: {
+    root: {
+      display: 'inline-flex',
+      gap: '2',
+      alignItems: 'center',
+      verticalAlign: 'top',
+      position: 'relative',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    control: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: '0',
+      borderWidth: '1px',
+      borderColor: 'border',
+      borderRadius: 'l1',
+      cursor: 'pointer',
+      focusVisibleRing: 'outside',
+      bg: 'canvas',
+
+      _icon: {
+        boxSize: 'full',
+      },
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+    },
+  },
+
+  variants: {
+    size: {
+      sm: {
+        root: { gap: '2' },
+        label: { textStyle: 'sm' },
+        control: { boxSize: '4.5', _icon: { boxSize: '3' } },
+      },
+      md: {
+        root: { gap: '3' },
+        label: { textStyle: 'md' },
+        control: { boxSize: '5', _icon: { boxSize: '3.5' } },
+      },
+      lg: {
+        root: { gap: '3' },
+        label: { textStyle: 'lg' },
+        control: { boxSize: '5.5', _icon: { boxSize: '4' } },
+      },
+    },
+
+    variant: {
+      solid: {
+        control: {
+          borderColor: 'border',
+          _checked: {
+            bg: 'colorPalette.solid.bg',
+            borderColor: 'colorPalette.solid.bg',
+            color: 'colorPalette.solid.fg',
+          },
+          _invalid: {
+            background: 'error',
+          },
+        },
+      },
+      surface: {
+        control: {
+          bg: 'colorPalette.surface.bg',
+          borderWidth: '1px',
+          borderColor: 'colorPalette.surface.border',
+          color: 'colorPalette.surface.fg',
+        },
+      },
+      subtle: {
+        control: {
+          bg: 'colorPalette.subtle.bg',
+          color: 'colorPalette.subtle.fg',
+        },
+      },
+      outline: {
+        control: {
+          borderWidth: '1px',
+          borderColor: 'colorPalette.outline.border',
+          color: 'colorPalette.outline.fg',
+          _checked: {
+            borderColor: 'colorPalette.solid.bg',
+          },
+        },
+      },
+      plain: {
+        control: {
+          color: 'colorPalette.plain.fg',
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+})

package/src/preset/recipes/dialog.ts

@@ -0,0 +1,157 @@
+import { dialogAnatomy } from '@ark-ui/react/anatomy';
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const dialog = defineSlotRecipe({
+  className: 'dialog',
+  slots: dialogAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    backdrop: {
+      background: 'neutral.a7',
+      height: '100dvh',
+      left: '0',
+      position: 'fixed',
+      top: '0',
+      width: '100dvw',
+      zIndex: 'overlay',
+      _open: {
+        animationDuration: 'normal',
+      },
+      _closed: {
+        animationDuration: 'fast',
+      },
+    },
+    positioner: {
+      display: 'flex',
+      height: '100dvh',
+      justifyContent: 'center',
+      left: 0,
+      overscrollBehaviorY: 'none',
+      position: 'fixed',
+      top: 0,
+      width: '100dvw',
+      zIndex: 'modal',
+    },
+    title: {
+      fontWeight: 'semibold',
+      textStyle: 'lg',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+    },
+    content: {
+      bg: 'neutral.surface.bg',
+      borderRadius: 'l3',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      my: 'auto',
+      outline: 0,
+      position: 'relative',
+      textStyle: 'sm',
+      width: '100%',
+      zIndex: 'modal',
+      py: { base: '4', md: '6' },
+      gap: { base: '4', md: '6' },
+      _open: {
+        animationDuration: 'slowest',
+      },
+      _closed: {
+        animationDuration: 'normal',
+        display: 'none',
+      },
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.5',
+      px: { base: '4', md: '6' },
+      flex: '0',
+    },
+    body: {
+      display: 'flex',
+      flex: '1',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      px: { base: '4', md: '6' },
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      flex: '0',
+      gap: '3',
+      px: { base: '4', md: '6' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    scrollBehavior: 'outside',
+    placement: 'center',
+  },
+  variants: {
+    size: {
+      xs: { content: { maxW: 'xs' } },
+      sm: { content: { maxW: 'sm' } },
+      md: { content: { maxW: 'md' } },
+      lg: { content: { maxW: 'lg' } },
+      xl: { content: { maxW: 'xl' } },
+      full: {
+        content: {
+          maxW: '100dvw',
+          minH: '100dvh',
+          borderRadius: '0',
+        },
+      },
+    },
+    placement: {
+      center: {
+        positioner: {
+          alignItems: 'center',
+        },
+        content: {
+          mx: 'auto',
+        },
+      },
+      top: {
+        positioner: {
+          alignItems: 'flex-start',
+        },
+        content: {
+          mt: '16',
+          mx: 'auto',
+        },
+      },
+      bottom: {
+        positioner: {
+          alignItems: 'flex-end',
+        },
+        content: {
+          mb: '16',
+          mx: 'auto',
+        },
+      },
+    },
+    scrollBehavior: {
+      inside: {
+        positioner: {
+          overflow: 'hidden',
+        },
+        content: {
+          maxH: 'calc(100% - 7.5rem)',
+        },
+        body: {
+          overflow: 'auto',
+        },
+      },
+      outside: {
+        positioner: {
+          overflow: 'auto',
+          pointerEvents: 'auto',
+        },
+      },
+    },
+  },
+});

package/src/preset/recipes/drawer.ts

@@ -0,0 +1,203 @@
+import { dialogAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const drawer = defineSlotRecipe({
+  className: 'drawer',
+  slots: dialogAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    backdrop: {
+      background: 'black.a7',
+      position: 'fixed',
+      insetInlineStart: '0',
+      top: '0',
+      width: '100vw',
+      height: '100dvh',
+      zIndex: 'overlay',
+      _open: {
+        animationName: 'fade-in',
+        animationTimingFunction: 'emphasized-in',
+        animationDuration: 'slow',
+      },
+      _closed: {
+        animationName: 'fade-out',
+        animationTimingFunction: 'emphasized-out',
+        animationDuration: 'normal',
+      },
+    },
+    positioner: {
+      display: 'flex',
+      width: '100vw',
+      height: '100dvh',
+      position: 'fixed',
+      insetInlineStart: '0',
+      top: '0',
+      zIndex: 'modal',
+      overscrollBehaviorY: 'none',
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      width: '100%',
+      outline: 0,
+      zIndex: 'modal',
+      maxH: '100dvh',
+      color: 'inherit',
+      bg: 'gray.surface.bg',
+      boxShadow: 'lg',
+      _open: {
+        animationDuration: 'slowest',
+        animationTimingFunction: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
+      },
+      _closed: {
+        animationDuration: 'normal',
+        animationTimingFunction: 'cubic-bezier(0.3, 0.0, 0.8, 0.15)',
+        display: 'none',
+      },
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+      pt: { base: '4', md: '6' },
+      pb: '4',
+      px: { base: '4', md: '6' },
+      flex: '0',
+    },
+    body: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      flex: '1',
+      overflow: 'auto',
+      p: { base: '4', md: '6' },
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      flex: '0',
+      gap: '3',
+      py: '4',
+      px: { base: '4', md: '6' },
+    },
+    title: {
+      color: 'fg.default',
+      fontWeight: 'semibold',
+      textStyle: 'xl',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      pos: 'absolute',
+      top: '3',
+      insetEnd: '3',
+    },
+  },
+  defaultVariants: {
+    placement: 'end',
+    size: 'sm',
+  },
+  variants: {
+    size: {
+      xs: {
+        content: {
+          maxW: 'xs',
+        },
+      },
+      sm: {
+        content: {
+          maxW: 'sm',
+        },
+      },
+      md: {
+        content: {
+          maxW: 'md',
+        },
+      },
+      lg: {
+        content: {
+          maxW: 'lg',
+        },
+      },
+      xl: {
+        content: {
+          maxW: 'xl',
+        },
+      },
+      full: {
+        content: {
+          maxW: '100vw',
+          h: '100dvh',
+        },
+      },
+    },
+    placement: {
+      start: {
+        positioner: {
+          justifyContent: 'flex-start',
+          alignItems: 'stretch',
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: 'slide-from-left-full, fade-in',
+              _rtl: 'slide-from-right-full, fade-in',
+            },
+          },
+          _closed: {
+            animationName: {
+              base: 'slide-to-left-full, fade-out',
+              _rtl: 'slide-to-right-full, fade-out',
+            },
+          },
+        },
+      },
+      end: {
+        positioner: {
+          justifyContent: 'flex-end',
+          alignItems: 'stretch',
+        },
+        content: {
+          _open: {
+            animationName: {
+              base: 'slide-from-right-full, fade-in',
+              _rtl: 'slide-from-left-full, fade-in',
+            },
+          },
+          _closed: {
+            animationName: {
+              base: 'slide-to-right-full, fade-out',
+              _rtl: 'slide-to-left-full, fade-out',
+            },
+          },
+        },
+      },
+      top: {
+        positioner: {
+          justifyContent: 'stretch',
+          alignItems: 'flex-start',
+        },
+        content: {
+          maxW: '100%',
+          _open: { animationName: 'slide-from-top-full, fade-in' },
+          _closed: { animationName: 'slide-to-top-full, fade-out' },
+        },
+      },
+
+      bottom: {
+        positioner: {
+          justifyContent: 'stretch',
+          alignItems: 'flex-end',
+        },
+        content: {
+          maxW: '100%',
+          _open: { animationName: 'slide-from-bottom-full, fade-in' },
+          _closed: { animationName: 'slide-to-bottom-full, fade-out' },
+        },
+      },
+    },
+  },
+})