@seip/blue-bird 0.4.3

package/core/validate.js

@@ -0,0 +1,380 @@
+import xss from "xss";
+
+const messages_default = {
+  es: {
+    required: (f) => `El campo ${f} es obligatorio`,
+    min: (f, n) => `El campo ${f} debe tener al menos ${n} caracteres`,
+    max: (f, n) => `El campo ${f} no puede tener más de ${n} caracteres`,
+    email: (f) => `El campo ${f} debe ser un email válido`,
+    number: (f) => `El campo ${f} debe ser numérico`,
+    alpha: (f) => `El campo ${f} solo puede contener letras`,
+    alphanumeric: (f) => `El campo ${f} solo puede contener letras y números`,
+    boolean: (f) => `El campo ${f} debe ser verdadero o falso`,
+    date: (f) => `El campo ${f} debe ser una fecha válida`,
+    url: (f) => `El campo ${f} debe ser una URL válida`,
+    in: (f, v) => `El campo ${f} debe ser uno de: ${v.join(", ")}`,
+    equals: (f, v) => `El campo ${f} debe ser igual a ${v}`,
+    password: () => `La contraseña debe tener mayúsculas, minúsculas y números`,
+    pattern: (f) => `El campo ${f} no cumple el patrón requerido`,
+  },
+  en: {
+    required: (f) => `${f} is required`,
+    min: (f, n) => `${f} must be at least ${n} characters`,
+    max: (f, n) => `${f} must be at most ${n} characters`,
+    email: (f) => `${f} must be a valid email`,
+    number: (f) => `${f} must be numeric`,
+    alpha: (f) => `${f} must contain only letters`,
+    alphanumeric: (f) => `${f} must contain only letters and numbers`,
+    boolean: (f) => `${f} must be true or false`,
+    date: (f) => `${f} must be a valid date`,
+    url: (f) => `${f} must be a valid URL`,
+    in: (f, v) => `${f} must be one of: ${v.join(", ")}`,
+    equals: (f, v) => `${f} must equal ${v}`,
+    password: () => `Password must contain uppercase, lowercase and numbers`,
+    pattern: (f) => `${f} does not match the required pattern`,
+  },
+  pt: {
+    required: (f) => `O campo ${f} é obrigatório`,
+    min: (f, n) => `O campo ${f} deve ter pelo menos ${n} caracteres`,
+    max: (f, n) => `O campo ${f} não pode ter mais de ${n} caracteres`,
+    email: (f) => `O campo ${f} deve ser um email válido`,
+    number: (f) => `O campo ${f} deve ser numérico`,
+    alpha: (f) => `O campo ${f} só pode conter letras`,
+    alphanumeric: (f) => `O campo ${f} só pode conter letras e números`,
+    boolean: (f) => `O campo ${f} deve ser verdadeiro ou falso`,
+    date: (f) => `O campo ${f} deve ser uma data válida`,
+    url: (f) => `O campo ${f} deve ser uma URL válida`,
+    in: (f, v) => `O campo ${f} deve ser um de: ${v.join(", ")}`,
+    equals: (f, v) => `O campo ${f} deve ser igual a ${v}`,
+    password: () => `A senha deve conter maiúsculas, minúsculas e números`,
+    pattern: (f) => `O campo ${f} não corresponde ao padrão exigido`,
+  },
+  br: {
+    required: (f) => `O campo ${f} é obrigatório`,
+    min: (f, n) => `O campo ${f} deve ter pelo menos ${n} caracteres`,
+    max: (f, n) => `O campo ${f} não pode ter mais de ${n} caracteres`,
+    email: (f) => `O campo ${f} deve ser um email válido`,
+    number: (f) => `O campo ${f} deve ser numérico`,
+    alpha: (f) => `O campo ${f} só pode conter letras`,
+    alphanumeric: (f) => `O campo ${f} só pode conter letras e números`,
+    boolean: (f) => `O campo ${f} deve ser verdadeiro ou falso`,
+    date: (f) => `O campo ${f} deve ser uma data válida`,
+    url: (f) => `O campo ${f} deve ser uma URL válida`,
+    in: (f, v) => `O campo ${f} deve ser um de: ${v.join(", ")}`,
+    equals: (f, v) => `O campo ${f} deve ser igual a ${v}`,
+    password: () => `A senha deve conter maiúsculas, minúsculas e números`,
+    pattern: (f) => `O campo ${f} não corresponde ao padrão exigido`,
+  },
+  fr: {
+    required: (f) => `Le champ ${f} est obligatoire`,
+    min: (f, n) => `Le champ ${f} doit contenir au moins ${n} caractères`,
+    max: (f, n) => `Le champ ${f} ne peut pas contenir plus de ${n} caractères`,
+    email: (f) => `Le champ ${f} doit être un email valide`,
+    number: (f) => `Le champ ${f} doit être numérique`,
+    alpha: (f) => `Le champ ${f} ne peut contenir que des lettres`,
+    alphanumeric: (f) =>
+      `Le champ ${f} ne peut contenir que des lettres et des chiffres`,
+    boolean: (f) => `Le champ ${f} doit être vrai ou faux`,
+    date: (f) => `Le champ ${f} doit être une date valide`,
+    url: (f) => `Le champ ${f} doit être une URL valide`,
+    in: (f, v) => `Le champ ${f} doit être l'un de: ${v.join(", ")}`,
+    equals: (f, v) => `Le champ ${f} doit être égal à ${v}`,
+    password: () =>
+      `Le mot de passe doit contenir des majuscules, des minuscules et des chiffres`,
+    pattern: (f) => `Le champ ${f} ne correspond pas au modèle requis`,
+  },
+};
+
+const validators = {
+  isEmpty: (value) => value === undefined || value === null || value === "",
+  isEmail: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
+  isNumeric: (value) => !isNaN(value) && !isNaN(parseFloat(value)),
+  isAlpha: (value) => /^[a-zA-Z]+$/.test(value),
+  isAlphanumeric: (value) => /^[a-zA-Z0-9]+$/.test(value),
+  isBoolean: (value) =>
+    value === true || value === false || value === "true" || value === "false",
+  isISO8601: (value) => !isNaN(Date.parse(value)),
+  isURL: (value) => {
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  isLength: (value, { min, max }) => {
+    const len = String(value).length;
+    if (min !== undefined && len < min) return false;
+    if (max !== undefined && len > max) return false;
+    return true;
+  },
+  isIn: (value, values) => values.includes(value),
+  equals: (value, comparison) => value === comparison,
+  matches: (value, pattern) => pattern.test(value),
+};
+
+/**
+ * Comprehensive Validator class for handling multi-language data validation.
+ */
+class Validator {
+  /**
+   * Initializes the Validator instance with a schema and optional language settings.
+   * @param {Object} schema - Validation rules for each field (e.g., { email: { required: true, email: true } }).
+   * @param {string} [lang_default=null] - Default language for error messages (e.g., "en", "es").
+   * @param {Object} [messages=null] - Custom message overrides for validation rules.
+   * @example
+   * const loginSchema = {
+   *     email: { required: true, email: true },
+   *     password: { required: true, min: 6 }
+   * };
+   * const loginValidator = new Validator(loginSchema, 'es');
+   */
+  constructor(schema, lang_default = null, messages = null) {
+    this.schema = schema;
+    this.lang_default = lang_default;
+    this.messages = messages ? messages : messages_default;
+  }
+
+  /**
+   * Validates the request body against the defined schema.
+   * @param {import('express').Request} req - The Express request object containing the body to validate.
+   * @returns {Promise<{success: boolean, error: boolean, errors: Array<{field: string, message: string}>, message: Array<string>, html: Array<string>}>} Validation results.
+   * @example
+   * const loginSchema = {
+   *     email: { required: true, email: true },
+   *     password: { required: true, min: 6 }
+   * };
+   * const loginValidator = new Validator(loginSchema, 'es');
+   * const result = await loginValidator.validate(req);
+   */
+  async validate(req) {
+    let lang =
+      req?.body?.lang ||
+      req?.query?.lang ||
+      req?.params?.lang ||
+      req?.cookies?.lang ||
+      req?.headers["accept-language"]?.split(",")[0]?.split("-")[0] ||
+      req?.session?.lang ||
+      this.lang_default ||
+      "es";
+    const msg = this.messages[lang] || this.messages.es;
+    const errors = [];
+    const messages = [];
+    const body = req.body || {};
+
+    for (const [field, config] of Object.entries(this.schema)) {
+      let value = body[field];
+
+      if (config.xss !== false && typeof value === "string") {
+        body[field] = xss(value);
+        value = body[field];
+      }
+
+      if (config.required && validators.isEmpty(value)) {
+        messages.push(config.messages?.required || msg.required(field));
+        errors.push({
+          field: field,
+          message: config.messages?.required || msg.required(field),
+        });
+        continue;
+      }
+
+      if (!validators.isEmpty(value)) {
+        if (
+          config.min !== undefined &&
+          !validators.isLength(value, { min: config.min })
+        ) {
+          messages.push(config.messages?.min || msg.min(field, config.min));
+          errors.push({
+            field: field,
+            message: config.messages?.min || msg.min(field, config.min),
+          });
+        }
+        if (
+          config.max !== undefined &&
+          !validators.isLength(value, { max: config.max })
+        ) {
+          messages.push(config.messages?.max || msg.max(field, config.max));
+          errors.push({
+            field: field,
+            message: config.messages?.max || msg.max(field, config.max),
+          });
+        }
+        if (config.email && !validators.isEmail(value)) {
+          messages.push(config.messages?.email || msg.email(field));
+          errors.push({
+            field: field,
+            message: config.messages?.email || msg.email(field),
+          });
+        }
+        if (config.number && !validators.isNumeric(value)) {
+          messages.push(config.messages?.number || msg.number(field));
+          errors.push({
+            field: field,
+            message: config.messages?.number || msg.number(field),
+          });
+        }
+        if (config.alpha && !validators.isAlpha(value)) {
+          messages.push(config.messages?.alpha || msg.alpha(field));
+          errors.push({
+            field: field,
+            message: config.messages?.alpha || msg.alpha(field),
+          });
+        }
+        if (config.alphanumeric && !validators.isAlphanumeric(value)) {
+          messages.push(
+            config.messages?.alphanumeric || msg.alphanumeric(field),
+          );
+          errors.push({
+            field: field,
+            message: config.messages?.alphanumeric || msg.alphanumeric(field),
+          });
+        }
+        if (config.boolean && !validators.isBoolean(value)) {
+          messages.push(config.messages?.boolean || msg.boolean(field));
+          errors.push({
+            field: field,
+            message: config.messages?.boolean || msg.boolean(field),
+          });
+        }
+        if (config.date && !validators.isISO8601(value)) {
+          messages.push(config.messages?.date || msg.date(field));
+          errors.push({
+            field: field,
+            message: config.messages?.date || msg.date(field),
+          });
+        }
+        if (config.url && !validators.isURL(value)) {
+          messages.push(config.messages?.url || msg.url(field));
+          errors.push({
+            field: field,
+            message: config.messages?.url || msg.url(field),
+          });
+        }
+        if (config.in && !validators.isIn(value, config.in)) {
+          messages.push(config.messages?.in || msg.in(field, config.in));
+          errors.push({
+            field: field,
+            message: config.messages?.in || msg.in(field, config.in),
+          });
+        }
+        if (
+          config.equals !== undefined &&
+          !validators.equals(value, config.equals)
+        ) {
+          messages.push(
+            config.messages?.equals || msg.equals(field, config.equals),
+          );
+          errors.push({
+            field: field,
+            message:
+              config.messages?.equals || msg.equals(field, config.equals),
+          });
+        }
+        if (
+          config.password &&
+          !validators.matches(value, /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{6,}$/)
+        ) {
+          messages.push(config.messages?.password || msg.password(field));
+          errors.push({
+            field: field,
+            message: config.messages?.password || msg.password(field),
+          });
+        }
+        if (config.pattern && !validators.matches(value, config.pattern)) {
+          messages.push(config.messages?.pattern || msg.pattern(field));
+          errors.push({
+            field: field,
+            message: config.messages?.pattern || msg.pattern(field),
+          });
+        }
+      }
+    }
+
+    if (errors.length > 0 || messages.length > 0) {
+      return {
+        success: false,
+        error: true,
+        errors: errors,
+        message: messages,
+      };
+    }
+
+    return { success: true, error: false, errors: [], message: [], html: [] };
+  }
+
+  /**
+   * Express middleware for automated validation of the request body.
+   * Returns a 400 Bad Request response with validation results if errors occur.
+   * @returns {Function} Express middleware function (req, res, next).
+   * @example
+   *
+   * const loginSchema = {
+   *     email: { required: true, email: true },
+   *     password: { required: true, min: 6 }
+   * };
+   * const loginValidator = new Validator(loginSchema, 'es');
+   * routerUsers.post('/login', loginValidator.middleware(), (req, res) => {
+   *     res.json({ message: 'Login successful' });
+   * });
+   */
+  middleware() {
+    return async (req, res, next) => {
+      const result = await this.validate(req);
+      if (!result.success) {
+        return res.status(400).json(result);
+      }
+      next();
+    };
+  }
+
+  /**
+   * Express middleware for explicitly sanitizing request data against XSS.
+   * Can be used on specific routes where HTML input is not expected.
+   * @returns {Function} Express middleware function.
+   */
+  static xssMiddleware() {
+    return (req, res, next) => {
+      if (req.body && typeof req.body === "object") {
+        Validator.mutateSanitized(req.body);
+      }
+      if (req.query && typeof req.query === "object") {
+        Validator.mutateSanitized(req.query);
+      }
+      if (req.params && typeof req.params === "object") {
+        Validator.mutateSanitized(req.params);
+      }
+      next();
+    };
+  }
+
+  static mutateSanitized(obj) {
+    for (const key in obj) {
+      if (typeof obj[key] === "string") {
+        obj[key] = xss(obj[key]);
+      } else if (typeof obj[key] === "object" && obj[key] !== null) {
+        Validator.mutateSanitized(obj[key]);
+      }
+    }
+  }
+
+  static sanitizeObject(obj) {
+    if (typeof obj === "string") return xss(obj);
+
+    if (Array.isArray(obj)) {
+      return obj.map((item) => Validator.sanitizeObject(item));
+    }
+
+    if (typeof obj === "object" && obj !== null) {
+      const sanitized = {};
+      for (const key in obj) {
+        sanitized[key] = Validator.sanitizeObject(obj[key]);
+      }
+      return sanitized;
+    }
+
+    return obj;
+  }
+}
+
+export default Validator;

package/frontend/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="__LANG__">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__TITLE__</title>
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="description" content="__DESCRIPTION__" />
+    <meta name="keywords" content="__KEYWORDS__" />
+    <meta name="author" content="__AUTHOR__" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
+    __HEAD_OPTIONS__
+    __LINK_STYLES__
+    __SCRIPTS_HEAD__
+    __VITE_ASSETS__
+    __STYLES_SKELETON__
+</head>
+<body class="__CLASS_BODY__">
+    <div id="root" data-react-component="__COMPONENT__" data-props='__PROPS__'>
+        __SKELETON__
+    </div>
+    __SCRIPTS_BODY__
+</body>
+
+</html>

package/frontend/landing.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="__LANG__">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>__TITLE__</title>
+    <meta name="description" content="__DESCRIPTION__">
+    <meta name="keywords" content="__KEYWORDS__">
+    <meta name="author" content="__AUTHOR__">
+    <link rel="icon" href="/favicon.ico" />
+    __HEAD_OPTIONS__
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Outfit', sans-serif;
+        }
+
+        .hero-gradient {
+            background: radial-gradient(circle at top right, #f0f9ff 0%, #ffffff 100%);
+        }
+    </style>
+    __LINK_STYLES__
+    __SCRIPTS_HEAD__
+    __VITE_ASSETS__
+    __STYLES_SKELETON__
+</head>
+
+<body class="__CLASS_BODY__ hero-gradient min-h-screen">
+    <div id="root">
+        <!-- Landing Content -->
+        <nav class="p-6 flex justify-between items-center max-w-7xl mx-auto">
+            <div class="text-2xl font-bold text-sky-600">Blue Bird</div>
+            <div class="space-x-6 text-slate-600 font-medium">
+                <a href="#features" class="hover:text-sky-600">Features</a>
+            </div>
+        </nav>
+
+        <main class="max-w-7xl mx-auto px-6 pt-20 pb-32 text-center">
+            <h1 class="text-6xl md:text-8xl font-black text-slate-900 mb-8 tracking-tight">
+                Built for <span class="text-sky-600">Speed.</span>
+            </h1>
+            <p class="text-xl text-slate-600 max-w-2xl mx-auto mb-12 leading-relaxed">
+                This page was served in under 1ms thanks to Blue Bird's in-memory caching. No heavy bundles, just pure
+                performance.
+            </p>
+
+            <div class="flex flex-col sm:flex-row justify-center gap-4 mb-20">
+                <div class="p-8 bg-white rounded-3xl shadow-xl shadow-sky-100 border border-slate-50 flex-1 max-w-sm">
+                    <div class="text-3xl mb-4">🚀</div>
+                    <h3 class="font-bold text-xl mb-2">Static First</h3>
+                    <p class="text-slate-500 text-sm">Perfect for SEO and instant first contentful paint.</p>
+                </div>
+                <div class="p-8 bg-white rounded-3xl shadow-xl shadow-sky-100 border border-slate-50 flex-1 max-w-sm">
+                    <div class="text-3xl mb-4">💎</div>
+                    <h3 class="font-bold text-xl mb-2">Hybrid Ready</h3>
+                    <p class="text-slate-500 text-sm">Hydrate React in the background whenever you need it.</p>
+                </div>
+            </div>
+
+            <footer class="text-slate-400 text-sm italic">
+                Served by Blue Bird Framework &copy; 2026
+            </footer>
+        </main>
+    </div>
+    __SCRIPTS_BODY__
+</body>
+
+</html>

package/frontend/resources/css/tailwind.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  --color-skye-50: #f0f9ff;
+  --color-skye-100: #e0f2fe;
+  --color-skye-200: #bae6fd;
+  --color-skye-300: #7dd3fc;
+  --color-skye-400: #38bdf8;
+  --color-skye-500: #0ea5e9;
+  --color-skye-600: #0284c7;
+  --color-skye-700: #0369a1;
+  --color-skye-800: #075985;
+  --color-skye-900: #0c4a6e;
+}

