@pihanga2/shadcn 0.1.0

package/README.md

@@ -0,0 +1,114 @@
+# @pihanga2/shadcn
+
+Pihanga core card components — built on [shadcn/ui](https://ui.shadcn.com) and
+[Radix UI](https://radix-ui.com).
+
+This is the traditional **npm package** distribution of the
+[pihanga-shadcn](https://github.com/ivcap-works/pihanga-shadcn) card library.
+
+A **copy-on-install shadcn registry** is also available for teams that prefer
+the shadcn workflow:
+```sh
+npx shadcn@latest add https://ivcap-works.github.io/pihanga-shadcn/r/button
+```
+
+---
+
+## Installation
+
+```sh
+npm install @pihanga2/shadcn
+```
+
+Install the required peer dependencies:
+```sh
+npm install react react-dom @pihanga2/core @pihanga2/cards
+```
+
+---
+
+## Tailwind CSS
+
+This package ships TypeScript source with Tailwind CSS utility classes.  Add
+the package to your Tailwind content glob so that utility classes are included
+in your generated CSS.
+
+**Tailwind v3** (`tailwind.config.js`):
+```js
+module.exports = {
+  content: [
+    // … your project files …
+    "./node_modules/@pihanga2/shadcn/dist-lib/**/*.{js,jsx,ts,tsx}",
+  ],
+};
+```
+
+**Tailwind v4** (`tailwind.css`):
+```css
+@source "../../node_modules/@pihanga2/shadcn/dist-lib";
+```
+
+---
+
+## Usage
+
+### Register all core cards at once
+
+```ts
+import "@pihanga2/shadcn";
+```
+
+This imports `core-index.js`, which calls `registerCardComponent()` for every
+core card in the Pihanga runtime.
+
+### Register individual cards (tree-shakeable)
+
+Import only the cards your app uses — unused cards are eliminated by your bundler:
+
+```ts
+import "@pihanga2/shadcn/cards/button";
+import "@pihanga2/shadcn/cards/dialog";
+import "@pihanga2/shadcn/cards/dataTable";
+```
+
+---
+
+## Included cards (30)
+
+- `badge`
+- `box`
+- `button`
+- `checkbox`
+- `conditional`
+- `dataTable`
+- `dialog`
+- `dropDownMenu`
+- `field`
+- `flexGrid`
+- `form`
+- `framework`
+- `input`
+- `list`
+- `loadingOverlay`
+- `loadingSkeleton`
+- `menu`
+- `modeToggle`
+- `navbarSearch`
+- `pageWithNavbar`
+- `pasteTarget`
+- `select`
+- `stack`
+- `stepper`
+- `switch`
+- `tabs`
+- `textField`
+- `toast`
+- `toggleGroup`
+- `typography`
+
+---
+
+## Source & registry
+
+- Repository: <https://github.com/ivcap-works/pihanga-shadcn>
+- shadcn registry: <https://ivcap-works.github.io/pihanga-shadcn/r>

package/cards/badge/badge.component.d.ts

@@ -0,0 +1,14 @@
+import { PiCardProps } from '@pihanga2/core';
+import { BadgeCardProps } from './badge.types';
+import * as React from "react";
+/**
+ * `shad/badge` card component.
+ *
+ * Renders a shadcn `<Badge>` element with a `label` and an optional `variant`.
+ * The variant vocabulary is intentionally identical to the `BadgeColumn.variants`
+ * map used by the `shad/data-table` card, so both can be driven from the same
+ * source-of-truth value:
+ *
+ *   "default" | "secondary" | "destructive" | "outline"
+ */
+export declare const BadgeComponent: (props: PiCardProps<BadgeCardProps>) => React.ReactNode;

package/cards/badge/badge.component.js

@@ -0,0 +1,18 @@
+import { Badge as e } from "../../components/ui/badge.js";
+import { cn as t } from "../../lib/utils.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/badge/badge.component.tsx
+var r = (r) => {
+	let { label: i, variant: a = "secondary", className: o, cardName: s } = r;
+	return /* @__PURE__ */ n(e, {
+		variant: a,
+		className: t(o),
+		"data-pihanga": s,
+		children: i
+	});
+};
+//#endregion
+export { r as BadgeComponent };
+
+//# sourceMappingURL=badge.component.js.map

package/cards/badge/badge.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.js","names":[],"sources":["../../../src/cards/badge/badge.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Badge} from \"@/components/ui/badge\";\nimport {cn} from \"@/lib/utils\";\nimport type {BadgeCardProps} from \"./badge.types\";\n\n/**\n * `shad/badge` card component.\n *\n * Renders a shadcn `<Badge>` element with a `label` and an optional `variant`.\n * The variant vocabulary is intentionally identical to the `BadgeColumn.variants`\n * map used by the `shad/data-table` card, so both can be driven from the same\n * source-of-truth value:\n *\n *   \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n */\nexport const BadgeComponent = (\n  props: PiCardProps<BadgeCardProps>,\n): React.ReactNode => {\n  const {label, variant = \"secondary\", className, cardName} = props;\n\n  return (\n    <Badge\n      variant={variant}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      {label}\n    </Badge>\n  );\n};\n"],"mappings":";;;;;AAgBA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,UAAO,aAAU,aAAa,cAAW,gBAAY;CAE5D,OACE,kBAAC,GAAD;EACW;EACT,WAAW,EAAG,CAAS;EACvB,gBAAc;YAEb;CACI,CAAA;AAEX"}

