cuenti-dna 0.1.1-beta.0 → 0.1.1-beta.10

package/README.md

@@ -23,9 +23,15 @@ pnpm add cuenti-dna@beta
 
 Cuando publiques una version estable, podras instalar con `@latest`.
 
-### Inicializacion interactiva (estilo shadcn)
+### Inicializacion de estilos
 
-Despues de instalar, ejecuta el asistente interactivo:
+Durante la instalacion (`postinstall`):
+
+- En terminal interactiva, se abre automaticamente un asistente (wizard) para configurar estilos.
+- En entorno no interactivo, se intenta configurar automaticamente el primer archivo CSS detectado (por ejemplo `app/globals.css`, `src/index.css`, `src/main.css`, etc.).
+- Si no se detecta un archivo CSS conocido, se muestra un mensaje de fallback para importar `cuenti-dna/styles.css` o ejecutar `init` manualmente.
+
+Tambien puedes ejecutarlo manualmente cuando quieras:
 
 ```bash
 npx cuenti-dna@beta init
@@ -43,12 +49,14 @@ Este asistente:
 - Copia el contenido fuente real de [src/styles/globals.css](src/styles/globals.css) para evitar mantener variables duplicadas en el script.
 - Reordena imports con logica segura:
    - `@charset` (si existe)
-   - `@import "tailwindcss";`
    - resto de imports del usuario
    - imports de tipografias de Cuenti
+   - `@import "tailwindcss";` al final de la lista de imports
 - Inserta un bloque gestionado por Cuenti y deja el contenido original del usuario al final.
 - Si hay colisiones de variables, pregunta si deseas sobrescribir.
 
+Nota: `init` es opcional. Su objetivo es exponer tokens/variables en tu CSS para estilos propios del consumidor.
+
 Opciones utiles:
 
 ```bash
@@ -62,15 +70,49 @@ Tambien puedes controlar overwrite por variable de entorno:
 CUENTI_DNA_OVERWRITE_VARS=true npx cuenti-dna@beta init --yes
 ```
 
+Si no quieres que el wizard se ejecute al instalar (postinstall), puedes desactivarlo asi:
+
+```bash
+CUENTI_DNA_SKIP_INIT=true npm install cuenti-dna@beta
+```
+
 ## Uso
 
-Importa los componentes desde el paquete:
+Import recomendado por subpath:
 
 ```tsx
-import { Input, Button } from 'cuenti-dna'
+import { Input } from 'cuenti-dna/input'
+import type {
+   InputProps,
+   InputSizes,
+   InputTypes,
+   InputVariants
+} from 'cuenti-dna/input'
 ```
 
-Importa los estilos globales una sola vez en tu app (por ejemplo en el entrypoint):
+Tambien puedes importar cualquier modulo publico por su subpath:
+
+- `cuenti-dna/form`
+- `cuenti-dna/button`
+- `cuenti-dna/checkbox`
+- `cuenti-dna/helper-text`
+- `cuenti-dna/input`
+- `cuenti-dna/label`
+- `cuenti-dna/radio`
+- `cuenti-dna/select`
+- `cuenti-dna/switch`
+- `cuenti-dna/tooltip`
+- `cuenti-dna/card`
+- `cuenti-dna/scroll-area`
+- `cuenti-dna/use-formatted-numeric-input`
+- `cuenti-dna/use-radio`
+- `cuenti-dna/use-radio-group`
+- `cuenti-dna/icons`
+- `cuenti-dna/cn`
+
+La libreria inyecta automaticamente su `styles.css` compilado en runtime al importar cualquier subpath (por ejemplo `cuenti-dna/input`).
+
+Si prefieres carga explicita (por ejemplo por politicas CSP o control manual), puedes importar los estilos en tu entrypoint:
 
 ```tsx
 import 'cuenti-dna/styles.css'
