@versini/ui-card 5.0.5 → 5.1.0

package/dist/index.d.ts

@@ -1,8 +1,67 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CardTypes } from '@versini/ui-types';
-
-declare const CARD_CLASSNAME = "av-card";
-
-declare const Card: ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, mode, compact, noBorder, ...otherProps }: CardTypes.Props) => react_jsx_runtime.JSX.Element;
-
-export { CARD_CLASSNAME, Card };
+import { JSX } from 'react/jsx-runtime';
+import React$1 from 'react';
+
+export declare const Card: ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, mode, compact, noBorder, ...otherProps }: CardTypes.Props) => JSX.Element;
+
+export declare const CARD_CLASSNAME = "av-card";
+
+declare namespace CardTypes {
+    	type Props = {
+        		/**
+         		 * The children to render.
+         		 */
+        		children: React$1.ReactNode;
+        		/**
+         		 * If the header prop is not provided, the Card must be
+         		 * described via aria-labelledby.
+         		 */
+        		"aria-labelledby"?: string;
+        		/**
+         		 * CSS class(es) to add to the body.
+         		 */
+        		bodyClassName?: string;
+        		/**
+         		 * CSS class(es) to add to the main component wrapper.
+         		 */
+        		className?: string;
+        		/**
+         		 * If true, the card will be smaller.
+         		 */
+        		compact?: boolean;
+        		/**
+         		 * The content to render in the footer.
+         		 */
+        		footer?: React$1.ReactNode;
+        		/**
+         		 * CSS class(es) to add to the footer.
+         		 */
+        		footerClassName?: string;
+        		/**
+         		 * The content to render in the header.
+         		 */
+        		header?: React$1.ReactNode;
+        		/**
+         		 * CSS class(es) to add to the header.
+         		 */
+        		headerClassName?: string;
+        		/**
+         		 * The mode of Card. This will change the color of the Card.
+         		 */
+        		mode?: "darker" | "dark" | "light" | "system" | "alt-system";
+        		/**
+         		 * Whether or not to render the Card with a border.
+         		 * @default false
+         		 */
+        		noBorder?: boolean;
+        	};
+
+    	type HeaderProps = {
+        		className: string;
+        		content: React$1.ReactNode;
+
+        		id?: string;
+        		userAriaLabelledby?: string;
+        	};
+}
+
+export { }

package/dist/index.js

