@pihanga2/shadcn 0.2.1 → 0.2.3

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

@@ -7,6 +7,7 @@ export declare const PI_BUTTON_ACTION: {
 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;
+/** @deprecated Use `onButtonClicked` instead. */
 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.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 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"}
+{"version":3,"file":"button.types.js","names":[],"sources":["../../../src/cards/button/button.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type 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/{chartGraph/chartGraph.component.d.ts → chart/chart.component.d.ts}

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

package/cards/chart/chart.types.d.ts

@@ -0,0 +1,223 @@
+import { ChartConfig } from '../../components/ui/chart';
+export declare const PI_CHART_GRAPH_CARD = "shad/chart-graph";
+export declare const Chart: <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;
+    /**
+     * Recharts curve interpolation type.
+     * Common values: `"natural"` (smooth, default), `"linear"`, `"step"`,
+     * `"stepBefore"`, `"stepAfter"`, `"monotone"`.
+     */
+    curveType?: "natural" | "linear" | "monotone" | "step" | "stepBefore" | "stepAfter";
+    /** Stroke width in pixels.  Defaults to `2`. */
+    strokeWidth?: number;
+    /**
+     * SVG `stroke-dasharray` value for a dashed/dotted line.
+     * e.g. `"4 4"` → short dashes, `"8 4"` → long dashes, `undefined` → solid.
+     */
+    strokeDasharray?: string;
+    /**
+     * Show a dot at each data point.
+     * `false` (default) hides dots; `true` shows them with the recharts defaults;
+     * pass an object (e.g. `{ r: 4, fill: "white" }`) for full SVG circle control.
+     */
+    dot?: boolean | Record<string, unknown>;
+    /**
+     * CSS colour override for the filled area (`chartType: "area"` only).
+     * Defaults to the same value as `color` so the fill matches the stroke.
+     *
+     * @example `fillColor: "hsl(var(--chart-3))"` — fill with a different palette colour.
+     * @example `fillColor: "transparent"` — stroke-only appearance inside an AreaChart.
+     */
+    fillColor?: string;
+    /**
+     * Per-series fill opacity (`chartType: "area"` only).
+     * Overrides the chart-level `fillOpacity` prop for this series.
+     * Range 0–1.
+     */
+    fillOpacity?: number;
+};
+/**
+ * A single recharts `<ReferenceLine>` to overlay on the chart.
+ * Specify either `x` (vertical line) or `y` (horizontal line).
+ *
+ * @example
+ * ```ts
+ * // Horizontal threshold at y = 100
+ * { y: 100, label: "Limit", stroke: "red", strokeDasharray: "4 4" }
+ *
+ * // Vertical marker at a specific x value
+ * { x: "Mar", label: "Launch", stroke: "var(--chart-2)" }
+ * ```
+ */
+export type PiChartReferenceLine = {
+    /**
+     * Value on the **x-axis** where a vertical reference line is drawn.
+     * Omit when drawing a horizontal line.
+     */
+    x?: string | number;
+    /**
+     * Value on the **y-axis** where a horizontal reference line is drawn.
+     * Omit when drawing a vertical line.
+     */
+    y?: number;
+    /**
+     * Label rendered beside the line.  Pass a plain string for the recharts
+     * default positioning, or a `{ value, position, fill, fontSize }` object
+     * for full control (recharts `LabelProps`).
+     */
+    label?: string | {
+        value: string;
+        position?: string;
+        fill?: string;
+        fontSize?: number;
+    };
+    /** CSS colour for the line stroke.  Defaults to `"var(--border)"`. */
+    stroke?: string;
+    /**
+     * SVG `stroke-dasharray` value for the line style.
+     * `"4 4"` → short dashes, `"8 4"` → long dashes, `undefined` → solid.
+     */
+    strokeDasharray?: string;
+    /** Line stroke width in pixels.  Defaults to `1`. */
+    strokeWidth?: number;
+};
+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 x-axis tick labels along the bottom of the chart.
+     * Defaults to `true`.  Set to `false` to hide the x-axis entirely.
+     */
+    showXAxisLabel?: 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.
+     * Alias: `showYAxisLabel`.
+     */
+    showYAxis?: boolean;
+    /**
+     * Alias for `showYAxis` — provided for naming consistency with `showXAxisLabel`.
+     * When either flag is `true` the y-axis is rendered.
+     */
+    showYAxisLabel?: boolean;
+    /**
+     * Minimum value for the y-axis domain.  Defaults to `"auto"` (data-driven).
+     * Pass `0` to always start the y-axis at zero.
+     */
+    yAxisMin?: number;
+    /**
+     * Maximum value for the y-axis domain.  Defaults to `"auto"` (data-driven).
+     */
+    yAxisMax?: number;
+    /**
+     * Minimum value for the x-axis domain.  Only meaningful for numeric x-axes.
+     * Defaults to `"auto"` (data-driven).
+     */
+    xAxisMin?: number;
+    /**
+     * Maximum value for the x-axis domain.  Only meaningful for numeric x-axes.
+     * Defaults to `"auto"` (data-driven).
+     */
+    xAxisMax?: number;
+    /**
+     * 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;
+    /**
+     * One or more reference lines to overlay on the chart.
+     * Each entry maps directly to a recharts `<ReferenceLine>`.
+     *
+     * @example
+     * ```ts
+     * referenceLines: [
+     *   { y: 100, label: "Threshold", stroke: "red",   strokeDasharray: "4 4" },
+     *   { x: "Mar", label: "Launch",  stroke: "var(--chart-2)" },
+     * ]
+     * ```
+     */
+    referenceLines?: PiChartReferenceLine[];
+    /** Extra Tailwind / CSS classes forwarded to the outermost element. */
+    className?: string;
+};

package/cards/chart/index.d.ts

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

package/cards/checkbox/checkbox.component.js

@@ -1,5 +1,6 @@
 import { useFormContext as e } from "../form/form.context.js";
 import "react";
+import "@pihanga2/core";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/checkbox/checkbox.component.tsx
 var r = (r) => {

package/cards/checkbox/checkbox.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiCheckboxEvents, PiCheckboxProps} from \"./checkbox.types\";\n\nexport const CheckboxComponent = (\n  props: PiCardProps<PiCheckboxProps, PiCheckboxEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    checked: propChecked = false,\n    disabled,\n    label,\n    cardName,\n    onChanged,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\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  const checked = useFormData\n    ? Boolean(form.formData[name!] ?? false)\n    : propChecked;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newChecked = e.target.checked;\n    if (useFormData) {\n      form.handleChange(name!, newChecked);\n    } else {\n      onChanged({name, checked: newChecked});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"checkbox\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"flex items-center gap-2\">\n      <input\n        id={fieldId}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleChange}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        className=\"h-4 w-4 rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50\"\n      />\n      {label && (\n        <label\n          htmlFor={fieldId}\n          className=\"text-sm leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,SAAS,IAAc,IACvB,aACA,UACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAU,IACZ,GAAQ,EAAK,SAAS,MAAU,MAChC;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAa,EAAE,OAAO;EAC5B,AAAI,IACF,EAAK,aAAa,GAAO,CAAU,IAEnC,EAAU;GAAC;GAAM,SAAS;EAAU,CAAC;CAEzC;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,cAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,MAAK;GACI;GACT,UAAU;GACA;GACV,gBAAc,KAAW,KAAA;GACzB,WAAU;EACX,CAAA,GACA,KACC,kBAAC,SAAD;GACE,SAAS;GACT,WAAU;aAET;EACI,CAAA,CAEN;;AAET"}
+{"version":3,"file":"checkbox.component.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiCheckboxEvents, PiCheckboxProps} from \"./checkbox.types\";\n\nexport const CheckboxComponent = (\n  props: PiCardProps<PiCheckboxProps, PiCheckboxEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    checked: propChecked = false,\n    disabled,\n    label,\n    cardName,\n    onChanged,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\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  const checked = useFormData\n    ? Boolean(form.formData[name!] ?? false)\n    : propChecked;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newChecked = e.target.checked;\n    if (useFormData) {\n      form.handleChange(name!, newChecked);\n    } else {\n      onChanged({name, checked: newChecked});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"checkbox\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"flex items-center gap-2\">\n      <input\n        id={fieldId}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleChange}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        className=\"h-4 w-4 rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50\"\n      />\n      {label && (\n        <label\n          htmlFor={fieldId}\n          className=\"text-sm leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,SAAS,IAAc,IACvB,aACA,UACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAU,IACZ,GAAQ,EAAK,SAAS,MAAU,MAChC;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAa,EAAE,OAAO;EAC5B,AAAI,IACF,EAAK,aAAa,GAAO,CAAU,IAEnC,EAAU;GAAC;GAAM,SAAS;EAAU,CAAC;CAEzC;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,cAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,MAAK;GACI;GACT,UAAU;GACA;GACV,gBAAc,KAAW,KAAA;GACzB,WAAU;EACX,CAAA,GACA,KACC,kBAAC,SAAD;GACE,SAAS;GACT,WAAU;aAET;EACI,CAAA,CAEN;;AAET"}

