@komarcalabs/design-system 0.1.0

package/README.md

@@ -0,0 +1,409 @@
+# Komarca Design System
+
+> **"Construimos tecnología como ingenieros."**
+
+Librería compartida para construir interfaces consistentes en las apps de **Komarca Labs**.
+
+El paquete está preparado para **Vue** y **React**. El enfoque inicial es **Vue**, por eso los componentes Vue son la primera API estable.
+
+---
+
+## 🔗 Enlaces Rápidos
+
+| Recurso | Link |
+|---------|------|
+| 📖 [Storybook](http://localhost:6006) | Componentes interactivos |
+| 🎨 [Brand Guidelines](./docs/assets/brand-guidelines.png) | Identidad visual completa |
+| 🔘 [Botones y Variantes](./docs/assets/buttons-variants.png) | Sistema de botones |
+| 📚 [Brand Identity](./docs/brand-identity.md) | Documentación de identidad |
+| 📦 [CRM App Guide](./apps/crm-app/docs/buttons-guide.md) | Guía para CRM App |
+
+---
+
+## 📖 ¿Qué es Komarca Design System?
+
+Es nuestro **sistema de diseño unificado** que define cómo se ven y comportan todas las interfaces de Komarca Labs.
+
+### 🎯 Propósito
+
+Proporcionar una **base visual coherente** para:
+
+- ✅ **Dashboards empresariales** (ERP, CRM, Analytics)
+- ✅ **Plataformas de automatización**
+- ✅ **Sistemas de IA y workflows**
+- ✅ **Landing pages corporativas**
+- ✅ **Herramientas internas**
+
+### 🏗️ ¿Qué Incluye?
+
+| Categoría | Contenido |
+|-----------|-----------|
+| 🎨 **Tokens** | Colores, tipografía, spacing, shadows, radius |
+| 🧩 **Componentes** | Buttons, Inputs, Cards, Alerts, Badges, etc. |
+| 📐 **Variants** | Combinaciones tipadas con `tailwind-variants` |
+| 📚 **Documentación** | Storybook, guías de uso, ejemplos |
+| 🖼️ **Assets** | Iconos, logos, ilustraciones técnicas |
+
+### 🔧 Stack Tecnológico
+
+- **Tailwind CSS v4** - Utility-first CSS framework
+- **tailwind-variants** - System for component variants
+- **Vue 3** + **React 18** - Frameworks soportados
+- **Storybook 10** - Documentación y testing visual
+- **Vite** - Build tool y dev server
+
+---
+
+## 🖼️ Referencias Visuales
+
+### Brand Guidelines Completo
+
+![Komarca Labs Brand Guidelines](./docs/assets/brand-guidelines.png)
+
+**📄 Ver completo:** [brand-guidelines.png](./docs/assets/brand-guidelines.png)
+
+**Incluye:**
+- Paleta de colores principal y neutros
+- Colores semánticos
+- Tipografía (Inter / Geist / Manrope)
+- Iconografía técnica
+- Efectos glow
+- Modos de diseño (Blueprint, Corporate, Glow Tech)
+- Áreas de aplicación
+
+---
+
+### Botones y Variantes
+
+![Botones y Variantes](./docs/assets/buttons-variants.png)
+
+**📄 Ver completo:** [buttons-variants.png](./docs/assets/buttons-variants.png)
+
+**Incluye:**
+- 5 estilos principales (Solid, Outline, Soft, Ghost, Link)
+- 4 estados (Default, Hover, Focus, Disabled)
+- Botones por semántica (Éxito, Advertencia, Error, Información)
+- 4 tamaños (XS, SM, MD, LG)
+- Botones con íconos (izquierda, derecha, solo ícono)
+- Floating Action Buttons (FAB)
+- Estados especiales (Cargando, Procesando, Éxito, Error)
+- Uso en temas (Claro / Oscuro)
+
+---
+
+## 📚 Documentación Completa
+
+| Documento | Descripción |
+|-----------|-------------|
+| [🎨 Brand Identity](./docs/brand-identity.md) | Identidad visual completa, colores, tipografía, modos de diseño |
+| [🔘 Buttons Guide](./apps/crm-app/docs/buttons-guide.md) | Guía de uso de botones con ejemplos |
+| [📖 Storybook](http://localhost:6006) | Documentación interactiva de componentes |
+
+---
+
+## 🎨 Identidad Visual Komarca Labs
+
+### Brand Essence
+
+Komarca Labs representa **ingeniería de software aplicada a sistemas empresariales**. No somos una startup genérica ni una agencia de marketing — construimos tecnología real.
+
+**La UI debe comunicar:**
+- ✅ Técnica
+- ✅ Premium
+- ✅ Moderna
+- ✅ Estructurada
+- ✅ Tecnológica
+
+**NO debe sentirse como:**
+- ❌ Startup genérica
+- ❌ Agencia de marketing
+- ❌ SaaS pastel
+
+---
+
+### Core Colors
+
+| Color | Hex | Uso | Sensación |
+|-------|-----|-----|-----------|
+| **Primary Blue** | `#0D589D` | Botones, links, branding | Tecnología seria, ingeniería |
+| **Primary Hover** | `#0A4A84` | Interactive states | Profundidad, acción |
+| **Primary Dark** | `#083A69` | Fondos premium, dashboards | Robustez, corporativo |
+| **Primary Light** | `#DCEBFA` | Backgrounds suaves, badges | Informativo, sutil |
+| **Accent Cyan** | `#22D3EE` | IA, automatización, glow | Innovación, energía |
+| **Ink** | `#1E293B` | Blueprint, wireframes | Ingeniería, precisión |
+
+### Neutral Palette
+
+```css
+--km-gray-50:  #F8FAFC;  /* Backgrounds limpios */
+--km-gray-100: #F1F5F9;  /* Surfaces sutiles */
+--km-gray-200: #E2E8F0;  /* Bordes */
+--km-gray-500: #64748B;  /* Texto secundario */
+--km-gray-700: #334155;  /* Texto principal */
+--km-gray-900: #0F172A;  /* Texto dark mode */
+```
+
+### Semantic Colors
+
+| Semantic | Color | Background |
+|----------|-------|------------|
+| Success | `#10B981` | `#D1FAE5` |
+| Warning | `#F59E0B` | `#FEF3C7` |
+| Danger | `#EF4444` | `#FEE2E2` |
+| Info | `#3B82F6` | `#DBEAFE` |
+
+---
+
+### Design Modes
+
+#### 1. Blueprint Light
+- Fondo claro, sketches técnicos
+- Wireframes, grids, diagramas
+- **Uso:** Landing pages, marketing, servicios
+
+#### 2. Corporate Dark
+- Dark mode premium, glass effects
+- Glow sutil, profundidad
+- **Uso:** Dashboards, ERP, CRM, analytics
+
+#### 3. Glow Tech
+- Cyan glow, motion moderno
+- IA, automatización
+- **Uso:** Hero sections, features tecnológicas
+
+---
+
+### Typography
+
+**Primary:** Inter — Clean, technical, modern  
+**Code:** JetBrains Mono / SFMono — Engineering precision
+
+### UI Style
+
+**Buttons:**
+- Rounded-lg o rounded-xl
+- Sombras suaves
+- Glow ligero en hover
+
+**Cards:**
+- Bordes suaves, sombras sutiles
+- Espacio blanco, overlays blueprint
+- Grids técnicos
+
+**Sections:**
+- Alternar fondos claros/dark
+- Overlays técnicos, wireframes
+
+---
+
+### Glow Effects
+
+```css
+--km-glow-blue: rgba(13, 88, 157, 0.35);  /* Primary blue glow */
+--km-glow-cyan: rgba(34, 211, 238, 0.25); /* Accent cyan glow */
+```
+
+**Dark mode:** Más intensos (0.4-0.5 alpha)
+
+---
+
+### What To Avoid
+
+❌ Gradients crypto exagerados  
+❌ Demasiados colores  
+❌ Palettes pastel  
+❌ Estilos gamer  
+❌ Neones agresivos  
+❌ UI demasiado juvenil
+
+---
+
+### Brand Positioning
+
+Komarca Labs construye:
+- Software empresarial
+- Automatización
+- Sistemas
+- IA
+- Dashboards
+- Integraciones
+- Plataformas tecnológicas
+
+> **"Ingeniería tecnológica profesional."**
+
+---
+
+## Instalacion local
+
+Desde el root del monorepo:
+
+```bash
+bun run install:design-system
+```
+
+---
+
+## Uso en Vue
+
+```ts
+import { createApp } from "vue";
+import { KomarcaVueDesignSystem } from "@komarcalabs/design-system/vue";
+import "@komarcalabs/design-system/styles.css";
+
+import App from "./App.vue";
+
+createApp(App).use(KomarcaVueDesignSystem).mount("#app");
+```
+
+Tambien puedes importar componentes puntuales:
+
+```vue
+<script setup lang="ts">
+import { KmButton, KmInput } from "@komarcalabs/design-system/vue";
+</script>
+
+<template>
+  <KmInput label="Correo" placeholder="usuario@empresa.com" />
+  <KmButton variant="primary">Guardar</KmButton>
+</template>
+```
+
+---
+
+## 📖 Storybook
+
+Storybook es nuestro **laboratorio vivo de componentes**. Aquí puedes ver, probar y documentar todos los componentes del Design System en un entorno aislado.
+
+### ¿Por qué usar Storybook?
+
+- ✅ **Explorar componentes** — Ver todos los componentes disponibles
+- ✅ **Probar variantes** — Interactuar con props y ver cambios en tiempo real
+- ✅ **Ver código** — Copiar ejemplos de uso directamente
+- ✅ **Documentación viva** — Siempre actualizada con el último código
+- ✅ **Accesibilidad** — Tests automáticos de a11y
+
+### Comandos Disponibles
+
+**Vue (Entorno principal):**
+
+```bash
+# Build + Serve en http://localhost:6006
+bun run storybook:vue
+
+# Dev mode con live reload
+bun run storybook:vue:dev
+```
+
+**React:**
+
+```bash
+# Build + Serve en http://localhost:6007
+bun run storybook:react
+
+# Dev mode con live reload
+bun run storybook:react:dev
+```
+
+**Build Estático:**
+
+```bash
+# Genera build estático para deploy
+bun run build-storybook
+```
+
+### Requisitos
+
+- **Node.js:** `>=20.10` (Storybook 10)
+- **Navegador:** Chrome, Firefox, Edge (últimas versiones)
+
+### Estructura de Stories
+
+```txt
+src/vue/stories/
+  Button.stories.ts      # KmButton variants
+  Input.stories.ts       # KmInput variants
+  Alert.stories.ts       # KmAlert tones
+  Badge.stories.ts       # KmBadge tones
+  Avatar.stories.ts      # KmAvatar sizes
+  Card.stories.ts        # KmCard layouts
+  Select.stories.ts      # KmSelect options
+  Textarea.stories.ts    # KmTextarea
+  Spinner.stories.ts     # KmSpinner states
+  Stack.stories.ts       # KmStack layouts
+  Feedback.stories.ts    # Feedback overview
+  Form.stories.ts        # Form examples
+  Layout.stories.ts      # Layout examples
+```
+
+### URLs de Acceso
+
+| Entorno | URL | Estado |
+|---------|-----|--------|
+| Vue Storybook | `http://localhost:6006` | ✅ Activo |
+| React Storybook | `http://localhost:6007` | ✅ Activo |
+
+### Tips de Uso
+
+1. **Hot Reload:** Usa `storybook:vue:dev` para desarrollo
+2. **Build limpio:** Ejecuta `build-storybook` antes de deploy
+3. **Accesibilidad:** Revisa el panel de a11y en cada story
+4. **Controls:** Usa el panel derecho para probar variantes
+5. **Docs:** Cambia a la pestaña "Docs" para ver documentación
+
+---
+
+## Uso en React
+
+```tsx
+import { KmButton, KmInput } from "@komarcalabs/design-system/react";
+import "@komarcalabs/design-system/styles.css";
+
+export function Example() {
+  return (
+    <>
+      <KmInput label="Correo" placeholder="usuario@empresa.com" />
+      <KmButton variant="primary">Guardar</KmButton>
+    </>
+  );
+}
+```
+
+---
+
+## Estructura
+
+```txt
+src/
+  tokens/       Escalas de diseño en TypeScript
+  styles/       Variables CSS, theme Tailwind y base global
+  variants/     Variants tipadas con tailwind-variants
+  vue/          Componentes y plugin Vue
+  react/        Componentes React equivalentes
+  utils/        Utilidades compartidas
+```
+
+---
+
+## Tailwind CSS v4
+
+El paquete usa **Tailwind CSS v4** con el plugin oficial de Vite:
+
+```ts
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [tailwindcss()],
+});
+```
+
+La configuración visual vive en CSS con `@theme`, siguiendo el enfoque **CSS-first** de Tailwind v4. Las variants de componentes viven en `src/variants` con `tailwind-variants`.
+
+---
+
+## Principios
+
+- **Tokens primero:** color, espacio, radio, sombra y tipografía salen de una fuente común.
+- **Tailwind compartido:** Vue y React usan las mismas variants tipadas.
+- **Accesibilidad por defecto:** labels, focus visible, estados disabled e invalid.
+- **API pequeña y estable:** componentes simples antes de abstracciones grandes.
+- **Identidad Komarca:** técnica, premium, estructurada, tecnológica.

package/dist/carousel-D_f-K2v2.js

@@ -0,0 +1,83 @@
+import { tv as e } from "tailwind-variants";
+const r = e({
+  base: [
+    "relative rounded-full bg-km-muted text-km-muted-foreground flex justify-center items-center border border-km-border font-semibold overflow-hidden shrink-0"
+  ],
+  variants: {
+    size: {
+      xs: "h-4 w-4 text-[8px]",
+      sm: "h-5 w-5 text-xs",
+      md: "h-8 w-8 text-sm",
+      lg: "h-10 w-10 text-base"
+    },
+    hasImage: {
+      true: "p-0",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    {
+      hasImage: !1,
+      size: "xs",
+      class: "p-0.5"
+    },
+    {
+      hasImage: !1,
+      size: "sm",
+      class: "p-1"
+    },
+    {
+      hasImage: !1,
+      size: "md",
+      class: "p-1.5"
+    },
+    {
+      hasImage: !1,
+      size: "lg",
+      class: "p-2"
+    }
+  ],
+  defaultVariants: {
+    size: "sm",
+    hasImage: !1
+  }
+}), a = e({
+  base: "animate-spin shrink-0",
+  variants: {
+    size: {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    },
+    color: {
+      current: "text-current",
+      primary: "text-km-primary",
+      muted: "text-km-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    size: "sm",
+    color: "current"
+  }
+}), t = e({
+  slots: {
+    root: "relative group/carousel w-full",
+    button: [
+      "absolute top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full",
+      "bg-km-surface shadow-km-sm border border-km-border",
+      "flex items-center justify-center text-km-muted-foreground",
+      "hover:text-km-primary hover:border-km-primary hover:shadow-km-md",
+      "transition-all active:scale-90 cursor-pointer"
+    ],
+    wrapper: [
+      "flex gap-4 overflow-x-auto pb-4 pt-1 px-1",
+      "scroll-smooth snap-x snap-mandatory scrollbar-none"
+    ]
+  }
+});
+export {
+  r as a,
+  t as c,
+  a as s
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tokens/index';
+export * from './variants';
+export * from './vue/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,51 @@
+/* empty css               */
+import { _ as e, a as r, b as i, c as o, d as m, K as n, e as p, f as K, g, h as l, i as c, j as V, k as d, l as h, m as f, n as S, o as u, p as x } from "./plugin-DfFKi2ZR.js";
+import { a as D, b as T, c as y, d as w, f as C, i as k, s as B, e as v, g as A, t as j, h as F } from "./toggleSwitch-CpBXc_jq.js";
+import { a as I, c as R, g as _, h as q, r as z, b as E, d as G, s as J, e as L, f as M, t as N, i as O } from "./theme-CI9qhP-e.js";
+import { a as Q, c as U, s as W } from "./carousel-D_f-K2v2.js";
+export {
+  e as KmAlert,
+  r as KmAvatar,
+  i as KmBadge,
+  o as KmButton,
+  m as KmCard,
+  n as KmCarousel,
+  p as KmDialog,
+  K as KmDialogBody,
+  g as KmDialogFooter,
+  l as KmDialogHeader,
+  c as KmInput,
+  V as KmSelect,
+  d as KmSpinner,
+  h as KmStack,
+  f as KmStepper,
+  S as KmTextarea,
+  u as KmToggleSwitch,
+  x as KomarcaVueDesignSystem,
+  D as alertVariants,
+  I as applyTheme,
+  Q as avatarVariants,
+  T as badgeVariants,
+  y as buttonVariants,
+  w as cardVariants,
+  U as carouselVariants,
+  R as colors,
+  C as fieldVariants,
+  _ as getThemeVar,
+  q as hexToRgba,
+  k as inputVariants,
+  z as radii,
+  E as rawSemanticColors,
+  G as resetTheme,
+  B as selectVariants,
+  J as semanticColors,
+  L as shadows,
+  M as spacing,
+  W as spinnerVariants,
+  v as stackVariants,
+  A as stepperVariants,
+  j as textareaVariants,
+  N as themeDefinitions,
+  F as toggleSwitchVariants,
+  O as typography
+};