@pihanga2/shadcn 0.1.0

package/cards/switch/index.js

@@ -0,0 +1,13 @@
+import { SwitchComponent as e } from "./switch.component.js";
+import { PI_SWITCH_ACTION as t, PI_SWITCH_CARD as n, Switch as r, onPiSwitchChanged as i } from "./switch.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/switch/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as PI_SWITCH_ACTION, n as PI_SWITCH_CARD, r as Switch, i as onPiSwitchChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/switch/index.js.map

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

package/cards/switch/switch.component.d.ts

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

package/cards/switch/switch.component.js

@@ -0,0 +1,34 @@
+import { useFormContext as e } from "../form/form.context.js";
+import { Label as t } from "../../components/ui/label.js";
+import { Switch as n } from "../../components/ui/switch.js";
+import "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/cards/switch/switch.component.tsx
+var a = (a) => {
+	let { name: o, checked: s = !1, disabled: c, label: l, className: u, cardName: d, onChanged: f } = a, p = a.id, m = e(), h = m.isInForm && !!o, g = h ? !!(m.formData[o] ?? !1) : s;
+	function _(e) {
+		h ? m.handleChange(o, e) : f({
+			name: o,
+			checked: e
+		});
+	}
+	let v = `${d}-${o ?? "switch"}`, y = p ?? v;
+	return /* @__PURE__ */ i("div", {
+		"data-pihanga": d,
+		className: `flex items-center gap-2 ${u ?? ""}`,
+		children: [/* @__PURE__ */ r(n, {
+			id: y,
+			checked: g,
+			onCheckedChange: _,
+			disabled: c
+		}), l && /* @__PURE__ */ r(t, {
+			htmlFor: y,
+			className: "cursor-pointer select-none",
+			children: l
+		})]
+	});
+};
+//#endregion
+export { a as SwitchComponent };
+
+//# sourceMappingURL=switch.component.js.map

package/cards/switch/switch.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.component.js","names":[],"sources":["../../../src/cards/switch/switch.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Switch as SwitchUI} from \"@/components/ui/switch\";\nimport {Label} from \"@/components/ui/label\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiSwitchEvents, PiSwitchProps} from \"./switch.types\";\n\nexport const SwitchComponent = (\n  props: PiCardProps<PiSwitchProps, PiSwitchEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    checked: propChecked = false,\n    disabled,\n    label,\n    className,\n    cardName,\n    onChanged,\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\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  const checked = useFormData\n    ? Boolean(form.formData[name!] ?? false)\n    : propChecked;\n\n  function handleCheckedChange(newChecked: boolean) {\n    if (useFormData) {\n      form.handleChange(name!, newChecked);\n    } else {\n      onChanged({name, checked: newChecked});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"switch\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={`flex items-center gap-2 ${className ?? \"\"}`}\n    >\n      <SwitchUI\n        id={fieldId}\n        checked={checked}\n        onCheckedChange={handleCheckedChange}\n        disabled={disabled}\n      />\n      {label && (\n        <Label htmlFor={fieldId} className=\"cursor-pointer select-none\">\n          {label}\n        </Label>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,SAAS,IAAc,IACvB,aACA,UACA,cACA,aACA,iBACE,GAKE,IAAc,EAAwB,IAGtC,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAU,IACZ,GAAQ,EAAK,SAAS,MAAU,MAChC;CAEJ,SAAS,EAAoB,GAAqB;EAChD,AAAI,IACF,EAAK,aAAa,GAAO,CAAU,IAEnC,EAAU;GAAC;GAAM,SAAS;EAAU,CAAC;CAEzC;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,YAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EACE,gBAAc;EACd,WAAW,2BAA2B,KAAa;YAFrD,CAIE,kBAAC,GAAD;GACE,IAAI;GACK;GACT,iBAAiB;GACP;EACX,CAAA,GACA,KACC,kBAAC,GAAD;GAAO,SAAS;GAAS,WAAU;aAChC;EACI,CAAA,CAEN;;AAET"}

package/cards/switch/switch.types.d.ts

@@ -0,0 +1,39 @@
+export declare const PI_SWITCH_CARD = "pi/switch";
+export declare const Switch: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiSwitchProps, S, PiSwitchEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_SWITCH_ACTION: {
+    CHANGED: string;
+};
+export declare const onPiSwitchChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSwitchChangedEvent>) => void;
+export type PiSwitchProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its checked state from form data and
+     * writes back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * Controlled checked state used in standalone mode (outside a Form).
+     * Ignored when `name` is set and the component is inside a pi/form.
+     */
+    checked?: boolean;
+    /** When true, the switch is disabled and non-interactive. */
+    disabled?: boolean;
+    /**
+     * Optional label text rendered beside the switch.
+     * The label is automatically associated with the switch via `htmlFor`.
+     */
+    label?: string;
+    /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */
+    className?: string;
+};
+export type PiSwitchChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New checked state after the toggle. */
+    checked: boolean;
+};
+export type PiSwitchEvents = {
+    onChanged: PiSwitchChangedEvent;
+};

