@pihanga2/shadcn 0.2.1 → 0.2.3

package/AGENT.building-cards.md

@@ -1,13 +1,217 @@
 # AGENT.building-cards.md — creating new pihanga-shadcn cards
 
-> **Scope:** adding a new card *type* to `src/cards/` in this repository.
+> **Scope:** building new cards — either by composing existing cards into a
+> **meta card** (recommended, TypeScript-only) or by adding a brand-new
+> React-based primitive card to `src/cards/`.
 > Read [`AGENT.md`](./AGENT.md) first for orientation and universal rules.
 > If you only need to *use* existing cards in an app, switch to
 > [`AGENT.using-cards.md`](./AGENT.using-cards.md).
 
 ---
 
-## ⚠️ Hard constraints before you write a single line
+## ⭐ Meta cards — composing new widgets from existing cards
+
+> **This is the recommended approach for building any complex or reusable UI
+> widget.**  A meta card is assembled entirely from existing cards using a
+> plain TypeScript mapper function — no JSX, no React imports, no DOM
+> knowledge required.  Read this section before considering a primitive card.
+
+### Why meta cards?
+
+| Concern | Meta card | New primitive card (React component) |
+|---|---|---|
+| Code volume | ~50 lines TypeScript | ~200 lines JSX + hooks |
+| Maintenance | Inherits upstream card fixes automatically | Must track shadcn/Radix updates manually |
+| Reusability | Portable across any Pihanga app unchanged | Tightly coupled to one project |
+| Testability | Pure function — mock props, assert card tree | Requires DOM + Redux environment |
+| Extendibility | Swap any inner card without touching consumers | Requires internal refactoring |
+| Learning curve | Pihanga config patterns only | JSX, React hooks, Pihanga internals |
+
+**Rule of thumb:** if you can describe the widget as *"a layout card containing
+some input and display cards"*, build it as a meta card.  Only drop to a
+primitive React component when the widget genuinely needs a DOM API, a
+third-party React hook, or a non-card rendering strategy.
+
+### How meta cards work
+
+A meta card has three ingredients:
+
+1. **Card declaration + actions** — same as any card; use
+   `createCardDeclaration`, `registerActions`, `createOnAction`.
+2. **Mapper function** — a plain function `(name, props, registerCard) =>
+   PiCardDef` that assembles child cards and returns the root card definition.
+3. **Registration** — `registerMetaCard({type, mapper, events})`.
+
+The Pihanga runtime calls the mapper whenever the meta card needs to be
+rendered or re-evaluated.  Child cards can use `resolve(props.foo)` inside
+their own prop functions to lazily read a value that may itself be a state
+selector.
+
+### Full worked example — `Counter` meta card
+
+The complete, annotated source lives at
+[`example/src/counter.card.ts`](./example/src/counter.card.ts).
+Abbreviated for reference:
+
+```ts
+import {
+  createCardDeclaration, createOnAction, registerActions, registerMetaCard,
+} from "@pihanga2/core";
+import type {PiCardDef, PiMapProps, PiRegisterMetaCard, ReduxState, RegisterCardF} from "@pihanga2/core";
+import {Stack, Button, Typography} from "@pihanga2/shadcn";
+
+// ── 1. Card identity ─────────────────────────────────────────────────────────
+const COUNTER_CARD = "meta/counter";   // convention: "meta/<name>" for app-level
+
+// ── 2. Public factory (consumers call Counter({value: ...})) ────────────────
+export const Counter = createCardDeclaration<CounterProps, CounterEvents>(COUNTER_CARD);
+
+// ── 3. Actions + typed event helper ─────────────────────────────────────────
+export const COUNTER_ACTION = registerActions(COUNTER_CARD, ["changed"]);
+export const onCounterChanged = createOnAction<CounterChangeEvent>(COUNTER_ACTION.CHANGED);
+
+// ── 4. Types ─────────────────────────────────────────────────────────────────
+type CounterProps  = { value: number };
+type CounterChangeEvent = { value: number };
+type CounterEvents = { onChange: CounterChangeEvent };
+type CounterMapperProps = CounterProps & CounterEvents;
+
+// ── 5. Mapper — assembles child cards ────────────────────────────────────────
+function CounterMapper(
+  _: string,
+  props: PiMapProps<CounterMapperProps, ReduxState, object>,
+  registerCard: RegisterCardF,
+): PiCardDef {
+  // Register a child card under a stable name (optional but shown for reference)
+  const plusButton = registerCard("plus", Button({
+    label: "+",
+    opts: {size: "lg"},
+    // Re-map raw click → COUNTER_ACTION.CHANGED { value + 1 }
+    onClickedMapper: (_, {resolve}) => ({
+      type: COUNTER_ACTION.CHANGED,
+      value: resolve(props.value) + 1,   // resolve() unwraps lazy state selectors
+    }),
+  }));
+
+  return Stack({
+    direction: "row", alignItems: "center", spacing: 4,
+    className: "p-16 justify-center",
+    content: [
+      Button({
+        label: "−",
+        opts: {size: "lg"},
+        onClickedMapper: (_, {resolve}) => ({
+          type: COUNTER_ACTION.CHANGED,
+          value: resolve(props.value) - 1,
+        }),
+      }),
+      Typography({
+        text: (_, {resolve}) => `Count: ${resolve(props.value)}`,   // reactive text
+        level: "h2",
+        className: "min-w-[120px] text-center",
+      }),
+      plusButton,
+    ],
+  });
+}
+
+// ── 6. Register ───────────────────────────────────────────────────────────────
+registerMetaCard({
+  type: COUNTER_CARD,
+  mapper: CounterMapper,
+  events: COUNTER_ACTION,
+} satisfies PiRegisterMetaCard);
+```
+
+**Usage at the app level** (`example/src/app.pihanga.ts`):
+
+```ts
+import {Counter} from "./counter.card";
+import type {AppState} from "./app.state";
+
+registerCard("page", Counter<AppState>({
+  value: (s) => s.count,   // state selector — auto-reactive
+}));
+```
+
+**Handling the emitted event** (`example/src/app.reducer.ts`):
+
+```ts
+import {onCounterChanged} from "./counter.card";
+
+register((r) => {
+  onCounterChanged<AppState>(r, (state, {value}) => {
+    state.count = value;   // raw button clicks never surface here — encapsulated
+  });
+});
+```
+
+### Key API reference for meta cards
+
+| Symbol | Source | Purpose |
+|---|---|---|
+| `registerMetaCard(opts)` | `@pihanga2/core` | Registers a mapper as a named card type |
+| `PiRegisterMetaCard` | `@pihanga2/core` | Type for the `opts` object (use `satisfies`) |
+| `MetaCardMapperF` | `@pihanga2/core` | Type of the mapper function |
+| `RegisterCardF` | `@pihanga2/core` | Type of the `registerCard` arg inside the mapper |
+| `PiMapProps<Props, State, Ctx>` | `@pihanga2/core` | Prop type inside the mapper (each prop may be a state selector) |
+| `resolve(prop)` | `StateMapperContext` | Unwraps a lazy prop value inside a child card's prop function |
+| `onClickedMapper` / `on*Mapper` | any card | Event mapper suffix — re-maps a child card's action to a different action type |
+
+### Patterns to know
+
+**Lazy prop propagation with `resolve`**
+
+When a meta card receives `value: (s) => s.count` (a state selector), child
+cards can't use that selector directly — it has to be unwrapped at the time the
+child's own prop function runs:
+
+```ts
+// ❌ Doesn't work — selector is passed as-is; child sees a function, not a number
+Typography({ text: props.value })
+
+// ✅ Correct — resolve() unwraps the selector inside the child's prop function
+Typography({ text: (_, {resolve}) => `Count: ${resolve(props.value)}` })
+```
+
+**Event remapping with `onXxxMapper`**
+
+Every card that emits an event supports an `on<EventName>Mapper` prop.  The
+mapper intercepts the raw event and returns a different action (or `null` to
+suppress):
+
+```ts
+Button({
+  label: "Save",
+  // Re-map generic click → domain-specific action
+  onClickedMapper: (_ev, _ctx) => ({ type: MY_ACTION.SAVED }),
+})
+```
+
+**Registering a stable child card name**
+
+Pass the result of `registerCard(name, def)` as a child in the `content` array.
+This is optional but gives the child a stable registry identity:
+
+```ts
+const saveBtn = registerCard("save-btn", Button({label: "Save", …}));
+return Stack({ content: [saveBtn] });
+```
+
+**Accessing metacard context from a deeply nested child**
+
+Use `metaCtxtProps` in a child card's state mapper when you need the context
+props that were passed to the meta card's top-level card:
+
+```ts
+// Inside a child card declaration within the mapper:
+properties: (s, { metaCtxtProps }) => metaCtxtProps.elementData.properties,
+```
+
+---
+
+## ⚠️ Hard constraints before you write a single line (primitive cards)
+
 
 1. **`src/components/` is read-only.** It is managed exclusively by the shadcn
    CLI (`npx shadcn@latest add <name>`).  Never create or edit files there.
