@pihanga2/shadcn 0.1.0

package/cards/field/field.component.js

@@ -0,0 +1,38 @@
+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 { 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(() => ({
+		cardName: p,
+		parentCard: v,
+		id: x,
+		invalid: S
+	}), [
+		v,
+		p,
+		x,
+		S
+	]);
+	return /* @__PURE__ */ u(n, {
+		"data-invalid": !!b || void 0,
+		className: e(_),
+		"data-pihanga": v,
+		children: [
+			/* @__PURE__ */ l(a, {
+				htmlFor: x,
+				children: f
+			}),
+			/* @__PURE__ */ l(o, { ...C }),
+			h && /* @__PURE__ */ l(r, { children: h }),
+			/* @__PURE__ */ l(i, { children: b })
+		]
+	});
+};
+//#endregion
+export { d as FieldCardComponent };
+
+//# sourceMappingURL=field.component.js.map

package/cards/field/field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.component.js","names":[],"sources":["../../../src/cards/field/field.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport {cn} from \"@/lib/utils\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiFieldProps} from \"./field.types\";\n\nexport const FieldCardComponent = (\n  props: PiCardProps<PiFieldProps>,\n): React.ReactNode => {\n  const {\n    label,\n    fieldCard,\n    name,\n    description,\n    error: propError,\n    className,\n    cardName,\n  } = props;\n\n  // When name is provided and we're inside a pi/form, use the form error.\n  const form = useFormContext();\n  const error = form.isInForm && name ? form.errors[name] : propError;\n\n  // Stable id that links <FieldLabel htmlFor> to the inner control's id.\n  const fieldId = React.useId();\n\n  // Memoize the extra props forwarded to the inner card so that Pihanga does\n  // not see a brand-new object on every render (which would cause it to treat\n  // the inner card as a new/changed card and unmount/remount it).\n  const isInvalid = Boolean(error);\n  /*\n      Pihanga's Card forwards every prop other than cardName / parentCard to\n      the bound component.  We inject `id` (so the control's element gets\n      the id that FieldLabel points at) and `invalid` (so the control can\n      set aria-invalid without needing its own error/label logic).\n    */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const fieldCardProps = useMemo<any>(\n    () => ({\n      cardName: fieldCard,\n      parentCard: cardName,\n      id: fieldId,\n      invalid: isInvalid,\n    }),\n    [cardName, fieldCard, fieldId, isInvalid],\n  );\n\n  return (\n    <Field\n      data-invalid={Boolean(error) || undefined}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      <FieldLabel htmlFor={fieldId}>{label}</FieldLabel>\n\n      <Card {...fieldCardProps} />\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,cACA,SACA,gBACA,OAAO,GACP,cACA,gBACE,GAGE,IAAO,EAAe,GACtB,IAAQ,EAAK,YAAY,IAAO,EAAK,OAAO,KAAQ,GAGpD,IAAU,EAAM,MAAM,GAKtB,IAAY,EAAQ,GAQpB,IAAiB,SACd;EACL,UAAU;EACV,YAAY;EACZ,IAAI;EACJ,SAAS;CACX,IACA;EAAC;EAAU;EAAW;EAAS;CAAS,CAC1C;CAEA,OACE,kBAAC,GAAD;EACE,gBAAc,EAAQ,KAAU,KAAA;EAChC,WAAW,EAAG,CAAS;EACvB,gBAAc;YAHhB;GAKE,kBAAC,GAAD;IAAY,SAAS;cAAU;GAAkB,CAAA;GAEjD,kBAAC,GAAD,EAAM,GAAI,EAAiB,CAAA;GAE1B,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA;GACjE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;EAC1B;;AAEX"}

package/cards/field/field.types.d.ts