package/cards/switch/switch.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/switch/switch.types.ts
+var r = "pi/switch", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED);
+//#endregion
+export { a as PI_SWITCH_ACTION, r as PI_SWITCH_CARD, i as Switch, o as onPiSwitchChanged };
+
+//# sourceMappingURL=switch.types.js.map

package/cards/switch/switch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.types.js","names":[],"sources":["../../../src/cards/switch/switch.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SWITCH_CARD = \"pi/switch\";\n\nexport const Switch = createCardDeclaration<PiSwitchProps, PiSwitchEvents>(\n  PI_SWITCH_CARD,\n);\n\nexport const PI_SWITCH_ACTION = registerActions(PI_SWITCH_CARD, [\"changed\"]);\n\nexport const onPiSwitchChanged = createOnAction<PiSwitchChangedEvent>(\n  PI_SWITCH_ACTION.CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiSwitchProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its checked state from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the switch is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered beside the switch.\n   * The label is automatically associated with the switch via `htmlFor`.\n   */\n  label?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the root wrapper element. */\n  className?: string;\n};\n\nexport type PiSwitchChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the toggle. */\n  checked: boolean;\n};\n\nexport type PiSwitchEvents = {\n  onChanged: PiSwitchChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAAC,SAAS,CAAC,GAE9D,IAAoB,EAC/B,EAAiB,OACnB"}

package/cards/tabs/index.d.ts

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

package/cards/tabs/index.js

@@ -0,0 +1,13 @@
+import { TabsComponent as e } from "./tabs.component.js";
+import { SdTabs as t, TABS_ACTION as n, TABS_CARD as r, onTabsTabChanged as i } from "./tabs.types.js";
+import { registerCardComponent as a } from "@pihanga2/core";
+//#region src/cards/tabs/index.ts
+a({
+	name: r,
+	component: e,
+	events: { onTabChanged: n.TABCHANGED }
+});
+//#endregion
+export { t as SdTabs, n as TABS_ACTION, r as TABS_CARD, i as onTabsTabChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/tabs/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {TabsComponent} from \"./tabs.component\";\nimport {TABS_ACTION, TABS_CARD} from \"./tabs.types\";\n\nexport * from \"./tabs.types\";\n\nregisterCardComponent({\n  name: TABS_CARD,\n  component: TabsComponent,\n  // Explicit mapping avoids CamelCase normalisation issues:\n  // TABCHANGED → onTabChanged (lowercase 'c' would break with actionTypesToEvents)\n  events: {\n    onTabChanged: TABS_ACTION.TABCHANGED,\n  },\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CAGX,QAAQ,EACN,cAAc,EAAY,WAC5B;AACF,CAAC"}

package/cards/tabs/tabs.component.d.ts

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

package/cards/tabs/tabs.component.js

@@ -0,0 +1,42 @@
+import { Tabs as e, TabsContent as t, TabsList as n, TabsTrigger as r } from "../../components/ui/tabs.js";
+import { Card as i } from "@pihanga2/core";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/cards/tabs/tabs.component.tsx
+var c = (c) => {
+	let { tabs: l, value: u, defaultValue: d, selfManaged: f = !1, orientation: p = "horizontal", className: m, listClassName: h, contentClassName: g, cardName: _, onTabChanged: v } = c, [y, b] = a(u ?? d ?? l[0]?.id ?? ""), x = f ? y : u ?? d ?? l[0]?.id ?? "";
+	function S(e) {
+		f && b(e), typeof v == "function" && v({ tabId: e });
+	}
+	return /* @__PURE__ */ o("div", {
+		"data-pihanga": _,
+		children: /* @__PURE__ */ s(e, {
+			value: x,
+			onValueChange: S,
+			orientation: p,
+			className: m,
+			children: [/* @__PURE__ */ o(n, {
+				className: h,
+				children: l.map((e) => /* @__PURE__ */ o(r, {
+					value: e.id,
+					disabled: e.disabled,
+					children: typeof e.title == "string" ? e.title : /* @__PURE__ */ o(i, {
+						cardName: e.title,
+						parentCard: _
+					})
+				}, e.id))
+			}), l.map((e) => /* @__PURE__ */ o(t, {
+				value: e.id,
+				className: g,
+				children: /* @__PURE__ */ o(i, {
+					cardName: e.contentCard,
+					parentCard: _
+				})
+			}, e.id))]
+		})
+	});
+};
+//#endregion
+export { c as TabsComponent };
+
+//# sourceMappingURL=tabs.component.js.map