package/cards/badge/badge.types.d.ts

@@ -0,0 +1,37 @@
+export declare const BADGE_CARD = "shad/badge";
+/**
+ * Badge visual style variants — mirrors the shadcn `Badge` `variant` prop and
+ * the `variants` map used in the dataTable `BadgeColumn` type, so the same
+ * string values work in both contexts.
+ *
+ * | Value           | Appearance                               |
+ * |-----------------|------------------------------------------|
+ * | `"default"`     | Primary colour, filled                   |
+ * | `"secondary"`   | Muted/secondary colour, filled (default) |
+ * | `"destructive"` | Red / error colour, filled               |
+ * | `"outline"`     | Transparent background, border only      |
+ */
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
+export type BadgeCardProps = {
+    /** Text content rendered inside the badge */
+    label: string;
+    /**
+     * Visual style variant.  Matches the shadcn Badge variants and the
+     * `BadgeColumn.variants` map in `dataTable.types.ts`.
+     * @default "secondary"
+     */
+    variant?: BadgeVariant;
+    /** Additional Tailwind classes applied to the `<Badge>` element */
+    className?: string;
+};
+/**
+ * Factory function for declaring a `shad/badge` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {ShadBadge} from "@/cards/badge";
+ *
+ * registerCard("myApp/status", ShadBadge({label: "Active", variant: "default"}));
+ * ```
+ */
+export declare const ShadBadge: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<BadgeCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/badge/badge.types.js

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

package/cards/badge/badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.types.js","names":[],"sources":["../../../src/cards/badge/badge.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\n\nexport const BADGE_CARD = \"shad/badge\";\n\n/**\n * Badge visual style variants — mirrors the shadcn `Badge` `variant` prop and\n * the `variants` map used in the dataTable `BadgeColumn` type, so the same\n * string values work in both contexts.\n *\n * | Value           | Appearance                               |\n * |-----------------|------------------------------------------|\n * | `\"default\"`     | Primary colour, filled                   |\n * | `\"secondary\"`   | Muted/secondary colour, filled (default) |\n * | `\"destructive\"` | Red / error colour, filled               |\n * | `\"outline\"`     | Transparent background, border only      |\n */\nexport type BadgeVariant = \"default\" | \"secondary\" | \"destructive\" | \"outline\";\n\nexport type BadgeCardProps = {\n  /** Text content rendered inside the badge */\n  label: string;\n\n  /**\n   * Visual style variant.  Matches the shadcn Badge variants and the\n   * `BadgeColumn.variants` map in `dataTable.types.ts`.\n   * @default \"secondary\"\n   */\n  variant?: BadgeVariant;\n\n  /** Additional Tailwind classes applied to the `<Badge>` element */\n  className?: string;\n};\n\n/**\n * Factory function for declaring a `shad/badge` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {ShadBadge} from \"@/cards/badge\";\n *\n * registerCard(\"myApp/status\", ShadBadge({label: \"Active\", variant: \"default\"}));\n * ```\n */\nexport const ShadBadge = createCardDeclaration<BadgeCardProps>(BADGE_CARD);\n"],"mappings":";;AAEA,IAAa,IAAa,cAyCb,IAAY,EAAsC,CAAU"}

package/cards/badge/index.d.ts

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