package/frontend/resources/js/App.jsx

@@ -0,0 +1,70 @@
+import React, { lazy, Suspense } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from './blue-bird/contexts/ThemeContext.jsx';
+import Skeleton from './blue-bird/components/Skeleton.jsx';
+import { LanguageProvider } from './blue-bird/contexts/LanguageContext.jsx';
+import { SPAProvider } from './blue-bird/contexts/SPAContext.jsx';
+
+const Home = lazy(() => import('./pages/Home'));
+const About = lazy(() => import('./pages/About'));
+
+/**
+ * Supported languages and default language.
+ * Leave LANGUAGES empty for monolingual applications.
+ */
+const LANGUAGES = ["en", "es"];
+const DEFAULT_LANGUAGE = "en";
+
+/**
+ * Route definitions.
+ */
+const ROUTES = [
+  { path: "/", element: <Home /> },
+  { path: "/about", element: <About /> },
+];
+
+/**
+ * Generates routes for all language prefixes if LANGUAGES is defined.
+ */
+function generateRoutes(routes, languages = []) {
+  const allRoutes = [];
+
+  routes.forEach(({ path: routePath, element }) => {
+    // Base path
+    allRoutes.push(
+      <Route key={routePath} path={routePath} element={element} />
+    );
+
+    // Language-prefixed paths (only if multiple languages are used)
+    if (languages && languages.length > 0) {
+      languages.forEach((lang) => {
+        const langPath = `/${lang}${routePath === "/" ? "" : routePath}`;
+        allRoutes.push(
+          <Route key={langPath} path={langPath} element={element} />
+        );
+      });
+    }
+  });
+
+  return allRoutes;
+}
+
+export default function App(_props) {
+  const { lang } = _props.props;
+
+  return (
+    <ThemeProvider>
+      <LanguageProvider initialLang={lang}>
+        <Router>
+          <SPAProvider languages={LANGUAGES} defaultLanguage={DEFAULT_LANGUAGE}>
+            <Suspense fallback={<Skeleton />}>
+              <Routes>
+                {generateRoutes(ROUTES, LANGUAGES)}
+              </Routes>
+            </Suspense>
+          </SPAProvider>
+        </Router>
+      </LanguageProvider>
+    </ThemeProvider>
+  );
+}