@@ -383,7 +587,8 @@ Rules:
 
 | Need | Card to study |
 |---|---|
-| Minimal card structure | `src/cards/emptyCard.tsx` |
+| **Meta card (composition)** | **`example/src/counter.card.ts`** — fully annotated: Stack + Button × 2 + Typography, event remapping, `resolve()`, stable child names |
+| Minimal primitive card structure | `src/cards/emptyCard.tsx` |
 | Button with variants, icons, tooltip | `src/cards/button/` |
 | Dropdown / context menu | `src/cards/dropDownMenu/` |
 | Form input pattern | `src/cards/textField/`, `src/cards/checkbox/` |

package/AGENT.md

@@ -32,7 +32,8 @@ https://github.com/ivcap-works/pihanga-shadcn
 |---|---|
 | **Getting started** — brand-new project, shadcn/ui + pihanga setup, file layout | [`AGENTS.getting-started.md`](./AGENTS.getting-started.md) |
 | **Using** existing cards — install, wire, compose, navigate | [`AGENT.using-cards.md`](./AGENT.using-cards.md) |
-| **Building** new cards — create a new card type for this repo | [`AGENT.building-cards.md`](./AGENT.building-cards.md) |
+| **Building complex UI** — assembling a reusable widget from existing cards | [`AGENT.building-cards.md`](./AGENT.building-cards.md) — § *Meta cards* |
+| **Building** a new primitive card from scratch — new React component for this repo | [`AGENT.building-cards.md`](./AGENT.building-cards.md) |
 
 If you are **starting from scratch**, read `AGENTS.getting-started.md` first — it
 covers Vite setup, shadcn/ui init, pihanga-core installation, and the initial file