@@ -0,0 +1,30 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_FIELD_CARD = "pi/field";
+export declare const Field: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiFieldProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type PiFieldProps = {
+    /** Visible label rendered above the control. */
+    label: string;
+    /**
+     * The Pihanga card reference for the plain control to render
+     * (e.g. pi/text-field, pi/select, pi/checkbox, …).
+     *
+     * The field card will forward an `id` prop and an `invalid` boolean to the
+     * inner card via Pihanga's standard prop-passing mechanism so the control
+     * can wire up accessibility attributes without needing its own label logic.
+     */
+    fieldCard: PiCardRef;
+    /**
+     * Field name — when provided the card reads the current error from
+     * FormContext (when inside a pi/form) to decide whether to show an error.
+     */
+    name?: string;
+    /** Secondary help text rendered below the control. */
+    description?: string;
+    /**
+     * Static error message.  Overridden by the form-context error when `name`
+     * is provided and the card is inside a pi/form.
+     */
+    error?: string;
+    /** Additional CSS classes applied to the outer Field wrapper. */
+    className?: string;
+};

package/cards/field/field.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/field/field.types.ts
+var t = "pi/field", n = e(t);
+//#endregion
+export { n as Field, t as PI_FIELD_CARD };
+
+//# sourceMappingURL=field.types.js.map

package/cards/field/field.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.types.js","names":[],"sources":["../../../src/cards/field/field.types.ts"],"sourcesContent":["import {createCardDeclaration, PiCardRef} from \"@pihanga2/core\";\n\nexport const PI_FIELD_CARD = \"pi/field\";\n\nexport const Field = createCardDeclaration<PiFieldProps>(PI_FIELD_CARD);\n\nexport type PiFieldProps = {\n  /** Visible label rendered above the control. */\n  label: string;\n\n  /**\n   * The Pihanga card reference for the plain control to render\n   * (e.g. pi/text-field, pi/select, pi/checkbox, …).\n   *\n   * The field card will forward an `id` prop and an `invalid` boolean to the\n   * inner card via Pihanga's standard prop-passing mechanism so the control\n   * can wire up accessibility attributes without needing its own label logic.\n   */\n  fieldCard: PiCardRef;\n\n  /**\n   * Field name — when provided the card reads the current error from\n   * FormContext (when inside a pi/form) to decide whether to show an error.\n   */\n  name?: string;\n\n  /** Secondary help text rendered below the control. */\n  description?: string;\n\n  /**\n   * Static error message.  Overridden by the form-context error when `name`\n   * is provided and the card is inside a pi/form.\n   */\n  error?: string;\n\n  /** Additional CSS classes applied to the outer Field wrapper. */\n  className?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAgB,YAEhB,IAAQ,EAAoC,CAAa"}

package/cards/field/index.d.ts

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

package/cards/field/index.js

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

package/cards/field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/field/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {FieldCardComponent} from \"./field.component\";\nimport {PI_FIELD_CARD} from \"./field.types\";\n\nexport * from \"./field.types\";\n\n// pi/field has no events of its own; events fire from the inner fieldCard.\nregisterCardComponent({\n  name: PI_FIELD_CARD,\n  component: FieldCardComponent,\n});\n"],"mappings":";;;;AAQA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/flexGrid/flexGrid.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { FlexGridProps } from './flexGrid.types';
+export declare const FlexGridComponent: (props: PiCardProps<FlexGridProps>) => React.ReactNode;

package/cards/flexGrid/flexGrid.component.js

@@ -0,0 +1,40 @@
+import { Card as e } from "@pihanga2/core";
+import "react";
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/flexGrid/flexGrid.component.tsx
+var r = (r) => {
+	let { cardName: i, cards: a = {}, template: o, height: s = "auto", margin: c = 0, overflow: l = "hidden", style: u, className: d, _cls: f } = r, p = {
+		display: "grid",
+		gridGap: o.gap || "10px",
+		height: s,
+		margin: c,
+		width: "100%",
+		...u?.root
+	};
+	o.area && (p.gridTemplateAreas = o.area.map((e) => `"${e.join(" ")}"`).join(" ")), o.rows && (p.gridTemplateRows = o.rows.join(" ")), o.columns && (p.gridTemplateColumns = o.columns.join(" "));
+	function m(t) {
+		let [r, a] = t, s = {
+			overflow: l,
+			...u?.item
+		};
+		return o.area && (s.gridArea = r), /* @__PURE__ */ n("div", {
+			style: s,
+			"data-pihanga-grid": r,
+			children: /* @__PURE__ */ n(e, {
+				cardName: a,
+				parentCard: i
+			})
+		}, r);
+	}
+	return /* @__PURE__ */ n("div", {
+		style: p,
+		className: t(f("root"), d),
+		"data-pihanga": i,
+		children: Object.entries(a).map(m)
+	});
+};
+//#endregion
+export { r as FlexGridComponent };
+
+//# sourceMappingURL=flexGrid.component.js.map

