@adamosuiteservices/ui 2.10.0 → 2.10.1

package/dist/card.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./jsx-runtime-BB_1_6y_.cjs"),d=require("./index-DoxiiusW.cjs"),n=require("./index-BTzZJcis.cjs");require("react");const e=n.cva(`
-    adm:flex adm:flex-col adm:gap-6 adm:rounded-3xl adm:border adm:bg-card
-    adm:py-6 adm:text-card-foreground adm:shadow-xs
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./jsx-runtime-BB_1_6y_.cjs"),r=require("./index-DoxiiusW.cjs"),c=require("./index-BTzZJcis.cjs");require("react");const e=c.cva(`
+    adm:flex adm:flex-col adm:gap-6 adm:rounded-3xl adm:bg-card adm:py-6
+    adm:text-card-foreground
   `,{variants:{variant:{default:"adm:bg-card adm:text-card-foreground",primary:`
             adm:bg-primary-50
             adm:*:data-[slot=alert-description]:text-primary/90
@@ -26,15 +26,15 @@
             adm:*:data-[slot=alert-description]:text-destructive/90
             adm:[&>[data-slot=icon]]:text-current
             adm:[&>svg]:text-current
-          `}},defaultVariants:{variant:"default"}});function o({className:t,variant:a,...s}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card",className:d.cn(e({variant:a}),t),...s})}function c({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-header",className:d.cn(`
+          `},shadow:{default:"adm:shadow-xs",none:"adm:shadow-none"},border:{default:"adm:border",transparent:"adm:border adm:border-transparent"}},defaultVariants:{variant:"default",shadow:"none",border:"default"}});function m({className:t,variant:a,shadow:n,border:s,...o}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card",className:r.cn(e({variant:a,shadow:n,border:s}),t),...o})}function i({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-header",className:r.cn(`
           adm:@container/card-header adm:grid adm:auto-rows-min
           adm:grid-rows-[auto_auto] adm:items-start adm:gap-2 adm:px-6
           adm:has-data-[slot=card-action]:grid-cols-[1fr_auto]
           adm:[.border-b]:pb-6
-        `,t),...a})}function i({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-title",className:d.cn("adm:leading-none adm:font-semibold",t),...a})}function m({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-description",className:d.cn("adm:text-sm adm:text-muted-foreground",t),...a})}function u({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-action",className:d.cn(`
+        `,t),...a})}function u({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-title",className:r.cn("adm:leading-none adm:font-semibold",t),...a})}function l({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-description",className:r.cn("adm:text-sm adm:text-muted-foreground",t),...a})}function x({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-action",className:r.cn(`
           adm:col-start-2 adm:row-span-2 adm:row-start-1 adm:self-start
           adm:justify-self-end
-        `,t),...a})}function l({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-content",className:d.cn("adm:px-6",t),...a})}function x({className:t,...a}){return r.jsxRuntimeExports.jsx("div",{"data-slot":"card-footer",className:d.cn(`
+        `,t),...a})}function p({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-content",className:r.cn("adm:px-6",t),...a})}function f({className:t,...a}){return d.jsxRuntimeExports.jsx("div",{"data-slot":"card-footer",className:r.cn(`
         adm:flex adm:items-center adm:px-6
         adm:[.border-t]:pt-6
-      `,t),...a})}exports.Card=o;exports.CardAction=u;exports.CardContent=l;exports.CardDescription=m;exports.CardFooter=x;exports.CardHeader=c;exports.CardTitle=i;exports.cardVariants=e;
+      `,t),...a})}exports.Card=m;exports.CardAction=x;exports.CardContent=p;exports.CardDescription=l;exports.CardFooter=f;exports.CardHeader=i;exports.CardTitle=u;exports.cardVariants=e;

package/dist/card.js

@@ -1,11 +1,11 @@
 import { j as d } from "./jsx-runtime-BzflLqGi.js";
 import { c as r } from "./index-CRiPKpXj.js";
-import { c as s } from "./index-BqtVL8d-.js";
+import { c as n } from "./index-BqtVL8d-.js";
 import "react";
