@discourser/design-system 0.9.3 → 0.9.4

package/src/recipes/dialog.recipe.ts

@@ -0,0 +1,130 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const dialogRecipe = defineSlotRecipe({
+  className: 'dialog',
+  description: 'Material Design 3 dialog component',
+  slots: ['backdrop', 'positioner', 'content', 'title', 'description', 'closeTrigger'],
+  base: {
+    backdrop: {
+      position: 'fixed',
+      inset: '0',
+      bg: 'scrim',
+      opacity: 0.4,
+      zIndex: 'modal',
+      animation: 'fadeIn',
+      _open: {
+        animation: 'fadeIn',
+      },
+      _closed: {
+        animation: 'fadeOut',
+      },
+    },
+    positioner: {
+      position: 'fixed',
+      inset: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 'modal',
+      p: 'lg',
+    },
+    content: {
+      position: 'relative',
+      bg: 'surfaceContainerHigh',
+      color: 'onSurface',
+      borderRadius: 'extraLarge',
+      boxShadow: 'level3',
+      display: 'flex',
+      flexDirection: 'column',
+      maxWidth: '90vw',
+      maxHeight: '90vh',
+      overflow: 'hidden',
+      animation: 'scaleIn',
+      _open: {
+        animation: 'scaleIn',
+      },
+      _closed: {
+        animation: 'scaleOut',
+      },
+    },
+    title: {
+      fontFamily: 'headline',
+      fontSize: 'headlineSmall',
+      fontWeight: 'regular',
+      color: 'onSurface',
+      px: 'xl',
+      pt: 'xl',
+      pb: 'md',
+    },
+    description: {
+      fontFamily: 'body',
+      fontSize: 'bodyMedium',
+      color: 'onSurfaceVariant',
+      px: 'xl',
+      pb: 'xl',
+      flex: '1',
+      overflow: 'auto',
+    },
+    closeTrigger: {
+      position: 'absolute',
+      top: 'md',
+      right: 'md',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '40px',
+      height: '40px',
+      borderRadius: 'full',
+      cursor: 'pointer',
+      color: 'onSurfaceVariant',
+      bg: 'transparent',
+      border: 'none',
+      transition: 'all',
+      transitionDuration: 'fast',
+      _hover: {
+        bg: 'surfaceContainerHighest',
+      },
+      _focus: {
+        outline: 'none',
+        bg: 'surfaceContainerHighest',
+      },
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        content: {
+          width: '280px',
+          minHeight: '140px',
+        },
+      },
+      md: {
+        content: {
+          width: '560px',
+          minHeight: '200px',
+        },
+      },
+      lg: {
+        content: {
+          width: '800px',
+          minHeight: '300px',
+        },
+      },
+      fullscreen: {
+        content: {
+          width: '100vw',
+          height: '100vh',
+          maxWidth: '100vw',
+          maxHeight: '100vh',
+          borderRadius: 'none',
+        },
+        positioner: {
+          p: '0',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});

package/src/recipes/icon-button.recipe.ts

@@ -0,0 +1,96 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const iconButtonRecipe = defineRecipe({
+  className: 'icon-button',
+  description: 'Material Design 3 icon button component',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 'full',
+    cursor: 'pointer',
+    transition: 'all',
+    transitionDuration: 'fast',
+    transitionTimingFunction: 'standard',
+    outline: 'none',
+    border: 'none',
+    p: '0',
+    _disabled: {
+      opacity: 0.38,
+      cursor: 'not-allowed',
+      pointerEvents: 'none'
+    },
+    _focusVisible: {
+      outline: '2px solid',
+      outlineColor: 'primary',
+      outlineOffset: '2px'
+    }
+  },
+  variants: {
+    variant: {
+      standard: {
+        bg: 'transparent',
+        color: 'onSurfaceVariant',
+        _hover: {
+          bg: 'onSurfaceVariant',
+          bgOpacity: 0.08
+        }
+      },
+      filled: {
+        bg: 'primary',
+        color: 'onPrimary',
+        _hover: {
+          opacity: 0.92
+        }
+      },
+      tonal: {
+        bg: 'secondaryContainer',
+        color: 'onSecondaryContainer',
+        _hover: {
+          opacity: 0.92
+        }
+      },
+      outlined: {
+        bg: 'transparent',
+        color: 'onSurfaceVariant',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'outline',
+        _hover: {
+          bg: 'onSurfaceVariant',
+          bgOpacity: 0.08
+        }
+      }
+    },
+    size: {
+      sm: {
+        width: '32px',
+        height: '32px',
+        '& svg': {
+          width: '18px',
+          height: '18px'
+        }
+      },
+      md: {
+        width: '40px',
+        height: '40px',
+        '& svg': {
+          width: '24px',
+          height: '24px'
+        }
+      },
+      lg: {
+        width: '48px',
+        height: '48px',
+        '& svg': {
+          width: '24px',
+          height: '24px'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'standard',
+    size: 'md'
+  }
+});

package/src/recipes/index.ts

@@ -0,0 +1,6 @@
+export { buttonRecipe } from './button.recipe';
+export { cardRecipe } from './card.recipe';
+export { iconButtonRecipe } from './icon-button.recipe';
+export { inputRecipe } from './input.recipe';
+export { dialogRecipe } from './dialog.recipe';
+export { switchRecipe } from './switch.recipe';

package/src/recipes/input.recipe.ts

@@ -0,0 +1,93 @@
+import { defineRecipe } from '@pandacss/dev';
+
+export const inputRecipe = defineRecipe({
+  className: 'input',
+  description: 'Material Design 3 text field component',
+  base: {
+    width: '100%',
+    fontFamily: 'body',
+    fontSize: 'bodyLarge',
+    lineHeight: 'bodyLarge',
+    color: 'onSurface',
+    bg: 'transparent',
+    borderRadius: 'extraSmall',
+    px: 'md',
+    transition: 'all',
+    transitionDuration: 'fast',
+    outline: 'none',
+    _placeholder: {
+      color: 'onSurfaceVariant',
+      opacity: 0.6,
+    },
+    _focus: {
+      outline: 'none',
+    },
+    _disabled: {
+      opacity: 0.38,
+      cursor: 'not-allowed',
+    },
+  },
+  variants: {
+    variant: {
+      filled: {
+        bg: 'surfaceContainerHighest',
+        borderBottomWidth: '1px',
+        borderBottomStyle: 'solid',
+        borderBottomColor: 'onSurfaceVariant',
+        borderTopLeftRadius: 'extraSmall',
+        borderTopRightRadius: 'extraSmall',
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
+        _hover: {
+          bg: 'surfaceContainerHigh',
+        },
+        _focus: {
+          borderBottomWidth: '2px',
+          borderBottomColor: 'primary',
+        },
+      },
+      outlined: {
+        bg: 'transparent',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'outline',
+        _hover: {
+          borderColor: 'onSurface',
+        },
+        _focus: {
+          borderWidth: '2px',
+          borderColor: 'primary',
+        },
+      },
+    },
+    size: {
+      sm: {
+        height: '40px',
+        fontSize: 'bodySmall',
+        lineHeight: 'bodySmall',
+      },
+      md: {
+        height: '56px',
+        fontSize: 'bodyLarge',
+        lineHeight: 'bodyLarge',
+      },
+    },
+    state: {
+      error: {
+        borderColor: 'error',
+        _focus: {
+          borderColor: 'error',
+        },
+      },
+      disabled: {
+        opacity: 0.38,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'outlined',
+    size: 'md',
+  },
+});

package/src/recipes/switch.recipe.ts

@@ -0,0 +1,117 @@
+import { defineSlotRecipe } from '@pandacss/dev';
+
+export const switchRecipe = defineSlotRecipe({
+  className: 'switchControl',
+  description: 'Material Design 3 switch component',
+  slots: ['root', 'control', 'thumb', 'label'],
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 'sm',
+      cursor: 'pointer',
+      userSelect: 'none',
+      _disabled: {
+        cursor: 'not-allowed',
+        opacity: 0.38,
+      },
+    },
+    control: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      width: '52px',
+      height: '32px',
+      borderRadius: 'full',
+      bg: 'surfaceContainerHighest',
+      border: '2px solid',
+      borderColor: 'outline',
+      transition: 'all',
+      transitionDuration: 'fast',
+      flexShrink: 0,
+      _checked: {
+        bg: 'primary',
+        borderColor: 'primary',
+      },
+      _disabled: {
+        bg: 'surfaceVariant',
+        borderColor: 'onSurface',
+        opacity: 0.12,
+      },
+    },
+    thumb: {
+      position: 'absolute',
+      left: '4px',
+      width: '16px',
+      height: '16px',
+      borderRadius: 'full',
+      bg: 'outline',
+      transition: 'all',
+      transitionDuration: 'fast',
+      _checked: {
+        left: '28px',
+        width: '24px',
+        height: '24px',
+        bg: 'onPrimary',
+      },
+      _disabled: {
+        bg: 'onSurface',
+        opacity: 0.38,
+      },
+    },
+    label: {
+      fontFamily: 'body',
+      fontSize: 'bodyMedium',
+      color: 'onSurface',
+      userSelect: 'none',
+      _disabled: {
+        opacity: 0.38,
+      },
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        control: {
+          width: '44px',
+          height: '24px',
+        },
+        thumb: {
+          width: '12px',
+          height: '12px',
+          left: '4px',
+          _checked: {
+            left: '24px',
+            width: '16px',
+            height: '16px',
+          },
+        },
+        label: {
+          fontSize: 'bodySmall',
+        },
+      },
+      md: {
+        control: {
+          width: '52px',
+          height: '32px',
+        },
+        thumb: {
+          width: '16px',
+          height: '16px',
+          left: '4px',
+          _checked: {
+            left: '28px',
+            width: '24px',
+            height: '24px',
+          },
+        },
+        label: {
+          fontSize: 'bodyMedium',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});