@a-type/ui 0.6.14 → 0.6.16

package/dist/cjs/components/card/Card.d.ts

@@ -8,10 +8,15 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
     onClick?: ((ev: MouseEvent) => void) | undefined;
     children?: ReactNode;
     compact?: boolean | undefined;
+    /** forces non-interactive version */
+    nonInteractive?: boolean | undefined;
 } & import("react").RefAttributes<any>>;
 export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;
+export declare const CardContent: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>;
 export declare const CardImage: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;

package/dist/cjs/components/card/Card.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardGrid = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
+exports.CardGrid = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardContent = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_js_1 = require("../../hooks.js");
@@ -23,11 +23,14 @@ const react_slot_1 = require("@radix-ui/react-slot");
 const clsx_1 = __importDefault(require("clsx"));
 exports.CardRoot = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-gray-1 layer-components:text-black');
 exports.CardMain = (0, react_1.forwardRef)(function CardMain(_a, ref) {
-    var { asChild, className, compact } = _a, rest = __rest(_a, ["asChild", "className", "compact"]);
-    const Comp = asChild ? react_slot_1.Slot : 'button';
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:cursor-pointer layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:hover:bg-lightBlend layer-components:hover:color-black', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', className), "data-compact": compact }, rest)));
+    var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
+    const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
+    const Comp = asChild ? react_slot_1.Slot : isInteractive ? 'button' : 'div';
+    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit layer-components:text-sm', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
+            'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
 });
 exports.CardTitle = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-auto layer-components:bg-white layer-components:p-2 layer-components:rounded-lg layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend layer-components:text-md layer-components:max-h-80px layer-components:overflow-hidden layer-components:text-ellipsis layer-components:max-w-full layer-components:text-inherit', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
+exports.CardContent = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:p-2');
 exports.CardImage = (0, hooks_js_1.withClassName)('div', 'layer-components:absolute layer-components:z-0 layer-components:right-0 layer-components:top-0 layer-components:bottom-0 layer-components:w-full layer-components:h-full');
 exports.CardFooter = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-row layer-components:p-2 layer-components:bg-white layer-components:relative layer-components:z-1 layer-components:border-0 layer-components:border-t layer-components:border-t-grayDarkBlend layer-components:border-solid');
 exports.CardActions = (0, hooks_js_1.withClassName)('div', 'layer-components:ml-0 layer-components:mr-auto layer-components:flex layer-components:flex-row layer-components:gap-1 layer-components:items-center');

package/dist/cjs/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0D;AAC1D,6CAA+C;AAC/C,qDAA4C;AAC5C,gDAA8B;AAEjB,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAShC,SAAS,QAAQ,CAAC,EAAwC,EAAE,GAAG;QAA7C,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAtC,mCAAwC,CAAF;IACzD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,kJAAkJ,EAClJ,oDAAoD,EACpD,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0D;AAC1D,6CAA+C;AAC/C,qDAA4C;AAC5C,gDAA8B;AAEjB,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAWhC,SAAS,QAAQ,CAClB,EAAwD,EACxD,GAAG;QADH,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,OAAW,EAAN,IAAI,cAAtD,qDAAwD,CAAF;IAGtD,MAAM,aAAa,GAAG,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/D,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB,2IAA2I,EAC3I,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,aAAa;YACZ,oFAAoF,EACrF,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEU,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,4CAA4C,CAC5C,CAAC;AAEW,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEW,QAAA,WAAW,GAAG,IAAA,wBAAa,EACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEW,QAAA,QAAQ,GAAG,IAAA,wBAAa,EACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}

package/dist/cjs/components/card/Card.stories.d.ts

@@ -16,3 +16,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof CardRoot>;
 export declare const Default: Story;
+export declare const Compact: Story;
+export declare const NonInteractive: Story;
+export declare const AsChild: Story;
+export declare const AsChildNonInteractive: Story;

package/dist/cjs/components/card/Card.stories.js

@@ -1,7 +1,7 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.AsChildNonInteractive = exports.AsChild = exports.NonInteractive = exports.Compact = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Card_js_1 = require("./Card.js");
 const button_js_1 = require("../button.js");