package/cards/tabs/tabs.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.component.js","names":[],"sources":["../../../src/cards/tabs/tabs.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"@/components/ui/tabs\";\nimport type {TabsEvents, TabsProps} from \"./tabs.types\";\n\nexport const TabsComponent = (\n  props: PiCardProps<TabsProps, TabsEvents>,\n): React.ReactNode => {\n  const {\n    tabs,\n    value: propValue,\n    defaultValue,\n    selfManaged = false,\n    orientation = \"horizontal\",\n    className,\n    listClassName,\n    contentClassName,\n    cardName,\n    onTabChanged,\n  } = props;\n\n  // Resolve the initial value for self-managed mode:\n  // prefer propValue, then defaultValue, then first tab's id.\n  const initialValue = propValue ?? defaultValue ?? tabs[0]?.id ?? \"\";\n\n  // Internal state used only when selfManaged=true.\n  const [managedValue, setManagedValue] = useState<string>(initialValue);\n\n  // Effective active tab:\n  //   selfManaged → use internal state\n  //   controlled  → use the prop (fall back to first tab if not set)\n  const activeValue = selfManaged\n    ? managedValue\n    : (propValue ?? defaultValue ?? tabs[0]?.id ?? \"\");\n\n  function handleValueChange(tabId: string) {\n    if (selfManaged) {\n      setManagedValue(tabId);\n    }\n    // Always dispatch the Pihanga event so reducers can observe the change\n    // even in self-managed mode.\n    if (typeof onTabChanged === \"function\") {\n      onTabChanged({tabId});\n    }\n  }\n\n  return (\n    <div data-pihanga={cardName}>\n      <Tabs\n        value={activeValue}\n        onValueChange={handleValueChange}\n        orientation={orientation}\n        className={className}\n      >\n        <TabsList className={listClassName}>\n          {tabs.map((tab) => (\n            <TabsTrigger key={tab.id} value={tab.id} disabled={tab.disabled}>\n              {typeof tab.title !== \"string\" ? (\n                <Card cardName={tab.title} parentCard={cardName} />\n              ) : (\n                tab.title\n              )}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        {tabs.map((tab) => (\n          <TabsContent key={tab.id} value={tab.id} className={contentClassName}>\n            <Card cardName={tab.contentCard} parentCard={cardName} />\n          </TabsContent>\n        ))}\n      </Tabs>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,GACP,iBACA,iBAAc,IACd,iBAAc,cACd,cACA,kBACA,qBACA,aACA,oBACE,GAOE,CAAC,GAAc,KAAmB,EAHnB,KAAa,KAAgB,EAAK,IAAI,MAAM,EAGI,GAK/D,IAAc,IAChB,IACC,KAAa,KAAgB,EAAK,IAAI,MAAM;CAEjD,SAAS,EAAkB,GAAe;EAMxC,AALI,KACF,EAAgB,CAAK,GAInB,OAAO,KAAiB,cAC1B,EAAa,EAAC,SAAK,CAAC;CAExB;CAEA,OACE,kBAAC,OAAD;EAAK,gBAAc;YACjB,kBAAC,GAAD;GACE,OAAO;GACP,eAAe;GACF;GACF;aAJb,CAME,kBAAC,GAAD;IAAU,WAAW;cAClB,EAAK,KAAK,MACT,kBAAC,GAAD;KAA0B,OAAO,EAAI;KAAI,UAAU,EAAI;eACpD,OAAO,EAAI,SAAU,WAGpB,EAAI,QAFJ,kBAAC,GAAD;MAAM,UAAU,EAAI;MAAO,YAAY;KAAW,CAAA;IAIzC,GANK,EAAI,EAMT,CACd;GACO,CAAA,GAET,EAAK,KAAK,MACT,kBAAC,GAAD;IAA0B,OAAO,EAAI;IAAI,WAAW;cAClD,kBAAC,GAAD;KAAM,UAAU,EAAI;KAAa,YAAY;IAAW,CAAA;GAC7C,GAFK,EAAI,EAET,CACd,CACG;;CACH,CAAA;AAET"}

package/cards/tabs/tabs.types.d.ts

