cetec-design-system 0.0.4 → 0.0.6

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "cetec-design-system",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
+  "imports": {
+    "~/*": "./src/*",
+    "@styled-system/*": "./styled-system/*"
+  },
   "files": [
     "./styled-system/*",
     "./src/index.ts",
     "./src/storybook/*",
     "./src/utils/*",
     "./public/*",
-    "./src/components/*"
+    "./src/components/*",
+    "./src/styles/*",
+    "./src/recipes/*"
   ],
   "scripts": {
     "cssgen": "npx panda cssgen 'src/**/*.css'",

package/src/recipes/box.ts

@@ -0,0 +1,16 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const boxBase = {
+};
+
+const boxVariants = {
+};
+
+export const boxRecipe = defineRecipe({
+  className: 'box',
+  jsx: ['Box'],
+  base: boxBase,
+  variants: boxVariants,
+  defaultVariants: {
+  },
+});

package/src/recipes/button.ts

@@ -0,0 +1,220 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const buttonBase = {
+  position: 'relative',
+  appearance: 'none',
+  minWidth: '0',
+  transitionDuration: 'fast',
+  transitionProperty: 'background, border-color, color, box-shadow',
+  transitionTimingFunction: 'default',
+  userSelect: 'none',
+  verticalAlign: 'middle',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4',
+  fontFamily: 'body',
+  fontSize: '16',
+  fontWeight: 'medium',
+  lineHeight: 'default',
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: '4',
+  outlineWidth: '2',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  outlineOffset: '1',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  _disabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+  },
+  _focusVisible: {
+    outlineColor: { base: 'slate.80', _dark: 'slate.5' },
+  },
+  '& svg': {
+    fill: 'current',
+  },
+};
+
+const buttonVariants = {
+  variant: {
+    primary: {
+      bg: { base: 'slate.90', _dark: 'slate.5' },
+      color: { base: 'slate.0', _dark: 'slate.90' },
+      _hover: {
+        bg: { base: 'slate.70', _dark: 'slate.10' },
+      },
+      _active: {
+        bg: { base: 'slate.100', _dark: 'slate.20' },
+      },
+      _disabled: {
+        _hover: {
+          bg: { base: 'slate.90', _dark: 'slate.5' },
+        },
+      },
+      _selected: {
+        bg: { base: 'slate.5', _dark: 'slate.90' },
+        color: { base: 'slate.90', _dark: 'slate.0' },
+      },
+    },
+    standard: {
+      bg: { base: 'slate.5', _dark: 'slate.70' },
+      color: { base: 'slate.90', _dark: 'slate.0' },
+      _hover: {
+        bg: { base: 'slate.10', _dark: 'slate.60' },
+      },
+      _active: {
+        bg: { base: 'slate.20', _dark: 'slate.80' },
+      },
+      _disabled: {
+        _hover: {
+          bg: { base: 'slate.5', _dark: 'slate.70' },
+        },
+      },
+      _selected: {
+        bg: { base: 'slate.90', _dark: 'slate.5' },
+        color: { base: 'slate.0', _dark: 'slate.90' },
+      },
+    },
+    hollow: {
+      bg: 'transparent',
+      borderColor: { base: 'slate.30', _dark: 'slate.60' },
+      color: { base: 'slate.90', _dark: 'slate.0' },
+      _hover: {
+        bg: { base: 'slate.10', _dark: 'slate.60' },
+        borderColor: { base: 'slate.10', _dark: 'slate.60' },
+      },
+      _active: {
+        bg: { base: 'slate.20', _dark: 'slate.80' },
+        borderColor: { base: 'slate.20', _dark: 'slate.80' },
+      },
+      _disabled: {
+        _hover: {
+          bg: 'transparent',
+        },
+      },
+      _selected: {
+        bg: { base: 'slate.90', _dark: 'slate.5' },
+        color: { base: 'slate.0', _dark: 'slate.90' },
+        borderColor: 'transparent',
+      },
+    },
+    ghost: {
+      bg: 'transparent',
+      color: { base: 'slate.90', _dark: 'slate.0' },
+      _hover: {
+        bg: { base: 'slate.10', _dark: 'slate.60' },
+      },
+      _active: {
+        bg: { base: 'slate.20', _dark: 'slate.70' },
+      },
+      _disabled: {
+        _hover: {
+          bg: 'transparent',
+        },
+      },
+      _selected: {
+        bg: { base: 'slate.90', _dark: 'slate.5' },
+        color: { base: 'slate.0', _dark: 'slate.90' },
+      },
+    },
+    cta: {
+      bg: { base: 'gold.20', _dark: 'gold.30' },
+      color: 'slate.90',
+      _hover: {
+        bg: { base: 'gold.10', _dark: 'gold.20' },
+      },
+      _active: {
+        bg: { base: 'gold.30', _dark: 'gold.40' },
+      },
+      _disabled: {
+        _hover: {
+          bg: { base: 'gold.20', _dark: 'gold.30' },
+        },
+      },
+    },
+    danger: {
+      bg: 'red.50',
+      color: 'slate.0',
+      _hover: {
+        bg: 'red.40',
+      },
+      _active: {
+        bg: 'red.60',
+      },
+      _disabled: {
+        _hover: {
+          bg: 'red.50',
+        },
+      },
+    },
+  },
+};
+
+export const buttonRecipe = defineRecipe({
+  className: 'button',
+  jsx: ['Button'],
+  base: buttonBase,
+  variants: {
+    ...buttonVariants,
+    size: {
+      medium: {
+        fontSize: '16',
+        py: '3',
+        px: '10',
+      },
+      large: {
+        fontSize: '16',
+        py: '7',
+        px: '12',
+      },
+      small: {
+        fontSize: '14',
+        py: '0',
+        px: '8',
+        '& svg': {
+          mt: '-1',
+          mb: '-1',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'standard',
+    size: 'medium',
+  },
+});
+
+export const iconButtonRecipe = defineRecipe({
+  className: 'icon-button',
+  jsx: ['IconButton'],
+  base: buttonBase,
+  variants: {
+    ...buttonVariants,
+    size: {
+      medium: {
+        fontSize: '16',
+        p: '3',
+      },
+      large: {
+        fontSize: '16',
+        p: '7',
+      },
+      small: {
+        fontSize: '14',
+        p: '0',
+        '& svg': {
+          mt: '-1',
+          mb: '-1',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'standard',
+    size: 'medium',
+  },
+});

package/src/recipes/checkbox.ts

@@ -0,0 +1,88 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const checkBoxRecipe = defineSlotRecipe({
+    className: "checkbox",
+    jsx: ['CheckBox'],
+    slots: ["container", "input", "indicator"],
+    base: {
+        container: {
+            position: "relative",
+            display: "inline-grid",
+            gridTemplateColumns: "auto 1fr",  
+            gap: 4,
+            alignItems: "start",
+            cursor: "pointer",
+            userSelect: "none",
+        },
+        input: {
+            position: "absolute",
+            opacity: 0,
+            width: "full",
+            height: "full",
+            margin: "0",
+            padding: "0",
+            zIndex: 1,
+            cursor: "inherit",
+            "& ~ [name='checkbox']": {
+              display: "inline-grid",
+            },
+            _checked: {
+              "& ~ [name='checkbox-checked']": {
+                display: "inline-grid",
+                fill: { base: "slate.90", _dark: "slate.0" },
+              },
+              "& ~ [name='checkbox']": {
+                display: "none",
+              },
+            },
+            _indeterminate: {
+              "& ~ [name='checkbox-indeterminate']": {
+                display: "inline-grid",
+                fill: { base: "slate.90", _dark: "slate.0" },
+                _disabled: {
+                },
+              },
+              "& ~ [name='checkbox']": {
+                display: "none",
+              },
+            },
+            _disabled: {
+              "& ~ svg": {
+                opacity: 0.4,
+                pointerEvents: 'none',
+                cursor: 'none',
+              },
+              display: "inline-grid",
+            },
+            _error: {
+              display: "inline-grid",
+              "& ~ svg": {
+                fill: "red.50",
+              }
+            },
+            _focusVisible: {
+              "& ~ svg": {
+                outlineColor: { base: 'slate.80', _dark: 'slate.5' },
+                outlineOffset: -3,
+                borderRadius: 5,
+                outlineWidth: 1,
+                outlineStyle: 'solid',
+              },
+            },
+        },
+        indicator: {
+            placeContent: "center",
+            display: 'none',
+            width: 24,
+            height: 24,
+            "&:is([name='checkbox'])": {
+              display: "inline-grid",
+              fill: "slate.20",
+            },
+        },
+    },
+    variants: {
+    },
+    defaultVariants: {
+    },
+});

package/src/recipes/code.ts

@@ -0,0 +1,37 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const codeBase = {
+  bg: 'slate.80',
+  position: "relative",
+  overflow: "auto",
+  p: "4",
+  whiteSpace: "pre",
+  fontSize: "14",
+};
+
+const preBase = {
+  borderRadius: "8",
+  overflow: "hidden",
+  borderWidth: "0",
+  borderColor: "slate.60",
+  bg: "slate.80",
+  color: "slate.5",
+  px: "16",
+  py: "8",
+  my: "8",
+  whiteSpace: "pre",
+};
+
+export const codeRecipe = defineRecipe({
+  className: 'code',
+  jsx:['Code'],
+  base: codeBase,
+});
+
+export const preRecipe = defineRecipe({
+  className: 'pre',
+  jsx: ['Pre'],
+  base: preBase,
+});
+
+

package/src/recipes/divider.ts

@@ -0,0 +1,40 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const dividerBase = {
+  '--divider-weight': 'sizes.1',
+  borderStyle: 'solid',
+  color: { base: 'slate.20', _dark: 'slate.80' },
+  borderColor: 'current',
+  minWidth: '1',
+  minHeight: '1',
+};
+
+const dividerVariants = {
+  direction: {
+    horizontal: {
+      width: 'full',
+      borderTopWidth: 'var(--divider-weight)',
+    },
+    vertical: {
+      height: 'full',
+      borderLeftWidth: 'var(--divider-weight)',
+    },
+  },
+  weight: {
+    thin: { '--divider-weight': 'sizes.1' },
+    medium: { '--divider-weight': 'sizes.2' },
+    thick: { '--divider-weight': 'sizes.4' },
+    thicker: { '--divider-weight': 'sizes.6' },
+  },
+};
+
+export const dividerRecipe = defineRecipe({
+  className: 'divider',
+  jsx: ['Divider'],
+  base: dividerBase,
+  variants: dividerVariants,
+  defaultVariants: {
+    direction: 'horizontal',
+    weight: 'thin',
+  },
+});

package/src/recipes/index.ts

@@ -0,0 +1,10 @@
+export { buttonRecipe, iconButtonRecipe } from './button';
+export { inputRecipe } from './input';
+export { textareaRecipe } from './textarea';
+export { textRecipe, headingRecipe, linkRecipe, labelRecipe } from './text';
+export { checkBoxRecipe } from "./checkbox"
+export { spinnerRecipe } from "./spinner"
+export { dividerRecipe } from "./divider"
+export { preRecipe, codeRecipe } from "./code"
+export { boxRecipe } from './box';
+export { radioRecipe } from './radio'; 

package/src/recipes/input.ts

@@ -0,0 +1,56 @@
+import { defineRecipe } from '@pandacss/dev';
+const inputBase = {
+  position: 'relative',
+  display: 'inline-grid',
+  verticalAlign: 'top',
+  alignItems: 'center',
+  padding: '0',
+  fontFamily: 'body',
+  fontSize: '16',
+  fontWeight: 'normal',
+  lineHeight: 'normal',
+  color: { base: 'slate.90', _osDark: 'slate.5' },
+  borderRadius: '8',
+  '& input': {
+    width: 'auto',
+    minWidth: '16',
+    maxWidth: 'full',
+    font: 'inherit',
+    py: '4',
+    px: '8',
+    m: '0',
+    resize: 'none',
+    appearance: 'none',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderRadius: '4',
+    borderColor: 'transparent',
+    background: { base: 'slate.0', _osDark: 'slate.90' },
+  },
+  gridTemplateColumns: 'auto 1fr',
+};
+
+const inputVariants = {
+  variant: {
+    stacked: {
+      gridTemplateRows: 'auto 1fr',
+      alignItems: 'stretch',
+      '& input': {
+        gridArea: '2 / 1',
+        background: { base: 'slate.0', _osDark: 'slate.90' },
+        borderColor: { base: 'slate.40', _osDark: 'slate.50' },
+      },
+    },
+    internalLabel: {},
+  },
+};
+
+export const inputRecipe = defineRecipe({
+  className: 'input',
+  jsx: ['Input'],
+  base: inputBase,
+  variants: inputVariants,
+  defaultVariants: {
+    variant: 'stacked',
+  },
+});

package/src/recipes/radio.ts

@@ -0,0 +1,71 @@
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const radioRecipe = defineSlotRecipe({
+    className: "radio",
+    jsx: ['Radio'],
+    slots: ["container", "input", "indicator"],
+    base: {
+        container: {
+            position: "relative",
+            display: "inline-grid",
+            gridTemplateColumns: "auto 1fr",  
+            gap: 4,
+            alignItems: "start",
+            cursor: "pointer",
+            userSelect: "none",
+        },
+        input: {
+            position: "absolute",
+            opacity: 0          ,
+            width: "full",
+            height: "full",
+            margin: "0",
+            padding: "0",
+            zIndex: 1,
+            cursor: "inherit",
+            "& ~ [name='radio']": {
+              display: "inline-grid",
+            },
+            _checked: {
+              "& ~ [name='radio-checked']": {
+                display: "inline-grid",
+                fill: { base: "slate.90", _dark: "slate.0" },
+              },
+              "& ~ [name='radio']": {
+                display: "none",
+              },
+            },
+            _disabled: {
+              "& ~ svg": {
+                opacity: 0.4,
+                pointerEvents: 'none',
+                cursor: 'none',
+              },
+              display: "inline-grid",
+            },
+            _error: {
+              display: "inline-grid",
+              "& ~ svg": {
+                fill: "red.50",
+              }
+            },
+            _focusVisible: {
+              "& ~ [name='radio-focus']": {
+                display: 'inline-grid',
+                position: 'absolute',
+                fill: { base: 'slate.90', _dark: 'slate.1' },
+              },
+            },
+        },
+        indicator: {
+            placeContent: "center",
+            display: 'none',
+            width: 24,
+            height: 24,
+            "&:is([name='radio'])": {
+              display: "inline-grid",
+              fill: "slate.20",
+            },
+        },
+    },
+})

package/src/recipes/spinner.ts

@@ -0,0 +1,42 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const spinnerBase = {
+  aspectRatio: 'square',
+  rounded: '100',
+  borderWidth: '3',
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderTopColor: 'slate.90',
+  borderBottomColor: 'slate.90',
+  animation: 'spin',
+  filter: 'invert(1)',
+  mixBlendMode: 'difference',
+  isolation: 'isolate',
+};
+
+const spinnerVariants = {
+  size: {
+    medium: {
+      height: '24',
+      minHeight: '24',
+    },
+    small: {
+      height: '16',
+      minHeight: '16',
+    },
+    large: {
+      height: '32',
+      minHeight: '32',
+    },
+  }
+};
+
+export const spinnerRecipe = defineRecipe({
+  className: 'spinner',
+  jsx:['Spinner'],
+  base: spinnerBase,
+  variants: spinnerVariants,
+  defaultVariants: {
+    size: 'medium',
+  },
+});