@gnl-org/base-design-system 0.1.0

package/README.md

@@ -0,0 +1,48 @@
+# @base/design-system
+
+A reusable React design system with theme, colors, spacers, sizes, corner radius, fonts, and components (Button, Card, Typography, Checkbox, Radio, etc).
+
+## Installation
+
+```sh
+npm install @base/design-system
+```
+
+## Usage
+
+```tsx
+import { Button, Card, Typography, Checkbox, Radio, theme } from '@base/design-system';
+
+export default function Example() {
+  return (
+    <Card>
+      <Typography variant="h1">Hello Design System</Typography>
+      <Button variant="primary">Click me</Button>
+      <Checkbox label="Accept terms" />
+      <Radio label="Option 1" name="group" />
+    </Card>
+  );
+}
+```
+
+## Theming
+
+All theme values (colors, spacers, sizes, fonts, etc) are exported from the `theme` object. You can use or override them as needed.
+
+## Components
+- **Button**: Variants: primary, secondary, outline, ghost. Sizes: sm, md, lg.
+- **Card**: Variants: elevated, outlined, flat.
+- **Typography**: Variants: display, h1, h2, h3, h4, body, caption.
+- **Checkbox**: Custom styled checkbox.
+- **Radio**: Custom styled radio.
+
+## Development
+
+- `npm run build` — Build the library to `dist/`
+- `npm publish` — Publish to npm (after build)
+
+## Example App
+See the `example/` folder for a sample React app using this design system.
+
+---
+MIT License

