@pihanga2/shadcn 0.2.1 → 0.2.3

package/cards/list/list.component.js

@@ -1,9 +1,9 @@
-import { Badge as e } from "../../components/ui/badge.js";
-import { cn as t } from "../../lib/utils.js";
-import { getIcon as n } from "../icons.js";
+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 { Card as o } from "@pihanga2/core";
-import * as s from "react";
+import * as o from "react";
+import { Card as s } from "@pihanga2/core";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { ChevronDown as u } from "lucide-react";
 //#region src/cards/list/list.component.tsx
@@ -20,75 +20,75 @@ var d = {
 	md: "size-6",
 	lg: "size-7"
 };
-function m(s, u, d) {
-	if (!s) return null;
-	switch (s.type) {
+function m(o, u, d) {
+	if (!o) return null;
+	switch (o.type) {
 		case "icon": return /* @__PURE__ */ c("span", {
-			className: t("flex shrink-0 items-center [&>svg]:size-4", s.className),
-			children: n(s.name)
+			className: n("flex shrink-0 items-center [&>svg]:size-4", o.className),
+			children: e(o.name)
 		});
 		case "avatar": return /* @__PURE__ */ l(r, {
-			className: t(p[u], s.className),
-			children: [/* @__PURE__ */ c(a, { src: s.src }), /* @__PURE__ */ c(i, { children: s.fallback ?? "" })]
+			className: n(p[u], o.className),
+			children: [/* @__PURE__ */ c(a, { src: o.src }), /* @__PURE__ */ c(i, { children: o.fallback ?? "" })]
 		});
-		case "chip": return /* @__PURE__ */ c(e, {
+		case "chip": return /* @__PURE__ */ c(t, {
 			variant: "secondary",
-			className: s.className,
-			children: s.text
+			className: o.className,
+			children: o.text
 		});
-		case "card": return /* @__PURE__ */ c(o, {
-			cardName: s.cardName,
+		case "card": return /* @__PURE__ */ c(s, {
+			cardName: o.cardName,
 			parentCard: d
 		});
 		default: return null;
 	}
 }
-function h({ item: e, size: n, onItemClicked: r, cardName: i }) {
-	let [a, o] = s.useState(!1), p = !!e.nested?.length;
+function h({ item: e, size: t, onItemClicked: r, cardName: i }) {
+	let [a, s] = o.useState(!1), p = !!e.nested?.length;
 	function g() {
-		p ? o((e) => !e) : r({ itemID: e.id });
+		p ? s((e) => !e) : r({ itemID: e.id });
 	}
 	return /* @__PURE__ */ l("li", { children: [/* @__PURE__ */ l("button", {
 		type: "button",
-		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),
+		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),
 		onClick: g,
 		"aria-expanded": p ? a : void 0,
 		"data-selected": e.isSelected || void 0,
 		children: [
-			m(e.startDecorator, n, i),
+			m(e.startDecorator, t, 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: t("mt-0.5 truncate text-muted-foreground", f[n]),
+					className: n("mt-0.5 truncate text-muted-foreground", f[t]),
 					children: e.subTitle
 				})]
 			}),
-			!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 && 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 && a && /* @__PURE__ */ c("ul", {
-		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, {
+		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, {
 			item: e,
-			size: n,
+			size: t,
 			onItemClicked: r,
 			cardName: i
-		}, e.id ?? t))
+		}, e.id ?? n))
 	})] });
 }
 var g = (e) => {
-	let { items: n, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
+	let { items: t, 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: t("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
+		className: n("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
 		style: u,
 		"data-pihanga": l,
-		children: n.map((e, t) => /* @__PURE__ */ c(h, {
+		children: t.map((e, t) => /* @__PURE__ */ c(h, {
 			item: e,
 			size: r,
 			onItemClicked: s,

package/cards/list/list.types.js

@@ -1,3 +1,4 @@
+import "react";
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/list/list.types.ts
 var r = "shad/list", i = e(r), a = n(r, ["item_clicked"]), o = t(a.ITEM_CLICKED);

package/cards/list/list.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.types.js","names":[],"sources":["../../../src/cards/list/list.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const LIST_CARD = \"shad/list\";\n\nexport const List = createCardDeclaration<ListProps, ListEvents>(LIST_CARD);\n\nexport const LIST_ACTION = registerActions(LIST_CARD, [\"item_clicked\"]);\n\nexport const onListItemClicked = createOnAction<ItemClickedEvent>(\n  LIST_ACTION.ITEM_CLICKED,\n);\n\n// Decorator shown before or after an item's title/subtitle block.\nexport type IconDecorator = {\n  type: \"icon\";\n  /** Name registered via registerIcon() in src/cards/icons.ts */\n  name: string;\n  className?: string;\n};\n\nexport type AvatarDecorator = {\n  type: \"avatar\";\n  src: string;\n  fallback?: string;\n  className?: string;\n};\n\nexport type ChipDecorator = {\n  type: \"chip\";\n  text: string;\n  className?: string;\n};\n\nexport type CardDecorator = {\n  type: \"card\";\n  cardName: PiCardRef;\n};\n\nexport type DecoratorT =\n  | IconDecorator\n  | AvatarDecorator\n  | ChipDecorator\n  | CardDecorator;\n\nexport type ListItem = {\n  /** React key — must be unique within the list. */\n  id: string | number;\n  isSelected?: boolean;\n  title: string;\n  subTitle?: string;\n  /** When present the item becomes a collapsible parent. */\n  nested?: ListItem[];\n  startDecorator?: DecoratorT;\n  endDecorator?: DecoratorT;\n  /** Extra CSS classes on this item's button. */\n  className?: string;\n};\n\nexport type ListProps = {\n  items: ListItem[];\n  /** Visual density — defaults to \"md\". */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * CSS `list-style-type` value (e.g. \"disc\", \"decimal\", \"none\").\n   * Defaults to \"none\" (plain list without markers).\n   */\n  marker?: string;\n  /** CSS classes applied directly to the root `<ul>`. */\n  className?: string;\n  /** Inline styles applied directly to the root `<ul>`. */\n  style?: React.CSSProperties;\n};\n\nexport type ItemClickedEvent = {\n  itemID: string | number;\n};\n\nexport type ListEvents = {\n  onItemClicked: ItemClickedEvent;\n};\n"],"mappings":";;AAQA,IAAa,IAAY,aAEZ,IAAO,EAA6C,CAAS,GAE7D,IAAc,EAAgB,GAAW,CAAC,cAAc,CAAC,GAEzD,IAAoB,EAC/B,EAAY,YACd"}
+{"version":3,"file":"list.types.js","names":[],"sources":["../../../src/cards/list/list.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const LIST_CARD = \"shad/list\";\n\nexport const List = createCardDeclaration<ListProps, ListEvents>(LIST_CARD);\n\nexport const LIST_ACTION = registerActions(LIST_CARD, [\"item_clicked\"]);\n\nexport const onListItemClicked = createOnAction<ItemClickedEvent>(\n  LIST_ACTION.ITEM_CLICKED,\n);\n\n// Decorator shown before or after an item's title/subtitle block.\nexport type IconDecorator = {\n  type: \"icon\";\n  /** Name registered via registerIcon() in src/cards/icons.ts */\n  name: string;\n  className?: string;\n};\n\nexport type AvatarDecorator = {\n  type: \"avatar\";\n  src: string;\n  fallback?: string;\n  className?: string;\n};\n\nexport type ChipDecorator = {\n  type: \"chip\";\n  text: string;\n  className?: string;\n};\n\nexport type CardDecorator = {\n  type: \"card\";\n  cardName: PiCardRef;\n};\n\nexport type DecoratorT =\n  | IconDecorator\n  | AvatarDecorator\n  | ChipDecorator\n  | CardDecorator;\n\nexport type ListItem = {\n  /** React key — must be unique within the list. */\n  id: string | number;\n  isSelected?: boolean;\n  title: string;\n  subTitle?: string;\n  /** When present the item becomes a collapsible parent. */\n  nested?: ListItem[];\n  startDecorator?: DecoratorT;\n  endDecorator?: DecoratorT;\n  /** Extra CSS classes on this item's button. */\n  className?: string;\n};\n\nexport type ListProps = {\n  items: ListItem[];\n  /** Visual density — defaults to \"md\". */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * CSS `list-style-type` value (e.g. \"disc\", \"decimal\", \"none\").\n   * Defaults to \"none\" (plain list without markers).\n   */\n  marker?: string;\n  /** CSS classes applied directly to the root `<ul>`. */\n  className?: string;\n  /** Inline styles applied directly to the root `<ul>`. */\n  style?: React.CSSProperties;\n};\n\nexport type ItemClickedEvent = {\n  itemID: string | number;\n};\n\nexport type ListEvents = {\n  onItemClicked: ItemClickedEvent;\n};\n"],"mappings":";;;AAQA,IAAa,IAAY,aAEZ,IAAO,EAA6C,CAAS,GAE7D,IAAc,EAAgB,GAAW,CAAC,cAAc,CAAC,GAEzD,IAAoB,EAC/B,EAAY,YACd"}

package/cards/loadingOverlay/loadingOverlay.component.js

@@ -1,7 +1,7 @@
 import { Spinner as e } from "../../components/ui/spinner.js";
 /* empty css               */
-import { Card as t } from "@pihanga2/core";
 import "react";
+import { Card as t } from "@pihanga2/core";
 import n from "clsx";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/cards/loadingOverlay/loadingOverlay.component.tsx

package/cards/loadingSkeleton/loading-skeleton.component.js

@@ -1,5 +1,5 @@
-import { Card as e } from "@pihanga2/core";
 import "react";
+import { Card as e } from "@pihanga2/core";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/cards/loadingSkeleton/loading-skeleton.component.tsx
 var n = {

package/cards/pageWithNavbar/pageWithNavbar.component.d.ts

@@ -1,12 +1,10 @@
 import { PiCardProps } from '@pihanga2/core';
 import { PageWithNavbarEvents, PageWithNavbarProps } from './pageWithNavbar.type';
 export type ShadStyle = {
-    shad?: {
-        window?: string;
-        page?: string;
-        header?: string;
-        main?: string;
-        footer?: string;
-    };
+    window?: string;
+    page?: string;
+    header?: string;
+    main?: string;
+    footer?: string;
 };
 export declare const Component: (props: PiCardProps<PageWithNavbarProps<ShadStyle>, PageWithNavbarEvents>) => React.ReactNode;

package/cards/pageWithNavbar/pageWithNavbar.component.js

@@ -1,25 +1,25 @@
-import { Button as e } from "../../components/ui/button.js";
-import { getIconElement as t } from "../icons.js";
-import { Sheet as n, SheetContent as r, SheetTrigger as i } from "../../components/ui/sheet.js";
-import { SCREEN_SIZE_ORDER as a, SCREEN_SIZE_WIDTHS as o, ScreenSize as s } from "../types.js";
+import { SCREEN_SIZE_ORDER as e, SCREEN_SIZE_WIDTHS as t, ScreenSize as n } from "../types.js";
+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 { Card as c } from "@pihanga2/core";
-import { useEffect as l, useRef as u, useState as d } from "react";
+import { useEffect as c, useRef as l, useState as u } from "react";
+import { Card as d } from "@pihanga2/core";
 import f from "clsx";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Menu as h } from "lucide-react";
 //#region src/cards/pageWithNavbar/pageWithNavbar.component.tsx
 function g() {
-	let e = typeof window < "u" ? window.innerWidth : 0;
-	for (let t = a.length - 1; t >= 0; t--) {
-		let n = a[t];
-		if (e >= o[n]) return n;
+	let r = typeof window < "u" ? window.innerWidth : 0;
+	for (let n = e.length - 1; n >= 0; n--) {
+		let i = e[n];
+		if (r >= t[i]) return i;
 	}
-	return s.XS;
+	return n.XS;
 }
 function _() {
-	let [e, t] = d(g);
-	return l(() => {
+	let [e, t] = u(g);
+	return c(() => {
 		let e = () => t(g());
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []), e;
@@ -27,19 +27,19 @@ function _() {
 function v(e) {
 	return typeof e == "object" && !!e;
 }
-function y(e, t) {
-	if (!e) return;
-	if (!v(e)) return e;
-	let n = a.indexOf(t);
-	for (let t = n; t >= 0; t--) {
-		let n = a[t];
-		if (Object.prototype.hasOwnProperty.call(e, n)) return e[n] ?? void 0;
+function y(t, n) {
+	if (!t) return;
+	if (!v(t)) return t;
+	let r = e.indexOf(n);
+	for (let n = r; n >= 0; n--) {
+		let r = e[n];
+		if (Object.prototype.hasOwnProperty.call(t, r)) return t[r] ?? void 0;
 	}
-	return e.default ?? void 0;
+	return t.default ?? void 0;
 }
-var b = (a) => {
-	let { title: o, iconName: s, main: d, footer: g, navLinks: v = [], scrollResetKey: b, headerLeftCard: S, headerRightCard: C, style: w, onNavigateTo: T, cardName: E } = a, D = _(), O = w?.shad ?? {}, k = u(null);
-	l(() => {
+var b = (e) => {
+	let { title: t, iconName: n, main: u, footer: g, navLinks: v = [], scrollResetKey: b, headerLeftCard: S, headerRightCard: C, style: w, onNavigateTo: T, cardName: E } = e, D = _(), O = w ?? {}, k = l(null);
+	c(() => {
 		k.current?.scrollTo({
 			top: 0,
 			behavior: "auto"
@@ -47,15 +47,15 @@ var b = (a) => {
 	}, [b]);
 	let A = y(S, D), j = y(C, D), M = v.length > 0;
 	function N({ className: e }) {
-		let n = s ? t(s) : void 0;
+		let i = n ? r(n) : void 0;
 		return /* @__PURE__ */ m("div", {
 			className: f("title-section", e),
-			children: [n && /* @__PURE__ */ p(n, {
+			children: [i && /* @__PURE__ */ p(i, {
 				className: "title-icon",
 				"aria-hidden": !0
 			}), /* @__PURE__ */ p("span", {
 				className: "title-text",
-				children: o
+				children: t
 			})]
 		});
 	}
@@ -63,18 +63,18 @@ var b = (a) => {
 		return /* @__PURE__ */ m("nav", {
 			className: "nav-md",
 			"aria-label": "Main navigation",
-			children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
-				onClick: () => T({ id: t.id }),
+			children: [/* @__PURE__ */ p(N, {}), v.map((e) => /* @__PURE__ */ p(i, {
+				onClick: () => T({ id: e.id }),
 				variant: "link",
 				className: "nav-link",
-				children: t.title ?? x(t.id)
-			}, t.id))]
+				children: e.title ?? x(e.id)
+			}, e.id))]
 		});
 	}
 	function F() {
-		return /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ p(i, {
+		return /* @__PURE__ */ m(a, { children: [/* @__PURE__ */ p(s, {
 			asChild: !0,
-			children: /* @__PURE__ */ p(e, {
+			children: /* @__PURE__ */ p(i, {
 				variant: "outline",
 				size: "icon",
 				className: "shrink-0 md:hidden",
@@ -84,17 +84,17 @@ var b = (a) => {
 					"aria-hidden": !0
 				})
 			})
-		}), /* @__PURE__ */ p(r, {
+		}), /* @__PURE__ */ p(o, {
 			side: "left",
 			children: /* @__PURE__ */ m("nav", {
 				className: "nav-sm",
 				"aria-label": "Mobile navigation",
-				children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
-					onClick: () => T({ id: t.id }),
+				children: [/* @__PURE__ */ p(N, {}), v.map((e) => /* @__PURE__ */ p(i, {
+					onClick: () => T({ id: e.id }),
 					variant: "link",
 					className: "nav-link",
-					children: t.title ?? x(t.id)
-				}, t.id))]
+					children: e.title ?? x(e.id)
+				}, e.id))]
 			})
 		})] });
 	}
@@ -115,10 +115,10 @@ var b = (a) => {
 						}),
 						/* @__PURE__ */ m("div", {
 							className: "header-actions",
-							children: [A && /* @__PURE__ */ p(c, {
+							children: [A && /* @__PURE__ */ p(d, {
 								cardName: A,
 								parentCard: E
-							}), j && /* @__PURE__ */ p(c, {
+							}), j && /* @__PURE__ */ p(d, {
 								cardName: j,
 								parentCard: E
 							})]
@@ -128,14 +128,14 @@ var b = (a) => {
 				/* @__PURE__ */ p("main", {
 					className: f("main", O.main),
 					ref: k,
-					children: /* @__PURE__ */ p(c, {
-						cardName: d,
+					children: /* @__PURE__ */ p(d, {
+						cardName: u,
 						parentCard: E
 					})
 				}),
 				g && /* @__PURE__ */ p("footer", {
 					className: f("footer", O.footer),
-					children: /* @__PURE__ */ p(c, {
+					children: /* @__PURE__ */ p(d, {
 						cardName: g,
 						parentCard: E
 					})

package/cards/pageWithNavbar/pageWithNavbar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"pageWithNavbar.component.js","names":[],"sources":["../../../src/cards/pageWithNavbar/pageWithNavbar.component.tsx"],"sourcesContent":["import {Menu} from \"lucide-react\";\nimport clsx from \"clsx\";\nimport {useEffect, useRef, useState} from \"react\";\n\nimport {Button} from \"@/components/ui/button\";\nimport {Sheet, SheetContent, SheetTrigger} from \"@/components/ui/sheet\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {getIconElement} from \"@/cards/icons\";\nimport {ScreenSize, SCREEN_SIZE_ORDER, SCREEN_SIZE_WIDTHS} from \"@/cards/types\";\nimport type {\n  PageWithNavbarEvents,\n  PageWithNavbarProps,\n  ResponsiveCardRef,\n} from \"./pageWithNavbar.type\";\nimport type {SizeMap} from \"@/cards/types\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\nimport \"./pageWithNavbar.css\";\n\n// ---------------------------------------------------------------------------\n// Style override type — consumers can extend this to add Tailwind class names\n// to any structural section of the layout.\n// ---------------------------------------------------------------------------\n\nexport type ShadStyle = {\n  shad?: {\n    window?: string;\n    page?: string;\n    header?: string;\n    main?: string;\n    footer?: string;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Screen-size hook\n// ---------------------------------------------------------------------------\n\nfunction getCurrentScreenSize(): ScreenSize {\n  const w = typeof window !== \"undefined\" ? window.innerWidth : 0;\n  // Walk breakpoints from largest to smallest\n  for (let i = SCREEN_SIZE_ORDER.length - 1; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (w >= SCREEN_SIZE_WIDTHS[size]) return size;\n  }\n  return ScreenSize.XS;\n}\n\nfunction useScreenSize(): ScreenSize {\n  const [size, setSize] = useState<ScreenSize>(getCurrentScreenSize);\n\n  useEffect(() => {\n    const handleResize = () => setSize(getCurrentScreenSize());\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  return size;\n}\n\n// ---------------------------------------------------------------------------\n// Responsive card-ref resolution\n// ---------------------------------------------------------------------------\n\nfunction isSizeMap(ref: ResponsiveCardRef): ref is SizeMap<PiCardRef> {\n  return typeof ref === \"object\" && ref !== null;\n}\n\n/**\n * Resolve a {@link ResponsiveCardRef} to a concrete `PiCardRef` (or\n * `undefined`) for the given screen size.\n *\n * Uses a **mobile-first cascade**: the entry with the largest breakpoint\n * that is still ≤ `currentSize` wins; falls back to `default` otherwise.\n */\nfunction resolveCardRef(\n  ref: ResponsiveCardRef | undefined,\n  currentSize: ScreenSize,\n): PiCardRef | undefined {\n  if (!ref) return undefined;\n  if (!isSizeMap(ref)) return ref; // plain PiCardRef (string or PiCardDef)\n\n  // Cascade: find the highest breakpoint that is ≤ current size\n  const currentIdx = SCREEN_SIZE_ORDER.indexOf(currentSize);\n  for (let i = currentIdx; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (Object.prototype.hasOwnProperty.call(ref, size)) {\n      const val = ref[size];\n      // null means \"explicitly hidden at this breakpoint\"\n      return val ?? undefined;\n    }\n  }\n  // Fall back to the default entry\n  return ref.default ?? undefined;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Component = (\n  props: PiCardProps<PageWithNavbarProps<ShadStyle>, PageWithNavbarEvents>,\n): React.ReactNode => {\n  const {\n    title,\n    iconName,\n    main,\n    footer,\n    navLinks = [],\n    scrollResetKey,\n    headerLeftCard,\n    headerRightCard,\n    style,\n    onNavigateTo,\n    cardName,\n  } = props;\n\n  const screenSize = useScreenSize();\n  const cl = style?.shad ?? {};\n  const mainRef = useRef<HTMLElement | null>(null);\n\n  // Scroll main back to top when the logical \"page\" changes\n  useEffect(() => {\n    mainRef.current?.scrollTo({top: 0, behavior: \"auto\"});\n  }, [scrollResetKey]);\n\n  const resolvedLeftCard = resolveCardRef(headerLeftCard, screenSize);\n  const resolvedRightCard = resolveCardRef(headerRightCard, screenSize);\n  const hasNavLinks = navLinks.length > 0;\n\n  // ------------------------------------------------------------------\n  // Sub-components\n  // ------------------------------------------------------------------\n\n  /** Title section: optional icon + text */\n  function TitleSection({className}: {className?: string}) {\n    const IconEl = iconName ? getIconElement(iconName) : undefined;\n    return (\n      <div className={clsx(\"title-section\", className)}>\n        {IconEl && <IconEl className=\"title-icon\" aria-hidden />}\n        <span className=\"title-text\">{title}</span>\n      </div>\n    );\n  }\n\n  /** Nav bar rendered on medium screens and above */\n  function NavMd() {\n    return (\n      <nav className=\"nav-md\" aria-label=\"Main navigation\">\n        <TitleSection />\n        {navLinks.map((el) => (\n          <Button\n            key={el.id}\n            onClick={() => onNavigateTo({id: el.id})}\n            variant=\"link\"\n            className=\"nav-link\"\n          >\n            {el.title ?? capitalize(el.id)}\n          </Button>\n        ))}\n      </nav>\n    );\n  }\n\n  /** Hamburger trigger that opens a slide-out sheet on small screens */\n  function NavSm() {\n    return (\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"shrink-0 md:hidden\"\n            aria-label=\"Toggle navigation menu\"\n          >\n            <Menu className=\"h-5 w-5\" aria-hidden />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav className=\"nav-sm\" aria-label=\"Mobile navigation\">\n            <TitleSection />\n            {navLinks.map((el) => (\n              <Button\n                key={el.id}\n                onClick={() => onNavigateTo({id: el.id})}\n                variant=\"link\"\n                className=\"nav-link\"\n              >\n                {el.title ?? capitalize(el.id)}\n              </Button>\n            ))}\n          </nav>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  // ------------------------------------------------------------------\n  // Layout\n  // ------------------------------------------------------------------\n\n  return (\n    <div className={clsx(\"window\", cl.window)} data-pihanga={cardName}>\n      <div className={clsx(\"page\", cl.page)}>\n        {/* ── Header ─────────────────────────────────────────────── */}\n        <header className={clsx(\"header\", cl.header)}>\n          {/* Medium+ nav (title + links) */}\n          <NavMd />\n\n          {/* Small-screen hamburger (only when there are nav links) */}\n          {hasNavLinks && <NavSm />}\n\n          {/* On small screens with no nav links, show the title inline.\n              Wrap in a plain div so md:hidden isn't overridden by the\n              .title-section CSS class that sets display:inline-flex. */}\n          {!hasNavLinks && (\n            <div className=\"md:hidden\">\n              <TitleSection />\n            </div>\n          )}\n\n          {/* Push action cards to the right */}\n          <div className=\"header-actions\">\n            {resolvedLeftCard && (\n              <Card cardName={resolvedLeftCard} parentCard={cardName} />\n            )}\n            {resolvedRightCard && (\n              <Card cardName={resolvedRightCard} parentCard={cardName} />\n            )}\n          </div>\n        </header>\n\n        {/* ── Main ───────────────────────────────────────────────── */}\n        <main className={clsx(\"main\", cl.main)} ref={mainRef}>\n          <Card cardName={main} parentCard={cardName} />\n        </main>\n\n        {/* ── Footer (optional) ──────────────────────────────────── */}\n        {footer && (\n          <footer className={clsx(\"footer\", cl.footer)}>\n            <Card cardName={footer} parentCard={cardName} />\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction capitalize(str: string): string {\n  if (!str) return \"\";\n  return str.charAt(0).toLocaleUpperCase() + str.slice(1);\n}\n"],"mappings":"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"}
+{"version":3,"file":"pageWithNavbar.component.js","names":[],"sources":["../../../src/cards/pageWithNavbar/pageWithNavbar.component.tsx"],"sourcesContent":["import {Menu} from \"lucide-react\";\nimport clsx from \"clsx\";\nimport {useEffect, useRef, useState} from \"react\";\n\nimport {Button} from \"@/components/ui/button\";\nimport {Sheet, SheetContent, SheetTrigger} from \"@/components/ui/sheet\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {getIconElement} from \"@/cards/icons\";\nimport {ScreenSize, SCREEN_SIZE_ORDER, SCREEN_SIZE_WIDTHS} from \"@/cards/types\";\nimport type {\n  PageWithNavbarEvents,\n  PageWithNavbarProps,\n  ResponsiveCardRef,\n} from \"./pageWithNavbar.type\";\nimport type {SizeMap} from \"@/cards/types\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\nimport \"./pageWithNavbar.css\";\n\n// ---------------------------------------------------------------------------\n// Style override type — consumers can extend this to add Tailwind class names\n// to any structural section of the layout.\n// ---------------------------------------------------------------------------\n\nexport type ShadStyle = {\n  window?: string;\n  page?: string;\n  header?: string;\n  main?: string;\n  footer?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Screen-size hook\n// ---------------------------------------------------------------------------\n\nfunction getCurrentScreenSize(): ScreenSize {\n  const w = typeof window !== \"undefined\" ? window.innerWidth : 0;\n  // Walk breakpoints from largest to smallest\n  for (let i = SCREEN_SIZE_ORDER.length - 1; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (w >= SCREEN_SIZE_WIDTHS[size]) return size;\n  }\n  return ScreenSize.XS;\n}\n\nfunction useScreenSize(): ScreenSize {\n  const [size, setSize] = useState<ScreenSize>(getCurrentScreenSize);\n\n  useEffect(() => {\n    const handleResize = () => setSize(getCurrentScreenSize());\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  return size;\n}\n\n// ---------------------------------------------------------------------------\n// Responsive card-ref resolution\n// ---------------------------------------------------------------------------\n\nfunction isSizeMap(ref: ResponsiveCardRef): ref is SizeMap<PiCardRef> {\n  return typeof ref === \"object\" && ref !== null;\n}\n\n/**\n * Resolve a {@link ResponsiveCardRef} to a concrete `PiCardRef` (or\n * `undefined`) for the given screen size.\n *\n * Uses a **mobile-first cascade**: the entry with the largest breakpoint\n * that is still ≤ `currentSize` wins; falls back to `default` otherwise.\n */\nfunction resolveCardRef(\n  ref: ResponsiveCardRef | undefined,\n  currentSize: ScreenSize,\n): PiCardRef | undefined {\n  if (!ref) return undefined;\n  if (!isSizeMap(ref)) return ref; // plain PiCardRef (string or PiCardDef)\n\n  // Cascade: find the highest breakpoint that is ≤ current size\n  const currentIdx = SCREEN_SIZE_ORDER.indexOf(currentSize);\n  for (let i = currentIdx; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (Object.prototype.hasOwnProperty.call(ref, size)) {\n      const val = ref[size];\n      // null means \"explicitly hidden at this breakpoint\"\n      return val ?? undefined;\n    }\n  }\n  // Fall back to the default entry\n  return ref.default ?? undefined;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Component = (\n  props: PiCardProps<PageWithNavbarProps<ShadStyle>, PageWithNavbarEvents>,\n): React.ReactNode => {\n  const {\n    title,\n    iconName,\n    main,\n    footer,\n    navLinks = [],\n    scrollResetKey,\n    headerLeftCard,\n    headerRightCard,\n    style,\n    onNavigateTo,\n    cardName,\n  } = props;\n\n  const screenSize = useScreenSize();\n  const cl = style ?? {};\n  const mainRef = useRef<HTMLElement | null>(null);\n\n  // Scroll main back to top when the logical \"page\" changes\n  useEffect(() => {\n    mainRef.current?.scrollTo({top: 0, behavior: \"auto\"});\n  }, [scrollResetKey]);\n\n  const resolvedLeftCard = resolveCardRef(headerLeftCard, screenSize);\n  const resolvedRightCard = resolveCardRef(headerRightCard, screenSize);\n  const hasNavLinks = navLinks.length > 0;\n\n  // ------------------------------------------------------------------\n  // Sub-components\n  // ------------------------------------------------------------------\n\n  /** Title section: optional icon + text */\n  function TitleSection({className}: {className?: string}) {\n    const IconEl = iconName ? getIconElement(iconName) : undefined;\n    return (\n      <div className={clsx(\"title-section\", className)}>\n        {IconEl && <IconEl className=\"title-icon\" aria-hidden />}\n        <span className=\"title-text\">{title}</span>\n      </div>\n    );\n  }\n\n  /** Nav bar rendered on medium screens and above */\n  function NavMd() {\n    return (\n      <nav className=\"nav-md\" aria-label=\"Main navigation\">\n        <TitleSection />\n        {navLinks.map((el) => (\n          <Button\n            key={el.id}\n            onClick={() => onNavigateTo({id: el.id})}\n            variant=\"link\"\n            className=\"nav-link\"\n          >\n            {el.title ?? capitalize(el.id)}\n          </Button>\n        ))}\n      </nav>\n    );\n  }\n\n  /** Hamburger trigger that opens a slide-out sheet on small screens */\n  function NavSm() {\n    return (\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"shrink-0 md:hidden\"\n            aria-label=\"Toggle navigation menu\"\n          >\n            <Menu className=\"h-5 w-5\" aria-hidden />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav className=\"nav-sm\" aria-label=\"Mobile navigation\">\n            <TitleSection />\n            {navLinks.map((el) => (\n              <Button\n                key={el.id}\n                onClick={() => onNavigateTo({id: el.id})}\n                variant=\"link\"\n                className=\"nav-link\"\n              >\n                {el.title ?? capitalize(el.id)}\n              </Button>\n            ))}\n          </nav>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  // ------------------------------------------------------------------\n  // Layout\n  // ------------------------------------------------------------------\n\n  return (\n    <div className={clsx(\"window\", cl.window)} data-pihanga={cardName}>\n      <div className={clsx(\"page\", cl.page)}>\n        {/* ── Header ─────────────────────────────────────────────── */}\n        <header className={clsx(\"header\", cl.header)}>\n          {/* Medium+ nav (title + links) */}\n          <NavMd />\n\n          {/* Small-screen hamburger (only when there are nav links) */}\n          {hasNavLinks && <NavSm />}\n\n          {/* On small screens with no nav links, show the title inline.\n              Wrap in a plain div so md:hidden isn't overridden by the\n              .title-section CSS class that sets display:inline-flex. */}\n          {!hasNavLinks && (\n            <div className=\"md:hidden\">\n              <TitleSection />\n            </div>\n          )}\n\n          {/* Push action cards to the right */}\n          <div className=\"header-actions\">\n            {resolvedLeftCard && (\n              <Card cardName={resolvedLeftCard} parentCard={cardName} />\n            )}\n            {resolvedRightCard && (\n              <Card cardName={resolvedRightCard} parentCard={cardName} />\n            )}\n          </div>\n        </header>\n\n        {/* ── Main ───────────────────────────────────────────────── */}\n        <main className={clsx(\"main\", cl.main)} ref={mainRef}>\n          <Card cardName={main} parentCard={cardName} />\n        </main>\n\n        {/* ── Footer (optional) ──────────────────────────────────── */}\n        {footer && (\n          <footer className={clsx(\"footer\", cl.footer)}>\n            <Card cardName={footer} parentCard={cardName} />\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction capitalize(str: string): string {\n  if (!str) return \"\";\n  return str.charAt(0).toLocaleUpperCase() + str.slice(1);\n}\n"],"mappings":"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"}

package/cards/pasteTarget/pasteTarget.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"pasteTarget.component.js","names":[],"sources":["../../../src/cards/pasteTarget/pasteTarget.component.tsx"],"sourcesContent":["import {\n  DEF_ERROR_COLOR,\n  DEF_EVENT_DURATION_SECONDS,\n  DEF_HEIGHT,\n  DEF_OVERLAY_OPACITY,\n  DEF_PASTE_FIRST_REMINDER,\n  DEF_SUCCESS_COLOR,\n  PasteItem,\n  PasteTargetEvents,\n  PasteTargetProps,\n} from \"@/cards/pasteTarget/pasteTarget.types\";\nimport {PiCardProps} from \"@pihanga2/core\";\nimport React, {useRef, useState} from \"react\";\n\nimport \"./pasteTarget.css\";\nimport clsx from \"clsx\";\nimport {Button} from \"@/registry/ui/button\";\n\n// /* 3. Stretch the child to cover the parent entirely */\n// top: 0,\n// left: 0,\n// right: 0,\n// bottom: 0,\n\n// /* 4. Ensure the child is visually stacked above the parent's content */\n// z-index: 10,\n\n// /* Optional: Make the overlay visible (e.g., semi-transparent black) */\n// overlayOpacity: \"rgba(0, 0, 0, 0.5)\";\n// }\n\nexport const PasteTargetComponent = (\n  props: PiCardProps<PasteTargetProps, PasteTargetEvents>,\n): React.ReactNode => {\n  const {\n    title, //  = \"Paste content right here\",\n    description,\n    pasteFirstReminder = DEF_PASTE_FIRST_REMINDER,\n    withUpload,\n    fileTypes,\n\n    height = DEF_HEIGHT,\n\n    onPastedContent,\n\n    successColor = DEF_SUCCESS_COLOR,\n    errorColor = DEF_ERROR_COLOR,\n    eventDurationSeconds = DEF_EVENT_DURATION_SECONDS,\n    eventOpacity = DEF_OVERLAY_OPACITY,\n    cardName,\n    className,\n    _cls,\n  } = props;\n  const [overlayOpacity, setOverlayOpacity] = useState<number>(0);\n  const [overlayBackground, setOverlayBackground] = useState<string>(\"gray\");\n  const timerRef = React.useRef<number | null>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const overlayStyle: React.CSSProperties = {\n    backgroundColor: overlayBackground,\n    opacity: overlayOpacity,\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n\n    event.preventDefault();\n    const clipboardData =\n      event.clipboardData ||\n      (window as Window & {clipboardData?: DataTransfer}).clipboardData;\n\n    if (clipboardData) {\n      const pItems = clipboardData.items;\n      const items: PasteItem[] = [];\n      for (let i = 0; i < pItems.length; i++) {\n        const pi = pItems[i];\n        const mimeType = pi.type;\n        const content = clipboardData.getData(pi.type);\n        if (!(content == \"\" || content == \"\\n\")) {\n          items.push({mimeType, content});\n        }\n      }\n      onPastedContent({items});\n      setOverlayBackground(successColor);\n    } else {\n      setOverlayBackground(errorColor);\n    }\n    setOverlayOpacity(eventOpacity);\n    if (textareaRef.current) textareaRef.current.blur();\n\n    // Set a timeout to switch the color back after 'n' seconds\n    const newTimerId = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null; // Clear the ref after the timeout executes\n    }, eventDurationSeconds * 1000); // Convert seconds to milliseconds\n\n    // Save the new timer ID to the ref (unknown necessary type casting)\n    timerRef.current = newTimerId as unknown as number;\n  };\n\n  // Cleanup function to clear the timer when the component unmounts\n  React.useEffect(() => {\n    return () => {\n      const ref = timerRef.current;\n      if (ref) {\n        clearTimeout(ref);\n      }\n    };\n  }, []); // runs only on mount/unmount\n\n  function renderPasteHandler() {\n    return (\n      <textarea\n        onPaste={handlePaste}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => setIsFocused(false)}\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: 10,\n          resize: \"none\",\n          background: \"transparent\",\n          cursor: isFocused ? \"copy\" : \"pointer\",\n          ...overlayStyle,\n        }}\n        // 🔑 CRUCIAL: Focus the element before pasting so it receives the paste event.\n        // autoFocus\n        readOnly\n        ref={textareaRef}\n      />\n    );\n  }\n\n  /** Map friendly file-type labels to accept= strings for the hidden input. */\n  function buildAccept(): string | undefined {\n    if (!fileTypes?.length) return undefined;\n    return fileTypes\n      .map((t) => {\n        const ext = t.toLowerCase();\n        if (ext === \"jpg\" || ext === \"jpeg\") return \".jpg,.jpeg\";\n        return `.${ext}`;\n      })\n      .join(\",\");\n  }\n\n  function flashOverlay(color: string) {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setOverlayBackground(color);\n    setOverlayOpacity(eventOpacity);\n    const id = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null;\n    }, eventDurationSeconds * 1000);\n    timerRef.current = id as unknown as number;\n  }\n\n  function handleFileChange(ev: React.ChangeEvent<HTMLInputElement>) {\n    const file = ev.target.files?.[0];\n    // Reset input so the same file can be re-selected later.\n    ev.target.value = \"\";\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = (e) => {\n      const content = (e.target?.result as string) ?? \"\";\n      onPastedContent({items: [{mimeType: file.type, content}]});\n      flashOverlay(successColor);\n    };\n    reader.onerror = () => {\n      flashOverlay(errorColor);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function onUpload(ev: React.MouseEvent<HTMLButtonElement>) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    fileInputRef.current?.click();\n  }\n\n  function renderTitle() {\n    const uploadBtn = !isFocused && withUpload && (\n      <Button\n        onClick={onUpload}\n        style={{position: \"relative\", zIndex: 30, pointerEvents: \"auto\"}}\n      >\n        Upload\n      </Button>\n    );\n\n    if (title) {\n      return (\n        <div className=\"paste-target-msg-title\">\n          <h2>{title}</h2>\n          {uploadBtn}\n        </div>\n      );\n    } else {\n      return (\n        <div className=\"paste-target-msg-title\">\n          Paste\n          {uploadBtn && (\n            <>\n              &nbsp;or&nbsp;\n              {uploadBtn}\n            </>\n          )}\n          &nbsp;here\n        </div>\n      );\n    }\n  }\n\n  const cn = _cls(\"root\", className || \"pihanga-paste-target\");\n\n  return (\n    <div\n      className={clsx(cn, isFocused && \"pihanga-paste-target-focused\")}\n      data-pihanga={cardName}\n      style={{position: \"relative\", height, width: \"100%\"}}\n    >\n      <div\n        className=\"paste-target-label\"\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          textAlign: \"center\",\n          // zIndex must be above textarea (10) so the Upload button is clickable.\n          // pointer-events: none lets click/focus pass through to the textarea,\n          // EXCEPT on children that override with pointer-events: auto (the button).\n          pointerEvents: \"none\",\n          zIndex: 20,\n        }}\n      >\n        {renderTitle()}\n        {description && (\n          <span className=\"paste-target-msg-desc\">{description}</span>\n        )}\n        <div className=\"paste-target-focus-reminder\">{pasteFirstReminder}</div>\n      </div>\n      {renderPasteHandler()}\n      {/* Hidden file input — triggered programmatically by the Upload button */}\n      {withUpload && (\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          accept={buildAccept()}\n          onChange={handleFileChange}\n          style={{display: \"none\"}}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"pasteTarget.component.js","names":[],"sources":["../../../src/cards/pasteTarget/pasteTarget.component.tsx"],"sourcesContent":["import {\n  DEF_ERROR_COLOR,\n  DEF_EVENT_DURATION_SECONDS,\n  DEF_HEIGHT,\n  DEF_OVERLAY_OPACITY,\n  DEF_PASTE_FIRST_REMINDER,\n  DEF_SUCCESS_COLOR,\n  type PasteItem,\n  type PasteTargetEvents,\n  type PasteTargetProps,\n} from \"@/cards/pasteTarget/pasteTarget.types\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport React, {useRef, useState} from \"react\";\n\nimport \"./pasteTarget.css\";\nimport clsx from \"clsx\";\nimport {Button} from \"@/registry/ui/button\";\n\n// /* 3. Stretch the child to cover the parent entirely */\n// top: 0,\n// left: 0,\n// right: 0,\n// bottom: 0,\n\n// /* 4. Ensure the child is visually stacked above the parent's content */\n// z-index: 10,\n\n// /* Optional: Make the overlay visible (e.g., semi-transparent black) */\n// overlayOpacity: \"rgba(0, 0, 0, 0.5)\";\n// }\n\nexport const PasteTargetComponent = (\n  props: PiCardProps<PasteTargetProps, PasteTargetEvents>,\n): React.ReactNode => {\n  const {\n    title, //  = \"Paste content right here\",\n    description,\n    pasteFirstReminder = DEF_PASTE_FIRST_REMINDER,\n    withUpload,\n    fileTypes,\n\n    height = DEF_HEIGHT,\n\n    onPastedContent,\n\n    successColor = DEF_SUCCESS_COLOR,\n    errorColor = DEF_ERROR_COLOR,\n    eventDurationSeconds = DEF_EVENT_DURATION_SECONDS,\n    eventOpacity = DEF_OVERLAY_OPACITY,\n    cardName,\n    className,\n    _cls,\n  } = props;\n  const [overlayOpacity, setOverlayOpacity] = useState<number>(0);\n  const [overlayBackground, setOverlayBackground] = useState<string>(\"gray\");\n  const timerRef = React.useRef<number | null>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const overlayStyle: React.CSSProperties = {\n    backgroundColor: overlayBackground,\n    opacity: overlayOpacity,\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n\n    event.preventDefault();\n    const clipboardData =\n      event.clipboardData ||\n      (window as Window & {clipboardData?: DataTransfer}).clipboardData;\n\n    if (clipboardData) {\n      const pItems = clipboardData.items;\n      const items: PasteItem[] = [];\n      for (let i = 0; i < pItems.length; i++) {\n        const pi = pItems[i];\n        const mimeType = pi.type;\n        const content = clipboardData.getData(pi.type);\n        if (!(content == \"\" || content == \"\\n\")) {\n          items.push({mimeType, content});\n        }\n      }\n      onPastedContent({items});\n      setOverlayBackground(successColor);\n    } else {\n      setOverlayBackground(errorColor);\n    }\n    setOverlayOpacity(eventOpacity);\n    if (textareaRef.current) textareaRef.current.blur();\n\n    // Set a timeout to switch the color back after 'n' seconds\n    const newTimerId = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null; // Clear the ref after the timeout executes\n    }, eventDurationSeconds * 1000); // Convert seconds to milliseconds\n\n    // Save the new timer ID to the ref (unknown necessary type casting)\n    timerRef.current = newTimerId as unknown as number;\n  };\n\n  // Cleanup function to clear the timer when the component unmounts\n  React.useEffect(() => {\n    return () => {\n      const ref = timerRef.current;\n      if (ref) {\n        clearTimeout(ref);\n      }\n    };\n  }, []); // runs only on mount/unmount\n\n  function renderPasteHandler() {\n    return (\n      <textarea\n        onPaste={handlePaste}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => setIsFocused(false)}\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: 10,\n          resize: \"none\",\n          background: \"transparent\",\n          cursor: isFocused ? \"copy\" : \"pointer\",\n          ...overlayStyle,\n        }}\n        // 🔑 CRUCIAL: Focus the element before pasting so it receives the paste event.\n        // autoFocus\n        readOnly\n        ref={textareaRef}\n      />\n    );\n  }\n\n  /** Map friendly file-type labels to accept= strings for the hidden input. */\n  function buildAccept(): string | undefined {\n    if (!fileTypes?.length) return undefined;\n    return fileTypes\n      .map((t) => {\n        const ext = t.toLowerCase();\n        if (ext === \"jpg\" || ext === \"jpeg\") return \".jpg,.jpeg\";\n        return `.${ext}`;\n      })\n      .join(\",\");\n  }\n\n  function flashOverlay(color: string) {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setOverlayBackground(color);\n    setOverlayOpacity(eventOpacity);\n    const id = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null;\n    }, eventDurationSeconds * 1000);\n    timerRef.current = id as unknown as number;\n  }\n\n  function handleFileChange(ev: React.ChangeEvent<HTMLInputElement>) {\n    const file = ev.target.files?.[0];\n    // Reset input so the same file can be re-selected later.\n    ev.target.value = \"\";\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = (e) => {\n      const content = (e.target?.result as string) ?? \"\";\n      onPastedContent({items: [{mimeType: file.type, content}]});\n      flashOverlay(successColor);\n    };\n    reader.onerror = () => {\n      flashOverlay(errorColor);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function onUpload(ev: React.MouseEvent<HTMLButtonElement>) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    fileInputRef.current?.click();\n  }\n\n  function renderTitle() {\n    const uploadBtn = !isFocused && withUpload && (\n      <Button\n        onClick={onUpload}\n        style={{position: \"relative\", zIndex: 30, pointerEvents: \"auto\"}}\n      >\n        Upload\n      </Button>\n    );\n\n    if (title) {\n      return (\n        <div className=\"paste-target-msg-title\">\n          <h2>{title}</h2>\n          {uploadBtn}\n        </div>\n      );\n    } else {\n      return (\n        <div className=\"paste-target-msg-title\">\n          Paste\n          {uploadBtn && (\n            <>\n              &nbsp;or&nbsp;\n              {uploadBtn}\n            </>\n          )}\n          &nbsp;here\n        </div>\n      );\n    }\n  }\n\n  const cn = _cls(\"root\", className || \"pihanga-paste-target\");\n\n  return (\n    <div\n      className={clsx(cn, isFocused && \"pihanga-paste-target-focused\")}\n      data-pihanga={cardName}\n      style={{position: \"relative\", height, width: \"100%\"}}\n    >\n      <div\n        className=\"paste-target-label\"\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          textAlign: \"center\",\n          // zIndex must be above textarea (10) so the Upload button is clickable.\n          // pointer-events: none lets click/focus pass through to the textarea,\n          // EXCEPT on children that override with pointer-events: auto (the button).\n          pointerEvents: \"none\",\n          zIndex: 20,\n        }}\n      >\n        {renderTitle()}\n        {description && (\n          <span className=\"paste-target-msg-desc\">{description}</span>\n        )}\n        <div className=\"paste-target-focus-reminder\">{pasteFirstReminder}</div>\n      </div>\n      {renderPasteHandler()}\n      {/* Hidden file input — triggered programmatically by the Upload button */}\n      {withUpload && (\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          accept={buildAccept()}\n          onChange={handleFileChange}\n          style={{display: \"none\"}}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/cards/select/index.js

@@ -1,13 +1,13 @@
 import { SelectComponent as e } from "./select.component.js";
-import { PI_SELECT_ACTION as t, PI_SELECT_CARD as n, Select as r, onPiSelectChanged as i, onPiSelectClosed as a, onPiSelectOpened as o } from "./select.types.js";
-import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+import { PI_SELECT_ACTION as t, PI_SELECT_CARD as n, Select as r, onPiSelectChanged as i, onPiSelectClosed as a, onPiSelectOpened as o, onSelectChanged as s, onSelectClosed as c, onSelectOpened as l } from "./select.types.js";
+import { actionTypesToEvents as u, registerCardComponent as d } from "@pihanga2/core";
 //#region src/cards/select/index.ts
-c({
+d({
 	name: n,
 	component: e,
-	events: s(t)
+	events: u(t)
 });
 //#endregion
-export { t as PI_SELECT_ACTION, n as PI_SELECT_CARD, r as Select, i as onPiSelectChanged, a as onPiSelectClosed, o as onPiSelectOpened };
+export { t as PI_SELECT_ACTION, n as PI_SELECT_CARD, r as Select, i as onPiSelectChanged, a as onPiSelectClosed, o as onPiSelectOpened, s as onSelectChanged, c as onSelectClosed, l as onSelectOpened };
 
 //# sourceMappingURL=index.js.map

package/cards/select/select.component.js

@@ -1,6 +1,7 @@
 import { useFormContext as e } from "../form/form.context.js";
 import { Select as t, SelectContent as n, SelectGroup as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../components/ui/select.js";
 import { useState as s } from "react";
+import "@pihanga2/core";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/cards/select/select.component.tsx
 var u = (u) => {

package/cards/select/select.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.component.js","names":[],"sources":["../../../src/cards/select/select.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Select as RadixSelect,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiSelectEvents, PiSelectProps} from \"./select.types\";\n\nexport const SelectComponent = (\n  props: PiCardProps<PiSelectProps, PiSelectEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    defaultValue,\n    selfManaged = false,\n    options,\n    placeholder,\n    required,\n    disabled,\n    ariaLabel,\n    cardName,\n    onChanged,\n    onOpened,\n    onClosed,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<string>(\n    defaultValue ?? propValue,\n  );\n\n  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : selfManaged\n      ? managedValue\n      : propValue;\n\n  function handleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setManagedValue(newValue);\n      }\n      onChanged({name, value: newValue});\n    }\n  }\n\n  function handleOpenChange(open: boolean) {\n    if (open) {\n      onOpened({});\n    } else {\n      onClosed({});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"select\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <RadixSelect\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={handleChange}\n      onOpenChange={handleOpenChange}\n      disabled={disabled}\n      required={required}\n      aria-label={ariaLabel}\n    >\n      <SelectTrigger\n        id={fieldId}\n        aria-invalid={invalid || undefined}\n        data-pihanga={cardName}\n      >\n        <SelectValue placeholder={placeholder ?? \"Select…\"} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          {options.map((opt) => (\n            <SelectItem\n              key={opt.value}\n              value={opt.value}\n              disabled={opt.disabled}\n            >\n              {opt.label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </RadixSelect>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,iBACA,iBAAc,IACd,YACA,gBACA,aACA,aACA,cACA,aACA,cACA,aACA,gBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,KAAgB,CAClB,GAEM,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD,IACE,IACA;CAEN,SAAS,EAAa,GAAkB;EACtC,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAgB,CAAQ,GAE1B,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAEA,SAAS,EAAiB,GAAe;EACvC,AAAI,IACF,EAAS,CAAC,CAAC,IAEX,EAAS,CAAC,CAAC;CAEf;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACS;EACO;EACd,eAAe;EACf,cAAc;EACJ;EACA;EACV,cAAY;YAPd,CASE,kBAAC,GAAD;GACE,IAbU,KAAc;GAcxB,gBAAc,KAAW,KAAA;GACzB,gBAAc;aAEd,kBAAC,GAAD,EAAa,aAAa,KAAe,UAAY,CAAA;EACxC,CAAA,GACf,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,OAAO,EAAI;GACX,UAAU,EAAI;aAEb,EAAI;EACK,GALL,EAAI,KAKC,CACb,EACU,CAAA,EACA,CAAA,CACJ;;AAEjB"}
+{"version":3,"file":"select.component.js","names":[],"sources":["../../../src/cards/select/select.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Select as RadixSelect,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiSelectEvents, PiSelectProps} from \"./select.types\";\n\nexport const SelectComponent = (\n  props: PiCardProps<PiSelectProps, PiSelectEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    defaultValue,\n    selfManaged = false,\n    options,\n    placeholder,\n    required,\n    disabled,\n    ariaLabel,\n    cardName,\n    onChanged,\n    onOpened,\n    onClosed,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<string>(\n    defaultValue ?? propValue,\n  );\n\n  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : selfManaged\n      ? managedValue\n      : propValue;\n\n  function handleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setManagedValue(newValue);\n      }\n      onChanged({name, value: newValue});\n    }\n  }\n\n  function handleOpenChange(open: boolean) {\n    if (open) {\n      onOpened({});\n    } else {\n      onClosed({});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"select\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <RadixSelect\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={handleChange}\n      onOpenChange={handleOpenChange}\n      disabled={disabled}\n      required={required}\n      aria-label={ariaLabel}\n    >\n      <SelectTrigger\n        id={fieldId}\n        aria-invalid={invalid || undefined}\n        data-pihanga={cardName}\n      >\n        <SelectValue placeholder={placeholder ?? \"Select…\"} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          {options.map((opt) => (\n            <SelectItem\n              key={opt.value}\n              value={opt.value}\n              disabled={opt.disabled}\n            >\n              {opt.label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </RadixSelect>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,iBACA,iBAAc,IACd,YACA,gBACA,aACA,aACA,cACA,aACA,cACA,aACA,gBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,KAAgB,CAClB,GAEM,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD,IACE,IACA;CAEN,SAAS,EAAa,GAAkB;EACtC,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAgB,CAAQ,GAE1B,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAEA,SAAS,EAAiB,GAAe;EACvC,AAAI,IACF,EAAS,CAAC,CAAC,IAEX,EAAS,CAAC,CAAC;CAEf;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACS;EACO;EACd,eAAe;EACf,cAAc;EACJ;EACA;EACV,cAAY;YAPd,CASE,kBAAC,GAAD;GACE,IAbU,KAAc;GAcxB,gBAAc,KAAW,KAAA;GACzB,gBAAc;aAEd,kBAAC,GAAD,EAAa,aAAa,KAAe,UAAY,CAAA;EACxC,CAAA,GACf,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,OAAO,EAAI;GACX,UAAU,EAAI;aAEb,EAAI;EACK,GALL,EAAI,KAKC,CACb,EACU,CAAA,EACA,CAAA,CACJ;;AAEjB"}

package/cards/select/select.types.d.ts

@@ -5,12 +5,24 @@ export declare const PI_SELECT_ACTION: {
     CLOSED: string;
     OPENED: string;
 };
+export declare const onSelectChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectChangedEvent>) => void;
+/** @deprecated Use `onSelectChanged` instead. */
 export declare const onPiSelectChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSelectChangedEvent>) => void;
+export declare const onSelectOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectOpenedEvent>) => void;
+/** @deprecated Use `onSelectOpened` instead. */
 export declare const onPiSelectOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSelectOpenedEvent>) => void;
+export declare const onSelectClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectClosedEvent>) => void;
+/** @deprecated Use `onSelectClosed` instead. */
 export declare const onPiSelectClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSelectClosedEvent>) => void;

package/cards/select/select.types.js

@@ -4,8 +4,8 @@ var r = "pi/select", i = e(r), a = n(r, [
 	"changed",
 	"opened",
 	"closed"
-]), o = t(a.CHANGED), s = t(a.OPENED), c = t(a.CLOSED);
+]), o = t(a.CHANGED), s = o, c = t(a.OPENED), l = c, u = t(a.CLOSED), d = u;
 //#endregion
-export { a as PI_SELECT_ACTION, r as PI_SELECT_CARD, i as Select, o as onPiSelectChanged, c as onPiSelectClosed, s as onPiSelectOpened };
+export { a as PI_SELECT_ACTION, r as PI_SELECT_CARD, i as Select, s as onPiSelectChanged, d as onPiSelectClosed, l as onPiSelectOpened, o as onSelectChanged, u as onSelectClosed, c as onSelectOpened };
 
 //# sourceMappingURL=select.types.js.map

package/cards/select/select.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.js","names":[],"sources":["../../../src/cards/select/select.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SELECT_CARD = \"pi/select\";\n\nexport const Select = createCardDeclaration<PiSelectProps, PiSelectEvents>(\n  PI_SELECT_CARD,\n);\n\nexport const PI_SELECT_ACTION = registerActions(PI_SELECT_CARD, [\n  \"changed\",\n  \"opened\",\n  \"closed\",\n]);\n\nexport const onPiSelectChanged = createOnAction<PiSelectChangedEvent>(\n  PI_SELECT_ACTION.CHANGED,\n);\n\nexport const onPiSelectOpened = createOnAction<PiSelectOpenedEvent>(\n  PI_SELECT_ACTION.OPENED,\n);\n\nexport const onPiSelectClosed = createOnAction<PiSelectClosedEvent>(\n  PI_SELECT_ACTION.CLOSED,\n);\n\nexport type PiSelectOption = {\n  /** The value stored in form state / dispatched in events. */\n  value: string;\n  /** Human-readable label shown in the dropdown. */\n  label: string;\n  /** When true, the option is shown but cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type PiSelectProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * When true the component manages its own selected-value state internally.\n   * Selecting an item will still dispatch the normal `onChanged` action, but\n   * the UI will immediately reflect the new selection without waiting for the\n   * host application to update `value` via a reducer.\n   *\n   * Has no effect when the component is bound to a pi/form via `name`.\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Default (uncontrolled) value. Mirrors Radix `defaultValue`.\n   */\n  defaultValue?: string;\n\n  /** Available options to display in the dropdown. */\n  options: PiSelectOption[];\n\n  /** Placeholder text shown when no option is selected. */\n  placeholder?: string;\n\n  /** When true, the select is required (HTML form attribute). */\n  required?: boolean;\n\n  /** When true, the select is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Accessible label for screen readers. */\n  ariaLabel?: string;\n};\n\nexport type PiSelectChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** The value of the newly selected option. */\n  value: string;\n};\n\nexport type PiSelectOpenedEvent = Record<string, never>;\n\nexport type PiSelectClosedEvent = Record<string, never>;\n\nexport type PiSelectEvents = {\n  onChanged: PiSelectChangedEvent;\n  onOpened: PiSelectOpenedEvent;\n  onClosed: PiSelectClosedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB;CAC9D;CACA;CACA;AACF,CAAC,GAEY,IAAoB,EAC/B,EAAiB,OACnB,GAEa,IAAmB,EAC9B,EAAiB,MACnB,GAEa,IAAmB,EAC9B,EAAiB,MACnB"}
+{"version":3,"file":"select.types.js","names":[],"sources":["../../../src/cards/select/select.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SELECT_CARD = \"pi/select\";\n\nexport const Select = createCardDeclaration<PiSelectProps, PiSelectEvents>(\n  PI_SELECT_CARD,\n);\n\nexport const PI_SELECT_ACTION = registerActions(PI_SELECT_CARD, [\n  \"changed\",\n  \"opened\",\n  \"closed\",\n]);\n\nexport const onSelectChanged = createOnAction<PiSelectChangedEvent>(\n  PI_SELECT_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onSelectChanged` instead. */\nexport const onPiSelectChanged = onSelectChanged;\n\nexport const onSelectOpened = createOnAction<PiSelectOpenedEvent>(\n  PI_SELECT_ACTION.OPENED,\n);\n\n/** @deprecated Use `onSelectOpened` instead. */\nexport const onPiSelectOpened = onSelectOpened;\n\nexport const onSelectClosed = createOnAction<PiSelectClosedEvent>(\n  PI_SELECT_ACTION.CLOSED,\n);\n\n/** @deprecated Use `onSelectClosed` instead. */\nexport const onPiSelectClosed = onSelectClosed;\n\nexport type PiSelectOption = {\n  /** The value stored in form state / dispatched in events. */\n  value: string;\n  /** Human-readable label shown in the dropdown. */\n  label: string;\n  /** When true, the option is shown but cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type PiSelectProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * When true the component manages its own selected-value state internally.\n   * Selecting an item will still dispatch the normal `onChanged` action, but\n   * the UI will immediately reflect the new selection without waiting for the\n   * host application to update `value` via a reducer.\n   *\n   * Has no effect when the component is bound to a pi/form via `name`.\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Default (uncontrolled) value. Mirrors Radix `defaultValue`.\n   */\n  defaultValue?: string;\n\n  /** Available options to display in the dropdown. */\n  options: PiSelectOption[];\n\n  /** Placeholder text shown when no option is selected. */\n  placeholder?: string;\n\n  /** When true, the select is required (HTML form attribute). */\n  required?: boolean;\n\n  /** When true, the select is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Accessible label for screen readers. */\n  ariaLabel?: string;\n};\n\nexport type PiSelectChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** The value of the newly selected option. */\n  value: string;\n};\n\nexport type PiSelectOpenedEvent = Record<string, never>;\n\nexport type PiSelectClosedEvent = Record<string, never>;\n\nexport type PiSelectEvents = {\n  onChanged: PiSelectChangedEvent;\n  onOpened: PiSelectOpenedEvent;\n  onClosed: PiSelectClosedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB;CAC9D;CACA;CACA;AACF,CAAC,GAEY,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB,GAEpB,IAAiB,EAC5B,EAAiB,MACnB,GAGa,IAAmB,GAEnB,IAAiB,EAC5B,EAAiB,MACnB,GAGa,IAAmB"}

package/cards/slider/index.js

@@ -0,0 +1,13 @@
+import { SliderComponent as e } from "./slider.component.js";
+import { PI_SLIDER_ACTION as t, PI_SLIDER_CARD as n, Slider as r, onPiSliderChanged as i, onPiSliderCommitted as a, onSliderChanged as o, onSliderCommitted as s } from "./slider.types.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+//#region src/cards/slider/index.ts
+l({
+	name: n,
+	component: e,
+	events: c(t)
+});
+//#endregion
+export { t as PI_SLIDER_ACTION, n as PI_SLIDER_CARD, r as Slider, i as onPiSliderChanged, a as onPiSliderCommitted, o as onSliderChanged, s as onSliderCommitted };
+
+//# sourceMappingURL=index.js.map

package/cards/slider/index.js.map

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