unicorn-design-system 1.0.0 → 1.0.3

package/dist/index.d.mts

@@ -0,0 +1,119 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'elevated' | 'flat';
+    padding?: 'sm' | 'md' | 'lg';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const Modal: React.FC<ModalProps>;
+
+interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    message: string;
+    closable?: boolean;
+    onClose?: () => void;
+    action?: React.ReactNode;
+}
+declare const Alert: React.FC<AlertProps>;
+
+declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    success: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    warning: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    danger: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        500: string;
+        900: string;
+    };
+};
+
+declare const typography: {
+    fontFamily: {
+        primary: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+};
+
+declare const spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+declare const borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+
+export { Alert, type AlertProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Modal, type ModalProps, borderRadius, colors, shadows, spacing, typography };

package/dist/index.d.ts

@@ -1,15 +1,119 @@
-export { Button } from './components/Button';
-export type { ButtonProps } from './components/Button';
-export { Card } from './components/Card';
-export type { CardProps } from './components/Card';
-export { Badge } from './components/Badge';
-export type { BadgeProps } from './components/Badge';
-export { Input } from './components/Input';
-export type { InputProps } from './components/Input';
-export { Modal } from './components/Modal';
-export type { ModalProps } from './components/Modal';
-export { Alert } from './components/Alert';
-export type { AlertProps } from './components/Alert';
-export { colors } from './tokens/colors';
-export { typography } from './tokens/typography';
-export { spacing, borderRadius, shadows } from './tokens/spacing';
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'default' | 'elevated' | 'flat';
+    padding?: 'sm' | 'md' | 'lg';
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const Modal: React.FC<ModalProps>;
+
+interface AlertProps {
+    type?: 'info' | 'success' | 'warning' | 'error';
+    title?: string;
+    message: string;
+    closable?: boolean;
+    onClose?: () => void;
+    action?: React.ReactNode;
+}
+declare const Alert: React.FC<AlertProps>;
+
+declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    success: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    warning: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    danger: {
+        500: string;
+        600: string;
+        700: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        500: string;
+        900: string;
+    };
+};
+
+declare const typography: {
+    fontFamily: {
+        primary: string;
+        mono: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+};
+
+declare const spacing: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+declare const borderRadius: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+declare const shadows: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+
+export { Alert, type AlertProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Input, type InputProps, Modal, type ModalProps, borderRadius, colors, shadows, spacing, typography };

package/dist/index.js

@@ -1,11 +1,370 @@
-// Export all components
-export { Button } from './components/Button';
-export { Card } from './components/Card';
-export { Badge } from './components/Badge';
-export { Input } from './components/Input';
-export { Modal } from './components/Modal';
-export { Alert } from './components/Alert';
-// Export all tokens
-export { colors } from './tokens/colors';
-export { typography } from './tokens/typography';
-export { spacing, borderRadius, shadows } from './tokens/spacing';
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Alert: () => Alert,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Input: () => Input,
+  Modal: () => Modal,
+  borderRadius: () => borderRadius,
+  colors: () => colors,
+  shadows: () => shadows,
+  spacing: () => spacing,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = import_react.default.forwardRef(
+  ({ variant = "primary", size = "md", className, children, ...props }, ref) => {
+    const variants = {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+      success: "bg-emerald-600 text-white hover:bg-emerald-700",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    };
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-6 py-3 text-lg"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        className: `
+          rounded-lg font-semibold transition-colors
+          ${variants[variant]}
+          ${sizes[size]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = import_react2.default.forwardRef(
+  ({ variant = "default", padding = "lg", className, children, ...props }, ref) => {
+    const variants = {
+      default: "bg-white border border-gray-200 shadow-sm",
+      elevated: "bg-white shadow-lg",
+      flat: "bg-gray-50 border border-gray-100"
+    };
+    const paddings = {
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        ref,
+        className: `
+          rounded-lg transition-all
+          ${variants[variant]}
+          ${paddings[padding]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Badge.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Badge = import_react3.default.forwardRef(
+  ({ variant = "primary", className, children, ...props }, ref) => {
+    const variants = {
+      primary: "bg-blue-100 text-blue-800",
+      success: "bg-emerald-100 text-emerald-800",
+      warning: "bg-amber-100 text-amber-800",
+      danger: "bg-red-100 text-red-800"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        ref,
+        className: `
+          inline-flex px-3 py-1.5 rounded-full text-sm font-semibold
+          ${variants[variant]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Input.tsx
+var import_react4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Input = import_react4.default.forwardRef(
+  ({ label, error, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-semibold mb-2", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          ref,
+          className: `
+            w-full px-4 py-2 border rounded-lg
+            focus:outline-none focus:ring-2 focus:ring-blue-500
+            ${error ? "border-red-500" : "border-gray-300"}
+            ${className || ""}
+          `,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-red-600 mt-1", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Modal.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40", onClick: onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "bg-white rounded-lg shadow-2xl max-w-md w-full mx-4", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-6 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "text-xl font-bold", children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-6", children }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "p-6 border-t border-gray-200 bg-gray-50", children: footer })
+    ] }) })
+  ] });
+};
+
+// src/components/Alert.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Alert = ({
+  type = "info",
+  title,
+  message,
+  closable,
+  onClose,
+  action
+}) => {
+  const typeStyles = {
+    info: {
+      container: "bg-primary-50 border-primary-100",
+      icon: "text-primary-600"
+    },
+    success: {
+      container: "bg-emerald-50 border-emerald-500",
+      icon: "text-emerald-600"
+    },
+    warning: {
+      container: "bg-amber-50 border-amber-500",
+      icon: "text-amber-600"
+    },
+    error: {
+      container: "bg-red-50 border-red-500",
+      icon: "text-red-600"
+    }
+  };
+  const currentStyle = typeStyles[type];
+  if (type === "info") {
+    typeStyles.info.container = "bg-[#ECF4FF] border-[#D4E5FF]";
+    typeStyles.info.icon = "text-[#235ABD]";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      className: `flex w-full max-w-[480px] p-[12px] gap-3 rounded-[4px] border border-l-4 ${currentStyle.container} ${type === "info" ? "border-l-primary-100" : ""}`,
+      style: type === "info" ? {
+        border: "1px solid #D4E5FF",
+        // Explicitly matching the CSS provided for info
+        background: "#ECF4FF"
+      } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "shrink-0 pt-0.5", children: [
+          type === "info" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: `w-5 h-5 ${currentStyle.icon}`,
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          type !== "info" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-xl", children: "\u2139\uFE0F" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-[10px] w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between items-start gap-2", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { className: "text-base font-bold text-gray-900 leading-tight", children: title }),
+            closable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "text-gray-400 hover:text-gray-600 transition-colors p-0.5 rounded focus:outline-none focus:ring-2 focus:ring-primary-500",
+                "aria-label": "Close alert",
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    className: "w-5 h-5",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-gray-600 leading-normal", children: message }),
+          action && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: action })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#ECF4FF",
+    100: "#D4E5FF",
+    500: "#2A6ECC",
+    600: "#235ABD",
+    700: "#1C45AE"
+  },
+  success: {
+    500: "#00995A",
+    600: "#007A4A",
+    700: "#005C3A"
+  },
+  warning: {
+    500: "#F9B02A",
+    600: "#E8A100",
+    700: "#D69200"
+  },
+  danger: {
+    500: "#FA5858",
+    600: "#E84545",
+    700: "#D63232"
+  },
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    500: "#6B7280",
+    900: "#111827"
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "Poppins, -apple-system, BlinkMacSystemFont, sans-serif",
+    mono: '"Roboto Mono", monospace'
+  },
+  fontSize: {
+    xs: "10px",
+    sm: "12px",
+    base: "14px",
+    lg: "16px",
+    xl: "18px",
+    "2xl": "20px",
+    "3xl": "24px"
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px"
+};
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px"
+};
+var shadows = {
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Input,
+  Modal,
+  borderRadius,
+  colors,
+  shadows,
+  spacing,
+  typography
+});