package/components/Button.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  fullWidth?: boolean;
+};
+
+const sizeStyles = {
+  sm: {
+    padding: `${theme.spacers.sm}px ${theme.spacers.md}px`,
+    fontSize: theme.fonts.size.sm,
+  },
+  md: {
+    padding: `${theme.spacers.md}px ${theme.spacers.lg}px`,
+    fontSize: theme.fonts.size.md,
+  },
+  lg: {
+    padding: `${theme.spacers.lg}px ${theme.spacers.xl}px`,
+    fontSize: theme.fonts.size.lg,
+  },
+};
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  className,
+  style,
+  ...props
+}) => {
+  const baseStyle: React.CSSProperties = {
+    borderRadius: theme.cornerRadius.md,
+    fontFamily: theme.fonts.family.sans,
+    fontWeight: theme.fonts.weight.medium,
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background 0.2s, color 0.2s',
+    width: fullWidth ? '100%' : undefined,
+    ...sizeStyles[size],
+  };
+
+  const variants: Record<string, React.CSSProperties> = {
+    primary: {
+      background: theme.colors.primary,
+      color: '#fff',
+    },
+    secondary: {
+      background: theme.colors.secondary,
+      color: '#fff',
+    },
+    outline: {
+      background: 'transparent',
+      color: theme.colors.primary,
+      border: `1px solid ${theme.colors.primary}`,
+    },
+    ghost: {
+      background: 'transparent',
+      color: theme.colors.primary,
+    },
+  };
+
+  return (
+    <button
+      className={classNames('ds-btn', className)}
+      style={{ ...baseStyle, ...variants[variant], ...style }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/components/Card.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: 'elevated' | 'outlined' | 'flat';
+};
+
+export const Card: React.FC<CardProps> = ({
+  children,
+  variant = 'elevated',
+  className,
+  style,
+  ...props
+}) => {
+  const baseStyle: React.CSSProperties = {
+    background: theme.colors.surface,
+    borderRadius: theme.cornerRadius.lg,
+    padding: theme.spacers.lg,
+    boxSizing: 'border-box',
+    boxShadow:
+      variant === 'elevated'
+        ? '0 2px 8px rgba(0,0,0,0.08)'
+        : undefined,
+    border:
+      variant === 'outlined'
+        ? `1px solid ${theme.colors.border}`
+        : undefined,
+  };
+
+  return (
+    <div className={classNames('ds-card', className)} style={{ ...baseStyle, ...style }} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;

package/components/Checkbox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+};
+
+export const Checkbox: React.FC<CheckboxProps> = ({ label, className, style, ...props }) => {
+  return (
+    <label className={classNames('ds-checkbox-label', className)} style={{ display: 'inline-flex', alignItems: 'center', cursor: 'pointer', ...style }}>
+      <input
+        type="checkbox"
+        className="ds-checkbox"
+        style={{
+          width: theme.sizes.sm,
+          height: theme.sizes.sm,
+          borderRadius: theme.cornerRadius.sm,
+          border: `1.5px solid ${theme.colors.border}`,
+          accentColor: theme.colors.primary,
+          marginRight: theme.spacers.sm,
+        }}
+        {...props}
+      />
+      {label && <span style={{ fontFamily: theme.fonts.family.sans, fontSize: theme.fonts.size.md, color: theme.colors.text }}>{label}</span>}
+    </label>
+  );
+};
+
+export default Checkbox;

package/components/Radio.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+
+export type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+};
+
+export const Radio: React.FC<RadioProps> = ({ label, className, style, ...props }) => {
+  return (
+    <label className={classNames('ds-radio-label', className)} style={{ display: 'inline-flex', alignItems: 'center', cursor: 'pointer', ...style }}>
+      <input
+        type="radio"
+        className="ds-radio"
+        style={{
+          width: theme.sizes.sm,
+          height: theme.sizes.sm,
+          borderRadius: '50%',
+          border: `1.5px solid ${theme.colors.border}`,
+          accentColor: theme.colors.primary,
+          marginRight: theme.spacers.sm,
+        }}
+        {...props}
+      />
+      {label && <span style={{ fontFamily: theme.fonts.family.sans, fontSize: theme.fonts.size.md, color: theme.colors.text }}>{label}</span>}
+    </label>
+  );
+};
+
+export default Radio;

package/components/Typography.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+
+export type TypographyProps = React.HTMLAttributes<HTMLElement> & {
+  variant?: 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption';
+  as?: keyof JSX.IntrinsicElements;
+  weight?: 'regular' | 'medium' | 'bold';
+};
+
+const variantMap = {
+  display: { as: 'h1', fontSize: theme.fonts.size.display, fontWeight: theme.fonts.weight.bold },
+  h1: { as: 'h1', fontSize: theme.fonts.size.xxl, fontWeight: theme.fonts.weight.bold },
+  h2: { as: 'h2', fontSize: theme.fonts.size.xl, fontWeight: theme.fonts.weight.bold },
+  h3: { as: 'h3', fontSize: theme.fonts.size.lg, fontWeight: theme.fonts.weight.medium },
+  h4: { as: 'h4', fontSize: theme.fonts.size.md, fontWeight: theme.fonts.weight.medium },
+  body: { as: 'p', fontSize: theme.fonts.size.md, fontWeight: theme.fonts.weight.regular },
+  caption: { as: 'span', fontSize: theme.fonts.size.sm, fontWeight: theme.fonts.weight.regular },
+};
+
+export const Typography: React.FC<TypographyProps> = ({
+  children,
+  variant = 'body',
+  as,
+  weight,
+  className,
+  style,
+  ...props
+}) => {
+  const v = variantMap[variant];
+  const Tag = as || v.as;
+  return React.createElement(
+    Tag,
+    {
+      className: classNames('ds-typography', className),
+      style: {
+        fontFamily: theme.fonts.family.sans,
+        fontSize: v.fontSize,
+        fontWeight: weight ? theme.fonts.weight[weight] : v.fontWeight,
+        color: theme.colors.text,
+        margin: 0,
+        ...style,
+      },
+      ...props,
+    },
+    children
+  );
+};
+
+export default Typography;

package/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Card';
+export * from './Typography';
+export * from './Checkbox';
+export * from './Radio';

package/dist/components/Button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+};
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Button.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+const sizeStyles = {
+    sm: {
+        padding: `${theme.spacers.sm}px ${theme.spacers.md}px`,
+        fontSize: theme.fonts.size.sm,
+    },
+    md: {
+        padding: `${theme.spacers.md}px ${theme.spacers.lg}px`,
+        fontSize: theme.fonts.size.md,
+    },
+    lg: {
+        padding: `${theme.spacers.lg}px ${theme.spacers.xl}px`,
+        fontSize: theme.fonts.size.lg,
+    },
+};
+export const Button = ({ children, variant = 'primary', size = 'md', fullWidth = false, className, style, ...props }) => {
+    const baseStyle = {
+        borderRadius: theme.cornerRadius.md,
+        fontFamily: theme.fonts.family.sans,
+        fontWeight: theme.fonts.weight.medium,
+        border: 'none',
+        cursor: 'pointer',
+        transition: 'background 0.2s, color 0.2s',
+        width: fullWidth ? '100%' : undefined,
+        ...sizeStyles[size],
+    };
+    const variants = {
+        primary: {
+            background: theme.colors.primary,
+            color: '#fff',
+        },
+        secondary: {
+            background: theme.colors.secondary,
+            color: '#fff',
+        },
+        outline: {
+            background: 'transparent',
+            color: theme.colors.primary,
+            border: `1px solid ${theme.colors.primary}`,
+        },
+        ghost: {
+            background: 'transparent',
+            color: theme.colors.primary,
+        },
+    };
+    return (_jsx("button", { className: classNames('ds-btn', className), style: { ...baseStyle, ...variants[variant], ...style }, ...props, children: children }));
+};
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: 'elevated' | 'outlined' | 'flat';
+};
+export declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/components/Card.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+export const Card = ({ children, variant = 'elevated', className, style, ...props }) => {
+    const baseStyle = {
+        background: theme.colors.surface,
+        borderRadius: theme.cornerRadius.lg,
+        padding: theme.spacers.lg,
+        boxSizing: 'border-box',
+        boxShadow: variant === 'elevated'
+            ? '0 2px 8px rgba(0,0,0,0.08)'
+            : undefined,
+        border: variant === 'outlined'
+            ? `1px solid ${theme.colors.border}`
+            : undefined,
+    };
+    return (_jsx("div", { className: classNames('ds-card', className), style: { ...baseStyle, ...style }, ...props, children: children }));
+};
+export default Card;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+};
+export declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/Checkbox.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+export const Checkbox = ({ label, className, style, ...props }) => {
+    return (_jsxs("label", { className: classNames('ds-checkbox-label', className), style: { display: 'inline-flex', alignItems: 'center', cursor: 'pointer', ...style }, children: [_jsx("input", { type: "checkbox", className: "ds-checkbox", style: {
+                    width: theme.sizes.sm,
+                    height: theme.sizes.sm,
+                    borderRadius: theme.cornerRadius.sm,
+                    border: `1.5px solid ${theme.colors.border}`,
+                    accentColor: theme.colors.primary,
+                    marginRight: theme.spacers.sm,
+                }, ...props }), label && _jsx("span", { style: { fontFamily: theme.fonts.family.sans, fontSize: theme.fonts.size.md, color: theme.colors.text }, children: label })] }));
+};
+export default Checkbox;

