@discourser/design-system 0.9.3 → 0.9.4

package/src/preset/recipes/select.ts

@@ -0,0 +1,175 @@
+import { selectAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const select = defineSlotRecipe({
+  className: 'select',
+  slots: selectAnatomy.extendWith('indicatorGroup').keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+      width: 'full',
+    },
+    content: {
+      background: 'gray.surface.bg',
+      borderRadius: 'l2',
+      boxShadow: 'md',
+      display: 'flex',
+      flexDirection: 'column',
+      maxH: 'min(var(--available-height), {sizes.96})',
+      minWidth: 'max(var(--reference-width), {sizes.40})',
+      outline: 0,
+      overflowY: 'auto',
+      zIndex: 'dropdown',
+      _open: {
+        animationStyle: 'slide-fade-in',
+        animationDuration: 'slow',
+      },
+      _closed: {
+        animationStyle: 'slide-fade-out',
+        animationDuration: 'fastest',
+      },
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: 'l1',
+      cursor: 'pointer',
+      display: 'flex',
+      justifyContent: 'space-between',
+      userSelect: 'none',
+      _hover: {
+        background: 'gray.surface.bg.hover',
+      },
+      _highlighted: {
+        background: 'gray.surface.bg.hover',
+      },
+      _selected: {},
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    indicatorGroup: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '1',
+      pointerEvents: 'none',
+    },
+    indicator: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: { base: 'fg.subtle' },
+    },
+    itemGroupLabel: {
+      alignItems: 'flex-start',
+      color: 'fg.subtle',
+      display: 'flex',
+      flexDirection: 'column',
+      fontWeight: 'medium',
+      gap: '1px',
+      justifyContent: 'center',
+      _after: {
+        content: '""',
+        width: '100%',
+        height: '1px',
+        bg: 'gray.4',
+      },
+    },
+    itemIndicator: {
+      color: 'colorPalette.plain.fg',
+    },
+    label: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+      textStyle: 'sm',
+    },
+    trigger: {
+      alignItems: 'center',
+      borderRadius: 'l2',
+      cursor: 'pointer',
+      display: 'flex',
+      justifyContent: 'space-between',
+      minWidth: '0',
+      outline: '0',
+      textAlign: 'start',
+      transition: 'common',
+      userSelect: 'none',
+      width: 'full',
+      _placeholderShown: {
+        color: 'fg.subtle',
+      },
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    valueText: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      color: 'fg.default',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      outline: {
+        trigger: {
+          borderWidth: 'thin',
+          borderColor: 'gray.outline.border',
+
+          focusVisibleRing: 'inside',
+        },
+      },
+      surface: {
+        trigger: {
+          bg: 'gray.surface.bg',
+          borderWidth: 'thin',
+          borderColor: 'gray.surface.border',
+
+          focusVisibleRing: 'inside',
+        },
+      },
+    },
+    size: {
+      xs: {
+        content: { p: '1', gap: '0.5', textStyle: 'sm' },
+        item: { px: '1', minH: '8', gap: '2', _icon: { boxSize: '3.5' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { px: '1', height: '8' },
+        trigger: { px: '2', h: '8', textStyle: 'sm', gap: '2', _icon: { boxSize: '3.5' } },
+      },
+      sm: {
+        content: { p: '1', gap: '0.5', textStyle: 'sm' },
+        item: { px: '1.5', minH: '9', gap: '2', _icon: { boxSize: '4' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { px: '1.5', height: '9' },
+        trigger: { px: '2.5', h: '9', textStyle: 'sm', gap: '2', _icon: { boxSize: '4' } },
+      },
+      md: {
+        content: { p: '1', gap: '0.5', textStyle: 'md' },
+        item: { px: '2', minH: '10', gap: '2', _icon: { boxSize: '4' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { px: '2', height: '10' },
+        trigger: { px: '3', h: '10', textStyle: 'md', gap: '2', _icon: { boxSize: '4' } },
+      },
+      lg: {
+        content: { p: '1', gap: '0.5', textStyle: 'md' },
+        item: { px: '2.5', minH: '11', gap: '2', _icon: { boxSize: '4.5' } },
+        itemGroup: { gap: '0.5' },
+        itemGroupLabel: { px: '2.5', height: '11' },
+        trigger: { px: '3.5', h: '11', textStyle: 'md', gap: '2', _icon: { boxSize: '4.5' } },
+      },
+      xl: {
+        content: { p: '1', gap: '1', textStyle: 'lg' },
+        item: { px: '3', minH: '12', gap: '3', _icon: { boxSize: '5' } },
+        itemGroup: { gap: '1' },
+        itemGroupLabel: { px: '3', height: '12' },
+        trigger: { px: '4', h: '12', textStyle: 'lg', gap: '3', _icon: { boxSize: '5' } },
+      },
+    },
+  },
+})

package/src/preset/recipes/skeleton.ts

@@ -0,0 +1,64 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const skeleton = defineRecipe({
+  className: 'skeleton',
+  jsx: ['Skeleton', 'SkeletonCircle', 'SkeletonText'],
+  base: {},
+  variants: {
+    loading: {
+      true: {
+        borderRadius: 'l2',
+        boxShadow: 'none',
+        backgroundClip: 'padding-box',
+        cursor: 'default',
+        color: 'transparent',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        flexShrink: '0',
+        '&::before, &::after, *': {
+          visibility: 'hidden',
+        },
+      },
+      false: {
+        background: 'unset',
+        animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
+      },
+    },
+
+    circle: {
+      true: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: '0 0 auto',
+        borderRadius: '9999px',
+      },
+    },
+
+    variant: {
+      pulse: {
+        background: 'gray.subtle.bg.active',
+        animation: 'pulse',
+        animationDuration: 'var(--duration, 1.2s)',
+      },
+      shine: {
+        '--animate-from': '200%',
+        '--animate-to': '-200%',
+        '--start-color': 'colors.gray.subtle.bg',
+        '--end-color': 'colors.gray.subtle.bg.active',
+        backgroundImage:
+          'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
+        backgroundSize: '400% 100%',
+        animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
+      },
+      none: {
+        animation: 'none',
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'pulse',
+    loading: true,
+  },
+})

package/src/preset/recipes/slider.ts

@@ -0,0 +1,174 @@
+import { sliderAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const slider = defineSlotRecipe({
+  className: 'slider',
+  slots: sliderAnatomy.extendWith('markerIndicator').keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1',
+      textStyle: 'sm',
+      position: 'relative',
+      isolation: 'isolate',
+      touchAction: 'none',
+      width: 'full',
+    },
+    label: {
+      fontWeight: 'medium',
+      textStyle: 'sm',
+    },
+    control: {
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+    track: {
+      overflow: 'hidden',
+      borderRadius: 'full',
+      flex: '1',
+    },
+    range: {
+      width: 'inherit',
+      height: 'inherit',
+    },
+    markerGroup: {
+      position: 'absolute!',
+      zIndex: '1',
+    },
+    marker: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'calc(var(--slider-thumb-size) / 2)',
+      color: 'fg.muted',
+      textStyle: 'xs',
+    },
+    markerIndicator: {
+      width: 'var(--slider-marker-size)',
+      height: 'var(--slider-marker-size)',
+      borderRadius: 'full',
+      bg: 'colorPalette.solid.fg',
+    },
+    thumb: {
+      width: 'var(--slider-thumb-size)',
+      height: 'var(--slider-thumb-size)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      outline: 0,
+      zIndex: '2',
+      borderRadius: 'full',
+      _focusVisible: {
+        ring: '2px',
+        ringColor: 'colorPalette.solid',
+        ringOffset: '2px',
+        ringOffsetColor: 'bg',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+    orientation: 'horizontal',
+  },
+  variants: {
+    size: {
+      sm: {
+        root: {
+          '--slider-thumb-size': 'sizes.5',
+          '--slider-track-size': 'sizes.2',
+          '--slider-marker-center': '{spacing.sm}',
+          '--slider-marker-size': 'sizes.1',
+          '--slider-marker-inset': '{spacing.xs}',
+        },
+      },
+      md: {
+        root: {
+          '--slider-thumb-size': 'sizes.5',
+          '--slider-track-size': 'sizes.2',
+          '--slider-marker-center': '{spacing.sm}',
+          '--slider-marker-size': 'sizes.1',
+          '--slider-marker-inset': '{spacing.xs}',
+        },
+      },
+      lg: {
+        root: {
+          '--slider-thumb-size': 'sizes.5',
+          '--slider-track-size': 'sizes.2',
+          '--slider-marker-center': '{spacing.sm}',
+          '--slider-marker-size': 'sizes.1',
+          '--slider-marker-inset': '{spacing.xs}',
+        },
+      },
+    },
+    variant: {
+      outline: {
+        thumb: {
+          bg: 'gray.surface.bg',
+          borderWidth: 'medium',
+          borderColor: 'colorPalette.solid.bg',
+          boxShadow: 'xs',
+        },
+        range: {
+          bg: 'colorPalette.solid.bg',
+        },
+        track: {
+          bg: 'border',
+        },
+      },
+    },
+    orientation: {
+      vertical: {
+        root: {
+          display: 'inline-flex',
+        },
+        control: {
+          flexDirection: 'column',
+          height: '100%',
+          minWidth: 'var(--slider-thumb-size)',
+          '&[data-has-mark-label]': {
+            marginEnd: '4',
+          },
+        },
+        track: {
+          width: 'var(--slider-track-size)',
+        },
+        thumb: {
+          left: '50%',
+          translate: '-50% 0',
+        },
+        markerGroup: {
+          insetStart: 'var(--slider-marker-center)',
+          insetBlock: 'var(--slider-marker-inset)',
+        },
+        marker: {
+          flexDirection: 'row',
+        },
+      },
+      horizontal: {
+        control: {
+          flexDirection: 'row',
+          width: '100%',
+          minHeight: 'var(--slider-thumb-size)',
+          '&[data-has-mark-label]': {
+            marginBottom: '4',
+          },
+        },
+        track: {
+          height: 'var(--slider-track-size)',
+        },
+        thumb: {
+          top: '50%',
+          translate: '0 -50%',
+        },
+        markerGroup: {
+          top: 'var(--slider-marker-center)',
+          insetInline: 'var(--slider-marker-inset)',
+        },
+        marker: {
+          flexDirection: 'column',
+        },
+      },
+    },
+  },
+})

package/src/preset/recipes/spinner.ts

@@ -0,0 +1,33 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const spinner = defineRecipe({
+  className: 'spinner',
+  base: {
+    '--spinner-track-color': 'transparent',
+    animation: 'spin',
+    animationDuration: 'slowest',
+    borderBottomColor: 'var(--spinner-track-color)',
+    borderColor: 'currentColor',
+    borderInlineStartColor: 'var(--spinner-track-color)',
+    borderRadius: 'full',
+    borderStyle: 'solid',
+    borderWidth: 'medium',
+    display: 'inline-block',
+    height: 'var(--spinner-size)',
+    width: 'var(--spinner-size)',
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      inherit: { '--spinner-size': '1em' },
+      xs: { '--spinner-size': 'sizes.3' },
+      sm: { '--spinner-size': 'sizes.4' },
+      md: { '--spinner-size': 'sizes.5' },
+      lg: { '--spinner-size': 'sizes.6' },
+      xl: { '--spinner-size': 'sizes.7' },
+      '2xl': { '--spinner-size': 'sizes.8' },
+    },
+  },
+})

package/src/preset/recipes/switch.ts

@@ -0,0 +1,136 @@
+import { switchAnatomy } from '@ark-ui/react/anatomy';
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const switchRecipe = defineSlotRecipe({
+  className: 'switchComponent',
+  jsx: ['Switch', /Switch\.+/],
+  slots: switchAnatomy.extendWith('indicator').keys(),
+  base: {
+    root: {
+      display: 'inline-flex',
+      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: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+      lineHeight: '1',
+    },
+    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) - {spacing.xxs})',
+      _checked: {
+        insetInlineStart: 'xxs',
+      },
+    },
+    control: {
+      display: 'inline-flex',
+      gap: 'sm',
+      flexShrink: 0,
+      justifyContent: 'flex-start',
+      cursor: 'pointer',
+      borderRadius: 'full',
+      position: 'relative',
+      width: 'var(--switch-width)',
+      height: 'var(--switch-height)',
+      transition: 'backgrounds',
+      focusVisibleRing: 'outside',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    thumb: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      transitionProperty: 'translate',
+      transitionDuration: 'fast',
+      borderRadius: 'inherit',
+      _checked: {
+        translate: 'var(--switch-x) 0',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+  },
+  variants: {
+    variant: {
+      solid: {
+        control: {
+          borderRadius: 'full',
+          bg: 'neutral.subtle.bg',
+          focusVisibleRing: 'outside',
+          _checked: {
+            bg: 'colorPalette.solid.bg',
+          },
+        },
+        thumb: {
+          bg: 'white',
+          _checked: {
+            bg: 'colorPalette.solid.fg',
+          },
+          width: 'var(--switch-height)',
+          height: 'var(--switch-height)',
+          scale: '0.8',
+          boxShadow: 'xs',
+        },
+      },
+    },
+    size: {
+      xs: {
+        root: {
+          gap: '2',
+          '--switch-width': 'sizes.8',
+          '--switch-height': 'sizes.4',
+          '--switch-indicator-font-size': 'fontSizes.xs',
+        },
+        label: { fontSize: 'sm' },
+      },
+      sm: {
+        root: {
+          gap: '2',
+          '--switch-width': 'sizes.9',
+          '--switch-height': 'sizes.4.5',
+          '--switch-indicator-font-size': 'fontSizes.xs',
+        },
+        label: { fontSize: 'sm' },
+      },
+      md: {
+        root: {
+          gap: '3',
+          '--switch-width': 'sizes.10',
+          '--switch-height': 'sizes.5',
+          '--switch-indicator-font-size': 'fontSizes.sm',
+        },
+        label: { fontSize: 'md' },
+      },
+      lg: {
+        root: {
+          gap: '3',
+          '--switch-width': 'sizes.11',
+          '--switch-height': 'sizes.5.5',
+          '--switch-indicator-font-size': 'fontSizes.md',
+        },
+        label: { fontSize: 'lg' },
+      },
+    },
+  },
+});