package/dist/index.mjs

@@ -0,0 +1,323 @@
+// src/components/Button.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Button = React.forwardRef(
+  ({ variant = "primary", size = "md", className, children, ...props }, ref) => {
+    const variants = {
+      primary: "bg-blue-600 text-white hover:bg-blue-700",
+      secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+      success: "bg-emerald-600 text-white hover:bg-emerald-700",
+      danger: "bg-red-600 text-white hover:bg-red-700"
+    };
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-6 py-3 text-lg"
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: `
+          rounded-lg font-semibold transition-colors
+          ${variants[variant]}
+          ${sizes[size]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Card.tsx
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(
+  ({ variant = "default", padding = "lg", className, children, ...props }, ref) => {
+    const variants = {
+      default: "bg-white border border-gray-200 shadow-sm",
+      elevated: "bg-white shadow-lg",
+      flat: "bg-gray-50 border border-gray-100"
+    };
+    const paddings = {
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6"
+    };
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        className: `
+          rounded-lg transition-all
+          ${variants[variant]}
+          ${paddings[padding]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/Badge.tsx
+import React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Badge = React3.forwardRef(
+  ({ variant = "primary", className, children, ...props }, ref) => {
+    const variants = {
+      primary: "bg-blue-100 text-blue-800",
+      success: "bg-emerald-100 text-emerald-800",
+      warning: "bg-amber-100 text-amber-800",
+      danger: "bg-red-100 text-red-800"
+    };
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        ref,
+        className: `
+          inline-flex px-3 py-1.5 rounded-full text-sm font-semibold
+          ${variants[variant]}
+          ${className || ""}
+        `,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Input.tsx
+import React4 from "react";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var Input = React4.forwardRef(
+  ({ label, error, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsx4("label", { className: "block text-sm font-semibold mb-2", children: label }),
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          ref,
+          className: `
+            w-full px-4 py-2 border rounded-lg
+            focus:outline-none focus:ring-2 focus:ring-blue-500
+            ${error ? "border-red-500" : "border-gray-300"}
+            ${className || ""}
+          `,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx4("p", { className: "text-sm text-red-600 mt-1", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/Modal.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx5("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40", onClick: onClose }),
+    /* @__PURE__ */ jsx5("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: /* @__PURE__ */ jsxs2("div", { className: "bg-white rounded-lg shadow-2xl max-w-md w-full mx-4", children: [
+      title && /* @__PURE__ */ jsx5("div", { className: "p-6 border-b border-gray-200", children: /* @__PURE__ */ jsx5("h2", { className: "text-xl font-bold", children: title }) }),
+      /* @__PURE__ */ jsx5("div", { className: "p-6", children }),
+      footer && /* @__PURE__ */ jsx5("div", { className: "p-6 border-t border-gray-200 bg-gray-50", children: footer })
+    ] }) })
+  ] });
+};
+
+// src/components/Alert.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var Alert = ({
+  type = "info",
+  title,
+  message,
+  closable,
+  onClose,
+  action
+}) => {
+  const typeStyles = {
+    info: {
+      container: "bg-primary-50 border-primary-100",
+      icon: "text-primary-600"
+    },
+    success: {
+      container: "bg-emerald-50 border-emerald-500",
+      icon: "text-emerald-600"
+    },
+    warning: {
+      container: "bg-amber-50 border-amber-500",
+      icon: "text-amber-600"
+    },
+    error: {
+      container: "bg-red-50 border-red-500",
+      icon: "text-red-600"
+    }
+  };
+  const currentStyle = typeStyles[type];
+  if (type === "info") {
+    typeStyles.info.container = "bg-[#ECF4FF] border-[#D4E5FF]";
+    typeStyles.info.icon = "text-[#235ABD]";
+  }
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `flex w-full max-w-[480px] p-[12px] gap-3 rounded-[4px] border border-l-4 ${currentStyle.container} ${type === "info" ? "border-l-primary-100" : ""}`,
+      style: type === "info" ? {
+        border: "1px solid #D4E5FF",
+        // Explicitly matching the CSS provided for info
+        background: "#ECF4FF"
+      } : {},
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "shrink-0 pt-0.5", children: [
+          type === "info" && /* @__PURE__ */ jsx6(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: `w-5 h-5 ${currentStyle.icon}`,
+              children: /* @__PURE__ */ jsx6(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          type !== "info" && /* @__PURE__ */ jsx6("span", { className: "text-xl", children: "\u2139\uFE0F" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-[10px] w-full", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-start gap-2", children: [
+            title && /* @__PURE__ */ jsx6("h3", { className: "text-base font-bold text-gray-900 leading-tight", children: title }),
+            closable && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                onClick: onClose,
+                className: "text-gray-400 hover:text-gray-600 transition-colors p-0.5 rounded focus:outline-none focus:ring-2 focus:ring-primary-500",
+                "aria-label": "Close alert",
+                children: /* @__PURE__ */ jsx6(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    className: "w-5 h-5",
+                    children: /* @__PURE__ */ jsx6("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx6("p", { className: "text-sm text-gray-600 leading-normal", children: message }),
+          action && /* @__PURE__ */ jsx6("div", { children: action })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#ECF4FF",
+    100: "#D4E5FF",
+    500: "#2A6ECC",
+    600: "#235ABD",
+    700: "#1C45AE"
+  },
+  success: {
+    500: "#00995A",
+    600: "#007A4A",
+    700: "#005C3A"
+  },
+  warning: {
+    500: "#F9B02A",
+    600: "#E8A100",
+    700: "#D69200"
+  },
+  danger: {
+    500: "#FA5858",
+    600: "#E84545",
+    700: "#D63232"
+  },
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    500: "#6B7280",
+    900: "#111827"
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "Poppins, -apple-system, BlinkMacSystemFont, sans-serif",
+    mono: '"Roboto Mono", monospace'
+  },
+  fontSize: {
+    xs: "10px",
+    sm: "12px",
+    base: "14px",
+    lg: "16px",
+    xl: "18px",
+    "2xl": "20px",
+    "3xl": "24px"
+  },
+  fontWeight: {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+  xl: "24px",
+  "2xl": "32px"
+};
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "12px"
+};
+var shadows = {
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+};
+export {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Input,
+  Modal,
+  borderRadius,
+  colors,
+  shadows,
+  spacing,
+  typography
+};

package/dist/styles.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.fixed{position:fixed}.inset-0{inset:0}.z-40{z-index:40}.z-50{z-index:50}.mx-4{margin-left:1rem;margin-right:1rem}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.h-5{height:1.25rem}.w-5{width:1.25rem}.w-full{width:100%}.max-w-\[480px\]{max-width:480px}.max-w-md{max-width:28rem}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-\[10px\]{gap:10px}.rounded{border-radius:.25rem}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-\[\#D4E5FF\]{--tw-border-opacity:1;border-color:rgb(212 229 255/var(--tw-border-opacity,1))}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-emerald-500{--tw-border-opacity:1;border-color:rgb(16 185 129/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-primary-100{--tw-border-opacity:1;border-color:rgb(212 229 255/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-l-primary-100{--tw-border-opacity:1;border-left-color:rgb(212 229 255/var(--tw-border-opacity,1))}.bg-\[\#ECF4FF\]{--tw-bg-opacity:1;background-color:rgb(236 244 255/var(--tw-bg-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity,1))}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgb(236 244 255/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-\[12px\]{padding:12px}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pt-0\.5{padding-top:.125rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-normal{line-height:1.5}.leading-tight{line-height:1.25}.text-\[\#235ABD\]{--tw-text-opacity:1;color:rgb(35 90 189/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-800{--tw-text-opacity:1;color:rgb(6 95 70/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-primary-600{--tw-text-opacity:1;color:rgb(35 90 189/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-emerald-700:hover{--tw-bg-opacity:1;background-color:rgb(4 120 87/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.focus\:ring-primary-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(42 110 204/var(--tw-ring-opacity,1))}

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "unicorn-design-system",
-    "version": "1.0.0",
+    "version": "1.0.3",
     "description": "🦄 Beautiful React components and design tokens",
     "main": "dist/index.js",
-    "module": "dist/index.esm.js",
+    "module": "dist/index.mjs",
     "types": "dist/index.d.ts",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "import": "./dist/index.esm.js",
+            "import": "./dist/index.mjs",
             "require": "./dist/index.js"
         },
         "./styles": "./dist/styles.css"
@@ -19,8 +19,8 @@
         "LICENSE"
     ],
     "scripts": {
-        "build": "tsc",
-        "dev": "tsc --watch"
+        "build": "tsup src/index.ts --format cjs,esm --dts --clean && tailwindcss -i ./src/index.css -o ./dist/styles.css --minify",
+        "dev": "concurrently \"tsup src/index.ts --format cjs,esm --dts --watch\" \"tailwindcss -i ./src/index.css -o ./dist/styles.css --watch\""
     },
     "keywords": [
         "react",
@@ -38,6 +38,11 @@
     "devDependencies": {
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
+        "autoprefixer": "^10.4.23",
+        "concurrently": "^9.2.1",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17",
+        "tsup": "^8.5.1",
         "typescript": "^5.3.0"
     }
 }

package/dist/components/Alert.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface AlertProps {
-    type?: 'info' | 'success' | 'warning' | 'error';
-    title?: string;
-    message: string;
-    closable?: boolean;
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<AlertProps>;
-export default Alert;

package/dist/components/Alert.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Alert = ({ type = 'info', title, message, closable, onClose, }) => {
-    const types = {
-        info: 'bg-cyan-50 border-l-4 border-cyan-500 text-cyan-900',
-        success: 'bg-emerald-50 border-l-4 border-emerald-500 text-emerald-900',
-        warning: 'bg-amber-50 border-l-4 border-amber-500 text-amber-900',
-        error: 'bg-red-50 border-l-4 border-red-500 text-red-900',
-    };
-    return (_jsxs("div", { className: `p-4 rounded-lg ${types[type]}`, children: [title && _jsx("h3", { className: "font-semibold mb-1", children: title }), _jsx("p", { className: "text-sm", children: message }), closable && (_jsx("button", { onClick: onClose, className: "ml-auto text-sm font-semibold hover:opacity-70", children: "\u2715" }))] }));
-};
-export default Alert;

package/dist/components/Badge.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: 'primary' | 'success' | 'warning' | 'danger';
-}
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-export default Badge;

package/dist/components/Badge.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export const Badge = React.forwardRef(({ variant = 'primary', className, children, ...props }, ref) => {
-    const variants = {
-        primary: 'bg-blue-100 text-blue-800',
-        success: 'bg-emerald-100 text-emerald-800',
-        warning: 'bg-amber-100 text-amber-800',
-        danger: 'bg-red-100 text-red-800',
-    };
-    return (_jsx("span", { ref: ref, className: `
-          inline-flex px-3 py-1.5 rounded-full text-sm font-semibold
-          ${variants[variant]}
-          ${className || ''}
-        `, ...props, children: children }));
-});
-Badge.displayName = 'Badge';
-export default Badge;

package/dist/components/Button.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'success' | 'danger';
-    size?: 'sm' | 'md' | 'lg';
-}
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default Button;

package/dist/components/Button.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export const Button = React.forwardRef(({ variant = 'primary', size = 'md', className, children, ...props }, ref) => {
-    const variants = {
-        primary: 'bg-blue-600 text-white hover:bg-blue-700',
-        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
-        success: 'bg-emerald-600 text-white hover:bg-emerald-700',
-        danger: 'bg-red-600 text-white hover:bg-red-700',
-    };
-    const sizes = {
-        sm: 'px-3 py-1.5 text-sm',
-        md: 'px-4 py-2 text-base',
-        lg: 'px-6 py-3 text-lg',
-    };
-    return (_jsx("button", { ref: ref, className: `
-          rounded-lg font-semibold transition-colors
-          ${variants[variant]}
-          ${sizes[size]}
-          ${className || ''}
-        `, ...props, children: children }));
-});
-Button.displayName = 'Button';
-export default Button;

package/dist/components/Card.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'elevated' | 'flat';
-    padding?: 'sm' | 'md' | 'lg';
-}
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
-export default Card;

package/dist/components/Card.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-export const Card = React.forwardRef(({ variant = 'default', padding = 'lg', className, children, ...props }, ref) => {
-    const variants = {
-        default: 'bg-white border border-gray-200 shadow-sm',
-        elevated: 'bg-white shadow-lg',
-        flat: 'bg-gray-50 border border-gray-100',
-    };
-    const paddings = {
-        sm: 'p-2',
-        md: 'p-4',
-        lg: 'p-6',
-    };
-    return (_jsx("div", { ref: ref, className: `
-          rounded-lg transition-all
-          ${variants[variant]}
-          ${paddings[padding]}
-          ${className || ''}
-        `, ...props, children: children }));
-});
-Card.displayName = 'Card';
-export default Card;

package/dist/components/Input.d.ts

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

package/dist/components/Input.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-export const Input = React.forwardRef(({ label, error, className, ...props }, ref) => {
-    return (_jsxs("div", { className: "w-full", children: [label && _jsx("label", { className: "block text-sm font-semibold mb-2", children: label }), _jsx("input", { ref: ref, className: `
-            w-full px-4 py-2 border rounded-lg
-            focus:outline-none focus:ring-2 focus:ring-blue-500
-            ${error ? 'border-red-500' : 'border-gray-300'}
-            ${className || ''}
-          `, ...props }), error && _jsx("p", { className: "text-sm text-red-600 mt-1", children: error })] }));
-});
-Input.displayName = 'Input';
-export default Input;

package/dist/components/Modal.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-}
-export declare const Modal: React.FC<ModalProps>;
-export default Modal;

package/dist/components/Modal.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-export const Modal = ({ isOpen, onClose, title, children, footer, }) => {
-    if (!isOpen)
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-40", onClick: onClose }), _jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: _jsxs("div", { className: "bg-white rounded-lg shadow-2xl max-w-md w-full mx-4", children: [title && (_jsx("div", { className: "p-6 border-b border-gray-200", children: _jsx("h2", { className: "text-xl font-bold", children: title }) })), _jsx("div", { className: "p-6", children: children }), footer && _jsx("div", { className: "p-6 border-t border-gray-200 bg-gray-50", children: footer })] }) })] }));
-};
-export default Modal;

package/dist/tokens/src/tokens/colors.d.ts

@@ -1,29 +0,0 @@
-export declare const colors: {
-    primary: {
-        500: string;
-        600: string;
-        700: string;
-    };
-    success: {
-        500: string;
-        600: string;
-        700: string;
-    };
-    warning: {
-        500: string;
-        600: string;
-        700: string;
-    };
-    danger: {
-        500: string;
-        600: string;
-        700: string;
-    };
-    gray: {
-        50: string;
-        100: string;
-        200: string;
-        500: string;
-        900: string;
-    };
-};

package/dist/tokens/src/tokens/colors.js

@@ -1,29 +0,0 @@
-export const colors = {
-    primary: {
-        500: '#2A6ECC',
-        600: '#235ABD',
-        700: '#1C45AE',
-    },
-    success: {
-        500: '#00995A',
-        600: '#007A4A',
-        700: '#005C3A',
-    },
-    warning: {
-        500: '#F9B02A',
-        600: '#E8A100',
-        700: '#D69200',
-    },
-    danger: {
-        500: '#FA5858',
-        600: '#E84545',
-        700: '#D63232',
-    },
-    gray: {
-        50: '#F9FAFB',
-        100: '#F3F4F6',
-        200: '#E5E7EB',
-        500: '#6B7280',
-        900: '#111827',
-    },
-};

package/dist/tokens/src/tokens/spacing.d.ts

@@ -1,19 +0,0 @@
-export declare const spacing: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-};
-export declare const borderRadius: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-};
-export declare const shadows: {
-    sm: string;
-    md: string;
-    lg: string;
-};