@@ -80,7 +122,7 @@ Ejemplo rapido:
 
 ```tsx
 import 'cuenti-dna/styles.css'
-import { Input } from 'cuenti-dna'
+import { Input } from 'cuenti-dna/input'
 
 export function Example() {
   return (
@@ -103,50 +145,3 @@ export function Example() {
 - `pnpm run storybook`: levanta Storybook en desarrollo.
 - `pnpm run build-storybook`: genera el build estatico de Storybook en `storybook-static/`.
 - `pnpm run lint`: ejecuta Biome.
-
-## Publicacion en npm
-
-1. Inicia sesion en npm (una sola vez por maquina):
-
-   ```bash
-   npm login
-   ```
-
-2. Verifica build local:
-
-   ```bash
-   pnpm run build
-   ```
-
-3. (Opcional) Revisa el contenido que se publicara:
-
-   ```bash
-   npm pack --dry-run
-   ```
-
-4. Sube la version beta:
-
-   ```bash
-   npm version prerelease --preid beta
-   ```
-
-5. Publica con dist-tag beta:
-
-   ```bash
-   pnpm run publish:beta
-   ```
-
-Nota: al ser una version `beta`, npm exige publicar con `--tag beta`.
-
-## Storybook deploy
-
-Para deployar Storybook en tu proveedor preferido:
-
-1. Ejecuta `pnpm run build-storybook`.
-2. Publica el contenido de `storybook-static/`.
-
-Si usas Chromatic:
-
-```bash
-npx chromatic --project-token=<TU_TOKEN>
-```

package/dist/badge.cjs

@@ -0,0 +1,152 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/lib/badge.ts
+var badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge
+});
+module.exports = __toCommonJS(badge_exports);
+
+// src/lib/runtime-styles.ts
+var import_meta = {};
+var STYLE_LINK_ID = "cuenti-dna-runtime-styles";
+var runtimeStylesInitialized = false;
+var canInjectStyles = () => typeof window !== "undefined" && typeof document !== "undefined";
+var toFileHref = (filePath) => new URL(`file://${filePath.replace(/\\/g, "/")}`).href;
+var resolveStylesHrefFromImportMeta = () => {
+  try {
+    return new URL("./styles.css", import_meta.url).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHrefFromCommonJsFilename = () => {
+  if (typeof __filename !== "string") {
+    return null;
+  }
+  try {
+    return new URL("./styles.css", toFileHref(__filename)).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHref = () => resolveStylesHrefFromImportMeta() ?? resolveStylesHrefFromCommonJsFilename();
+var injectStylesheet = (href) => {
+  if (document.getElementById(STYLE_LINK_ID)) {
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = STYLE_LINK_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute("data-cuenti-dna", "runtime");
+  document.head.appendChild(link);
+};
+var ensureRuntimeStyles = () => {
+  if (runtimeStylesInitialized) {
+    return;
+  }
+  runtimeStylesInitialized = true;
+  if (!canInjectStyles()) {
+    return;
+  }
+  const href = resolveStylesHref();
+  if (!href) {
+    return;
+  }
+  injectStylesheet(href);
+};
+ensureRuntimeStyles();
+
+// src/components/surfaces/badge.tsx
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/surfaces/badge.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var badgeVariants = {
+  default: {
+    solid: "border-none bg-neutral-700 text-white",
+    translucent: "border-2 border-neutral-600 bg-neutral-200 text-neutral-700"
+  },
+  destructive: {
+    solid: "bg-destructive text-destructive-foreground",
+    translucent: "border-2 border-destructive-400 bg-destructive-25 text-destructive"
+  },
+  info: {
+    solid: "bg-info text-info-foreground",
+    translucent: "border-2 border-info bg-info-25 text-info"
+  },
+  success: {
+    solid: "bg-success text-success-foreground",
+    translucent: "border-2 border-success bg-success-25 text-success"
+  },
+  warning: {
+    solid: "bg-warning text-warning-foreground",
+    translucent: "border-2 border-warning bg-warning-50 text-warning"
+  },
+  error: {
+    solid: "bg-destructive text-destructive-foreground",
+    translucent: "border-2 border-destructive bg-destructive-50 text-destructive"
+  }
+};
+var badgeSizes = {
+  xs: "h-6 px-3 py-1 rounded-[8px] gap-1 text-sm",
+  sm: "h-10 px-5 py-2 rounded-[14px] gap-1.5",
+  md: "h-12 py-3 px-5 gap-1.5 rounded-[14px]"
+};
+var baseStyles = "font-semibold inline-flex items-center justify-center whitespace-nowrap font-medium leading-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1em]";
+var badgeStyles = (0, import_class_variance_authority.cva)(baseStyles, {
+  variants: {
+    size: badgeSizes
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Badge({
+  variant = "default",
+  color = "solid",
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    badgeStyles({ size }),
+    badgeVariants[variant][color],
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "data-slot": "badge", className: classes + "", ...props, children });
+}
+
+// src/lib/badge.ts
+ensureRuntimeStyles();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge
+});
+//# sourceMappingURL=badge.cjs.map

package/dist/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/badge.ts","../src/lib/runtime-styles.ts","../src/components/surfaces/badge.tsx","../src/utils/cn.ts"],"sourcesContent":["/* biome-ignore-all lint/performance/noBarrelFile: public package subpath entry point */\r\n\r\nimport { ensureRuntimeStyles } from '@/lib/runtime-styles'\r\n\r\nensureRuntimeStyles()\r\n\r\nexport { Badge } from '@/components/surfaces/badge'\r\nexport type {\r\n  BadgeColor,\r\n  BadgeProps,\r\n  BadgeSize,\r\n  BadgeVariants\r\n} from '@/types/atoms/surfaces/badge'\r\n","const STYLE_LINK_ID = 'cuenti-dna-runtime-styles'\nlet runtimeStylesInitialized = false\n\ndeclare const __filename: string | undefined\n\nconst canInjectStyles = () =>\n  typeof window !== 'undefined' && typeof document !== 'undefined'\n\nconst toFileHref = (filePath: string) =>\n  new URL(`file://${filePath.replace(/\\\\/g, '/')}`).href\n\nconst resolveStylesHrefFromImportMeta = () => {\n  try {\n    return new URL('./styles.css', import.meta.url).href\n  } catch {\n    return null\n  }\n}\n\nconst resolveStylesHrefFromCommonJsFilename = () => {\n  if (typeof __filename !== 'string') {\n    return null\n  }\n\n  try {\n    return new URL('./styles.css', toFileHref(__filename)).href\n  } catch {\n    return null\n  }\n}\n\nconst resolveStylesHref = () =>\n  resolveStylesHrefFromImportMeta() ?? resolveStylesHrefFromCommonJsFilename()\n\nconst injectStylesheet = (href: string) => {\n  if (document.getElementById(STYLE_LINK_ID)) {\n    return\n  }\n\n  const link = document.createElement('link')\n  link.id = STYLE_LINK_ID\n  link.rel = 'stylesheet'\n  link.href = href\n  link.setAttribute('data-cuenti-dna', 'runtime')\n  document.head.appendChild(link)\n}\n\nexport const ensureRuntimeStyles = () => {\n  if (runtimeStylesInitialized) {\n    return\n  }\n\n  runtimeStylesInitialized = true\n\n  if (!canInjectStyles()) {\n    return\n  }\n\n  const href = resolveStylesHref()\n\n  if (!href) {\n    return\n  }\n\n  injectStylesheet(href)\n}\n\nensureRuntimeStyles()\n","import { cva } from 'class-variance-authority'\r\nimport type {\r\n  BadgeColor,\r\n  BadgeProps,\r\n  BadgeSize,\r\n  BadgeVariants\r\n} from '@/types/atoms/surfaces/badge'\r\nimport { cn } from '@/utils/cn'\r\n\r\n/**\r\n * Variantes visuales disponibles para el componente Badge.\r\n */\r\nexport const badgeVariants = {\r\n  default: {\r\n    solid: 'border-none bg-neutral-700 text-white',\r\n    translucent: 'border-2 border-neutral-600 bg-neutral-200 text-neutral-700'\r\n  },\r\n  destructive: {\r\n    solid: 'bg-destructive text-destructive-foreground',\r\n    translucent:\r\n      'border-2 border-destructive-400 bg-destructive-25 text-destructive'\r\n  },\r\n  info: {\r\n    solid: 'bg-info text-info-foreground',\r\n    translucent: 'border-2 border-info bg-info-25 text-info'\r\n  },\r\n  success: {\r\n    solid: 'bg-success text-success-foreground',\r\n    translucent: 'border-2 border-success bg-success-25 text-success'\r\n  },\r\n  warning: {\r\n    solid: 'bg-warning text-warning-foreground',\r\n    translucent: 'border-2 border-warning bg-warning-50 text-warning'\r\n  },\r\n  error: {\r\n    solid: 'bg-destructive text-destructive-foreground',\r\n    translucent:\r\n      'border-2 border-destructive bg-destructive-50 text-destructive'\r\n  }\r\n} satisfies Record<BadgeVariants, Record<BadgeColor, string>>\r\n\r\n/**\r\n * Tamanos visuales disponibles para el componente Badge.\r\n */\r\nexport const badgeSizes = {\r\n  xs: 'h-6 px-3 py-1 rounded-[8px] gap-1 text-sm',\r\n  sm: 'h-10 px-5 py-2 rounded-[14px] gap-1.5',\r\n  md: 'h-12 py-3 px-5 gap-1.5 rounded-[14px]'\r\n} satisfies Record<BadgeSize, string>\r\n\r\nconst baseStyles =\r\n  \"font-semibold inline-flex items-center justify-center whitespace-nowrap font-medium leading-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1em]\"\r\n\r\nconst badgeStyles = cva(baseStyles, {\r\n  variants: {\r\n    size: badgeSizes\r\n  },\r\n  defaultVariants: {\r\n    size: 'md'\r\n  }\r\n} as const)\r\n\r\n/**\r\n * Componente Badge.\r\n *\r\n * Renderiza una etiqueta compacta con variantes semanticas y tamanos predefinidos.\r\n */\r\nexport function Badge({\r\n  variant = 'default',\r\n  color = 'solid',\r\n  size = 'md',\r\n  className,\r\n  children,\r\n  ...props\r\n}: BadgeProps) {\r\n  const classes = cn(\r\n    badgeStyles({ size }),\r\n    badgeVariants[variant][color],\r\n    className\r\n  )\r\n\r\n  return (\r\n    <span data-slot=\"badge\" className={classes + ''} {...props}>\r\n      {children}\r\n    </span>\r\n  )\r\n}\r\n","import type { ClassValue } from 'clsx'\nimport { clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Combina clases condicionales y resuelve conflictos de Tailwind.\n *\n * Usa `clsx` para componer entradas heterogeneas y `tailwind-merge`\n * para priorizar la ultima clase utilitaria en conflicto.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA;AAAA,IAAM,gBAAgB;AACtB,IAAI,2BAA2B;AAI/B,IAAM,kBAAkB,MACtB,OAAO,WAAW,eAAe,OAAO,aAAa;AAEvD,IAAM,aAAa,CAAC,aAClB,IAAI,IAAI,UAAU,SAAS,QAAQ,OAAO,GAAG,CAAC,EAAE,EAAE;AAEpD,IAAM,kCAAkC,MAAM;AAC5C,MAAI;AACF,WAAO,IAAI,IAAI,gBAAgB,YAAY,GAAG,EAAE;AAAA,EAClD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,IAAM,wCAAwC,MAAM;AAClD,MAAI,OAAO,eAAe,UAAU;AAClC,WAAO;AAAA,EACT;AAEA,MAAI;AACF,WAAO,IAAI,IAAI,gBAAgB,WAAW,UAAU,CAAC,EAAE;AAAA,EACzD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,IAAM,oBAAoB,MACxB,gCAAgC,KAAK,sCAAsC;AAE7E,IAAM,mBAAmB,CAAC,SAAiB;AACzC,MAAI,SAAS,eAAe,aAAa,GAAG;AAC1C;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,KAAK;AACV,OAAK,MAAM;AACX,OAAK,OAAO;AACZ,OAAK,aAAa,mBAAmB,SAAS;AAC9C,WAAS,KAAK,YAAY,IAAI;AAChC;AAEO,IAAM,sBAAsB,MAAM;AACvC,MAAI,0BAA0B;AAC5B;AAAA,EACF;AAEA,6BAA2B;AAE3B,MAAI,CAAC,gBAAgB,GAAG;AACtB;AAAA,EACF;AAEA,QAAM,OAAO,kBAAkB;AAE/B,MAAI,CAAC,MAAM;AACT;AAAA,EACF;AAEA,mBAAiB,IAAI;AACvB;AAEA,oBAAoB;;;ACnEpB,sCAAoB;;;ACCpB,kBAAqB;AACrB,4BAAwB;AAQjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADsEI;AAtEG,IAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,aACE;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,aACE;AAAA,EACJ;AACF;AAKO,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,aACJ;AAEF,IAAM,kBAAc,qCAAI,YAAY;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAU;AAOH,SAAS,MAAM;AAAA,EACpB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU;AAAA,IACd,YAAY,EAAE,KAAK,CAAC;AAAA,IACpB,cAAc,OAAO,EAAE,KAAK;AAAA,IAC5B;AAAA,EACF;AAEA,SACE,4CAAC,UAAK,aAAU,SAAQ,WAAW,UAAU,IAAK,GAAG,OAClD,UACH;AAEJ;;;AFlFA,oBAAoB;","names":[]}

package/dist/badge.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Propiedades publicas del componente `Badge`.
+ */
+type BadgeProps = {
+    /**
+     * Variante visual del badge.
+     * @default 'default'
+     * @variation 'default' | 'destructive' | 'info' | 'success' | 'warning' | 'error'
+     * @see {@link BadgeVariants}
+     */
+    variant?: BadgeVariants;
+    /**
+     * Nivel de color del badge.
+     * @default 'solid'
+     * @variation 'solid' | 'translucent'
+     * @see {@link BadgeColor}
+     */
+    color?: BadgeColor;
+    /**
+     * Tamano del badge.
+     * @default 'md'
+     * @variation 'xs' | 'sm' | 'md'
+     * @see {@link BadgeSize}
+     */
+    size?: BadgeSize;
+} & React.HTMLAttributes<HTMLSpanElement>;
+/** Variantes visuales disponibles para el badge. */
+type BadgeVariants = 'default' | 'destructive' | 'info' | 'success' | 'warning' | 'error';
+/** Niveles de color disponibles para el badge. */
+type BadgeColor = 'solid' | 'translucent';
+/** Tamanos disponibles para el badge. */
+type BadgeSize = 'xs' | 'sm' | 'md';
+
+/**
+ * Componente Badge.
+ *
+ * Renderiza una etiqueta compacta con variantes semanticas y tamanos predefinidos.
+ */
+declare function Badge({ variant, color, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariants };

package/dist/badge.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Propiedades publicas del componente `Badge`.
+ */
+type BadgeProps = {
+    /**
+     * Variante visual del badge.
+     * @default 'default'
+     * @variation 'default' | 'destructive' | 'info' | 'success' | 'warning' | 'error'
+     * @see {@link BadgeVariants}
+     */
+    variant?: BadgeVariants;
+    /**
+     * Nivel de color del badge.
+     * @default 'solid'
+     * @variation 'solid' | 'translucent'
+     * @see {@link BadgeColor}
+     */
+    color?: BadgeColor;
+    /**
+     * Tamano del badge.
+     * @default 'md'
+     * @variation 'xs' | 'sm' | 'md'
+     * @see {@link BadgeSize}
+     */
+    size?: BadgeSize;
+} & React.HTMLAttributes<HTMLSpanElement>;
+/** Variantes visuales disponibles para el badge. */
+type BadgeVariants = 'default' | 'destructive' | 'info' | 'success' | 'warning' | 'error';
+/** Niveles de color disponibles para el badge. */
+type BadgeColor = 'solid' | 'translucent';
+/** Tamanos disponibles para el badge. */
+type BadgeSize = 'xs' | 'sm' | 'md';
+
+/**
+ * Componente Badge.
+ *
+ * Renderiza una etiqueta compacta con variantes semanticas y tamanos predefinidos.
+ */
+declare function Badge({ variant, color, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariants };

package/dist/badge.js

@@ -0,0 +1,124 @@
+// src/lib/runtime-styles.ts
+var STYLE_LINK_ID = "cuenti-dna-runtime-styles";
+var runtimeStylesInitialized = false;
+var canInjectStyles = () => typeof window !== "undefined" && typeof document !== "undefined";
+var toFileHref = (filePath) => new URL(`file://${filePath.replace(/\\/g, "/")}`).href;
+var resolveStylesHrefFromImportMeta = () => {
+  try {
+    return new URL("./styles.css", import.meta.url).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHrefFromCommonJsFilename = () => {
+  if (typeof __filename !== "string") {
+    return null;
+  }
+  try {
+    return new URL("./styles.css", toFileHref(__filename)).href;
+  } catch {
+    return null;
+  }
+};
+var resolveStylesHref = () => resolveStylesHrefFromImportMeta() ?? resolveStylesHrefFromCommonJsFilename();
+var injectStylesheet = (href) => {
+  if (document.getElementById(STYLE_LINK_ID)) {
+    return;
+  }
+  const link = document.createElement("link");
+  link.id = STYLE_LINK_ID;
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute("data-cuenti-dna", "runtime");
+  document.head.appendChild(link);
+};
+var ensureRuntimeStyles = () => {
+  if (runtimeStylesInitialized) {
+    return;
+  }
+  runtimeStylesInitialized = true;
+  if (!canInjectStyles()) {
+    return;
+  }
+  const href = resolveStylesHref();
+  if (!href) {
+    return;
+  }
+  injectStylesheet(href);
+};
+ensureRuntimeStyles();
+
+// src/components/surfaces/badge.tsx
+import { cva } from "class-variance-authority";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/surfaces/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = {
+  default: {
+    solid: "border-none bg-neutral-700 text-white",
+    translucent: "border-2 border-neutral-600 bg-neutral-200 text-neutral-700"
+  },
+  destructive: {
+    solid: "bg-destructive text-destructive-foreground",
+    translucent: "border-2 border-destructive-400 bg-destructive-25 text-destructive"
+  },
+  info: {
+    solid: "bg-info text-info-foreground",
+    translucent: "border-2 border-info bg-info-25 text-info"
+  },
+  success: {
+    solid: "bg-success text-success-foreground",
+    translucent: "border-2 border-success bg-success-25 text-success"
+  },
+  warning: {
+    solid: "bg-warning text-warning-foreground",
+    translucent: "border-2 border-warning bg-warning-50 text-warning"
+  },
+  error: {
+    solid: "bg-destructive text-destructive-foreground",
+    translucent: "border-2 border-destructive bg-destructive-50 text-destructive"
+  }
+};
+var badgeSizes = {
+  xs: "h-6 px-3 py-1 rounded-[8px] gap-1 text-sm",
+  sm: "h-10 px-5 py-2 rounded-[14px] gap-1.5",
+  md: "h-12 py-3 px-5 gap-1.5 rounded-[14px]"
+};
+var baseStyles = "font-semibold inline-flex items-center justify-center whitespace-nowrap font-medium leading-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1em]";
+var badgeStyles = cva(baseStyles, {
+  variants: {
+    size: badgeSizes
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function Badge({
+  variant = "default",
+  color = "solid",
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  const classes = cn(
+    badgeStyles({ size }),
+    badgeVariants[variant][color],
+    className
+  );
+  return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: classes + "", ...props, children });
+}
+
+// src/lib/badge.ts
+ensureRuntimeStyles();
+export {
+  Badge
+};
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/runtime-styles.ts","../src/components/surfaces/badge.tsx","../src/utils/cn.ts","../src/lib/badge.ts"],"sourcesContent":["const STYLE_LINK_ID = 'cuenti-dna-runtime-styles'\nlet runtimeStylesInitialized = false\n\ndeclare const __filename: string | undefined\n\nconst canInjectStyles = () =>\n  typeof window !== 'undefined' && typeof document !== 'undefined'\n\nconst toFileHref = (filePath: string) =>\n  new URL(`file://${filePath.replace(/\\\\/g, '/')}`).href\n\nconst resolveStylesHrefFromImportMeta = () => {\n  try {\n    return new URL('./styles.css', import.meta.url).href\n  } catch {\n    return null\n  }\n}\n\nconst resolveStylesHrefFromCommonJsFilename = () => {\n  if (typeof __filename !== 'string') {\n    return null\n  }\n\n  try {\n    return new URL('./styles.css', toFileHref(__filename)).href\n  } catch {\n    return null\n  }\n}\n\nconst resolveStylesHref = () =>\n  resolveStylesHrefFromImportMeta() ?? resolveStylesHrefFromCommonJsFilename()\n\nconst injectStylesheet = (href: string) => {\n  if (document.getElementById(STYLE_LINK_ID)) {\n    return\n  }\n\n  const link = document.createElement('link')\n  link.id = STYLE_LINK_ID\n  link.rel = 'stylesheet'\n  link.href = href\n  link.setAttribute('data-cuenti-dna', 'runtime')\n  document.head.appendChild(link)\n}\n\nexport const ensureRuntimeStyles = () => {\n  if (runtimeStylesInitialized) {\n    return\n  }\n\n  runtimeStylesInitialized = true\n\n  if (!canInjectStyles()) {\n    return\n  }\n\n  const href = resolveStylesHref()\n\n  if (!href) {\n    return\n  }\n\n  injectStylesheet(href)\n}\n\nensureRuntimeStyles()\n","import { cva } from 'class-variance-authority'\r\nimport type {\r\n  BadgeColor,\r\n  BadgeProps,\r\n  BadgeSize,\r\n  BadgeVariants\r\n} from '@/types/atoms/surfaces/badge'\r\nimport { cn } from '@/utils/cn'\r\n\r\n/**\r\n * Variantes visuales disponibles para el componente Badge.\r\n */\r\nexport const badgeVariants = {\r\n  default: {\r\n    solid: 'border-none bg-neutral-700 text-white',\r\n    translucent: 'border-2 border-neutral-600 bg-neutral-200 text-neutral-700'\r\n  },\r\n  destructive: {\r\n    solid: 'bg-destructive text-destructive-foreground',\r\n    translucent:\r\n      'border-2 border-destructive-400 bg-destructive-25 text-destructive'\r\n  },\r\n  info: {\r\n    solid: 'bg-info text-info-foreground',\r\n    translucent: 'border-2 border-info bg-info-25 text-info'\r\n  },\r\n  success: {\r\n    solid: 'bg-success text-success-foreground',\r\n    translucent: 'border-2 border-success bg-success-25 text-success'\r\n  },\r\n  warning: {\r\n    solid: 'bg-warning text-warning-foreground',\r\n    translucent: 'border-2 border-warning bg-warning-50 text-warning'\r\n  },\r\n  error: {\r\n    solid: 'bg-destructive text-destructive-foreground',\r\n    translucent:\r\n      'border-2 border-destructive bg-destructive-50 text-destructive'\r\n  }\r\n} satisfies Record<BadgeVariants, Record<BadgeColor, string>>\r\n\r\n/**\r\n * Tamanos visuales disponibles para el componente Badge.\r\n */\r\nexport const badgeSizes = {\r\n  xs: 'h-6 px-3 py-1 rounded-[8px] gap-1 text-sm',\r\n  sm: 'h-10 px-5 py-2 rounded-[14px] gap-1.5',\r\n  md: 'h-12 py-3 px-5 gap-1.5 rounded-[14px]'\r\n} satisfies Record<BadgeSize, string>\r\n\r\nconst baseStyles =\r\n  \"font-semibold inline-flex items-center justify-center whitespace-nowrap font-medium leading-none transition-colors duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[1em]\"\r\n\r\nconst badgeStyles = cva(baseStyles, {\r\n  variants: {\r\n    size: badgeSizes\r\n  },\r\n  defaultVariants: {\r\n    size: 'md'\r\n  }\r\n} as const)\r\n\r\n/**\r\n * Componente Badge.\r\n *\r\n * Renderiza una etiqueta compacta con variantes semanticas y tamanos predefinidos.\r\n */\r\nexport function Badge({\r\n  variant = 'default',\r\n  color = 'solid',\r\n  size = 'md',\r\n  className,\r\n  children,\r\n  ...props\r\n}: BadgeProps) {\r\n  const classes = cn(\r\n    badgeStyles({ size }),\r\n    badgeVariants[variant][color],\r\n    className\r\n  )\r\n\r\n  return (\r\n    <span data-slot=\"badge\" className={classes + ''} {...props}>\r\n      {children}\r\n    </span>\r\n  )\r\n}\r\n","import type { ClassValue } from 'clsx'\nimport { clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Combina clases condicionales y resuelve conflictos de Tailwind.\n *\n * Usa `clsx` para componer entradas heterogeneas y `tailwind-merge`\n * para priorizar la ultima clase utilitaria en conflicto.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","/* biome-ignore-all lint/performance/noBarrelFile: public package subpath entry point */\r\n\r\nimport { ensureRuntimeStyles } from '@/lib/runtime-styles'\r\n\r\nensureRuntimeStyles()\r\n\r\nexport { Badge } from '@/components/surfaces/badge'\r\nexport type {\r\n  BadgeColor,\r\n  BadgeProps,\r\n  BadgeSize,\r\n  BadgeVariants\r\n} from '@/types/atoms/surfaces/badge'\r\n"],"mappings":";AAAA,IAAM,gBAAgB;AACtB,IAAI,2BAA2B;AAI/B,IAAM,kBAAkB,MACtB,OAAO,WAAW,eAAe,OAAO,aAAa;AAEvD,IAAM,aAAa,CAAC,aAClB,IAAI,IAAI,UAAU,SAAS,QAAQ,OAAO,GAAG,CAAC,EAAE,EAAE;AAEpD,IAAM,kCAAkC,MAAM;AAC5C,MAAI;AACF,WAAO,IAAI,IAAI,gBAAgB,YAAY,GAAG,EAAE;AAAA,EAClD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,IAAM,wCAAwC,MAAM;AAClD,MAAI,OAAO,eAAe,UAAU;AAClC,WAAO;AAAA,EACT;AAEA,MAAI;AACF,WAAO,IAAI,IAAI,gBAAgB,WAAW,UAAU,CAAC,EAAE;AAAA,EACzD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,IAAM,oBAAoB,MACxB,gCAAgC,KAAK,sCAAsC;AAE7E,IAAM,mBAAmB,CAAC,SAAiB;AACzC,MAAI,SAAS,eAAe,aAAa,GAAG;AAC1C;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,KAAK;AACV,OAAK,MAAM;AACX,OAAK,OAAO;AACZ,OAAK,aAAa,mBAAmB,SAAS;AAC9C,WAAS,KAAK,YAAY,IAAI;AAChC;AAEO,IAAM,sBAAsB,MAAM;AACvC,MAAI,0BAA0B;AAC5B;AAAA,EACF;AAEA,6BAA2B;AAE3B,MAAI,CAAC,gBAAgB,GAAG;AACtB;AAAA,EACF;AAEA,QAAM,OAAO,kBAAkB;AAE/B,MAAI,CAAC,MAAM;AACT;AAAA,EACF;AAEA,mBAAiB,IAAI;AACvB;AAEA,oBAAoB;;;ACnEpB,SAAS,WAAW;;;ACCpB,SAAS,YAAY;AACrB,SAAS,eAAe;AAQjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADsEI;AAtEG,IAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,aAAa;AAAA,IACX,OAAO;AAAA,IACP,aACE;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,aACE;AAAA,EACJ;AACF;AAKO,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,aACJ;AAEF,IAAM,cAAc,IAAI,YAAY;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAU;AAOH,SAAS,MAAM;AAAA,EACpB,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,UAAU;AAAA,IACd,YAAY,EAAE,KAAK,CAAC;AAAA,IACpB,cAAc,OAAO,EAAE,KAAK;AAAA,IAC5B;AAAA,EACF;AAEA,SACE,oBAAC,UAAK,aAAU,SAAQ,WAAW,UAAU,IAAK,GAAG,OAClD,UACH;AAEJ;;;AElFA,oBAAoB;","names":[]}