@@ -41,8 +42,55 @@ layout.  Then continue with `AGENT.using-cards.md` for wiring and composing card
 If you are adding cards to an **existing project**, go straight to
 `AGENT.using-cards.md`.
 
-Switch to `AGENT.building-cards.md` only when you need to add a new card *type*
-to `src/cards/` itself.
+### ⭐ Need a complex, reusable UI widget?  Use a meta card.
+
+Before writing a new React component, ask: *can I build this by composing
+existing cards?*  If yes — and that is almost always the answer — use a
+**meta card** instead.
+
+A meta card is a TypeScript-only module (no JSX, no React imports) that
+assembles other cards inside a mapper function and registers itself with
+`registerMetaCard`.  The result looks and feels exactly like a primitive card to
+consumers: a typed factory function, typed event helpers, and full `memo()`/state
+reactivity.
+
+```ts
+// example/src/counter.card.ts (abbreviated)
+import {registerMetaCard, createCardDeclaration, registerActions} from "@pihanga2/core";
+import {Stack, Button, Typography} from "@pihanga2/shadcn";
+
+const COUNTER_CARD = "meta/counter";
+export const Counter = createCardDeclaration<CounterProps, CounterEvents>(COUNTER_CARD);
+export const COUNTER_ACTION = registerActions(COUNTER_CARD, ["changed"]);
+
+registerMetaCard({
+  type: COUNTER_CARD,
+  mapper(_name, props, registerCard) {
+    return Stack({ content: [
+      Button({ label: "−", onClickedMapper: (_, {resolve}) => ({type: COUNTER_ACTION.CHANGED, value: resolve(props.value) - 1}) }),
+      Typography({ text: (_, {resolve}) => `Count: ${resolve(props.value)}` }),
+      Button({ label: "+", onClickedMapper: (_, {resolve}) => ({type: COUNTER_ACTION.CHANGED, value: resolve(props.value) + 1}) }),
+    ]});
+  },
+  events: COUNTER_ACTION,
+});
+```
+
+**Why meta cards over new React components?**
+
+| Concern | Meta card | New React component |
+|---|---|---|
+| Code complexity | Low — pure TypeScript config | High — JSX, hooks, event wiring |
+| Maintenance | Inherits upstream fixes automatically | Must be kept in sync manually |
+| Reusability | Drops into any Pihanga app | Tightly coupled to one project |
+| Testability | Plain function, mockable | Requires DOM + Redux setup |
+| Extendibility | Swap out any inner card without touching consumers | Requires internal refactoring |
+
+See the full meta card guide in [`AGENT.building-cards.md`](./AGENT.building-cards.md#meta-cards--composing-new-widgets-from-existing-cards)
+and the complete working example at [`example/src/counter.card.ts`](./example/src/counter.card.ts).
+
+Switch to `AGENT.building-cards.md` — § *Building a primitive card from scratch* — only
+when no combination of existing cards can achieve the required UI.
 
 ---
 
@@ -55,3 +103,10 @@ to `src/cards/` itself.
   must ensure only one of them calls it.
 - **`children` is a reserved React prop** — never use it in a card's `…Props`
   type; use `content`, `contentCard`, or `items` instead.
+- **npm channel: add `lucide-react` to `optimizeDeps.include`** — excluding
+  `@pihanga2/shadcn` from Vite's pre-bundler (required to prevent duplicate
+  registries) also causes `lucide-react` to be served as raw ESM, triggering
+  ~1 000 individual icon file requests in the dev browser.  Adblockers block
+  `fingerprint.js` as a tracking script.  Always include `"lucide-react"` in
+  `optimizeDeps.include` (see `AGENTS.getting-started.md` Step 5).  Production
+  builds are unaffected — Rollup tree-shakes unused icons normally.