package/cards/flexGrid/flexGrid.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexGrid.component.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card} from \"@pihanga2/core\";\nimport type {PiCardProps, PiCardRef} from \"@pihanga2/core\";\nimport type {FlexGridProps} from \"./flexGrid.types\";\nimport clsx from \"clsx\";\n\nexport const FlexGridComponent = (\n  props: PiCardProps<FlexGridProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    cards = {},\n    template,\n    height = \"auto\", //'100vh',\n    margin = 0,\n    overflow = \"hidden\", // 'scroll',\n    style,\n    className,\n    _cls,\n  } = props;\n\n  // console.log(\"AREA\", area)\n  const _style: React.CSSProperties & Record<string, unknown> = {\n    display: \"grid\",\n    gridGap: template.gap || \"10px\",\n    height,\n    margin,\n    width: \"100%\",\n    ...style?.root,\n  };\n\n  if (template.area) {\n    const areaRows = template.area.map((row: string[]) => `\"${row.join(\" \")}\"`);\n    _style.gridTemplateAreas = areaRows.join(\" \");\n  }\n  if (template.rows) {\n    _style.gridTemplateRows = template.rows.join(\" \");\n  }\n  if (template.columns) {\n    _style.gridTemplateColumns = template.columns.join(\" \");\n  }\n\n  function renderGridCard(v: [string, PiCardRef]): React.ReactElement {\n    const [name, gridCard] = v;\n    const _style = {\n      overflow,\n      ...style?.item,\n    };\n    if (template.area) {\n      _style.gridArea = name;\n    }\n    return (\n      <div style={_style} data-pihanga-grid={name} key={name}>\n        <Card cardName={gridCard} parentCard={cardName} />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={_style}\n      className={clsx(_cls(\"root\"), className)}\n      data-pihanga={cardName}\n    >\n      {(Object.entries(cards) as [string, PiCardRef][]).map(renderGridCard)}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,WAAQ,CAAC,GACT,aACA,YAAS,QACT,YAAS,GACT,cAAW,UACX,UACA,cACA,YACE,GAGE,IAAwD;EAC5D,SAAS;EACT,SAAS,EAAS,OAAO;EACzB;EACA;EACA,OAAO;EACP,GAAG,GAAO;CACZ;CASA,AAPI,EAAS,SAEX,EAAO,oBADU,EAAS,KAAK,KAAK,MAAkB,IAAI,EAAI,KAAK,GAAG,EAAE,EAC7C,EAAS,KAAK,GAAG,IAE1C,EAAS,SACX,EAAO,mBAAmB,EAAS,KAAK,KAAK,GAAG,IAE9C,EAAS,YACX,EAAO,sBAAsB,EAAS,QAAQ,KAAK,GAAG;CAGxD,SAAS,EAAe,GAA4C;EAClE,IAAM,CAAC,GAAM,KAAY,GACnB,IAAS;GACb;GACA,GAAG,GAAO;EACZ;EAIA,OAHI,EAAS,SACX,EAAO,WAAW,IAGlB,kBAAC,OAAD;GAAK,OAAO;GAAQ,qBAAmB;aACrC,kBAAC,GAAD;IAAM,UAAU;IAAU,YAAY;GAAW,CAAA;EAC9C,GAF6C,CAE7C;CAET;CAEA,OACE,kBAAC,OAAD;EACE,OAAO;EACP,WAAW,EAAK,EAAK,MAAM,GAAG,CAAS;EACvC,gBAAc;YAEZ,OAAO,QAAQ,CAAK,EAA4B,IAAI,CAAc;CACjE,CAAA;AAET"}

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