-const o = s(
+const m = n(
   `
-    adm:flex adm:flex-col adm:gap-6 adm:rounded-3xl adm:border adm:bg-card
-    adm:py-6 adm:text-card-foreground adm:shadow-xs
+    adm:flex adm:flex-col adm:gap-6 adm:rounded-3xl adm:bg-card adm:py-6
+    adm:text-card-foreground
   `,
   {
     variants: {
@@ -41,28 +41,40 @@ const o = s(
             adm:[&>[data-slot=icon]]:text-current
             adm:[&>svg]:text-current
           `
+      },
+      shadow: {
+        default: "adm:shadow-xs",
+        none: "adm:shadow-none"
+      },
+      border: {
+        default: "adm:border",
+        transparent: "adm:border adm:border-transparent"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      shadow: "none",
+      border: "default"
     }
   }
 );
-function u({
+function x({
   className: a,
   variant: t,
-  ...e
+  shadow: e,
+  border: s,
+  ...o
 }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
       "data-slot": "card",
-      className: r(o({ variant: t }), a),
-      ...e
+      className: r(m({ variant: t, shadow: e, border: s }), a),
+      ...o
     }
   );
 }
-function l({ className: a, ...t }) {
+function f({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -80,7 +92,7 @@ function l({ className: a, ...t }) {
     }
   );
 }
-function x({ className: a, ...t }) {
+function p({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -90,7 +102,7 @@ function x({ className: a, ...t }) {
     }
   );
 }
-function f({ className: a, ...t }) {
+function g({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -100,7 +112,7 @@ function f({ className: a, ...t }) {
     }
   );
 }
-function p({ className: a, ...t }) {
+function v({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -116,7 +128,7 @@ function p({ className: a, ...t }) {
     }
   );
 }
-function g({ className: a, ...t }) {
+function b({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -126,7 +138,7 @@ function g({ className: a, ...t }) {
     }
   );
 }
-function v({ className: a, ...t }) {
+function w({ className: a, ...t }) {
   return /* @__PURE__ */ d.jsx(
     "div",
     {
@@ -140,12 +152,12 @@ function v({ className: a, ...t }) {
   );
 }
 export {
-  u as Card,
-  p as CardAction,
-  g as CardContent,
-  f as CardDescription,
-  v as CardFooter,
-  l as CardHeader,
-  x as CardTitle,
-  o as cardVariants
+  x as Card,
+  v as CardAction,
+  b as CardContent,
+  g as CardDescription,
+  w as CardFooter,
+  f as CardHeader,
+  p as CardTitle,
+  m as cardVariants
 };

package/dist/components/ui/card/card.d.ts

@@ -2,8 +2,10 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const cardVariants: (props?: ({
     variant?: "default" | "success" | "warning" | "destructive" | "muted" | "primary" | null | undefined;
+    shadow?: "default" | "none" | null | undefined;
+    border?: "default" | "transparent" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Card({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>): import("react/jsx-runtime").JSX.Element;
+declare function Card({ className, variant, shadow, border, ...props }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>): import("react/jsx-runtime").JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/card/card.stories.d.ts

@@ -5,6 +5,8 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const AllVariants: Story;
+export declare const ShadowVariants: Story;
+export declare const BorderVariants: Story;
 export declare const Primary: Story;
 export declare const Success: Story;
 export declare const Warning: Story;

package/docs/components/ui/card.md

@@ -1,10 +1,12 @@
 # Card
 
-Contenedor versátil con bordes redondeados, padding y sombra para agrupar contenido relacionado. Incluye 6 variantes de color y un sistema de layout con grid automático para headers con acciones.
+Contenedor versátil con bordes redondeados, padding, sombra y borde configurables para agrupar contenido relacionado. Incluye 6 variantes de color, control de elevación y bordes, y un sistema de layout con grid automático para headers con acciones.
 
 ## Características Principales
 
 - **6 variantes de color**: Default, Primary, Muted, Success, Warning, Destructive
+- **2 variantes de sombra**: Default (con elevación) y None (diseño plano, por defecto)
+- **2 variantes de borde**: Default (visible) y Transparent (invisible pero mantiene espacio)
 - **Composición modular**: 6 subcomponentes (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter)
 - **Grid automático en header**: Detecta `CardAction` y ajusta layout automáticamente con `has-data-[slot=card-action]:grid-cols-[1fr_auto]`
 - **Container queries**: CardHeader usa `@container/card-header` para layouts responsive
@@ -104,11 +106,13 @@ Contenedor principal de la card.
 
 #### Props
 
-| Prop        | Tipo                                                                           | Default     | Descripción                |
-| ----------- | ------------------------------------------------------------------------------ | ----------- | -------------------------- |
-| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo |
-| `className` | `string`                                                                       | -           | Clases CSS adicionales     |
-| `children`  | `ReactNode`                                                                    | -           | Contenido de la card       |
+| Prop        | Tipo                                                                           | Default     | Descripción                                                |
+| ----------- | ------------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------- |
+| `variant`   | `"default" \| "primary" \| "muted" \| "success" \| "warning" \| "destructive"` | `"default"` | Variante de color de fondo                                 |
+| `shadow`    | `"default" \| "none"`                                                          | `"none"`    | Control de sombra (none=flat, default=elevación)           |
+| `border`    | `"default" \| "transparent"`                                                   | `"default"` | Control de borde (default=visible, transparent=invisible)  |
+| `className` | `string`                                                                       | -           | Clases CSS adicionales                                     |
+| `children`  | `ReactNode`                                                                    | -           | Contenido de la card                                       |
 
 ### CardHeader
 
@@ -335,7 +339,125 @@ Fondo gris claro para información secundaria.
 
 **Colores**: `bg-muted` con texto `text-muted/90`
 
-**Colores**: `bg-muted` con texto `text-muted/90`
+## Variantes de Sombra
+
+Controla la elevación de las cards con la prop `shadow`. Por defecto, las cards no tienen sombra (`shadow="none"`).
+
+### Sin Sombra (Default)
+
+Card plana sin elevación para diseños limpios y modernos.
+
+```tsx
+<Card className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Flat Card</CardTitle>
+    <CardDescription>No elevation, flat design</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Default behavior - perfect for modern, clean layouts and dense grids.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Uso**: Default para todas las cards. Ideal para diseños modernos, layouts densos, o cuando las cards ya están visualmente separadas por otros elementos.
+
+### Con Sombra
+
+Card con sombra sutil para crear profundidad cuando se necesita énfasis.
+
+```tsx
+<Card shadow="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Card with Shadow</CardTitle>
+    <CardDescription>Subtle elevation effect</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Use shadow="default" when you need elevation to make cards stand out.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Uso**: Usa cuando necesites que cards individuales se destaquen o floten sobre el contenido de fondo.
+
+### Combinando con Variantes de Color
+
+La prop `shadow` funciona con todas las variantes de color.
+
+```tsx
+{/* Flat colored cards */}
+<Card variant="primary" shadow="none" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Flat Primary</CardTitle>
+    <CardDescription>Primary color without shadow</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Combines color variant with flat design for modern appearance.
+    </p>
+  </CardContent>
+</Card>
+
+{/* Elevated colored cards */}
+<Card variant="success" shadow="default" className="w-[350px]">
+  <CardHeader>
+    <CardTitle>Elevated Success</CardTitle>
+    <CardDescription>Success color with shadow</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Shadow adds depth to colored variants for emphasis.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Nota**: Experimenta con `shadow="none"` en grids de cards o layouts densos para un look más limpio.
+
+## Variantes de Borde
+
+El Card ofrece dos opciones de borde a través de la prop `border`:
+
+### Con Borde (Default)
+
+Por defecto, las cards tienen un borde visible que define claramente sus límites:
+
+```tsx
+<Card border="default" variant="primary">
+  <CardHeader>
+    <CardTitle>Card con Borde</CardTitle>
+    <CardDescription>Borde visible para definición clara</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      El borde ayuda a separar la card del fondo y de otros elementos.
+    </p>
+  </CardContent>
+</Card>
+```
+
+### Sin Borde
+
+Usa `border="transparent"` para ocultar el borde mientras mantienes el espaciado:
+
+```tsx
+<Card border="transparent" variant="primary">
+  <CardHeader>
+    <CardTitle>Card sin Borde</CardTitle>
+    <CardDescription>Diseño más limpio y minimalista</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p className="text-sm">
+      Sin borde para un look más integrado con el fondo.
+    </p>
+  </CardContent>
+</Card>
+```
+
+**Nota**: `border="transparent"` mantiene el espacio del borde en el layout, a diferencia de removerlo completamente. Esto asegura consistencia en el espaciado.
 
 ## Patrones Avanzados
 
@@ -892,6 +1014,37 @@ Diferentes arreglos de botones.
 </Card>
 ```
 
+### Uso de Sombras y Bordes
+
+```tsx
+{/* ✅ Correcto - Default sin sombra para diseño plano */}
+<Card>
+  <CardContent>Clean, flat design</CardContent>
+</Card>
+
+{/* ✅ Correcto - Shadow para cards flotantes o destacadas */}
+<Card shadow="default">
+  <CardContent>Elevated card with depth</CardContent>
+</Card>
+
+{/* ✅ Correcto - Border transparent para integración con fondo */}
+<Card border="transparent" variant="muted">
+  <CardContent>Blends with background</CardContent>
+</Card>
+
+{/* ⚠️ Evitar - Shadow sin propósito específico */}
+<Card shadow="default">
+  <CardContent>Unnecessary elevation</CardContent>
+</Card>
+```
+
+**Recomendaciones**:
+
+- Usa `shadow="none"` (default) para layouts densos y diseños modernos
+- Aplica `shadow="default"` para destacar cards importantes o flotantes
+- Usa `border="transparent"` en cards sobre fondos de color similar
+- Mantén `border="default"` para máxima claridad y separación
+
 ### Estructura de Header Completa
 
 ```tsx
@@ -1023,17 +1176,60 @@ Diferentes arreglos de botones.
 </CardHeader>;
 ```
 
+### Uso de Shadow
+
+```tsx
+{/* ✅ Correcto - Shadow para cards individuales o destacadas */}
+<Card shadow="default" className="w-[350px]">
+  <CardContent>
+    Stands out with subtle elevation
+  </CardContent>
+</Card>
+
+{/* ✅ Correcto - Sin shadow para grids densos */}
+<div className="grid gap-4 md:grid-cols-3">
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>Flat design in dense layout</CardContent>
+  </Card>
+</div>
+
+{/* ✅ Correcto - Sin shadow cuando ya hay separación visual */}
+<div className="space-y-4">
+  <Card shadow="none">
+    <CardContent>Spacing provides separation</CardContent>
+  </Card>
+  <Card shadow="none">
+    <CardContent>No shadow needed here</CardContent>
+  </Card>
+</div>
+
+{/* ⚠️ Considerar - Mucha sombra en layouts densos */}
+<div className="grid gap-2 md:grid-cols-4">
+  <Card shadow="default">...</Card>  {/* Puede verse pesado */}
+  <Card shadow="default">...</Card>
+  <Card shadow="default">...</Card>
+  <Card shadow="default">...</Card>
+</div>
+```
+
 ## Notas de Implementación
 
-- **Basado en CVA**: Usa `class-variance-authority` para variantes de color
+- **Basado en CVA**: Usa `class-variance-authority` para variantes de color, sombra y borde
 - **Data Slots**: Cada componente tiene `data-slot` para CSS targeting específico (`data-slot="card"`, `data-slot="card-header"`, etc.)
 - **Grid Automático**: CardHeader usa `has-data-[slot=card-action]:grid-cols-[1fr_auto]` para detectar CardAction y ajustar layout
 - **Container Queries**: CardHeader tiene `@container/card-header` para responsive interno (requiere Tailwind CSS container queries)
 - **Spacing Consistente**: `gap-6` entre secciones (header, content, footer), `px-6` horizontal en todas las secciones
 - **Padding Condicional**: `.border-b` y `.border-t` triggers automáticos para `pb-6` y `pt-6` respectivamente
 - **Variantes de Color**: Cada variante ajusta `bg-*-50` y `text-*-foreground`, con ajustes para iconos SVG (`[&>svg]:text-current`)
-- **Rounded Corners**: `rounded-xl` por defecto (12px)
-- **Shadow**: `shadow-sm` para elevación sutil
+- **Variantes de Sombra**: Dos opciones (`default` con `shadow-xs`, `none` sin sombra por defecto) para control de elevación
+- **Variantes de Borde**: Dos opciones (`default` con borde visible, `transparent` con borde invisible pero mantiene espaciado)
+- **Rounded Corners**: `rounded-3xl` por defecto para esquinas suaves
 - **Flex Column**: Card root usa `flex flex-col gap-6` para layout vertical automático
 
 ## Accesibilidad

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamosuiteservices/ui",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",