@@ -16,6 +16,18 @@ const meta = {
 };
 exports.default = meta;
 exports.Default = {
-    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) }), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsxs)(Card_js_1.CardMain, Object.assign({ onClick: () => alert('clicked') }, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(Card_js_1.CardContent, { children: "Other stuff" })] })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+};
+exports.Compact = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ compact: true }, { children: (0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+};
+exports.NonInteractive = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsxs)(Card_js_1.CardMain, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(Card_js_1.CardContent, { children: "Other stuff" })] }), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+};
+exports.AsChild = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ asChild: true }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ href: "#here" }, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(Card_js_1.CardContent, { children: "Other stuff" })] })) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
+};
+exports.AsChildNonInteractive = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children: (0, jsx_runtime_1.jsxs)("button", { children: [(0, jsx_runtime_1.jsx)(Card_js_1.CardTitle, { children: "Card Title" }), (0, jsx_runtime_1.jsx)(Card_js_1.CardContent, { children: "Other stuff" })] }) })), (0, jsx_runtime_1.jsx)(Card_js_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(Card_js_1.CardActions, { children: [(0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "small" }, { children: "Button" })), (0, jsx_runtime_1.jsx)(button_js_1.Button, Object.assign({ size: "icon", color: "ghost" }, { children: (0, jsx_runtime_1.jsx)(icon_js_1.Icon, { name: "placeholder" }) }))] }) })] })),
 };
 //# sourceMappingURL=Card.stories.js.map

package/dist/cjs/components/card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAMmB;AACnB,4CAAsC;AACtC,wCAAkC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,kBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,wBAAC,kBAAQ,eACR,uBAAC,kBAAQ,cACR,uBAAC,mBAAS,6BAAuB,GACvB,EACX,uBAAC,oBAAU,cACV,wBAAC,qBAAW,eACX,uBAAC,kBAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,uBAAC,kBAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,uBAAC,cAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/card/Card.d.ts

@@ -8,10 +8,15 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
     onClick?: ((ev: MouseEvent) => void) | undefined;
     children?: ReactNode;
     compact?: boolean | undefined;
+    /** forces non-interactive version */
+    nonInteractive?: boolean | undefined;
 } & import("react").RefAttributes<any>>;
 export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;
+export declare const CardContent: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>;
 export declare const CardImage: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }>;

package/dist/esm/components/card/Card.js

