@discourser/design-system 0.9.3 → 0.9.4

package/src/preset/recipes/field.ts

@@ -0,0 +1,40 @@
+import { fieldAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const field = defineSlotRecipe({
+  className: 'field',
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1.5',
+    },
+    label: {
+      alignItems: 'center',
+      color: 'fg.default',
+      display: 'flex',
+      gap: '0.5',
+      textAlign: 'start',
+      userSelect: 'none',
+      textStyle: 'label',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    requiredIndicator: {
+      color: 'colorPalette.solid',
+    },
+    helperText: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    errorText: {
+      color: 'error',
+      textStyle: 'sm',
+    },
+  },
+})

package/src/preset/recipes/group.ts

@@ -0,0 +1,77 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const group = defineRecipe({
+  className: 'group',
+  base: {
+    display: 'inline-flex',
+    position: 'relative',
+    gap: '2',
+    '& > *': {
+      _focusVisible: {
+        zIndex: 1,
+      },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+      },
+      vertical: {
+        flexDirection: 'column',
+      },
+    },
+    attached: {
+      true: {
+        gap: '0',
+      },
+    },
+    grow: {
+      true: {
+        display: 'flex',
+        '& > *': {
+          flex: 1,
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      orientation: 'horizontal',
+      attached: true,
+      css: {
+        '& > *:first-child': {
+          borderEndRadius: '0',
+          marginEnd: '-1px',
+        },
+        '& > *:last-child': {
+          borderStartRadius: '0',
+        },
+        '& > *:not(:first-child):not(:last-child)': {
+          borderRadius: '0',
+          marginEnd: '-1px',
+        },
+      },
+    },
+    {
+      orientation: 'vertical',
+      attached: true,
+      css: {
+        '& > *:first-child': {
+          borderBottomRadius: '0',
+          marginBottom: '-1px',
+        },
+        '& > *:last-child': {
+          borderTopRadius: '0',
+        },
+        '& > *:not(:first-child):not(:last-child)': {
+          borderRadius: '0',
+          marginBottom: '-1px',
+        },
+      },
+    },
+  ],
+})

package/src/preset/recipes/heading.ts

@@ -0,0 +1,26 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const heading = defineRecipe({
+  className: 'heading',
+  base: {
+    color: 'fg.default',
+  },
+  defaultVariants: {
+    size: 'xl',
+  },
+  variants: {
+    size: {
+      xs: { textStyle: 'labelLarge' },
+      sm: { textStyle: 'titleSmall' },
+      md: { textStyle: 'titleMedium' },
+      lg: { textStyle: 'titleLarge' },
+      xl: { textStyle: 'headlineSmall' },
+      '2xl': { textStyle: 'headlineMedium' },
+      '3xl': { textStyle: 'headlineLarge' },
+      '4xl': { textStyle: 'displaySmall' },
+      '5xl': { textStyle: 'displayMedium' },
+      '6xl': { textStyle: 'displayLarge' },
+      '7xl': { textStyle: 'displayLarge' },
+    },
+  },
+});

package/src/preset/recipes/index.ts

@@ -0,0 +1,40 @@
+// Core components
+export * from './button';
+export * from './input';
+export * from './input-addon';
+export * from './input-group';
+export * from './field';
+
+// Layout & containers
+export * from './card';
+export * from './accordion';
+export * from './drawer';
+export * from './tabs';
+
+// Form elements
+export * from './switch';
+export * from './checkbox';
+export * from './radio-group';
+export * from './select';
+export * from './textarea';
+export * from './slider';
+
+// Feedback & status
+export * from './avatar';
+export * from './badge';
+export * from './progress';
+export * from './skeleton';
+export * from './spinner';
+export * from './toast';
+
+// Overlays
+export * from './dialog';
+export * from './popover';
+export * from './tooltip';
+
+// Typography
+export * from './heading';
+
+// Utilities
+export * from './absolute-center';
+export * from './group';

package/src/preset/recipes/input-addon.ts

@@ -0,0 +1,42 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const inputAddon = defineRecipe({
+  className: 'input-addon',
+  base: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    borderRadius: 'l2',
+    color: 'fg.muted',
+    display: 'flex',
+    flex: '0 0 auto',
+    whiteSpace: 'nowrap',
+    width: 'auto',
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: 'thin',
+        borderColor: 'neutral.outline.border',
+      },
+      surface: {
+        bg: 'neutral.surface.bg',
+        borderWidth: 'thin',
+        borderColor: 'neutral.surface.border',
+      },
+      subtle: {
+        bg: 'neutral.subtle.bg',
+      },
+    },
+    size: {
+      xs: { textStyle: 'sm', px: '2', _icon: { boxSize: '4' } },
+      sm: { textStyle: 'sm', px: '2.5', _icon: { boxSize: '4.5' } },
+      md: { textStyle: 'md', px: '3', _icon: { boxSize: '5' } },
+      lg: { textStyle: 'md', px: '3.5', _icon: { boxSize: '5' } },
+      xl: { textStyle: 'lg', px: '4', _icon: { boxSize: '5.5' } },
+    },
+  },
+});

