@pihanga2/shadcn 0.2.2 → 0.2.4

package/README.md

@@ -52,17 +52,6 @@ module.exports = {
 
 ## Usage
 
-### Register all core cards at once
-
-```ts
-import "@pihanga2/shadcn";
-```
-
-This imports `core-index.js`, which calls `registerCardComponent()` for every
-core card in the Pihanga runtime.
-
-### Register individual cards (tree-shakeable)
-
 Import only the cards your app uses — unused cards are eliminated by your bundler:
 
 ```ts
@@ -73,7 +62,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (33)
+## Included cards (35)
 
 - `badge`
 - `box`
@@ -89,6 +78,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `form`
 - `framework`
 - `input`
+- `jsonViewer`
 - `list`
 - `loadingOverlay`
 - `loadingSkeleton`
@@ -97,6 +87,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `navbarSearch`
 - `pageWithNavbar`
 - `pasteTarget`
+- `resizable`
 - `select`
 - `slider`
 - `sliderValue`

package/cards/badge/badge.component.js

@@ -1,7 +1,7 @@
 import { Badge as e } from "../../components/ui/badge.js";
 import { cn as t } from "../../lib/utils.js";
-import "@pihanga2/core";
 import "react";
+import "@pihanga2/core";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/cards/badge/badge.component.tsx
 var r = (r) => {

package/cards/box/box.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, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/box/box.component.tsx
 var r = (r) => {

package/cards/button/button.component.js

@@ -1,16 +1,16 @@
-import { Button as e, LinkButton as t } from "../../components/ui/button.js";
-import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../../components/ui/tooltip.js";
-import { getIcon as a } from "../icons.js";
+import { getIcon as e } from "../icons.js";
+import { Button as t, LinkButton as n } from "../../components/ui/button.js";
+import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../../components/ui/tooltip.js";
 import { useDropdownOpen as o } from "../dropDownMenu/dropdown-context.js";
-import { Card as s } from "@pihanga2/core";
 import "react";
+import { Card as s } from "@pihanga2/core";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/cards/button/button.component.tsx
-function d(e) {
-	return e ? a(e) : null;
+function d(t) {
+	return t ? e(t) : null;
 }
-var f = (a) => {
-	let { opts: f, ariaLabel: p, label: m, iconLabel: h, contentCard: g, href: _, target: v, tooltip: y, tooltipCard: b, tooltipMode: x, tooltipPlacement: S, className: C, id: w, onClicked: T, cardName: E, _cls: D, active: O, focused: k, disabled: A, loading: j, isPending: M } = a, N = o(), P = d(f?.beforeIcon), F = d(f?.afterIcon), I = /* @__PURE__ */ u(c, { children: [
+var f = (e) => {
+	let { opts: f, ariaLabel: p, label: m, iconLabel: h, contentCard: g, href: _, target: v, tooltip: y, tooltipCard: b, tooltipMode: x, tooltipPlacement: S, className: C, id: w, onClicked: T, cardName: E, _cls: D, active: O, focused: k, disabled: A, loading: j, isPending: M } = e, N = o(), P = d(f?.beforeIcon), F = d(f?.afterIcon), I = /* @__PURE__ */ u(c, { children: [
 		P,
 		h ? d(h) : g ? /* @__PURE__ */ l(s, {
 			cardName: g,
@@ -31,7 +31,7 @@ var f = (a) => {
 		className: `${D("root")} ${C || ""}`.trim()
 	}, R = () => {
 		T({ id: w });
-	}, z = () => _ ? /* @__PURE__ */ l(t, {
+	}, z = () => _ ? /* @__PURE__ */ l(n, {
 		...L,
 		href: _,
 		target: v,
@@ -39,7 +39,7 @@ var f = (a) => {
 		label: p ?? m,
 		onClick: R,
 		children: I
-	}) : /* @__PURE__ */ l(e, {
+	}) : /* @__PURE__ */ l(t, {
 		...L,
 		"data-pihanga": E,
 		label: p ?? m,
@@ -54,12 +54,12 @@ var f = (a) => {
 		"data-pihanga": `${E}-tooltip`,
 		children: y
 	});
-	return /* @__PURE__ */ u(n, {
+	return /* @__PURE__ */ u(r, {
 		open: B,
-		children: [/* @__PURE__ */ l(i, {
+		children: [/* @__PURE__ */ l(a, {
 			asChild: !0,
 			children: z()
-		}), /* @__PURE__ */ l(r, {
+		}), /* @__PURE__ */ l(i, {
 			side: S,
 			children: V
 		})]

package/cards/chart/chart.types.d.ts

@@ -47,6 +47,55 @@ export type PiChartSeries = {
      */
     fillOpacity?: number;
 };
+/**
+ * A single recharts `<ReferenceArea>` to overlay on the chart.
+ * Highlights a rectangular region between two x or y coordinates.
+ *
+ * @example
+ * ```ts
+ * // Highlight a y-range (horizontal band)
+ * { y1: 100, y2: 200, fill: "var(--chart-3)", fillOpacity: 0.2, label: "Target zone" }
+ *
+ * // Highlight an x-range (vertical band)
+ * { x1: "Feb", x2: "Apr", fill: "var(--chart-2)", fillOpacity: 0.15 }
+ * ```
+ */
+export type PiChartReferenceArea = {
+    /** Start value on the **x-axis**.  Omit for a y-only band. */
+    x1?: string | number;
+    /** End value on the **x-axis**.  Omit for a y-only band. */
+    x2?: string | number;
+    /** Start value on the **y-axis**.  Omit for an x-only band. */
+    y1?: number;
+    /** End value on the **y-axis**.  Omit for an x-only band. */
+    y2?: number;
+    /**
+     * Label rendered inside the area.  Pass a plain string or a
+     * `{ value, position, fill, fontSize }` object for full control.
+     */
+    label?: string | {
+        value: string;
+        position?: string;
+        fill?: string;
+        fontSize?: number;
+    };
+    /** CSS fill colour.  Defaults to `"var(--chart-1)"`. */
+    fill?: string;
+    /** Fill opacity, 0–1.  Defaults to `0.2`. */
+    fillOpacity?: number;
+    /** CSS colour for the area border stroke. */
+    stroke?: string;
+    /** SVG `stroke-dasharray` for the area border. */
+    strokeDasharray?: string;
+    /** Area border width in pixels. */
+    strokeWidth?: number;
+    /**
+     * Behaviour when the area extends beyond the chart boundary.
+     * `"discard"` | `"hidden"` | `"visible"` | `"extendDomain"`.
+     * Defaults to `"discard"`.
+     */
+    ifOverflow?: "discard" | "hidden" | "visible" | "extendDomain";
+};
 /**
  * A single recharts `<ReferenceLine>` to overlay on the chart.
  * Specify either `x` (vertical line) or `y` (horizontal line).
@@ -218,6 +267,20 @@ export type PiChartGraphProps = {
      * ```
      */
     referenceLines?: PiChartReferenceLine[];
+    /**
+     * One or more reference areas to overlay on the chart.
+     * Each entry maps directly to a recharts `<ReferenceArea>` and highlights
+     * a rectangular region (x-band, y-band, or both).
+     *
+     * @example
+     * ```ts
+     * referenceAreas: [
+     *   { y1: 100, y2: 200, fill: "var(--chart-3)", fillOpacity: 0.15, label: "Target" },
+     *   { x1: "Feb", x2: "Apr", fill: "var(--chart-4)", fillOpacity: 0.1 },
+     * ]
+     * ```
+     */
+    referenceAreas?: PiChartReferenceArea[];
     /** Extra Tailwind / CSS classes forwarded to the outermost element. */
     className?: string;
 };

