@pihanga2/shadcn 0.2.6 → 0.2.8

package/AGENT.building-cards.md

@@ -703,3 +703,121 @@ Rules:
 - `src/cards/BUILDING_CARDS_HOWTO.md` — human-oriented narrative version of this guide
 - `scripts/gen-card-dependencies.mjs` — dependency scanner
 - `scripts/gen-registry.mjs` — registry builder
+
+---
+
+## Theme-aware cards — working with CSS variables
+
+shadcn/ui components (and therefore pihanga-shadcn cards built on top of them)
+use **CSS custom properties** for all semantic colours, radii, and shadows.
+Understanding the token system is essential for cards that carry their own
+visual chrome (borders, backgrounds, elevation).
+
+### How the token system works
+
+`src/theme.css` (shipped as `@pihanga2/shadcn/theme.css`) defines three layers:
+
+| Layer | Purpose | Example |
+|---|---|---|
+| `:root { --card: oklch(...) }` | **Palette** — raw colour values | `--card`, `--border`, `--radius` |
+| `@theme inline { --color-card: var(--card) }` | **Tailwind mapping** — wires vars to utility classes | `bg-card`, `border-border`, `rounded-xl` |
+| `.dark { --card: oklch(...) }` | **Dark-mode overrides** | Same tokens, different values |
+
+A consumer who overrides `:root { --card: oklch(0.9 0 0); }` in their own CSS
+automatically rethemes every card that uses `bg-card` — no card code changes
+needed.
+
+### Using theme tokens in a new card
+
+**Prefer shadcn semantic tokens over hardcoded colours.** This makes the card
+rethemable by the consumer:
+
+```tsx
+// ✅ Rethemable — uses CSS variable tokens
+<div className="bg-card text-card-foreground border border-border rounded-xl shadow-sm">
+
+// ❌ Hard-wired — ignores consumer theme
+<div className="bg-white text-gray-900 border border-gray-200 rounded-xl shadow-sm">
+```
+
+Standard shadcn tokens available as Tailwind utilities:
+
+| Tailwind class | CSS variable | Default (light) |
+|---|---|---|
+| `bg-card` | `--card` | white |
+| `text-card-foreground` | `--card-foreground` | near-black |
+| `bg-background` | `--background` | white |
+| `text-foreground` | `--foreground` | near-black |
+| `bg-muted` | `--muted` | light gray |
+| `text-muted-foreground` | `--muted-foreground` | medium gray |
+| `bg-primary` | `--primary` | dark |
+| `text-primary-foreground` | `--primary-foreground` | near-white |
+| `border-border` | `--border` | light gray |
+| `rounded-xl` | `--radius-xl` = `--radius + 4px` | ~14px |
+| `rounded-lg` | `--radius-lg` = `--radius` | 10px |
+| `shadow-sm` | Tailwind built-in | subtle shadow |
+
+### Adding a new theme token for a card
+
+When a card needs a design token consumers can override (e.g. a brand-specific
+colour or radius), add it to **`src/theme.css`** following the same pattern:
+
+```css
+/* In src/theme.css — @theme inline block */
+@theme inline {
+  /* … existing tokens … */
+  --color-my-card-accent: var(--my-card-accent);
+}
+
+/* default in :root */
+:root {
+  --my-card-accent: oklch(0.5 0.2 260);   /* a blue */
+}
+```
+
+Then use `bg-my-card-accent` / `text-my-card-accent` in your component.
+Consumers override by setting `--my-card-accent` in their own `:root`.
+
+> **Do not** add tokens that are only useful for a single card to the global
+> `theme.css`.  For card-local defaults, prefer explicit Tailwind colour classes
+> or a `className` prop.
+
+### The `@container` gotcha with shadcn composites
+
+shadcn's `<CardHeader>` applies `@container/card-header`
+(`container-type: inline-size`).  CSS containment makes the element's
+intrinsic inline size appear as **0** to its parent for `min-width` / `max-content`
+calculations — your card will collapse to a tiny width if it relies on `min-w-max`.
+
+**Fix:** replace `<CardHeader>` with a plain `<div data-slot="card-header">` that
+carries the same Tailwind classes but without the `@container` prefix:
+
+```tsx
+// ❌ @container breaks min-w-max on the parent Card
+<CardHeader className={headerClassName}>
+
+// ✅ Same visual styles, no CSS containment
+<div
+  data-slot="card-header"
+  className={cn(
+    "grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6",
+    "has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+    headerClassName,
+  )}
+>
+```
+
+This is safe because the `has-data-[slot=card-action]` selector is a CSS `:has()`
+rule, not a container query — it doesn't require `@container` to function.
+
+### Consumer setup (reminder)
+
+Cards in this library render correctly only when the consuming app's CSS
+includes `@import "@pihanga2/shadcn/theme.css"`.  That single import:
+
+1. Defines the CSS custom property palette (`:root`, `.dark`)
+2. Maps them to Tailwind v4 utility tokens (`@theme inline`)
+3. Tells Tailwind to scan the library's compiled files (`@source "."`)
+
+Apps that already use shadcn/ui with their own theme setup do not need the
+import — their `:root` variables cascade over the defaults.

package/README.md

@@ -62,13 +62,14 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (39)
+## Included cards (41)
 
 - `avatar`
 - `badge`
 - `box`
 - `button`
 - `checkbox`
+- `collapsibleCard`
 - `conditional`
 - `dataTable`
 - `dialog`
@@ -79,6 +80,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `flexGrid`
 - `form`
 - `framework`
+- `infoCard`
 - `input`
 - `jsonViewer`
 - `list`

package/cards/collapsibleCard/collapsibleCard.component.d.ts

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

package/cards/collapsibleCard/collapsibleCard.component.js