@@ -1,18 +1,168 @@
-import { CARD_CLASSNAME as o, Card as r } from "./components/Card/Card.js";
 /*!
-  @versini/ui-card v5.0.5
+  @versini/ui-card v5.1.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_CARD__ || (window.__VERSINI_UI_CARD__ = {
-    version: "5.0.5",
-    buildTime: "10/22/2025 05:50 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_CARD__) {
+    window.__VERSINI_UI_CARD__ = {
+      version: "5.1.0",
+      buildTime: "11/04/2025 03:44 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  o as CARD_CLASSNAME,
-  r as Card
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@versini/ui-hooks";
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const CARD_CLASSNAME = "av-card";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-hooks"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/components/Card/utilities.ts
+
+
+const getCardClasses = ({ className, headerClassName, bodyClassName, footerClassName, mode, compact, noBorder })=>{
+    const wrapper = clsx(CARD_CLASSNAME, "rounded-md", {
+        "border-none": noBorder,
+        "border-2": !noBorder,
+        "p-4": !compact,
+        "p-1 sm:p-2": compact,
+        "border-border-accent bg-surface-darker text-copy-light": mode === "darker",
+        "border-border-accent bg-surface-dark text-copy-light": mode === "dark",
+        "border-border-dark bg-surface-lighter text-copy-dark": mode === "light",
+        "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": mode === "system",
+        "border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": mode === "alt-system"
+    }, className);
+    const header = headerClassName ? headerClassName : clsx(`${CARD_CLASSNAME}__header mt-0 border-b-2`, {
+        "text-copy-light border-border-accent": mode === "darker",
+        "border-border-accent": mode === "dark",
+        "border-border-medium": mode === "light",
+        "border-border-medium dark:border-border-accent": mode === "system",
+        "border-border-accent dark:border-border-medium": mode === "alt-system",
+        "mb-4": !compact,
+        "mb-2": compact
+    });
+    const body = clsx(bodyClassName);
+    const footer = footerClassName ? footerClassName : clsx(`${CARD_CLASSNAME}__footer pt-2`);
+    return {
+        wrapper,
+        header,
+        body,
+        footer
+    };
 };
+
+;// CONCATENATED MODULE: ./src/components/Card/Card.tsx
+
+
+
+
+function CardHeader({ id, content, userAriaLabelledby, className }) {
+    if (typeof content === "string") {
+        return /*#__PURE__*/ jsx("h2", {
+            id: id,
+            className: className,
+            children: content
+        });
+    } else if (userAriaLabelledby) {
+        return /*#__PURE__*/ jsx("div", {
+            className: className,
+            children: content
+        });
+    } else if (content) {
+        return /*#__PURE__*/ jsx("div", {
+            className: className,
+            id: id,
+            children: content
+        });
+    }
+    return null;
+}
+const Card = ({ header, headerClassName, footer, footerClassName, children, className, bodyClassName, "aria-labelledby": ariaLabelledby, mode = "system", compact = false, noBorder = false, ...otherProps })=>{
+    let headerId = null, sectionAriaLabelledBy = null;
+    const isHeaderString = typeof header === "string";
+    const uniqueIdForHeader = useUniqueId(CARD_CLASSNAME);
+    const cardClassName = getCardClasses({
+        className,
+        headerClassName,
+        bodyClassName,
+        footerClassName,
+        mode,
+        compact,
+        noBorder
+    });
+    if (isHeaderString) {
+        /**
+		 * header is a string:
+		 *  - we provide our own unique aria-labelledby
+		 *  - we need to wrap the header with that same unique id
+		 */ headerId = uniqueIdForHeader;
+        sectionAriaLabelledBy = headerId;
+    } else if (!isHeaderString && header && ariaLabelledby) {
+        /**
+		 * header is not a string and aria-labelledby is provided.
+		 * We use it to:
+		 *  - add aria-labelledby to the "section" node
+		 *  - but we do not provide the actual id (it's supposed to be
+		 *    in the provided header)
+		 */ headerId = null;
+        sectionAriaLabelledBy = ariaLabelledby;
+    } else if (!isHeaderString && header && !ariaLabelledby) {
+        /**
+		 * header is not a string and aria-labelledby is NOT provided.
+		 * We cannot assume header does not have an id (we cannot replace one),
+		 * therefore, we need to wrap the header with our own id.
+		 */ headerId = uniqueIdForHeader;
+        sectionAriaLabelledBy = headerId;
+    } else {
+        /**
+		 * There is no header.
+		 *  - if aria-labelledby exist, we add it to the "section" node and
+		 *    hope the user is providing the corresponding id, in the body maybe?
+		 */ headerId = null;
+        sectionAriaLabelledBy = ariaLabelledby || null;
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: cardClassName.wrapper,
+        children: /*#__PURE__*/ jsxs("section", {
+            ...sectionAriaLabelledBy && {
+                "aria-labelledby": sectionAriaLabelledBy
+            },
+            className: cardClassName.body,
+            ...otherProps,
+            children: [
+                /*#__PURE__*/ jsx(CardHeader, {
+                    ...headerId && {
+                        id: headerId
+                    },
+                    content: header,
+                    className: cardClassName.header,
+                    userAriaLabelledby: ariaLabelledby
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    children: children
+                }),
+                footer ? /*#__PURE__*/ jsx("div", {
+                    className: cardClassName.footer,
+                    children: footer
+                }) : null
+            ]
+        })
+    });
+};
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { CARD_CLASSNAME, Card };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-card",
-	"version": "5.0.5",
+	"version": "5.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -42,12 +42,12 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-hooks": "5.1.1",
+		"@versini/ui-hooks": "5.2.0",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.1.15"
+		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "eeceef78affd19e3dcae621833a83a892f09c204"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/Card/Card.js