package/src/preset/recipes/input-group.ts

@@ -0,0 +1,66 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const inputGroup = defineSlotRecipe({
+  className: 'input-group',
+  slots: ['root', 'element'],
+  base: {
+    root: {
+      position: 'relative',
+      width: 'full',
+    },
+    element: {
+      alignItems: 'center',
+      color: 'fg.muted',
+      display: 'flex',
+      height: 'full',
+      justifyContent: 'center',
+      position: 'absolute',
+      zIndex: '2',
+      _icon: {
+        color: 'fg.subtle',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      xs: {
+        element: { minW: '8', _icon: { boxSize: '4' } },
+        root: {
+          '& > input:not(:first-child)': { ps: '7!' },
+          '& > input:not(:last-child)': { pe: '7!' },
+        },
+      },
+      sm: {
+        root: {
+          '& > input:not(:first-child)': { ps: '8!' },
+          '& > input:not(:last-child)': { pe: '8!' },
+        },
+        element: { minW: '9', _icon: { boxSize: '4.5' } },
+      },
+      md: {
+        root: {
+          '& > input:not(:first-child)': { ps: '9!' },
+          '& > input:not(:last-child)': { pe: '9!' },
+        },
+        element: { minW: '10', _icon: { boxSize: '5' } },
+      },
+      lg: {
+        root: {
+          '& > input:not(:first-child)': { ps: '10!' },
+          '& > input:not(:last-child)': { pe: '10!' },
+        },
+        element: { minW: '11', _icon: { boxSize: '5' } },
+      },
+      xl: {
+        root: {
+          '& > input:not(:first-child)': { ps: '11!' },
+          '& > input:not(:last-child)': { pe: '11!' },
+        },
+        element: { minW: '11', _icon: { boxSize: '5.5' } },
+      },
+    },
+  },
+});

package/src/preset/recipes/input.ts

@@ -0,0 +1,87 @@
+import type { RecipeConfig } from '@pandacss/dev';
+
+export const input = {
+  className: 'input',
+  jsx: ['Input', 'Field.Input'],
+  base: {
+    appearance: 'none',
+    borderRadius: 'l2',
+    height: 'var(--input-height)',
+    minHeight: 'var(--input-height)',
+    minW: 'var(--input-height)',
+    outline: '0',
+    position: 'relative',
+    textAlign: 'start',
+    transition: 'colors',
+    width: '100%',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    variant: 'outline',
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'neutral.outline.border',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          focusRingColor: 'error',
+          borderColor: 'error',
+        },
+      },
+      surface: {
+        bg: 'neutral.surface.bg',
+        borderWidth: '1px',
+        borderColor: 'neutral.surface.border',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          focusRingColor: 'error',
+          borderColor: 'error',
+        },
+      },
+      subtle: {
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        bg: 'neutral.subtle.bg',
+        color: 'neutral.subtle.fg',
+        focusVisibleRing: 'inside',
+        _invalid: {
+          focusRingColor: 'error',
+          borderColor: 'error',
+        },
+      },
+      flushed: {
+        borderBottomWidth: '1px',
+        borderBottomColor: 'neutral.outline.border',
+        borderRadius: '0',
+        color: 'fg.default',
+        px: '0',
+        _invalid: {
+          borderColor: 'error',
+        },
+        _focus: {
+          borderColor: 'colorPalette.solid.bg',
+          boxShadowColor: 'colorPalette.solid.bg',
+          boxShadow: '0 1px 0 0 var(--shadow-color)',
+          _invalid: {
+            borderColor: 'error',
+            boxShadowColor: 'error',
+          },
+        },
+      },
+    },
+    size: {
+      '2xs': { textStyle: 'xs', px: '1.5', '--input-height': 'sizes.7' },
+      xs: { textStyle: 'sm', px: '2', '--input-height': 'sizes.8' },
+      sm: { textStyle: 'sm', px: '2.5', '--input-height': 'sizes.9' },
+      md: { textStyle: 'md', px: '3', '--input-height': 'sizes.10' },
+      lg: { textStyle: 'md', px: '3.5', '--input-height': 'sizes.11' },
+      xl: { textStyle: 'lg', px: '4', '--input-height': 'sizes.12' },
+      '2xl': { textStyle: '3xl', px: '4.5', '--input-height': 'sizes.16' },
+    },
+  },
+} satisfies RecipeConfig;

