@pihanga2/shadcn 0.2.21 → 0.2.22

package/README.md

@@ -62,11 +62,13 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (50)
+## Included cards (53)
 
+- `attachment`
 - `avatar`
 - `badge`
 - `box`
+- `bubble`
 - `button`
 - `checkbox`
 - `collapsibleCard`
@@ -90,6 +92,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `loadingOverlay`
 - `loadingSkeleton`
 - `menu`
+- `message`
 - `modeToggle`
 - `navbarSearch`
 - `observable`

package/cards/attachment/attachment.component.d.ts

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

package/cards/attachment/attachment.component.js

@@ -0,0 +1,46 @@
+import { getIcon as e } from "../icons.js";
+import { Attachment as t, AttachmentAction as n, AttachmentActions as r, AttachmentContent as i, AttachmentDescription as a, AttachmentMedia as o, AttachmentTitle as s, AttachmentTrigger as c } from "../../components/ui/attachment.js";
+import "react";
+import "@pihanga2/core";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/cards/attachment/attachment.component.tsx
+var d = (d) => {
+	let { id: f, icon: p, imageSrc: m, imageAlt: h = "", title: g, description: _, state: v = "done", size: y = "default", orientation: b = "horizontal", actions: x, triggerAriaLabel: S, className: C, style: w, cardName: T, onActionClicked: E, onTriggered: D } = d;
+	return /* @__PURE__ */ u(t, {
+		state: v,
+		size: y,
+		orientation: b,
+		className: C,
+		style: w,
+		"data-pihanga": T,
+		children: [
+			S && /* @__PURE__ */ l(c, {
+				"aria-label": S,
+				onClick: () => D({ id: f })
+			}),
+			m ? /* @__PURE__ */ l(o, {
+				variant: "image",
+				children: /* @__PURE__ */ l("img", {
+					src: m,
+					alt: h
+				})
+			}) : p ? /* @__PURE__ */ l(o, {
+				variant: "icon",
+				children: e(p)
+			}) : null,
+			/* @__PURE__ */ u(i, { children: [/* @__PURE__ */ l(s, { children: g }), _ && /* @__PURE__ */ l(a, { children: _ })] }),
+			x && x.length > 0 && /* @__PURE__ */ l(r, { children: x.map((t) => /* @__PURE__ */ l(n, {
+				"aria-label": t.ariaLabel,
+				onClick: () => E({
+					id: f,
+					action: t.id
+				}),
+				children: e(t.icon)
+			}, t.id)) })
+		]
+	});
+};
+//#endregion
+export { d as AttachmentComponent };
+
+//# sourceMappingURL=attachment.component.js.map

package/cards/attachment/attachment.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.component.js","names":[],"sources":["../../../src/cards/attachment/attachment.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Attachment,\n  AttachmentAction,\n  AttachmentActions,\n  AttachmentContent,\n  AttachmentDescription,\n  AttachmentMedia,\n  AttachmentTitle,\n  AttachmentTrigger,\n} from \"@/components/ui/attachment\";\nimport {getIcon} from \"@/cards/icons\";\nimport type {AttachmentEvents, AttachmentProps} from \"./attachment.types\";\n\nexport const AttachmentComponent = (\n  props: PiCardProps<AttachmentProps, AttachmentEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    icon,\n    imageSrc,\n    imageAlt = \"\",\n    title,\n    description,\n    state = \"done\",\n    size = \"default\",\n    orientation = \"horizontal\",\n    actions,\n    triggerAriaLabel,\n    className,\n    style,\n    cardName,\n    onActionClicked,\n    onTriggered,\n  } = props;\n\n  return (\n    <Attachment\n      state={state}\n      size={size}\n      orientation={orientation}\n      className={className}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {triggerAriaLabel && (\n        <AttachmentTrigger\n          aria-label={triggerAriaLabel}\n          onClick={() => onTriggered({id})}\n        />\n      )}\n\n      {imageSrc ? (\n        <AttachmentMedia variant=\"image\">\n          <img src={imageSrc} alt={imageAlt} />\n        </AttachmentMedia>\n      ) : icon ? (\n        <AttachmentMedia variant=\"icon\">{getIcon(icon)}</AttachmentMedia>\n      ) : null}\n\n      <AttachmentContent>\n        <AttachmentTitle>{title}</AttachmentTitle>\n        {description && (\n          <AttachmentDescription>{description}</AttachmentDescription>\n        )}\n      </AttachmentContent>\n\n      {actions && actions.length > 0 && (\n        <AttachmentActions>\n          {actions.map((a) => (\n            <AttachmentAction\n              key={a.id}\n              aria-label={a.ariaLabel}\n              onClick={() => onActionClicked({id, action: a.id})}\n            >\n              {getIcon(a.icon)}\n            </AttachmentAction>\n          ))}\n        </AttachmentActions>\n      )}\n    </Attachment>\n  );\n};\n"],"mappings":";;;;;;AAeA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,SACA,aACA,cAAW,IACX,UACA,gBACA,WAAQ,QACR,UAAO,WACP,iBAAc,cACd,YACA,qBACA,cACA,UACA,aACA,oBACA,mBACE;CAEJ,OACE,kBAAC,GAAD;EACS;EACD;EACO;EACF;EACJ;EACP,gBAAc;YANhB;GAQG,KACC,kBAAC,GAAD;IACE,cAAY;IACZ,eAAe,EAAY,EAAC,MAAE,CAAC;GAChC,CAAA;GAGF,IACC,kBAAC,GAAD;IAAiB,SAAQ;cACvB,kBAAC,OAAD;KAAK,KAAK;KAAU,KAAK;IAAW,CAAA;GACrB,CAAA,IACf,IACF,kBAAC,GAAD;IAAiB,SAAQ;cAAQ,EAAQ,CAAI;GAAmB,CAAA,IAC9D;GAEJ,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAkB,EAAuB,CAAA,GACxC,KACC,kBAAC,GAAD,EAAA,UAAwB,EAAmC,CAAA,CAE5C,EAAA,CAAA;GAElB,KAAW,EAAQ,SAAS,KAC3B,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;IAEE,cAAY,EAAE;IACd,eAAe,EAAgB;KAAC;KAAI,QAAQ,EAAE;IAAE,CAAC;cAEhD,EAAQ,EAAE,IAAI;GACC,GALX,EAAE,EAKS,CACnB,EACgB,CAAA;EAEX;;AAEhB"}