@@ -1,103 +0,0 @@
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { useUniqueId as v } from "@versini/ui-hooks";
-import u from "clsx";
-const f = "av-card", A = ({
-  className: d,
-  headerClassName: e,
-  bodyClassName: c,
-  footerClassName: t,
-  mode: r,
-  compact: l,
-  noBorder: i
-}) => {
-  const s = u(
-    f,
-    "rounded-md",
-    {
-      "border-none": i,
-      "border-2": !i,
-      "p-4": !l,
-      "p-1 sm:p-2": l,
-      "border-border-accent bg-surface-darker text-copy-light": r === "darker",
-      "border-border-accent bg-surface-dark text-copy-light": r === "dark",
-      "border-border-dark bg-surface-lighter text-copy-dark": r === "light",
-      "border-border-dark bg-surface-lighter text-copy-dark dark:border-border-accent dark:bg-surface-dark dark:text-copy-light": r === "system",
-      "border-border-accent bg-surface-dark text-copy-light dark:border-border-dark dark:bg-surface-lighter dark:text-copy-dark": r === "alt-system"
-    },
-    d
-  ), k = e || u(`${f}__header mt-0 border-b-2`, {
-    "text-copy-light border-border-accent": r === "darker",
-    "border-border-accent": r === "dark",
-    "border-border-medium": r === "light",
-    "border-border-medium dark:border-border-accent": r === "system",
-    "border-border-accent dark:border-border-medium": r === "alt-system",
-    "mb-4": !l,
-    "mb-2": l
-  }), g = u(c), p = t || u(`${f}__footer pt-2`);
-  return {
-    wrapper: s,
-    header: k,
-    body: g,
-    footer: p
-  };
-};
-function C({
-  id: d,
-  content: e,
-  userAriaLabelledby: c,
-  className: t
-}) {
-  return typeof e == "string" ? /* @__PURE__ */ a("h2", { id: d, className: t, children: e }) : c ? /* @__PURE__ */ a("div", { className: t, children: e }) : e ? /* @__PURE__ */ a("div", { className: t, id: d, children: e }) : null;
-}
-const S = ({
-  header: d,
-  headerClassName: e,
-  footer: c,
-  footerClassName: t,
-  children: r,
-  className: l,
-  bodyClassName: i,
-  "aria-labelledby": s,
-  mode: k = "system",
-  compact: g = !1,
-  noBorder: p = !1,
-  ...x
-}) => {
-  let o = null, b = null;
-  const h = typeof d == "string", y = v(f), n = A({
-    className: l,
-    headerClassName: e,
-    bodyClassName: i,
-    footerClassName: t,
-    mode: k,
-    compact: g,
-    noBorder: p
-  });
-  return h ? (o = y, b = o) : !h && d && s ? (o = null, b = s) : !h && d && !s ? (o = y, b = o) : (o = null, b = s || null), /* @__PURE__ */ a("div", { className: n.wrapper, children: /* @__PURE__ */ m(
-    "section",
-    {
-      ...b && {
-        "aria-labelledby": b
-      },
-      className: n.body,
-      ...x,
-      children: [
-        /* @__PURE__ */ a(
-          C,
-          {
-            ...o && { id: o },
-            content: d,
-            className: n.header,
-            userAriaLabelledby: s
-          }
-        ),
-        /* @__PURE__ */ a("div", { children: r }),
-        c ? /* @__PURE__ */ a("div", { className: n.footer, children: c }) : null
-      ]
-    }
-  ) });
-};
-export {
-  f as CARD_CLASSNAME,
-  S as Card
-};