@@ -0,0 +1,61 @@
+import { getIcon as e } from "../icons.js";
+import { cn as t } from "../../lib/utils.js";
+import * as n from "react";
+import { Card as r } from "@pihanga2/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-collapsible";
+import { ChevronsUpDown as s } from "lucide-react";
+//#region src/cards/collapsibleCard/collapsibleCard.component.tsx
+var c = {
+	h1: "scroll-m-20 text-4xl font-extrabold tracking-tight",
+	h2: "scroll-m-20 text-3xl font-semibold tracking-tight",
+	h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+	h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+	p: "leading-7",
+	lead: "text-xl text-muted-foreground",
+	large: "text-lg font-semibold",
+	small: "text-sm font-medium leading-none",
+	muted: "text-sm text-muted-foreground"
+}, l = (l) => {
+	let { title: u, titleLevel: d = "h4", titleCard: f, icon: p, contentCard: m, defaultOpen: h = !1, open: g, onOpenChanged: _, className: v, headerClassName: y, contentClassName: b, style: x, cardName: S } = l, [C, w] = n.useState(h), T = g === void 0 ? C : g;
+	function E(e) {
+		w(e), _?.({ open: e });
+	}
+	let D = p ? e(p) : /* @__PURE__ */ i(s, { className: "h-4 w-4" });
+	return /* @__PURE__ */ a(o.Root, {
+		open: T,
+		onOpenChange: E,
+		className: t("w-full", v),
+		style: x,
+		"data-pihanga": S,
+		children: [/* @__PURE__ */ a("div", {
+			className: t("flex items-center justify-between space-x-4 py-2", y),
+			children: [f ? /* @__PURE__ */ i(r, {
+				cardName: f,
+				parentCard: S
+			}) : /* @__PURE__ */ i("span", {
+				className: c[d],
+				children: u
+			}), /* @__PURE__ */ i(o.Trigger, {
+				asChild: !0,
+				children: /* @__PURE__ */ i("button", {
+					type: "button",
+					className: "shrink-0 rounded-sm p-1 transition-colors hover:bg-accent hover:text-accent-foreground",
+					"aria-expanded": T,
+					"aria-label": T ? "Collapse" : "Expand",
+					children: D
+				})
+			})]
+		}), /* @__PURE__ */ i(o.Content, {
+			className: t("overflow-hidden", b),
+			children: m && /* @__PURE__ */ i(r, {
+				cardName: m,
+				parentCard: S
+			})
+		})]
+	});
+};
+//#endregion
+export { l as CollapsibleCardComponent };
+
+//# sourceMappingURL=collapsibleCard.component.js.map

package/cards/collapsibleCard/collapsibleCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsibleCard.component.js","names":[],"sources":["../../../src/cards/collapsibleCard/collapsibleCard.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport {ChevronsUpDown} from \"lucide-react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {getIcon} from \"@/cards/icons\";\nimport type {\n  CollapsibleCardProps,\n  CollapsibleCardEvents,\n  CollapsibleTitleLevel,\n} from \"./collapsibleCard.types\";\n\nconst TITLE_CLASSES: Record<CollapsibleTitleLevel, string> = {\n  h1: \"scroll-m-20 text-4xl font-extrabold tracking-tight\",\n  h2: \"scroll-m-20 text-3xl font-semibold tracking-tight\",\n  h3: \"scroll-m-20 text-2xl font-semibold tracking-tight\",\n  h4: \"scroll-m-20 text-xl font-semibold tracking-tight\",\n  p: \"leading-7\",\n  lead: \"text-xl text-muted-foreground\",\n  large: \"text-lg font-semibold\",\n  small: \"text-sm font-medium leading-none\",\n  muted: \"text-sm text-muted-foreground\",\n};\n\nexport const CollapsibleCardComponent = (\n  props: PiCardProps<CollapsibleCardProps, CollapsibleCardEvents>,\n): React.ReactNode => {\n  const {\n    title,\n    titleLevel = \"h4\",\n    titleCard,\n    icon,\n    contentCard,\n    defaultOpen = false,\n    open,\n    onOpenChanged,\n    className,\n    headerClassName,\n    contentClassName,\n    style,\n    cardName,\n  } = props;\n\n  const [localOpen, setLocalOpen] = React.useState(defaultOpen);\n  const openState = open !== undefined ? open : localOpen;\n\n  function handleOpenChange(next: boolean): void {\n    setLocalOpen(next);\n    onOpenChanged?.({open: next});\n  }\n\n  const triggerIcon = icon ? (\n    getIcon(icon)\n  ) : (\n    <ChevronsUpDown className=\"h-4 w-4\" />\n  );\n\n  return (\n    <CollapsiblePrimitive.Root\n      open={openState}\n      onOpenChange={handleOpenChange}\n      className={cn(\"w-full\", className)}\n      style={style}\n      data-pihanga={cardName}\n    >\n      <div\n        className={cn(\n          \"flex items-center justify-between space-x-4 py-2\",\n          headerClassName,\n        )}\n      >\n        {titleCard ? (\n          <Card cardName={titleCard} parentCard={cardName} />\n        ) : (\n          <span className={TITLE_CLASSES[titleLevel]}>{title}</span>\n        )}\n        <CollapsiblePrimitive.Trigger asChild>\n          <button\n            type=\"button\"\n            className=\"shrink-0 rounded-sm p-1 transition-colors hover:bg-accent hover:text-accent-foreground\"\n            aria-expanded={openState}\n            aria-label={openState ? \"Collapse\" : \"Expand\"}\n          >\n            {triggerIcon}\n          </button>\n        </CollapsiblePrimitive.Trigger>\n      </div>\n      <CollapsiblePrimitive.Content\n        className={cn(\"overflow-hidden\", contentClassName)}\n      >\n        {contentCard && <Card cardName={contentCard} parentCard={cardName} />}\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,IAAM,IAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,GAAG;CACH,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO;AACT,GAEa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,gBAAa,MACb,cACA,SACA,gBACA,iBAAc,IACd,SACA,kBACA,cACA,oBACA,qBACA,UACA,gBACE,GAEE,CAAC,GAAW,KAAgB,EAAM,SAAS,CAAW,GACtD,IAAY,MAAS,KAAA,IAAmB,IAAP;CAEvC,SAAS,EAAiB,GAAqB;EAE7C,AADA,EAAa,CAAI,GACjB,IAAgB,EAAC,MAAM,EAAI,CAAC;CAC9B;CAEA,IAAM,IAAc,IAClB,EAAQ,CAAI,IAEZ,kBAAC,GAAD,EAAgB,WAAU,UAAW,CAAA;CAGvC,OACE,kBAAC,EAAqB,MAAtB;EACE,MAAM;EACN,cAAc;EACd,WAAW,EAAG,UAAU,CAAS;EAC1B;EACP,gBAAc;YALhB,CAOE,kBAAC,OAAD;GACE,WAAW,EACT,oDACA,CACF;aAJF,CAMG,IACC,kBAAC,GAAD;IAAM,UAAU;IAAW,YAAY;GAAW,CAAA,IAElD,kBAAC,QAAD;IAAM,WAAW,EAAc;cAAc;GAAY,CAAA,GAE3D,kBAAC,EAAqB,SAAtB;IAA8B,SAAA;cAC5B,kBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,iBAAe;KACf,cAAY,IAAY,aAAa;eAEpC;IACK,CAAA;GACoB,CAAA,CAC3B;MACL,kBAAC,EAAqB,SAAtB;GACE,WAAW,EAAG,mBAAmB,CAAgB;aAEhD,KAAe,kBAAC,GAAD;IAAM,UAAU;IAAa,YAAY;GAAW,CAAA;EACxC,CAAA,CACL;;AAE/B"}