package/dist/tokens/src/tokens/spacing.js

@@ -1,19 +0,0 @@
-export const spacing = {
-    xs: '4px',
-    sm: '8px',
-    md: '12px',
-    lg: '16px',
-    xl: '24px',
-    '2xl': '32px',
-};
-export const borderRadius = {
-    sm: '4px',
-    md: '6px',
-    lg: '8px',
-    xl: '12px',
-};
-export const shadows = {
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-};

package/dist/tokens/src/tokens/typography.d.ts

@@ -1,21 +0,0 @@
-export declare const typography: {
-    fontFamily: {
-        primary: string;
-        mono: string;
-    };
-    fontSize: {
-        xs: string;
-        sm: string;
-        base: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-    fontWeight: {
-        regular: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-    };
-};

package/dist/tokens/src/tokens/typography.js

@@ -1,21 +0,0 @@
-export const typography = {
-    fontFamily: {
-        primary: 'Poppins, -apple-system, BlinkMacSystemFont, sans-serif',
-        mono: '"Roboto Mono", monospace',
-    },
-    fontSize: {
-        xs: '10px',
-        sm: '12px',
-        base: '14px',
-        lg: '16px',
-        xl: '18px',
-        '2xl': '20px',
-        '3xl': '24px',
-    },
-    fontWeight: {
-        regular: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-    },
-};