@@ -0,0 +1,23 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const FLEX_GRID_CARD = "flex_grid";
+export declare const FlexGrid: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<FlexGridProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type FlexGridProps = {
+    cards: {
+        [name: string]: PiCardRef;
+    };
+    template: TemplateT;
+    height?: string;
+    margin?: string;
+    overflow?: string;
+    style?: {
+        root?: React.CSSProperties;
+        item?: React.CSSProperties;
+    };
+    className?: string;
+};
+export type TemplateT = {
+    area?: string[][];
+    rows?: string[];
+    columns?: string[];
+    gap?: string;
+};

package/cards/flexGrid/flexGrid.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/flexGrid/flexGrid.types.ts
+var t = "flex_grid", n = e(t);
+//#endregion
+export { t as FLEX_GRID_CARD, n as FlexGrid };
+
+//# sourceMappingURL=flexGrid.types.js.map

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

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

package/cards/flexGrid/index.d.ts

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

package/cards/flexGrid/index.js

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

package/cards/flexGrid/index.js.map

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

package/cards/form/form.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { PiFormEvents, PiFormProps } from './form.types';
+export declare const FormComponent: (props: PiCardProps<PiFormProps, PiFormEvents>) => React.ReactNode;

package/cards/form/form.component.js

@@ -0,0 +1,64 @@
+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 { 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) => {
+		g((n) => ({
+			...n,
+			[e]: t
+		})), v((t) => {
+			if (!t[e]) return t;
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, []), b = r((e, t) => {
+		v((n) => {
+			if (t === null) {
+				let t = { ...n };
+				return delete t[e], t;
+			}
+			return {
+				...n,
+				[e]: t
+			};
+		});
+	}, []), x = r((e) => {
+		e.preventDefault(), m({
+			id: c,
+			formData: h
+		});
+	}, [
+		c,
+		h,
+		m
+	]), S = {
+		formData: h,
+		errors: _,
+		handleChange: y,
+		setError: b,
+		isInForm: !0
+	};
+	return /* @__PURE__ */ a(t.Provider, {
+		value: S,
+		children: /* @__PURE__ */ o("form", {
+			onSubmit: x,
+			className: e("flex flex-col gap-4", f),
+			"data-pihanga": p,
+			children: [l.map((e, t) => /* @__PURE__ */ a(n, {
+				cardName: e,
+				parentCard: p
+			}, t)), /* @__PURE__ */ a("button", {
+				type: "submit",
+				className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+				children: d
+			})]
+		})
+	});
+};
+//#endregion
+export { s as FormComponent };
+
+//# sourceMappingURL=form.component.js.map

package/cards/form/form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.component.js","names":[],"sources":["../../../src/cards/form/form.component.tsx"],"sourcesContent":["import React, {useState, useCallback} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {FormContext, type FormContextValue} from \"./form.context\";\nimport type {PiFormEvents, PiFormProps} from \"./form.types\";\n\nexport const FormComponent = (\n  props: PiCardProps<PiFormProps, PiFormEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content = [],\n    initialValues = {},\n    submitLabel = \"Submit\",\n    className,\n    cardName,\n    onSubmitted,\n  } = props;\n\n  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({\n    ...initialValues,\n  }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const handleChange = useCallback((fieldName: string, value: unknown) => {\n    setFormData((prev) => ({...prev, [fieldName]: value}));\n    // Clear validation error when the user modifies the field\n    setErrors((prev) => {\n      if (!prev[fieldName]) return prev;\n      const next = {...prev};\n      delete next[fieldName];\n      return next;\n    });\n  }, []);\n\n  const setError = useCallback((fieldName: string, error: string | null) => {\n    setErrors((prev) => {\n      if (error === null) {\n        const next = {...prev};\n        delete next[fieldName];\n        return next;\n      }\n      return {...prev, [fieldName]: error};\n    });\n  }, []);\n\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      onSubmitted({id, formData});\n    },\n    [id, formData, onSubmitted],\n  );\n\n  const contextValue: FormContextValue = {\n    formData,\n    errors,\n    handleChange,\n    setError,\n    isInForm: true,\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\"flex flex-col gap-4\", className)}\n        data-pihanga={cardName}\n      >\n        {content.map((cref, idx) => (\n          <Card key={idx} cardName={cref} parentCard={cardName} />\n        ))}\n        <button\n          type=\"submit\"\n          className=\"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n        >\n          {submitLabel}\n        </button>\n      </form>\n    </FormContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,aAAU,CAAC,GACX,mBAAgB,CAAC,GACjB,iBAAc,UACd,cACA,aACA,mBACE,GAEE,CAAC,GAAU,KAAe,SAAyC,EACvE,GAAG,EACL,EAAE,GACI,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GAEzD,IAAe,GAAa,GAAmB,MAAmB;EAGtE,AAFA,GAAa,OAAU;GAAC,GAAG;IAAO,IAAY;EAAK,EAAE,GAErD,GAAW,MAAS;GAClB,IAAI,CAAC,EAAK,IAAY,OAAO;GAC7B,IAAM,IAAO,EAAC,GAAG,EAAI;GAErB,OADA,OAAO,EAAK,IACL;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,GAAa,GAAmB,MAAyB;EACxE,GAAW,MAAS;GAClB,IAAI,MAAU,MAAM;IAClB,IAAM,IAAO,EAAC,GAAG,EAAI;IAErB,OADA,OAAO,EAAK,IACL;GACT;GACA,OAAO;IAAC,GAAG;KAAO,IAAY;GAAK;EACrC,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAe,GAClB,MAAuB;EAEtB,AADA,EAAE,eAAe,GACjB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GACA;EAAC;EAAI;EAAU;CAAW,CAC5B,GAEM,IAAiC;EACrC;EACA;EACA;EACA;EACA,UAAU;CACZ;CAEA,OACE,kBAAC,EAAY,UAAb;EAAsB,OAAO;YAC3B,kBAAC,QAAD;GACE,UAAU;GACV,WAAW,EAAG,uBAAuB,CAAS;GAC9C,gBAAc;aAHhB,CAKG,EAAQ,KAAK,GAAM,MAClB,kBAAC,GAAD;IAAgB,UAAU;IAAM,YAAY;GAAW,GAA5C,CAA4C,CACxD,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;cAET;GACK,CAAA,CACJ;;CACc,CAAA;AAE1B"}