package/cards/collapsibleCard/collapsibleCard.types.d.ts

@@ -0,0 +1,91 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const COLLAPSIBLE_CARD = "shad/collapsible";
+export declare const COLLAPSIBLE_CARD_ACTION: {
+    OPENCHANGED: string;
+};
+export type CollapsibleCardOpenChangedEvent = {
+    open: boolean;
+};
+export declare const onCollapsibleCardOpenChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & CollapsibleCardOpenChangedEvent>) => void;
+export type CollapsibleCardEvents = {
+    onOpenChanged: CollapsibleCardOpenChangedEvent;
+};
+/**
+ * Subset of shadcn/ui typography levels supported for the built-in title slot.
+ */
+export type CollapsibleTitleLevel = "h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted";
+export type CollapsibleCardProps = {
+    /**
+     * Plain-text title rendered in the trigger row using the built-in
+     * Typography styles.  Use `titleCard` instead to supply a full Pihanga card.
+     */
+    title?: string;
+    /**
+     * Typography level applied to `title`.
+     * @default "h4"
+     */
+    titleLevel?: CollapsibleTitleLevel;
+    /**
+     * Alternative to `title` — any Pihanga card reference rendered as the
+     * header (e.g. a `shad/typography` or `shad/badge` card).
+     * When provided, `title` and `titleLevel` are ignored.
+     */
+    titleCard?: PiCardRef;
+    /**
+     * Icon name from the Pihanga icon registry, shown inside the toggle button.
+     * Falls back to the built-in `ChevronsUpDown` icon when omitted.
+     *
+     * @example
+     * import {registerIcon} from "@/cards/icons";
+     * import {ChevronDown} from "lucide-react";
+     * registerIcon("chevron-down", ChevronDown);
+     * CollapsibleCard({ icon: "chevron-down", ... });
+     */
+    icon?: string;
+    /**
+     * Pihanga card reference rendered inside the collapsible body.
+     */
+    contentCard?: PiCardRef;
+    /**
+     * Whether the panel is open on first render (uncontrolled mode).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state.  When provided, the component delegates all open
+     * state management to the consumer — update this via `onOpenChanged`.
+     */
+    open?: boolean;
+    /** CSS classes applied to the root `<div>`. */
+    className?: string;
+    /** CSS classes applied to the trigger row (title + toggle button). */
+    headerClassName?: string;
+    /** CSS classes applied to the collapsible content wrapper `<div>`. */
+    contentClassName?: string;
+    /** Inline styles on the root element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring a `shad/collapsible` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {CollapsibleCard} from "@/cards/collapsibleCard";
+ * import {Typography} from "@/cards/typography";
+ *
+ * registerCard("myApp/details", CollapsibleCard({
+ *   title: "Advanced options",
+ *   titleLevel: "h4",
+ *   contentCard: "myApp/detailsBody",
+ * }));
+ *
+ * registerCard("myApp/detailsBody", Typography({
+ *   text: "Hidden content revealed when expanded.",
+ *   level: "p",
+ * }));
+ * ```
+ */
+export declare const CollapsibleCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<CollapsibleCardProps, S, CollapsibleCardEvents>) => import('@pihanga2/core').PiCardDef;

package/cards/collapsibleCard/collapsibleCard.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/collapsibleCard/collapsibleCard.types.ts
+var r = "shad/collapsible", i = n(r, ["openChanged"]), a = t(i.OPENCHANGED), o = e(r);
+//#endregion
+export { r as COLLAPSIBLE_CARD, i as COLLAPSIBLE_CARD_ACTION, o as CollapsibleCard, a as onCollapsibleCardOpenChanged };
+
+//# sourceMappingURL=collapsibleCard.types.js.map