@@ -0,0 +1,72 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const TABS_CARD = "shad/tabs";
+export declare const SdTabs: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<TabsProps, S, TabsEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const TABS_ACTION: {
+    TABCHANGED: string;
+};
+export declare const onTabsTabChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & TabsTabChangedEvent>) => void;
+/**
+ * A single tab entry in the tabs component.
+ */
+export type TabItem = {
+    /** Unique identifier used for controlled value and events. */
+    id: string;
+    /**
+     * The label displayed on the tab trigger.
+     * Can be a plain string or a PiCardRef for custom/rich tab labels.
+     */
+    title: string | PiCardRef;
+    /**
+     * The Pihanga card rendered as the body of this tab when it is active.
+     */
+    contentCard: PiCardRef;
+    /** When true the tab trigger is rendered as disabled. */
+    disabled?: boolean;
+};
+export type TabsProps = {
+    /** Ordered list of tab definitions. */
+    tabs: TabItem[];
+    /**
+     * Controlled: the currently active tab id.
+     * Must be provided (or supplied via a state mapper) when selfManaged is
+     * false (the default).
+     */
+    value?: string;
+    /**
+     * Uncontrolled initial active tab id.
+     * Used as the initial value in self-managed mode when value is not set;
+     * falls back to the first tab id if omitted.
+     */
+    defaultValue?: string;
+    /**
+     * When true, the component manages its own active tab state internally.
+     * The onTabChanged event is still dispatched on every change so external
+     * reducers can observe the selection.
+     *
+     * When false (default), value fully controls the displayed tab.
+     * @default false
+     */
+    selfManaged?: boolean;
+    /**
+     * Layout orientation of the tab list.
+     * Passed directly to the Radix Tabs primitive.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /** Additional Tailwind/CSS classes applied to the root Tabs element. */
+    className?: string;
+    /** Additional classes applied to the TabsList element. */
+    listClassName?: string;
+    /** Additional classes applied to each TabsContent element. */
+    contentClassName?: string;
+};
+export type TabsTabChangedEvent = {
+    /** The id of the newly selected tab. */
+    tabId: string;
+};
+export type TabsEvents = {
+    /** Fired whenever the user selects a different tab. */
+    onTabChanged: TabsTabChangedEvent;
+};

package/cards/tabs/tabs.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/tabs/tabs.types.ts
+var r = "shad/tabs", i = e(r), a = n(r, ["tabChanged"]), o = t(a.TABCHANGED);
+//#endregion
+export { i as SdTabs, a as TABS_ACTION, r as TABS_CARD, o as onTabsTabChanged };
+
+//# sourceMappingURL=tabs.types.js.map

package/cards/tabs/tabs.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.types.js","names":[],"sources":["../../../src/cards/tabs/tabs.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const TABS_CARD = \"shad/tabs\";\n\nexport const SdTabs = createCardDeclaration<TabsProps, TabsEvents>(TABS_CARD);\n\nexport const TABS_ACTION = registerActions(TABS_CARD, [\"tabChanged\"]);\n\nexport const onTabsTabChanged = createOnAction<TabsTabChangedEvent>(\n  TABS_ACTION.TABCHANGED,\n);\n\n// ─── Tab item definition ──────────────────────────────────────────────────────\n\n/**\n * A single tab entry in the tabs component.\n */\nexport type TabItem = {\n  /** Unique identifier used for controlled value and events. */\n  id: string;\n\n  /**\n   * The label displayed on the tab trigger.\n   * Can be a plain string or a PiCardRef for custom/rich tab labels.\n   */\n  title: string | PiCardRef;\n\n  /**\n   * The Pihanga card rendered as the body of this tab when it is active.\n   */\n  contentCard: PiCardRef;\n\n  /** When true the tab trigger is rendered as disabled. */\n  disabled?: boolean;\n};\n\n// ─── Card props ───────────────────────────────────────────────────────────────\n\nexport type TabsProps = {\n  /** Ordered list of tab definitions. */\n  tabs: TabItem[];\n\n  /**\n   * Controlled: the currently active tab id.\n   * Must be provided (or supplied via a state mapper) when selfManaged is\n   * false (the default).\n   */\n  value?: string;\n\n  /**\n   * Uncontrolled initial active tab id.\n   * Used as the initial value in self-managed mode when value is not set;\n   * falls back to the first tab id if omitted.\n   */\n  defaultValue?: string;\n\n  /**\n   * When true, the component manages its own active tab state internally.\n   * The onTabChanged event is still dispatched on every change so external\n   * reducers can observe the selection.\n   *\n   * When false (default), value fully controls the displayed tab.\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Layout orientation of the tab list.\n   * Passed directly to the Radix Tabs primitive.\n   * @default \"horizontal\"\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n\n  /** Additional Tailwind/CSS classes applied to the root Tabs element. */\n  className?: string;\n\n  /** Additional classes applied to the TabsList element. */\n  listClassName?: string;\n\n  /** Additional classes applied to each TabsContent element. */\n  contentClassName?: string;\n};\n\n// ─── Events ───────────────────────────────────────────────────────────────────\n\nexport type TabsTabChangedEvent = {\n  /** The id of the newly selected tab. */\n  tabId: string;\n};\n\nexport type TabsEvents = {\n  /** Fired whenever the user selects a different tab. */\n  onTabChanged: TabsTabChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAY,aAEZ,IAAS,EAA6C,CAAS,GAE/D,IAAc,EAAgB,GAAW,CAAC,YAAY,CAAC,GAEvD,IAAmB,EAC9B,EAAY,UACd"}