@@ -17,11 +17,14 @@ import { Slot } from '@radix-ui/react-slot';
 import classNames from 'clsx';
 export const CardRoot = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:border-light layer-components:rounded-lg layer-components:text-lg layer-components:overflow-hidden layer-components:h-max-content layer-components:relative layer-components:bg-gray-1 layer-components:text-black');
 export const CardMain = forwardRef(function CardMain(_a, ref) {
-    var { asChild, className, compact } = _a, rest = __rest(_a, ["asChild", "className", "compact"]);
-    const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, Object.assign({ ref: ref, className: classNames('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:cursor-pointer layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit', 'layer-components:hover:bg-lightBlend layer-components:hover:color-black', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', className), "data-compact": compact }, rest)));
+    var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
+    const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
+    const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
+    return (_jsx(Comp, Object.assign({ ref: ref, className: classNames('layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:transition layer-components:p-4 layer-components:pb-2 layer-components:flex-1 layer-components:relative layer-components:z-1 layer-components:bg-transparent layer-components:border-none layer-components:text-start layer-components:text-inherit layer-components:text-sm', 'layer-components:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
+            'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
 });
 export const CardTitle = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:mt-auto layer-components:bg-white layer-components:p-2 layer-components:rounded-lg layer-components:w-auto layer-components:mr-auto layer-components:border layer-components:border-solid layer-components:border-grayDarkBlend layer-components:text-md layer-components:max-h-80px layer-components:overflow-hidden layer-components:text-ellipsis layer-components:max-w-full layer-components:text-inherit', '[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)');
+export const CardContent = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:p-2');
 export const CardImage = withClassName('div', 'layer-components:absolute layer-components:z-0 layer-components:right-0 layer-components:top-0 layer-components:bottom-0 layer-components:w-full layer-components:h-full');
 export const CardFooter = withClassName('div', 'layer-components:flex layer-components:flex-row layer-components:p-2 layer-components:bg-white layer-components:relative layer-components:z-1 layer-components:border-0 layer-components:border-t layer-components:border-t-grayDarkBlend layer-components:border-solid');
 export const CardActions = withClassName('div', 'layer-components:ml-0 layer-components:mr-auto layer-components:flex layer-components:flex-row layer-components:gap-1 layer-components:items-center');

package/dist/esm/components/card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAShC,SAAS,QAAQ,CAAC,EAAwC,EAAE,GAAG;QAA7C,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,OAAW,EAAN,IAAI,cAAtC,mCAAwC,CAAF;IACzD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACpB,kJAAkJ,EAClJ,oDAAoD,EACpD,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAyB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,8HAA8H,CAC9H,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAWhC,SAAS,QAAQ,CAClB,EAAwD,EACxD,GAAG;QADH,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,OAAW,EAAN,IAAI,cAAtD,qDAAwD,CAAF;IAGtD,MAAM,aAAa,GAAG,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/D,OAAO,CACN,KAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACpB,2IAA2I,EAC3I,0BAA0B,EAC1B,OAAO,IAAI,qCAAqC,EAChD,aAAa;YACZ,oFAAoF,EACrF,SAAS,CACT,kBACa,OAAO,IACjB,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,yMAAyM,EACzM,wGAAwG,CACxG,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,KAAK,EACL,4CAA4C,CAC5C,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,KAAK,EACL,sEAAsE,CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,KAAK,EACL,kHAAkH,CAClH,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,kEAAkE,CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,6EAA6E,EAC7E,gFAAgF,CAChF,CAAC"}

package/dist/esm/components/card/Card.stories.d.ts

@@ -16,3 +16,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof CardRoot>;
 export declare const Default: Story;
+export declare const Compact: Story;
+export declare const NonInteractive: Story;
+export declare const AsChild: Story;
+export declare const AsChildNonInteractive: Story;

package/dist/esm/components/card/Card.stories.js

@@ -1,6 +1,6 @@
 // @unocss-include
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CardActions, CardFooter, CardMain, CardRoot, CardTitle, } from './Card.js';
+import { CardActions, CardContent, CardFooter, CardMain, CardRoot, CardTitle, } from './Card.js';
 import { Button } from '../button.js';
 import { Icon } from '../icon.js';
 const meta = {
@@ -13,6 +13,18 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, { children: _jsx(CardTitle, { children: "Card Title" }) }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+    render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, Object.assign({ onClick: () => alert('clicked') }, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+};
+export const Compact = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ compact: true }, { children: _jsx(CardTitle, { children: "Card Title" }) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+};
+export const NonInteractive = {
+    render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+};
+export const AsChild = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true }, { children: _jsxs("a", Object.assign({ href: "#here" }, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] })) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
+};
+export const AsChildNonInteractive = {
+    render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children: _jsxs("button", { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }) })), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, Object.assign({ size: "small" }, { children: "Button" })), _jsx(Button, Object.assign({ size: "icon", color: "ghost" }, { children: _jsx(Icon, { name: "placeholder" }) }))] }) })] })),
 };
 //# sourceMappingURL=Card.stories.js.map

