@grupor5/raya 0.2.1 → 0.2.2

package/README.md

@@ -199,16 +199,45 @@ Finalmente, importa los estilos base de Raya en tu archivo CSS principal (por ej
 
 Esto asegura que todas las variables CSS y estilos base del sistema de diseño estén disponibles en tu aplicación.
 
-### Uso de Iconos
+### Uso de Componentes e Iconos
 
-Los iconos ahora se importan desde el paquete separado `@grupor5/raya-icons`:
+#### Componentes del Sistema de Diseño
+
+Los componentes ahora soportan importaciones individuales para optimizar el bundle size:
 
 ```tsx
-// Importación individual (recomendado para tree-shaking óptimo)
+// ✅ Importación individual (recomendado para bundle size óptimo)
+import { Button } from '@grupor5/raya/atoms/button';
+import { Card } from '@grupor5/raya/molecules/card';
+import { Input } from '@grupor5/raya/atoms/input';
+
+// ✅ Importación por barrel (carga todos los componentes)
+import { Button, Card, Input } from '@grupor5/raya';
+
+// ✅ Importación de tokens individuales
+import { colors } from '@grupor5/raya/tokens/colors';
+import { spacing } from '@grupor5/raya/tokens/spacing';
+
+function MyComponent() {
+  return (
+    <Card className="p-6">
+      <Input placeholder="Ingresa tu nombre" />
+      <Button variant="primary">Enviar</Button>
+    </Card>
+  );
+}
+```
+
+#### Uso de Iconos
+
+Los iconos se importan desde el paquete separado `@grupor5/raya-icons`:
+
+```tsx
+// ✅ Importación individual (recomendado para tree-shaking óptimo)
 import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';
 import { EditIcon } from '@grupor5/raya-icons/icons/EditIcon';
 
-// Importación por barrel (solo iconos comunes)
+// ✅ Importación por barrel (solo iconos comunes - 27 iconos)
 import { AddIcon, EditIcon, CheckIcon } from '@grupor5/raya-icons';
 
 function MyComponent() {
@@ -221,6 +250,20 @@ function MyComponent() {
 }
 ```
 
+#### Recomendaciones de Bundle Size
+
+- **Para aplicaciones pequeñas**: Usa importaciones por barrel para simplicidad
+- **Para aplicaciones grandes**: Usa importaciones individuales para optimizar bundle size
+- **Componentes pesados**: Siempre usa importación individual para DataTable, Chart, DatePicker
+
+```tsx
+// ❌ Evitar para componentes pesados
+import { DataTable } from '@grupor5/raya';
+
+// ✅ Preferir importación individual
+import { DataTable } from '@grupor5/raya/molecules/data-table';
+```
+
 ## 🧩 Components (Coming Soon)
 
 React components built on shadcn/ui foundation:

package/dist/atoms/avatar/index.d.mts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string | null;
+    name: string;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+declare function AvatarSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarSkeleton };

package/dist/atoms/avatar/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string | null;
+    name: string;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+declare function AvatarSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarSkeleton };

package/dist/atoms/avatar/index.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function getInitials(name) {
+  const [firstName, lastName] = name.split(" ");
+  if (firstName && lastName) {
+    return `${firstName[0]}${lastName[0]}`.toUpperCase();
+  }
+  return firstName ? `${firstName.substring(0, 2)}`.toUpperCase() : "N/A";
+}
+var Avatar = React__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { src, name, className } = _b, props = __objRest(_b, ["src", "name", "className"]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-semibold text-primary",
+          className
+        )
+      }, props), {
+        children: src ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: name,
+            className: "h-full w-full rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: getInitials(name) })
+      })
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+function AvatarSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-neutral-200" });
+}
+
+exports.Avatar = Avatar;
+exports.AvatarSkeleton = AvatarSkeleton;

package/dist/atoms/avatar/index.mjs

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function getInitials(name) {
+  const [firstName, lastName] = name.split(" ");
+  if (firstName && lastName) {
+    return `${firstName[0]}${lastName[0]}`.toUpperCase();
+  }
+  return firstName ? `${firstName.substring(0, 2)}`.toUpperCase() : "N/A";
+}
+var Avatar = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { src, name, className } = _b, props = __objRest(_b, ["src", "name", "className"]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-sm font-semibold text-primary",
+          className
+        )
+      }, props), {
+        children: src ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: name,
+            className: "h-full w-full rounded-full object-cover"
+          }
+        ) : /* @__PURE__ */ jsx("span", { children: getInitials(name) })
+      })
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+function AvatarSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "h-10 w-10 shrink-0 animate-pulse rounded-full bg-neutral-200" });
+}
+
+export { Avatar, AvatarSkeleton };

package/dist/atoms/badge/index.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "success" | "danger" | "pending" | "in-progress" | null | undefined;
+    shape?: "rounded" | "circular" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    visual?: "solid" | "dot" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, size, visual, shape, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/atoms/badge/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "success" | "danger" | "pending" | "in-progress" | null | undefined;
+    shape?: "rounded" | "circular" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    visual?: "solid" | "dot" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, size, visual, shape, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+export { Badge, type BadgeProps, badgeVariants };

