albertodela-design-system 1.0.1

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface BadgeProps {
+    variant?: BadgeVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export default Badge;

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface CardProps {
+    title?: string;
+    description?: string;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Card: React.FC<CardProps>;
+export default Card;

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+export declare const Input: React.FC<InputProps>;
+export default Input;

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

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

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+export declare const Textarea: React.FC<TextareaProps>;
+export default Textarea;

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

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

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=({variant:s="primary",size:r="md",fullWidth:a=!1,className:t="",children:d,...n})=>{const c=["ds-btn",`ds-btn--${s}`,`ds-btn--${r}`,a?"ds-btn--full-width":"",t].filter(Boolean).join(" ");return e.jsx("button",{className:c,...n,children:d})},x=({variant:s="neutral",children:r,className:a=""})=>{const t=["ds-badge",`ds-badge--${s}`,a].filter(Boolean).join(" ");return e.jsx("span",{className:t,children:r})},p=({title:s,description:r,footer:a,children:t,className:d=""})=>{const n=["ds-card",d].filter(Boolean).join(" ");return e.jsxs("div",{className:n,children:[(s||r)&&e.jsxs("div",{className:"ds-card__header",children:[s&&e.jsx("h3",{className:"ds-card__title",children:s}),r&&e.jsx("p",{className:"ds-card__description",children:r})]}),t&&e.jsx("div",{className:"ds-card__body",children:t}),a&&e.jsx("div",{className:"ds-card__footer",children:a})]})},g=({label:s,error:r,hint:a,id:t,className:d="",...n})=>{const c=t||(s==null?void 0:s.toLowerCase().replace(/\s+/g,"-")),o=["ds-input",r?"ds-input--error":"",d].filter(Boolean).join(" ");return e.jsxs("div",{className:"ds-form-group",children:[s&&e.jsx("label",{className:"ds-form-label",htmlFor:c,children:s}),e.jsx("input",{id:c,className:o,...n}),r&&e.jsx("p",{className:"ds-form-error",children:r}),a&&!r&&e.jsx("p",{className:"ds-form-hint",children:a})]})},h=({label:s,error:r,hint:a,id:t,className:d="",...n})=>{const c=t||(s==null?void 0:s.toLowerCase().replace(/\s+/g,"-")),o=["ds-textarea",r?"ds-textarea--error":"",d].filter(Boolean).join(" ");return e.jsxs("div",{className:"ds-form-group",children:[s&&e.jsx("label",{className:"ds-form-label",htmlFor:c,children:s}),e.jsx("textarea",{id:c,className:o,...n}),r&&e.jsx("p",{className:"ds-form-error",children:r}),a&&!r&&e.jsx("p",{className:"ds-form-hint",children:a})]})},m={primary:"#2563eb",primaryHover:"#1d4ed8",primaryLight:"#dbeafe",success:"#16a34a",successLight:"#dcfce7",warning:"#ea580c",warningLight:"#fed7aa",error:"#dc2626",errorLight:"#fecaca",info:"#0891b2",infoLight:"#cffafe",neutral:{50:"#fafaf9",100:"#f5f5f4",200:"#e7e5e4",300:"#d6d3d1",400:"#a8a29e",500:"#78716c",600:"#57534e",700:"#44403c",800:"#292524",900:"#1c1917"},bgPage:"#fafaf9",bgSurface:"#ffffff",textPrimary:"#1c1917",textSecondary:"#57534e",textTertiary:"#78716c",borderSubtle:"#e7e5e4",borderDefault:"#d6d3d1"},i={1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",8:"2rem",10:"2.5rem",12:"3rem"},l={fontFamily:"'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem"},fontWeight:{light:300,normal:400,medium:500,semibold:600,bold:700}},f={sm:"0.25rem",md:"0.5rem",lg:"0.75rem",xl:"1rem"},j={colors:m,spacing:i,typography:l,borderRadius:f};exports.Badge=x;exports.Button=u;exports.Card=p;exports.Input=g;exports.Textarea=h;exports.borderRadius=f;exports.colors=m;exports.spacing=i;exports.tokens=j;exports.typography=l;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+export { Card } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { tokens, colors, spacing, typography, borderRadius } from './tokens';

package/dist/index.js

@@ -0,0 +1,148 @@
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+const h = ({
+  variant: e = "primary",
+  size: s = "md",
+  fullWidth: a = !1,
+  className: t = "",
+  children: d,
+  ...c
+}) => {
+  const n = [
+    "ds-btn",
+    `ds-btn--${e}`,
+    `ds-btn--${s}`,
+    a ? "ds-btn--full-width" : "",
+    t
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("button", { className: n, ...c, children: d });
+}, g = ({
+  variant: e = "neutral",
+  children: s,
+  className: a = ""
+}) => {
+  const t = ["ds-badge", `ds-badge--${e}`, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("span", { className: t, children: s });
+}, N = ({
+  title: e,
+  description: s,
+  footer: a,
+  children: t,
+  className: d = ""
+}) => {
+  const c = ["ds-card", d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: c, children: [
+    (e || s) && /* @__PURE__ */ o("div", { className: "ds-card__header", children: [
+      e && /* @__PURE__ */ r("h3", { className: "ds-card__title", children: e }),
+      s && /* @__PURE__ */ r("p", { className: "ds-card__description", children: s })
+    ] }),
+    t && /* @__PURE__ */ r("div", { className: "ds-card__body", children: t }),
+    a && /* @__PURE__ */ r("div", { className: "ds-card__footer", children: a })
+  ] });
+}, x = ({
+  label: e,
+  error: s,
+  hint: a,
+  id: t,
+  className: d = "",
+  ...c
+}) => {
+  const n = t || (e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")), m = ["ds-input", s ? "ds-input--error" : "", d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: "ds-form-group", children: [
+    e && /* @__PURE__ */ r("label", { className: "ds-form-label", htmlFor: n, children: e }),
+    /* @__PURE__ */ r("input", { id: n, className: m, ...c }),
+    s && /* @__PURE__ */ r("p", { className: "ds-form-error", children: s }),
+    a && !s && /* @__PURE__ */ r("p", { className: "ds-form-hint", children: a })
+  ] });
+}, y = ({
+  label: e,
+  error: s,
+  hint: a,
+  id: t,
+  className: d = "",
+  ...c
+}) => {
+  const n = t || (e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")), m = ["ds-textarea", s ? "ds-textarea--error" : "", d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: "ds-form-group", children: [
+    e && /* @__PURE__ */ r("label", { className: "ds-form-label", htmlFor: n, children: e }),
+    /* @__PURE__ */ r("textarea", { id: n, className: m, ...c }),
+    s && /* @__PURE__ */ r("p", { className: "ds-form-error", children: s }),
+    a && !s && /* @__PURE__ */ r("p", { className: "ds-form-hint", children: a })
+  ] });
+}, i = {
+  primary: "#2563eb",
+  primaryHover: "#1d4ed8",
+  primaryLight: "#dbeafe",
+  success: "#16a34a",
+  successLight: "#dcfce7",
+  warning: "#ea580c",
+  warningLight: "#fed7aa",
+  error: "#dc2626",
+  errorLight: "#fecaca",
+  info: "#0891b2",
+  infoLight: "#cffafe",
+  neutral: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917"
+  },
+  bgPage: "#fafaf9",
+  bgSurface: "#ffffff",
+  textPrimary: "#1c1917",
+  textSecondary: "#57534e",
+  textTertiary: "#78716c",
+  borderSubtle: "#e7e5e4",
+  borderDefault: "#d6d3d1"
+}, l = {
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem"
+}, f = {
+  fontFamily: "'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem"
+  },
+  fontWeight: {
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+}, p = {
+  sm: "0.25rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  xl: "1rem"
+}, b = { colors: i, spacing: l, typography: f, borderRadius: p };
+export {
+  g as Badge,
+  h as Button,
+  N as Card,
+  x as Input,
+  y as Textarea,
+  p as borderRadius,
+  i as colors,
+  l as spacing,
+  b as tokens,
+  f as typography
+};