package/cards/collapsibleCard/collapsibleCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsibleCard.types.js","names":[],"sources":["../../../src/cards/collapsibleCard/collapsibleCard.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 COLLAPSIBLE_CARD = \"shad/collapsible\";\n\nexport const COLLAPSIBLE_CARD_ACTION = registerActions(COLLAPSIBLE_CARD, [\n  \"openChanged\",\n]);\n\nexport type CollapsibleCardOpenChangedEvent = {open: boolean};\n\nexport const onCollapsibleCardOpenChanged =\n  createOnAction<CollapsibleCardOpenChangedEvent>(\n    COLLAPSIBLE_CARD_ACTION.OPENCHANGED,\n  );\n\nexport type CollapsibleCardEvents = {\n  onOpenChanged: CollapsibleCardOpenChangedEvent;\n};\n\n/**\n * Subset of shadcn/ui typography levels supported for the built-in title slot.\n */\nexport type CollapsibleTitleLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"lead\"\n  | \"large\"\n  | \"small\"\n  | \"muted\";\n\nexport type CollapsibleCardProps = {\n  /**\n   * Plain-text title rendered in the trigger row using the built-in\n   * Typography styles.  Use `titleCard` instead to supply a full Pihanga card.\n   */\n  title?: string;\n\n  /**\n   * Typography level applied to `title`.\n   * @default \"h4\"\n   */\n  titleLevel?: CollapsibleTitleLevel;\n\n  /**\n   * Alternative to `title` — any Pihanga card reference rendered as the\n   * header (e.g. a `shad/typography` or `shad/badge` card).\n   * When provided, `title` and `titleLevel` are ignored.\n   */\n  titleCard?: PiCardRef;\n\n  /**\n   * Icon name from the Pihanga icon registry, shown inside the toggle button.\n   * Falls back to the built-in `ChevronsUpDown` icon when omitted.\n   *\n   * @example\n   * import {registerIcon} from \"@/cards/icons\";\n   * import {ChevronDown} from \"lucide-react\";\n   * registerIcon(\"chevron-down\", ChevronDown);\n   * CollapsibleCard({ icon: \"chevron-down\", ... });\n   */\n  icon?: string;\n\n  /**\n   * Pihanga card reference rendered inside the collapsible body.\n   */\n  contentCard?: PiCardRef;\n\n  /**\n   * Whether the panel is open on first render (uncontrolled mode).\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Controlled open state.  When provided, the component delegates all open\n   * state management to the consumer — update this via `onOpenChanged`.\n   */\n  open?: boolean;\n\n  /** CSS classes applied to the root `<div>`. */\n  className?: string;\n\n  /** CSS classes applied to the trigger row (title + toggle button). */\n  headerClassName?: string;\n\n  /** CSS classes applied to the collapsible content wrapper `<div>`. */\n  contentClassName?: string;\n\n  /** Inline styles on the root element. */\n  style?: React.CSSProperties;\n};\n\n/**\n * Factory function for declaring a `shad/collapsible` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {CollapsibleCard} from \"@/cards/collapsibleCard\";\n * import {Typography} from \"@/cards/typography\";\n *\n * registerCard(\"myApp/details\", CollapsibleCard({\n *   title: \"Advanced options\",\n *   titleLevel: \"h4\",\n *   contentCard: \"myApp/detailsBody\",\n * }));\n *\n * registerCard(\"myApp/detailsBody\", Typography({\n *   text: \"Hidden content revealed when expanded.\",\n *   level: \"p\",\n * }));\n * ```\n */\nexport const CollapsibleCard = createCardDeclaration<\n  CollapsibleCardProps,\n  CollapsibleCardEvents\n>(COLLAPSIBLE_CARD);\n"],"mappings":";;AAQA,IAAa,IAAmB,oBAEnB,IAA0B,EAAgB,GAAkB,CACvE,aACF,CAAC,GAIY,IACX,EACE,EAAwB,WAC1B,GAsGW,IAAkB,EAG7B,CAAgB"}

package/cards/collapsibleCard/index.d.ts

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

package/cards/collapsibleCard/index.js

@@ -0,0 +1,13 @@
+import { CollapsibleCardComponent as e } from "./collapsibleCard.component.js";
+import { COLLAPSIBLE_CARD as t, COLLAPSIBLE_CARD_ACTION as n, CollapsibleCard as r, onCollapsibleCardOpenChanged as i } from "./collapsibleCard.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/collapsibleCard/index.tsx
+o({
+	name: t,
+	component: e,
+	events: a(n)
+});
+//#endregion
+export { t as COLLAPSIBLE_CARD, n as COLLAPSIBLE_CARD_ACTION, r as CollapsibleCard, i as onCollapsibleCardOpenChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/collapsibleCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/collapsibleCard/index.tsx"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {CollapsibleCardComponent} from \"./collapsibleCard.component\";\nimport {\n  COLLAPSIBLE_CARD,\n  COLLAPSIBLE_CARD_ACTION,\n} from \"./collapsibleCard.types\";\n\nexport * from \"./collapsibleCard.types\";\n\nregisterCardComponent({\n  name: COLLAPSIBLE_CARD,\n  component: CollapsibleCardComponent,\n  events: actionTypesToEvents(COLLAPSIBLE_CARD_ACTION),\n});\n"],"mappings":";;;;AAUA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAuB;AACrD,CAAC"}

package/cards/collapsibleCard.d.ts

@@ -0,0 +1 @@
+export * from './collapsibleCard/index';

package/cards/emptyCard/emptyCard.component.d.ts

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

package/cards/emptyCard/emptyCard.types.d.ts

@@ -0,0 +1,36 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const EMPTY_CARD = "empty-card";
+export type EmptyCardProps = {
+    /**
+     * Icon name from the pihanga icon registry.
+     * When provided, renders an `EmptyMedia` slot with `variant="icon"`.
+     */
+    icon?: string;
+    /**
+     * Pihanga card reference rendered inside `EmptyContent`.
+     * Use this to show a call-to-action button, form, or any other card.
+     */
+    content?: PiCardRef;
+    /** Additional Tailwind / CSS classes forwarded to the root `Empty` element. */
+    className?: string;
+    /** Inline styles forwarded to the root `Empty` element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring an `empty-card` instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {EmptyCard} from "@/cards/emptyCard";
+ * import {Button} from "@/cards/button";
+ *
+ * registerCard("myApp/noResults", EmptyCard({
+ *   icon: "search",
+ *   content: "myApp/createButton",
+ * }));
+ *
+ * registerCard("myApp/createButton", Button({label: "Create new"}));
+ * ```
+ */
+export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/emptyCard/index.d.ts

@@ -1,7 +1 @@
-import { PiCardProps } from '@pihanga2/core';
-import * as React from "react";
-export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyProps, S, {}>) => import('@pihanga2/core').PiCardDef;
-export type EmptyProps = {
-    style?: React.CSSProperties;
-};
-export declare const EmptyComponent: (props: PiCardProps<EmptyProps>) => React.ReactNode;
+export * from './emptyCard.types';

package/cards/emptyCard.d.ts

@@ -1,7 +1 @@
-import { PiCardProps } from '@pihanga2/core';
-import * as React from "react";
-export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyProps, S, {}>) => import('@pihanga2/core').PiCardDef;
-export type EmptyProps = {
-    style?: React.CSSProperties;
-};
-export declare const EmptyComponent: (props: PiCardProps<EmptyProps>) => React.ReactNode;
+export * from './emptyCard/index';

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

