cetec-design-system 0.0.6 → 0.0.8

package/src/components/Textarea/Textarea.tsx

@@ -1,45 +1,35 @@
 import { Box, type BoxProps } from '~/components/Box';
-import { Text, type TextProps } from '~/components/Text';
-import { Label, type LabelProps } from '~/components/Label';
 import { textarea, type TextareaVariantProps } from '@styled-system/recipes';
 import { cx } from '@styled-system/css';
 import { splitProps } from '~/utils/splitProps';
 
-export type TextareaProps = Omit<BoxProps, keyof TextProps | keyof TextareaVariantProps | keyof LabelProps> & TextareaVariantProps & TextProps & LabelProps & {
-  variant?: 'autoGrow' | 'stacked' | 'internalLabel';
-  label?: string;
+export type TextareaProps = Omit<BoxProps, keyof TextareaVariantProps > & TextareaVariantProps & {
+  autoSize?: boolean,
+  error?: boolean,
+  disabled?:boolean,
 }
 
 export const Textarea: React.FC<TextareaProps> = (
     {
-      variant,
-      label,
+      size,
+      error,
+      autoSize= false,
       ...props
     }: TextareaProps,
 ) => {
 
   const [ className, otherProps ] = splitProps(props);
   return (
-    <Label>
-      <Text as='span'>{label}</Text>
       <Box
         as="textarea"
-        id={props.id}
-        htmlFor={props.id || ''}
+        {...error && { 'data-error': true }}
         className={cx(
-          textarea({ variant }),
+          textarea({ size, autoSize }),
           className,
         )}
-        onInput={(e: React.FormEvent<HTMLTextAreaElement>) => {
-          const target = e.currentTarget;
-          const parent = target.parentNode as HTMLElement;
-          parent.dataset.value = target.value || '';
-        }}
         {...otherProps}
       >
-        <Text>{props.value}</Text>
       </Box>
-    </Label>
   );
 };
 

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const THEME_STORAGE_KEY = 'cetec-theme-preference';
+
+function getInitialTheme(): Theme {
+  // Check for stored preference
+  const storedTheme = localStorage.getItem(THEME_STORAGE_KEY) as Theme | null;
+  if (storedTheme) {
+    return storedTheme;
+  }
+
+  // Check for system preference
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return 'dark';
+  }
+
+  // Default to light
+  return 'light';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme());
+
+  // Update theme in both DOM and localStorage
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(THEME_STORAGE_KEY, newTheme);
+  };
+
+  // Apply theme to DOM
+  useEffect(() => {
+    // Remove any existing theme
+    document.documentElement.removeAttribute('data-color-mode');
+    document.documentElement.removeAttribute('data-theme');
+
+    document.documentElement.setAttribute('data-color-mode', theme);
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = (e: MediaQueryListEvent) => {
+      const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+      // Only update if user hasn't explicitly set a preference
+      if (!storedTheme) {
+        setThemeState(e.matches ? 'dark' : 'light');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+} 

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import '~/styles/index.css';
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/recipes/checkbox.ts

@@ -1,88 +1,81 @@
-import { defineSlotRecipe } from "@pandacss/dev";
+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",
+  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' },
         },
-        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',
-              },
-            },
+        "& ~ [name='checkbox']": {
+          display: 'none',
         },
-        indicator: {
-            placeContent: "center",
-            display: 'none',
-            width: 24,
-            height: 24,
-            "&:is([name='checkbox'])": {
-              display: "inline-grid",
-              fill: "slate.20",
-            },
+      },
+      _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: 'error.default',
+        },
+      },
+      _focusVisible: {
+        "& ~ [name='checkbox-focus']": {
+          display: 'inline-grid',
+          position: 'absolute',
+          fill: { base: 'slate.90', _dark: 'slate.1' },
+        },
+      },
     },
-    variants: {
-    },
-    defaultVariants: {
+    indicator: {
+      placeContent: 'center',
+      display: 'none',
+      width: 24,
+      height: 24,
+      "&:is([name='checkbox'])": {
+        display: 'inline-grid',
+        fill: { base: 'slate.30', _dark: 'slate.20' },
+      },
     },
+  },
 });

package/src/recipes/index.ts

@@ -8,3 +8,5 @@ export { dividerRecipe } from "./divider"
 export { preRecipe, codeRecipe } from "./code"
 export { boxRecipe } from './box';
 export { radioRecipe } from './radio'; 
+export { textinputRecipe } from './textinput';
+

