@a-type/ui 0.6.15 → 0.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/card/Card.d.ts +3 -0
- package/dist/cjs/components/card/Card.js +3 -2
- package/dist/cjs/components/card/Card.js.map +1 -1
- package/dist/cjs/components/card/Card.stories.js +4 -4
- package/dist/cjs/components/card/Card.stories.js.map +1 -1
- package/dist/esm/components/card/Card.d.ts +3 -0
- package/dist/esm/components/card/Card.js +2 -1
- package/dist/esm/components/card/Card.js.map +1 -1
- package/dist/esm/components/card/Card.stories.js +5 -5
- package/dist/esm/components/card/Card.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/Card.stories.tsx +5 -0
- package/src/components/card/Card.tsx +6 -1
|
@@ -14,6 +14,9 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
|
|
|
14
14
|
export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
15
15
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
16
16
|
}>;
|
|
17
|
+
export declare const CardContent: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
18
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
19
|
+
}>;
|
|
17
20
|
export declare const CardImage: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
18
21
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
19
22
|
}>;
|
|
@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
15
15
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
16
16
|
};
|
|
17
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
18
|
-
exports.CardGrid = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
|
|
18
|
+
exports.CardGrid = exports.CardMenu = exports.CardActions = exports.CardFooter = exports.CardImage = exports.CardContent = exports.CardTitle = exports.CardMain = exports.CardRoot = void 0;
|
|
19
19
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
20
|
const react_1 = require("react");
|
|
21
21
|
const hooks_js_1 = require("../../hooks.js");
|
|
@@ -26,10 +26,11 @@ exports.CardMain = (0, react_1.forwardRef)(function CardMain(_a, ref) {
|
|
|
26
26
|
var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
|
|
27
27
|
const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
|
|
28
28
|
const Comp = asChild ? react_slot_1.Slot : isInteractive ? 'button' : 'div';
|
|
29
|
-
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:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
|
|
29
|
+
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 &&
|
|
30
30
|
'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
|
|
31
31
|
});
|
|
32
32
|
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)');
|
|
33
|
+
exports.CardContent = (0, hooks_js_1.withClassName)('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:p-2');
|
|
33
34
|
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');
|
|
34
35
|
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');
|
|
35
36
|
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');
|
|
@@ -1 +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,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,
|
|
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,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"}
|
|
@@ -16,18 +16,18 @@ const meta = {
|
|
|
16
16
|
};
|
|
17
17
|
exports.default = meta;
|
|
18
18
|
exports.Default = {
|
|
19
|
-
render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.
|
|
19
|
+
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" }) }))] }) })] })),
|
|
20
20
|
};
|
|
21
21
|
exports.Compact = {
|
|
22
22
|
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" }) }))] }) })] })),
|
|
23
23
|
};
|
|
24
24
|
exports.NonInteractive = {
|
|
25
|
-
render: () => ((0, jsx_runtime_1.jsxs)(Card_js_1.CardRoot, { children: [(0, jsx_runtime_1.
|
|
25
|
+
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" }) }))] }) })] })),
|
|
26
26
|
};
|
|
27
27
|
exports.AsChild = {
|
|
28
|
-
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.
|
|
28
|
+
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" }) }))] }) })] })),
|
|
29
29
|
};
|
|
30
30
|
exports.AsChildNonInteractive = {
|
|
31
|
-
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.
|
|
31
|
+
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" }) }))] }) })] })),
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=Card.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";;;;AACA,
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,6 +14,9 @@ export declare const CardMain: import("react").ForwardRefExoticComponent<{
|
|
|
14
14
|
export declare const CardTitle: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
15
15
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
16
16
|
}>;
|
|
17
|
+
export declare const CardContent: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
18
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
19
|
+
}>;
|
|
17
20
|
export declare const CardImage: import("react").FunctionComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
18
21
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
19
22
|
}>;
|
|
@@ -20,10 +20,11 @@ export const CardMain = forwardRef(function CardMain(_a, ref) {
|
|
|
20
20
|
var { asChild, className, compact, nonInteractive } = _a, rest = __rest(_a, ["asChild", "className", "compact", "nonInteractive"]);
|
|
21
21
|
const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
|
|
22
22
|
const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
|
|
23
|
-
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:md:pt-4', compact && 'layer-variants:p-1 layer-variants:bg-white layer-variants:gap-0', isInteractive &&
|
|
23
|
+
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 &&
|
|
24
24
|
'layer-components:cursor-pointer layer-components:hover:bg-lightBlend layer-components:hover:color-black', className), "data-compact": compact }, rest)));
|
|
25
25
|
});
|
|
26
26
|
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)');
|
|
27
|
+
export const CardContent = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:gap-1 layer-components:p-2');
|
|
27
28
|
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');
|
|
28
29
|
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');
|
|
29
30
|
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');
|
|
@@ -1 +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,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,
|
|
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,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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { CardActions, CardFooter, CardMain, CardRoot, CardTitle, } from './Card.js';
|
|
3
|
+
import { CardActions, CardContent, CardFooter, CardMain, CardRoot, CardTitle, } from './Card.js';
|
|
4
4
|
import { Button } from '../button.js';
|
|
5
5
|
import { Icon } from '../icon.js';
|
|
6
6
|
const meta = {
|
|
@@ -13,18 +13,18 @@ const meta = {
|
|
|
13
13
|
};
|
|
14
14
|
export default meta;
|
|
15
15
|
export const Default = {
|
|
16
|
-
render: () => (_jsxs(CardRoot, { children: [
|
|
16
|
+
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" }) }))] }) })] })),
|
|
17
17
|
};
|
|
18
18
|
export const Compact = {
|
|
19
19
|
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" }) }))] }) })] })),
|
|
20
20
|
};
|
|
21
21
|
export const NonInteractive = {
|
|
22
|
-
render: () => (_jsxs(CardRoot, { children: [
|
|
22
|
+
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" }) }))] }) })] })),
|
|
23
23
|
};
|
|
24
24
|
export const AsChild = {
|
|
25
|
-
render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true }, { children:
|
|
25
|
+
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" }) }))] }) })] })),
|
|
26
26
|
};
|
|
27
27
|
export const AsChildNonInteractive = {
|
|
28
|
-
render: () => (_jsxs(CardRoot, { children: [_jsx(CardMain, Object.assign({ asChild: true, nonInteractive: true }, { children:
|
|
28
|
+
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" }) }))] }) })] })),
|
|
29
29
|
};
|
|
30
30
|
//# sourceMappingURL=Card.stories.js.map
|
|
@@ -1 +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,
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import {
|
|
3
3
|
CardActions,
|
|
4
|
+
CardContent,
|
|
4
5
|
CardFooter,
|
|
5
6
|
CardMain,
|
|
6
7
|
CardRoot,
|
|
@@ -27,6 +28,7 @@ export const Default: Story = {
|
|
|
27
28
|
<CardRoot>
|
|
28
29
|
<CardMain onClick={() => alert('clicked')}>
|
|
29
30
|
<CardTitle>Card Title</CardTitle>
|
|
31
|
+
<CardContent>Other stuff</CardContent>
|
|
30
32
|
</CardMain>
|
|
31
33
|
<CardFooter>
|
|
32
34
|
<CardActions>
|
|
@@ -63,6 +65,7 @@ export const NonInteractive: Story = {
|
|
|
63
65
|
<CardRoot>
|
|
64
66
|
<CardMain>
|
|
65
67
|
<CardTitle>Card Title</CardTitle>
|
|
68
|
+
<CardContent>Other stuff</CardContent>
|
|
66
69
|
</CardMain>
|
|
67
70
|
<CardFooter>
|
|
68
71
|
<CardActions>
|
|
@@ -82,6 +85,7 @@ export const AsChild: Story = {
|
|
|
82
85
|
<CardMain asChild>
|
|
83
86
|
<a href="#here">
|
|
84
87
|
<CardTitle>Card Title</CardTitle>
|
|
88
|
+
<CardContent>Other stuff</CardContent>
|
|
85
89
|
</a>
|
|
86
90
|
</CardMain>
|
|
87
91
|
<CardFooter>
|
|
@@ -102,6 +106,7 @@ export const AsChildNonInteractive: Story = {
|
|
|
102
106
|
<CardMain asChild nonInteractive>
|
|
103
107
|
<button>
|
|
104
108
|
<CardTitle>Card Title</CardTitle>
|
|
109
|
+
<CardContent>Other stuff</CardContent>
|
|
105
110
|
</button>
|
|
106
111
|
</CardMain>
|
|
107
112
|
<CardFooter>
|
|
@@ -29,7 +29,7 @@ export const CardMain = forwardRef<
|
|
|
29
29
|
<Comp
|
|
30
30
|
ref={ref}
|
|
31
31
|
className={classNames(
|
|
32
|
-
'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)',
|
|
32
|
+
'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)',
|
|
33
33
|
'layer-components:md:pt-4',
|
|
34
34
|
compact && 'layer-variants:(p-1 bg-white gap-0)',
|
|
35
35
|
isInteractive &&
|
|
@@ -48,6 +48,11 @@ export const CardTitle = withClassName(
|
|
|
48
48
|
'[data-compact=true]>&:(bg-transparent border-none p-2 whitespace-nowrap text-ellipsis overflow-hidden)',
|
|
49
49
|
);
|
|
50
50
|
|
|
51
|
+
export const CardContent = withClassName(
|
|
52
|
+
'div',
|
|
53
|
+
'layer-components:(flex flex-col gap-1 p-2)',
|
|
54
|
+
);
|
|
55
|
+
|
|
51
56
|
export const CardImage = withClassName(
|
|
52
57
|
'div',
|
|
53
58
|
'layer-components:(absolute z-0 right-0 top-0 bottom-0 w-full h-full)',
|