package/cards/checkbox/checkbox.types.d.ts

@@ -3,6 +3,10 @@ export declare const Checkbox: <S extends import('@pihanga2/core').ReduxState>(p
 export declare const PI_CHECKBOX_ACTION: {
     CHANGED: string;
 };
+export declare const onCheckboxChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiCheckboxChangedEvent>) => void;
+/** @deprecated Use `onCheckboxChanged` instead. */
 export declare const onPiCheckboxChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiCheckboxChangedEvent>) => void;

package/cards/checkbox/checkbox.types.js

@@ -1,7 +1,7 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/checkbox/checkbox.types.ts
-var r = "pi/checkbox", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED);
+var r = "pi/checkbox", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED), s = o;
 //#endregion
-export { i as Checkbox, a as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, o as onPiCheckboxChanged };
+export { i as Checkbox, a as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, o as onCheckboxChanged, s as onPiCheckboxChanged };
 
 //# sourceMappingURL=checkbox.types.js.map

package/cards/checkbox/checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.types.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_CHECKBOX_CARD = \"pi/checkbox\";\n\nexport const Checkbox = createCardDeclaration<\n  PiCheckboxProps,\n  PiCheckboxEvents\n>(PI_CHECKBOX_CARD);\n\nexport const PI_CHECKBOX_ACTION = registerActions(PI_CHECKBOX_CARD, [\n  \"changed\",\n]);\n\nexport const onPiCheckboxChanged = createOnAction<PiCheckboxChangedEvent>(\n  PI_CHECKBOX_ACTION.CHANGED,\n);\n\nexport type PiCheckboxProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its checked state from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered next to the checkbox.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n};\n\nexport type PiCheckboxChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the change. */\n  checked: boolean;\n};\n\nexport type PiCheckboxEvents = {\n  onChanged: PiCheckboxChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAmB,eAEnB,IAAW,EAGtB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAsB,EACjC,EAAmB,OACrB"}
+{"version":3,"file":"checkbox.types.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_CHECKBOX_CARD = \"pi/checkbox\";\n\nexport const Checkbox = createCardDeclaration<\n  PiCheckboxProps,\n  PiCheckboxEvents\n>(PI_CHECKBOX_CARD);\n\nexport const PI_CHECKBOX_ACTION = registerActions(PI_CHECKBOX_CARD, [\n  \"changed\",\n]);\n\nexport const onCheckboxChanged = createOnAction<PiCheckboxChangedEvent>(\n  PI_CHECKBOX_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onCheckboxChanged` instead. */\nexport const onPiCheckboxChanged = onCheckboxChanged;\n\nexport type PiCheckboxProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its checked state from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered next to the checkbox.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n};\n\nexport type PiCheckboxChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the change. */\n  checked: boolean;\n};\n\nexport type PiCheckboxEvents = {\n  onChanged: PiCheckboxChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAmB,eAEnB,IAAW,EAGtB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAoB,EAC/B,EAAmB,OACrB,GAGa,IAAsB"}