package/dist/style.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Funnel+Sans:wght@300;400;500;600;700&display=swap";.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:500;border:1px solid transparent;border-radius:.5rem;cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}.ds-btn:disabled{opacity:.5;cursor:not-allowed}.ds-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}.ds-btn--primary:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8}.ds-btn--secondary{background:transparent;color:#1c1917;border-color:#d6d3d1}.ds-btn--secondary:hover:not(:disabled){background:#f5f5f4}.ds-btn--ghost{background:transparent;color:#57534e;border-color:transparent}.ds-btn--ghost:hover:not(:disabled){background:#f5f5f4;color:#1c1917}.ds-btn--sm{padding:.25rem .75rem;font-size:.75rem}.ds-btn--md{padding:.5rem 1rem;font-size:.875rem}.ds-btn--lg{padding:.75rem 1.5rem;font-size:1rem}.ds-btn--full-width{width:100%}.ds-badge{display:inline-flex;align-items:center;padding:.25rem .5rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem;font-weight:500;border-radius:.25rem;white-space:nowrap}.ds-badge--primary{background:#dbeafe;color:#2563eb}.ds-badge--success{background:#dcfce7;color:#16a34a}.ds-badge--warning{background:#fed7aa;color:#ea580c}.ds-badge--error{background:#fecaca;color:#dc2626}.ds-badge--info{background:#cffafe;color:#0891b2}.ds-badge--neutral{background:#f5f5f4;color:#44403c}.ds-card{background:#fff;border:1px solid #e7e5e4;border-radius:.75rem;padding:1.25rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ds-card__header{margin-bottom:1rem}.ds-card__title{font-size:1.125rem;font-weight:600;color:#1c1917;margin:0 0 .5rem}.ds-card__description{font-size:.875rem;color:#57534e;margin:0;line-height:1.6}.ds-card__body{font-size:.875rem;color:#57534e}.ds-card__footer{margin-top:1.25rem;padding-top:1rem;border-top:1px solid #e7e5e4}.ds-form-group{display:flex;flex-direction:column;gap:.5rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.ds-form-label{font-size:.875rem;font-weight:600;color:#57534e}.ds-input{width:100%;padding:.5rem .75rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.875rem;color:#1c1917;background:#fff;border:1px solid #d6d3d1;border-radius:.5rem;transition:border-color .2s;box-sizing:border-box}.ds-input:focus{outline:none;border-color:#2563eb}.ds-input::placeholder{color:#a8a29e}.ds-input:disabled{background:#f5f5f4;color:#a8a29e;cursor:not-allowed}.ds-input--error{border-color:#dc2626}.ds-form-error{font-size:.75rem;color:#dc2626;margin:0}.ds-form-hint{font-size:.75rem;color:#78716c;margin:0}.ds-textarea{width:100%;padding:.5rem .75rem;font-family:Funnel Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.875rem;color:#1c1917;background:#fff;border:1px solid #d6d3d1;border-radius:.5rem;transition:border-color .2s;resize:vertical;min-height:100px;box-sizing:border-box}.ds-textarea:focus{outline:none;border-color:#2563eb}.ds-textarea::placeholder{color:#a8a29e}.ds-textarea:disabled{background:#f5f5f4;color:#a8a29e;cursor:not-allowed}.ds-textarea--error{border-color:#dc2626}

