cetec-design-system 0.0.2

package/src/components/Label/Label.tsx

@@ -0,0 +1,33 @@
+import { Box, type BoxProps } from '../Box';
+//import { Text, type TextProps } from '../Text';
+import { label, type LabelVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type LabelProps = Omit<BoxProps, keyof LabelVariantProps> & LabelVariantProps & {
+  htmlFor?: string;
+  children?: string | React.ReactNode;
+}
+
+export const Label: React.FC<LabelProps> = (
+  { 
+    htmlFor, 
+    children, 
+    ...props 
+  }: LabelProps,
+) => {
+  const [ className, otherProps ] = splitProps(props);
+  return (
+    <Box
+      htmlFor={htmlFor}
+      as="label" 
+      className={cx(
+        label({}),
+        className,
+      )} 
+      {...otherProps}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/components/Label/index.tsx

@@ -0,0 +1 @@
+export { Label, type LabelProps } from './Label';

package/src/components/Link/Link.tsx

@@ -0,0 +1,54 @@
+import { Box, type BoxProps } from '../Box';
+import { link, type LinkVariantProps } from '@styled-system/recipes';
+import { type FontSizeToken, type FontToken, type FontWeightToken } from '@styled-system/tokens';
+import { Icon } from '../Icon/Icon';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVariantProps & {
+  href: string;
+  external?: boolean;
+  disabled?: boolean;
+  size?: FontSizeToken;
+  family?: FontToken;
+  italic?: boolean;
+  bold?: boolean;
+  weight?: FontWeightToken;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const Link: React.FC<LinkProps> = (
+  {
+    href,
+    external,
+    disabled,
+    children,
+    size,
+    family,
+    weight,
+    italic,
+    bold,
+    ...props
+  }: LinkProps,
+) => {
+
+  const [ className, otherProps ] = splitProps(props);
+  return (
+    <Box
+      as="a"
+      href={href}
+      target={external ? '_blank' : undefined}
+      rel={external ? 'noopener noreferrer' : undefined}
+      aria-disabled={disabled}
+      className={cx(
+        link({ family, italic, bold, size, weight }),
+        className,
+      )}
+      {...otherProps}
+    >
+      {children}
+      {external && <Icon name="arrow-square-out" size={'20'} />}
+    </Box>
+  );
+};

package/src/components/Link/index.tsx

@@ -0,0 +1 @@
+export { Link, type LinkProps } from './Link';

package/src/components/PandaPatterns.tsx

@@ -0,0 +1,23 @@
+// // TODO: export all the Panda Patterns
+
+// export { 
+//     aspectRatio, 
+//     bleed, 
+//     center, 
+//     circle, 
+//     container, 
+//     cq, 
+//     divider, 
+//     flex, 
+//     float, 
+//     gridItem, 
+//     grid, 
+//     hstack, 
+//     linkOverlay, 
+//     spacer, 
+//     square, 
+//     stack, 
+//     visuallyHidden, 
+//     vstack, 
+//     wrap 
+// } from '@styled-system/patterns';

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,28 @@
+import { Box, type BoxProps } from '../Box';
+import { radio, type RadioVariantProps } from '@styled-system/recipes';
+import { Icon } from '../Icon';
+import { Label } from '../Label';
+
+export type RadioProps = Omit<BoxProps, keyof RadioVariantProps> &
+  RadioVariantProps & {
+    disabled?: boolean;
+    error?: boolean;
+  };
+
+export const Radio: React.FC<RadioProps> = ({ error, ...props }) => {
+  const { container, input, indicator } = radio({});
+  return (
+    <Label className={container}>
+      <Box
+        as="input"
+        type="radio"
+        className={input}
+        {...props}
+        {...(error && { 'data-error': true })}
+      />
+      <Icon className={indicator} name={'radio'} />
+      <Icon className={indicator} name={'radio-checked'} />
+      <Icon className={indicator} name={'radio-focus'} />
+    </Label>
+  );
+};

package/src/components/Radio/index.tsx

@@ -0,0 +1 @@
+export {Radio, type RadioProps } from "./Radio";

package/src/components/Slot.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export function Slot({ children, ...props }: { children?: React.ReactNode }) {
+  if (React.Children.count(children) > 1) {
+    throw new Error("Only one child allowed");
+  }
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...props,
+      ...(children.props as object),
+    });
+  }
+
+  return null;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,22 @@
+import { Box, type BoxProps } from '../Box/Box';
+import { spinner, type SpinnerVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> &
+  SpinnerVariantProps;
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size,
+  ...props
+}: SpinnerProps) => {
+  const [className, otherProps] = splitProps(props);
+
+  return (
+    <Box
+      as="div"
+      className={cx(spinner({ size }), className)}
+      {...otherProps}
+    />
+  );
+};

package/src/components/Spinner/index.tsx

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './Spinner';

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,106 @@
+import { Text, type TextProps } from './index';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/Text',
+  component: Text,
+  tags: ['autodocs', '!dev'],
+
+  parameters: {
+    layout: 'padded',
+    controls: {
+      disable: true,
+      disableSaveFromUI: true,
+    },
+  },
+  argTypes: {
+    fontSize: {
+      control: 'select',
+      options: [
+        'body-lg',
+        'body-md',
+        'body-sm',
+        'body-xs',
+        'header-lg',
+        'header-md',
+        'header-sm',
+        'header-xs',
+        'display-lg',
+        'display-md',
+        'display-sm',
+        'display-xs',
+      ],
+      description: 'Text size',
+      table: {
+        defaultValue: { summary: 'body-md' },
+      },
+    },
+    fontFamily: {
+      control: 'select',
+      options: ['mono', 'serif', 'body'],
+      description: 'Font family',
+      table: {
+        defaultValue: { summary: 'body' },
+      },
+    },
+    lineHeight: {
+      control: 'select',
+      options: ['lg', 'md', 'sm', 'xs'],
+      description: 'Line Height',
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    color: {
+      control: 'select',
+      options: ['slate-90', 'blue-50', 'gold-50', ''],
+      description: 'Font Color',
+      table: {
+        defaultValue: { summary: 'slate-90' },
+      },
+    },
+    as: {
+      control: 'text',
+      description: 'Render as element',
+    },
+    children: {
+      control: 'text',
+      description: 'ReactNode',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+export const Default: Story = { args: { children: 'Text Component' } };
+
+//export const AllSizes = {
+//  parameters: {
+//      controls:{ exclude: /.*/ },
+//  },
+//  render: (args: textProps) => (
+//    <>
+//      <Text {...args} lineHeight="body-lg" fontSize="body-lg" >Large Text</Text>
+//      <Text {...args} lineHeight="body-md" fontSize="body-md" >Medium Text</Text>
+//      <Text {...args} lineHeight="body-sm" fontSize="body-sm" >Small Text</Text>
+//      <Text {...args} lineHeight="body-xs" fontSize="body-xs" >Extra Small Text</Text>
+//    </>
+//  )
+//};
+
+export const AllColors: Story = {
+  render: (args: TextProps) => (
+    <>
+      <Text {...args} font="mono" color="slate.90">
+        Slate-90
+      </Text>
+      <Text {...args} color="gold.50">
+        Gold-50
+      </Text>
+      <Text {...args} color="blue.50">
+        Blue-50
+      </Text>
+    </>
+  ),
+};

package/src/components/Text/Text.tsx

@@ -0,0 +1,39 @@
+import React, { ReactNode, type ElementType } from 'react';
+import { Box, type BoxProps } from '~/components/Box';
+import { text, type TextVariantProps } from '@styled-system/recipes';
+import { cx } from '@styled-system/css';
+import { splitProps } from '~/utils/splitProps';
+
+export type TextProps = Omit<BoxProps, keyof TextVariantProps> &
+  TextVariantProps & {
+    children: string | ReactNode;
+    as?: ElementType;
+  };
+
+export const Text: React.FC<TextProps> = ({
+  as = 'p',
+  family,
+  italic,
+  bold,
+  underline,
+  size,
+  children,
+  textStyle,
+  weight,
+  ...props
+}: TextProps) => {
+  const [className, otherProps] = splitProps(props);
+
+  return (
+    <Box
+      as={as}
+      className={cx(
+        text({ textStyle, family, bold, underline, italic, size, weight }),
+        className,
+      )}
+      {...otherProps}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/components/Text/index.tsx

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,46 @@
+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 const Textarea: React.FC<TextareaProps> = (
+    {
+      variant,
+      label,
+      ...props
+    }: TextareaProps,
+) => {
+
+  const [ className, otherProps ] = splitProps(props);
+  return (
+    <Label>
+      <Text as='span'>{label}</Text>
+      <Box
+        as="textarea"
+        id={props.id}
+        htmlFor={props.id || ''}
+        className={cx(
+          textarea({ variant }),
+          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>
+  );
+};
+
+Textarea.displayName = 'Textarea';

package/src/components/Textarea/index.tsx

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from './Textarea';

package/src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -0,0 +1,20 @@
+import { IconButton } from '~/components/IconButton';
+import { Icon } from '~/components/Icon';
+import { useTheme } from '~/contexts/ThemeContext';
+
+export const ThemeSwitcher: React.FC = ({}) => {
+  const { theme, setTheme } = useTheme();
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <IconButton
+      variant="ghost"
+      onClick={toggleTheme}
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+    >
+      <Icon name={theme === 'light' ? 'moon' : 'sun'} />
+    </IconButton>
+  );
+};

package/src/components/ThemeSwitcher/index.tsx

@@ -0,0 +1 @@
+export { ThemeSwitcher } from './ThemeSwitcher';

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/index.ts

@@ -0,0 +1,64 @@
+import { definePreset } from '@pandacss/dev';
+import * as tokens from './styles/tokens';
+import {
+  buttonRecipe,
+  iconButtonRecipe,
+  inputRecipe,
+  textareaRecipe,
+  headingRecipe,
+  linkRecipe,
+  labelRecipe,
+  textRecipe,
+  checkBoxRecipe,
+  spinnerRecipe,
+  dividerRecipe,
+  preRecipe,
+  codeRecipe,
+  boxRecipe,
+  radioRecipe,
+} from './recipes/index';
+
+export const cetecPreset = definePreset({
+  name: 'cetec-preset',
+  theme: {
+    extend: {
+      recipes: {
+        text: textRecipe,
+        heading: headingRecipe,
+        link: linkRecipe,
+        label: labelRecipe,
+        button: buttonRecipe,
+        iconButton: iconButtonRecipe,
+        input: inputRecipe,
+        textarea: textareaRecipe,
+        code: codeRecipe,
+        pre: preRecipe,
+        spinner: spinnerRecipe,
+        divider: dividerRecipe,
+        box: boxRecipe,
+        radio: radioRecipe,
+        checkbox: checkBoxRecipe,
+      },
+      tokens: {
+        aspectRatios: tokens.aspectRatios,
+        borders: tokens.borders,
+        shadows: tokens.shadows,
+        easings: tokens.easings,
+        durations: tokens.durations,
+        letterSpacings: tokens.letterSpacings,
+        lineHeights: tokens.lineHeights,
+        blurs: tokens.blurs,
+        animations: tokens.animations,
+        colors: tokens.colors,
+        fonts: tokens.fonts,
+        fontSizes: tokens.fontSizes,
+        fontWeights: tokens.fontWeights,
+        sizes: tokens.sizes,
+        //numericSizes: tokens.numericSizes,
+        spacing: tokens.sizes,
+        radii: tokens.radii,
+      },
+    },
+  },
+});
+export default cetecPreset;

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/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: {
+  },
+});