package/dist/atoms/badge/index.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var rayaIcons = require('@grupor5/raya-icons');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-badge border px-badge-x py-badge-y text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        success: "border-transparent",
+        danger: "border-transparent",
+        pending: "border-transparent",
+        "in-progress": "border-transparent"
+      },
+      shape: {
+        rounded: "",
+        circular: "rounded-full !px-0"
+      },
+      size: {
+        sm: "text-badge-sm",
+        md: "text-badge-md",
+        lg: "text-badge-lg"
+      },
+      visual: {
+        solid: "",
+        dot: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      // Default
+      {
+        variant: "default",
+        visual: "solid",
+        className: "bg-badge-default-background text-badge-default-text-on-solid"
+      },
+      {
+        variant: "default",
+        visual: "dot",
+        className: "text-badge-default-text"
+      },
+      // In Progress
+      {
+        variant: "in-progress",
+        visual: "solid",
+        className: "bg-badge-in-progress-background text-badge-in-progress-text"
+      },
+      {
+        variant: "in-progress",
+        visual: "dot",
+        className: "text-badge-in-progress-text"
+      },
+      // Success
+      {
+        variant: "success",
+        visual: "solid",
+        className: "bg-badge-success-background text-badge-success-text"
+      },
+      {
+        variant: "success",
+        visual: "dot",
+        className: "text-badge-success-text"
+      },
+      // Pending
+      {
+        variant: "pending",
+        visual: "solid",
+        className: "bg-badge-pending-background text-badge-pending-text"
+      },
+      {
+        variant: "pending",
+        visual: "dot",
+        className: "text-badge-pending-text"
+      },
+      // Danger
+      {
+        variant: "danger",
+        visual: "solid",
+        className: "bg-badge-danger-background text-badge-danger-text"
+      },
+      {
+        variant: "danger",
+        visual: "dot",
+        className: "text-badge-danger-text"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      visual: "solid",
+      shape: "rounded"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, { className, variant, size, visual, shape } = _b, props = __objRest(_b, ["className", "variant", "size", "visual", "shape"]);
+  const iconSize = size === "sm" ? 8 : size === "lg" ? 12 : 10;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", __spreadProps(__spreadValues({ className: cn(badgeVariants({ variant, size, visual, shape }), className) }, props), { children: [
+    visual === "dot" && /* @__PURE__ */ jsxRuntime.jsx(
+      rayaIcons.DotIcon,
+      {
+        size: iconSize,
+        className: cn("flex-shrink-0", { "mr-1.5": !!props.children })
+      }
+    ),
+    props.children
+  ] }));
+}
+
+exports.Badge = Badge;
+exports.badgeVariants = badgeVariants;

package/dist/atoms/badge/index.mjs

@@ -0,0 +1,146 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { DotIcon } from '@grupor5/raya-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-badge border px-badge-x py-badge-y text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        success: "border-transparent",
+        danger: "border-transparent",
+        pending: "border-transparent",
+        "in-progress": "border-transparent"
+      },
+      shape: {
+        rounded: "",
+        circular: "rounded-full !px-0"
+      },
+      size: {
+        sm: "text-badge-sm",
+        md: "text-badge-md",
+        lg: "text-badge-lg"
+      },
+      visual: {
+        solid: "",
+        dot: "bg-transparent"
+      }
+    },
+    compoundVariants: [
+      // Default
+      {
+        variant: "default",
+        visual: "solid",
+        className: "bg-badge-default-background text-badge-default-text-on-solid"
+      },
+      {
+        variant: "default",
+        visual: "dot",
+        className: "text-badge-default-text"
+      },
+      // In Progress
+      {
+        variant: "in-progress",
+        visual: "solid",
+        className: "bg-badge-in-progress-background text-badge-in-progress-text"
+      },
+      {
+        variant: "in-progress",
+        visual: "dot",
+        className: "text-badge-in-progress-text"
+      },
+      // Success
+      {
+        variant: "success",
+        visual: "solid",
+        className: "bg-badge-success-background text-badge-success-text"
+      },
+      {
+        variant: "success",
+        visual: "dot",
+        className: "text-badge-success-text"
+      },
+      // Pending
+      {
+        variant: "pending",
+        visual: "solid",
+        className: "bg-badge-pending-background text-badge-pending-text"
+      },
+      {
+        variant: "pending",
+        visual: "dot",
+        className: "text-badge-pending-text"
+      },
+      // Danger
+      {
+        variant: "danger",
+        visual: "solid",
+        className: "bg-badge-danger-background text-badge-danger-text"
+      },
+      {
+        variant: "danger",
+        visual: "dot",
+        className: "text-badge-danger-text"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      visual: "solid",
+      shape: "rounded"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, { className, variant, size, visual, shape } = _b, props = __objRest(_b, ["className", "variant", "size", "visual", "shape"]);
+  const iconSize = size === "sm" ? 8 : size === "lg" ? 12 : 10;
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: cn(badgeVariants({ variant, size, visual, shape }), className) }, props), { children: [
+    visual === "dot" && /* @__PURE__ */ jsx(
+      DotIcon,
+      {
+        size: iconSize,
+        className: cn("flex-shrink-0", { "mr-1.5": !!props.children })
+      }
+    ),
+    props.children
+  ] }));
+}
+
+export { Badge, badgeVariants };

package/dist/atoms/button/index.d.mts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { ButtonProps as ButtonProps$1 } from '../../tokens/buttons.mjs';
+
+interface ButtonProps extends Omit<ButtonProps$1, 'icon' | 'iconLeft' | 'iconRight'> {
+    icon?: React__default.ReactNode;
+    iconLeft?: React__default.ReactNode;
+    iconRight?: React__default.ReactNode;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };

package/dist/atoms/button/index.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+import { ButtonProps as ButtonProps$1 } from '../../tokens/buttons.js';
+
+interface ButtonProps extends Omit<ButtonProps$1, 'icon' | 'iconLeft' | 'iconRight'> {
+    icon?: React__default.ReactNode;
+    iconLeft?: React__default.ReactNode;
+    iconRight?: React__default.ReactNode;
+}
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { Button, type ButtonProps };