package/cards/attachment/attachment.types.d.ts

@@ -0,0 +1,95 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const ATTACHMENT_CARD = "shad/attachment";
+export declare const Attachment: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<AttachmentProps, S, AttachmentEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const ATTACHMENT_ACTION: {
+    ACTION_CLICKED: string;
+    TRIGGERED: string;
+};
+export type AttachmentActionClickedEvent = {
+    id?: string;
+    action: string;
+};
+export type AttachmentTriggeredEvent = {
+    id?: string;
+};
+export declare const onAttachmentActionClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & AttachmentActionClickedEvent>) => void;
+export declare const onAttachmentTriggered: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & AttachmentTriggeredEvent>) => void;
+export type AttachmentEvents = {
+    onActionClicked: AttachmentActionClickedEvent;
+    onTriggered: AttachmentTriggeredEvent;
+};
+/** Upload lifecycle state — drives styling and the title shimmer. */
+export type AttachmentState = "idle" | "uploading" | "processing" | "error" | "done";
+export type AttachmentSize = "default" | "sm" | "xs";
+export type AttachmentOrientation = "horizontal" | "vertical";
+/** A single action button rendered inside `AttachmentActions`. */
+export type AttachmentActionItem = {
+    /** Stable id echoed in the `onActionClicked` event. */
+    id: string;
+    /** Icon name from the Pihanga icon registry. */
+    icon: string;
+    /** Accessible label — required, since the action is icon-only. */
+    ariaLabel: string;
+};
+export type AttachmentProps = {
+    /** Stable id echoed in `onActionClicked` / `onTriggered` events. */
+    id?: string;
+    /**
+     * Icon name from the Pihanga icon registry, rendered inside
+     * `AttachmentMedia` (variant `"icon"`). Ignored when `imageSrc` is set.
+     */
+    icon?: string;
+    /**
+     * Image URL rendered inside `AttachmentMedia` (variant `"image"`).
+     * Takes precedence over `icon`.
+     */
+    imageSrc?: string;
+    /** Accessible alt text for `imageSrc`. */
+    imageAlt?: string;
+    /** File name / title rendered inside `AttachmentTitle`. */
+    title: string;
+    /** Secondary metadata (e.g. "PDF · 2.4 MB") rendered inside `AttachmentDescription`. */
+    description?: string;
+    /**
+     * Upload lifecycle state.
+     * @default "done"
+     */
+    state?: AttachmentState;
+    /**
+     * Attachment size.
+     * @default "default"
+     */
+    size?: AttachmentSize;
+    /**
+     * Lay the media beside (`"horizontal"`) or above (`"vertical"`) the content.
+     * @default "horizontal"
+     */
+    orientation?: AttachmentOrientation;
+    /** Row of icon-only action buttons (e.g. remove, download). */
+    actions?: AttachmentActionItem[];
+    /**
+     * When set, renders a full-card `AttachmentTrigger` overlay; clicking it
+     * (or activating it with the keyboard) fires `onTriggered`. Actions
+     * remain independently clickable.
+     */
+    triggerAriaLabel?: string;
+    /** Additional Tailwind classes applied to the root `Attachment` element. */
+    className?: string;
+    /** Inline styles applied to the root `Attachment` element. */
+    style?: React.CSSProperties;
+};
+export declare const ATTACHMENT_GROUP_CARD = "shad/attachment-group";
+export declare const AttachmentGroup: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<AttachmentGroupProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type AttachmentGroupProps = {
+    /** Ordered list of `shad/attachment` card refs to lay out in a row. */
+    content: PiCardRef[];
+    /** Additional Tailwind classes applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
+};

package/cards/attachment/attachment.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/attachment/attachment.types.ts
+var r = "shad/attachment", i = e(r), a = n(r, ["action_clicked", "triggered"]), o = t(a.ACTION_CLICKED), s = t(a.TRIGGERED), c = "shad/attachment-group", l = e(c);
+//#endregion
+export { a as ATTACHMENT_ACTION, r as ATTACHMENT_CARD, c as ATTACHMENT_GROUP_CARD, i as Attachment, l as AttachmentGroup, o as onAttachmentActionClicked, s as onAttachmentTriggered };
+
+//# sourceMappingURL=attachment.types.js.map

package/cards/attachment/attachment.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.types.js","names":[],"sources":["../../../src/cards/attachment/attachment.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n  type PiCardRef,\n} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const ATTACHMENT_CARD = \"shad/attachment\";\n\nexport const Attachment = createCardDeclaration<\n  AttachmentProps,\n  AttachmentEvents\n>(ATTACHMENT_CARD);\n\nexport const ATTACHMENT_ACTION = registerActions(ATTACHMENT_CARD, [\n  \"action_clicked\",\n  \"triggered\",\n]);\n\nexport type AttachmentActionClickedEvent = {id?: string; action: string};\nexport type AttachmentTriggeredEvent = {id?: string};\n\nexport const onAttachmentActionClicked =\n  createOnAction<AttachmentActionClickedEvent>(\n    ATTACHMENT_ACTION.ACTION_CLICKED,\n  );\nexport const onAttachmentTriggered = createOnAction<AttachmentTriggeredEvent>(\n  ATTACHMENT_ACTION.TRIGGERED,\n);\n\nexport type AttachmentEvents = {\n  onActionClicked: AttachmentActionClickedEvent;\n  onTriggered: AttachmentTriggeredEvent;\n};\n\n/** Upload lifecycle state — drives styling and the title shimmer. */\nexport type AttachmentState =\n  | \"idle\"\n  | \"uploading\"\n  | \"processing\"\n  | \"error\"\n  | \"done\";\n\nexport type AttachmentSize = \"default\" | \"sm\" | \"xs\";\n\nexport type AttachmentOrientation = \"horizontal\" | \"vertical\";\n\n/** A single action button rendered inside `AttachmentActions`. */\nexport type AttachmentActionItem = {\n  /** Stable id echoed in the `onActionClicked` event. */\n  id: string;\n  /** Icon name from the Pihanga icon registry. */\n  icon: string;\n  /** Accessible label — required, since the action is icon-only. */\n  ariaLabel: string;\n};\n\nexport type AttachmentProps = {\n  /** Stable id echoed in `onActionClicked` / `onTriggered` events. */\n  id?: string;\n\n  /**\n   * Icon name from the Pihanga icon registry, rendered inside\n   * `AttachmentMedia` (variant `\"icon\"`). Ignored when `imageSrc` is set.\n   */\n  icon?: string;\n\n  /**\n   * Image URL rendered inside `AttachmentMedia` (variant `\"image\"`).\n   * Takes precedence over `icon`.\n   */\n  imageSrc?: string;\n  /** Accessible alt text for `imageSrc`. */\n  imageAlt?: string;\n\n  /** File name / title rendered inside `AttachmentTitle`. */\n  title: string;\n\n  /** Secondary metadata (e.g. \"PDF · 2.4 MB\") rendered inside `AttachmentDescription`. */\n  description?: string;\n\n  /**\n   * Upload lifecycle state.\n   * @default \"done\"\n   */\n  state?: AttachmentState;\n\n  /**\n   * Attachment size.\n   * @default \"default\"\n   */\n  size?: AttachmentSize;\n\n  /**\n   * Lay the media beside (`\"horizontal\"`) or above (`\"vertical\"`) the content.\n   * @default \"horizontal\"\n   */\n  orientation?: AttachmentOrientation;\n\n  /** Row of icon-only action buttons (e.g. remove, download). */\n  actions?: AttachmentActionItem[];\n\n  /**\n   * When set, renders a full-card `AttachmentTrigger` overlay; clicking it\n   * (or activating it with the keyboard) fires `onTriggered`. Actions\n   * remain independently clickable.\n   */\n  triggerAriaLabel?: string;\n\n  /** Additional Tailwind classes applied to the root `Attachment` element. */\n  className?: string;\n  /** Inline styles applied to the root `Attachment` element. */\n  style?: React.CSSProperties;\n};\n\n// ---------------------------------------------------------------------------\n// shad/attachment-group — horizontally-scrollable row of attachments.\n// ---------------------------------------------------------------------------\n\nexport const ATTACHMENT_GROUP_CARD = \"shad/attachment-group\";\n\nexport const AttachmentGroup = createCardDeclaration<AttachmentGroupProps>(\n  ATTACHMENT_GROUP_CARD,\n);\n\nexport type AttachmentGroupProps = {\n  /** Ordered list of `shad/attachment` card refs to lay out in a row. */\n  content: PiCardRef[];\n  /** Additional Tailwind classes applied to the root element. */\n  className?: string;\n  /** Inline styles applied to the root element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAQA,IAAa,IAAkB,mBAElB,IAAa,EAGxB,CAAe,GAEJ,IAAoB,EAAgB,GAAiB,CAChE,kBACA,WACF,CAAC,GAKY,IACX,EACE,EAAkB,cACpB,GACW,IAAwB,EACnC,EAAkB,SACpB,GA2Fa,IAAwB,yBAExB,IAAkB,EAC7B,CACF"}

