unicorn-design-system 1.0.0 → 1.0.1

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,366 @@
-// 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];
+  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,319 @@
+// 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];
+  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/package.json

@@ -1,14 +1,14 @@
 {
     "name": "unicorn-design-system",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "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",
+        "dev": "tsup src/index.ts --format cjs,esm --dts --watch"
     },
     "keywords": [
         "react",
@@ -38,6 +38,7 @@
     "devDependencies": {
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
+        "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,
-    },
-};