package/src/preset/recipes/popover.ts

@@ -0,0 +1,77 @@
+import { popoverAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const popover = defineSlotRecipe({
+  className: 'popover',
+  slots: popoverAnatomy.extendWith('header', 'body', 'footer').keys(),
+  base: {
+    positioner: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      zIndex: 'popover',
+    },
+    content: {
+      '--popover-bg': 'colors.gray.surface.bg',
+      '--popover-padding': 'spacing.md',
+
+      background: 'var(--popover-bg)',
+      borderRadius: 'l3',
+      boxShadow: 'lg',
+      display: 'flex',
+      flexDirection: 'column',
+      maxHeight: 'var(--available-height)',
+      outline: '0',
+      position: 'relative',
+      textStyle: 'sm',
+      transformOrigin: 'var(--transform-origin)',
+      width: 'sm',
+      zIndex: 'calc(var(--z-index-popover) + var(--layer-index, 0))',
+      _open: {
+        animationStyle: 'scale-fade-in',
+        animationDuration: 'fast',
+      },
+      _closed: {
+        animationStyle: 'scale-fade-out',
+        animationDuration: 'faster',
+      },
+    },
+    title: {
+      color: 'fg.default',
+      fontWeight: 'medium',
+      textStyle: 'md',
+    },
+    description: {
+      color: 'fg.muted',
+      textStyle: 'sm',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: '1',
+      right: '1',
+    },
+    header: {
+      display: 'flex',
+      flexDirection: 'column',
+      p: 'var(--popover-padding)',
+    },
+    body: { p: 'var(--popover-padding)', display: 'flex', flex: '1', flexDirection: 'column' },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '3',
+      paddingInline: 'var(--popover-padding)',
+      paddingBottom: 'var(--popover-padding)',
+    },
+    arrow: {
+      '--arrow-size': 'sizes.3',
+      '--arrow-background': 'var(--popover-bg)',
+    },
+    arrowTip: {
+      borderTopWidth: 'thin',
+      borderInlineStartWidth: 'thin',
+      borderColor: 'var(--popover-bg)',
+    },
+  },
+})

package/src/preset/recipes/progress.ts