package/cards/badge/index.js

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

package/cards/badge/index.js.map

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

package/cards/box/box.component.d.ts

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

package/cards/box/box.component.js

@@ -0,0 +1,24 @@
+import { Card as e } from "@pihanga2/core";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/cards/box/box.component.tsx
+var r = (r) => {
+	let { content: i, className: a, style: o, cardName: s } = r, c = {};
+	r.height && (c.height = `${r.height}px`), r.width && (c.height = `${r.width}px`), r.marginTop && (c["margin-top"] = `${r.marginTop}px`), r.marginBottom && (c["margin-bottom"] = `${r.marginBottom}px`), r.marginLeft && (c["margin-ledt"] = `${r.marginLeft}px`), r.marginRight && (c["margin-right"] = `${r.marginRight}px`), r.paddingTop && (c["padding-top"] = `${r.paddingTop}px`), r.paddingBottom && (c["padding-bottom"] = `${r.paddingBottom}px`), r.paddingLeft && (c["padding-ledt"] = `${r.paddingLeft}px`), r.paddingRight && (c["padding-right"] = `${r.paddingRight}px`), c = { ...o?.shad };
+	function l() {
+		return i ? i.map((n, r) => /* @__PURE__ */ t(e, {
+			cardName: n,
+			parentCard: s
+		}, r)) : null;
+	}
+	return /* @__PURE__ */ n("div", {
+		className: a,
+		style: c,
+		"data-pihanga": s,
+		children: [l(), r.children]
+	});
+};
+//#endregion
+export { r as BoxComponent };
+
+//# sourceMappingURL=box.component.js.map

package/cards/box/box.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.component.js","names":[],"sources":["../../../src/cards/box/box.component.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {BoxProps} from \"./box.types\";\n\nexport const BoxComponent = (props: PiCardProps<BoxProps>): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  let sy: Record<string, string | number> = {};\n  if (props.height) sy.height = `${props.height}px`;\n  if (props.width) sy.height = `${props.width}px`;\n\n  if (props.marginTop) sy[\"margin-top\"] = `${props.marginTop}px`;\n  if (props.marginBottom) sy[\"margin-bottom\"] = `${props.marginBottom}px`;\n  if (props.marginLeft) sy[\"margin-ledt\"] = `${props.marginLeft}px`;\n  if (props.marginRight) sy[\"margin-right\"] = `${props.marginRight}px`;\n\n  if (props.paddingTop) sy[\"padding-top\"] = `${props.paddingTop}px`;\n  if (props.paddingBottom) sy[\"padding-bottom\"] = `${props.paddingBottom}px`;\n  if (props.paddingLeft) sy[\"padding-ledt\"] = `${props.paddingLeft}px`;\n  if (props.paddingRight) sy[\"padding-right\"] = `${props.paddingRight}px`;\n\n  sy = {\n    ...(style as {shad?: Record<string, string | number>} | undefined)?.shad,\n  };\n\n  function renderContent() {\n    if (!content) return null;\n    return content.map((cn, i) => (\n      <Card cardName={cn} parentCard={cardName} key={i} />\n    ));\n  }\n\n  return (\n    <div className={className} style={sy} data-pihanga={cardName}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,KAAgB,MAAkD;CAC7E,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY,GAE1C,IAAsC,CAAC;CAc3C,AAbI,EAAM,WAAQ,EAAG,SAAS,GAAG,EAAM,OAAO,MAC1C,EAAM,UAAO,EAAG,SAAS,GAAG,EAAM,MAAM,MAExC,EAAM,cAAW,EAAG,gBAAgB,GAAG,EAAM,UAAU,MACvD,EAAM,iBAAc,EAAG,mBAAmB,GAAG,EAAM,aAAa,MAChE,EAAM,eAAY,EAAG,iBAAiB,GAAG,EAAM,WAAW,MAC1D,EAAM,gBAAa,EAAG,kBAAkB,GAAG,EAAM,YAAY,MAE7D,EAAM,eAAY,EAAG,iBAAiB,GAAG,EAAM,WAAW,MAC1D,EAAM,kBAAe,EAAG,oBAAoB,GAAG,EAAM,cAAc,MACnE,EAAM,gBAAa,EAAG,kBAAkB,GAAG,EAAM,YAAY,MAC7D,EAAM,iBAAc,EAAG,mBAAmB,GAAG,EAAM,aAAa,MAEpE,IAAK,EACH,GAAI,GAAgE,KACtE;CAEA,SAAS,IAAgB;EAEvB,OADK,IACE,EAAQ,KAAK,GAAI,MACtB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD,IAHoB;CAIvB;CAEA,OACE,kBAAC,OAAD;EAAgB;EAAW,OAAO;EAAI,gBAAc;YAApD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}

