@edwardguerra/design-system 1.0.0

package/dist/tokens/variables.css

@@ -0,0 +1,318 @@
+:root {
+
+  /* BORDERWIDTH */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  /* BREAKPOINT */
+  --breakpoint-xs: 20em;
+  --breakpoint-md: 46.5em;
+  --breakpoint-lg: 64em;
+  --breakpoint-xl: 100em;
+  --breakpoint-2xl: 120em;
+
+  /* BUTTON */
+  --button-primary-background: #0482c5;
+  --button-primary-background-hover: #05679f;
+  --button-primary-background-active: #095883;
+  --button-primary-text: #ffffff;
+  --button-primary-border-radius: 1rem;
+  --button-primary-padding-x: 1.5rem;
+  --button-primary-padding-y: 0.75rem;
+  --button-primary-font-size: 1rem;
+  --button-primary-font-weight: 500;
+  --button-secondary-background: #e7e7e7;
+  --button-secondary-background-hover: #d1d1d1;
+  --button-secondary-background-active: #b0b0b0;
+  --button-secondary-text: #3d3d3d;
+  --button-secondary-border-radius: 1rem;
+  --button-secondary-padding-x: 1.5rem;
+  --button-secondary-padding-y: 0.75rem;
+  --button-secondary-font-size: 1rem;
+  --button-secondary-font-weight: 500;
+  --button-danger-background: #c04242;
+  --button-danger-background-hover: #973131;
+  --button-danger-background-active: #862e2e;
+  --button-danger-text: #ffffff;
+  --button-danger-border-radius: 1rem;
+  --button-danger-padding-x: 1.5rem;
+  --button-danger-padding-y: 0.75rem;
+  --button-danger-font-size: 1rem;
+  --button-danger-font-weight: 500;
+
+  /* COLOR */
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f6f6f6;
+  --color-neutral-100: #e7e7e7;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
+  --color-neutral-600: #5d5d5d;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
+  --color-neutral-950: #1a1a1a;
+  --color-neutral-1000: #000000;
+  --color-blue-50: #f0f9ff;
+  --color-blue-100: #e0f2fe;
+  --color-blue-200: #bbe6fc;
+  --color-blue-300: #7fd1fa;
+  --color-blue-400: #3abbf6;
+  --color-blue-500: #11a3e6;
+  --color-blue-600: #0482c5;
+  --color-blue-700: #05679f;
+  --color-blue-800: #095883;
+  --color-blue-900: #0d4a6d;
+  --color-blue-950: #0b3a5a;
+  --color-brown-50: #f5f4f1;
+  --color-brown-100: #e5e3dc;
+  --color-brown-200: #cdcabb;
+  --color-brown-300: #b1aa93;
+  --color-brown-400: #9a9175;
+  --color-brown-500: #8b8067;
+  --color-brown-600: #776b57;
+  --color-brown-700: #605548;
+  --color-brown-800: #534940;
+  --color-brown-900: #39322d;
+  --color-brown-950: #29221f;
+  --color-teal-50: #f4f9f8;
+  --color-teal-100: #daedea;
+  --color-teal-200: #b4dbd5;
+  --color-teal-300: #87c1bb;
+  --color-teal-400: #5ea39e;
+  --color-teal-500: #448884;
+  --color-teal-600: #336967;
+  --color-teal-700: #2d5856;
+  --color-teal-800: #284747;
+  --color-teal-900: #243d3c;
+  --color-teal-950: #112122;
+  --color-green-50: #f9f8ec;
+  --color-green-100: #f1efd6;
+  --color-green-200: #e4e1b2;
+  --color-green-300: #d1cf85;
+  --color-green-400: #bdbc5e;
+  --color-green-500: #a1a240;
+  --color-green-600: #909236;
+  --color-green-700: #616328;
+  --color-green-800: #4e5024;
+  --color-green-900: #434522;
+  --color-green-950: #23250e;
+  --color-red-50: #fcf4f4;
+  --color-red-100: #fae6e6;
+  --color-red-200: #f6d2d2;
+  --color-red-300: #efb2b2;
+  --color-red-400: #e38686;
+  --color-red-500: #d55e5e;
+  --color-red-600: #c04242;
+  --color-red-700: #973131;
+  --color-red-800: #862e2e;
+  --color-red-900: #702c2c;
+  --color-red-950: #3c1313;
+  --color-yellow-50: #fffeea;
+  --color-yellow-100: #fffac5;
+  --color-yellow-200: #fff585;
+  --color-yellow-300: #ffe946;
+  --color-yellow-400: #ffd91b;
+  --color-yellow-500: #ffba05;
+  --color-yellow-600: #e28e00;
+  --color-yellow-700: #bb6402;
+  --color-yellow-800: #984d08;
+  --color-yellow-900: #7c3f0b;
+  --color-yellow-950: #482000;
+  --color-burnt-50: #fdf5ef;
+  --color-burnt-100: #fae8da;
+  --color-burnt-200: #f4ceb4;
+  --color-burnt-300: #ecad85;
+  --color-burnt-400: #e38254;
+  --color-burnt-500: #dd6434;
+  --color-burnt-600: #ce4c28;
+  --color-burnt-700: #ab3923;
+  --color-burnt-800: #892f23;
+  --color-burnt-900: #6f291f;
+  --color-burnt-950: #3c120e;
+  --color-berry-50: #fbf4f8;
+  --color-berry-100: #f7ecf2;
+  --color-berry-200: #f1d9e8;
+  --color-berry-300: #e7bad3;
+  --color-berry-400: #d88eb7;
+  --color-berry-500: #c86c9b;
+  --color-berry-600: #b44e7e;
+  --color-berry-700: #9a3c65;
+  --color-berry-800: #803455;
+  --color-berry-900: #6c2f4a;
+  --color-berry-950: #0e070a;
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+  --color-white-5: rgba(255, 255, 255, 0.05);
+  --color-white-10: rgba(255, 255, 255, 0.1);
+  --color-white-20: rgba(255, 255, 255, 0.2);
+  --color-white-40: rgba(255, 255, 255, 0.4);
+  --color-white-60: rgba(255, 255, 255, 0.6);
+  --color-white-80: rgba(255, 255, 255, 0.8);
+  --color-black-5: rgba(0, 0, 0, 0.05);
+  --color-black-10: rgba(0, 0, 0, 0.1);
+  --color-black-20: rgba(0, 0, 0, 0.2);
+  --color-black-40: rgba(0, 0, 0, 0.4);
+  --color-black-60: rgba(0, 0, 0, 0.6);
+  --color-black-80: rgba(0, 0, 0, 0.8);
+
+  /* EDWARD-GUERRA */
+  --edward-guerra-brand-primary: #05679f;
+  --edward-guerra-brand-secondary: #0d4a6d;
+  --edward-guerra-brand-tint: #f0f9ff;
+
+  /* FONT */
+  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-family-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  --font-size-2xs: 0.5rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  --font-size-5xl: 3rem;
+  --font-size-responsive: 8rem;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-line-height-tight: 1.25;
+  --font-line-height-normal: 1.5;
+  --font-line-height-relaxed: 1.75;
+  --font-line-height-loose: 2;
+
+  /* MATERIALANDHOME */
+  --materialandhome-brand-primary: #B25D3E;
+  --materialandhome-brand-secondary: #8c4530;
+  --materialandhome-brand-tint: #f5e8e2;
+
+  /* MIDWEST-HUSBANDS */
+  --midwest-husbands-brand-primary: #2d5856;
+  --midwest-husbands-brand-secondary: #243d3c;
+  --midwest-husbands-brand-tint: #f4f9f8;
+
+  /* RADIUS */
+  --radius-none: 0;
+  --radius-sm: 0.5rem;
+  --radius-md: 1rem;
+  --radius-lg: 2rem;
+  --radius-full: 9999px;
+
+  /* SHADOW */
+  --shadow-sm: 0 2rem 2rem rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 3.125rem 6.25rem -1.25rem rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+
+  /* SPACING */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-56: 14rem;
+  --spacing-64: 16rem;
+  --spacing-96: 24rem;
+  --spacing-120: 30rem;
+
+  /* THEME */
+  --theme-background-primary: #ffffff;
+  --theme-background-secondary: #f6f6f6;
+  --theme-background-tertiary: #e7e7e7;
+  --theme-text-primary: #3d3d3d;
+  --theme-text-secondary: #4f4f4f;
+  --theme-text-tertiary: #6d6d6d;
+  --theme-text-inverse: #ffffff;
+  --theme-border-default: #d1d1d1;
+  --theme-border-strong: #888888;
+  --theme-border-subtle: #e7e7e7;
+  --theme-status-success: #909236;
+  --theme-status-warning: #e28e00;
+  --theme-status-error: #c04242;
+  --theme-status-info: #0482c5;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import './Accordion.css';
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    /**
+     * Array of accordion items
+     */
+    items: AccordionItem[];
+    /**
+     * Allow multiple items to be open at once
+     */
+    allowMultiple?: boolean;
+    /**
+     * Default open item IDs
+     */
+    defaultOpenIds?: string[];
+    /**
+     * Small variant (smaller text)
+     */
+    small?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;

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

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

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

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

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

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItem } from './Accordion';

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Article.css';
+export interface ArticleProps {
+    /**
+     * Main content (title, meta, description)
+     */
+    children: React.ReactNode;
+    /**
+     * Optional thumbnail image/icon shown alongside the content
+     */
+    thumbnail?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Article renders a horizontal row for an article list entry:
+ * optional thumbnail plus content, with a hover tint
+ */
+export declare const Article: React.FC<ArticleProps>;

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Badge.css';
+export interface BadgeProps {
+    /**
+     * Badge content
+     */
+    children: React.ReactNode;
+    /**
+     * Badge variant
+     */
+    variant?: 'default' | 'critical';
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Badge component for labels, status indicators, and counts
+ */
+export declare const Badge: React.FC<BadgeProps>;

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

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Badge").BadgeProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Critical: Story;
+export declare const AllVariants: Story;

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

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

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

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

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import './Button.css';
+export interface ButtonProps {
+    /**
+     * Button variant
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
+    /**
+     * Button is filled (modifier)
+     */
+    filled?: boolean;
+    /**
+     * Icon-only button (no text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Is the button in loading state?
+     */
+    loading?: boolean;
+    /**
+     * Button contents
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Full width button
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display before text
+     */
+    iconBefore?: React.ReactNode;
+    /**
+     * Icon to display after text
+     */
+    iconAfter?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;

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

@@ -0,0 +1,43 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Button").ButtonProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        loading: {
+            control: string;
+            description: string;
+        };
+        fullWidth: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const Filled: Story;
+export declare const IconOnly: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const FullWidth: Story;

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

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

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

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

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps {
+    /**
+     * Card variant
+     */
+    variant?: 'elevated' | 'outlined' | 'filled';
+    /**
+     * Card padding size
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Card children
+     */
+    children: React.ReactNode;
+    /**
+     * Optional click handler - makes card interactive
+     */
+    onClick?: () => void;
+    /**
+     * Card className for additional styling
+     */
+    className?: string;
+}
+/**
+ * Card component for containing content
+ */
+export declare const Card: React.FC<CardProps>;
+export interface CardHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CardHeader: React.FC<CardHeaderProps>;
+export interface CardBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CardBody: React.FC<CardBodyProps>;
+export interface CardFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CardFooter: React.FC<CardFooterProps>;

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./Card").CardProps>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+        };
+        padding: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Elevated: Story;
+export declare const Outlined: Story;
+export declare const Filled: Story;
+export declare const Interactive: Story;
+export declare const NoPadding: Story;

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

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

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

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Carousel.css';
+export interface CarouselProps {
+    /**
+     * CarouselSlide elements
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+export interface CarouselSlideProps {
+    /**
+     * Slide content
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+/**
+ * Carousel renders a horizontally scrollable, snap-aligned row of slides
+ */
+export declare const Carousel: React.FC<CarouselProps>;
+export declare const CarouselSlide: React.FC<CarouselSlideProps>;

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

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

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

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