@@ -0,0 +1,120 @@
+import { progressAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const progress = defineSlotRecipe({
+  slots: progressAnatomy.keys(),
+  className: 'progress',
+  base: {
+    root: {
+      textStyle: 'sm',
+      position: 'relative',
+    },
+    track: {
+      overflow: 'hidden',
+      position: 'relative',
+    },
+    range: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transitionProperty: 'width, height',
+      transitionDuration: 'slow',
+      height: '100%',
+      bgColor: 'var(--track-color)',
+      _indeterminate: {
+        '--animate-from-x': '-40%',
+        '--animate-to-x': '100%',
+        position: 'absolute',
+        willChange: 'left',
+        minWidth: '50%',
+        animation: 'position 1s ease infinite normal none running',
+        backgroundImage: `linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)`,
+      },
+    },
+    label: {
+      display: 'inline-flex',
+      fontWeight: 'medium',
+      alignItems: 'center',
+      gap: '1',
+    },
+    valueText: {
+      textStyle: 'xs',
+      lineHeight: '1',
+      fontWeight: 'medium',
+    },
+  },
+
+  variants: {
+    variant: {
+      solid: {
+        track: {
+          bgColor: 'gray.subtle.bg',
+        },
+        range: {
+          bgColor: 'colorPalette.solid.bg',
+          color: 'colorPalette.solid.fg',
+        },
+      },
+      subtle: {
+        track: {
+          bgColor: 'colorPalette.subtle.bg.active',
+        },
+        range: {
+          bgColor: 'colorPalette.solid.bg',
+          color: 'colorPalette.solid.fg',
+        },
+      },
+    },
+
+    shape: {
+      square: {},
+      rounded: {
+        track: {
+          borderRadius: 'l1',
+        },
+      },
+      full: {
+        track: {
+          borderRadius: 'full',
+        },
+      },
+    },
+
+    striped: {
+      true: {
+        range: {
+          backgroundImage: `linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)`,
+          backgroundSize: `var(--stripe-size) var(--stripe-size)`,
+          '--stripe-size': '1rem',
+          '--stripe-color': {
+            _light: 'rgba(255, 255, 255, 0.3)',
+            _dark: 'rgba(0, 0, 0, 0.3)',
+          },
+        },
+      },
+    },
+
+    animated: {
+      true: {
+        range: {
+          '--animate-from': 'var(--stripe-size)',
+          animation: 'bg-position 1s linear infinite',
+        },
+      },
+    },
+
+    size: {
+      xs: { track: { h: '1.5' } },
+      sm: { track: { h: '2' } },
+      md: { track: { h: '2.5' } },
+      lg: { track: { h: '3' } },
+      xl: { track: { h: '3.5' } },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    shape: 'rounded',
+  },
+})

package/src/preset/recipes/radio-group.ts

@@ -0,0 +1,99 @@
+import { radioGroupAnatomy } from '@ark-ui/react/anatomy'
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const radioGroup = defineSlotRecipe({
+  className: 'radio-group',
+  slots: radioGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3',
+    },
+    itemControl: {
+      alignItems: 'center',
+      borderRadius: 'full',
+      display: 'inline-flex',
+      flexShrink: 0,
+      justifyContent: 'center',
+      verticalAlign: 'top',
+      boxShadow: 'inset 0 0 0 1px var(--shadow-color)',
+      boxShadowColor: 'gray.surface.border',
+      _after: {
+        content: '""',
+        display: 'block',
+        borderRadius: 'full',
+        boxSize: '40%',
+      },
+      _focusVisible: {
+        focusVisibleRing: 'outside',
+      },
+      _checked: {
+        bg: 'colorPalette.solid.bg',
+        color: 'colorPalette.solid.fg',
+        boxShadowColor: 'colorPalette.solid.bg',
+        _after: {
+          background: 'colorPalette.solid.fg',
+        },
+      },
+    },
+    item: {
+      alignItems: 'center',
+      cursor: 'pointer',
+      display: 'flex',
+      _disabled: {
+        layerStyle: 'disabled',
+      },
+    },
+    itemText: {
+      fontWeight: 'medium',
+      userSelect: 'none',
+    },
+    label: {
+      fontWeight: 'semibold',
+      textStyle: 'sm',
+      mb: '1',
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'md',
+    orientation: 'vertical',
+  },
+  variants: {
+    variant: {
+      solid: {
+        itemControl: {},
+      },
+    },
+    size: {
+      sm: {
+        item: { gap: '2' },
+        itemControl: { boxSize: '4.5' },
+        itemText: { textStyle: 'sm' },
+      },
+      md: {
+        item: { gap: '3' },
+        itemControl: { boxSize: '5' },
+        itemText: { textStyle: 'md' },
+      },
+      lg: {
+        item: { gap: '3' },
+        itemControl: { boxSize: '5.5' },
+        itemText: { textStyle: 'lg' },
+      },
+    },
+    orientation: {
+      horizontal: {
+        root: {
+          flexDirection: 'row',
+        },
+      },
+      vertical: {
+        root: {
+          flexDirection: 'column',
+        },
+      },
+    },
+  },
+})