package/cards/box/box.types.d.ts

@@ -0,0 +1,71 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const BOX_CARD = "shad/box";
+/**
+ * CSS `align-items` values supported by the Box card.
+ */
+export type AlignItemsT = "normal" | "stretch" | "center" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "initial" | "inherit";
+/**
+ * Responsive display grid breakpoints.
+ *
+ * Each key maps to a CSS display value applied at that viewport width:
+ * - `xs`: < 640 px (default / mobile-first)
+ * - `sm`: ≥ 640 px
+ * - `md`: ≥ 768 px
+ * - `lg`: ≥ 1024 px
+ * - `xl`: ≥ 1280 px
+ * - `xxl`: ≥ 1536 px
+ */
+export type DisplayGridT = {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    xxl?: string;
+};
+export type BoxProps<S = object> = {
+    /** Child card refs rendered inside the box */
+    content?: PiCardRef[];
+    /** Override the root element type */
+    component?: React.ElementType;
+    /** Fixed height in pixels */
+    height?: number;
+    /** Fixed width in pixels */
+    width?: number;
+    marginTop?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    alignItems?: AlignItemsT;
+    /** Tailwind gap spacing units */
+    gap?: number;
+    /** Uniform padding in pixels */
+    padding?: number;
+    /** Responsive display grid breakpoints */
+    display?: DisplayGridT;
+    /** Card style object (use the `shad` key for Tailwind-compatible overrides) */
+    style?: S;
+    /** Additional Tailwind utility classes */
+    className?: string;
+};
+/**
+ * Factory function for declaring a `shad/box` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {Box} from "@/cards/box";
+ *
+ * registerCard("myApp/spacer", Box({height: 24}));
+ *
+ * registerCard("myApp/contentRegion", Box({
+ *   content:    ["myApp/card1", "myApp/card2"],
+ *   paddingTop: 16,
+ *   className:  "rounded-lg border bg-card",
+ * }));
+ * ```
+ */
+export declare const Box: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<BoxProps<object>, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/box/box.types.js

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

package/cards/box/box.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.types.js","names":[],"sources":["../../../src/cards/box/box.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const BOX_CARD = \"shad/box\";\n\n/**\n * CSS `align-items` values supported by the Box card.\n */\nexport type AlignItemsT =\n  | \"normal\"\n  | \"stretch\"\n  | \"center\"\n  | \"flex-start\"\n  | \"flex-end\"\n  | \"start\"\n  | \"end\"\n  | \"baseline\"\n  | \"initial\"\n  | \"inherit\";\n\n/**\n * Responsive display grid breakpoints.\n *\n * Each key maps to a CSS display value applied at that viewport width:\n * - `xs`: < 640 px (default / mobile-first)\n * - `sm`: ≥ 640 px\n * - `md`: ≥ 768 px\n * - `lg`: ≥ 1024 px\n * - `xl`: ≥ 1280 px\n * - `xxl`: ≥ 1536 px\n */\nexport type DisplayGridT = {\n  xs?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  xxl?: string;\n};\n\nexport type BoxProps<S = object> = {\n  /** Child card refs rendered inside the box */\n  content?: PiCardRef[];\n\n  /** Override the root element type */\n  component?: React.ElementType;\n\n  /** Fixed height in pixels */\n  height?: number;\n  /** Fixed width in pixels */\n  width?: number;\n\n  marginTop?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n  marginRight?: number;\n\n  paddingTop?: number;\n  paddingBottom?: number;\n  paddingLeft?: number;\n  paddingRight?: number;\n\n  alignItems?: AlignItemsT;\n  /** Tailwind gap spacing units */\n  gap?: number;\n  /** Uniform padding in pixels */\n  padding?: number;\n  /** Responsive display grid breakpoints */\n  display?: DisplayGridT;\n\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n  /** Additional Tailwind utility classes */\n  className?: string;\n};\n\n/**\n * Factory function for declaring a `shad/box` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Box} from \"@/cards/box\";\n *\n * registerCard(\"myApp/spacer\", Box({height: 24}));\n *\n * registerCard(\"myApp/contentRegion\", Box({\n *   content:    [\"myApp/card1\", \"myApp/card2\"],\n *   paddingTop: 16,\n *   className:  \"rounded-lg border bg-card\",\n * }));\n * ```\n */\nexport const Box = createCardDeclaration<BoxProps>(BOX_CARD);\n"],"mappings":";;AAEA,IAAa,IAAW,YAyFX,IAAM,EAAgC,CAAQ"}