package/dist/tokens/index.d.ts

@@ -0,0 +1,141 @@
+export declare const colors: {
+    primary: string;
+    primaryHover: string;
+    primaryLight: string;
+    success: string;
+    successLight: string;
+    warning: string;
+    warningLight: string;
+    error: string;
+    errorLight: string;
+    info: string;
+    infoLight: string;
+    neutral: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    bgPage: string;
+    bgSurface: string;
+    textPrimary: string;
+    textSecondary: string;
+    textTertiary: string;
+    borderSubtle: string;
+    borderDefault: string;
+};
+export declare const spacing: {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+};
+export declare const typography: {
+    fontFamily: string;
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+};
+export declare const borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const tokens: {
+    colors: {
+        primary: string;
+        primaryHover: string;
+        primaryLight: string;
+        success: string;
+        successLight: string;
+        warning: string;
+        warningLight: string;
+        error: string;
+        errorLight: string;
+        info: string;
+        infoLight: string;
+        neutral: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        bgPage: string;
+        bgSurface: string;
+        textPrimary: string;
+        textSecondary: string;
+        textTertiary: string;
+        borderSubtle: string;
+        borderDefault: string;
+    };
+    spacing: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            '4xl': string;
+        };
+        fontWeight: {
+            light: number;
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+    };
+    borderRadius: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};
+export default tokens;

