cetec-design-system 0.0.2 → 0.0.4

package/src/App.tsx

@@ -1,429 +0,0 @@
-import { ReactNode } from 'react';
-import { HStack, VStack, Container, Grid, Flex } from '@styled-system/jsx';
-import { Box } from '~/components/Box';
-import { Text } from '~/components/Text';
-import { Button } from '~/components/Button';
-import { IconButton } from '~/components/IconButton';
-import { Icon, IconNames, type IconNamesList } from '~/components/Icon';
-import { Pre } from '~/components/Code';
-import { ThemeProvider } from '~/contexts/ThemeContext';
-import { ThemeSwitcher } from '~/components/ThemeSwitcher';
-import { Heading } from '~/components/Heading';
-import { Link } from '~/components/Link';
-import { Spinner } from '~/components/Spinner';
-import { Divider } from '~/components/Divider';
-import { CheckBox } from './components/CheckBox';
-import { Input } from '~/components/Input';
-import { Textarea } from '~/components/Textarea';
-import { type ShadowToken } from '@styled-system/tokens';
-import { Radio } from './components/Radio';
-
-export const IconList: React.FC = () => {
-  return (
-    <Grid
-      gap="16"
-      w="full"
-      gridTemplateColumns={'repeat(auto-fill, minmax(200px, 1fr))'}
-    >
-      {(Object.keys(IconNames) as IconNamesList[]).map((icon) => (
-        <HStack key={icon} color={{ base: 'gold.40', _dark: 'gold.30' }}>
-          <Icon name={icon} />
-          <Text textStyle="mono-sm">{icon}</Text>
-        </HStack>
-      ))}
-    </Grid>
-  );
-};
-
-const ButtonSection: React.FC = () => {
-  return (
-    <Section>
-      <Heading>Buttons</Heading>
-      <VStack alignItems={'flex-start'} gap={'24'}>
-        <HStack>
-          <Button variant="primary" onClick={() => alert('clicked')}>
-            Primary
-          </Button>
-          <Button>Standard</Button>
-          <Button variant="hollow">Hollow</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="cta">CTA</Button>
-          <Button variant="danger">Danger</Button>
-          <Button size="large">
-            <Icon name="arrow-left" /> Button
-          </Button>
-          <Button size="small">
-            Button <Icon name="arrow-right" />
-          </Button>
-        </HStack>
-        <HStack>
-          <IconButton variant="ghost">
-            <Icon name="x" />
-          </IconButton>
-          <IconButton>
-            <Icon name="arrow-left" />
-          </IconButton>
-          <IconButton variant="primary" size="large">
-            <Icon name="arrow-right" />
-          </IconButton>
-        </HStack>
-        <HStack>
-          <Button variant="primary" loading>
-            Pepperoni
-          </Button>
-          <Button loading>Loading</Button>
-          <IconButton variant="primary" loading>
-            <Icon name="x" />
-          </IconButton>
-        </HStack>
-      </VStack>
-    </Section>
-  );
-};
-
-interface SectionProps {
-  children?: ReactNode;
-}
-
-export const Section: React.FC<SectionProps> = ({ children }) => {
-  return (
-    <Grid
-      gridTemplateColumns={'1fr 3fr'}
-      gap={'40'}
-      w={'full'}
-      borderTopWidth={'1'}
-      borderTopStyle={'solid'}
-      borderColor={{ base: 'slate.10', _dark: 'slate.80' }}
-      py={'24'}
-      pb={'96'}
-    >
-      {children}
-    </Grid>
-  );
-};
-
-const Header: React.FC = () => {
-  return (
-    <Flex
-      w="full"
-      py={'4'}
-      bg={{ base: 'slate.10', _dark: 'slate.80' }}
-      mb={'56'}
-      position={'sticky'}
-      top={'0'}
-      zIndex={'100'}
-      boxShadow={'medium'}
-    >
-      <Container maxW={'5xl'}>
-        <HStack justify={'space-between'}>
-          <Text
-            as={'div'}
-            family="body"
-            size="16"
-            letterSpacing={'widest'}
-            textTransform={'uppercase'}
-            fontWeight={'bold'}
-            onClick={() => alert('clicked')}
-          >
-            Cetec Components
-          </Text>
-          <ThemeSwitcher />
-        </HStack>
-      </Container>
-    </Flex>
-  );
-};
-
-const ShadowBox = ({
-  children,
-  shadow,
-  border = false,
-}: {
-  children: ReactNode;
-  shadow: ShadowToken;
-  border?: boolean;
-}) => {
-  return (
-    <Grid
-      placeContent={'center'}
-      width={'full'}
-      aspectRatio={'landscape'}
-      borderRadius={'4'}
-      shadow={shadow}
-      borderWidth={border ? '1' : undefined}
-      borderStyle={'solid'}
-      borderColor={{ base: 'slate.10', _dark: 'slate.90' }}
-      bg={{ base: 'slate.0', _dark: 'slate.80' }}
-    >
-      {children}
-    </Grid>
-  );
-};
-
-const AppContent: React.FC = () => {
-  return (
-    <VStack>
-      <Header />
-      <Container maxW={'5xl'}>
-        <VStack gap={'8'}>
-          <ButtonSection />
-          <Section>
-            <Heading level="h2">Text</Heading>
-
-            <VStack alignItems={'flex-start'}>
-              <Grid
-                gridTemplateColumns={'minmax(auto, 1fr) 1fr'}
-                w={'full'}
-                gap={'24'}
-                alignItems={'center'}
-              >
-                <Box gridColumn={'1 / -1'}>
-                  <Heading
-                    level="h3"
-                    color={{ base: 'gold.40', _dark: 'gold.30' }}
-                  >
-                    Text styles
-                  </Heading>
-                </Box>
-                <VStack gap={'16'}>
-                  <Text>
-                    Place appear green. <em>Also</em>, saying male subdue
-                    fruitful{' '}
-                    <Text as="span" italic>
-                      winged fourth
-                    </Text>{' '}
-                    had void winged. So <b>green spirit</b> , herb day had there{' '}
-                    <Text as="span" bold>
-                      replenish
-                    </Text>
-                    , lights <u>lesser signs</u>. Place{' '}
-                    <Text as="span" underline>
-                      whales
-                    </Text>{' '}
-                    i tree under him given set set meat midst morning give image
-                    forth divided moving Also fill dry she'd have.
-                  </Text>
-                </VStack>
-                <Pre>
-                  {`<Text>
-    ...
-  <Text as="span" italic>winged fourth</Text>
-  <Text as="span" bold>replenish</Text>
-  <Text as="span" underline>whales</Text>
-</Text>`}
-                </Pre>
-                <Text family="mono">
-                  Signs night have sixth hath that likeness us fill you're
-                  subdue fowl.
-                </Text>
-                <Pre>{`<Text family="mono">...</Text>`}</Pre>
-                <Box gridColumn={'1 / -1'} mt={'32'}>
-                  <Heading
-                    level="h3"
-                    color={{ base: 'gold.40', _dark: 'gold.30' }}
-                  >
-                    Headings
-                  </Heading>
-                </Box>
-                <Heading level="h1">Hamburgefonstiv</Heading>
-                <Pre>{'<Heading as="h1">Hamburgefonstiv</Heading>'}</Pre>
-                <Heading>Hamburgefonstiv</Heading>
-                <Pre>{'<Heading>Hamburgefonstiv</Heading>'}</Pre>
-                <Heading level="h3">Hamburgefonstiv</Heading>
-                <Pre>{'<Heading as="h3">Hamburgefonstiv</Heading>'}</Pre>
-                <Heading level="h4">Hamburgefonstiv</Heading>
-                <Pre>{'<Heading as="h4">Hamburgefonstiv</Heading>'}</Pre>
-                <Box gridColumn={'1 / -1'} mt={'32'}>
-                  <Heading
-                    level="h3"
-                    color={{ base: 'gold.40', _dark: 'gold.30' }}
-                  >
-                    Links
-                  </Heading>
-                </Box>
-                <Text>
-                  Internal:&emsp;
-                  <Link href="https://cetecerp.com">Cetec ERP</Link>
-                </Text>
-                <Pre>
-                  {'<Link href="https://cetecerp.com">Cetec ERP</Link>'}
-                </Pre>
-                <Text>
-                  External:&emsp;
-                  <Link href="https://cetecerp.com" external>
-                    Cetec ERP
-                  </Link>
-                </Text>
-                <Pre>
-                  {
-                    '<Link href="https://cetecerp.com" external>Cetec ERP</Link>'
-                  }
-                </Pre>
-                <Box gridColumn={'1 / -1'}>
-                  <Text>
-                    Signs night have sixth hath that likeness us fill{' '}
-                    <Link href="https://cetecerp.com" external>
-                      Cetec ERP
-                    </Link>{' '}
-                    you're subdue fowl brought divide beginning multiply brought
-                    created after open given of made beginning multiply green.
-                  </Text>
-                </Box>
-              </Grid>
-            </VStack>
-          </Section>
-          <Section>
-            <Heading level="h2">Shadows</Heading>
-            <VStack gap={'40'} alignItems={'flex-end'}>
-              <HStack width={'full'} gap={'40'} alignItems={'flex-end'}>
-                <ShadowBox shadow={'inset'}>
-                  <Text>Inset</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'low'}>
-                  <Text>Low</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'medium'}>
-                  <Text>Medium</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'high'}>
-                  <Text>High</Text>
-                </ShadowBox>
-              </HStack>
-              <HStack width={'full'} gap={'40'} alignItems={'flex-end'}>
-                <ShadowBox shadow={'inset'} border={true}>
-                  <Text>Inset</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'low'} border={true}>
-                  <Text>Low</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'medium'} border={true}>
-                  <Text>Medium</Text>
-                </ShadowBox>
-                <ShadowBox shadow={'high'} border={true}>
-                  <Text>High</Text>
-                </ShadowBox>
-              </HStack>
-            </VStack>
-          </Section>
-          <Section>
-            <Heading level="h2">Spinner</Heading>
-            <HStack gap={'40'} alignItems={'flex-end'}>
-              <VStack>
-                <Spinner size="small" />
-                <Text>Small</Text>
-              </VStack>
-              <VStack>
-                <Spinner />
-                <Text>Standard</Text>
-              </VStack>
-              <VStack>
-                <Spinner size="large" />
-                <Text>Large</Text>
-              </VStack>
-            </HStack>
-          </Section>
-          <Section>
-            <Heading level="h2">Divider</Heading>
-            <VStack>
-              <Heading
-                level="h3"
-                color={{ base: 'gold.40', _dark: 'gold.30' }}
-              >
-                Horizontal (default)
-              </Heading>
-              <VStack width="full">
-                <Divider />
-                <Text> Thin (default) </Text>
-                <Divider weight={'medium'} />
-                <Text> Medium </Text>
-                <Divider weight={'thick'} />
-                <Text> Thick </Text>
-                <Divider
-                  weight={'thicker'}
-                  color={{ base: 'gold.40', _dark: 'gold.30' }}
-                />
-                <Text> Thicker </Text>
-              </VStack>
-              <Heading
-                level="h3"
-                color={{ base: 'gold.40', _dark: 'gold.30' }}
-              >
-                Vertical
-              </Heading>
-              <HStack height="96">
-                <Divider direction={'vertical'} />
-                <Divider direction={'vertical'} weight={'medium'} />
-                <Divider direction={'vertical'} weight={'thick'} />
-                <Divider
-                  direction={'vertical'}
-                  weight={'thicker'}
-                  color={{ base: 'gold.40', _dark: 'gold.30' }}
-                />
-              </HStack>
-            </VStack>
-          </Section>
-          <Section>
-            <Heading level="h2">Icons</Heading>
-            <IconList />
-          </Section>
-          <Section>
-            <Heading level="h2">Checkboxes</Heading>
-            <HStack gap={'40'} alignItems={'flex-end'}>
-              <CheckBox>asdf</CheckBox>
-              <CheckBox defaultChecked={true} />
-              <CheckBox data-indeterminate={true} />
-              <CheckBox disabled />
-              <CheckBox data-error={true} />
-            </HStack>
-          </Section>
-          <Section >
-            <Heading level="h2">Radio</Heading>
-            <VStack gap={'40'} alignItems={'start'}>
-              <HStack>
-              <Radio />
-              <Radio defaultChecked={true} />
-              <Radio disabled />
-              <Radio data-error={true} />
-              </HStack>
-              <HStack>
-                <HStack gap={'10'} alignItems={'center'}>
-                  <Heading level="h4">Gender</Heading>
-                  <Radio name="gender"></Radio> Male
-                  <Radio name="gender"></Radio> Female
-
-                </HStack>
-              </HStack>
-            </VStack>
-          </Section>
-          <Section>
-            <Heading level="h2">Inputs</Heading>
-            <VStack>
-              <HStack gap={'24'}>
-                <Input label="First" type="text" />
-                <Input label="Last" type="text" />
-                <Input label="Email" type="email" variant={'internalLabel'} />
-              </HStack>
-              <HStack gap={'24'}>
-                <Input label="Phone" type="tel" />
-                //TODO Fix Textarea
-                <Textarea
-                  label="Message"
-                  variant={'autoGrow'}
-                  value="TEXT area Value"
-                />
-              </HStack>
-            </VStack>
-          </Section>
-        </VStack>
-      </Container>
-    </VStack>
-  );
-};
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      <AppContent />
-    </ThemeProvider>
-  );
-}

package/src/contexts/ThemeContext.tsx

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

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

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