package/dist/components/Radio.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type RadioProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string;
+};
+export declare const Radio: React.FC<RadioProps>;
+export default Radio;

package/dist/components/Radio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+export const Radio = ({ label, className, style, ...props }) => {
+    return (_jsxs("label", { className: classNames('ds-radio-label', className), style: { display: 'inline-flex', alignItems: 'center', cursor: 'pointer', ...style }, children: [_jsx("input", { type: "radio", className: "ds-radio", style: {
+                    width: theme.sizes.sm,
+                    height: theme.sizes.sm,
+                    borderRadius: '50%',
+                    border: `1.5px solid ${theme.colors.border}`,
+                    accentColor: theme.colors.primary,
+                    marginRight: theme.spacers.sm,
+                }, ...props }), label && _jsx("span", { style: { fontFamily: theme.fonts.family.sans, fontSize: theme.fonts.size.md, color: theme.colors.text }, children: label })] }));
+};
+export default Radio;

package/dist/components/Typography.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TypographyProps = React.HTMLAttributes<HTMLElement> & {
+    variant?: 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption';
+    as?: keyof JSX.IntrinsicElements;
+    weight?: 'regular' | 'medium' | 'bold';
+};
+export declare const Typography: React.FC<TypographyProps>;
+export default Typography;

package/dist/components/Typography.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { theme } from '../utils/theme';
+import { classNames } from '../utils/classNames';
+const variantMap = {
+    display: { as: 'h1', fontSize: theme.fonts.size.display, fontWeight: theme.fonts.weight.bold },
+    h1: { as: 'h1', fontSize: theme.fonts.size.xxl, fontWeight: theme.fonts.weight.bold },
+    h2: { as: 'h2', fontSize: theme.fonts.size.xl, fontWeight: theme.fonts.weight.bold },
+    h3: { as: 'h3', fontSize: theme.fonts.size.lg, fontWeight: theme.fonts.weight.medium },
+    h4: { as: 'h4', fontSize: theme.fonts.size.md, fontWeight: theme.fonts.weight.medium },
+    body: { as: 'p', fontSize: theme.fonts.size.md, fontWeight: theme.fonts.weight.regular },
+    caption: { as: 'span', fontSize: theme.fonts.size.sm, fontWeight: theme.fonts.weight.regular },
+};
+export const Typography = ({ children, variant = 'body', as, weight, className, style, ...props }) => {
+    const v = variantMap[variant];
+    const Tag = as || v.as;
+    return React.createElement(Tag, {
+        className: classNames('ds-typography', className),
+        style: {
+            fontFamily: theme.fonts.family.sans,
+            fontSize: v.fontSize,
+            fontWeight: weight ? theme.fonts.weight[weight] : v.fontWeight,
+            color: theme.colors.text,
+            margin: 0,
+            ...style,
+        },
+        ...props,
+    }, children);
+};
+export default Typography;

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Card';
+export * from './Typography';
+export * from './Checkbox';
+export * from './Radio';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Card';
+export * from './Typography';
+export * from './Checkbox';
+export * from './Radio';

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/theme/colors.d.ts

