@pihanga2/shadcn 0.1.0 → 0.2.1

package/cards/box/box.component.js

@@ -3,8 +3,8 @@ import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/box/box.component.tsx
 var r = (r) => {
-	let { content: i, className: a, style: o, cardName: s } = r, c = {};
-	r.height && (c.height = `${r.height}px`), r.width && (c.height = `${r.width}px`), r.marginTop && (c["margin-top"] = `${r.marginTop}px`), r.marginBottom && (c["margin-bottom"] = `${r.marginBottom}px`), r.marginLeft && (c["margin-ledt"] = `${r.marginLeft}px`), r.marginRight && (c["margin-right"] = `${r.marginRight}px`), r.paddingTop && (c["padding-top"] = `${r.paddingTop}px`), r.paddingBottom && (c["padding-bottom"] = `${r.paddingBottom}px`), r.paddingLeft && (c["padding-ledt"] = `${r.paddingLeft}px`), r.paddingRight && (c["padding-right"] = `${r.paddingRight}px`), c = { ...o?.shad };
+	let { content: i, className: a, style: o, cardName: s } = r, c = { ...o?.shad };
+	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, {
 			cardName: n,

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

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

@@ -1,9 +1,6 @@
 import { PiCardRef } from '@pihanga2/core';
+import { AlignItemsT } from '../types';
 export declare const BOX_CARD = "shad/box";
-/**
- * CSS `align-items` values supported by the Box card.
- */
-export type AlignItemsT = "normal" | "stretch" | "center" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "initial" | "inherit";
 /**
  * Responsive display grid breakpoints.
  *

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

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

@@ -4,6 +4,9 @@ export declare const Button: <S extends import('@pihanga2/core').ReduxState>(p:
 export declare const PI_BUTTON_ACTION: {
     CLICKED: string;
 };
+export declare const onButtonClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiButtonClickedEvent>) => void;
 export declare const onPiButtonClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiButtonClickedEvent>) => void;

package/cards/button/button.types.js

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

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

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

package/cards/button/index.js

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

package/cards/chartGraph/chartGraph.component.d.ts

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

package/cards/chartGraph/chartGraph.types.d.ts

@@ -0,0 +1,102 @@
+import { ChartConfig } from '../../components/ui/chart';
+export declare const PI_CHART_GRAPH_CARD = "shad/chart-graph";
+export declare const ChartGraph: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiChartGraphProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type { ChartConfig };
+export type PiChartSeries = {
+    /** Key in each data-point object whose value will be plotted on the y-axis. */
+    dataKey: string;
+    /** Human-readable label used in the tooltip and legend. Defaults to `dataKey`. */
+    label?: string;
+    /**
+     * CSS colour string for this series.
+     * Falls back to the shadcn chart CSS variables
+     * (`hsl(var(--chart-1))`, `hsl(var(--chart-2))`, …) in order.
+     */
+    color?: string;
+};
+export type PiChartGraphProps = {
+    /**
+     * Whether to render an **area** chart (filled) or a **line** chart (stroke only).
+     */
+    chartType: "area" | "line";
+    /**
+     * Array of data points.  Each entry must contain:
+     * - a value for `xDataKey` (used for the x-axis labels), and
+     * - a numeric value for each `series[].dataKey`.
+     *
+     * @example
+     * ```ts
+     * [
+     *   { month: "Jan", desktop: 186, mobile: 80 },
+     *   { month: "Feb", desktop: 305, mobile: 200 },
+     * ]
+     * ```
+     */
+    data: Array<Record<string, unknown>>;
+    /**
+     * Series definitions.  Each entry describes one plotted line or area.
+     * At least one series is required.
+     */
+    series: PiChartSeries[];
+    /** Key inside each data-point object used for the x-axis tick labels. */
+    xDataKey: string;
+    /**
+     * Optional card title rendered above the chart.
+     * When either `title` or `description` is set the chart is wrapped in a
+     * shadcn `<Card>` shell; otherwise it renders as a bare `<div>`.
+     */
+    title?: string;
+    /**
+     * Optional subtitle rendered below `title`.
+     * Has no effect when `title` is not set.
+     */
+    description?: string;
+    /**
+     * Minimum chart height in pixels.
+     * The chart expands if the responsive container requires more space.
+     * Defaults to `250`.
+     */
+    height?: number;
+    /** Show a legend beneath the chart.  Defaults to `true`. */
+    showLegend?: boolean;
+    /** Show horizontal cartesian grid lines.  Defaults to `true`. */
+    showGrid?: boolean;
+    /**
+     * Show the y-axis with numeric tick labels on the left edge of the chart.
+     * Defaults to `false` (y-axis hidden) to keep the chart compact.
+     */
+    showYAxis?: boolean;
+    /**
+     * Unit string appended to every y-axis tick label (e.g. `"ms"`, `"%"`, `" km"`).
+     * Only visible when `showYAxis` is `true`.
+     *
+     * @example `yAxisUnit="%"` renders ticks as `"0%"`, `"50%"`, `"100%"`.
+     */
+    yAxisUnit?: string;
+    /**
+     * Unit string appended to every x-axis tick label.
+     * Useful when x-axis values are numeric (e.g. seconds, iterations).
+     * Has no effect when x-axis values are already formatted strings (e.g. month names).
+     *
+     * @example `xAxisUnit="s"` renders ticks as `"1s"`, `"2s"`, etc.
+     */
+    xAxisUnit?: string;
+    /**
+     * Stack all area series on top of each other (area chart only).
+     * When `false` (default) the filled areas overlap.
+     */
+    stacked?: boolean;
+    /**
+     * Opacity of the filled area (area chart only).
+     * Range 0–1.  Defaults to `0.4`.
+     */
+    fillOpacity?: number;
+    /**
+     * Suppress the recharts entry animation so the chart renders immediately
+     * without the "draw-in" / "unfold" effect.
+     * Defaults to `false` (animation enabled).
+     */
+    suppressAnimation?: boolean;
+    /** Extra Tailwind / CSS classes forwarded to the outermost element. */
+    className?: string;
+};

package/cards/chartGraph/index.d.ts

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

package/cards/conditional/conditional.component.d.ts

@@ -4,8 +4,19 @@ import * as React from "react";
 /**
  * ConditionalComponent
  *
- * Transparent pass-through: renders the `content` card when `show` is `true`,
- * returns `null` otherwise.  No extra DOM wrapper is added — the mounted
- * card's own root element is the only node in the tree.
+ * Renders the `content` card when the combined visibility condition is `true`,
+ * returns `null` otherwise.
+ *
+ * Visibility rules (all must be satisfied):
+ *  1. `show`          — manual boolean gate (defaults to `true` when omitted)
+ *  2. `showOn`        — breakpoint selector (always `true` when omitted)
+ *     • `containerQuery: false` (default) → evaluated against the **viewport**
+ *       via `window.matchMedia`
+ *     • `containerQuery: true`            → evaluated against the width of the
+ *       **enclosing container** via `ResizeObserver`; a thin `<div>` wrapper
+ *       is rendered so the container width can be measured
+ *
+ * Both hooks are always called unconditionally (React rules); whichever is not
+ * "active" receives `undefined` and returns `true` immediately.
  */
 export declare const ConditionalComponent: (props: PiCardProps<ConditionalProps>) => React.ReactNode;

package/cards/conditional/conditional.component.js

@@ -1,15 +1,23 @@
-import { Card as e } from "@pihanga2/core";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { useBreakpoint as e, useContainerBreakpoint as t } from "../../components/hooks/use-breakpoint.js";
+import { Card as n } from "@pihanga2/core";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/conditional/conditional.component.tsx
-var n = (n) => {
-	let { cardName: r, show: i, content: a } = n;
-	return i ? /* @__PURE__ */ t(e, {
-		cardName: a,
-		parentCard: r
+var a = (a) => {
+	let { cardName: o, show: s = !0, showOn: c, containerQuery: l = !1, content: u } = a, d = r.useRef(null), f = e(l ? void 0 : c), p = t(l ? c : void 0, d), m = s && (l ? p : f);
+	return l ? /* @__PURE__ */ i("div", {
+		ref: d,
+		style: { width: "100%" },
+		children: m && /* @__PURE__ */ i(n, {
+			cardName: u,
+			parentCard: o
+		})
+	}) : m ? /* @__PURE__ */ i(n, {
+		cardName: u,
+		parentCard: o
 	}) : null;
 };
 //#endregion
-export { n as ConditionalComponent };
+export { a as ConditionalComponent };
 
 //# sourceMappingURL=conditional.component.js.map

package/cards/conditional/conditional.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Transparent pass-through: renders the `content` card when `show` is `true`,\n * returns `null` otherwise.  No extra DOM wrapper is added — the mounted\n * card's own root element is the only node in the tree.\n */\nexport const ConditionalComponent = (\n  props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n  const {cardName, show, content} = props;\n  if (!show) return null;\n  return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,aAAU,SAAM,eAAW;CAElC,OADK,IACE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IADrC;AAEpB"}
+{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  useBreakpoint,\n  useContainerBreakpoint,\n} from \"@/components/hooks/use-breakpoint\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Renders the `content` card when the combined visibility condition is `true`,\n * returns `null` otherwise.\n *\n * Visibility rules (all must be satisfied):\n *  1. `show`          — manual boolean gate (defaults to `true` when omitted)\n *  2. `showOn`        — breakpoint selector (always `true` when omitted)\n *     • `containerQuery: false` (default) → evaluated against the **viewport**\n *       via `window.matchMedia`\n *     • `containerQuery: true`            → evaluated against the width of the\n *       **enclosing container** via `ResizeObserver`; a thin `<div>` wrapper\n *       is rendered so the container width can be measured\n *\n * Both hooks are always called unconditionally (React rules); whichever is not\n * \"active\" receives `undefined` and returns `true` immediately.\n */\nexport const ConditionalComponent = (\n  props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    show = true,\n    showOn,\n    containerQuery = false,\n    content,\n  } = props;\n\n  // Ref for container-query mode — attached to the wrapper div.\n  // Always created (hooks must not be conditional).\n  const wrapperRef = React.useRef<HTMLDivElement>(null);\n\n  // Viewport breakpoint: active when containerQuery is false.\n  const viewportMatch = useBreakpoint(containerQuery ? undefined : showOn);\n\n  // Container breakpoint: active when containerQuery is true.\n  const containerMatch = useContainerBreakpoint(\n    containerQuery ? showOn : undefined,\n    wrapperRef,\n  );\n\n  const breakpointMatch = containerQuery ? containerMatch : viewportMatch;\n  const visible = show && breakpointMatch;\n\n  // ── Container-query mode ─────────────────────────────────────────────────\n  // Render a full-width wrapper so ResizeObserver has something to measure.\n  // The wrapper is always in the DOM (measuring must be continuous), but the\n  // content card inside it is mounted/unmounted based on `visible`.\n  if (containerQuery) {\n    return (\n      <div ref={wrapperRef} style={{width: \"100%\"}}>\n        {visible && <Card cardName={content} parentCard={cardName} />}\n      </div>\n    );\n  }\n\n  // ── Viewport / manual mode ───────────────────────────────────────────────\n  // Transparent pass-through — no extra DOM node.\n  if (!visible) return null;\n  return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;;AA0BA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,UAAO,IACP,WACA,oBAAiB,IACjB,eACE,GAIE,IAAa,EAAM,OAAuB,IAAI,GAG9C,IAAgB,EAAc,IAAiB,KAAA,IAAY,CAAM,GAGjE,IAAiB,EACrB,IAAiB,IAAS,KAAA,GAC1B,CACF,GAGM,IAAU,MADQ,IAAiB,IAAiB;CAkB1D,OAXI,IAEA,kBAAC,OAAD;EAAK,KAAK;EAAY,OAAO,EAAC,OAAO,OAAM;YACxC,KAAW,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA;CACzD,CAAA,IAMJ,IACE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IADlC;AAEvB"}

package/cards/conditional/conditional.types.d.ts

@@ -1,14 +1,39 @@
 import { PiCardRef } from '@pihanga2/core';
 export declare const CONDITIONAL_CARD = "shad/conditional";
 export declare const Conditional: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ConditionalProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Named Tailwind-compatible breakpoints or a custom pixel expression.
+ *
+ * Named breakpoints (Tailwind CSS defaults)
+ * ─────────────────────────────────────────
+ *  `sm`   → viewport ≥ 640 px
+ *  `md`   → viewport ≥ 768 px
+ *  `lg`   → viewport ≥ 1024 px
+ *  `xl`   → viewport ≥ 1280 px
+ *  `2xl`  → viewport ≥ 1536 px
+ *
+ * Pixel expressions
+ * ─────────────────
+ *  `400px`    → viewport ≥ 400 px  (bare value = min-width)
+ *  `>=640px`  → viewport ≥ 640 px
+ *  `>640px`   → viewport >  640 px (min-width: 641px)
+ *  `<=1024px` → viewport ≤ 1024 px
+ *  `<1024px`  → viewport <  1024 px (max-width: 1023px)
+ */
+export type BreakpointSelector = "sm" | "md" | "lg" | "xl" | "2xl" | (string & Record<never, never>);
 /**
  * Props for the `shad/conditional` card.
  *
- * Renders `content` only when `show` is `true`; renders nothing otherwise.
- * This is a transparent pass-through — no extra DOM wrapper is added.
+ * The card renders `content` only when the combined visibility condition is
+ * `true`; it renders nothing otherwise.  This is a transparent pass-through —
+ * no extra DOM wrapper is added.
+ *
+ * ## Modes
  *
- * In a real app, drive `show` from a `memo()` selector so the card
- * reactively mounts/unmounts as state changes:
+ * ### 1 · Manual boolean (existing behaviour)
+ *
+ * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts
+ * as state changes:
  *
  * ```ts
  * import {memo, registerCard} from "@pihanga2/core";
@@ -19,11 +44,78 @@ export declare const Conditional: <S extends import('@pihanga2/core').ReduxState
  *   content: "myApp/emptyStateHint",
  * }));
  * ```
+ *
+ * ### 2 · Breakpoint-based auto-selection (new)
+ *
+ * Set `showOn` to a breakpoint name or pixel expression.  The component
+ * subscribes to `window.matchMedia` and automatically mounts/unmounts the
+ * content card as the viewport crosses the breakpoint — no state, no memo:
+ *
+ * ```ts
+ * // Show only on tablet-sized screens and up
+ * registerCard("myApp/sidebar", Conditional({
+ *   showOn:  "md",
+ *   content: "myApp/desktopSidebar",
+ * }));
+ *
+ * // Show only on narrow viewports (mobile drawer)
+ * registerCard("myApp/mobileNav", Conditional({
+ *   showOn:  "<768px",
+ *   content: "myApp/drawer",
+ * }));
+ * ```
+ *
+ * ### 3 · Combined
+ *
+ * Both conditions are ANDed — content renders only when the breakpoint matches
+ * **and** `show` is `true`:
+ *
+ * ```ts
+ * registerCard("myApp/adminSidebar", Conditional({
+ *   show:    memo((s: AppState) => s.isAdmin),
+ *   showOn:  "lg",
+ *   content: "myApp/adminPanel",
+ * }));
+ * ```
  */
 export type ConditionalProps = {
-    /** Render `content` only when this is `true`.  Drive with `memo()` for
-     *  reactive mount/unmount behaviour. */
-    show: boolean;
-    /** The card to render when `show` is `true`. */
+    /**
+     * Manual boolean gate.  When omitted it defaults to `true` so that a
+     * `showOn`-only card does not need to set it explicitly.
+     *
+     * Drive with `memo()` for reactive mount/unmount behaviour.
+     */
+    show?: boolean;
+    /**
+     * Viewport-width breakpoint selector.  When set, the component subscribes
+     * to `window.matchMedia` and reactively shows/hides the content card
+     * whenever the viewport crosses the breakpoint.
+     *
+     * Supported values: `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),
+     * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,
+     * `400px`.
+     *
+     * When both `show` and `showOn` are provided the content is rendered only
+     * when **both** conditions are satisfied.
+     *
+     * By default the breakpoint is evaluated against the **viewport** width via
+     * `window.matchMedia`.  Set `containerQuery: true` to evaluate it against
+     * the width of the **enclosing container** instead (uses `ResizeObserver`).
+     */
+    showOn?: BreakpointSelector;
+    /**
+     * When `true`, the `showOn` breakpoint is measured against the width of the
+     * component's **enclosing container** rather than the viewport.
+     *
+     * Internally the component renders a transparent `<div style="width:100%">`
+     * wrapper and observes it with `ResizeObserver`.  This means a single extra
+     * DOM node is added when `containerQuery` is `true`.
+     *
+     * Has no effect when `showOn` is not set.
+     *
+     * @default false
+     */
+    containerQuery?: boolean;
+    /** The card to render when the visibility condition is met. */
     content: PiCardRef;
 };

package/cards/conditional/conditional.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"shad/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n  createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * Renders `content` only when `show` is `true`; renders nothing otherwise.\n * This is a transparent pass-through — no extra DOM wrapper is added.\n *\n * In a real app, drive `show` from a `memo()` selector so the card\n * reactively mounts/unmounts as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n *   content: \"myApp/emptyStateHint\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n  /** Render `content` only when this is `true`.  Drive with `memo()` for\n   *  reactive mount/unmount behaviour. */\n  show: boolean;\n\n  /** The card to render when `show` is `true`. */\n  content: PiCardRef;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,oBAInB,IACX,EAAwC,CAAgB"}
+{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"shad/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n  createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\n/**\n * Named Tailwind-compatible breakpoints or a custom pixel expression.\n *\n * Named breakpoints (Tailwind CSS defaults)\n * ─────────────────────────────────────────\n *  `sm`   → viewport ≥ 640 px\n *  `md`   → viewport ≥ 768 px\n *  `lg`   → viewport ≥ 1024 px\n *  `xl`   → viewport ≥ 1280 px\n *  `2xl`  → viewport ≥ 1536 px\n *\n * Pixel expressions\n * ─────────────────\n *  `400px`    → viewport ≥ 400 px  (bare value = min-width)\n *  `>=640px`  → viewport ≥ 640 px\n *  `>640px`   → viewport >  640 px (min-width: 641px)\n *  `<=1024px` → viewport ≤ 1024 px\n *  `<1024px`  → viewport <  1024 px (max-width: 1023px)\n */\nexport type BreakpointSelector =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | (string & Record<never, never>); // allows arbitrary strings with IDE hints\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * The card renders `content` only when the combined visibility condition is\n * `true`; it renders nothing otherwise.  This is a transparent pass-through —\n * no extra DOM wrapper is added.\n *\n * ## Modes\n *\n * ### 1 · Manual boolean (existing behaviour)\n *\n * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts\n * as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n *   content: \"myApp/emptyStateHint\",\n * }));\n * ```\n *\n * ### 2 · Breakpoint-based auto-selection (new)\n *\n * Set `showOn` to a breakpoint name or pixel expression.  The component\n * subscribes to `window.matchMedia` and automatically mounts/unmounts the\n * content card as the viewport crosses the breakpoint — no state, no memo:\n *\n * ```ts\n * // Show only on tablet-sized screens and up\n * registerCard(\"myApp/sidebar\", Conditional({\n *   showOn:  \"md\",\n *   content: \"myApp/desktopSidebar\",\n * }));\n *\n * // Show only on narrow viewports (mobile drawer)\n * registerCard(\"myApp/mobileNav\", Conditional({\n *   showOn:  \"<768px\",\n *   content: \"myApp/drawer\",\n * }));\n * ```\n *\n * ### 3 · Combined\n *\n * Both conditions are ANDed — content renders only when the breakpoint matches\n * **and** `show` is `true`:\n *\n * ```ts\n * registerCard(\"myApp/adminSidebar\", Conditional({\n *   show:    memo((s: AppState) => s.isAdmin),\n *   showOn:  \"lg\",\n *   content: \"myApp/adminPanel\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n  /**\n   * Manual boolean gate.  When omitted it defaults to `true` so that a\n   * `showOn`-only card does not need to set it explicitly.\n   *\n   * Drive with `memo()` for reactive mount/unmount behaviour.\n   */\n  show?: boolean;\n\n  /**\n   * Viewport-width breakpoint selector.  When set, the component subscribes\n   * to `window.matchMedia` and reactively shows/hides the content card\n   * whenever the viewport crosses the breakpoint.\n   *\n   * Supported values: `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),\n   * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,\n   * `400px`.\n   *\n   * When both `show` and `showOn` are provided the content is rendered only\n   * when **both** conditions are satisfied.\n   *\n   * By default the breakpoint is evaluated against the **viewport** width via\n   * `window.matchMedia`.  Set `containerQuery: true` to evaluate it against\n   * the width of the **enclosing container** instead (uses `ResizeObserver`).\n   */\n  showOn?: BreakpointSelector;\n\n  /**\n   * When `true`, the `showOn` breakpoint is measured against the width of the\n   * component's **enclosing container** rather than the viewport.\n   *\n   * Internally the component renders a transparent `<div style=\"width:100%\">`\n   * wrapper and observes it with `ResizeObserver`.  This means a single extra\n   * DOM node is added when `containerQuery` is `true`.\n   *\n   * Has no effect when `showOn` is not set.\n   *\n   * @default false\n   */\n  containerQuery?: boolean;\n\n  /** The card to render when the visibility condition is met. */\n  content: PiCardRef;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,oBAInB,IACX,EAAwC,CAAgB"}

package/cards/core-index.js

@@ -2,60 +2,60 @@ import { BADGE_CARD as e, ShadBadge as t } from "./badge/badge.types.js";
 import "./badge/index.js";
 import { BOX_CARD as n, Box as r } from "./box/box.types.js";
 import "./box/index.js";
-import { Button as i, PI_BUTTON_ACTION as a, PI_BUTTON_CARD as o, onPiButtonClicked as s } from "./button/button.types.js";
+import { Button as i, PI_BUTTON_ACTION as a, PI_BUTTON_CARD as o, onButtonClicked as s, onPiButtonClicked as c } from "./button/button.types.js";
 import "./button/index.js";
-import { FormContext as c, useFormContext as l } from "./form/form.context.js";
-import { Checkbox as u, PI_CHECKBOX_ACTION as d, PI_CHECKBOX_CARD as f, onPiCheckboxChanged as p } from "./checkbox/checkbox.types.js";
+import { FormContext as l, useFormContext as u } from "./form/form.context.js";
+import { Checkbox as d, PI_CHECKBOX_ACTION as f, PI_CHECKBOX_CARD as p, onPiCheckboxChanged as m } from "./checkbox/checkbox.types.js";
 import "./checkbox/index.js";
-import { CONDITIONAL_CARD as m, Conditional as h } from "./conditional/conditional.types.js";
+import { CONDITIONAL_CARD as h, Conditional as g } from "./conditional/conditional.types.js";
 import "./conditional/index.js";
-import { DATA_TABLE_ACTION as g, DATA_TABLE_CARD as _, DATA_TABLE_ROW_DETAIL_CARD as v, DataTable as y, DataTableRowDetail as b, onDataTableHideDetail as x, onDataTablePageChanged as S, onDataTableRowClicked as C, onDataTableShowDetail as w, onDataTableSortChanged as T } from "./dataTable/dataTable.types.js";
+import { DATA_TABLE_ACTION as _, DATA_TABLE_CARD as v, DATA_TABLE_ROW_DETAIL_CARD as y, DataTable as b, DataTableRowDetail as x, onDataTableHideDetail as S, onDataTablePageChanged as C, onDataTableRowClicked as w, onDataTableShowDetail as T, onDataTableSortChanged as E } from "./dataTable/dataTable.types.js";
 import "./dataTable/index.js";
-import { Dialog as E, PI_DIALOG_ACTION as D, PI_DIALOG_CARD as O, onDialogClosed as k, onDialogOpenChanged as A, onDialogOpened as j } from "./dialog/dialog.types.js";
+import { Dialog as D, PI_DIALOG_ACTION as O, PI_DIALOG_CARD as k, onDialogClosed as A, onDialogOpenChanged as j, onDialogOpened as M } from "./dialog/dialog.types.js";
 import "./dialog/index.js";
-import { DROP_DOWN_MENU_ACTION as M, DROP_DOWN_MENU_CARD as N, DropDownMenu as P, onDropDownMenuClicked as F } from "./dropDownMenu/drop-down.types.js";
+import { DROP_DOWN_MENU_ACTION as N, DROP_DOWN_MENU_CARD as P, DropDownMenu as F, onDropDownMenuClicked as I } from "./dropDownMenu/drop-down.types.js";
 import "./dropDownMenu/index.js";
-import { Field as I, PI_FIELD_CARD as L } from "./field/field.types.js";
+import { Field as L, PI_FIELD_CARD as R } from "./field/field.types.js";
 import "./field/index.js";
-import { FLEX_GRID_CARD as R, FlexGrid as z } from "./flexGrid/flexGrid.types.js";
+import { FLEX_GRID_CARD as z, FlexGrid as B } from "./flexGrid/flexGrid.types.js";
 import "./flexGrid/index.js";
-import { Form as B, PI_FORM_ACTION as V, PI_FORM_CARD as H, onPiFormSubmitted as U } from "./form/form.types.js";
+import { Form as V, PI_FORM_ACTION as H, PI_FORM_CARD as U, onPiFormSubmitted as W } from "./form/form.types.js";
 import "./form/index.js";
-import { SdFramework as W } from "./framework/index.js";
-import { PI_INPUT_ACTION as G, PI_INPUT_CARD as K, PiInput as q, onPiInputChanged as J, onPiInputCommitted as Y } from "./input/input.types.js";
+import { SdFramework as G } from "./framework/index.js";
+import { PI_INPUT_ACTION as K, PI_INPUT_CARD as q, PiInput as J, onPiInputChanged as Y, onPiInputCommitted as X } from "./input/input.types.js";
 import "./input/index.js";
-import { LIST_ACTION as X, LIST_CARD as Z, List as Q, onListItemClicked as $ } from "./list/list.types.js";
+import { LIST_ACTION as Z, LIST_CARD as Q, List as $, onListItemClicked as ee } from "./list/list.types.js";
 import "./list/index.js";
-import { LOADING_OVERLAY_CARD as ee, LoadingOverlay as te } from "./loadingOverlay/loadingOverlay.types.js";
+import { LOADING_OVERLAY_CARD as te, LoadingOverlay as ne } from "./loadingOverlay/loadingOverlay.types.js";
 import "./loadingOverlay/index.js";
-import { LOADING_SKELETON_CARD as ne, LoadingSkeleton as re } from "./loadingSkeleton/loading-skeleton.types.js";
+import { LOADING_SKELETON_CARD as re, LoadingSkeleton as ie } from "./loadingSkeleton/loading-skeleton.types.js";
 import "./loadingSkeleton/index.js";
-import { MENU_ACTION as ie, MENU_CARD as ae, Menu as oe, onMenuClicked as se } from "./menu/menu.types.js";
+import { MENU_ACTION as ae, MENU_CARD as oe, Menu as se, onMenuClicked as ce } from "./menu/menu.types.js";
 import "./menu/index.js";
-import { MODE_TOGGLE_ACTION as ce, MODE_TOGGLE_CARD as le, ModeToggle as ue, onModeToggleChanged as de } from "./modeToggle/mode-toggle.types.js";
+import { MODE_TOGGLE_ACTION as le, MODE_TOGGLE_CARD as ue, ModeToggle as de, onModeToggleChanged as fe } from "./modeToggle/mode-toggle.types.js";
 import "./modeToggle/index.js";
-import { NAVBAR_SEARCH_ACTION as fe, NAVBAR_SEARCH_CARD as pe, NavbarSearch as me, onNavbarSearchFocus as he, onNavbarSearchItems as ge, onNavbarSearchSubmit as _e } from "./navbarSearch/navbarSearch.type.js";
+import { NAVBAR_SEARCH_ACTION as pe, NAVBAR_SEARCH_CARD as me, NavbarSearch as he, onNavbarSearchFocus as ge, onNavbarSearchItems as _e, onNavbarSearchSubmit as ve } from "./navbarSearch/navbarSearch.type.js";
 import "./navbarSearch/index.js";
-import { PAGE_WITH_NAVBAR_ACTION as ve, PAGE_WITH_NAVBAR_CARD as ye, PageWithNavbar as be, onPageWithNavbarNavigateTo as xe } from "./pageWithNavbar/pageWithNavbar.type.js";
-import { SdPageWithNavbar as Se } from "./pageWithNavbar/index.js";
-import { DEF_ERROR_COLOR as Ce, DEF_EVENT_DURATION_SECONDS as we, DEF_HEIGHT as Te, DEF_OVERLAY_OPACITY as Ee, DEF_PASTE_FIRST_REMINDER as De, DEF_PASTE_TARGET_FILE_TYPES as Oe, DEF_SUCCESS_COLOR as ke, PASTE_TARGET_ACTION as Ae, PASTE_TARGET_CARD as je, PasteTarget as Me, onContentPasted as Ne, onPasteError as Pe } from "./pasteTarget/pasteTarget.types.js";
+import { PAGE_WITH_NAVBAR_ACTION as ye, PAGE_WITH_NAVBAR_CARD as be, PageWithNavbar as xe, onPageWithNavbarNavigateTo as Se } from "./pageWithNavbar/pageWithNavbar.type.js";
+import { SdPageWithNavbar as Ce } from "./pageWithNavbar/index.js";
+import { DEF_ERROR_COLOR as we, DEF_EVENT_DURATION_SECONDS as Te, DEF_HEIGHT as Ee, DEF_OVERLAY_OPACITY as De, DEF_PASTE_FIRST_REMINDER as Oe, DEF_PASTE_TARGET_FILE_TYPES as ke, DEF_SUCCESS_COLOR as Ae, PASTE_TARGET_ACTION as je, PASTE_TARGET_CARD as Me, PasteTarget as Ne, onContentPasted as Pe, onPasteError as Fe } from "./pasteTarget/pasteTarget.types.js";
 import "./pasteTarget/index.js";
-import { PI_SELECT_ACTION as Fe, PI_SELECT_CARD as Ie, Select as Le, onPiSelectChanged as Re, onPiSelectClosed as ze, onPiSelectOpened as Be } from "./select/select.types.js";
+import { PI_SELECT_ACTION as Ie, PI_SELECT_CARD as Le, Select as Re, onPiSelectChanged as ze, onPiSelectClosed as Be, onPiSelectOpened as Ve } from "./select/select.types.js";
 import "./select/index.js";
-import { STACK_CARD as Ve, Stack as He } from "./stack/stack.types.js";
+import { STACK_CARD as He, Stack as Ue } from "./stack/stack.types.js";
 import "./stack/index.js";
-import { STEPPER_ACTION as Ue, STEPPER_CARD as We, Stepper as Ge, onStepperStepClicked as Ke } from "./stepper/stepper.types.js";
+import { STEPPER_ACTION as We, STEPPER_CARD as Ge, Stepper as Ke, onStepperStepClicked as qe } from "./stepper/stepper.types.js";
 import "./stepper/index.js";
-import { PI_SWITCH_ACTION as qe, PI_SWITCH_CARD as Je, Switch as Ye, onPiSwitchChanged as Xe } from "./switch/switch.types.js";
+import { PI_SWITCH_ACTION as Je, PI_SWITCH_CARD as Ye, Switch as Xe, onPiSwitchChanged as Ze } from "./switch/switch.types.js";
 import "./switch/index.js";
-import { SdTabs as Ze, TABS_ACTION as Qe, TABS_CARD as $e, onTabsTabChanged as et } from "./tabs/tabs.types.js";
+import { SdTabs as Qe, TABS_ACTION as $e, TABS_CARD as et, Tabs as tt, onTabsTabChanged as nt } from "./tabs/tabs.types.js";
 import "./tabs/index.js";
-import { PI_TEXT_FIELD_ACTION as tt, PI_TEXT_FIELD_CARD as nt, TextField as rt, onPiTextFieldChanged as it } from "./textField/textField.types.js";
+import { PI_TEXT_FIELD_ACTION as rt, PI_TEXT_FIELD_CARD as it, TextField as at, onPiTextFieldChanged as ot } from "./textField/textField.types.js";
 import "./textField/index.js";
-import { PI_TOAST_ACTION as at, PI_TOAST_CARD as ot, TOAST_OP_ACTION as st, Toast as ct, dispatchShowToast as lt, onPiToastClosed as ut, onShowToast as dt } from "./toast/toast.types.js";
+import { PI_TOAST_ACTION as st, PI_TOAST_CARD as ct, TOAST_OP_ACTION as lt, Toast as ut, dispatchShowToast as dt, onPiToastClosed as ft, onShowToast as pt } from "./toast/toast.types.js";
 import "./toast/index.js";
-import { PI_TOGGLE_GROUP_ACTION as ft, PI_TOGGLE_GROUP_CARD as pt, ToggleGroup as mt, onPiToggleGroupChanged as ht } from "./toggleGroup/toggleGroup.types.js";
+import { PI_TOGGLE_GROUP_ACTION as mt, PI_TOGGLE_GROUP_CARD as ht, ToggleGroup as gt, onPiToggleGroupChanged as _t } from "./toggleGroup/toggleGroup.types.js";
 import "./toggleGroup/index.js";
-import { TYPOGRAPHY_CARD as gt, Typography as _t } from "./typography/typography.types.js";
+import { TYPOGRAPHY_CARD as vt, Typography as yt } from "./typography/typography.types.js";
 import "./typography/index.js";
-export { e as BADGE_CARD, n as BOX_CARD, r as Box, i as Button, m as CONDITIONAL_CARD, u as Checkbox, h as Conditional, g as DATA_TABLE_ACTION, _ as DATA_TABLE_CARD, v as DATA_TABLE_ROW_DETAIL_CARD, Ce as DEF_ERROR_COLOR, we as DEF_EVENT_DURATION_SECONDS, Te as DEF_HEIGHT, Ee as DEF_OVERLAY_OPACITY, De as DEF_PASTE_FIRST_REMINDER, Oe as DEF_PASTE_TARGET_FILE_TYPES, ke as DEF_SUCCESS_COLOR, M as DROP_DOWN_MENU_ACTION, N as DROP_DOWN_MENU_CARD, y as DataTable, b as DataTableRowDetail, E as Dialog, P as DropDownMenu, R as FLEX_GRID_CARD, I as Field, z as FlexGrid, B as Form, c as FormContext, X as LIST_ACTION, Z as LIST_CARD, ee as LOADING_OVERLAY_CARD, ne as LOADING_SKELETON_CARD, Q as List, te as LoadingOverlay, re as LoadingSkeleton, ie as MENU_ACTION, ae as MENU_CARD, ce as MODE_TOGGLE_ACTION, le as MODE_TOGGLE_CARD, oe as Menu, ue as ModeToggle, fe as NAVBAR_SEARCH_ACTION, pe as NAVBAR_SEARCH_CARD, me as NavbarSearch, ve as PAGE_WITH_NAVBAR_ACTION, ye as PAGE_WITH_NAVBAR_CARD, Ae as PASTE_TARGET_ACTION, je as PASTE_TARGET_CARD, a as PI_BUTTON_ACTION, o as PI_BUTTON_CARD, d as PI_CHECKBOX_ACTION, f as PI_CHECKBOX_CARD, D as PI_DIALOG_ACTION, O as PI_DIALOG_CARD, L as PI_FIELD_CARD, V as PI_FORM_ACTION, H as PI_FORM_CARD, G as PI_INPUT_ACTION, K as PI_INPUT_CARD, Fe as PI_SELECT_ACTION, Ie as PI_SELECT_CARD, qe as PI_SWITCH_ACTION, Je as PI_SWITCH_CARD, tt as PI_TEXT_FIELD_ACTION, nt as PI_TEXT_FIELD_CARD, at as PI_TOAST_ACTION, ot as PI_TOAST_CARD, ft as PI_TOGGLE_GROUP_ACTION, pt as PI_TOGGLE_GROUP_CARD, be as PageWithNavbar, Me as PasteTarget, q as PiInput, Ve as STACK_CARD, Ue as STEPPER_ACTION, We as STEPPER_CARD, W as SdFramework, Se as SdPageWithNavbar, Ze as SdTabs, Le as Select, t as ShadBadge, He as Stack, Ge as Stepper, Ye as Switch, Qe as TABS_ACTION, $e as TABS_CARD, st as TOAST_OP_ACTION, gt as TYPOGRAPHY_CARD, rt as TextField, ct as Toast, mt as ToggleGroup, _t as Typography, lt as dispatchShowToast, Ne as onContentPasted, x as onDataTableHideDetail, S as onDataTablePageChanged, C as onDataTableRowClicked, w as onDataTableShowDetail, T as onDataTableSortChanged, k as onDialogClosed, A as onDialogOpenChanged, j as onDialogOpened, F as onDropDownMenuClicked, $ as onListItemClicked, se as onMenuClicked, de as onModeToggleChanged, he as onNavbarSearchFocus, ge as onNavbarSearchItems, _e as onNavbarSearchSubmit, xe as onPageWithNavbarNavigateTo, Pe as onPasteError, s as onPiButtonClicked, p as onPiCheckboxChanged, U as onPiFormSubmitted, J as onPiInputChanged, Y as onPiInputCommitted, Re as onPiSelectChanged, ze as onPiSelectClosed, Be as onPiSelectOpened, Xe as onPiSwitchChanged, it as onPiTextFieldChanged, ut as onPiToastClosed, ht as onPiToggleGroupChanged, dt as onShowToast, Ke as onStepperStepClicked, et as onTabsTabChanged, l as useFormContext };
+export { e as BADGE_CARD, n as BOX_CARD, r as Box, i as Button, h as CONDITIONAL_CARD, d as Checkbox, g as Conditional, _ as DATA_TABLE_ACTION, v as DATA_TABLE_CARD, y as DATA_TABLE_ROW_DETAIL_CARD, we as DEF_ERROR_COLOR, Te as DEF_EVENT_DURATION_SECONDS, Ee as DEF_HEIGHT, De as DEF_OVERLAY_OPACITY, Oe as DEF_PASTE_FIRST_REMINDER, ke as DEF_PASTE_TARGET_FILE_TYPES, Ae as DEF_SUCCESS_COLOR, N as DROP_DOWN_MENU_ACTION, P as DROP_DOWN_MENU_CARD, b as DataTable, x as DataTableRowDetail, D as Dialog, F as DropDownMenu, z as FLEX_GRID_CARD, L as Field, B as FlexGrid, V as Form, l as FormContext, Z as LIST_ACTION, Q as LIST_CARD, te as LOADING_OVERLAY_CARD, re as LOADING_SKELETON_CARD, $ as List, ne as LoadingOverlay, ie as LoadingSkeleton, ae as MENU_ACTION, oe as MENU_CARD, le as MODE_TOGGLE_ACTION, ue as MODE_TOGGLE_CARD, se as Menu, de as ModeToggle, pe as NAVBAR_SEARCH_ACTION, me as NAVBAR_SEARCH_CARD, he as NavbarSearch, ye as PAGE_WITH_NAVBAR_ACTION, be as PAGE_WITH_NAVBAR_CARD, je as PASTE_TARGET_ACTION, Me as PASTE_TARGET_CARD, a as PI_BUTTON_ACTION, o as PI_BUTTON_CARD, f as PI_CHECKBOX_ACTION, p as PI_CHECKBOX_CARD, O as PI_DIALOG_ACTION, k as PI_DIALOG_CARD, R as PI_FIELD_CARD, H as PI_FORM_ACTION, U as PI_FORM_CARD, K as PI_INPUT_ACTION, q as PI_INPUT_CARD, Ie as PI_SELECT_ACTION, Le as PI_SELECT_CARD, Je as PI_SWITCH_ACTION, Ye as PI_SWITCH_CARD, rt as PI_TEXT_FIELD_ACTION, it as PI_TEXT_FIELD_CARD, st as PI_TOAST_ACTION, ct as PI_TOAST_CARD, mt as PI_TOGGLE_GROUP_ACTION, ht as PI_TOGGLE_GROUP_CARD, xe as PageWithNavbar, Ne as PasteTarget, J as PiInput, He as STACK_CARD, We as STEPPER_ACTION, Ge as STEPPER_CARD, G as SdFramework, Ce as SdPageWithNavbar, Qe as SdTabs, Re as Select, t as ShadBadge, Ue as Stack, Ke as Stepper, Xe as Switch, $e as TABS_ACTION, et as TABS_CARD, lt as TOAST_OP_ACTION, vt as TYPOGRAPHY_CARD, tt as Tabs, at as TextField, ut as Toast, gt as ToggleGroup, yt as Typography, dt as dispatchShowToast, s as onButtonClicked, Pe as onContentPasted, S as onDataTableHideDetail, C as onDataTablePageChanged, w as onDataTableRowClicked, T as onDataTableShowDetail, E as onDataTableSortChanged, A as onDialogClosed, j as onDialogOpenChanged, M as onDialogOpened, I as onDropDownMenuClicked, ee as onListItemClicked, ce as onMenuClicked, fe as onModeToggleChanged, ge as onNavbarSearchFocus, _e as onNavbarSearchItems, ve as onNavbarSearchSubmit, Se as onPageWithNavbarNavigateTo, Fe as onPasteError, c as onPiButtonClicked, m as onPiCheckboxChanged, W as onPiFormSubmitted, Y as onPiInputChanged, X as onPiInputCommitted, ze as onPiSelectChanged, Be as onPiSelectClosed, Ve as onPiSelectOpened, Ze as onPiSwitchChanged, ot as onPiTextFieldChanged, ft as onPiToastClosed, _t as onPiToggleGroupChanged, pt as onShowToast, qe as onStepperStepClicked, nt as onTabsTabChanged, u as useFormContext };

package/cards/fileDrop/fileDrop.component.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { FileDropEvents, FileDropProps } from './fileDrop.types';
+export declare function get_last_dropped(name: string): File | null;
+export declare const FileDropComponent: (props: PiCardProps<FileDropProps, FileDropEvents>) => React.ReactNode;