package/cards/form/form.context.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+/**
+ * Shape of the data provided by FormContext.
+ * When inside a <Form> card, isInForm is true and all fields are populated.
+ * When outside (fallback), isInForm is false.
+ */
+export interface FormContextValue {
+    formData: Record<string, unknown>;
+    errors: Record<string, string>;
+    handleChange: (fieldName: string, value: unknown) => void;
+    setError: (fieldName: string, error: string | null) => void;
+    isInForm: boolean;
+}
+export declare const FormContext: React.Context<FormContextValue | null>;
+/**
+ * Hook that reads the nearest FormContext.
+ * Returns a fallback (isInForm=false) when called outside a <Form> card.
+ *
+ * Usage in field components:
+ *   const form = useFormContext();
+ *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;
+ */
+export declare const useFormContext: () => FormContextValue;

package/cards/form/form.context.js

@@ -0,0 +1,13 @@
+import e, { useContext as t } from "react";
+//#region src/cards/form/form.context.tsx
+var n = {
+	formData: {},
+	errors: {},
+	handleChange: () => {},
+	setError: () => {},
+	isInForm: !1
+}, r = e.createContext(null), i = () => t(r) ?? n;
+//#endregion
+export { r as FormContext, i as useFormContext };
+
+//# sourceMappingURL=form.context.js.map

package/cards/form/form.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/cards/form/form.context.tsx"],"sourcesContent":["import React, {useContext} from \"react\";\n\n/**\n * Shape of the data provided by FormContext.\n * When inside a <Form> card, isInForm is true and all fields are populated.\n * When outside (fallback), isInForm is false.\n */\nexport interface FormContextValue {\n  formData: Record<string, unknown>;\n  errors: Record<string, string>;\n  handleChange: (fieldName: string, value: unknown) => void;\n  setError: (fieldName: string, error: string | null) => void;\n  isInForm: boolean;\n}\n\nconst FALLBACK_CONTEXT: FormContextValue = {\n  formData: {},\n  errors: {},\n  handleChange: () => {},\n  setError: () => {},\n  isInForm: false,\n};\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/**\n * Hook that reads the nearest FormContext.\n * Returns a fallback (isInForm=false) when called outside a <Form> card.\n *\n * Usage in field components:\n *   const form = useFormContext();\n *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;\n */\nexport const useFormContext = (): FormContextValue => {\n  const ctx = useContext(FormContext);\n  return ctx ?? FALLBACK_CONTEXT;\n};\n"],"mappings":";;AAeA,IAAM,IAAqC;CACzC,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,oBAAoB,CAAC;CACrB,gBAAgB,CAAC;CACjB,UAAU;AACZ,GAEa,IAAc,EAAM,cAAuC,IAAI,GAU/D,UACC,EAAW,CAChB,KAAO"}