@@ -1,9 +1,8 @@
-import { PiCardRef } from '@pihanga2/core';
 export declare const FLEX_GRID_CARD = "flex_grid";
 export declare const FlexGrid: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<FlexGridProps, S, {}>) => import('@pihanga2/core').PiCardDef;
 export type FlexGridProps = {
     cards: {
-        [name: string]: PiCardRef;
+        [name: string]: string;
     };
     template: TemplateT;
     height?: string;

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

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

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

@@ -1,5 +1,6 @@
 import { GraphinAfterLayoutContext, GraphinNodeEventContext } from './graphin.types';
 export type GraphinEventDispatcherProps = {
+    cardName: string;
     onNodeHovered?: (ctx: GraphinNodeEventContext) => void;
     onNodeHoverEnd?: (ctx: GraphinNodeEventContext) => void;
     onNodeClicked?: (ctx: GraphinNodeEventContext) => void;

package/cards/infoCard/index.d.ts

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

package/cards/infoCard/index.js

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

package/cards/infoCard/index.js.map

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

package/cards/infoCard/infoCard.component.d.ts

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

package/cards/infoCard/infoCard.component.js

@@ -0,0 +1,55 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t, CardAction as n, CardContent as r, CardDescription as i, CardFooter as a, CardTitle as o } from "../../components/ui/card.js";
+import "react";
+import { Card as s } from "@pihanga2/core";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/cards/infoCard/infoCard.component.tsx
+var u = (u) => {
+	let { title: d, description: f, actionCard: p, contentCard: m, footerCard: h, className: g, headerClassName: _, titleClassName: v, descriptionClassName: y, actionClassName: b, contentClassName: x, footerClassName: S, style: C, cardName: w } = u, T = d || f || p;
+	return /* @__PURE__ */ l(t, {
+		className: e("min-w-max", g),
+		style: C,
+		"data-pihanga": w,
+		children: [
+			T && /* @__PURE__ */ l("div", {
+				"data-slot": "card-header",
+				className: e("grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6", "has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", _),
+				children: [
+					d && /* @__PURE__ */ c(o, {
+						className: v,
+						children: d
+					}),
+					f && /* @__PURE__ */ c(i, {
+						className: y,
+						children: f
+					}),
+					p && /* @__PURE__ */ c(n, {
+						className: b,
+						children: /* @__PURE__ */ c(s, {
+							cardName: p,
+							parentCard: w
+						})
+					})
+				]
+			}),
+			m && /* @__PURE__ */ c(r, {
+				className: x,
+				children: /* @__PURE__ */ c(s, {
+					cardName: m,
+					parentCard: w
+				})
+			}),
+			h && /* @__PURE__ */ c(a, {
+				className: S,
+				children: /* @__PURE__ */ c(s, {
+					cardName: h,
+					parentCard: w
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { u as InfoCardComponent };
+
+//# sourceMappingURL=infoCard.component.js.map

package/cards/infoCard/infoCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoCard.component.js","names":[],"sources":["../../../src/cards/infoCard/infoCard.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card as PiCard, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {\n  Card,\n  CardTitle,\n  CardDescription,\n  CardAction,\n  CardContent,\n  CardFooter,\n} from \"@/components/ui/card\";\nimport type {InfoCardProps} from \"./infoCard.types\";\n\nexport const InfoCardComponent = (\n  props: PiCardProps<InfoCardProps>,\n): React.ReactNode => {\n  const {\n    title,\n    description,\n    actionCard,\n    contentCard,\n    footerCard,\n    className,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    actionClassName,\n    contentClassName,\n    footerClassName,\n    style,\n    cardName,\n  } = props;\n\n  const hasHeader = title || description || actionCard;\n\n  return (\n    <Card\n      className={cn(\"min-w-max\", className)}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {hasHeader && (\n        // Plain <div> instead of shadcn <CardHeader> — avoids @container/card-header\n        // (container-type:inline-size) which zeroes out intrinsic inline size and\n        // breaks min-w-max on the parent Card. Visual classes are identical.\n        <div\n          data-slot=\"card-header\"\n          className={cn(\n            \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6\",\n            \"has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n            headerClassName,\n          )}\n        >\n          {title && <CardTitle className={titleClassName}>{title}</CardTitle>}\n          {description && (\n            <CardDescription className={descriptionClassName}>\n              {description}\n            </CardDescription>\n          )}\n          {actionCard && (\n            <CardAction className={actionClassName}>\n              <PiCard cardName={actionCard} parentCard={cardName} />\n            </CardAction>\n          )}\n        </div>\n      )}\n      {contentCard && (\n        <CardContent className={contentClassName}>\n          <PiCard cardName={contentCard} parentCard={cardName} />\n        </CardContent>\n      )}\n      {footerCard && (\n        <CardFooter className={footerClassName}>\n          <PiCard cardName={footerCard} parentCard={cardName} />\n        </CardFooter>\n      )}\n    </Card>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,gBACA,eACA,gBACA,eACA,cACA,oBACA,mBACA,yBACA,oBACA,qBACA,oBACA,UACA,gBACE,GAEE,IAAY,KAAS,KAAe;CAE1C,OACE,kBAAC,GAAD;EACE,WAAW,EAAG,aAAa,CAAS;EAC7B;EACP,gBAAc;YAHhB;GAKG,KAIC,kBAAC,OAAD;IACE,aAAU;IACV,WAAW,EACT,mEACA,qEACA,CACF;cANF;KAQG,KAAS,kBAAC,GAAD;MAAW,WAAW;gBAAiB;KAAiB,CAAA;KACjE,KACC,kBAAC,GAAD;MAAiB,WAAW;gBACzB;KACc,CAAA;KAElB,KACC,kBAAC,GAAD;MAAY,WAAW;gBACrB,kBAAC,GAAD;OAAQ,UAAU;OAAY,YAAY;MAAW,CAAA;KAC3C,CAAA;IAEX;;GAEN,KACC,kBAAC,GAAD;IAAa,WAAW;cACtB,kBAAC,GAAD;KAAQ,UAAU;KAAa,YAAY;IAAW,CAAA;GAC3C,CAAA;GAEd,KACC,kBAAC,GAAD;IAAY,WAAW;cACrB,kBAAC,GAAD;KAAQ,UAAU;KAAY,YAAY;IAAW,CAAA;GAC3C,CAAA;EAEV;;AAEV"}

package/cards/infoCard/infoCard.types.d.ts

@@ -0,0 +1,65 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const INFO_CARD = "shad/info-card";
+export type InfoCardProps = {
+    /**
+     * Text rendered inside `CardTitle`.
+     * Leave unset to omit the title element entirely.
+     */
+    title?: string;
+    /**
+     * Text rendered inside `CardDescription`.
+     * Leave unset to omit the description element entirely.
+     */
+    description?: string;
+    /**
+     * Pihanga card reference rendered inside the `CardAction` slot.
+     * Positioned at the top-right of the header (e.g. a button, badge, or icon).
+     */
+    actionCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered inside `CardContent`.
+     * Main body of the card — use any layout or display card.
+     */
+    contentCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered inside `CardFooter`.
+     * Typically a row of actions or a status line.
+     */
+    footerCard?: PiCardRef;
+    /** Extra CSS classes applied to the root `<div data-slot="card">`. */
+    className?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-header">`. */
+    headerClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-title">`. */
+    titleClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-description">`. */
+    descriptionClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-action">`. */
+    actionClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-content">`. */
+    contentClassName?: string;
+    /** Extra CSS classes applied to `<div data-slot="card-footer">`. */
+    footerClassName?: string;
+    /** Inline styles applied to the root card element. */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring a `shad/info-card` instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {InfoCard} from "@/cards/infoCard";
+ * import {Typography} from "@/cards/typography";
+ * import {Button} from "@/cards/button";
+ *
+ * registerCard("myApp/userCard", InfoCard({
+ *   title: "John Doe",
+ *   description: "Software Engineer",
+ *   actionCard: "myApp/editButton",
+ *   contentCard: "myApp/userDetails",
+ *   footerCard: "myApp/userActions",
+ * }));
+ * ```
+ */
+export declare const InfoCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<InfoCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/infoCard/infoCard.types.js

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

package/cards/infoCard/infoCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infoCard.types.js","names":[],"sources":["../../../src/cards/infoCard/infoCard.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const INFO_CARD = \"shad/info-card\";\n\nexport type InfoCardProps = {\n  /**\n   * Text rendered inside `CardTitle`.\n   * Leave unset to omit the title element entirely.\n   */\n  title?: string;\n\n  /**\n   * Text rendered inside `CardDescription`.\n   * Leave unset to omit the description element entirely.\n   */\n  description?: string;\n\n  /**\n   * Pihanga card reference rendered inside the `CardAction` slot.\n   * Positioned at the top-right of the header (e.g. a button, badge, or icon).\n   */\n  actionCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered inside `CardContent`.\n   * Main body of the card — use any layout or display card.\n   */\n  contentCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered inside `CardFooter`.\n   * Typically a row of actions or a status line.\n   */\n  footerCard?: PiCardRef;\n\n  // ── Per-element className overrides ────────────────────────────────────────\n\n  /** Extra CSS classes applied to the root `<div data-slot=\"card\">`. */\n  className?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-header\">`. */\n  headerClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-title\">`. */\n  titleClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-description\">`. */\n  descriptionClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-action\">`. */\n  actionClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-content\">`. */\n  contentClassName?: string;\n\n  /** Extra CSS classes applied to `<div data-slot=\"card-footer\">`. */\n  footerClassName?: string;\n\n  /** Inline styles applied to the root card element. */\n  style?: React.CSSProperties;\n};\n\n/**\n * Factory function for declaring a `shad/info-card` instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {InfoCard} from \"@/cards/infoCard\";\n * import {Typography} from \"@/cards/typography\";\n * import {Button} from \"@/cards/button\";\n *\n * registerCard(\"myApp/userCard\", InfoCard({\n *   title: \"John Doe\",\n *   description: \"Software Engineer\",\n *   actionCard: \"myApp/editButton\",\n *   contentCard: \"myApp/userDetails\",\n *   footerCard: \"myApp/userActions\",\n * }));\n * ```\n */\nexport const InfoCard = createCardDeclaration<InfoCardProps>(INFO_CARD);\n"],"mappings":";;AAGA,IAAa,IAAY,kBA8EZ,IAAW,EAAqC,CAAS"}

package/cards/infoCard.d.ts

@@ -0,0 +1 @@
+export * from './infoCard/index';

package/cards/toggleGroup/toggleGroup.component.js

@@ -5,7 +5,7 @@ import "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/toggleGroup/toggleGroup.component.tsx
 var a = (a) => {
-	let { name: o, items: s, type: c = "single", value: l, selfManaged: u = !1, variant: d = "default", size: f = "default", spacing: p = 0, disabled: m, className: h, cardName: g, onChanged: _ } = a, v = e(), y = v.isInForm && !!o, b = c === "multiple" ? Array.isArray(l) ? l : l == null ? [] : [String(l)] : typeof l == "string" ? l : "", [x, S] = r.useState(b), C = y ? v.formData[o] : void 0, w = y ? c === "multiple" ? Array.isArray(C) ? C : C == null ? [] : [String(C)] : C == null ? "" : String(C) : u ? x : l ?? (c === "multiple" ? [] : "");
+	let { name: o, items: s = [], type: c = "single", value: l, selfManaged: u = !1, variant: d = "default", size: f = "default", spacing: p = 0, disabled: m, className: h, cardName: g, onChanged: _ } = a, v = e(), y = v.isInForm && !!o, b = c === "multiple" ? Array.isArray(l) ? l : l == null ? [] : [String(l)] : typeof l == "string" ? l : "", [x, S] = r.useState(b), C = y ? v.formData[o] : void 0, w = y ? c === "multiple" ? Array.isArray(C) ? C : C == null ? [] : [String(C)] : C == null ? "" : String(C) : u ? x : l ?? (c === "multiple" ? [] : "");
 	function T(e) {
 		y ? v.handleChange(o, e) : (u && S(e), _({
 			name: o ?? g,

package/cards/toggleGroup/toggleGroup.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.component.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  ToggleGroup as ToggleGroupUI,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {\n  PiToggleGroupEvents,\n  PiToggleGroupProps,\n} from \"./toggleGroup.types\";\n\nexport const ToggleGroupComponent = (\n  props: PiCardProps<PiToggleGroupProps, PiToggleGroupEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    items,\n    type = \"single\",\n    value: propValue,\n    selfManaged = false,\n    variant = \"default\",\n    size = \"default\",\n    spacing = 0,\n    disabled,\n    className,\n    cardName,\n    onChanged,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // ---------------------------------------------------------------------------\n  // Self-managed (internal) state — only active when selfManaged=true and we\n  // are NOT inside a pi/form card.\n  // ---------------------------------------------------------------------------\n  const initialSelfValue: string | string[] =\n    type === \"multiple\"\n      ? Array.isArray(propValue)\n        ? propValue\n        : propValue != null\n          ? [String(propValue)]\n          : []\n      : typeof propValue === \"string\"\n        ? propValue\n        : \"\";\n\n  const [internalValue, setInternalValue] = React.useState<string | string[]>(\n    initialSelfValue,\n  );\n\n  // ---------------------------------------------------------------------------\n  // Derive the effective value from the appropriate source.\n  //   1. Form context (highest priority)\n  //   2. Self-managed internal state\n  //   3. Externally controlled prop value\n  // ---------------------------------------------------------------------------\n  const formRawValue = useFormData ? form.formData[name!] : undefined;\n  const value: string | string[] = useFormData\n    ? type === \"multiple\"\n      ? Array.isArray(formRawValue)\n        ? (formRawValue as string[])\n        : formRawValue != null\n          ? [String(formRawValue)]\n          : []\n      : formRawValue != null\n        ? String(formRawValue)\n        : \"\"\n    : selfManaged\n      ? internalValue\n      : (propValue ?? (type === \"multiple\" ? [] : \"\"));\n\n  function handleSingleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  function handleMultipleChange(newValue: string[]) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  // Render single-selection group\n  if (type === \"single\") {\n    return (\n      <ToggleGroupUI\n        data-pihanga={cardName}\n        type=\"single\"\n        value={typeof value === \"string\" ? value : \"\"}\n        onValueChange={handleSingleChange}\n        variant={variant}\n        size={size}\n        spacing={spacing}\n        disabled={disabled}\n        className={className}\n      >\n        {items.map((item) => (\n          <ToggleGroupItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n          >\n            {item.label}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroupUI>\n    );\n  }\n\n  // Render multiple-selection group\n  return (\n    <ToggleGroupUI\n      data-pihanga={cardName}\n      type=\"multiple\"\n      value={Array.isArray(value) ? value : value ? [value] : []}\n      onValueChange={handleMultipleChange}\n      variant={variant}\n      size={size}\n      spacing={spacing}\n      disabled={disabled}\n      className={className}\n    >\n      {items.map((item) => (\n        <ToggleGroupItem\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n        >\n          {item.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroupUI>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,UACA,UAAO,UACP,OAAO,GACP,iBAAc,IACd,aAAU,WACV,UAAO,WACP,aAAU,GACV,aACA,cACA,aACA,iBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,IACJ,MAAS,aACL,MAAM,QAAQ,CAAS,IACrB,IACA,KAAa,OAEX,CAAC,IADD,CAAC,OAAO,CAAS,CAAC,IAEtB,OAAO,KAAc,WACnB,IACA,IAEF,CAAC,GAAe,KAAoB,EAAM,SAC9C,CACF,GAQM,IAAe,IAAc,EAAK,SAAS,KAAS,KAAA,GACpD,IAA2B,IAC7B,MAAS,aACP,MAAM,QAAQ,CAAY,IACvB,IACD,KAAgB,OAEd,CAAC,IADD,CAAC,OAAO,CAAY,CAAC,IAEzB,KAAgB,OAEd,KADA,OAAO,CAAY,IAEvB,IACE,IACC,MAAc,MAAS,aAAa,CAAC,IAAI;CAEhD,SAAS,EAAmB,GAAkB;EAC5C,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CAEA,SAAS,EAAqB,GAAoB;EAChD,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CA8BA,OA3BI,MAAS,WAET,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,OAAO,KAAU,WAAW,IAAQ;EAC3C,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA,IAMjB,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,MAAM,QAAQ,CAAK,IAAI,IAAQ,IAAQ,CAAC,CAAK,IAAI,CAAC;EACzD,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA;AAEnB"}
+{"version":3,"file":"toggleGroup.component.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  ToggleGroup as ToggleGroupUI,\n  ToggleGroupItem,\n} from \"@/components/ui/toggle-group\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {\n  PiToggleGroupEvents,\n  PiToggleGroupProps,\n} from \"./toggleGroup.types\";\n\nexport const ToggleGroupComponent = (\n  props: PiCardProps<PiToggleGroupProps, PiToggleGroupEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    items = [],\n    type = \"single\",\n    value: propValue,\n    selfManaged = false,\n    variant = \"default\",\n    size = \"default\",\n    spacing = 0,\n    disabled,\n    className,\n    cardName,\n    onChanged,\n  } = props;\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // ---------------------------------------------------------------------------\n  // Self-managed (internal) state — only active when selfManaged=true and we\n  // are NOT inside a pi/form card.\n  // ---------------------------------------------------------------------------\n  const initialSelfValue: string | string[] =\n    type === \"multiple\"\n      ? Array.isArray(propValue)\n        ? propValue\n        : propValue != null\n          ? [String(propValue)]\n          : []\n      : typeof propValue === \"string\"\n        ? propValue\n        : \"\";\n\n  const [internalValue, setInternalValue] = React.useState<string | string[]>(\n    initialSelfValue,\n  );\n\n  // ---------------------------------------------------------------------------\n  // Derive the effective value from the appropriate source.\n  //   1. Form context (highest priority)\n  //   2. Self-managed internal state\n  //   3. Externally controlled prop value\n  // ---------------------------------------------------------------------------\n  const formRawValue = useFormData ? form.formData[name!] : undefined;\n  const value: string | string[] = useFormData\n    ? type === \"multiple\"\n      ? Array.isArray(formRawValue)\n        ? (formRawValue as string[])\n        : formRawValue != null\n          ? [String(formRawValue)]\n          : []\n      : formRawValue != null\n        ? String(formRawValue)\n        : \"\"\n    : selfManaged\n      ? internalValue\n      : (propValue ?? (type === \"multiple\" ? [] : \"\"));\n\n  function handleSingleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  function handleMultipleChange(newValue: string[]) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setInternalValue(newValue);\n      }\n      onChanged({name: name ?? cardName, value: newValue});\n    }\n  }\n\n  // Render single-selection group\n  if (type === \"single\") {\n    return (\n      <ToggleGroupUI\n        data-pihanga={cardName}\n        type=\"single\"\n        value={typeof value === \"string\" ? value : \"\"}\n        onValueChange={handleSingleChange}\n        variant={variant}\n        size={size}\n        spacing={spacing}\n        disabled={disabled}\n        className={className}\n      >\n        {items.map((item) => (\n          <ToggleGroupItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n          >\n            {item.label}\n          </ToggleGroupItem>\n        ))}\n      </ToggleGroupUI>\n    );\n  }\n\n  // Render multiple-selection group\n  return (\n    <ToggleGroupUI\n      data-pihanga={cardName}\n      type=\"multiple\"\n      value={Array.isArray(value) ? value : value ? [value] : []}\n      onValueChange={handleMultipleChange}\n      variant={variant}\n      size={size}\n      spacing={spacing}\n      disabled={disabled}\n      className={className}\n    >\n      {items.map((item) => (\n        <ToggleGroupItem\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n        >\n          {item.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroupUI>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,WAAQ,CAAC,GACT,UAAO,UACP,OAAO,GACP,iBAAc,IACd,aAAU,WACV,UAAO,WACP,aAAU,GACV,aACA,cACA,aACA,iBACE,GAGE,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,IACJ,MAAS,aACL,MAAM,QAAQ,CAAS,IACrB,IACA,KAAa,OAEX,CAAC,IADD,CAAC,OAAO,CAAS,CAAC,IAEtB,OAAO,KAAc,WACnB,IACA,IAEF,CAAC,GAAe,KAAoB,EAAM,SAC9C,CACF,GAQM,IAAe,IAAc,EAAK,SAAS,KAAS,KAAA,GACpD,IAA2B,IAC7B,MAAS,aACP,MAAM,QAAQ,CAAY,IACvB,IACD,KAAgB,OAEd,CAAC,IADD,CAAC,OAAO,CAAY,CAAC,IAEzB,KAAgB,OAEd,KADA,OAAO,CAAY,IAEvB,IACE,IACC,MAAc,MAAS,aAAa,CAAC,IAAI;CAEhD,SAAS,EAAmB,GAAkB;EAC5C,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CAEA,SAAS,EAAqB,GAAoB;EAChD,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAiB,CAAQ,GAE3B,EAAU;GAAC,MAAM,KAAQ;GAAU,OAAO;EAAQ,CAAC;CAEvD;CA8BA,OA3BI,MAAS,WAET,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,OAAO,KAAU,WAAW,IAAQ;EAC3C,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA,IAMjB,kBAAC,GAAD;EACE,gBAAc;EACd,MAAK;EACL,OAAO,MAAM,QAAQ,CAAK,IAAI,IAAQ,IAAQ,CAAC,CAAK,IAAI,CAAC;EACzD,eAAe;EACN;EACH;EACG;EACC;EACC;YAEV,EAAM,KAAK,MACV,kBAAC,GAAD;GAEE,OAAO,EAAK;GACZ,UAAU,EAAK;aAEd,EAAK;EACS,GALV,EAAK,KAKK,CAClB;CACY,CAAA;AAEnB"}

package/components/ui/card.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ui/card.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card",
+		className: e("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", n),
+		...r
+	});
+}
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-title",
+		className: e("leading-none font-semibold", n),
+		...r
+	});
+}
+function i({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-description",
+		className: e("text-sm text-muted-foreground", n),
+		...r
+	});
+}
+function a({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-action",
+		className: e("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n),
+		...r
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-content",
+		className: e("px-6", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "card-footer",
+		className: e("flex items-center px-6 [.border-t]:pt-6", n),
+		...r
+	});
+}
+//#endregion
+export { n as Card, a as CardAction, o as CardContent, i as CardDescription, s as CardFooter, r as CardTitle };
+
+//# sourceMappingURL=card.js.map

package/components/ui/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"],"mappings":";;;;AAIA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,qFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAeA,SAAS,EAAU,EAAE,cAAW,GAAG,KAAsC;CACvE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,8BAA8B,CAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,kEACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,QAAQ,CAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,2CAA2C,CAAS;EAClE,GAAI;CACL,CAAA;AAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -24,6 +24,10 @@
       "import": "./cards/checkbox/index.js",
       "types": "./cards/checkbox/index.d.ts"
     },
+    "./cards/collapsibleCard": {
+      "import": "./cards/collapsibleCard/index.js",
+      "types": "./cards/collapsibleCard/index.d.ts"
+    },
     "./cards/conditional": {
       "import": "./cards/conditional/index.js",
       "types": "./cards/conditional/index.d.ts"
@@ -64,6 +68,10 @@
       "import": "./cards/framework/index.js",
       "types": "./cards/framework/index.d.ts"
     },
+    "./cards/infoCard": {
+      "import": "./cards/infoCard/index.js",
+      "types": "./cards/infoCard/index.d.ts"
+    },
     "./cards/input": {
       "import": "./cards/input/index.js",
       "types": "./cards/input/index.d.ts"
@@ -171,6 +179,9 @@
     "./lib/utils": {
       "import": "./lib/utils.js",
       "types": "./lib/utils.d.ts"
+    },
+    "./theme": {
+      "import": "./theme.css"
     }
   },
   "sideEffects": [
@@ -179,6 +190,7 @@
     "./cards/box/index.js",
     "./cards/button/index.js",
     "./cards/checkbox/index.js",
+    "./cards/collapsibleCard/index.js",
     "./cards/conditional/index.js",
     "./cards/dataTable/index.js",
     "./cards/dialog/index.js",
@@ -189,6 +201,7 @@
     "./cards/flexGrid/index.js",
     "./cards/form/index.js",
     "./cards/framework/index.js",
+    "./cards/infoCard/index.js",
     "./cards/input/index.js",
     "./cards/jsonViewer/index.js",
     "./cards/list/index.js",
@@ -236,6 +249,7 @@
     "@pihanga2/cards": "*"
   },
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.20",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-menubar": "^1.1.16",

package/theme.css

@@ -0,0 +1,102 @@
+/*
+ * pihanga-shadcn — theme.css
+ *
+ * Add ONE line to your app's main CSS (processed by Tailwind v4):
+ *
+ *   @import "tailwindcss";
+ *   @import "@pihanga2/shadcn/theme.css";
+ *
+ * The @source directive below tells Tailwind to scan this package's
+ * compiled JS files for utility class names, so you don't need a
+ * separate @source line in your own CSS.
+ *
+ * Skip the import if your app already has a shadcn/ui theme — your
+ * :root variables will take precedence over the defaults below.
+ */
+
+/* Scan this package's compiled files for Tailwind utility classes */
+@source ".";
+
+/* Map shadcn CSS vars to Tailwind v4 utility tokens */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-btn-brand: var(--primary);
+  --color-btn-brand-foreground: var(--primary-foreground);
+  --radius-btn-brand: var(--radius-md);
+}
+
+/* Light theme (shadcn neutral / new-york) */
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}
+
+/* Dark theme */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}