package/cards/attachment/attachmentGroup.component.d.ts

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

package/cards/attachment/attachmentGroup.component.js

@@ -0,0 +1,21 @@
+import { AttachmentGroup as e } from "../../components/ui/attachment.js";
+import "react";
+import { Card as t } from "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/attachment/attachmentGroup.component.tsx
+var r = (r) => {
+	let { content: i, className: a, style: o, cardName: s } = r;
+	return /* @__PURE__ */ n(e, {
+		className: a,
+		style: o,
+		"data-pihanga": s,
+		children: i.map((e, r) => /* @__PURE__ */ n(t, {
+			cardName: e,
+			parentCard: s
+		}, r))
+	});
+};
+//#endregion
+export { r as AttachmentGroupComponent };
+
+//# sourceMappingURL=attachmentGroup.component.js.map

package/cards/attachment/attachmentGroup.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachmentGroup.component.js","names":[],"sources":["../../../src/cards/attachment/attachmentGroup.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {AttachmentGroup} from \"@/components/ui/attachment\";\nimport type {AttachmentGroupProps} from \"./attachment.types\";\n\nexport const AttachmentGroupComponent = (\n  props: PiCardProps<AttachmentGroupProps>,\n): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  return (\n    <AttachmentGroup\n      className={className}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {content.map((cn, i) => (\n        <Card cardName={cn} parentCard={cardName} key={i} />\n      ))}\n    </AttachmentGroup>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY;CAE9C,OACE,kBAAC,GAAD;EACa;EACJ;EACP,gBAAc;YAEb,EAAQ,KAAK,GAAI,MAChB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD;CACc,CAAA;AAErB"}