package/cards/form/form.types.d.ts

@@ -0,0 +1,43 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_FORM_CARD = "pi/form";
+export declare const Form: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiFormProps, S, PiFormEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_FORM_ACTION: {
+    SUBMITTED: string;
+};
+export declare const onPiFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormSubmittedEvent>) => void;
+export type PiFormProps = {
+    /**
+     * Optional id passed through to events for identification.
+     */
+    id?: string;
+    /**
+     * Ordered list of field card refs to render inside the form.
+     * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered
+     * in order and wrapped by a FormContext.Provider so they can read
+     * and write shared form state.
+     */
+    content?: PiCardRef[];
+    /**
+     * Initial values for the form fields, keyed by field name.
+     */
+    initialValues?: Record<string, unknown>;
+    /**
+     * Label for the submit button.
+     * @default "Submit"
+     */
+    submitLabel?: string;
+    /**
+     * Additional CSS classes for the <form> element.
+     */
+    className?: string;
+};
+export type PiFormSubmittedEvent = {
+    id?: string;
+    /** Snapshot of form state at the time of submission. */
+    formData: Record<string, unknown>;
+};
+export type PiFormEvents = {
+    onSubmitted: PiFormSubmittedEvent;
+};

package/cards/form/form.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/form/form.types.ts
+var r = "pi/form", i = e(r), a = n(r, ["submitted"]), o = t(a.SUBMITTED);
+//#endregion
+export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onPiFormSubmitted };
+
+//# sourceMappingURL=form.types.js.map

package/cards/form/form.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.types.js","names":[],"sources":["../../../src/cards/form/form.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_FORM_CARD = \"pi/form\";\n\nexport const Form = createCardDeclaration<PiFormProps, PiFormEvents>(\n  PI_FORM_CARD,\n);\n\nexport const PI_FORM_ACTION = registerActions(PI_FORM_CARD, [\"submitted\"]);\n\nexport const onPiFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\n\nexport type PiFormProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Ordered list of field card refs to render inside the form.\n   * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered\n   * in order and wrapped by a FormContext.Provider so they can read\n   * and write shared form state.\n   */\n  content?: PiCardRef[];\n\n  /**\n   * Initial values for the form fields, keyed by field name.\n   */\n  initialValues?: Record<string, unknown>;\n\n  /**\n   * Label for the submit button.\n   * @default \"Submit\"\n   */\n  submitLabel?: string;\n\n  /**\n   * Additional CSS classes for the <form> element.\n   */\n  className?: string;\n};\n\nexport type PiFormSubmittedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of submission. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormEvents = {\n  onSubmitted: PiFormSubmittedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,WAEf,IAAO,EAClB,CACF,GAEa,IAAiB,EAAgB,GAAc,CAAC,WAAW,CAAC,GAE5D,IAAoB,EAC/B,EAAe,SACjB"}

package/cards/form/index.d.ts

@@ -0,0 +1,2 @@
+export * from './form.types';
+export * from './form.context';

package/cards/form/index.js

@@ -0,0 +1,14 @@
+import { FormContext as e, useFormContext as t } from "./form.context.js";
+import { FormComponent as n } from "./form.component.js";
+import { Form as r, PI_FORM_ACTION as i, PI_FORM_CARD as a, onPiFormSubmitted as o } from "./form.types.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/form/index.ts
+c({
+	name: a,
+	component: n,
+	events: s(i)
+});
+//#endregion
+export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onPiFormSubmitted, t as useFormContext };
+
+//# sourceMappingURL=index.js.map

