@pihanga2/shadcn 0.2.5 → 0.2.7

package/cards/drawer/index.js

@@ -0,0 +1,13 @@
+import { DrawerComponent as e } from "./drawer.component.js";
+import { Drawer as t, PI_DRAWER_ACTION as n, PI_DRAWER_CARD as r, onDrawerClosed as i, onDrawerOpenChanged as a, onDrawerOpened as o } from "./drawer.types.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/drawer/index.ts
+c({
+	name: r,
+	component: e,
+	events: s(n)
+});
+//#endregion
+export { t as Drawer, n as PI_DRAWER_ACTION, r as PI_DRAWER_CARD, i as onDrawerClosed, a as onDrawerOpenChanged, o as onDrawerOpened };
+
+//# sourceMappingURL=index.js.map

package/cards/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/drawer/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {DrawerComponent} from \"./drawer.component\";\nimport {PI_DRAWER_ACTION, PI_DRAWER_CARD} from \"./drawer.types\";\n\nexport * from \"./drawer.types\";\n\nregisterCardComponent({\n  name: PI_DRAWER_CARD,\n  component: DrawerComponent,\n  events: actionTypesToEvents(PI_DRAWER_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAgB;AAC9C,CAAC"}

package/cards/dropDownMenu/dropdown-menu.ui.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { cva as t } from "class-variance-authority";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { cva as r } from "class-variance-authority";
 import { CheckIcon as i, ChevronRightIcon as a } from "lucide-react";
 import * as o from "@radix-ui/react-dropdown-menu";
 //#region src/cards/dropDownMenu/dropdown-menu.ui.tsx