package/cards/checkbox/index.js

@@ -1,13 +1,13 @@
 import { CheckboxComponent as e } from "./checkbox.component.js";
-import { Checkbox as t, PI_CHECKBOX_ACTION as n, PI_CHECKBOX_CARD as r, onPiCheckboxChanged as i } from "./checkbox.types.js";
-import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+import { Checkbox as t, PI_CHECKBOX_ACTION as n, PI_CHECKBOX_CARD as r, onCheckboxChanged as i, onPiCheckboxChanged as a } from "./checkbox.types.js";
+import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
 //#region src/cards/checkbox/index.ts
-o({
+s({
 	name: r,
 	component: e,
-	events: a(n)
+	events: o(n)
 });
 //#endregion
-export { t as Checkbox, n as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, i as onPiCheckboxChanged };
+export { t as Checkbox, n as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, i as onCheckboxChanged, a as onPiCheckboxChanged };
 
 //# sourceMappingURL=index.js.map

package/cards/conditional/conditional.component.js

@@ -1,18 +1,18 @@
 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 * as n from "react";
+import { Card as r } from "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/conditional/conditional.component.tsx
 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);
+	let { cardName: o, show: s = !0, showOn: c, containerQuery: l = !1, content: u } = a, d = n.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, {
+		children: m && /* @__PURE__ */ i(r, {
 			cardName: u,
 			parentCard: o
 		})
-	}) : m ? /* @__PURE__ */ i(n, {
+	}) : m ? /* @__PURE__ */ i(r, {
 		cardName: u,
 		parentCard: o
 	}) : null;

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

@@ -2,15 +2,18 @@ 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 Tailwind-compatible breakpoints.
  *
- * Named breakpoints (Tailwind CSS defaults)
- * ─────────────────────────────────────────
+ *  `xs`   → viewport  < 640 px (mobile-first default)
  *  `sm`   → viewport ≥ 640 px
  *  `md`   → viewport ≥ 768 px
  *  `lg`   → viewport ≥ 1024 px
  *  `xl`   → viewport ≥ 1280 px
  *  `2xl`  → viewport ≥ 1536 px
+ */
+export type BreakpointName = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * A `BreakpointName` **or** a custom pixel expression.
  *
  * Pixel expressions
  * ─────────────────
@@ -20,7 +23,19 @@ export declare const Conditional: <S extends import('@pihanga2/core').ReduxState
  *  `<=1024px` → viewport ≤ 1024 px
  *  `<1024px`  → viewport <  1024 px (max-width: 1023px)
  */