package/cards/attachment/index.d.ts

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

package/cards/attachment/index.js

@@ -0,0 +1,16 @@
+import { AttachmentComponent as e } from "./attachment.component.js";
+import { AttachmentGroupComponent as t } from "./attachmentGroup.component.js";
+import { ATTACHMENT_ACTION as n, ATTACHMENT_CARD as r, ATTACHMENT_GROUP_CARD as i, Attachment as a, AttachmentGroup as o, onAttachmentActionClicked as s, onAttachmentTriggered as c } from "./attachment.types.js";
+import { actionTypesToEvents as l, registerCardComponent as u } from "@pihanga2/core";
+u({
+	name: r,
+	component: e,
+	events: l(n)
+}), u({
+	name: i,
+	component: t
+});
+//#endregion
+export { n as ATTACHMENT_ACTION, r as ATTACHMENT_CARD, i as ATTACHMENT_GROUP_CARD, a as Attachment, o as AttachmentGroup, s as onAttachmentActionClicked, c as onAttachmentTriggered };
+
+//# sourceMappingURL=index.js.map

package/cards/attachment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/attachment/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {AttachmentComponent} from \"./attachment.component\";\nimport {AttachmentGroupComponent} from \"./attachmentGroup.component\";\nimport {\n  ATTACHMENT_ACTION,\n  ATTACHMENT_CARD,\n  ATTACHMENT_GROUP_CARD,\n} from \"./attachment.types\";\n\nexport * from \"./attachment.types\";\n\nregisterCardComponent({\n  name: ATTACHMENT_CARD,\n  component: AttachmentComponent,\n  events: actionTypesToEvents(ATTACHMENT_ACTION),\n});\n\nregisterCardComponent({\n  name: ATTACHMENT_GROUP_CARD,\n  component: AttachmentGroupComponent,\n});\n"],"mappings":";;;;AAYA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAiB;AAC/C,CAAC,GAED,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/bubble/bubble.component.d.ts

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

package/cards/bubble/bubble.component.js