package/guidelines/Guidelines.md

@@ -0,0 +1,27 @@
+# Design System – Alberto de la Puente
+
+This is a minimal and functional design system. Always use components from `@alberto-delapuente/design-system` when building UI.
+
+## Available components
+See `components.md` for detailed usage of each component.
+
+- **Button** – primary, secondary and ghost actions
+- **Badge** – status labels: primary, success, warning, error, info, neutral
+- **Card** – content containers with optional title, description and footer
+- **Input** – text inputs with label, hint and error states
+- **Textarea** – multiline inputs
+
+## Available tokens
+See `tokens.md` for all design tokens (colors, spacing, typography, border radius).
+
+## Setup
+```tsx
+import { Button, Badge, Card, Input, Textarea } from '@alberto-delapuente/design-system';
+import '@alberto-delapuente/design-system/dist/style.css';
+```
+
+## Design principles
+- Minimal – no decorative elements
+- Functional – colors have specific semantic purposes
+- Consistent – unified typography (Funnel Sans) and spacing (4px base)
+- Clean – clear visual hierarchy, no emojis

package/guidelines/components.md

@@ -0,0 +1,92 @@
+# Components
+
+## Button
+Variants: `primary` | `secondary` | `ghost`
+Sizes: `sm` | `md` | `lg`
+
+```tsx
+import { Button } from '@alberto-delapuente/design-system';
+
+<Button variant="primary" size="md" onClick={fn}>Save</Button>
+<Button variant="secondary" size="md">Cancel</Button>
+<Button variant="ghost" size="sm">Learn more</Button>
+<Button variant="primary" disabled>Disabled</Button>
+<Button variant="primary" fullWidth>Full width</Button>
+```
+
+Use `primary` for the main call to action on a page.
+Use `secondary` for alternative actions alongside a primary.
+Use `ghost` for subtle or tertiary actions.
+
+---
+
+## Badge
+Variants: `primary` | `success` | `warning` | `error` | `info` | `neutral`
+
+```tsx
+import { Badge } from '@alberto-delapuente/design-system';
+
+<Badge variant="success">Active</Badge>
+<Badge variant="warning">Pending</Badge>
+<Badge variant="error">Failed</Badge>
+<Badge variant="info">Info</Badge>
+<Badge variant="neutral">Draft</Badge>
+<Badge variant="primary">New</Badge>
+```
+
+Use `success` for active/completed states.
+Use `warning` for pending/in-progress states.
+Use `error` for failed/blocked states.
+Use `neutral` for draft/inactive states.
+
+---
+
+## Card
+Props: `title`, `description`, `footer`, `children`
+
+```tsx
+import { Card } from '@alberto-delapuente/design-system';
+import { Button } from '@alberto-delapuente/design-system';
+
+// Simple card
+<Card title="Project Name" description="A brief description of the project." />
+
+// Card with footer action
+<Card
+  title="Project Name"
+  description="A brief description."
+  footer={<Button variant="primary" size="sm">Open</Button>}
+/>
+
+// Card with custom children
+<Card title="Stats">
+  <p>Custom content here</p>
+</Card>
+```
+
+---
+
+## Input
+Props: `label`, `error`, `hint`, plus all native input attributes
+
+```tsx
+import { Input } from '@alberto-delapuente/design-system';
+
+<Input label="Email" type="email" placeholder="you@example.com" />
+<Input label="Name" hint="Enter your full name" />
+<Input label="Username" error="Username is already taken" />
+<Input label="Read only" value="Fixed value" readOnly />
+```
+
+---
+
+## Textarea
+Props: `label`, `error`, `hint`, plus all native textarea attributes
+
+```tsx
+import { Textarea } from '@alberto-delapuente/design-system';
+
+<Textarea label="Description" placeholder="Write something..." rows={4} />
+<Textarea label="Notes" hint="Max 500 characters" />
+<Textarea label="Feedback" error="This field is required" />
+```