package/cards/textField/index.d.ts

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

package/cards/textField/index.js

@@ -0,0 +1,13 @@
+import { TextFieldComponent as e } from "./textField.component.js";
+import { PI_TEXT_FIELD_ACTION as t, PI_TEXT_FIELD_CARD as n, TextField as r, onPiTextFieldChanged as i } from "./textField.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/textField/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as PI_TEXT_FIELD_ACTION, n as PI_TEXT_FIELD_CARD, r as TextField, i as onPiTextFieldChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/textField/index.js.map

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

package/cards/textField/textField.component.d.ts

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

package/cards/textField/textField.component.js

@@ -0,0 +1,29 @@
+import { useFormContext as e } from "../form/form.context.js";
+import { Input as t } from "../../components/ui/input.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/textField/textField.component.tsx
+var r = (r) => {
+	let { name: i, value: a = "", type: o = "text", placeholder: s, disabled: c, cardName: l, onChanged: u } = r, d = r.id, f = !!r.invalid, p = e(), m = p.isInForm && !!i, h = m ? p.formData[i] ?? "" : a;
+	function g(e) {
+		let t = e.target.value;
+		m ? p.handleChange(i, t) : u({
+			name: i,
+			value: t
+		});
+	}
+	let _ = `${l}-${i ?? "field"}`;
+	return /* @__PURE__ */ n(t, {
+		id: d ?? _,
+		type: o,
+		value: h,
+		onChange: g,
+		placeholder: s,
+		disabled: c,
+		"aria-invalid": f || void 0
+	});
+};
+//#endregion
+export { r as TextFieldComponent };
+
+//# sourceMappingURL=textField.component.js.map

package/cards/textField/textField.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textField.component.js","names":[],"sources":["../../../src/cards/textField/textField.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiTextFieldEvents, PiTextFieldProps} from \"./textField.types\";\n\nexport const TextFieldComponent = (\n  props: PiCardProps<PiTextFieldProps, PiTextFieldEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    cardName,\n    onChanged,\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  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : propValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue = e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Use the id injected by pi/field (for label↔control linking); fall back\n  // to a locally-generated id when used standalone.\n  const selfId = `${cardName}-${name ?? \"field\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <Input\n      id={fieldId}\n      type={type}\n      value={value}\n      onChange={handleChange}\n      placeholder={placeholder}\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n    />\n  );\n};\n"],"mappings":";;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAW,EAAE,OAAO;EAC1B,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,IAJY,KAAc;EAKpB;EACC;EACP,UAAU;EACG;EACH;EACV,gBAAc,KAAW,KAAA;CAC1B,CAAA;AAEL"}

package/cards/textField/textField.types.d.ts

@@ -0,0 +1,36 @@
+export declare const PI_TEXT_FIELD_CARD = "pi/text-field";
+export declare const TextField: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiTextFieldProps, S, PiTextFieldEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_TEXT_FIELD_ACTION: {
+    CHANGED: string;
+};
+export declare const onPiTextFieldChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiTextFieldChangedEvent>) => void;
+export type PiTextFieldProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its value from form state and writes
+     * back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * Controlled value used in standalone mode (outside a Form).
+     * Ignored when `name` is set and the component is inside a pi/form.
+     */
+    value?: string;
+    /** HTML input type (e.g. "text", "email", "password", "number"). */
+    type?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** When true, the input is disabled and non-interactive. */
+    disabled?: boolean;
+};
+export type PiTextFieldChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New value after the change. */
+    value: string;
+};
+export type PiTextFieldEvents = {
+    onChanged: PiTextFieldChangedEvent;
+};

package/cards/textField/textField.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/textField/textField.types.ts
+var r = "pi/text-field", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED);
+//#endregion
+export { a as PI_TEXT_FIELD_ACTION, r as PI_TEXT_FIELD_CARD, i as TextField, o as onPiTextFieldChanged };
+
+//# sourceMappingURL=textField.types.js.map