@@ -0,0 +1,67 @@
+import { cn as e } from "../../lib/utils.js";
+import { Bubble as t, BubbleContent as n, BubbleReactions as r } from "../../components/ui/bubble.js";
+import "react";
+import { Card as i } from "@pihanga2/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/cards/bubble/bubble.component.tsx
+var s = (s) => {
+	let { id: c, text: l, contentCard: u, variant: d = "default", align: f = "start", href: p, target: m, clickable: h, reactions: g, reactionsCard: _, reactionsAriaLabel: v, reactionsSide: y = "bottom", reactionsAlign: b = "end", className: x, contentClassName: S, reactionsClassName: C, style: w, cardName: T, onClicked: E } = s, D = u ? /* @__PURE__ */ a(i, {
+		cardName: u,
+		parentCard: T
+	}) : l;
+	return /* @__PURE__ */ o(t, {
+		variant: d,
+		align: f,
+		className: x,
+		style: w,
+		"data-pihanga": T,
+		children: [p ? /* @__PURE__ */ a(n, {
+			asChild: !0,
+			className: S,
+			children: /* @__PURE__ */ a("a", {
+				href: p,
+				target: m,
+				children: D
+			})
+		}) : h ? /* @__PURE__ */ a(n, {
+			asChild: !0,
+			className: S,
+			children: /* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: () => E({ id: c }),
+				children: D
+			})
+		}) : /* @__PURE__ */ a(n, {
+			className: S,
+			children: D
+		}), _ ? /* @__PURE__ */ a(r, {
+			side: y,
+			align: b,
+			className: C,
+			...v ? {
+				role: "img",
+				"aria-label": v
+			} : {},
+			children: /* @__PURE__ */ a(i, {
+				cardName: _,
+				parentCard: T
+			})
+		}) : g && g.length > 0 && /* @__PURE__ */ a(r, {
+			side: y,
+			align: b,
+			className: C,
+			...v ? {
+				role: "img",
+				"aria-label": v
+			} : {},
+			children: g.map((t, n) => /* @__PURE__ */ a("span", {
+				className: e("inline-flex"),
+				children: t
+			}, n))
+		})]
+	});
+};
+//#endregion
+export { s as BubbleComponent };
+
+//# sourceMappingURL=bubble.component.js.map

package/cards/bubble/bubble.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.component.js","names":[],"sources":["../../../src/cards/bubble/bubble.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {Bubble, BubbleContent, BubbleReactions} from \"@/components/ui/bubble\";\nimport {cn} from \"@/lib/utils\";\nimport type {BubbleEvents, BubbleProps} from \"./bubble.types\";\n\nexport const BubbleComponent = (\n  props: PiCardProps<BubbleProps, BubbleEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    text,\n    contentCard,\n    variant = \"default\",\n    align = \"start\",\n    href,\n    target,\n    clickable,\n    reactions,\n    reactionsCard,\n    reactionsAriaLabel,\n    reactionsSide = \"bottom\",\n    reactionsAlign = \"end\",\n    className,\n    contentClassName,\n    reactionsClassName,\n    style,\n    cardName,\n    onClicked,\n  } = props;\n\n  const innerContent = contentCard ? (\n    <Card cardName={contentCard} parentCard={cardName} />\n  ) : (\n    text\n  );\n\n  return (\n    <Bubble\n      variant={variant}\n      align={align}\n      className={className}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {href ? (\n        <BubbleContent asChild className={contentClassName}>\n          <a href={href} target={target}>\n            {innerContent}\n          </a>\n        </BubbleContent>\n      ) : clickable ? (\n        <BubbleContent asChild className={contentClassName}>\n          <button type=\"button\" onClick={() => onClicked({id})}>\n            {innerContent}\n          </button>\n        </BubbleContent>\n      ) : (\n        <BubbleContent className={contentClassName}>\n          {innerContent}\n        </BubbleContent>\n      )}\n\n      {reactionsCard ? (\n        <BubbleReactions\n          side={reactionsSide}\n          align={reactionsAlign}\n          className={reactionsClassName}\n          {...(reactionsAriaLabel\n            ? {role: \"img\", \"aria-label\": reactionsAriaLabel}\n            : {})}\n        >\n          <Card cardName={reactionsCard} parentCard={cardName} />\n        </BubbleReactions>\n      ) : (\n        reactions &&\n        reactions.length > 0 && (\n          <BubbleReactions\n            side={reactionsSide}\n            align={reactionsAlign}\n            className={reactionsClassName}\n            {...(reactionsAriaLabel\n              ? {role: \"img\", \"aria-label\": reactionsAriaLabel}\n              : {})}\n          >\n            {reactions.map((r, i) => (\n              <span key={i} className={cn(\"inline-flex\")}>\n                {r}\n              </span>\n            ))}\n          </BubbleReactions>\n        )\n      )}\n    </Bubble>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,SACA,gBACA,aAAU,WACV,WAAQ,SACR,SACA,WACA,cACA,cACA,kBACA,uBACA,mBAAgB,UAChB,oBAAiB,OACjB,cACA,qBACA,uBACA,UACA,aACA,iBACE,GAEE,IAAe,IACnB,kBAAC,GAAD;EAAM,UAAU;EAAa,YAAY;CAAW,CAAA,IAEpD;CAGF,OACE,kBAAC,GAAD;EACW;EACF;EACI;EACJ;EACP,gBAAc;YALhB,CAOG,IACC,kBAAC,GAAD;GAAe,SAAA;GAAQ,WAAW;aAChC,kBAAC,KAAD;IAAS;IAAc;cACpB;GACA,CAAA;EACU,CAAA,IACb,IACF,kBAAC,GAAD;GAAe,SAAA;GAAQ,WAAW;aAChC,kBAAC,UAAD;IAAQ,MAAK;IAAS,eAAe,EAAU,EAAC,MAAE,CAAC;cAChD;GACK,CAAA;EACK,CAAA,IAEf,kBAAC,GAAD;GAAe,WAAW;aACvB;EACY,CAAA,GAGhB,IACC,kBAAC,GAAD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACX,GAAK,IACD;IAAC,MAAM;IAAO,cAAc;GAAkB,IAC9C,CAAC;aAEL,kBAAC,GAAD;IAAM,UAAU;IAAe,YAAY;GAAW,CAAA;EACvC,CAAA,IAEjB,KACA,EAAU,SAAS,KACjB,kBAAC,GAAD;GACE,MAAM;GACN,OAAO;GACP,WAAW;GACX,GAAK,IACD;IAAC,MAAM;IAAO,cAAc;GAAkB,IAC9C,CAAC;aAEJ,EAAU,KAAK,GAAG,MACjB,kBAAC,QAAD;IAAc,WAAW,EAAG,aAAa;cACtC;GACG,GAFK,CAEL,CACP;EACc,CAAA,CAGf;;AAEZ"}

package/cards/bubble/bubble.types.d.ts

@@ -0,0 +1,106 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const BUBBLE_CARD = "shad/bubble";
+export declare const Bubble: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<BubbleProps, S, BubbleEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const BUBBLE_ACTION: {
+    CLICKED: string;
+};
+export type BubbleClickedEvent = {
+    id?: string;
+};
+export declare const onBubbleClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & BubbleClickedEvent>) => void;
+export type BubbleEvents = {
+    onClicked: BubbleClickedEvent;
+};
+/**
+ * Bubble visual treatment — mirrors the shadcn `Bubble` `variant` prop.
+ *
+ * | Value           | Appearance                                          |
+ * |-----------------|------------------------------------------------------|
+ * | `"default"`     | Strong primary-coloured bubble.                     |
+ * | `"secondary"`   | Secondary colour, filled.                           |
+ * | `"muted"`       | Lower-emphasis muted background.                    |
+ * | `"tinted"`      | Soft tint derived from the primary colour.          |
+ * | `"outline"`     | Bordered, transparent background.                  |
+ * | `"ghost"`       | Unframed — for assistant text, markdown, code, etc. |
+ * | `"destructive"` | Red / error colour.                                 |
+ */
+export type BubbleVariant = "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive";
+export type BubbleProps = {
+    id?: string;
+    /** Plain text rendered inside `BubbleContent`. Ignored if `contentCard` is set. */
+    text?: string;
+    /**
+     * Pihanga card reference rendered inside `BubbleContent` instead of `text`.
+     *
+     * Use this for "large" pieces of content — a `markdown-viewer` card, a
+     * `shad/data-table`, an image, or any other rich card. Combine with
+     * `variant: "ghost"` so the content is not framed and can use the full
+     * available width.
+     */
+    contentCard?: PiCardRef;
+    /**
+     * Visual style variant.
+     * @default "default"
+     */
+    variant?: BubbleVariant;
+    /**
+     * Inline alignment of the bubble within its row.
+     * @default "start"
+     */
+    align?: "start" | "end";
+    /**
+     * When set, `BubbleContent` renders as an anchor pointing at this URL
+     * instead of a plain `<div>`.
+     */
+    href?: string;
+    target?: string;
+    /**
+     * When true (and `href` is not set), `BubbleContent` renders as a
+     * `<button>` and clicking it fires `onClicked`.
+     */
+    clickable?: boolean;
+    /**
+     * Reactions row — a short list of emoji / short strings rendered
+     * overlapping the bottom (or top) edge of the bubble.
+     * For interactive reactions, use `reactionsCard` instead.
+     */
+    reactions?: string[];
+    /**
+     * Pihanga card reference rendered inside `BubbleReactions` instead of
+     * `reactions` — use for interactive reaction buttons.
+     */
+    reactionsCard?: PiCardRef;
+    /** Accessible label for the reactions row (e.g. "Reactions: thumbs up, fire, and 2 more"). */
+    reactionsAriaLabel?: string;
+    /**
+     * Side of the bubble the reactions row anchors to.
+     * @default "bottom"
+     */
+    reactionsSide?: "top" | "bottom";
+    /**
+     * Inline alignment of the reactions row.
+     * @default "end"
+     */
+    reactionsAlign?: "start" | "end";
+    /** Additional Tailwind classes applied to the root `Bubble` element. */
+    className?: string;
+    /** Additional Tailwind classes applied to `BubbleContent`. */
+    contentClassName?: string;
+    /** Additional Tailwind classes applied to `BubbleReactions`. */
+    reactionsClassName?: string;
+    /** Inline styles applied to the root `Bubble` element. */
+    style?: React.CSSProperties;
+};
+export declare const BUBBLE_GROUP_CARD = "shad/bubble-group";
+export declare const BubbleGroup: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<BubbleGroupProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type BubbleGroupProps = {
+    /** Ordered list of `shad/bubble` card refs to stack. */
+    content: PiCardRef[];
+    /** Additional Tailwind classes applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
+};

package/cards/bubble/bubble.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/bubble/bubble.types.ts
+var r = "shad/bubble", i = e(r), a = n(r, ["clicked"]), o = t(a.CLICKED), s = "shad/bubble-group", c = e(s);
+//#endregion
+export { a as BUBBLE_ACTION, r as BUBBLE_CARD, s as BUBBLE_GROUP_CARD, i as Bubble, c as BubbleGroup, o as onBubbleClicked };
+
+//# sourceMappingURL=bubble.types.js.map

package/cards/bubble/bubble.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubble.types.js","names":[],"sources":["../../../src/cards/bubble/bubble.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n  type PiCardRef,\n} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const BUBBLE_CARD = \"shad/bubble\";\n\nexport const Bubble = createCardDeclaration<BubbleProps, BubbleEvents>(\n  BUBBLE_CARD,\n);\n\nexport const BUBBLE_ACTION = registerActions(BUBBLE_CARD, [\"clicked\"]);\n\nexport type BubbleClickedEvent = {id?: string};\n\nexport const onBubbleClicked = createOnAction<BubbleClickedEvent>(\n  BUBBLE_ACTION.CLICKED,\n);\n\nexport type BubbleEvents = {\n  onClicked: BubbleClickedEvent;\n};\n\n/**\n * Bubble visual treatment — mirrors the shadcn `Bubble` `variant` prop.\n *\n * | Value           | Appearance                                          |\n * |-----------------|------------------------------------------------------|\n * | `\"default\"`     | Strong primary-coloured bubble.                     |\n * | `\"secondary\"`   | Secondary colour, filled.                           |\n * | `\"muted\"`       | Lower-emphasis muted background.                    |\n * | `\"tinted\"`      | Soft tint derived from the primary colour.          |\n * | `\"outline\"`     | Bordered, transparent background.                  |\n * | `\"ghost\"`       | Unframed — for assistant text, markdown, code, etc. |\n * | `\"destructive\"` | Red / error colour.                                 |\n */\nexport type BubbleVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"muted\"\n  | \"tinted\"\n  | \"outline\"\n  | \"ghost\"\n  | \"destructive\";\n\nexport type BubbleProps = {\n  id?: string; // optional id echoed in click events\n\n  /** Plain text rendered inside `BubbleContent`. Ignored if `contentCard` is set. */\n  text?: string;\n\n  /**\n   * Pihanga card reference rendered inside `BubbleContent` instead of `text`.\n   *\n   * Use this for \"large\" pieces of content — a `markdown-viewer` card, a\n   * `shad/data-table`, an image, or any other rich card. Combine with\n   * `variant: \"ghost\"` so the content is not framed and can use the full\n   * available width.\n   */\n  contentCard?: PiCardRef;\n\n  /**\n   * Visual style variant.\n   * @default \"default\"\n   */\n  variant?: BubbleVariant;\n\n  /**\n   * Inline alignment of the bubble within its row.\n   * @default \"start\"\n   */\n  align?: \"start\" | \"end\";\n\n  /**\n   * When set, `BubbleContent` renders as an anchor pointing at this URL\n   * instead of a plain `<div>`.\n   */\n  href?: string;\n  target?: string;\n\n  /**\n   * When true (and `href` is not set), `BubbleContent` renders as a\n   * `<button>` and clicking it fires `onClicked`.\n   */\n  clickable?: boolean;\n\n  /**\n   * Reactions row — a short list of emoji / short strings rendered\n   * overlapping the bottom (or top) edge of the bubble.\n   * For interactive reactions, use `reactionsCard` instead.\n   */\n  reactions?: string[];\n\n  /**\n   * Pihanga card reference rendered inside `BubbleReactions` instead of\n   * `reactions` — use for interactive reaction buttons.\n   */\n  reactionsCard?: PiCardRef;\n\n  /** Accessible label for the reactions row (e.g. \"Reactions: thumbs up, fire, and 2 more\"). */\n  reactionsAriaLabel?: string;\n\n  /**\n   * Side of the bubble the reactions row anchors to.\n   * @default \"bottom\"\n   */\n  reactionsSide?: \"top\" | \"bottom\";\n\n  /**\n   * Inline alignment of the reactions row.\n   * @default \"end\"\n   */\n  reactionsAlign?: \"start\" | \"end\";\n\n  /** Additional Tailwind classes applied to the root `Bubble` element. */\n  className?: string;\n  /** Additional Tailwind classes applied to `BubbleContent`. */\n  contentClassName?: string;\n  /** Additional Tailwind classes applied to `BubbleReactions`. */\n  reactionsClassName?: string;\n\n  /** Inline styles applied to the root `Bubble` element. */\n  style?: React.CSSProperties;\n};\n\n// ---------------------------------------------------------------------------\n// shad/bubble-group — group consecutive bubbles from the same sender.\n// ---------------------------------------------------------------------------\n\nexport const BUBBLE_GROUP_CARD = \"shad/bubble-group\";\n\nexport const BubbleGroup =\n  createCardDeclaration<BubbleGroupProps>(BUBBLE_GROUP_CARD);\n\nexport type BubbleGroupProps = {\n  /** Ordered list of `shad/bubble` card refs to stack. */\n  content: PiCardRef[];\n  /** Additional Tailwind classes applied to the root element. */\n  className?: string;\n  /** Inline styles applied to the root element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAQA,IAAa,IAAc,eAEd,IAAS,EACpB,CACF,GAEa,IAAgB,EAAgB,GAAa,CAAC,SAAS,CAAC,GAIxD,IAAkB,EAC7B,EAAc,OAChB,GAgHa,IAAoB,qBAEpB,IACX,EAAwC,CAAiB"}

