tw-react-components 0.0.190 → 0.0.192

package/index.esm.js

@@ -569,7 +569,7 @@ const sizeClassNames = {
 const Button = (_a) => {
     var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, loading, disabled, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon, unstyled, dataTestId = 'button' } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "loading", "disabled", "prefixIcon", "suffixIcon", "unstyled", "dataTestId"]);
     return (jsxs("button", Object.assign({ className: cn('inline-flex aspect-square shrink-0 items-center justify-center font-medium whitespace-nowrap transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0', 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive focus-visible:ring-[3px]', sizeClassNames[size].base, variantClassNames[variant].base, variantClassNames[variant].colors[color].base, !unstyled &&
-            `${variantClassNames[variant].colors[color].hover} ${variantClassNames[variant].colors[color].focus} ${variantClassNames[variant].colors[color].active} cursor-pointer`, unstyled && 'cursor-default', rounded ? 'rounded-full' : 'rounded-md', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [PrefixIcon && !loading && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), loading && (jsx(Spinner, { className: "bg-transparent dark:bg-transparent", spinnerClassName: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base, dataTestId: `${dataTestId}-spinner` })), children, SuffixIcon && !loading && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+            `${variantClassNames[variant].colors[color].hover} ${variantClassNames[variant].colors[color].focus} ${variantClassNames[variant].colors[color].active} cursor-pointer`, unstyled && 'cursor-default', rounded ? 'rounded-full' : 'rounded-md', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), "data-testid": dataTestId, type: "button", disabled: disabled || loading }, props, { children: [loading ? (jsx(Spinner, { className: "w-fit bg-transparent dark:bg-transparent", spinnerClassName: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base, dataTestId: `${dataTestId}-spinner` })) : (PrefixIcon && (jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))), children, SuffixIcon && !loading && (jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
 };
 
 const Badge = (_a) => {
@@ -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.192",
   "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;
+};