-var s = t(e("relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground", "text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground"), {
+var s = r(e("relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground", "text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground"), {
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -21,87 +21,87 @@ var s = t(e("relative flex cursor-pointer items-center gap-2 rounded-md align-mi
 			none: ""
 		}
 	}
-}), c = t(e("mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none"), { variants: { inset: { true: "pl-8" } } });
+}), c = r(e("mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none"), { variants: { inset: { true: "pl-8" } } });
 function l(e) {
-	return /* @__PURE__ */ n(o.Root, { ...e });
+	return /* @__PURE__ */ t(o.Root, { ...e });
 }
 function u(e) {
-	return /* @__PURE__ */ n(o.Trigger, { ...e });
+	return /* @__PURE__ */ t(o.Trigger, { ...e });
 }
 function d(e) {
-	return /* @__PURE__ */ n(o.Group, {
+	return /* @__PURE__ */ t(o.Group, {
 		className: "py-1.5",
 		...e
 	});
 }
 function f(e) {
-	return /* @__PURE__ */ n(o.Sub, { ...e });
+	return /* @__PURE__ */ t(o.Sub, { ...e });
 }
 function p(e) {
-	return /* @__PURE__ */ n(o.RadioGroup, { ...e });
+	return /* @__PURE__ */ t(o.RadioGroup, { ...e });
 }
-function m({ children: t, className: i, inset: s, ...c }) {
-	return /* @__PURE__ */ r(o.SubTrigger, {
+function m({ children: r, className: i, inset: s, ...c }) {
+	return /* @__PURE__ */ n(o.SubTrigger, {
 		className: e("mx-1 flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent data-[state=open]:bg-accent", "no-focus-ring", "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", s && "pl-8", i),
 		...c,
-		children: [t, /* @__PURE__ */ n(a, { className: "ml-auto" })]
+		children: [r, /* @__PURE__ */ t(a, { className: "ml-auto" })]
 	});
 }
-function h({ className: t, ...r }) {
-	return /* @__PURE__ */ n(o.SubContent, {
-		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", t),
+function h({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.SubContent, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", n),
 		...r
 	});
 }
-function g({ className: t, portal: r, ...i }) {
-	let a = /* @__PURE__ */ n(o.Content, {
-		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom", t),
+function g({ className: n, portal: r, ...i }) {
+	let a = /* @__PURE__ */ t(o.Content, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom", n),
 		sideOffset: 4,
 		...i
 	});
-	return r ? /* @__PURE__ */ n(o.Portal, { children: a }) : a;
+	return r ? /* @__PURE__ */ t(o.Portal, { children: a }) : a;
 }
-function _({ className: t, ...r }) {
-	return /* @__PURE__ */ n(o.Item, {
-		className: e(s(), t),
+function _({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.Item, {
+		className: e(s(), n),
 		...r
 	});
 }
-function v({ children: t, className: a, ...s }) {
-	return /* @__PURE__ */ r(o.CheckboxItem, {
+function v({ children: r, className: a, ...s }) {
+	return /* @__PURE__ */ n(o.CheckboxItem, {
 		className: e("relative flex items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4", "mx-1 h-[28px] cursor-pointer data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground", a),
 		...s,
-		children: [/* @__PURE__ */ n("span", {
+		children: [/* @__PURE__ */ t("span", {
 			className: "absolute right-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
-		}), t]
+			children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, {}) })
+		}), r]
 	});
 }
-function y({ children: t, className: a, hideIcon: s, ...c }) {
-	return /* @__PURE__ */ r(o.RadioItem, {
+function y({ children: r, className: a, hideIcon: s, ...c }) {
+	return /* @__PURE__ */ n(o.RadioItem, {
 		className: e("relative flex items-center rounded-sm pr-2 pl-8 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "mx-1 h-[28px] cursor-pointer gap-2 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4", a),
 		...c,
-		children: [!s && /* @__PURE__ */ n("span", {
+		children: [!s && /* @__PURE__ */ t("span", {
 			className: "absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
-		}), t]
+			children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, {}) })
+		}), r]
 	});
 }
-function b({ className: t, inset: r, ...i }) {
-	return /* @__PURE__ */ n(o.Label, {
-		className: e(c({ inset: r }), t),
+function b({ className: n, inset: r, ...i }) {
+	return /* @__PURE__ */ t(o.Label, {
+		className: e(c({ inset: r }), n),
 		...i
 	});
 }
-function x({ className: t, ...r }) {
-	return /* @__PURE__ */ n(o.Separator, {
-		className: e("-mx-1 my-1 h-px bg-muted", t),
+function x({ className: n, ...r }) {
+	return /* @__PURE__ */ t(o.Separator, {
+		className: e("-mx-1 my-1 h-px bg-muted", n),
 		...r
 	});
 }
-function S({ className: t, ...r }) {
-	return /* @__PURE__ */ n("span", {
-		className: e("ml-auto text-xs tracking-widest opacity-60", t),
+function S({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		className: e("ml-auto text-xs tracking-widest opacity-60", n),
 		...r
 	});
 }

package/cards/emptyCard/emptyCard.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { EmptyCardProps } from './emptyCard.types';
+import * as React from "react";
+export declare const EmptyCardComponent: (props: PiCardProps<EmptyCardProps>) => React.ReactNode;

package/cards/emptyCard/emptyCard.types.d.ts

@@ -0,0 +1,36 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const EMPTY_CARD = "empty-card";
+export type EmptyCardProps = {
+    /**
+     * Icon name from the pihanga icon registry.
+     * When provided, renders an `EmptyMedia` slot with `variant="icon"`.
+     */
+    icon?: string;
+    /**
+     * Pihanga card reference rendered inside `EmptyContent`.
+     * Use this to show a call-to-action button, form, or any other card.
+     */
+    content?: PiCardRef;
+    /** Additional Tailwind / CSS classes forwarded to the root `Empty` element. */
+    className?: string;
+    /** Inline styles forwarded to the root `Empty` element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring an `empty-card` instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {EmptyCard} from "@/cards/emptyCard";
+ * import {Button} from "@/cards/button";
+ *
+ * registerCard("myApp/noResults", EmptyCard({
+ *   icon: "search",
+ *   content: "myApp/createButton",
+ * }));
+ *
+ * registerCard("myApp/createButton", Button({label: "Create new"}));
+ * ```
+ */
+export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/emptyCard/index.d.ts

@@ -0,0 +1 @@
+export * from './emptyCard.types';

package/cards/emptyCard.d.ts

@@ -1,7 +1 @@
-import { PiCardProps } from '@pihanga2/core';
-import * as React from "react";
-export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyProps, S, {}>) => import('@pihanga2/core').PiCardDef;
-export type EmptyProps = {
-    style?: React.CSSProperties;
-};
-export declare const EmptyComponent: (props: PiCardProps<EmptyProps>) => React.ReactNode;
+export * from './emptyCard/index';

package/cards/fileDrop/fileDrop.component.js

@@ -1,5 +1,5 @@
 import { DEF_FILE_DROP_FILE_TYPES as e } from "./fileDrop.types.js";
-/* empty css         */
+import './fileDrop.css';/* empty css         */
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { FileUploader as r } from "react-drag-drop-files";

package/cards/fileDrop/fileDrop.css

@@ -0,0 +1 @@
+.pi-file-drop-root label{border:2px dashed #999;flex-grow:1;justify-content:space-between;max-width:100%;display:flex}.pi-file-drop-root .dropzone-msg{cursor:pointer;text-align:center;flex-grow:4;margin:3em 0}.pi-file-drop-root .pi-progress{max-width:100%;padding:1.25em}.pi-file-drop-root .pi-progress-label{font-size:1rem;font-weight:600;line-height:1.5rem}.pi-file-drop -root.pi-progress-container{background-color:#dadfe5;border-radius:4px;height:1rem;display:flex;position:relative;overflow:hidden}.pi-file-drop-root .pi-progress-bar{color:#fff;background-color:#0054a6;flex-direction:column;justify-content:center;display:flex;overflow:hidden}.pi-file-drop-root .pi-progress .label{font-size:1em;display:block}

package/cards/flexGrid/flexGrid.types.d.ts

@@ -1,9 +1,8 @@
-import { PiCardRef } from '@pihanga2/core';
 export declare const FLEX_GRID_CARD = "flex_grid";
 export declare const FlexGrid: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<FlexGridProps, S, {}>) => import('@pihanga2/core').PiCardDef;
 export type FlexGridProps = {
     cards: {
-        [name: string]: PiCardRef;
+        [name: string]: string;
     };
     template: TemplateT;
     height?: string;

package/cards/flexGrid/flexGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const FLEX_GRID_CARD = \"flex_grid\";\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD);\n\nexport type FlexGridProps = {\n  cards: {[name: string]: PiCardRef};\n  template: TemplateT;\n  height?: string;\n  margin?: string;\n  overflow?: string;\n\n  style?: {\n    root?: React.CSSProperties;\n    item?: React.CSSProperties;\n  };\n  className?: string;\n};\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][]; // name of card dict\n  rows?: string[]; // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[]; // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}
+{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\n\nexport const FLEX_GRID_CARD = \"flex_grid\";\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD);\n\nexport type FlexGridProps = {\n  cards: {[name: string]: string}; // anonymous cards are not supported\n  template: TemplateT;\n  height?: string;\n  margin?: string;\n  overflow?: string;\n\n  style?: {\n    root?: React.CSSProperties;\n    item?: React.CSSProperties;\n  };\n  className?: string;\n};\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][]; // name of card dict\n  rows?: string[]; // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[]; // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}

package/cards/graphin/eventDispatcher.component.d.ts

@@ -1,8 +1,10 @@
-import { GraphinNodeEventContext } from './graphin.types';
+import { GraphinAfterLayoutContext, GraphinNodeEventContext } from './graphin.types';
 export type GraphinEventDispatcherProps = {
+    cardName: string;
     onNodeHovered?: (ctx: GraphinNodeEventContext) => void;
     onNodeHoverEnd?: (ctx: GraphinNodeEventContext) => void;
     onNodeClicked?: (ctx: GraphinNodeEventContext) => void;
     onNodeDblClicked?: (ctx: GraphinNodeEventContext) => void;
+    onAfterLayout?: (ctx: GraphinAfterLayoutContext) => void;
 };
 export declare function GraphinEventDispatcher(props: GraphinEventDispatcherProps): null;

package/cards/graphin/graphin.types.d.ts

@@ -12,6 +12,7 @@ export declare const GRAPHIN_ACTION: {
     TOOLTIP_CLOSE: string;
     CONTEXT_MENU_OPEN: string;
     CONTEXT_MENU_CLOSE: string;
+    AFTER_LAYOUT: string;
 };
 export declare const onGraphinNodeHovered: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
     cardID: string;
@@ -37,6 +38,17 @@ export declare const onGraphinContextMenuOpen: <S extends import('@pihanga2/core
 export declare const onGraphinContextMenuClose: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
     cardID: string;
 } & GraphinNodeEventContext<Record<string, unknown>>>) => void;
+export declare const onGraphinAfterLayout: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, ReduxAction & {
+    cardID: string;
+} & Record<string, unknown> & {
+    cardID: string;
+}>) => void;
+/**
+ * Payload carried by the `afterlayout` lifecycle event.
+ */
+export type GraphinAfterLayoutContext = Record<string, unknown> & {
+    cardID: string;
+};
 /**
  * Payload carried by all node interaction events.
  * Also forwarded as props to tooltip / context-menu `PiCard` content cards
@@ -594,4 +606,6 @@ export type GraphinEvents = {
     onContextMenuOpen: GraphinNodeEventContext;
     /** Fired when the context-menu panel closes */
     onContextMenuClose: GraphinNodeEventContext;
+    /** Fired when the G6 layout engine finishes positioning all nodes */
+    onAfterLayout: GraphinAfterLayoutContext;
 };

package/cards/infoCard/index.d.ts

@@ -0,0 +1 @@
+export * from './infoCard.types';

package/cards/infoCard/index.js

@@ -0,0 +1,12 @@
+import { InfoCardComponent as e } from "./infoCard.component.js";
+import { INFO_CARD as t, InfoCard as n } from "./infoCard.types.js";
+import { registerCardComponent as r } from "@pihanga2/core";
+//#region src/cards/infoCard/index.tsx
+r({
+	name: t,
+	component: e
+});
+//#endregion
+export { t as INFO_CARD, n as InfoCard };
+
+//# sourceMappingURL=index.js.map

package/cards/infoCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/infoCard/index.tsx"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {InfoCardComponent} from \"./infoCard.component\";\nimport {INFO_CARD} from \"./infoCard.types\";\n\nexport * from \"./infoCard.types\";\n\nregisterCardComponent({\n  name: INFO_CARD,\n  component: InfoCardComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/infoCard/infoCard.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { InfoCardProps } from './infoCard.types';
+import * as React from "react";
+export declare const InfoCardComponent: (props: PiCardProps<InfoCardProps>) => React.ReactNode;

package/cards/infoCard/infoCard.component.js

@@ -0,0 +1,55 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t, CardAction as n, CardContent as r, CardDescription as i, CardFooter as a, CardTitle as o } from "../../components/ui/card.js";
+import "react";
+import { Card as s } from "@pihanga2/core";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/cards/infoCard/infoCard.component.tsx
+var u = (u) => {
+	let { title: d, description: f, actionCard: p, contentCard: m, footerCard: h, className: g, headerClassName: _, titleClassName: v, descriptionClassName: y, actionClassName: b, contentClassName: x, footerClassName: S, style: C, cardName: w } = u, T = d || f || p;
+	return /* @__PURE__ */ l(t, {
+		className: e("min-w-max", g),
+		style: C,
+		"data-pihanga": w,
+		children: [
+			T && /* @__PURE__ */ l("div", {
+				"data-slot": "card-header",
+				className: e("grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6", "has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", _),
+				children: [
+					d && /* @__PURE__ */ c(o, {
+						className: v,
+						children: d
+					}),
+					f && /* @__PURE__ */ c(i, {
+						className: y,
+						children: f
+					}),
+					p && /* @__PURE__ */ c(n, {
+						className: b,
+						children: /* @__PURE__ */ c(s, {
+							cardName: p,
+							parentCard: w
+						})
+					})
+				]
+			}),
+			m && /* @__PURE__ */ c(r, {
+				className: x,
+				children: /* @__PURE__ */ c(s, {
+					cardName: m,
+					parentCard: w
+				})
+			}),
+			h && /* @__PURE__ */ c(a, {
+				className: S,
+				children: /* @__PURE__ */ c(s, {
+					cardName: h,
+					parentCard: w
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { u as InfoCardComponent };
+
+//# sourceMappingURL=infoCard.component.js.map

package/cards/infoCard/infoCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoCard.component.js","names":[],"sources":["../../../src/cards/infoCard/infoCard.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card as PiCard, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {\n  Card,\n  CardTitle,\n  CardDescription,\n  CardAction,\n  CardContent,\n  CardFooter,\n} from \"@/components/ui/card\";\nimport type {InfoCardProps} from \"./infoCard.types\";\n\nexport const InfoCardComponent = (\n  props: PiCardProps<InfoCardProps>,\n): React.ReactNode => {\n  const {\n    title,\n    description,\n    actionCard,\n    contentCard,\n    footerCard,\n    className,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    actionClassName,\n    contentClassName,\n    footerClassName,\n    style,\n    cardName,\n  } = props;\n\n  const hasHeader = title || description || actionCard;\n\n  return (\n    <Card\n      className={cn(\"min-w-max\", className)}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {hasHeader && (\n        // Plain <div> instead of shadcn <CardHeader> — avoids @container/card-header\n        // (container-type:inline-size) which zeroes out intrinsic inline size and\n        // breaks min-w-max on the parent Card. Visual classes are identical.\n        <div\n          data-slot=\"card-header\"\n          className={cn(\n            \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6\",\n            \"has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n            headerClassName,\n          )}\n        >\n          {title && <CardTitle className={titleClassName}>{title}</CardTitle>}\n          {description && (\n            <CardDescription className={descriptionClassName}>\n              {description}\n            </CardDescription>\n          )}\n          {actionCard && (\n            <CardAction className={actionClassName}>\n              <PiCard cardName={actionCard} parentCard={cardName} />\n            </CardAction>\n          )}\n        </div>\n      )}\n      {contentCard && (\n        <CardContent className={contentClassName}>\n          <PiCard cardName={contentCard} parentCard={cardName} />\n        </CardContent>\n      )}\n      {footerCard && (\n        <CardFooter className={footerClassName}>\n          <PiCard cardName={footerCard} parentCard={cardName} />\n        </CardFooter>\n      )}\n    </Card>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,gBACA,eACA,gBACA,eACA,cACA,oBACA,mBACA,yBACA,oBACA,qBACA,oBACA,UACA,gBACE,GAEE,IAAY,KAAS,KAAe;CAE1C,OACE,kBAAC,GAAD;EACE,WAAW,EAAG,aAAa,CAAS;EAC7B;EACP,gBAAc;YAHhB;GAKG,KAIC,kBAAC,OAAD;IACE,aAAU;IACV,WAAW,EACT,mEACA,qEACA,CACF;cANF;KAQG,KAAS,kBAAC,GAAD;MAAW,WAAW;gBAAiB;KAAiB,CAAA;KACjE,KACC,kBAAC,GAAD;MAAiB,WAAW;gBACzB;KACc,CAAA;KAElB,KACC,kBAAC,GAAD;MAAY,WAAW;gBACrB,kBAAC,GAAD;OAAQ,UAAU;OAAY,YAAY;MAAW,CAAA;KAC3C,CAAA;IAEX;;GAEN,KACC,kBAAC,GAAD;IAAa,WAAW;cACtB,kBAAC,GAAD;KAAQ,UAAU;KAAa,YAAY;IAAW,CAAA;GAC3C,CAAA;GAEd,KACC,kBAAC,GAAD;IAAY,WAAW;cACrB,kBAAC,GAAD;KAAQ,UAAU;KAAY,YAAY;IAAW,CAAA;GAC3C,CAAA;EAEV;;AAEV"}

package/cards/infoCard/infoCard.types.d.ts

@@ -0,0 +1,65 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const INFO_CARD = "shad/info-card";
+export type InfoCardProps = {
+    /**
+     * Text rendered inside `CardTitle`.
+     * Leave unset to omit the title element entirely.
+     */
+    title?: string;
+    /**
+     * Text rendered inside `CardDescription`.
+     * Leave unset to omit the description element entirely.
+     */
+    description?: string;
+    /**
+     * Pihanga card reference rendered inside the `CardAction` slot.
+     * Positioned at the top-right of the header (e.g. a button, badge, or icon).
+     */
+    actionCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered inside `CardContent`.
+     * Main body of the card — use any layout or display card.
+     */
+    contentCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered inside `CardFooter`.
+     * Typically a row of actions or a status line.
+     */
+    footerCard?: PiCardRef;
+    /** Extra CSS classes applied to the root `<div data-slot="card">`. */
+    className?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-header">`. */
+    headerClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-title">`. */
+    titleClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-description">`. */
+    descriptionClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-action">`. */
+    actionClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-content">`. */
+    contentClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-footer">`. */
+    footerClassName?: string;
+    /** Inline styles applied to the root card element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring a `shad/info-card` instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {InfoCard} from "@/cards/infoCard";
+ * import {Typography} from "@/cards/typography";
+ * import {Button} from "@/cards/button";
+ *
+ * registerCard("myApp/userCard", InfoCard({
+ *   title: "John Doe",
+ *   description: "Software Engineer",
+ *   actionCard: "myApp/editButton",
+ *   contentCard: "myApp/userDetails",
+ *   footerCard: "myApp/userActions",
+ * }));
+ * ```
+ */
+export declare const InfoCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<InfoCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/infoCard/infoCard.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/infoCard/infoCard.types.ts
+var t = "shad/info-card", n = e(t);
+//#endregion
+export { t as INFO_CARD, n as InfoCard };
+
+//# sourceMappingURL=infoCard.types.js.map

package/cards/infoCard/infoCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoCard.types.js","names":[],"sources":["../../../src/cards/infoCard/infoCard.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const INFO_CARD = \"shad/info-card\";\n\nexport type InfoCardProps = {\n  /**\n   * Text rendered inside `CardTitle`.\n   * Leave unset to omit the title element entirely.\n   */\n  title?: string;\n\n  /**\n   * Text rendered inside `CardDescription`.\n   * Leave unset to omit the description element entirely.\n   */\n  description?: string;\n\n  /**\n   * Pihanga card reference rendered inside the `CardAction` slot.\n   * Positioned at the top-right of the header (e.g. a button, badge, or icon).\n   */\n  actionCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered inside `CardContent`.\n   * Main body of the card — use any layout or display card.\n   */\n  contentCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered inside `CardFooter`.\n   * Typically a row of actions or a status line.\n   */\n  footerCard?: PiCardRef;\n\n  // ── Per-element className overrides ────────────────────────────────────────\n\n  /** Extra CSS classes applied to the root `<div data-slot=\"card\">`. */\n  className?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-header\">`. */\n  headerClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-title\">`. */\n  titleClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-description\">`. */\n  descriptionClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-action\">`. */\n  actionClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-content\">`. */\n  contentClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-footer\">`. */\n  footerClassName?: string;\n\n  /** Inline styles applied to the root card element. */\n  style?: React.CSSProperties;\n};\n\n/**\n * Factory function for declaring a `shad/info-card` instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {InfoCard} from \"@/cards/infoCard\";\n * import {Typography} from \"@/cards/typography\";\n * import {Button} from \"@/cards/button\";\n *\n * registerCard(\"myApp/userCard\", InfoCard({\n *   title: \"John Doe\",\n *   description: \"Software Engineer\",\n *   actionCard: \"myApp/editButton\",\n *   contentCard: \"myApp/userDetails\",\n *   footerCard: \"myApp/userActions\",\n * }));\n * ```\n */\nexport const InfoCard = createCardDeclaration<InfoCardProps>(INFO_CARD);\n"],"mappings":";;AAGA,IAAa,IAAY,kBA8EZ,IAAW,EAAqC,CAAS"}

package/cards/infoCard.d.ts

@@ -0,0 +1 @@
+export * from './infoCard/index';

package/cards/jsonViewer/jsonViewer.component.js

@@ -1,5 +1,5 @@
 import { getIconElement as e } from "../icons.js";
-/* empty css                                                 */
+import './jsonViewer.css';import '../../node_modules/react-json-view-lite/dist/index.css';/* empty css                                                 */
 /* empty css           */
 import { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";

package/cards/jsonViewer/jsonViewer.css

@@ -0,0 +1 @@
+.jv-wrapper{position:relative}.jv-copy-btn{z-index:10;width:22px;height:22px;color:hsl(var(--muted-foreground,0 0% 55%));cursor:pointer;opacity:.35;background:0 0;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:opacity .15s,color .15s,background .15s,border-color .15s;display:inline-flex;position:absolute;top:4px;right:4px}.jv-wrapper:hover .jv-copy-btn,.jv-wrapper:focus-within .jv-copy-btn{opacity:1}.jv-copy-btn:hover{color:hsl(var(--foreground));background:hsl(var(--muted,0 0% 96%));border-color:hsl(var(--border,0 0% 88%))}.jv-copy-btn--done{opacity:1;color:#2e7d32}.dark .jv-copy-btn--done{color:#81c784}.jv-container{white-space:pre-wrap;word-wrap:break-word;color:var(--foreground);background:0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:12.5px;font-weight:400;line-height:1.55}.jv-basic-child{margin:0;padding:0 0 0 1.1em;display:block;position:relative}.jv-label{color:var(--foreground);margin-right:0;font-weight:400}.jv-clickable-label{color:var(--foreground);cursor:pointer;margin-right:0;font-weight:400}.jv-clickable-label:hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.jv-punctuation{color:var(--foreground);font-weight:400}.jv-expand-icon,.jv-collapse-icon{width:1em;color:hsl(var(--muted-foreground,0 0% 55%));-webkit-user-select:none;user-select:none;cursor:pointer;justify-content:center;align-items:center;font-size:.65em;line-height:1;display:inline-flex;position:absolute;top:.775em;left:0;transform:translateY(-50%)}.jv-expand-icon:after{content:"▶"}.jv-collapse-icon:after{content:"▼"}.jv-collapsed-content{cursor:pointer;color:hsl(var(--muted-foreground,0 0% 55%))}.jv-collapsed-content:after{content:" …"}.jv-child-fields-container{border-left:1px solid hsl(var(--border,0 0% 88%));margin:0 0 0 .3em;padding:0 0 0 1.25em}.jv-null,.jv-undefined{color:#c0392b}.jv-string{color:#2e7d32}.jv-number{color:#1565c0}.jv-boolean{color:#00796b}.jv-other{color:var(--foreground)}.dark .jv-string{color:#81c784}.dark .jv-number{color:#64b5f6}.dark .jv-boolean{color:#4db6ac}.dark .jv-null,.dark .jv-undefined{color:#ef9a9a}.dark .jv-child-fields-container{border-left-color:hsl(var(--border,0 0% 25%))}

package/cards/list/list.component.js

@@ -1,7 +1,7 @@
 import { getIcon as e } from "../icons.js";
-import { Badge as t } from "../../components/ui/badge.js";
-import { cn as n } from "../../lib/utils.js";
-import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../../components/ui/avatar.js";
+import { cn as t } from "../../lib/utils.js";
+import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../../components/ui/avatar.js";
+import { Badge as a } from "../../components/ui/badge.js";
 import * as o from "react";
 import { Card as s } from "@pihanga2/core";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -24,14 +24,14 @@ function m(o, u, d) {
 	if (!o) return null;
 	switch (o.type) {
 		case "icon": return /* @__PURE__ */ c("span", {
-			className: n("flex shrink-0 items-center [&>svg]:size-4", o.className),
+			className: t("flex shrink-0 items-center [&>svg]:size-4", o.className),
 			children: e(o.name)
 		});
-		case "avatar": return /* @__PURE__ */ l(r, {
-			className: n(p[u], o.className),
-			children: [/* @__PURE__ */ c(a, { src: o.src }), /* @__PURE__ */ c(i, { children: o.fallback ?? "" })]
+		case "avatar": return /* @__PURE__ */ l(n, {
+			className: t(p[u], o.className),
+			children: [/* @__PURE__ */ c(i, { src: o.src }), /* @__PURE__ */ c(r, { children: o.fallback ?? "" })]
 		});
-		case "chip": return /* @__PURE__ */ c(t, {
+		case "chip": return /* @__PURE__ */ c(a, {
 			variant: "secondary",
 			className: o.className,
 			children: o.text
@@ -43,52 +43,52 @@ function m(o, u, d) {
 		default: return null;
 	}
 }
-function h({ item: e, size: t, onItemClicked: r, cardName: i }) {
+function h({ item: e, size: n, onItemClicked: r, cardName: i }) {
 	let [a, s] = o.useState(!1), p = !!e.nested?.length;
 	function g() {
 		p ? s((e) => !e) : r({ itemID: e.id });
 	}
 	return /* @__PURE__ */ l("li", { children: [/* @__PURE__ */ l("button", {
 		type: "button",
-		className: n("flex w-full items-center rounded-sm outline-none transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-1 focus-visible:ring-ring", e.isSelected && "bg-accent text-accent-foreground font-medium", d[t], e.className),
+		className: t("flex w-full items-center rounded-sm outline-none transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-1 focus-visible:ring-ring", e.isSelected && "bg-accent text-accent-foreground font-medium", d[n], e.className),
 		onClick: g,
 		"aria-expanded": p ? a : void 0,
 		"data-selected": e.isSelected || void 0,
 		children: [
-			m(e.startDecorator, t, i),
+			m(e.startDecorator, n, i),
 			/* @__PURE__ */ l("span", {
 				className: "flex min-w-0 flex-1 flex-col items-start",
 				children: [/* @__PURE__ */ c("span", {
 					className: "truncate leading-none",
 					children: e.title
 				}), e.subTitle && /* @__PURE__ */ c("span", {
-					className: n("mt-0.5 truncate text-muted-foreground", f[t]),
+					className: t("mt-0.5 truncate text-muted-foreground", f[n]),
 					children: e.subTitle
 				})]
 			}),
-			!p && m(e.endDecorator, t, i),
-			p && /* @__PURE__ */ c(u, { className: n("ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200", a && "rotate-180") })
+			!p && m(e.endDecorator, n, i),
+			p && /* @__PURE__ */ c(u, { className: t("ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200", a && "rotate-180") })
 		]
 	}), p && a && /* @__PURE__ */ c("ul", {
-		className: n("ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2", "list-none p-0", t === "lg" ? "ml-4 pl-3" : "ml-3 pl-2"),
-		children: e.nested.map((e, n) => /* @__PURE__ */ c(h, {
+		className: t("ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2", "list-none p-0", n === "lg" ? "ml-4 pl-3" : "ml-3 pl-2"),
+		children: e.nested.map((e, t) => /* @__PURE__ */ c(h, {
 			item: e,
-			size: t,
+			size: n,
 			onItemClicked: r,
 			cardName: i
-		}, e.id ?? n))
+		}, e.id ?? t))
 	})] });
 }
 var g = (e) => {
-	let { items: t, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
+	let { items: n, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
 		...o,
 		...i && i !== "none" ? { listStyleType: i } : void 0
 	};
 	return /* @__PURE__ */ c("ul", {
-		className: n("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
+		className: t("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
 		style: u,
 		"data-pihanga": l,
-		children: t.map((e, t) => /* @__PURE__ */ c(h, {
+		children: n.map((e, t) => /* @__PURE__ */ c(h, {
 			item: e,
 			size: r,
 			onItemClicked: s,

package/cards/loadingOverlay/loadingOverlay.component.js

@@ -1,5 +1,5 @@
 import { Spinner as e } from "../../components/ui/spinner.js";
-/* empty css               */
+import './loadingOverlay.css';/* empty css               */
 import "react";
 import { Card as t } from "@pihanga2/core";
 import n from "clsx";

package/cards/loadingOverlay/loadingOverlay.css

@@ -0,0 +1 @@
+.overlay-wrapper{flex-direction:column;width:100%;min-width:0;display:flex;position:relative}.overlay-wrapper.is-loading.fill-parent{min-height:12rem}.overlay-content{flex-direction:column;flex-grow:1;width:100%;min-width:0;display:flex;position:relative;overflow-y:hidden}.overlay-wrapper.fill-parent .overlay-content{min-height:inherit}.loading-overlay{opacity:0;pointer-events:none;z-index:2;background:oklch(100% 0 0/.7);justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.overlay-wrapper.viewport-centered .loading-overlay{z-index:50;position:fixed;inset:0}.dark .loading-overlay{background:oklch(14.5% 0 0/.5)}.overlay-wrapper.is-loading .loading-overlay{opacity:1;pointer-events:auto}.loading-overlay__content{color:var(--muted-foreground);align-items:center;gap:.5rem;font-size:.875rem;display:flex}

package/cards/pageWithNavbar/pageWithNavbar.component.js

@@ -2,7 +2,7 @@ import { SCREEN_SIZE_ORDER as e, SCREEN_SIZE_WIDTHS as t, ScreenSize as n } from
 import { getIconElement as r } from "../icons.js";
 import { Button as i } from "../../components/ui/button.js";
 import { Sheet as a, SheetContent as o, SheetTrigger as s } from "../../components/ui/sheet.js";
-/* empty css               */
+import './pageWithNavbar.css';/* empty css               */
 import { useEffect as c, useRef as l, useState as u } from "react";
 import { Card as d } from "@pihanga2/core";
 import f from "clsx";

package/cards/pageWithNavbar/pageWithNavbar.css

@@ -0,0 +1 @@
+.window{justify-content:center;width:100%;height:100%;display:flex}.page{flex-direction:column;flex:1;width:100%;height:100%;display:flex}.header{border-bottom:1px solid var(--border);background-color:var(--background);flex-shrink:0;align-items:center;gap:1rem;padding-left:1rem;padding-right:1rem;display:flex}@media (width>=768px){.header{padding-left:1.5rem;padding-right:1.5rem}}.title-section{align-items:center;gap:.5rem;display:inline-flex}.title-section .title-icon{flex-shrink:0;width:1.5rem;height:1.5rem}.title-section .title-text{color:var(--foreground);font-size:1.125rem;font-weight:600;line-height:1.75rem}.nav-md{display:none}@media (width>=768px){.nav-md{flex-direction:row;align-items:center;gap:1.25rem;display:flex}}@media (width>=1024px){.nav-md{gap:1.5rem}}.nav-md .nav-link{color:var(--muted-foreground);padding-left:0;padding-right:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-md .nav-link:hover{color:var(--foreground)}.nav-sm{gap:1.5rem;padding:1rem;font-size:1.125rem;font-weight:500;line-height:1.75rem;display:grid}.nav-sm .nav-link{color:var(--muted-foreground);justify-content:flex-start;padding-left:0;padding-right:0;font-size:1.125rem;line-height:1.75rem}.nav-sm .nav-link:hover{color:var(--foreground)}.header-actions{align-items:center;gap:.5rem;margin-left:auto;display:flex}@media (width>=1024px){.header-actions{gap:1rem}}.main{background-color:var(--background);flex:1;min-height:0;padding:.5rem 1rem;overflow-y:auto}@media (width>=768px){.main{padding:1rem 2rem}}.footer{background-color:var(--background);color:var(--muted-foreground);flex-shrink:0;padding:.5rem 1rem}@media (width>=768px){.footer{padding:1rem 2rem}}