package/cards/checkbox/checkbox.component.js

@@ -1,6 +1,6 @@
 import { useFormContext as e } from "../form/form.context.js";
-import "@pihanga2/core";
 import "react";
+import "@pihanga2/core";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/checkbox/checkbox.component.tsx
 var r = (r) => {

package/cards/conditional/conditional.component.js

@@ -1,18 +1,18 @@
 import { useBreakpoint as e, useContainerBreakpoint as t } from "../../components/hooks/use-breakpoint.js";
-import { Card as n } from "@pihanga2/core";
-import * as r from "react";
+import * as n from "react";
+import { Card as r } from "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/conditional/conditional.component.tsx
 var a = (a) => {
-	let { cardName: o, show: s = !0, showOn: c, containerQuery: l = !1, content: u } = a, d = r.useRef(null), f = e(l ? void 0 : c), p = t(l ? c : void 0, d), m = s && (l ? p : f);
+	let { cardName: o, show: s = !0, showOn: c, containerQuery: l = !1, content: u } = a, d = n.useRef(null), f = e(l ? void 0 : c), p = t(l ? c : void 0, d), m = s && (l ? p : f);
 	return l ? /* @__PURE__ */ i("div", {
 		ref: d,
 		style: { width: "100%" },
-		children: m && /* @__PURE__ */ i(n, {
+		children: m && /* @__PURE__ */ i(r, {
 			cardName: u,
 			parentCard: o
 		})
-	}) : m ? /* @__PURE__ */ i(n, {
+	}) : m ? /* @__PURE__ */ i(r, {
 		cardName: u,
 		parentCard: o
 	}) : null;

package/cards/dataTable/dataTable.component.js

@@ -1,8 +1,8 @@
 import { Badge as e } from "../../components/ui/badge.js";
 import { cn as t } from "../../lib/utils.js";
 import { Table as n, TableBody as r, TableCaption as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../../components/ui/table.js";
-import { Card as l } from "@pihanga2/core";
-import u, { useMemo as d, useState as f } from "react";
+import l, { useMemo as u, useState as d } from "react";
+import { Card as f } from "@pihanga2/core";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Check as h, ChevronDown as g, ChevronRight as _, ChevronUp as v, ChevronsUpDown as y, X as b } from "lucide-react";
 //#region src/cards/dataTable/dataTable.component.tsx
@@ -32,7 +32,7 @@ function ee(t, n, r) {
 			className: "size-4 text-muted-foreground",
 			"aria-label": "false"
 		});
-		case "card": return /* @__PURE__ */ p(l, {
+		case "card": return /* @__PURE__ */ p(f, {
 			cardName: String(n),
 			parentCard: r
 		});
@@ -76,7 +76,7 @@ function C(e) {
 	return e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()).trim();
 }
 var w = (e) => {
-	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = f(/* @__PURE__ */ new Set()), [R, z] = f(b), [B, V] = f(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = f(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = d(() => H ? [...v].sort((e, t) => {
+	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => H ? [...v].sort((e, t) => {
 		let n = e.data[H], r = t.data[H];
 		if (n == null && r == null) return 0;
 		if (n == null) return 1;
@@ -87,7 +87,7 @@ var w = (e) => {
 		v,
 		H,
 		U
-	]), X = d(() => {
+	]), X = u(() => {
 		if (!T) return Y;
 		let e = K * T;
 		return Y.slice(e, e + T);
@@ -150,13 +150,13 @@ var w = (e) => {
 			/* @__PURE__ */ p(r, { children: X.length === 0 ? /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(a, {
 				colSpan: J,
 				className: "py-8 text-center text-muted-foreground",
-				children: O ? /* @__PURE__ */ p(l, {
+				children: O ? /* @__PURE__ */ p(f, {
 					cardName: O,
 					parentCard: A
 				}) : ie
 			}) }) : X.map((e, n) => {
 				let r = I.has(e.id), i = te && n % 2 == 1;
-				return /* @__PURE__ */ m(u.Fragment, { children: [/* @__PURE__ */ m(c, {
+				return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ m(c, {
 					className: t(i && "bg-muted/30", ne && "cursor-pointer"),
 					"data-expanded": r || void 0,
 					onClick: () => se(e),
@@ -185,7 +185,7 @@ var w = (e) => {
 						className: "border-b p-0",
 						children: /* @__PURE__ */ p("div", {
 							className: "bg-muted/20 px-4 py-3",
-							children: /* @__PURE__ */ p(l, {
+							children: /* @__PURE__ */ p(f, {
 								cardName: e.detailCard,
 								cardKey: `detail-${e.id}`,
 								row: e,

package/cards/dataTable/dataTableRowDetail.component.js

@@ -1,6 +1,6 @@
 import { cn as e } from "../../lib/utils.js";
-import "@pihanga2/core";
 import "react";
+import "@pihanga2/core";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/cards/dataTable/dataTableRowDetail.component.tsx
 var i = (i) => {

package/cards/dialog/dialog.component.js

@@ -1,12 +1,12 @@
 import { Button as e } from "../../components/ui/button.js";
 import { Dialog as t, DialogBody as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../../components/ui/dialog.js";
-import { Card as l } from "@pihanga2/core";
-import u from "react";
+import l from "react";
+import { Card as u } from "@pihanga2/core";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/cards/dialog/dialog.component.tsx
 var p = (p) => {
-	let { id: m, trigger: h, content: g, title: _, description: v, open: y, size: b, variant: x, desktopVariant: S, mobileVariant: C, dismissible: w, hideClose: T, className: E, footer: D, footerCloseButtonText: O, cardName: k, onOpened: A, onClosed: j, onOpenChanged: M } = p, N = O === void 0 ? "Close" : O, [P, F] = u.useState(!1), I = y ?? P, L = u.useRef(y);
-	u.useEffect(() => {
+	let { id: m, trigger: h, content: g, title: _, description: v, open: y, size: b, variant: x, desktopVariant: S, mobileVariant: C, dismissible: w, hideClose: T, className: E, footer: D, footerCloseButtonText: O, cardName: k, onOpened: A, onClosed: j, onOpenChanged: M } = p, N = O === void 0 ? "Close" : O, [P, F] = l.useState(!1), I = y ?? P, L = l.useRef(y);
+	l.useEffect(() => {
 		L.current === !0 && y === !1 && I === !1 && j({
 			id: m,
 			reason: "programmatic"
@@ -30,7 +30,7 @@ var p = (p) => {
 		return h ? /* @__PURE__ */ d("span", {
 			className: "inline-flex",
 			"data-pihanga-trigger-wrapper": !0,
-			children: /* @__PURE__ */ d(l, {
+			children: /* @__PURE__ */ d(u, {
 				cardName: h,
 				parentCard: k
 			})
@@ -42,7 +42,7 @@ var p = (p) => {
 	function V() {
 		return D ? /* @__PURE__ */ d(a, {
 			className: "bg-muted/50",
-			children: /* @__PURE__ */ d(l, {
+			children: /* @__PURE__ */ d(u, {
 				cardName: D,
 				parentCard: k
 			})
@@ -74,7 +74,7 @@ var p = (p) => {
 			className: E,
 			children: [
 				B(),
-				/* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(l, {
+				/* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(u, {
 					cardName: g,
 					parentCard: k
 				}) }),

package/cards/dropDownMenu/drop-down.component.js

@@ -1,11 +1,11 @@
 import { DropdownOpenContext as e } from "./dropdown-context.js";
 import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuLabel as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuShortcut as u, DropdownMenuSub as d, DropdownMenuSubContent as f, DropdownMenuSubTrigger as p, DropdownMenuTrigger as m } from "./dropdown-menu.ui.js";
-import { Card as h } from "@pihanga2/core";
-import g from "react";
+import h from "react";
+import { Card as g } from "@pihanga2/core";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/cards/dropDownMenu/drop-down.component.tsx
 var b = (b) => {
-	let { trigger: x, menuLabel: S, menuAlign: C, items: w, cardName: T, checkboxCloseDelayMs: E } = b, [D, O] = g.useState(!1), k = g.useRef(null), [A, j] = g.useState({}), M = g.useCallback((e, t) => [...e, t].join("::"), []), N = g.useCallback((e, t = []) => {
+	let { trigger: x, menuLabel: S, menuAlign: C, items: w, cardName: T, checkboxCloseDelayMs: E } = b, [D, O] = h.useState(!1), k = h.useRef(null), [A, j] = h.useState({}), M = h.useCallback((e, t) => [...e, t].join("::"), []), N = h.useCallback((e, t = []) => {
 		let n = {};
 		if (!e?.length) return n;
 		for (let r of e) if (!(!r || typeof r == "string")) {
@@ -36,9 +36,9 @@ var b = (b) => {
 			k.current = null, O(!1);
 		}, e);
 	}
-	g.useEffect(() => () => {
+	h.useEffect(() => () => {
 		P();
-	}, []), g.useEffect(() => {
+	}, []), h.useEffect(() => {
 		D && j(N(w));
 	}, [
 		D,
@@ -51,7 +51,7 @@ var b = (b) => {
 			"data-pihanga-trigger-wrapper": !0,
 			children: /* @__PURE__ */ v(e.Provider, {
 				value: D,
-				children: /* @__PURE__ */ v(h, {
+				children: /* @__PURE__ */ v(g, {
 					cardName: x,
 					parentCard: T
 				})
@@ -62,7 +62,7 @@ var b = (b) => {
 		return S ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(o, { children: S }), /* @__PURE__ */ v(l, {})] }) : null;
 	}
 	function z(e) {
-		return typeof e == "string" ? e : /* @__PURE__ */ v(h, {
+		return typeof e == "string" ? e : /* @__PURE__ */ v(g, {
 			cardName: e,
 			parentCard: T
 		});

package/cards/field/field.component.js

@@ -1,12 +1,12 @@
 import { cn as e } from "../../lib/utils.js";
 import { useFormContext as t } from "../form/form.context.js";
 import { Field as n, FieldDescription as r, FieldError as i, FieldLabel as a } from "../../components/ui/field.js";
-import { Card as o } from "@pihanga2/core";
-import s, { useMemo as c } from "react";
+import o, { useMemo as s } from "react";
+import { Card as c } from "@pihanga2/core";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/cards/field/field.component.tsx
 var d = (d) => {
-	let { label: f, fieldCard: p, name: m, description: h, error: g, className: _, cardName: v } = d, y = t(), b = y.isInForm && m ? y.errors[m] : g, x = s.useId(), S = !!b, C = c(() => ({
+	let { label: f, fieldCard: p, name: m, description: h, error: g, className: _, cardName: v } = d, y = t(), b = y.isInForm && m ? y.errors[m] : g, x = o.useId(), S = !!b, C = s(() => ({
 		cardName: p,
 		parentCard: v,
 		id: x,
@@ -26,7 +26,7 @@ var d = (d) => {
 				htmlFor: x,
 				children: f
 			}),
-			/* @__PURE__ */ l(o, { ...C }),
+			/* @__PURE__ */ l(c, { ...C }),
 			h && /* @__PURE__ */ l(r, { children: h }),
 			/* @__PURE__ */ l(i, { children: b })
 		]

package/cards/fileDrop/fileDrop.component.js

@@ -1,8 +1,8 @@
-import { k as e } from "../../node_modules/react-drag-drop-files/dist/index.es.js";
-import { DEF_FILE_DROP_FILE_TYPES as t } from "./fileDrop.types.js";
+import { DEF_FILE_DROP_FILE_TYPES as e } from "./fileDrop.types.js";
 /* empty css         */
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { FileUploader as r } from "react-drag-drop-files";
 //#region src/cards/fileDrop/fileDrop.component.tsx
 var i = Symbol.for("pihanga.card.FileDrop.LastDropped"), a = globalThis;
 function o(e) {
@@ -16,7 +16,7 @@ function c() {
 	a[i] = null;
 }
 var l = (i) => {
-	let { fileTypes: a = t, title: o = "Click or drop a file right here", description: l, showProgress: u = !1, progress: d = 0, progressStyle: f = {}, dropStyle: p = {}, onFileDropped: m, onError: h, cardName: g, className: _, _cls: v } = i;
+	let { fileTypes: a = e, title: o = "Click or drop a file right here", description: l, showProgress: u = !1, progress: d = 0, progressStyle: f = {}, dropStyle: p = {}, onFileDropped: m, onError: h, cardName: g, className: _, _cls: v } = i;
 	function y(e) {
 		let t = Array.isArray(e) ? e[0] : e;
 		if (!t) return;
@@ -34,42 +34,42 @@ var l = (i) => {
 		h({ error: String(e) });
 	}
 	function x() {
-		let e = `${d}%`, t = `${e} Complete`, i = {
+		let e = `${d}%`, r = `${e} Complete`, i = {
 			width: "50%",
 			...f
 		};
-		return /* @__PURE__ */ r("div", {
+		return /* @__PURE__ */ n("div", {
 			className: "pi-progress",
-			children: [/* @__PURE__ */ n("div", {
+			children: [/* @__PURE__ */ t("div", {
 				className: "pi-progress-label",
 				children: e
-			}), /* @__PURE__ */ n("div", {
+			}), /* @__PURE__ */ t("div", {
 				className: "pi-progress-container",
 				style: i,
-				children: /* @__PURE__ */ n("div", {
+				children: /* @__PURE__ */ t("div", {
 					className: "pi-progress-bar",
 					style: { width: e },
 					role: "progressbar",
-					"aria-label": t
+					"aria-label": r
 				})
 			})]
 		});
 	}
 	function S() {
-		return /* @__PURE__ */ r("div", {
+		return /* @__PURE__ */ n("div", {
 			className: "dropzone-msg",
 			style: p,
-			children: [o && /* @__PURE__ */ n("h3", {
+			children: [o && /* @__PURE__ */ t("h3", {
 				className: "dropzone-msg-title",
 				children: o
-			}), l && /* @__PURE__ */ n("span", {
+			}), l && /* @__PURE__ */ t("span", {
 				className: "dropzone-msg-desc",
 				children: l
 			})]
 		});
 	}
 	function C() {
-		return /* @__PURE__ */ n(e, {
+		return /* @__PURE__ */ t(r, {
 			handleChange: y,
 			onTypeError: b,
 			name: "file",
@@ -78,7 +78,7 @@ var l = (i) => {
 			children: S()
 		});
 	}
-	return /* @__PURE__ */ n("div", {
+	return /* @__PURE__ */ t("div", {
 		className: v("root", _),
 		"data-pihanga": g,
 		children: u ? x() : C()

package/cards/flexGrid/flexGrid.component.js

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

package/cards/form/form.component.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../../lib/utils.js";
 import { FormContext as t } from "./form.context.js";
-import { Card as n } from "@pihanga2/core";
-import { useCallback as r, useState as i } from "react";
+import { useCallback as n, useState as r } from "react";
+import { Card as i } from "@pihanga2/core";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/cards/form/form.component.tsx
 var s = (s) => {
-	let { id: c, content: l = [], initialValues: u = {}, submitLabel: d = "Submit", className: f, cardName: p, onSubmitted: m } = s, [h, g] = i(() => ({ ...u })), [_, v] = i({}), y = r((e, t) => {
+	let { id: c, content: l = [], initialValues: u = {}, submitLabel: d = "Submit", className: f, cardName: p, onSubmitted: m } = s, [h, g] = r(() => ({ ...u })), [_, v] = r({}), y = n((e, t) => {
 		g((n) => ({
 			...n,
 			[e]: t
@@ -14,7 +14,7 @@ var s = (s) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), b = r((e, t) => {
+	}, []), b = n((e, t) => {
 		v((n) => {
 			if (t === null) {
 				let t = { ...n };
@@ -25,7 +25,7 @@ var s = (s) => {
 				[e]: t
 			};
 		});
-	}, []), x = r((e) => {
+	}, []), x = n((e) => {
 		e.preventDefault(), m({
 			id: c,
 			formData: h
@@ -47,7 +47,7 @@ var s = (s) => {
 			onSubmit: x,
 			className: e("flex flex-col gap-4", f),
 			"data-pihanga": p,
-			children: [l.map((e, t) => /* @__PURE__ */ a(n, {
+			children: [l.map((e, t) => /* @__PURE__ */ a(i, {
 				cardName: e,
 				parentCard: p
 			}, t)), /* @__PURE__ */ a("button", {

package/cards/framework/framework.component.js

@@ -1,15 +1,15 @@
 import { TooltipProvider as e } from "../../components/ui/tooltip.js";
 import { ThemeProvider as t } from "../../components/theme-provider/theme-provider.component.js";
-import { Card as n } from "@pihanga2/core";
-import { StrictMode as r } from "react";
+import { StrictMode as n } from "react";
+import { Card as r } from "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/framework/framework.component.tsx
 var a = (a) => {
 	let { page: o, theme: s = "dark", cardName: c } = a;
-	return /* @__PURE__ */ i(r, { children: /* @__PURE__ */ i(t, {
+	return /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i(t, {
 		defaultTheme: s,
 		storageKey: "shadcn-ui-theme",
-		children: /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(n, {
+		children: /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, {
 			cardName: o,
 			parentCard: c
 		}) })