package/cards/bubble/bubbleGroup.component.d.ts

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

package/cards/bubble/bubbleGroup.component.js

@@ -0,0 +1,21 @@
+import { BubbleGroup as e } from "../../components/ui/bubble.js";
+import "react";
+import { Card as t } from "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/bubble/bubbleGroup.component.tsx
+var r = (r) => {
+	let { content: i, className: a, style: o, cardName: s } = r;
+	return /* @__PURE__ */ n(e, {
+		className: a,
+		style: o,
+		"data-pihanga": s,
+		children: i.map((e, r) => /* @__PURE__ */ n(t, {
+			cardName: e,
+			parentCard: s
+		}, r))
+	});
+};
+//#endregion
+export { r as BubbleGroupComponent };
+
+//# sourceMappingURL=bubbleGroup.component.js.map

package/cards/bubble/bubbleGroup.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubbleGroup.component.js","names":[],"sources":["../../../src/cards/bubble/bubbleGroup.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {BubbleGroup} from \"@/components/ui/bubble\";\nimport type {BubbleGroupProps} from \"./bubble.types\";\n\nexport const BubbleGroupComponent = (\n  props: PiCardProps<BubbleGroupProps>,\n): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  return (\n    <BubbleGroup className={className} style={style} data-pihanga={cardName}>\n      {content.map((cn, i) => (\n        <Card cardName={cn} parentCard={cardName} key={i} />\n      ))}\n    </BubbleGroup>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY;CAE9C,OACE,kBAAC,GAAD;EAAwB;EAAkB;EAAO,gBAAc;YAC5D,EAAQ,KAAK,GAAI,MAChB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD;CACU,CAAA;AAEjB"}

