tw-react-components 0.0.190 → 0.0.191

package/index.esm.js

@@ -582,10 +582,42 @@ const Block = (_a) => {
     return (jsx("div", Object.assign({ "data-testid": dataTestId, className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { children: children })));
 };
 
-const Card = (_a) => {
-    var { children, className, dataTestId = 'card' } = _a, blockProps = __rest(_a, ["children", "className", "dataTestId"]);
-    return (jsx(Block, Object.assign({ className: cn('bg-background rounded-lg border p-2 dark:border-slate-700', className), dataTestId: dataTestId }, blockProps, { children: children })));
-};
+const $Card = (_a) => {
+    var { className, dataTestId = 'card' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), "data-slot": "card", "data-testid": dataTestId }, props)));
+};
+const CardHeader = (_a) => {
+    var { className, dataTestId = 'card-header' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), "data-slot": "card-header", "data-testid": dataTestId }, props)));
+};
+const CardTitle = (_a) => {
+    var { className, dataTestId = 'card-title' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('leading-none font-semibold', className), "data-slot": "card-title", "data-testid": dataTestId }, props)));
+};
+const CardDescription = (_a) => {
+    var { className, dataTestId = 'card-description' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('text-muted-foreground text-sm', className), "data-slot": "card-description", "data-testid": dataTestId }, props)));
+};
+const CardAction = (_a) => {
+    var { className, dataTestId = 'card-action' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), "data-slot": "card-action", "data-testid": dataTestId }, props)));
+};
+const CardContent = (_a) => {
+    var { className, dataTestId = 'card-content' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('px-6', className), "data-slot": "card-content", "data-testid": dataTestId }, props)));
+};
+const CardFooter = (_a) => {
+    var { className, dataTestId = 'card-footer' } = _a, props = __rest(_a, ["className", "dataTestId"]);
+    return (jsx("div", Object.assign({ className: cn('flex items-center px-6 [.border-t]:pt-6', className), "data-slot": "card-footer", "data-testid": dataTestId }, props)));
+};
+const Card = Object.assign($Card, {
+    Header: CardHeader,
+    Footer: CardFooter,
+    Title: CardTitle,
+    Action: CardAction,
+    Description: CardDescription,
+    Content: CardContent,
+});
 
 const CollapsibleRoot = (_a) => {
     var { dataTestId = 'collapsible' } = _a, props = __rest(_a, ["dataTestId"]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.190",
+  "version": "0.0.191",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "type": "module",

package/src/components/Card/index.d.ts

@@ -1,3 +1,30 @@
-import { type FC } from 'react';
-import type { BlockProps } from '../Block';
-export declare const Card: FC<BlockProps>;
+import * as React from 'react';
+export type CardProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardHeaderProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardTitleProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardDescriptionProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardActionProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardContentProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export type CardFooterProps = React.ComponentProps<'div'> & {
+    dataTestId?: string;
+};
+export declare const Card: (({ className, dataTestId, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: ({ className, dataTestId, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ className, dataTestId, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, dataTestId, ...props }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Action: ({ className, dataTestId, ...props }: CardActionProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, dataTestId, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, dataTestId, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+};