package/cards/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/form/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {FormComponent} from \"./form.component\";\nimport {PI_FORM_ACTION, PI_FORM_CARD} from \"./form.types\";\n\nexport * from \"./form.types\";\nexport * from \"./form.context\";\n\nregisterCardComponent({\n  name: PI_FORM_CARD,\n  component: FormComponent,\n  events: actionTypesToEvents(PI_FORM_ACTION),\n});\n"],"mappings":";;;;;AAQA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAc;AAC5C,CAAC"}

package/cards/framework/framework.component.d.ts

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

package/cards/framework/framework.component.js

@@ -0,0 +1,21 @@
+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 { 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, {
+		defaultTheme: s,
+		storageKey: "shadcn-ui-theme",
+		children: /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(n, {
+			cardName: o,
+			parentCard: c
+		}) })
+	}) });
+};
+//#endregion
+export { a as Component };
+
+//# sourceMappingURL=framework.component.js.map

package/cards/framework/framework.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework.component.js","names":[],"sources":["../../../src/cards/framework/framework.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {StrictMode} from \"react\";\nimport {ThemeProvider} from \"@/components/theme-provider/theme-provider.component\";\n\nimport {Card, type PiCardProps, type WindowProps} from \"@pihanga2/core\";\nimport {TooltipProvider} from \"@/components/ui/tooltip\";\n\nexport const Component = (props: PiCardProps<WindowProps>): React.ReactNode => {\n  const {page, theme = \"dark\", cardName} = props;\n\n  return (\n    <StrictMode>\n      <ThemeProvider defaultTheme={theme} storageKey=\"shadcn-ui-theme\">\n        <TooltipProvider>\n          <Card cardName={page} parentCard={cardName} />\n        </TooltipProvider>\n      </ThemeProvider>\n    </StrictMode>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,KAAa,MAAqD;CAC7E,IAAM,EAAC,SAAM,WAAQ,QAAQ,gBAAY;CAEzC,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAe,cAAc;EAAO,YAAW;YAC7C,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAM,UAAU;GAAM,YAAY;EAAW,CAAA,EAC9B,CAAA;CACJ,CAAA,EACL,CAAA;AAEhB"}

package/cards/framework/index.d.ts

@@ -0,0 +1,2 @@
+import { WindowProps } from '@pihanga2/core';
+export declare const SdFramework: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<WindowProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/framework/index.js

@@ -0,0 +1,12 @@
+import { Component as e } from "./framework.component.js";
+import { createCardDeclaration as t, registerCardComponent as n } from "@pihanga2/core";
+//#region src/cards/framework/index.ts
+var r = "shad/framework", i = t(r);
+n({
+	name: r,
+	component: e
+});
+//#endregion
+export { i as SdFramework };
+
+//# sourceMappingURL=index.js.map

package/cards/framework/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/framework/index.ts"],"sourcesContent":["import {\n  type WindowProps,\n  createCardDeclaration,\n  registerCardComponent,\n} from \"@pihanga2/core\";\n\nimport {Component} from \"./framework.component\";\n\nconst CARD_TYPE = \"shad/framework\";\nexport const SdFramework = createCardDeclaration<WindowProps>(CARD_TYPE);\n\nregisterCardComponent({\n  name: CARD_TYPE,\n  component: Component,\n});\n"],"mappings":";;;AAQA,IAAM,IAAY,kBACL,IAAc,EAAmC,CAAS;AAEvE,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

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

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { GraphinProps } from './graphin.types';
+export declare const GraphinComponent: (props: PiCardProps<GraphinProps>) => React.ReactNode;

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

@@ -0,0 +1,18 @@
+import { PiCardDef } from '@pihanga2/core';
+import { GraphData, GraphOptions } from '@antv/g6';
+export declare const GRAPHIN_CARD = "graphin";
+export declare const Graphin: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<GraphinProps, S, {}>) => PiCardDef;
+export type GraphinProps = {
+    data: GraphData;
+    options?: Partial<Omit<GraphOptions, "data">>;
+    tooltip?: GraphinTooltip;
+    style?: {
+        root?: React.CSSProperties;
+        item?: React.CSSProperties;
+    };
+    className?: string;
+};
+export type GraphinTooltip = {
+    node?: PiCardDef;
+    edge?: PiCardDef;
+};

