@edwardguerra/design-system 1.0.0

package/dist/types/components/Radio/Radio.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Radio.css';
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface RadioProps {
+    /**
+     * Radio group name
+     */
+    name: string;
+    /**
+     * Available radio options
+     */
+    options: RadioOption[];
+    /**
+     * Selected value
+     */
+    value?: string;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Radio: React.FC<RadioProps>;

package/dist/types/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Radio").RadioProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSelection: Story;
+export declare const WithDisabled: Story;
+export declare const YesNo: Story;

package/dist/types/components/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Radio/index.d.ts

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

package/dist/types/components/Slider/Slider.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import './Slider.css';
+export interface SliderProps {
+    /**
+     * Minimum value
+     */
+    min?: number;
+    /**
+     * Maximum value
+     */
+    max?: number;
+    /**
+     * Step increment
+     */
+    step?: number;
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Callback when the value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Number of evenly-spaced tick marks to render below the track
+     */
+    ticks?: number;
+    /**
+     * Label for the slider
+     */
+    label?: string;
+    /**
+     * ID for the input element
+     */
+    id?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Slider renders a styled range input with optional tick marks
+ */
+export declare const Slider: React.FC<SliderProps>;

package/dist/types/components/Slider/Slider.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Slider").SliderProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithTicks: Story;

package/dist/types/components/Slider/Slider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';

package/dist/types/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './Switch.css';
+export interface SwitchProps {
+    /**
+     * Whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Callback when switch state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label for the switch
+     */
+    label?: string;
+    /**
+     * ID for the input element
+     */
+    id?: string;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Switch: React.FC<SwitchProps>;

package/dist/types/components/Switch/Switch.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Switch").SwitchProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const WithoutLabel: Story;

package/dist/types/components/Switch/Switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';

package/dist/types/components/TOC/TOC.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './TOC.css';
+export interface TOCProps {
+    /**
+     * TOCItem elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export interface TOCItemProps {
+    /**
+     * Anchor target
+     */
+    href: string;
+    /**
+     * Item label
+     */
+    children: React.ReactNode;
+    /**
+     * Marks this item as the currently active section
+     */
+    active?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * TOC renders a sticky table-of-contents list with a vertical rail.
+ * Active-section highlighting is CSS-only (the `active` prop) — scroll-spy
+ * tracking is left to the consumer.
+ */
+export declare const TOC: React.FC<TOCProps>;
+export declare const TOCItem: React.FC<TOCItemProps>;

package/dist/types/components/TOC/TOC.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./TOC").TOCProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/TOC/TOC.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/TOC/index.d.ts

@@ -0,0 +1,2 @@
+export { TOC, TOCItem } from './TOC';
+export type { TOCProps, TOCItemProps } from './TOC';

package/dist/types/components/Table/Table.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Table.css';
+export interface TableProps {
+    /**
+     * thead/tbody content
+     */
+    children: React.ReactNode;
+    /**
+     * Splits each row into equal-width quarter columns, center-aligning
+     * the first column's content
+     */
+    quarters?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Table: React.FC<TableProps>;
+export interface TableRowProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableRow: React.FC<TableRowProps>;
+export interface TableHeaderCellProps {
+    children: React.ReactNode;
+    scope?: 'col' | 'row';
+    className?: string;
+}
+export declare const TableHeaderCell: React.FC<TableHeaderCellProps>;
+export interface TableCellProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const TableCell: React.FC<TableCellProps>;

package/dist/types/components/Table/Table.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Table").TableProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Quarters: Story;

package/dist/types/components/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table, TableRow, TableHeaderCell, TableCell } from './Table';
+export type { TableProps, TableRowProps, TableHeaderCellProps, TableCellProps } from './Table';

package/dist/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Tabs.css';
+export interface Tab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+export interface TabsProps {
+    /**
+     * Array of tab items
+     */
+    tabs: Tab[];
+    /**
+     * Default active tab ID
+     */
+    defaultActiveId?: string;
+    /**
+     * Callback when tab changes
+     */
+    onChange?: (tabId: string) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;

package/dist/types/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Tabs").TabsProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManyTabs: Story;
+export declare const DefaultActive: Story;

package/dist/types/components/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, Tab } from './Tabs';

package/dist/types/components/ThemeProvider/ThemeContext.d.ts

@@ -0,0 +1,8 @@
+export type Theme = 'eg' | 'materialandhome' | 'midwest-husbands';
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextType | undefined>;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/types/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type Theme } from './ThemeContext';
+export type { Theme };
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    forceTheme?: boolean;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/dist/types/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./ThemeProvider").ThemeProviderProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ComponentShowcase: Story;

package/dist/types/components/ThemeProvider/ThemeProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/ThemeProvider/ThemeSwitcher.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './ThemeSwitcher.css';
+export interface ThemeSwitcherProps {
+    /**
+     * Display as slider, buttons, or dropdown
+     */
+    variant?: 'slider' | 'buttons' | 'dropdown';
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;

package/dist/types/components/ThemeProvider/index.d.ts

@@ -0,0 +1,6 @@
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { useTheme } from './ThemeContext';
+export type { Theme } from './ThemeContext';
+export { ThemeSwitcher } from './ThemeSwitcher';
+export type { ThemeSwitcherProps } from './ThemeSwitcher';

package/dist/types/components/Timeline/Timeline.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import './Timeline.css';
+export interface TimelineProps {
+    /**
+     * TimelineItem elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export interface TimelineItemProps {
+    /**
+     * Item content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional timestamp shown to the right
+     */
+    timestamp?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Timeline renders a vertical list of connected events
+ */
+export declare const Timeline: React.FC<TimelineProps>;
+export declare const TimelineItem: React.FC<TimelineItemProps>;

package/dist/types/components/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Timeline").TimelineProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/Timeline/Timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { Timeline, TimelineItem } from './Timeline';
+export type { TimelineProps, TimelineItemProps } from './Timeline';

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Tooltip.css';
+export interface TooltipProps {
+    /**
+     * Tooltip text
+     */
+    content: React.ReactNode;
+    /**
+     * Element that triggers the tooltip on hover/focus
+     */
+    children: React.ReactElement;
+    /**
+     * Which side of the trigger the tooltip appears on
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Tooltip component. Not present on any live site yet — a minimal,
+ * CSS-only implementation consistent with the rest of the token system.
+ */
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/types/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Tooltip").TooltipProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        position: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Right: Story;

package/dist/types/components/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';

package/dist/types/components/index.d.ts

@@ -0,0 +1,25 @@
+export * from './Button';
+export * from './Card';
+export * from './Input';
+export * from './Badge';
+export * from './Modal';
+export * from './Tabs';
+export * from './Accordion';
+export * from './Switch';
+export * from './Radio';
+export * from './ThemeProvider';
+export * from './Pagination';
+export * from './Icon';
+export * from './Tooltip';
+export * from './DescriptionList';
+export * from './Timeline';
+export * from './Carousel';
+export * from './List';
+export * from './Nav';
+export * from './Article';
+export * from './Feature';
+export * from './TOC';
+export * from './Slider';
+export * from './Table';
+export * from './Menu';
+export * from './Link';

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/types/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@edwardguerra/design-system",
+  "version": "1.0.0",
+  "description": "Design tokens and React components shared across Edward Guerra, Material and Home, and Midwest Husbands",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./tokens.css": "./dist/css/tokens.css",
+    "./brand-themes.css": "./dist/css/main.css",
+    "./components.css": "./dist/style.css",
+    "./dist/*": "./dist/*",
+    "./tokens/*": "./tokens/*"
+  },
+  "files": [
+    "dist",
+    "tokens",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "npm run build:tokens && npm run build:css && npm run build:components && npm run build:types",
+    "build:tokens": "node scripts/build-tokens.js",
+    "build:css": "sass src/styles:dist/css --no-source-map",
+    "build:components": "tsc && vite build",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --declarationMap false --outDir dist/types",
+    "prepublishOnly": "npm run build && npm run test -- --run",
+    "dev": "vite",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,css,scss}\"",
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edwardguerra/design-system.git"
+  },
+  "keywords": [
+    "design-system",
+    "components",
+    "ui",
+    "tokens"
+  ],
+  "author": "Edward Guerra",
+  "license": "MIT",
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "^7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/blocks": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-vite": "^7.6.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5",
+    "storybook": "^7.6.0",
+    "style-dictionary": "^3.9.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vitest": "^1.0.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}

package/tokens/brands/edward-guerra.json

@@ -0,0 +1,9 @@
+{
+  "edward-guerra": {
+    "brand": {
+      "primary": { "value": "{color.blue.700}", "type": "color" },
+      "secondary": { "value": "{color.blue.900}", "type": "color" },
+      "tint": { "value": "{color.blue.50}", "type": "color" }
+    }
+  }
+}