package/cards/box/index.d.ts

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

package/cards/box/index.js

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

package/cards/box/index.js.map

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

package/cards/button/button.component.d.ts

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

package/cards/button/button.component.js

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

package/cards/button/button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.js","names":[],"sources":["../../../src/cards/button/button.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {Button, LinkButton} from \"@/registry/ui/button\";\nimport {Tooltip, TooltipContent, TooltipTrigger} from \"@/registry/ui/tooltip\";\nimport {getIcon} from \"@/cards/icons\";\nimport {useDropdownOpen} from \"@/cards/dropDownMenu/dropdown-context\";\n\nimport type {PiButtonEvents, PiButtonProps} from \"./button.types\";\n\nfunction resolveIconByName(name?: string): React.ReactNode {\n  if (!name) return null;\n  return getIcon(name);\n}\n\nexport const ButtonComponent = (\n  props: PiCardProps<PiButtonProps, PiButtonEvents>,\n): React.ReactNode => {\n  const {\n    opts,\n    ariaLabel,\n    label,\n    iconLabel,\n    contentCard: content,\n    href,\n    target,\n    tooltip,\n    tooltipCard,\n    tooltipMode,\n    tooltipPlacement,\n    className,\n    id,\n    onClicked,\n    cardName,\n    _cls,\n    active,\n    focused,\n    disabled,\n    loading,\n    isPending,\n  } = props;\n\n  // Check if this button is inside an open dropdown menu\n  const isInsideOpenDropdown = useDropdownOpen();\n\n  const beforeIcon = resolveIconByName(opts?.beforeIcon);\n  const afterIcon = resolveIconByName(opts?.afterIcon);\n\n  // Determine base content: iconLabel takes precedence, then contentCard, then label\n  const baseContent = iconLabel ? (\n    resolveIconByName(iconLabel)\n  ) : content ? (\n    <Card cardName={content} parentCard={cardName} />\n  ) : (\n    label\n  );\n\n  // Render icons as children following shadcn/ui pattern\n  const children = (\n    <>\n      {beforeIcon}\n      {baseContent}\n      {afterIcon}\n    </>\n  );\n\n  const common = {\n    active,\n    focused,\n    isMenu: opts?.isMenu,\n    truncate: opts?.truncate,\n    variant: opts?.variant,\n    size: opts?.size,\n\n    disabled,\n    loading,\n    isPending,\n    loadingClassName: opts?.loadingClassName,\n\n    className: `${_cls(\"root\")} ${className || \"\"}`.trim(),\n  };\n\n  const handleClick = () => {\n    onClicked({id});\n  };\n\n  const renderButton = () => {\n    if (href) {\n      return (\n        <LinkButton\n          {...common}\n          href={href}\n          target={target}\n          data-pihanga={cardName}\n          label={ariaLabel ?? label}\n          onClick={handleClick}\n        >\n          {children}\n        </LinkButton>\n      );\n    }\n\n    return (\n      <Button\n        {...common}\n        data-pihanga={cardName}\n        label={ariaLabel ?? label}\n        onClick={handleClick}\n      >\n        {children}\n      </Button>\n    );\n  };\n\n  if (!tooltip && !tooltipCard) return renderButton();\n\n  // Determine tooltip open state based on mode.\n  // If the button is inside an open dropdown, force the tooltip closed\n  // to avoid UI conflicts (dropdown menu should take precedence).\n  const tooltipOpen = isInsideOpenDropdown\n    ? false\n    : tooltipMode === \"open\"\n      ? true\n      : tooltipMode === \"closed\"\n        ? false\n        : undefined; // 'auto' or undefined = uncontrolled\n\n  // Render tooltip content: use tooltipCard if provided, otherwise use tooltip string\n  const tooltipContent = tooltipCard ? (\n    <Card cardName={tooltipCard} parentCard={cardName} />\n  ) : (\n    <p data-pihanga={`${cardName}-tooltip`}>{tooltip}</p>\n  );\n\n  return (\n    <Tooltip open={tooltipOpen}>\n      <TooltipTrigger asChild>{renderButton()}</TooltipTrigger>\n      <TooltipContent side={tooltipPlacement}>{tooltipContent}</TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,SAAS,EAAkB,GAAgC;CAEzD,OADK,IACE,EAAQ,CAAI,IADD;AAEpB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,UACA,cACA,aAAa,GACb,SACA,WACA,YACA,gBACA,gBACA,qBACA,cACA,OACA,cACA,aACA,SACA,WACA,YACA,aACA,YACA,iBACE,GAGE,IAAuB,EAAgB,GAEvC,IAAa,EAAkB,GAAM,UAAU,GAC/C,IAAY,EAAkB,GAAM,SAAS,GAY7C,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EAXe,IAClB,EAAkB,CAAS,IACzB,IACF,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA,IAEhD;EAQG;CACD,EAAA,CAAA,GAGE,IAAS;EACb;EACA;EACA,QAAQ,GAAM;EACd,UAAU,GAAM;EAChB,SAAS,GAAM;EACf,MAAM,GAAM;EAEZ;EACA;EACA;EACA,kBAAkB,GAAM;EAExB,WAAW,GAAG,EAAK,MAAM,EAAE,GAAG,KAAa,KAAK,KAAK;CACvD,GAEM,UAAoB;EACxB,EAAU,EAAC,MAAE,CAAC;CAChB,GAEM,UACA,IAEA,kBAAC,GAAD;EACE,GAAI;EACE;EACE;EACR,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACS,CAAA,IAKd,kBAAC,GAAD;EACE,GAAI;EACJ,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACK,CAAA;CAIZ,IAAI,CAAC,KAAW,CAAC,GAAa,OAAO,EAAa;CAKlD,IAAM,IAAc,IAChB,KACA,MAAgB,SACd,KACA,MAAgB,WACd,KACA,KAAA,GAGF,IAAiB,IACrB,kBAAC,GAAD;EAAM,UAAU;EAAa,YAAY;CAAW,CAAA,IAEpD,kBAAC,KAAD;EAAG,gBAAc,GAAG,EAAS;YAAY;CAAW,CAAA;CAGtD,OACE,kBAAC,GAAD;EAAS,MAAM;YAAf,CACE,kBAAC,GAAD;GAAgB,SAAA;aAAS,EAAa;EAAkB,CAAA,GACxD,kBAAC,GAAD;GAAgB,MAAM;aAAmB;EAA+B,CAAA,CACjE;;AAEb"}