package/cards/textField/textField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textField.types.js","names":[],"sources":["../../../src/cards/textField/textField.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_TEXT_FIELD_CARD = \"pi/text-field\";\n\nexport const TextField = createCardDeclaration<\n  PiTextFieldProps,\n  PiTextFieldEvents\n>(PI_TEXT_FIELD_CARD);\n\nexport const PI_TEXT_FIELD_ACTION = registerActions(PI_TEXT_FIELD_CARD, [\n  \"changed\",\n]);\n\nexport const onPiTextFieldChanged = createOnAction<PiTextFieldChangedEvent>(\n  PI_TEXT_FIELD_ACTION.CHANGED,\n);\n\nexport type PiTextFieldProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * 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  /** HTML input type (e.g. \"text\", \"email\", \"password\", \"number\"). */\n  type?: string;\n\n  /** Placeholder text shown when the input is empty. */\n  placeholder?: string;\n\n  /** When true, the input is disabled and non-interactive. */\n  disabled?: boolean;\n};\n\nexport type PiTextFieldChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\nexport type PiTextFieldEvents = {\n  onChanged: PiTextFieldChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAqB,iBAErB,IAAY,EAGvB,CAAkB,GAEP,IAAuB,EAAgB,GAAoB,CACtE,SACF,CAAC,GAEY,IAAuB,EAClC,EAAqB,OACvB"}

package/cards/toast/index.d.ts

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

package/cards/toast/index.js

@@ -0,0 +1,13 @@
+import { PI_TOAST_ACTION as e, PI_TOAST_CARD as t, TOAST_OP_ACTION as n, Toast as r, dispatchShowToast as i, onPiToastClosed as a, onShowToast as o } from "./toast.types.js";
+import { ToastComponent as s } from "./toast.component.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+//#region src/cards/toast/index.ts
+l({
+	name: t,
+	component: s,
+	events: c(e)
+});
+//#endregion
+export { e as PI_TOAST_ACTION, t as PI_TOAST_CARD, n as TOAST_OP_ACTION, r as Toast, i as dispatchShowToast, a as onPiToastClosed, o as onShowToast };
+
+//# sourceMappingURL=index.js.map

package/cards/toast/index.js.map

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

package/cards/toast/toast.component.d.ts

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

package/cards/toast/toast.component.js

@@ -0,0 +1,76 @@
+import { TOAST_OP_ACTION as e } from "./toast.types.js";
+import { Card as t, usePiReducer as n } from "@pihanga2/core";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { toast as s } from "sonner";
+//#region src/cards/toast/toast.component.tsx
+var c = (c) => {
+	let { variant: l = "default", duration: u = 4e3, dismissible: d = !0, className: f, onClosed: p, cardName: m } = c, [h, g] = a(null);
+	n(e.SHOW, (e, t) => {
+		t.cardName && t.cardName !== m || g({
+			message: t.message,
+			description: t.description,
+			contentCard: t.contentCard,
+			variant: t.variant ?? l,
+			position: t.position,
+			duration: t.duration ?? u
+		});
+	}, m);
+	let _ = i(void 0);
+	return r(() => {
+		if (!h) return;
+		let e = {
+			success: s.success,
+			error: s.error,
+			info: s.info,
+			warning: s.warning,
+			default: s
+		}[h.variant] || s, n = [f, `toast-${h.variant}`].filter(Boolean).join(" ");
+		if (h.contentCard) {
+			let r = h.contentCard;
+			_.current = e(() => /* @__PURE__ */ o(t, {
+				cardName: r,
+				parentCard: m
+			}), {
+				duration: h.duration,
+				position: h.position || "bottom-right",
+				dismissible: d,
+				className: n,
+				onDismiss: () => {
+					g(null), p({});
+				},
+				onAutoClose: () => {
+					g(null), p({});
+				}
+			});
+		} else _.current = e(h.message, {
+			description: h.description,
+			duration: h.duration,
+			position: h.position || "bottom-right",
+			dismissible: d,
+			className: n,
+			onDismiss: () => {
+				g(null), p({});
+			},
+			onAutoClose: () => {
+				g(null), p({});
+			}
+		});
+		return () => {
+			_.current !== void 0 && s.dismiss(_.current);
+		};
+	}, [
+		h,
+		d,
+		f,
+		p,
+		m
+	]), /* @__PURE__ */ o("div", {
+		"data-pihanga": m,
+		style: { display: "none" }
+	});
+};
+//#endregion
+export { c as ToastComponent };
+
+//# sourceMappingURL=toast.component.js.map