package/cards/graphin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './graphin.types';
+export type { TooltipContext } from './tooltip.component';

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

@@ -0,0 +1,10 @@
+import { GraphinTooltip } from './graphin.types';
+export type TooltipContext<T = Record<string, unknown>> = {
+    isEdge?: boolean;
+    elementID?: string;
+    elementData?: T;
+};
+export declare function TooltipComponent(props: {
+    contentCards: GraphinTooltip;
+    parentCard: string;
+}): React.ReactNode;

package/cards/icons.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+type G = {
+    name2icon: {
+        [name: string]: React.ElementType;
+    };
+};
+declare global {
+    interface Window {
+        _PihangaIcons: G;
+    }
+}
+export declare function registerIcon(name: string, el: React.ElementType): string;
+export declare function getIconElement(name: string): React.ElementType | undefined;
+export declare function getIcon(name: string, props?: any): React.ReactNode;
+export {};

package/cards/icons.js

@@ -0,0 +1,15 @@
+import e from "react";
+//#region src/cards/icons.ts
+window._PihangaIcons = window._PihangaIcons || { name2icon: {} };
+var t = window._PihangaIcons.name2icon;
+function n(e) {
+	return t[e];
+}
+function r(n, r) {
+	let i = t[n];
+	return i ? e.createElement(i, r) : null;
+}
+//#endregion
+export { r as getIcon, n as getIconElement };
+
+//# sourceMappingURL=icons.js.map

package/cards/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/cards/icons.ts"],"sourcesContent":["import React from \"react\";\n\ntype G = {\n  name2icon: {[name: string]: React.ElementType};\n};\n\ndeclare global {\n  interface Window {\n    _PihangaIcons: G;\n  }\n}\n\nwindow._PihangaIcons = window._PihangaIcons || {\n  name2icon: {},\n};\n\nconst name2icon = window._PihangaIcons.name2icon;\n\n\n\nexport function registerIcon(name: string, el: React.ElementType): string {\n  if (name2icon[name] !== undefined) {\n    throw new Error(`icon '${name}' already registered`);\n  }\n  name2icon[name] = el;\n  return name;\n}\n\nexport function getIconElement(name: string): React.ElementType | undefined {\n  return name2icon[name];\n}\n\n// can't figure out what the proper return type is, SVvgIconT does\n// NOT work with <IconButton>\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getIcon(name: string, props?: any): React.ReactNode {\n  const icon = name2icon[name];\n  if (!icon) return null;\n  const el = React.createElement(icon, props);\n  return el;\n}\n"],"mappings":";;AAYA,OAAO,gBAAgB,OAAO,iBAAiB,EAC7C,WAAW,CAAC,EACd;AAEA,IAAM,IAAY,OAAO,cAAc;AAYvC,SAAgB,EAAe,GAA6C;CAC1E,OAAO,EAAU;AACnB;AAKA,SAAgB,EAAQ,GAAc,GAA8B;CAClE,IAAM,IAAO,EAAU;CAGvB,OAFK,IACM,EAAM,cAAc,GAAM,CAC9B,IAFW;AAGpB"}

package/cards/input/index.d.ts

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

package/cards/input/index.js

@@ -0,0 +1,13 @@
+import { InputComponent as e } from "./input.component.js";
+import { PI_INPUT_ACTION as t, PI_INPUT_CARD as n, PiInput as r, onPiInputChanged as i, onPiInputCommitted as a } from "./input.types.js";
+import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
+//#region src/cards/input/index.ts
+s({
+	name: n,
+	component: e,
+	events: o(t)
+});
+//#endregion
+export { t as PI_INPUT_ACTION, n as PI_INPUT_CARD, r as PiInput, i as onPiInputChanged, a as onPiInputCommitted };
+
+//# sourceMappingURL=index.js.map

package/cards/input/index.js.map

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

package/cards/input/input.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { PiInputEvents, PiInputProps } from './input.types';
+export declare const InputComponent: (props: PiCardProps<PiInputProps, PiInputEvents>) => React.ReactNode;