package/guidelines/tokens.md

@@ -0,0 +1,66 @@
+# Design Tokens
+
+## Colors – Functional
+
+| Token | Value | Use |
+|---|---|---|
+| primary | #2563eb | Main actions, links, primary buttons |
+| primaryHover | #1d4ed8 | Hover state of primary |
+| primaryLight | #dbeafe | Primary badge background |
+| success | #16a34a | Success states |
+| successLight | #dcfce7 | Success badge background |
+| warning | #ea580c | Warning states |
+| warningLight | #fed7aa | Warning badge background |
+| error | #dc2626 | Error states |
+| errorLight | #fecaca | Error badge background |
+| info | #0891b2 | Informational states |
+| infoLight | #cffafe | Info badge background |
+
+## Colors – Neutral scale
+
+| Token | Value | Use |
+|---|---|---|
+| neutral[50] | #fafaf9 | Page background |
+| neutral[100] | #f5f5f4 | Hover backgrounds |
+| neutral[200] | #e7e5e4 | Subtle borders |
+| neutral[300] | #d6d3d1 | Default borders |
+| neutral[400] | #a8a29e | Placeholder text |
+| neutral[500] | #78716c | Tertiary text |
+| neutral[600] | #57534e | Secondary text |
+| neutral[700] | #44403c | Body text |
+| neutral[800] | #292524 | Dark text |
+| neutral[900] | #1c1917 | Primary text |
+
+## Spacing (4px base)
+
+| Token | Value |
+|---|---|
+| spacing[1] | 0.25rem (4px) |
+| spacing[2] | 0.5rem (8px) |
+| spacing[3] | 0.75rem (12px) |
+| spacing[4] | 1rem (16px) |
+| spacing[6] | 1.5rem (24px) |
+| spacing[8] | 2rem (32px) |
+| spacing[12] | 3rem (48px) |
+
+## Typography
+
+Font: **Funnel Sans** (weights: 300, 400, 500, 600, 700)
+
+| Token | Value |
+|---|---|
+| fontSize.xs | 0.75rem (12px) |
+| fontSize.sm | 0.875rem (14px) |
+| fontSize.base | 1rem (16px) |
+| fontSize.lg | 1.125rem (18px) |
+| fontSize.xl | 1.25rem (20px) |
+| fontSize.2xl | 1.5rem (24px) |
+
+## Border Radius
+
+| Token | Value |
+|---|---|
+| borderRadius.sm | 0.25rem (4px) |
+| borderRadius.md | 0.5rem (8px) |
+| borderRadius.lg | 0.75rem (12px) |
+| borderRadius.xl | 1rem (16px) |

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "albertodela-design-system",
+  "version": "1.0.1",
+  "description": "Minimal and functional design system. Buttons, Badges, Cards and Form components with Funnel Sans typography.",
+  "keywords": [
+    "design-system",
+    "react",
+    "components",
+    "ui"
+  ],
+  "author": "Alberto de la Puente",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "guidelines"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.3.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}