package/cards/toast/toast.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.component.js","names":[],"sources":["../../../src/cards/toast/toast.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {\n  Card,\n  type PiCardProps,\n  type PiCardRef,\n  usePiReducer,\n  type ReduxAction,\n  type ReduxState,\n} from \"@pihanga2/core\";\nimport {toast} from \"sonner\";\n\nimport {\n  ShowToastEvent,\n  TOAST_OP_ACTION,\n  ToastPosition,\n  ToastType,\n  type PiToastEvents,\n  type PiToastProps,\n} from \"./toast.types\";\n\nexport const ToastComponent = (\n  props: PiCardProps<PiToastProps, PiToastEvents>,\n): React.ReactNode => {\n  const {\n    variant: defaultVariant = \"default\",\n    duration: defaultDuration = 4000,\n    dismissible: defaultDismissible = true,\n    className: defaultClassName,\n    onClosed,\n    cardName,\n  } = props;\n\n  // State for tracking Redux-triggered toast messages\n  const [currentToast, setCurrentToast] = useState<{\n    message?: string;\n    description?: string;\n    contentCard?: PiCardRef;\n    variant: ToastType;\n    position?: ToastPosition;\n    duration: number;\n  } | null>(null);\n\n  // Listen for showToast Redux messages\n  // This allows triggering toasts from anywhere via dispatchShowToast\n  usePiReducer<ReduxState, ShowToastEvent & ReduxAction>(\n    TOAST_OP_ACTION.SHOW,\n    (_, action) => {\n      // Only respond if message is for this card or no specific cardName is set\n      if (action.cardName && action.cardName !== cardName) {\n        return;\n      }\n      setCurrentToast({\n        message: action.message,\n        description: action.description,\n        contentCard: action.contentCard,\n        variant: action.variant ?? defaultVariant,\n        position: action.position,\n        duration: action.duration ?? defaultDuration,\n      });\n    },\n    cardName,\n  );\n\n  // Setup hooks before conditional rendering\n  const toastIdRef = useRef<string | number | undefined>(undefined);\n\n  useEffect(() => {\n    // Only show toast if Redux message was received\n    if (!currentToast) {\n      return;\n    }\n\n    // Map our toast types to Sonner's toast function\n    const toastFn =\n      {\n        success: toast.success,\n        error: toast.error,\n        info: toast.info,\n        warning: toast.warning,\n        default: toast,\n      }[currentToast.variant] || toast;\n\n    // Build className: combine default + variant-based class\n    const className = [defaultClassName, `toast-${currentToast.variant}`]\n      .filter(Boolean)\n      .join(\" \");\n\n    // If contentCard is provided, render it as custom JSX content\n    if (currentToast.contentCard) {\n      const contentCard = currentToast.contentCard;\n      const CustomToastContent = () => (\n        <Card cardName={contentCard} parentCard={cardName} />\n      );\n\n      // Show the toast with custom card content\n      toastIdRef.current = toastFn(CustomToastContent, {\n        duration: currentToast.duration,\n        position: currentToast.position || \"bottom-right\",\n        dismissible: defaultDismissible,\n        className,\n        onDismiss: () => {\n          setCurrentToast(null);\n          onClosed({});\n        },\n        onAutoClose: () => {\n          setCurrentToast(null);\n          onClosed({});\n        },\n      });\n    } else {\n      // Show the toast with message and optional description\n      toastIdRef.current = toastFn(currentToast.message, {\n        description: currentToast.description,\n        duration: currentToast.duration,\n        position: currentToast.position || \"bottom-right\",\n        dismissible: defaultDismissible,\n        className,\n        onDismiss: () => {\n          setCurrentToast(null);\n          onClosed({});\n        },\n        onAutoClose: () => {\n          setCurrentToast(null);\n          onClosed({});\n        },\n      });\n    }\n\n    // Cleanup on unmount\n    return () => {\n      if (toastIdRef.current !== undefined) {\n        toast.dismiss(toastIdRef.current);\n      }\n    };\n  }, [currentToast, defaultDismissible, defaultClassName, onClosed, cardName]);\n\n  // This component doesn't render visible DOM itself\n  // Sonner renders toasts in a portal via its Toaster component\n  return <div data-pihanga={cardName} style={{display: \"none\"}} />;\n};\n"],"mappings":";;;;;;AAoBA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SAAS,IAAiB,WAC1B,UAAU,IAAkB,KAC5B,aAAa,IAAqB,IAClC,WAAW,GACX,aACA,gBACE,GAGE,CAAC,GAAc,KAAmB,EAO9B,IAAI;CAId,EACE,EAAgB,OACf,GAAG,MAAW;EAET,EAAO,YAAY,EAAO,aAAa,KAG3C,EAAgB;GACd,SAAS,EAAO;GAChB,aAAa,EAAO;GACpB,aAAa,EAAO;GACpB,SAAS,EAAO,WAAW;GAC3B,UAAU,EAAO;GACjB,UAAU,EAAO,YAAY;EAC/B,CAAC;CACH,GACA,CACF;CAGA,IAAM,IAAa,EAAoC,KAAA,CAAS;CA0EhE,OAxEA,QAAgB;EAEd,IAAI,CAAC,GACH;EAIF,IAAM,IACJ;GACE,SAAS,EAAM;GACf,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,SAAS,EAAM;GACf,SAAS;EACX,EAAE,EAAa,YAAY,GAGvB,IAAY,CAAC,GAAkB,SAAS,EAAa,SAAS,EACjE,OAAO,OAAO,EACd,KAAK,GAAG;EAGX,IAAI,EAAa,aAAa;GAC5B,IAAM,IAAc,EAAa;GAMjC,EAAW,UAAU,QAJnB,kBAAC,GAAD;IAAM,UAAU;IAAa,YAAY;GAAW,CAAA,GAIL;IAC/C,UAAU,EAAa;IACvB,UAAU,EAAa,YAAY;IACnC,aAAa;IACb;IACA,iBAAiB;KAEf,AADA,EAAgB,IAAI,GACpB,EAAS,CAAC,CAAC;IACb;IACA,mBAAmB;KAEjB,AADA,EAAgB,IAAI,GACpB,EAAS,CAAC,CAAC;IACb;GACF,CAAC;EACH,OAEE,EAAW,UAAU,EAAQ,EAAa,SAAS;GACjD,aAAa,EAAa;GAC1B,UAAU,EAAa;GACvB,UAAU,EAAa,YAAY;GACnC,aAAa;GACb;GACA,iBAAiB;IAEf,AADA,EAAgB,IAAI,GACpB,EAAS,CAAC,CAAC;GACb;GACA,mBAAmB;IAEjB,AADA,EAAgB,IAAI,GACpB,EAAS,CAAC,CAAC;GACb;EACF,CAAC;EAIH,aAAa;GACX,AAAI,EAAW,YAAY,KAAA,KACzB,EAAM,QAAQ,EAAW,OAAO;EAEpC;CACF,GAAG;EAAC;EAAc;EAAoB;EAAkB;EAAU;CAAQ,CAAC,GAIpE,kBAAC,OAAD;EAAK,gBAAc;EAAU,OAAO,EAAC,SAAS,OAAM;CAAI,CAAA;AACjE"}