package/AGENT.using-cards.md

@@ -30,9 +30,16 @@
 > shadcn/ui and Radix UI updates, it won't appear in the playground
 > automatically, and it won't benefit from upstream bug fixes.
 >
-> **If no suitable card exists:**
-> - Confirm the need is genuine and not already covered by composing existing
->   cards (`Conditional`, `FlexGrid`, `Stack`, `Box`).
+> **⭐ If no single card covers your need but existing cards could be combined:**
+> Build a **meta card** — a TypeScript-only mapper that assembles existing cards
+> into a reusable, self-contained widget.  Meta cards require no JSX, no React
+> imports, and no DOM knowledge.  They are easier to maintain, extend, and test
+> than a bespoke React component.  See
+> [Meta cards — building complex UIs by composition](#meta-cards--building-complex-uis-by-composition)
+> below, or the full guide in
+> [`AGENT.building-cards.md`](./AGENT.building-cards.md#meta-cards--composing-new-widgets-from-existing-cards).
+>
+> **If no suitable card or card combination exists:**
 > - Unless the card would expose confidential business logic, please
 >   **open an issue** at
 >   `https://github.com/ivcap-works/pihanga-shadcn/issues` describing what you
@@ -424,6 +431,137 @@ registerCard("myApp/save", Button({
 
 ---
 
+## Meta cards — building complex UIs by composition
+
+> **⭐ This is the recommended approach whenever you need a reusable UI widget
+> that combines several existing cards.**  Prefer a meta card over writing a new
+> React component; meta cards are easier to maintain, extend, test, and port.
+
+A **meta card** is a TypeScript-only module that assembles existing primitive
+cards (or other meta cards) inside a mapper function.  No JSX, no React hooks,
+no DOM knowledge is required.
+
+### Decision guide
+
+```
+Do I need a complex, multi-widget UI?
+    │
+    ├─► Can I build it from existing cards? ──► YES ──► Write a META CARD  ⭐
+    │                                                     (registerMetaCard)
+    └─► NO — needs a DOM API / third-party React hook
+            └─► Only then: write a PRIMITIVE CARD
+                           (registerCardComponent + React component)
+```
+
+### Minimal meta card skeleton
+
+```ts
+// src/myWidget.card.ts
+import {
+  createCardDeclaration, createOnAction, registerActions, registerMetaCard,
+} from "@pihanga2/core";
+import type {PiCardDef, PiMapProps, PiRegisterMetaCard, ReduxState, RegisterCardF} from "@pihanga2/core";
+import {Stack, Button, Typography} from "@pihanga2/shadcn"; // use whatever cards you need
+
+// ── 1. Identity (use "meta/<name>" convention for app-local meta cards) ─────
+const MY_WIDGET_CARD = "meta/my-widget";
+
+// ── 2. Public factory ────────────────────────────────────────────────────────
+export const MyWidget = createCardDeclaration<MyWidgetProps, MyWidgetEvents>(MY_WIDGET_CARD);
+
+// ── 3. Actions ───────────────────────────────────────────────────────────────
+export const MY_WIDGET_ACTION = registerActions(MY_WIDGET_CARD, ["submitted"]);
+export const onMyWidgetSubmitted = createOnAction<MyWidgetSubmitEvent>(MY_WIDGET_ACTION.SUBMITTED);
+
+// ── 4. Types ─────────────────────────────────────────────────────────────────
+type MyWidgetProps  = { label: string; value: string };
+type MyWidgetSubmitEvent = { value: string };
+type MyWidgetEvents = { onSubmit: MyWidgetSubmitEvent };
+type MapperProps = MyWidgetProps & MyWidgetEvents;
+
+// ── 5. Mapper ────────────────────────────────────────────────────────────────
+function MyWidgetMapper(
+  _: string,
+  props: PiMapProps<MapperProps, ReduxState, object>,
+  _registerCard: RegisterCardF,
+): PiCardDef {
+  return Stack({
+    direction: "row",
+    content: [
+      Typography({ text: (_, {resolve}) => resolve(props.label) }),
+      Button({
+        label: "Submit",
+        onClickedMapper: (_, {resolve}) => ({
+          type: MY_WIDGET_ACTION.SUBMITTED,
+          value: resolve(props.value),
+        }),
+      }),
+    ],
+  });
+}
+
+// ── 6. Register ───────────────────────────────────────────────────────────────
+registerMetaCard({
+  type: MY_WIDGET_CARD,
+  mapper: MyWidgetMapper,
+  events: MY_WIDGET_ACTION,
+} satisfies PiRegisterMetaCard);
+```
+
+**Using the meta card in your app:**
+
+```ts
+// src/app.pihanga.ts
+import {MyWidget, onMyWidgetSubmitted} from "./myWidget.card";
+import type {AppState} from "./app.state";
+
+register((r) => {
+  onMyWidgetSubmitted<AppState>(r, (state, {value}) => {
+    state.submittedValue = value;
+  });
+});
+
+registerCard("app/myWidget", MyWidget<AppState>({
+  label: "Enter name",
+  value: (s) => s.currentValue,   // reactive — updates when state changes
+}));
+```
+
+### Key patterns
+
+**`resolve(props.foo)` — unwrap lazy state selectors in child props**
+
+A meta card prop may be a plain value *or* a state selector `(s) => s.foo`.
+Inside child card prop functions, always use `resolve()` to unwrap it:
+
+```ts
+// ✅ Correct
+Typography({ text: (_, {resolve}) => `Hello ${resolve(props.name)}` })
+
+// ❌ Wrong — child sees a function reference, not the resolved string
+Typography({ text: props.name })
+```
+
+**`onXxxMapper` — remap child events into domain actions**
+
+Every event-emitting card supports an `on<Event>Mapper` prop that intercepts
+the raw event and emits a different action (or `null` to suppress):
+
+```ts
+Button({
+  label: "Delete",
+  onClickedMapper: (_, {resolve}) => ({
+    type: MY_WIDGET_ACTION.SUBMITTED,
+    value: resolve(props.value),
+  }),
+})
+```
+
+**Full reference:** See [`AGENT.building-cards.md`](./AGENT.building-cards.md#meta-cards--composing-new-widgets-from-existing-cards)
+and the complete annotated example at [`example/src/counter.card.ts`](./example/src/counter.card.ts).
+
+---
+
 ## Version pinning
 
 Use a git tag in the URL to pin to a specific release:
@@ -992,7 +1130,7 @@ project that was bootstrapped without the reference `index.css`:
 Both fixes are now included in the reference `src/index.css` template in
 *Prerequisites step 3*.
 
-### 2026-06 agent evaluation — ViteJS app from scratch (BuhlOS-2)
+### 2026-06 agent evaluation — ViteJS app from scratch
 
 An agent built a new ViteJS + React + TypeScript app from scratch using
 `yarn create vite` and then manually copied pihanga-shadcn cards.  The

package/README.md

@@ -52,17 +52,6 @@ module.exports = {
 
 ## Usage
 
-### Register all core cards at once
-
-```ts
-import "@pihanga2/shadcn";
-```
-
-This imports `core-index.js`, which calls `registerCardComponent()` for every
-core card in the Pihanga runtime.
-
-### Register individual cards (tree-shakeable)
-
 Import only the cards your app uses — unused cards are eliminated by your bundler:
 
 ```ts
@@ -73,7 +62,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (30)
+## Included cards (33)
 
 - `badge`
 - `box`
@@ -84,6 +73,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `dialog`
 - `dropDownMenu`
 - `field`
+- `fileDrop`
 - `flexGrid`
 - `form`
 - `framework`
@@ -97,6 +87,8 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `pageWithNavbar`
 - `pasteTarget`
 - `select`
+- `slider`
+- `sliderValue`
 - `stack`
 - `stepper`
 - `switch`

package/cards/badge/badge.component.js

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

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

@@ -1 +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"}
+{"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/box/box.component.js

@@ -1,9 +1,9 @@
-import { Card as e } from "@pihanga2/core";
 import "react";
+import { Card as e } from "@pihanga2/core";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/box/box.component.tsx
 var r = (r) => {
-	let { content: i, className: a, style: o, cardName: s } = r, c = { ...o?.shad };
+	let { content: i, className: a, style: o, cardName: s } = r, c = { ...o };
 	r.height && (c.height = `${r.height}px`), r.width && (c.width = `${r.width}px`), r.marginTop && (c.marginTop = `${r.marginTop}px`), r.marginBottom && (c.marginBottom = `${r.marginBottom}px`), r.marginLeft && (c.marginLeft = `${r.marginLeft}px`), r.marginRight && (c.marginRight = `${r.marginRight}px`), r.paddingTop && (c.paddingTop = `${r.paddingTop}px`), r.paddingBottom && (c.paddingBottom = `${r.paddingBottom}px`), r.paddingLeft && (c.paddingLeft = `${r.paddingLeft}px`), r.paddingRight && (c.paddingRight = `${r.paddingRight}px`);
 	function l() {
 		return i ? i.map((n, r) => /* @__PURE__ */ t(e, {

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

@@ -1 +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  const sy: Record<string, string | number> = {\n    ...(style as {shad?: Record<string, string | number>} | undefined)?.shad,\n  };\n  if (props.height) sy.height = `${props.height}px`;\n  if (props.width) sy.width = `${props.width}px`;\n\n  if (props.marginTop) sy.marginTop = `${props.marginTop}px`;\n  if (props.marginBottom) sy.marginBottom = `${props.marginBottom}px`;\n  if (props.marginLeft) sy.marginLeft = `${props.marginLeft}px`;\n  if (props.marginRight) sy.marginRight = `${props.marginRight}px`;\n\n  if (props.paddingTop) sy.paddingTop = `${props.paddingTop}px`;\n  if (props.paddingBottom) sy.paddingBottom = `${props.paddingBottom}px`;\n  if (props.paddingLeft) sy.paddingLeft = `${props.paddingLeft}px`;\n  if (props.paddingRight) sy.paddingRight = `${props.paddingRight}px`;\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,GAExC,IAAsC,EAC1C,GAAI,GAAgE,KACtE;CAYA,AAXI,EAAM,WAAQ,EAAG,SAAS,GAAG,EAAM,OAAO,MAC1C,EAAM,UAAO,EAAG,QAAQ,GAAG,EAAM,MAAM,MAEvC,EAAM,cAAW,EAAG,YAAY,GAAG,EAAM,UAAU,MACnD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa,MAC5D,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MAEzD,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,kBAAe,EAAG,gBAAgB,GAAG,EAAM,cAAc,MAC/D,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MACzD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa;CAEhE,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"}
+{"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  const sy: Record<string, string | number> = {\n    ...(style as Record<string, string | number> | undefined),\n  };\n  if (props.height) sy.height = `${props.height}px`;\n  if (props.width) sy.width = `${props.width}px`;\n\n  if (props.marginTop) sy.marginTop = `${props.marginTop}px`;\n  if (props.marginBottom) sy.marginBottom = `${props.marginBottom}px`;\n  if (props.marginLeft) sy.marginLeft = `${props.marginLeft}px`;\n  if (props.marginRight) sy.marginRight = `${props.marginRight}px`;\n\n  if (props.paddingTop) sy.paddingTop = `${props.paddingTop}px`;\n  if (props.paddingBottom) sy.paddingBottom = `${props.paddingBottom}px`;\n  if (props.paddingLeft) sy.paddingLeft = `${props.paddingLeft}px`;\n  if (props.paddingRight) sy.paddingRight = `${props.paddingRight}px`;\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,GAExC,IAAsC,EAC1C,GAAI,EACN;CAYA,AAXI,EAAM,WAAQ,EAAG,SAAS,GAAG,EAAM,OAAO,MAC1C,EAAM,UAAO,EAAG,QAAQ,GAAG,EAAM,MAAM,MAEvC,EAAM,cAAW,EAAG,YAAY,GAAG,EAAM,UAAU,MACnD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa,MAC5D,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MAEzD,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,kBAAe,EAAG,gBAAgB,GAAG,EAAM,cAAc,MAC/D,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MACzD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa;CAEhE,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

@@ -1,5 +1,4 @@
 import { PiCardRef } from '@pihanga2/core';
-import { AlignItemsT } from '../types';
 export declare const BOX_CARD = "shad/box";
 /**
  * Responsive display grid breakpoints.
@@ -37,13 +36,6 @@ export type BoxProps<S = object> = {
     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 */

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

@@ -1 +1 @@
-{"version":3,"file":"box.types.js","names":[],"sources":["../../../src/cards/box/box.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\nimport { AlignItemsT } from \"../types\";\n\nexport const BOX_CARD = \"shad/box\";\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":";;AAGA,IAAa,IAAW,YA0EX,IAAM,EAAgC,CAAQ"}
+{"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 * 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  /** 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,YAkEX,IAAM,EAAgC,CAAQ"}

package/cards/button/button.component.js

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