package/dist/esm/components/card/Card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACN,WAAW,EACX,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,GACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,MAAC,QAAQ,eACR,KAAC,QAAQ,cACR,KAAC,SAAS,6BAAuB,GACvB,EACX,KAAC,UAAU,cACV,MAAC,WAAW,eACX,KAAC,MAAM,kBAAC,IAAI,EAAC,OAAO,4BAAgB,EACpC,KAAC,MAAM,kBAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,gBAChC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACI,GACF,IACH,CACX;CACD,CAAC"}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "type": "module",
   "files": [
     "/dist",

package/src/components/card/Card.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
 	CardActions,
+	CardContent,
 	CardFooter,
 	CardMain,
 	CardRoot,
@@ -23,10 +24,90 @@ export default meta;
 type Story = StoryObj<typeof CardRoot>;
 
 export const Default: Story = {
+	render: () => (
+		<CardRoot>
+			<CardMain onClick={() => alert('clicked')}>
+				<CardTitle>Card Title</CardTitle>
+				<CardContent>Other stuff</CardContent>
+			</CardMain>
+			<CardFooter>
+				<CardActions>
+					<Button size="small">Button</Button>
+					<Button size="icon" color="ghost">
+						<Icon name="placeholder" />
+					</Button>
+				</CardActions>
+			</CardFooter>
+		</CardRoot>
+	),
+};
+
+export const Compact: Story = {
+	render: () => (
+		<CardRoot>
+			<CardMain compact>
+				<CardTitle>Card Title</CardTitle>
+			</CardMain>
+			<CardFooter>
+				<CardActions>
+					<Button size="small">Button</Button>
+					<Button size="icon" color="ghost">
+						<Icon name="placeholder" />
+					</Button>
+				</CardActions>
+			</CardFooter>
+		</CardRoot>
+	),
+};
+
+export const NonInteractive: Story = {
 	render: () => (
 		<CardRoot>
 			<CardMain>
 				<CardTitle>Card Title</CardTitle>
+				<CardContent>Other stuff</CardContent>
+			</CardMain>
+			<CardFooter>
+				<CardActions>
+					<Button size="small">Button</Button>
+					<Button size="icon" color="ghost">
+						<Icon name="placeholder" />
+					</Button>
+				</CardActions>
+			</CardFooter>
+		</CardRoot>
+	),
+};
+
+export const AsChild: Story = {
+	render: () => (
+		<CardRoot>
+			<CardMain asChild>
+				<a href="#here">
+					<CardTitle>Card Title</CardTitle>
+					<CardContent>Other stuff</CardContent>
+				</a>
+			</CardMain>
+			<CardFooter>
+				<CardActions>
+					<Button size="small">Button</Button>
+					<Button size="icon" color="ghost">
+						<Icon name="placeholder" />
+					</Button>
+				</CardActions>
+			</CardFooter>
+		</CardRoot>
+	),
+};
+
+export const AsChildNonInteractive: Story = {
+	render: () => (
+		<CardRoot>
+			<CardMain asChild nonInteractive>
+				<button>
+					<CardTitle>Card Title</CardTitle>
+					<CardContent>Other stuff</CardContent>
+				</button>
 			</CardMain>
 			<CardFooter>
 				<CardActions>

package/src/components/card/Card.tsx

@@ -16,17 +16,24 @@ export const CardMain = forwardRef<
 		onClick?: (ev: MouseEvent) => void;
 		children?: ReactNode;
 		compact?: boolean;
+		/** forces non-interactive version */
+		nonInteractive?: boolean;
 	}
->(function CardMain({ asChild, className, compact, ...rest }, ref) {
-	const Comp = asChild ? Slot : 'button';
+>(function CardMain(
+	{ asChild, className, compact, nonInteractive, ...rest },
+	ref,
+) {
+	const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
+	const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
 	return (
 		<Comp
 			ref={ref}
 			className={classNames(
-				'layer-components:(flex flex-col gap-1 cursor-pointer transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start text-inherit)',
-				'layer-components:hover:(bg-lightBlend color-black)',
+				'layer-components:(flex flex-col gap-1 transition p-4 pb-2 flex-1 relative z-1 bg-transparent border-none text-start text-inherit text-sm)',
 				'layer-components:md:pt-4',
 				compact && 'layer-variants:(p-1 bg-white gap-0)',
+				isInteractive &&
+					'layer-components:cursor-pointer layer-components:hover:(bg-lightBlend color-black)',
 				className,
 			)}
 			data-compact={compact}
@@ -41,6 +48,11 @@ export const CardTitle = withClassName(
 	'[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)',
 );
 
+export const CardContent = withClassName(
+	'div',
+	'layer-components:(flex flex-col gap-1 p-2)',
+);
+
 export const CardImage = withClassName(
 	'div',
 	'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full)',