package/cards/bubble/index.d.ts

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

package/cards/bubble/index.js

@@ -0,0 +1,16 @@
+import { BubbleComponent as e } from "./bubble.component.js";
+import { BubbleGroupComponent as t } from "./bubbleGroup.component.js";
+import { BUBBLE_ACTION as n, BUBBLE_CARD as r, BUBBLE_GROUP_CARD as i, Bubble as a, BubbleGroup as o, onBubbleClicked as s } from "./bubble.types.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+l({
+	name: r,
+	component: e,
+	events: c(n)
+}), l({
+	name: i,
+	component: t
+});
+//#endregion
+export { n as BUBBLE_ACTION, r as BUBBLE_CARD, i as BUBBLE_GROUP_CARD, a as Bubble, o as BubbleGroup, s as onBubbleClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/bubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/bubble/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {BubbleComponent} from \"./bubble.component\";\nimport {BubbleGroupComponent} from \"./bubbleGroup.component\";\nimport {BUBBLE_ACTION, BUBBLE_CARD, BUBBLE_GROUP_CARD} from \"./bubble.types\";\n\nexport * from \"./bubble.types\";\n\nregisterCardComponent({\n  name: BUBBLE_CARD,\n  component: BubbleComponent,\n  events: actionTypesToEvents(BUBBLE_ACTION),\n});\n\nregisterCardComponent({\n  name: BUBBLE_GROUP_CARD,\n  component: BubbleGroupComponent,\n});\n"],"mappings":";;;;AAQA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAa;AAC3C,CAAC,GAED,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}