package/cards/toast/toast.types.d.ts

@@ -0,0 +1,100 @@
+import { PiCardRef, DispatchF } from '@pihanga2/core';
+export declare const PI_TOAST_CARD = "pi/toast";
+export declare const Toast: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiToastProps, S, PiToastEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const TOAST_OP_ACTION: {
+    SHOW: string;
+};
+/**
+ * Dispatch helper to show a toast
+ *
+ * @param d - Dispatch function from Pihanga
+ * @param ev - Toast event data
+ *
+ * @example
+ * ```typescript
+ * import {dispatchShowToast} from "@/cards/toast";
+ *
+ * dispatchShowToast(_dispatch, {
+ *   message: "Success!",
+ *   description: "Your changes were saved.",
+ *   variant: "success",
+ *   duration: 3000,
+ * });
+ * ```
+ */
+export declare const dispatchShowToast: (d: DispatchF, ev: ShowToastEvent) => void;
+/**
+ * Action handler for when a toast is shown
+ *
+ * Use this in your reducers or effects to handle toast display events:
+ *
+ * @example
+ * ```typescript
+ * import {onShowToast} from "@/cards/toast";
+ *
+ * export const handleShowToast = onShowToast((state, action) => {
+ *   console.log("Toast shown:", action.payload.message);
+ *   return state;
+ * });
+ * ```
+ */
+export declare const onShowToast: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ShowToastEvent>) => void;
+export declare const PI_TOAST_ACTION: {
+    CLOSED: string;
+};
+export declare const onPiToastClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiToastClosedEvent>) => void;
+/**
+ * Toast notification type/variant.
+ */
+export type ToastType = "default" | "success" | "error" | "info" | "warning";
+/**
+ * Position of the toast on the screen.
+ */
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type PiToastProps = {
+    /**
+     * Default variant for toasts shown by this card instance.
+     * Can be overridden per individual toast via ShowToastEvent.variant.
+     * @default 'default'
+     */
+    variant?: ToastType;
+    /**
+     * Default duration in milliseconds before the toast auto-closes.
+     * Can be overridden per individual toast via ShowToastEvent.duration.
+     * Set to `Infinity` to disable auto-close.
+     * @default 4000
+     */
+    duration?: number;
+    /**
+     * Whether toasts from this card are dismissible by the user.
+     * This is a card-level setting only; it cannot be overridden per individual toast.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Custom CSS class to apply to all toasts from this card.
+     */
+    className?: string;
+};
+export type PiToastClosedEvent = {
+    id?: string;
+};
+export type PiToastEvents = {
+    onClosed: PiToastClosedEvent;
+};
+/**
+ * Event payload for showing a toast
+ */
+export type ShowToastEvent = {
+    cardName?: string;
+    message: string;
+    description?: string;
+    contentCard?: PiCardRef;
+    variant?: ToastType;
+    position?: ToastPosition;
+    duration?: number;
+};