cetec-design-system 0.0.2 → 0.0.4

package/src/recipes/button.ts

@@ -1,220 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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',
-  },
-});