package/cards/button/button.types.d.ts

@@ -0,0 +1,106 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_BUTTON_CARD = "pi/button";
+export declare const Button: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiButtonProps, S, PiButtonEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_BUTTON_ACTION: {
+    CLICKED: string;
+};
+export declare const onPiButtonClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiButtonClickedEvent>) => void;
+/**
+ * Declarative "opts" subset based on `src/registry/ui/button.tsx`.
+ *
+ * Notes:
+ * - Any icon is referenced by name and resolved via `src/pihanga/icons.ts`.
+ * - `children` are provided via `label` (simple) or `content` (card ref).
+ */
+export type PiButtonOpts = {
+    /**
+     * Visual style variant of the button.
+     * Determines the button's appearance (colors, borders, etc.).
+     */
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "ghost2" | "ghost3" | "ghostActive" | "brand" | "nav" | "navAction" | "menuAction" | "blockAction" | "blockActionSecondary" | "primaryOutline" | "radio" | "none";
+    /**
+     * Size of the button.
+     * Controls padding, font size, and overall dimensions.
+     */
+    size?: "default" | "xs" | "sm" | "md" | "lg" | "icon" | "iconSm" | "navAction" | "menuAction" | "blockAction" | "none";
+    /** Truncate button content with ellipsis if it overflows. */
+    truncate?: boolean;
+    /** If true, button is rendered as a menu trigger button. */
+    isMenu?: boolean;
+    /** Custom CSS class to apply to the loading spinner/indicator. */
+    loadingClassName?: string;
+    /** Icon to display before the button content. Set 'size' to 'icon' if ONLY show icon */
+    beforeIcon?: string;
+    /** Icon to display after the button content */
+    afterIcon?: string;
+};
+export type PiButtonProps = {
+    id?: string;
+    /**
+     * Optional explicit aria-label.
+     *
+     * Useful for icon-only / letter-only buttons where the visible content
+     * shouldn't be used as the accessible name.
+     */
+    ariaLabel?: string;
+    /**
+     * Declarative options; maps closely to `@/registry/ui/button`.
+     */
+    opts?: PiButtonOpts;
+    /** Simple label; used as children and aria-label fallback. */
+    label?: string;
+    /**
+     * Icon name to use as the main button content (instead of text label).
+     * Resolved via `src/pihanga/icons.ts`.
+     * Takes precedence over `label` and `contentCard`.
+     */
+    iconLabel?: string;
+    /**
+     * If set, renders this card as the content instead of `label`.
+     * (Useful for rich content.)
+     */
+    contentCard?: PiCardRef;
+    /** When provided, button will render as an anchor. */
+    href?: string;
+    target?: string;
+    tooltip?: string;
+    /**
+     * If set, renders this card as the tooltip content instead of `tooltip`.
+     * (Useful for rich tooltip content.)
+     */
+    tooltipCard?: PiCardRef;
+    /**
+     * Controls tooltip visibility mode.
+     * - 'auto' (default): Normal hover behavior
+     * - 'open': Force tooltip to be visible
+     * - 'closed': Force tooltip to be hidden
+     */
+    tooltipMode?: "auto" | "open" | "closed";
+    /**
+     * Controls tooltip placement/position.
+     * - 'top': Tooltip appears above the button (default)
+     * - 'right': Tooltip appears to the right of the button
+     * - 'bottom': Tooltip appears below the button
+     * - 'left': Tooltip appears to the left of the button
+     */
+    tooltipPlacement?: "top" | "right" | "bottom" | "left";
+    /** Indicates whether the button is in an active/selected state. */
+    active?: boolean;
+    /** Indicates whether the button has focus state styling applied. */
+    focused?: boolean;
+    /** If true, disables the button and prevents interaction. */
+    disabled?: boolean;
+    /** If true, shows loading state and typically disables interaction. */
+    loading?: boolean;
+    /** If true, indicates an async operation is pending (similar to loading but distinct). */
+    isPending?: boolean;
+    className?: string;
+};
+export type PiButtonClickedEvent = {
+    id?: string;
+};
+export type PiButtonEvents = {
+    onClicked: PiButtonClickedEvent;
+};