@@ -0,0 +1,15 @@
+export declare const colors: {
+    primary: string;
+    primaryDark: string;
+    secondary: string;
+    secondaryDark: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    background: string;
+    surface: string;
+    border: string;
+    text: string;
+    muted: string;
+};

package/dist/theme/colors.js

@@ -0,0 +1,16 @@
+// Color palette for the design system
+export const colors = {
+    primary: '#2563eb',
+    primaryDark: '#1e40af',
+    secondary: '#f59e42',
+    secondaryDark: '#b45309',
+    success: '#22c55e',
+    error: '#ef4444',
+    warning: '#facc15',
+    info: '#0ea5e9',
+    background: '#ffffff',
+    surface: '#f3f4f6',
+    border: '#e5e7eb',
+    text: '#111827',
+    muted: '#6b7280',
+};

package/dist/theme/cornerRadius.d.ts

@@ -0,0 +1,9 @@
+export declare const cornerRadius: {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    pill: number;
+    circle: string;
+};

package/dist/theme/cornerRadius.js

@@ -0,0 +1,10 @@
+// Corner radius values
+export const cornerRadius = {
+    none: 0,
+    sm: 2,
+    md: 4,
+    lg: 8,
+    xl: 16,
+    pill: 9999,
+    circle: '50%',
+};

package/dist/theme/fonts.d.ts

@@ -0,0 +1,20 @@
+export declare const fonts: {
+    family: {
+        sans: string;
+        mono: string;
+    };
+    size: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        display: number;
+    };
+    weight: {
+        regular: number;
+        medium: number;
+        bold: number;
+    };
+};

package/dist/theme/fonts.js

@@ -0,0 +1,21 @@
+// Font families and sizes
+export const fonts = {
+    family: {
+        sans: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
+        mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+    size: {
+        xs: 12,
+        sm: 14,
+        md: 16,
+        lg: 20,
+        xl: 24,
+        xxl: 32,
+        display: 48,
+    },
+    weight: {
+        regular: 400,
+        medium: 500,
+        bold: 700,
+    },
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './spacers';
+export * from './sizes';
+export * from './cornerRadius';
+export * from './fonts';

package/dist/theme/index.js

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './spacers';
+export * from './sizes';
+export * from './cornerRadius';
+export * from './fonts';

package/dist/theme/sizes.d.ts

@@ -0,0 +1,9 @@
+export declare const sizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    full: string;
+};

package/dist/theme/sizes.js

@@ -0,0 +1,10 @@
+// Sizing scale for width, height, etc.
+export const sizes = {
+    xs: 16,
+    sm: 24,
+    md: 32,
+    lg: 48,
+    xl: 64,
+    xxl: 96,
+    full: '100%',
+};

package/dist/theme/spacers.d.ts

@@ -0,0 +1,9 @@
+export declare const spacers: {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};

package/dist/theme/spacers.js

@@ -0,0 +1,10 @@
+// Spacing scale for consistent paddings and margins
+export const spacers = {
+    none: 0,
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 48,
+};

package/dist/utils/classNames.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...args: (string | undefined | false | null)[]): string;

package/dist/utils/classNames.js