package/frontend/resources/js/Main.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import "../css/tailwind.css"
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[data-react-component]').forEach(el => {
+    const component = {
+      component: el.dataset.reactComponent
+    };
+    const props = JSON.parse(el.dataset.props || '{}');
+    const allProps = {
+      ...props,
+      ...component
+    }
+    createRoot(el).render(<App {...allProps} />);
+  });
+});

package/frontend/resources/js/blue-bird/components/Button.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+export default function Button({ children, variant = 'default', size = 'default', className = '', ...props }) {
+    const baseStyle = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50";
+
+    const variants = {
+        default: "bg-slate-900 dark:bg-slate-100 text-slate-50 dark:text-slate-900 hover:bg-slate-900/90 dark:hover:bg-slate-100/90",
+        destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:hover:bg-red-900/90",
+        outline: "border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800",
+        secondary: "bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-slate-100 hover:bg-slate-100/80 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-900 dark:text-slate-100",
+        link: "text-slate-900 dark:text-slate-100 underline-offset-4 hover:underline",
+        fill: "bg-gray-100 dark:bg-slate-800 text-gray-900 dark:text-slate-100 hover:bg-gray-100/80 dark:hover:bg-slate-800/80 w-full",
+        blue: "bg-blue-500 text-white hover:bg-blue-500/90 w-full",
+        blue_light: "bg-blue-100 text-blue-500 hover:bg-blue-100/80 w-full font-semibold",
+        green: "bg-green-500 text-white hover:bg-green-500/90 w-full",
+        green_light: "bg-green-100 text-green-500 hover:bg-green-100/80 w-full font-semibold",
+        red: "bg-red-500 text-white hover:bg-red-500/90 w-full",
+        red_light: "bg-red-100 text-red-500 hover:bg-red-100/80 w-full font-semibold",
+        yellow: "bg-yellow-500 text-white hover:bg-yellow-500/90 w-full",
+        yellow_light: "bg-yellow-100 text-yellow-500 hover:bg-yellow-100/80 w-full font-semibold",
+        purple: "bg-purple-500 text-white hover:bg-purple-500/90 w-full",
+        purple_light: "bg-purple-100 text-purple-500 hover:bg-purple-100/80 w-full font-semibold",
+        pink: "bg-pink-500 text-white hover:bg-pink-500/90 w-full",
+        pink_light: "bg-pink-100 text-pink-500 hover:bg-pink-100/80 w-full font-semibold",
+        orange: "bg-orange-500 text-white hover:bg-orange-500/90 w-full",
+        orange_light: "bg-orange-100 text-orange-500 hover:bg-orange-100/80 w-full font-semibold",
+        cyan: "bg-cyan-500 text-white hover:bg-cyan-500/90 w-full",
+        cyan_light: "bg-cyan-100 text-cyan-500 hover:bg-cyan-100/80 w-full font-semibold",
+        teal: "bg-teal-500 text-white hover:bg-teal-500/90 w-full",
+        teal_light: "bg-teal-100 text-teal-500 hover:bg-teal-100/80 w-full font-semibold",
+        lime: "bg-lime-500 text-white hover:bg-lime-500/90 w-full",
+        lime_light: "bg-lime-100 text-lime-500 hover:bg-lime-100/80 w-full font-semibold",
+        indigo: "bg-indigo-500 text-white hover:bg-indigo-500/90 w-full",
+        indigo_light: "bg-indigo-100 text-indigo-500 hover:bg-indigo-100/80 w-full font-semibold",
+        violet: "bg-violet-500 text-white hover:bg-violet-500/90 w-full",
+        violet_light: "bg-violet-100 text-violet-500 hover:bg-violet-100/80 w-full font-semibold",
+        fuchsia: "bg-fuchsia-500 text-white hover:bg-fuchsia-500/90 w-full",
+        fuchsia_light: "bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-100/80 w-full font-semibold",
+        rose: "bg-rose-500 text-white hover:bg-rose-500/90 w-full",
+        rose_light: "bg-rose-100 text-rose-500 hover:bg-rose-100/80 w-full font-semibold",
+        emerald: "bg-emerald-500 text-white hover:bg-emerald-500/90 w-full",
+        emerald_light: "bg-emerald-100 text-emerald-500 hover:bg-emerald-100/80 w-full font-semibold",
+        sky: "bg-sky-500 text-white hover:bg-sky-500/90 w-full",
+        sky_light: "bg-sky-100 text-sky-500 hover:bg-sky-100/80 w-full font-semibold",
+        slate: "bg-slate-500 text-white hover:bg-slate-500/90 w-full",
+        gray: "bg-gray-500 text-white hover:bg-gray-500/90 w-full",
+        zinc: "bg-zinc-500 text-white hover:bg-zinc-500/90 w-full",
+        neutral: "bg-neutral-500 text-white hover:bg-neutral-500/90 w-full",
+        stone: "bg-stone-500 text-white hover:bg-stone-500/90 w-full",
+    };
+
+    const sizes = {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+    };
+
+    const style = `${baseStyle} ${variants[variant] || variants.default} ${sizes[size] || sizes.default} ${className}`;
+
+    return (
+        <button className={style} {...props}>
+            {children}
+        </button>
+    );
+}

package/frontend/resources/js/blue-bird/components/Card.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Typography from './Typography';
+
+export default function Card({ children, className = '', title, description, border = true, shadow = true }) {
+    return (
+        <div className={`rounded-lg ${border ? "border border-slate-200 dark:border-slate-800" : ""} ${shadow ? "shadow-sm" : ""} bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 ${className}`}>
+            {(title || description) && (
+                <div className="flex flex-col space-y-1.5 p-6">
+                    {title && <Typography variant='h5' className="font-semibold leading-none tracking-tight">{title}</Typography>}
+                    {description && <Typography variant='p' className="text-sm text-slate-500 dark:text-slate-400">{description}</Typography>}
+                </div>
+            )}
+            <div className={`p-6 ${title || description ? 'pt-0' : ''}`}>
+                {children}
+            </div>
+        </div>
+    );
+}