package/cards/button/button.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/button/button.types.ts
+var r = "pi/button", i = e(r), a = n(r, ["clicked"]), o = t(a.CLICKED);
+//#endregion
+export { i as Button, a as PI_BUTTON_ACTION, r as PI_BUTTON_CARD, o as onPiButtonClicked };
+
+//# sourceMappingURL=button.types.js.map

package/cards/button/button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.js","names":[],"sources":["../../../src/cards/button/button.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_BUTTON_CARD = \"pi/button\";\n\nexport const Button = createCardDeclaration<PiButtonProps, PiButtonEvents>(\n  PI_BUTTON_CARD,\n);\n\nexport const PI_BUTTON_ACTION = registerActions(PI_BUTTON_CARD, [\"clicked\"]);\n\nexport const onPiButtonClicked = createOnAction<PiButtonClickedEvent>(\n  PI_BUTTON_ACTION.CLICKED,\n);\n\n/**\n * Declarative \"opts\" subset based on `src/registry/ui/button.tsx`.\n *\n * Notes:\n * - Any icon is referenced by name and resolved via `src/pihanga/icons.ts`.\n * - `children` are provided via `label` (simple) or `content` (card ref).\n */\nexport type PiButtonOpts = {\n  /**\n   * Visual style variant of the button.\n   * Determines the button's appearance (colors, borders, etc.).\n   */\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"ghost2\"\n    | \"ghost3\"\n    | \"ghostActive\"\n    | \"brand\"\n    | \"nav\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"blockActionSecondary\"\n    | \"primaryOutline\"\n    | \"radio\"\n    | \"none\";\n\n  /**\n   * Size of the button.\n   * Controls padding, font size, and overall dimensions.\n   */\n  size?:\n    | \"default\"\n    | \"xs\"\n    | \"sm\"\n    | \"md\"\n    | \"lg\"\n    | \"icon\"\n    | \"iconSm\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"none\";\n\n  /** Truncate button content with ellipsis if it overflows. */\n  truncate?: boolean;\n\n  /** If true, button is rendered as a menu trigger button. */\n  isMenu?: boolean;\n\n  /** Custom CSS class to apply to the loading spinner/indicator. */\n  loadingClassName?: string;\n\n  /** Icon to display before the button content. Set 'size' to 'icon' if ONLY show icon */\n  beforeIcon?: string;\n\n  /** Icon to display after the button content */\n  afterIcon?: string;\n};\n\nexport type PiButtonProps = {\n  id?: string; // optional 'id' to be added to events\n\n  /**\n   * Optional explicit aria-label.\n   *\n   * Useful for icon-only / letter-only buttons where the visible content\n   * shouldn't be used as the accessible name.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Declarative options; maps closely to `@/registry/ui/button`.\n   */\n  opts?: PiButtonOpts;\n\n  /** Simple label; used as children and aria-label fallback. */\n  label?: string;\n\n  /**\n   * Icon name to use as the main button content (instead of text label).\n   * Resolved via `src/pihanga/icons.ts`.\n   * Takes precedence over `label` and `contentCard`.\n   */\n  iconLabel?: string;\n\n  /**\n   * If set, renders this card as the content instead of `label`.\n   * (Useful for rich content.)\n   */\n  contentCard?: PiCardRef;\n\n  /** When provided, button will render as an anchor. */\n  href?: string;\n  target?: string;\n\n  tooltip?: string;\n\n  /**\n   * If set, renders this card as the tooltip content instead of `tooltip`.\n   * (Useful for rich tooltip content.)\n   */\n  tooltipCard?: PiCardRef;\n\n  /**\n   * Controls tooltip visibility mode.\n   * - 'auto' (default): Normal hover behavior\n   * - 'open': Force tooltip to be visible\n   * - 'closed': Force tooltip to be hidden\n   */\n  tooltipMode?: \"auto\" | \"open\" | \"closed\";\n\n  /**\n   * Controls tooltip placement/position.\n   * - 'top': Tooltip appears above the button (default)\n   * - 'right': Tooltip appears to the right of the button\n   * - 'bottom': Tooltip appears below the button\n   * - 'left': Tooltip appears to the left of the button\n   */\n  tooltipPlacement?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /** Indicates whether the button is in an active/selected state. */\n  active?: boolean;\n\n  /** Indicates whether the button has focus state styling applied. */\n  focused?: boolean;\n\n  /** If true, disables the button and prevents interaction. */\n  disabled?: boolean;\n\n  /** If true, shows loading state and typically disables interaction. */\n  loading?: boolean;\n\n  /** If true, indicates an async operation is pending (similar to loading but distinct). */\n  isPending?: boolean;\n\n  className?: string;\n};\n\nexport type PiButtonClickedEvent = {\n  id?: string;\n};\n\nexport type PiButtonEvents = {\n  onClicked: PiButtonClickedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAAC,SAAS,CAAC,GAE9D,IAAoB,EAC/B,EAAiB,OACnB"}