@@ -0,0 +1,4 @@
+// Utility to join class names conditionally
+export function classNames(...args) {
+    return args.filter(Boolean).join(' ');
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './classNames';
+export * from './styleHelpers';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './classNames';
+export * from './styleHelpers';

package/dist/utils/styleHelpers.d.ts

@@ -0,0 +1,2 @@
+export declare function px(val: number | string): string;
+export declare function rem(val: number): string;

package/dist/utils/styleHelpers.js

@@ -0,0 +1,7 @@
+// Helpers for inline style generation
+export function px(val) {
+    return typeof val === 'number' ? `${val}px` : val;
+}
+export function rem(val) {
+    return `${val / 16}rem`;
+}

package/dist/utils/theme.d.ts

@@ -0,0 +1,64 @@
+export declare const theme: {
+    colors: {
+        primary: string;
+        primaryDark: string;
+        secondary: string;
+        secondaryDark: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+        background: string;
+        surface: string;
+        border: string;
+        text: string;
+        muted: string;
+    };
+    spacers: {
+        none: number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+    sizes: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+        full: string;
+    };
+    cornerRadius: {
+        none: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        pill: number;
+        circle: string;
+    };
+    fonts: {
+        family: {
+            sans: string;
+            mono: string;
+        };
+        size: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            xxl: number;
+            display: number;
+        };
+        weight: {
+            regular: number;
+            medium: number;
+            bold: number;
+        };
+    };
+};

package/dist/utils/theme.js

@@ -0,0 +1,13 @@
+// Utility to get theme values
+import { colors } from '../theme/colors';
+import { spacers } from '../theme/spacers';
+import { sizes } from '../theme/sizes';
+import { cornerRadius } from '../theme/cornerRadius';
+import { fonts } from '../theme/fonts';
+export const theme = {
+    colors,
+    spacers,
+    sizes,
+    cornerRadius,
+    fonts,
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@gnl-org/base-design-system",
+  "version": "0.1.0",
+  "description": "A reusable React design system with theme, colors, spacers, sizes, corner radius, fonts, and components.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "theme", "components", "utils"],
+  "scripts": {
+    "build": "tsc --project tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
+  },
+  "keywords": ["react", "design-system", "ui", "components", "theme"],
+  "author": "Your Name",
+  "license": "MIT"
+}

package/theme/colors.ts

@@ -0,0 +1,16 @@
+// Color palette for the design system
+export const colors = {
+  primary: '#2563eb',
+  primaryDark: '#1e40af',
+  secondary: '#f59e42',
+  secondaryDark: '#b45309',
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#facc15',
+  info: '#0ea5e9',
+  background: '#ffffff',
+  surface: '#f3f4f6',
+  border: '#e5e7eb',
+  text: '#111827',
+  muted: '#6b7280',
+};

package/theme/cornerRadius.ts

@@ -0,0 +1,10 @@
+// Corner radius values
+export const cornerRadius = {
+  none: 0,
+  sm: 2,
+  md: 4,
+  lg: 8,
+  xl: 16,
+  pill: 9999,
+  circle: '50%',
+};

package/theme/fonts.ts

@@ -0,0 +1,21 @@
+// Font families and sizes
+export const fonts = {
+  family: {
+    sans: 'Inter, system-ui, Avenir, Helvetica, Arial, sans-serif',
+    mono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  },
+  size: {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 20,
+    xl: 24,
+    xxl: 32,
+    display: 48,
+  },
+  weight: {
+    regular: 400,
+    medium: 500,
+    bold: 700,
+  },
+};

package/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './spacers';
+export * from './sizes';
+export * from './cornerRadius';
+export * from './fonts';

package/theme/sizes.ts

@@ -0,0 +1,10 @@
+// Sizing scale for width, height, etc.
+export const sizes = {
+  xs: 16,
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64,
+  xxl: 96,
+  full: '100%',
+};

package/theme/spacers.ts

@@ -0,0 +1,10 @@
+// Spacing scale for consistent paddings and margins
+export const spacers = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+};

package/utils/classNames.ts

@@ -0,0 +1,4 @@
+// Utility to join class names conditionally
+export function classNames(...args: (string | undefined | false | null)[]): string {
+  return args.filter(Boolean).join(' ');
+}

package/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './classNames';
+export * from './styleHelpers';

package/utils/styleHelpers.ts

@@ -0,0 +1,8 @@
+// Helpers for inline style generation
+export function px(val: number | string) {
+  return typeof val === 'number' ? `${val}px` : val;
+}
+
+export function rem(val: number) {
+  return `${val / 16}rem`;
+}

package/utils/theme.ts

@@ -0,0 +1,14 @@
+// Utility to get theme values
+import { colors } from '../theme/colors';
+import { spacers } from '../theme/spacers';
+import { sizes } from '../theme/sizes';
+import { cornerRadius } from '../theme/cornerRadius';
+import { fonts } from '../theme/fonts';
+
+export const theme = {
+  colors,
+  spacers,
+  sizes,
+  cornerRadius,
+  fonts,
+};