-export type BreakpointSelector = "sm" | "md" | "lg" | "xl" | "2xl" | (string & Record<never, never>);
+export type BreakpointSelector = BreakpointName | (string & Record<never, never>);
+/**
+ * A partial map from each named breakpoint to a value of type `T`.
+ *
+ * Useful for props that need per-breakpoint configuration — e.g. the CSS
+ * `display` value to apply at each viewport width.
+ *
+ * @example
+ * ```ts
+ * const display: BreakpointMap = { xs: "none", md: "flex" };
+ * ```
+ */
+export type BreakpointMap<T = string> = Partial<Record<BreakpointName, T>>;
 /**
  * Props for the `shad/conditional` card.
  *
@@ -91,7 +106,7 @@ export type ConditionalProps = {
      * to `window.matchMedia` and reactively shows/hides the content card
      * whenever the viewport crosses the breakpoint.
      *
-     * Supported values: `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),
+     * Supported values: `xs` | `sm` | `md` | `lg` | `xl` | `2xl` (Tailwind),
      * or pixel expressions such as `>400px`, `>=640px`, `<768px`, `<=1024px`,
      * `400px`.
      *

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// ── 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"}
+{"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.\n *\n *  `xs`   → viewport  < 640 px (mobile-first default)\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 */\nexport type BreakpointName = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/**\n * A `BreakpointName` **or** a custom pixel expression.\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  | BreakpointName\n  | (string & Record<never, never>); // allows arbitrary strings with IDE hints\n\n/**\n * A partial map from each named breakpoint to a value of type `T`.\n *\n * Useful for props that need per-breakpoint configuration — e.g. the CSS\n * `display` value to apply at each viewport width.\n *\n * @example\n * ```ts\n * const display: BreakpointMap = { xs: \"none\", md: \"flex\" };\n * ```\n */\nexport type BreakpointMap<T = string> = Partial<Record<BreakpointName, T>>;\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: `xs` | `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.d.ts

@@ -7,6 +7,7 @@ export * from './dataTable/index.js';
 export * from './dialog/index.js';
 export * from './dropDownMenu/index.js';
 export * from './field/index.js';
+export * from './fileDrop/index.js';
 export * from './flexGrid/index.js';
 export * from './form/index.js';
 export * from './framework/index.js';
@@ -20,6 +21,8 @@ export * from './navbarSearch/index.js';
 export * from './pageWithNavbar/index.js';
 export * from './pasteTarget/index.js';
 export * from './select/index.js';
+export * from './slider/index.js';
+export * from './sliderValue/index.js';
 export * from './stack/index.js';
 export * from './stepper/index.js';
 export * from './switch/index.js';

package/cards/dataTable/dataTable.component.js

@@ -1,8 +1,8 @@
 import { Badge as e } from "../../components/ui/badge.js";
 import { cn as t } from "../../lib/utils.js";
 import { Table as n, TableBody as r, TableCaption as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../../components/ui/table.js";
-import { Card as l } from "@pihanga2/core";
-import u, { useMemo as d, useState as f } from "react";
+import l, { useMemo as u, useState as d } from "react";
+import { Card as f } from "@pihanga2/core";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Check as h, ChevronDown as g, ChevronRight as _, ChevronUp as v, ChevronsUpDown as y, X as b } from "lucide-react";
 //#region src/cards/dataTable/dataTable.component.tsx
@@ -32,7 +32,7 @@ function ee(t, n, r) {
 			className: "size-4 text-muted-foreground",
 			"aria-label": "false"
 		});
-		case "card": return /* @__PURE__ */ p(l, {
+		case "card": return /* @__PURE__ */ p(f, {
 			cardName: String(n),
 			parentCard: r
 		});
@@ -76,7 +76,7 @@ function C(e) {
 	return e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()).trim();
 }
 var w = (e) => {
-	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = f(/* @__PURE__ */ new Set()), [R, z] = f(b), [B, V] = f(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = f(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = d(() => H ? [...v].sort((e, t) => {
+	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => H ? [...v].sort((e, t) => {
 		let n = e.data[H], r = t.data[H];
 		if (n == null && r == null) return 0;
 		if (n == null) return 1;
@@ -87,7 +87,7 @@ var w = (e) => {
 		v,
 		H,
 		U
-	]), X = d(() => {
+	]), X = u(() => {
 		if (!T) return Y;
 		let e = K * T;
 		return Y.slice(e, e + T);
@@ -150,13 +150,13 @@ var w = (e) => {
 			/* @__PURE__ */ p(r, { children: X.length === 0 ? /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(a, {
 				colSpan: J,
 				className: "py-8 text-center text-muted-foreground",
-				children: O ? /* @__PURE__ */ p(l, {
+				children: O ? /* @__PURE__ */ p(f, {
 					cardName: O,
 					parentCard: A
 				}) : ie
 			}) }) : X.map((e, n) => {
 				let r = I.has(e.id), i = te && n % 2 == 1;
-				return /* @__PURE__ */ m(u.Fragment, { children: [/* @__PURE__ */ m(c, {
+				return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ m(c, {
 					className: t(i && "bg-muted/30", ne && "cursor-pointer"),
 					"data-expanded": r || void 0,
 					onClick: () => se(e),
@@ -185,7 +185,7 @@ var w = (e) => {
 						className: "border-b p-0",
 						children: /* @__PURE__ */ p("div", {
 							className: "bg-muted/20 px-4 py-3",
-							children: /* @__PURE__ */ p(l, {
+							children: /* @__PURE__ */ p(f, {
 								cardName: e.detailCard,
 								cardKey: `detail-${e.id}`,
 								row: e,

package/cards/dataTable/dataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dataTable.types.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.types.ts"],"sourcesContent":["import {\n  PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const DATA_TABLE_CARD = \"shad/data-table\";\n\nexport const DataTable = createCardDeclaration<DataTableProps, DataTableEvents>(\n  DATA_TABLE_CARD,\n);\n\nexport const DATA_TABLE_ACTION = registerActions(DATA_TABLE_CARD, [\n  \"row_clicked\",\n  \"sort_changed\",\n  \"show_detail\",\n  \"hide_detail\",\n  \"page_changed\",\n]);\n\nexport const onDataTableRowClicked = createOnAction<DataTableRowClickedEvent>(\n  DATA_TABLE_ACTION.ROW_CLICKED,\n);\nexport const onDataTableSortChanged = createOnAction<DataTableSortChangedEvent>(\n  DATA_TABLE_ACTION.SORT_CHANGED,\n);\nexport const onDataTableShowDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.SHOW_DETAIL,\n);\nexport const onDataTableHideDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.HIDE_DETAIL,\n);\nexport const onDataTablePageChanged = createOnAction<DataTablePageChangedEvent>(\n  DATA_TABLE_ACTION.PAGE_CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Column type definitions\n// ---------------------------------------------------------------------------\n\n/** Shared base for all column definitions */\nexport type DataTableColumnBase = {\n  /** Key into the row's `data` object used to retrieve the cell value */\n  key: string;\n  /**\n   * Column header label.\n   * Defaults to the `key` with camelCase expanded to \"Title Case\".\n   */\n  title?: string;\n  /** Column width as a CSS value (e.g. \"120px\", \"10%\", \"1fr\") */\n  width?: string | number;\n  /** Horizontal alignment of cell content. Defaults to \"left\". */\n  align?: \"left\" | \"center\" | \"right\";\n  /** Whether the column header is clickable for sorting */\n  sortable?: boolean;\n  /** Extra CSS class applied to the `<th>` header cell */\n  headerClassName?: string;\n  /** Extra CSS class applied to every `<td>` data cell in this column */\n  cellClassName?: string;\n};\n\n/** Plain text column — cell value rendered as a string */\nexport type TextColumn = DataTableColumnBase & {\n  type?: \"text\";\n};\n\n/** Numeric column with optional custom formatter */\nexport type NumberColumn = DataTableColumnBase & {\n  type: \"number\";\n  /** Custom number formatter; defaults to `String(value)` */\n  format?: (n: number) => string;\n};\n\n/** Badge/chip column — cell value is rendered inside a `<Badge>` */\nexport type BadgeColumn = DataTableColumnBase & {\n  type: \"badge\";\n  /**\n   * Map from cell value (as a string) to a shadcn Badge variant.\n   * Falls back to \"secondary\" for unrecognised values.\n   */\n  variants?: Record<\n    string,\n    \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  >;\n};\n\n/** Date column with optional custom formatter */\nexport type DateColumn = DataTableColumnBase & {\n  type: \"date\";\n  /** Custom date formatter; defaults to `toLocaleDateString()` */\n  format?: (d: Date | string) => string;\n};\n\n/** Boolean column — renders a check-mark or cross icon */\nexport type BooleanColumn = DataTableColumnBase & {\n  type: \"boolean\";\n};\n\n/**\n * Card column — cell value must be a `PiCardRef` (string).\n * The referenced card is rendered inline via Pihanga's `<Card />`.\n * This enables full reuse of any registered Pihanga card as cell content.\n */\nexport type CardColumn = DataTableColumnBase & {\n  type: \"card\";\n};\n\nexport type DataTableColumn =\n  | TextColumn\n  | NumberColumn\n  | BadgeColumn\n  | DateColumn\n  | BooleanColumn\n  | CardColumn;\n\n// ---------------------------------------------------------------------------\n// Row\n// ---------------------------------------------------------------------------\n\nexport type DataTableRow<T = Record<string, unknown>> = {\n  /** Unique row identifier used as the React key and in events */\n  id: string | number;\n  /**\n   * Row payload — values are keyed by the column's `key` field.\n   * For \"card\" columns the value should be a `PiCardRef` string.\n   */\n  data: T;\n  /**\n   * When set, the row shows an expand/collapse toggle button.\n   * The referenced card is rendered full-width below the row on expand.\n   * Use `onShowDetail` / `onHideDetail` events to track expanded state in\n   * your redux store and update `detailCard` per row as needed.\n   */\n  detailCard?: PiCardRef;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DataTableProps<T = Record<string, unknown>> = {\n  /** Column definitions — order determines display order */\n  columns: DataTableColumn[];\n  /** Row data */\n  rows: DataTableRow<T>[];\n  /** Optional visible `<caption>` rendered below the table */\n  caption?: string;\n\n  // --- Sorting ---\n  /**\n   * Key of the currently sorted column.\n   * When provided the sort state is controlled; otherwise managed internally.\n   */\n  sortKey?: string;\n  /**\n   * Sort direction.\n   * When provided together with `sortKey` the sort state is controlled.\n   */\n  sortAscending?: boolean;\n\n  // --- Pagination ---\n  /** Maximum number of rows per page. Omit to disable pagination. */\n  pageSize?: number;\n  /** Current page index (0-based). Treated as controlled when provided. */\n  currentPage?: number;\n  /**\n   * Total row count, used for server-side pagination display.\n   * Leave unset for client-side pagination derived from `rows.length`.\n   */\n  totalRows?: number;\n\n  // --- Display ---\n  /** Keep the header visible while the body scrolls */\n  stickyHeader?: boolean;\n  /** Alternate row background colour (zebra striping) */\n  striped?: boolean;\n  /** Highlight rows on hover (default: true) */\n  hoverable?: boolean;\n  /** Use compact row padding */\n  compact?: boolean;\n\n  // --- Empty state ---\n  /** Card rendered when `rows` is empty */\n  emptyCard?: PiCardRef;\n  /** Fallback text when `rows` is empty and `emptyCard` is not set */\n  emptyText?: string;\n\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Events\n// ---------------------------------------------------------------------------\n\nexport type DataTableRowClickedEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTableSortChangedEvent = {\n  /** The column key that was clicked */\n  key: string;\n  /** `true` = ascending, `false` = descending */\n  ascending: boolean;\n};\n\nexport type DataTableDetailEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTablePageChangedEvent = {\n  /** New page index (0-based) */\n  page: number;\n  pageSize: number;\n};\n\nexport type DataTableEvents = {\n  onRowClicked: DataTableRowClickedEvent;\n  onSortChanged: DataTableSortChangedEvent;\n  onShowDetail: DataTableDetailEvent;\n  onHideDetail: DataTableDetailEvent;\n  onPageChanged: DataTablePageChangedEvent;\n};\n\n// ---------------------------------------------------------------------------\n// DataTableRowDetail — generic single-template detail panel\n// ---------------------------------------------------------------------------\n\n/** Configuration for a single field shown in the detail panel. */\nexport type DataTableRowDetailField = {\n  /** Key to look up in `row.data` */\n  key: string;\n  /** Optional human-readable label prefix (e.g. \"Director\") */\n  label?: string;\n  /** Render style: \"title\" → h4 bold, \"muted\" → muted foreground, \"text\" (default) → plain */\n  type?: \"title\" | \"text\" | \"muted\";\n  /** Additional Tailwind class names forwarded to the element */\n  className?: string;\n};\n\nexport type DataTableRowDetailProps = {\n  /**\n   * The row to display. Set this via a state mapper so a single template\n   * card works for all rows:\n   * ```ts\n   * DataTableRowDetail({\n   *   row: (_, ctx) => ctx.ctxtProps?.row,\n   *   fields: [{ key: \"title\", type: \"title\" }, ...],\n   * })\n   * ```\n   */\n  row?: DataTableRow<Record<string, unknown>>;\n  /**\n   * Fields to render in order.\n   * When omitted, every key in `row.data` is rendered as a plain key:value pair.\n   */\n  fields?: DataTableRowDetailField[];\n};\n\nexport const DATA_TABLE_ROW_DETAIL_CARD = \"shad/data-table-row-detail\";\nexport const DataTableRowDetail =\n  createCardDeclaration<DataTableRowDetailProps>(DATA_TABLE_ROW_DETAIL_CARD);\n"],"mappings":";;AAOA,IAAa,IAAkB,mBAElB,IAAY,EACvB,CACF,GAEa,IAAoB,EAAgB,GAAiB;CAChE;CACA;CACA;CACA;CACA;AACF,CAAC,GAEY,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GAkOa,IAA6B,8BAC7B,IACX,EAA+C,CAA0B"}
+{"version":3,"file":"dataTable.types.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.types.ts"],"sourcesContent":["import {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const DATA_TABLE_CARD = \"shad/data-table\";\n\nexport const DataTable = createCardDeclaration<DataTableProps, DataTableEvents>(\n  DATA_TABLE_CARD,\n);\n\nexport const DATA_TABLE_ACTION = registerActions(DATA_TABLE_CARD, [\n  \"row_clicked\",\n  \"sort_changed\",\n  \"show_detail\",\n  \"hide_detail\",\n  \"page_changed\",\n]);\n\nexport const onDataTableRowClicked = createOnAction<DataTableRowClickedEvent>(\n  DATA_TABLE_ACTION.ROW_CLICKED,\n);\nexport const onDataTableSortChanged = createOnAction<DataTableSortChangedEvent>(\n  DATA_TABLE_ACTION.SORT_CHANGED,\n);\nexport const onDataTableShowDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.SHOW_DETAIL,\n);\nexport const onDataTableHideDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.HIDE_DETAIL,\n);\nexport const onDataTablePageChanged = createOnAction<DataTablePageChangedEvent>(\n  DATA_TABLE_ACTION.PAGE_CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Column type definitions\n// ---------------------------------------------------------------------------\n\n/** Shared base for all column definitions */\nexport type DataTableColumnBase = {\n  /** Key into the row's `data` object used to retrieve the cell value */\n  key: string;\n  /**\n   * Column header label.\n   * Defaults to the `key` with camelCase expanded to \"Title Case\".\n   */\n  title?: string;\n  /** Column width as a CSS value (e.g. \"120px\", \"10%\", \"1fr\") */\n  width?: string | number;\n  /** Horizontal alignment of cell content. Defaults to \"left\". */\n  align?: \"left\" | \"center\" | \"right\";\n  /** Whether the column header is clickable for sorting */\n  sortable?: boolean;\n  /** Extra CSS class applied to the `<th>` header cell */\n  headerClassName?: string;\n  /** Extra CSS class applied to every `<td>` data cell in this column */\n  cellClassName?: string;\n};\n\n/** Plain text column — cell value rendered as a string */\nexport type TextColumn = DataTableColumnBase & {\n  type?: \"text\";\n};\n\n/** Numeric column with optional custom formatter */\nexport type NumberColumn = DataTableColumnBase & {\n  type: \"number\";\n  /** Custom number formatter; defaults to `String(value)` */\n  format?: (n: number) => string;\n};\n\n/** Badge/chip column — cell value is rendered inside a `<Badge>` */\nexport type BadgeColumn = DataTableColumnBase & {\n  type: \"badge\";\n  /**\n   * Map from cell value (as a string) to a shadcn Badge variant.\n   * Falls back to \"secondary\" for unrecognised values.\n   */\n  variants?: Record<\n    string,\n    \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  >;\n};\n\n/** Date column with optional custom formatter */\nexport type DateColumn = DataTableColumnBase & {\n  type: \"date\";\n  /** Custom date formatter; defaults to `toLocaleDateString()` */\n  format?: (d: Date | string) => string;\n};\n\n/** Boolean column — renders a check-mark or cross icon */\nexport type BooleanColumn = DataTableColumnBase & {\n  type: \"boolean\";\n};\n\n/**\n * Card column — cell value must be a `PiCardRef` (string).\n * The referenced card is rendered inline via Pihanga's `<Card />`.\n * This enables full reuse of any registered Pihanga card as cell content.\n */\nexport type CardColumn = DataTableColumnBase & {\n  type: \"card\";\n};\n\nexport type DataTableColumn =\n  | TextColumn\n  | NumberColumn\n  | BadgeColumn\n  | DateColumn\n  | BooleanColumn\n  | CardColumn;\n\n// ---------------------------------------------------------------------------\n// Row\n// ---------------------------------------------------------------------------\n\nexport type DataTableRow<T = Record<string, unknown>> = {\n  /** Unique row identifier used as the React key and in events */\n  id: string | number;\n  /**\n   * Row payload — values are keyed by the column's `key` field.\n   * For \"card\" columns the value should be a `PiCardRef` string.\n   */\n  data: T;\n  /**\n   * When set, the row shows an expand/collapse toggle button.\n   * The referenced card is rendered full-width below the row on expand.\n   * Use `onShowDetail` / `onHideDetail` events to track expanded state in\n   * your redux store and update `detailCard` per row as needed.\n   */\n  detailCard?: PiCardRef;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DataTableProps<T = Record<string, unknown>> = {\n  /** Column definitions — order determines display order */\n  columns: DataTableColumn[];\n  /** Row data */\n  rows: DataTableRow<T>[];\n  /** Optional visible `<caption>` rendered below the table */\n  caption?: string;\n\n  // --- Sorting ---\n  /**\n   * Key of the currently sorted column.\n   * When provided the sort state is controlled; otherwise managed internally.\n   */\n  sortKey?: string;\n  /**\n   * Sort direction.\n   * When provided together with `sortKey` the sort state is controlled.\n   */\n  sortAscending?: boolean;\n\n  // --- Pagination ---\n  /** Maximum number of rows per page. Omit to disable pagination. */\n  pageSize?: number;\n  /** Current page index (0-based). Treated as controlled when provided. */\n  currentPage?: number;\n  /**\n   * Total row count, used for server-side pagination display.\n   * Leave unset for client-side pagination derived from `rows.length`.\n   */\n  totalRows?: number;\n\n  // --- Display ---\n  /** Keep the header visible while the body scrolls */\n  stickyHeader?: boolean;\n  /** Alternate row background colour (zebra striping) */\n  striped?: boolean;\n  /** Highlight rows on hover (default: true) */\n  hoverable?: boolean;\n  /** Use compact row padding */\n  compact?: boolean;\n\n  // --- Empty state ---\n  /** Card rendered when `rows` is empty */\n  emptyCard?: PiCardRef;\n  /** Fallback text when `rows` is empty and `emptyCard` is not set */\n  emptyText?: string;\n\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Events\n// ---------------------------------------------------------------------------\n\nexport type DataTableRowClickedEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTableSortChangedEvent = {\n  /** The column key that was clicked */\n  key: string;\n  /** `true` = ascending, `false` = descending */\n  ascending: boolean;\n};\n\nexport type DataTableDetailEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTablePageChangedEvent = {\n  /** New page index (0-based) */\n  page: number;\n  pageSize: number;\n};\n\nexport type DataTableEvents = {\n  onRowClicked: DataTableRowClickedEvent;\n  onSortChanged: DataTableSortChangedEvent;\n  onShowDetail: DataTableDetailEvent;\n  onHideDetail: DataTableDetailEvent;\n  onPageChanged: DataTablePageChangedEvent;\n};\n\n// ---------------------------------------------------------------------------\n// DataTableRowDetail — generic single-template detail panel\n// ---------------------------------------------------------------------------\n\n/** Configuration for a single field shown in the detail panel. */\nexport type DataTableRowDetailField = {\n  /** Key to look up in `row.data` */\n  key: string;\n  /** Optional human-readable label prefix (e.g. \"Director\") */\n  label?: string;\n  /** Render style: \"title\" → h4 bold, \"muted\" → muted foreground, \"text\" (default) → plain */\n  type?: \"title\" | \"text\" | \"muted\";\n  /** Additional Tailwind class names forwarded to the element */\n  className?: string;\n};\n\nexport type DataTableRowDetailProps = {\n  /**\n   * The row to display. Set this via a state mapper so a single template\n   * card works for all rows:\n   * ```ts\n   * DataTableRowDetail({\n   *   row: (_, ctx) => ctx.ctxtProps?.row,\n   *   fields: [{ key: \"title\", type: \"title\" }, ...],\n   * })\n   * ```\n   */\n  row?: DataTableRow<Record<string, unknown>>;\n  /**\n   * Fields to render in order.\n   * When omitted, every key in `row.data` is rendered as a plain key:value pair.\n   */\n  fields?: DataTableRowDetailField[];\n};\n\nexport const DATA_TABLE_ROW_DETAIL_CARD = \"shad/data-table-row-detail\";\nexport const DataTableRowDetail =\n  createCardDeclaration<DataTableRowDetailProps>(DATA_TABLE_ROW_DETAIL_CARD);\n"],"mappings":";;AAOA,IAAa,IAAkB,mBAElB,IAAY,EACvB,CACF,GAEa,IAAoB,EAAgB,GAAiB;CAChE;CACA;CACA;CACA;CACA;AACF,CAAC,GAEY,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GAkOa,IAA6B,8BAC7B,IACX,EAA+C,CAA0B"}

package/cards/dataTable/dataTableRowDetail.component.js

@@ -1,5 +1,6 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
+import "@pihanga2/core";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/cards/dataTable/dataTableRowDetail.component.tsx
 var i = (i) => {

package/cards/dataTable/dataTableRowDetail.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dataTableRowDetail.component.js","names":[],"sources":["../../../src/cards/dataTable/dataTableRowDetail.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {\n  DataTableRowDetailField,\n  DataTableRowDetailProps,\n} from \"./dataTable.types\";\n\n/**\n * DataTableRowDetail — generic detail-panel card for use with DataTable.\n *\n * Register it ONCE as a template, then reference it in every row via\n * `detailCard`.  The DataTable passes the row via `cardKey` + `row` context\n * props so a state mapper on the `row` field delivers the correct data:\n *\n * ```ts\n * registerCard(\n *   \"app/myTable/rowDetail\",\n *   DataTableRowDetail({\n *     // State mapper — ctx.ctxtProps.row is injected by the DataTable\n *     row: (_, ctx) => ctx.ctxtProps?.row,\n *     fields: [\n *       { key: \"title\",    type: \"title\" },\n *       { key: \"director\", label: \"Director\" },\n *       { key: \"plot\",     type: \"muted\" },\n *     ],\n *   }),\n * );\n * ```\n */\nexport const DataTableRowDetailComponent = (\n  props: PiCardProps<DataTableRowDetailProps>,\n): React.ReactNode => {\n  const {row, fields, cardName} = props;\n\n  if (!row?.data) {\n    return null;\n  }\n\n  const data = row.data as Record<string, unknown>;\n\n  /** If no `fields` config, auto-render all keys as plain text */\n  if (!fields || fields.length === 0) {\n    return (\n      <div className=\"flex flex-col gap-1 text-sm\" data-pihanga={cardName}>\n        {Object.entries(data).map(([key, value]) => (\n          <div key={key}>\n            <span className=\"font-medium text-muted-foreground\">{key}: </span>\n            <span>{String(value ?? \"\")}</span>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1\" data-pihanga={cardName}>\n      {fields.map((field: DataTableRowDetailField) => {\n        const value = data[field.key];\n        const display = value == null ? \"\" : String(value);\n\n        switch (field.type) {\n          case \"title\":\n            return (\n              <h4 key={field.key} className=\"text-base font-semibold\">\n                {display}\n              </h4>\n            );\n\n          case \"muted\":\n            return (\n              <p key={field.key} className=\"text-sm text-muted-foreground\">\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n\n          default:\n            // \"text\" or any unknown type\n            return (\n              <p key={field.key} className={cn(\"text-sm\", field.className)}>\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n        }\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AA8BA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,QAAK,WAAQ,gBAAY;CAEhC,IAAI,CAAC,GAAK,MACR,OAAO;CAGT,IAAM,IAAO,EAAI;CAgBjB,OAbI,CAAC,KAAU,EAAO,WAAW,IAE7B,kBAAC,OAAD;EAAK,WAAU;EAA8B,gBAAc;YACxD,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAK,OAC/B,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAqD,GAAI,IAAQ;MACjE,kBAAC,QAAD,EAAA,UAAO,OAAO,KAAS,EAAE,EAAQ,CAAA,CAC9B,EAAA,GAHK,CAGL,CACN;CACE,CAAA,IAKP,kBAAC,OAAD;EAAK,WAAU;EAAsB,gBAAc;YAChD,EAAO,KAAK,MAAmC;GAC9C,IAAM,IAAQ,EAAK,EAAM,MACnB,IAAU,KAAS,OAAO,KAAK,OAAO,CAAK;GAEjD,QAAQ,EAAM,MAAd;IACE,KAAK,SACH,OACE,kBAAC,MAAD;KAAoB,WAAU;eAC3B;IACC,GAFK,EAAM,GAEX;IAGR,KAAK,SACH,OACE,kBAAC,KAAD;KAAmB,WAAU;eAC1B,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;IAGP,SAEE,OACE,kBAAC,KAAD;KAAmB,WAAW,EAAG,WAAW,EAAM,SAAS;eACxD,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;GAET;EACF,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"dataTableRowDetail.component.js","names":[],"sources":["../../../src/cards/dataTable/dataTableRowDetail.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {\n  DataTableRowDetailField,\n  DataTableRowDetailProps,\n} from \"./dataTable.types\";\n\n/**\n * DataTableRowDetail — generic detail-panel card for use with DataTable.\n *\n * Register it ONCE as a template, then reference it in every row via\n * `detailCard`.  The DataTable passes the row via `cardKey` + `row` context\n * props so a state mapper on the `row` field delivers the correct data:\n *\n * ```ts\n * registerCard(\n *   \"app/myTable/rowDetail\",\n *   DataTableRowDetail({\n *     // State mapper — ctx.ctxtProps.row is injected by the DataTable\n *     row: (_, ctx) => ctx.ctxtProps?.row,\n *     fields: [\n *       { key: \"title\",    type: \"title\" },\n *       { key: \"director\", label: \"Director\" },\n *       { key: \"plot\",     type: \"muted\" },\n *     ],\n *   }),\n * );\n * ```\n */\nexport const DataTableRowDetailComponent = (\n  props: PiCardProps<DataTableRowDetailProps>,\n): React.ReactNode => {\n  const {row, fields, cardName} = props;\n\n  if (!row?.data) {\n    return null;\n  }\n\n  const data = row.data as Record<string, unknown>;\n\n  /** If no `fields` config, auto-render all keys as plain text */\n  if (!fields || fields.length === 0) {\n    return (\n      <div className=\"flex flex-col gap-1 text-sm\" data-pihanga={cardName}>\n        {Object.entries(data).map(([key, value]) => (\n          <div key={key}>\n            <span className=\"font-medium text-muted-foreground\">{key}: </span>\n            <span>{String(value ?? \"\")}</span>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1\" data-pihanga={cardName}>\n      {fields.map((field: DataTableRowDetailField) => {\n        const value = data[field.key];\n        const display = value == null ? \"\" : String(value);\n\n        switch (field.type) {\n          case \"title\":\n            return (\n              <h4 key={field.key} className=\"text-base font-semibold\">\n                {display}\n              </h4>\n            );\n\n          case \"muted\":\n            return (\n              <p key={field.key} className=\"text-sm text-muted-foreground\">\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n\n          default:\n            // \"text\" or any unknown type\n            return (\n              <p key={field.key} className={cn(\"text-sm\", field.className)}>\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n        }\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;AA8BA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,QAAK,WAAQ,gBAAY;CAEhC,IAAI,CAAC,GAAK,MACR,OAAO;CAGT,IAAM,IAAO,EAAI;CAgBjB,OAbI,CAAC,KAAU,EAAO,WAAW,IAE7B,kBAAC,OAAD;EAAK,WAAU;EAA8B,gBAAc;YACxD,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAK,OAC/B,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAqD,GAAI,IAAQ;MACjE,kBAAC,QAAD,EAAA,UAAO,OAAO,KAAS,EAAE,EAAQ,CAAA,CAC9B,EAAA,GAHK,CAGL,CACN;CACE,CAAA,IAKP,kBAAC,OAAD;EAAK,WAAU;EAAsB,gBAAc;YAChD,EAAO,KAAK,MAAmC;GAC9C,IAAM,IAAQ,EAAK,EAAM,MACnB,IAAU,KAAS,OAAO,KAAK,OAAO,CAAK;GAEjD,QAAQ,EAAM,MAAd;IACE,KAAK,SACH,OACE,kBAAC,MAAD;KAAoB,WAAU;eAC3B;IACC,GAFK,EAAM,GAEX;IAGR,KAAK,SACH,OACE,kBAAC,KAAD;KAAmB,WAAU;eAC1B,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;IAGP,SAEE,OACE,kBAAC,KAAD;KAAmB,WAAW,EAAG,WAAW,EAAM,SAAS;eACxD,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;GAET;EACF,CAAC;CACE,CAAA;AAET"}