package/cards/button/index.d.ts

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

package/cards/button/index.js

@@ -0,0 +1,13 @@
+import { ButtonComponent as e } from "./button.component.js";
+import { Button as t, PI_BUTTON_ACTION as n, PI_BUTTON_CARD as r, onPiButtonClicked as i } from "./button.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/button/index.ts
+o({
+	name: r,
+	component: e,
+	events: a(n)
+});
+//#endregion
+export { t as Button, n as PI_BUTTON_ACTION, r as PI_BUTTON_CARD, i as onPiButtonClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/button/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {ButtonComponent} from \"./button.component\";\nimport {PI_BUTTON_ACTION, PI_BUTTON_CARD} from \"./button.types\";\n\nexport * from \"./button.types\";\n\n// Optional convenience alias (mirrors older pattern like SdDropDownMenu)\n// export const SdButton = createCardDeclaration<PiButtonProps, PiButtonEvents>(\n//   PI_BUTTON_CARD,\n// );\n\nregisterCardComponent({\n  name: PI_BUTTON_CARD,\n  component: ButtonComponent,\n  events: actionTypesToEvents(PI_BUTTON_ACTION),\n});\n"],"mappings":";;;;AAYA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAgB;AAC9C,CAAC"}

package/cards/checkbox/checkbox.component.d.ts

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