@pihanga2/shadcn 0.2.0 → 0.2.2

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  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/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/chart/chart.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+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,4 +1,5 @@
 import { useFormContext as e } from "../form/form.context.js";
+import "@pihanga2/core";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/checkbox/checkbox.component.tsx

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.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,54 @@
 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.
+ *
+ *  `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
+ * ─────────────────
+ *  `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 = 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.
  *
- * 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
+ *
+ * ### 1 · Manual boolean (existing behaviour)
  *
- * In a real app, drive `show` from a `memo()` selector so the card
- * reactively mounts/unmounts as state changes:
+ * Drive `show` from a `memo()` selector so the card reactively mounts/unmounts
+ * as state changes:
  *
  * ```ts
  * import {memo, registerCard} from "@pihanga2/core";
@@ -19,11 +59,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: `xs` | `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.\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';