package/src/recipes/text.ts

@@ -2,7 +2,7 @@ import { defineRecipe } from '@pandacss/dev';
 import {
   fontSizes as fontSizeTokens,
   fontWeights as fontWeightTokens,
-} from '~/styles/tokens';
+} from '../styles/tokens';
 
 const textBase = {
   margin: '0',
@@ -106,12 +106,20 @@ const linkBase = {
   backgroundSize: '100% 1px',
   backgroundRepeat: 'no-repeat',
   backgroundPositionY: '100%',
+  outlineWidth: '2',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  outlineOffset: '1',
   width: 'fit-content',
   cursor: 'pointer',
   _hover: {
     color: { base: 'blue.40', _dark: 'blue.30' },
     backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
   },
+  _focus: {
+    borderRadius: '4',
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
 };
 
 const linkVariants = {
@@ -119,7 +127,7 @@ const linkVariants = {
   _disabled: {
     true: {
       cursor: 'not-allowed',
-      opacity: 0.7,
+      opacity: 0.4,
       pointerEvents: 'none',
     },
   },

package/src/recipes/textarea.ts

@@ -2,67 +2,68 @@ import { defineRecipe } from '@pandacss/dev';
 
 const textareaBase = {
   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',
   width: 'full',
-  '&::after, & textarea': {
-    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' },
-    _hover: {
-      borderColor: { base: 'slate.20', _osDark: 'slate.30' },
-    },
+  color: { base: 'slate.90', _dark: 'slate.0' },
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColor: 'slate.30',
+  borderRadius: '4',
+  lineHeight: 'tight',
+  outlineWidth: '1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  resize: 'both',
+  _focus: {
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+    borderColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
+  _error: {
+    display: 'inline-grid',
+    borderColor: 'error.default',
     _focus: {
-      borderColor: { base: 'slate.90', _osDark: 'slate.5' },
+      borderColor: { base: 'error.default', _dark: 'error.default' },
+      outlineColor: { base: 'error.default', _dark: 'error.default' },
+    },
+  },
+  _placeholder: {
+    color: {
+      base: 'slate.50',
+      _dark: 'slate.40',
     },
   },
-  _after: {
-    content: 'attr(data-value) " "',
-    outline: '1px solid olive',
-    whiteSpace: 'pre-wrap',
-    transform: 'translate(4px, 4px)',
-    opacity: '0.3',
+  _disabled: {
+    opacity: 0.4,
+  },
+  '&[data-error]:focus': {
+    borderColor: 'error.default',
   },
-  '& textarea': {},
-  gridTemplateColumns: 'auto 1fr',
 };
 
 const textareaVariants = {
-  variant: {
-    autoGrow: {
-      width: 'fit-content',
+  size: {
+    small: {
+      py: '0',
+      px: '8',
+      minHeight: '48',
+      fontSize: '14',
+    },
+    medium: {
+      py: '3',
+      px: '10',
+      fontSize: '16',
+      minHeight: '64',
     },
-    stacked: {
-      gridTemplateRows: 'auto 1fr',
-      alignItems: 'stretch',
-      '&::after, & textarea': {
-        gridArea: '2 / 1',
-      },
-      '& textarea': {
-        background: { base: 'slate.0', _osDark: 'slate.90' },
-        borderColor: { base: 'slate.40', _osDark: 'slate.50' },
-      },
+    large: {
+      py: '7',
+      px: '12',
+      fontSize: '16',
+      minHeight: '80',
+    },
+  },
+  autoSize: {
+    true: {
+      fieldSizing: 'content',
     },
-    internalLabel: {},
   },
 };
 
@@ -72,6 +73,6 @@ export const textareaRecipe = defineRecipe({
   base: textareaBase,
   variants: textareaVariants,
   defaultVariants: {
-    variant: 'autoGrow',
+    size: 'medium',
   },
 });

package/src/recipes/textinput.ts

@@ -0,0 +1,76 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textInputVariants = {
+  size: {
+    medium: {
+      py: 3,
+      px: 10,
+      fontSize: '16',
+    },
+    small: {
+      py: 0,
+      px: 8,
+      fontSize: '14',
+    },
+    large: {
+      py: 7,
+      px: 12,
+      fontSize: '16',
+    },
+  },
+  autoSize: {
+    true: {
+      fieldSizing: 'content',
+    },
+  },
+};
+
+const textInputBase = {
+  position: 'relative',
+  width: 'full',
+  borderWidth: '1',
+  borderColor: 'slate.30',
+  borderStyle: 'solid',
+  borderRadius: '4',
+  lineHeight: 'default',
+  fontFamily: 'body',
+  outlineWidth: '1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  color: {
+    base: 'slate.90',
+    _dark: 'slate.0',
+  },
+  _placeholder: {
+    color: {
+      base: 'slate.50',
+      _dark: 'slate.40',
+    },
+  },
+  _disabled: {
+    opacity: 0.4,
+  },
+
+  _focus: {
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+    borderColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
+  _error: {
+    display: 'inline-grid',
+    borderColor: 'error.default',
+    _focus: {
+      borderColor: { base: 'error.default', _dark: 'error.default' },
+      outlineColor: { base: 'error.default', _dark: 'error.default' },
+    },
+  },
+};
+
+export const textinputRecipe = defineRecipe({
+  className: 'textinput',
+  jsx: ['TextInput'],
+  base: textInputBase,
+  variants: textInputVariants,
+  defaultVariants: {
+    size: 'medium',
+  },
+});

package/src/styles/globalStyle.ts

@@ -9,7 +9,7 @@ export const globalCss = defineGlobalStyles({
     margin: 0,
     padding: 0,
     _focusVisible: {
-      outlineColor: { base: 'slate.80', _dark: 'slate.5' },
+      outlineColor: { base: 'slate.90', _dark: 'slate.0' },
     },
   },
   html: {
@@ -22,7 +22,7 @@ export const globalCss = defineGlobalStyles({
     fontFamily: 'body',
     fontVariationSettings: '"CRSV" 0, "CASL" 0',
     bg: { base: 'slate.0', _dark: 'slate.90' },
-    color: { base: 'slate.60', _dark: 'slate.20' },
+    color: { base: 'slate.60', _dark: 'slate.30' },
     fontWeight: 'normal',
   },
   'h1, h2, h3, h4, h5, h6': {
@@ -51,14 +51,19 @@ export const globalCss = defineGlobalStyles({
     borderColor: 'currentcolor',
   },
   'button, input, optgroup, select, textarea': {
-    fontFamily: 'inherit',
+    fontFamily: 'body',
     fontSize: '100%',
-    lineHeight: '1.15',
+    lineHeight: 'calc(1em + 0.5rem)',
     margin: '0',
   },
   'button, [type="button"], [type="reset"], [type="submit"]': {
     '-webkit-appearance': 'button',
   },
+  _disabled: {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
   legend: {
     padding: '0',
   },

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/styled-system/recipes/index.d.ts

@@ -1,6 +1,4 @@
 /* eslint-disable */
-export * from './radio';
-export * from './checkbox';
 export * from './text';
 export * from './heading';
 export * from './link';
@@ -8,9 +6,12 @@ export * from './label';
 export * from './button';
 export * from './icon-button';
 export * from './input';
+export * from './textinput';
 export * from './textarea';
 export * from './code';
 export * from './pre';
 export * from './spinner';
 export * from './divider';
-export * from './box';
+export * from './box';
+export * from './checkbox';
+export * from './radio';

package/styled-system/recipes/index.mjs

@@ -5,6 +5,7 @@ export * from './label.mjs';
 export * from './button.mjs';
 export * from './icon-button.mjs';
 export * from './input.mjs';
+export * from './textinput.mjs';
 export * from './textarea.mjs';
 export * from './code.mjs';
 export * from './pre.mjs';

package/styled-system/recipes/radio-input.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface RadioInputVariant {
+  
+}
+
+type RadioInputVariantMap = {
+  [key in keyof RadioInputVariant]: Array<RadioInputVariant[key]>
+}
+
+export type RadioInputVariantProps = {
+  [key in keyof RadioInputVariant]?: ConditionalValue<RadioInputVariant[key]> | undefined
+}
+
+export interface RadioInputRecipe {
+  __type: RadioInputVariantProps
+  (props?: RadioInputVariantProps): string
+  raw: (props?: RadioInputVariantProps) => RadioInputVariantProps
+  variantMap: RadioInputVariantMap
+  variantKeys: Array<keyof RadioInputVariant>
+  splitVariantProps<Props extends RadioInputVariantProps>(props: Props): [RadioInputVariantProps, Pretty<DistributiveOmit<Props, keyof RadioInputVariantProps>>]
+  getVariantProps: (props?: RadioInputVariantProps) => RadioInputVariantProps
+}
+
+
+export declare const radioInput: RadioInputRecipe