@pihanga2/shadcn 0.1.0

package/cards/resizable/resizable.types.d.ts

@@ -0,0 +1,49 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const RESIZABLE_CARD = "shad/resizable";
+export declare const SdResizable: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ResizableProps<unknown>, S, {}>) => import('@pihanga2/core').PiCardDef;
+/** Convenience alias — same as {@link SdResizable}. */
+export declare const Resizable: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ResizableProps<unknown>, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type ResizableProps<S = unknown> = {
+    /** Ordered list of panels to render inside the resizable group. */
+    content: PiResizablePanel[];
+    /** Layout direction of the panel group.  Defaults to `"horizontal"`. */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Handle configuration(s) between panels.
+     *
+     * - A single `PiResizableHandle` is used for every handle in the group.
+     * - An array must have exactly `content.length - 1` entries.
+     *
+     * Defaults to {@link DefResizableHandle} (visible drag handle).
+     */
+    handles?: PiResizableHandle | PiResizableHandle[];
+    className?: string;
+    /**
+     * Optional Shadcn-style style overrides.
+     *
+     * When provided as `{ shad?: { root?: string; panel?: string; handle?: string } }`,
+     * the nested class names are applied to the corresponding elements in
+     * addition to any `className` already set.
+     */
+    style?: S;
+};
+export type PiResizablePanel = {
+    /** Used for CSS class suffixes and stable ordering.  Defaults to `"panel{idx}"`. */
+    name?: string;
+    /** The card to render inside this panel. */
+    content: PiCardRef;
+    /** Initial size as a percentage of the group.  Defaults to `50`. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** When `true`, the panel can be collapsed to zero size. */
+    collapsible?: boolean;
+};
+export type PiResizableHandle = {
+    /** When `true`, renders a visible drag-handle grip indicator. */
+    withHandle?: boolean;
+    /** When `true`, the handle is decorative only (not draggable). */
+    disabled?: boolean;
+};
+/** Default handle configuration: visible grip, draggable. */
+export declare const DefResizableHandle: PiResizableHandle;

package/cards/select/index.d.ts

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

package/cards/select/index.js

@@ -0,0 +1,13 @@
+import { SelectComponent as e } from "./select.component.js";
+import { PI_SELECT_ACTION as t, PI_SELECT_CARD as n, Select as r, onPiSelectChanged as i, onPiSelectClosed as a, onPiSelectOpened as o } from "./select.types.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/select/index.ts
+c({
+	name: n,
+	component: e,
+	events: s(t)
+});
+//#endregion
+export { t as PI_SELECT_ACTION, n as PI_SELECT_CARD, r as Select, i as onPiSelectChanged, a as onPiSelectClosed, o as onPiSelectOpened };
+
+//# sourceMappingURL=index.js.map

package/cards/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/select/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {SelectComponent} from \"./select.component\";\nimport {PI_SELECT_ACTION, PI_SELECT_CARD} from \"./select.types\";\n\nexport * from \"./select.types\";\n\nregisterCardComponent({\n  name: PI_SELECT_CARD,\n  component: SelectComponent,\n  events: actionTypesToEvents(PI_SELECT_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAgB;AAC9C,CAAC"}

package/cards/select/select.component.d.ts

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

package/cards/select/select.component.js

@@ -0,0 +1,41 @@
+import { useFormContext as e } from "../form/form.context.js";
+import { Select as t, SelectContent as n, SelectGroup as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../components/ui/select.js";
+import { useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/cards/select/select.component.tsx
+var u = (u) => {
+	let { name: d, value: f = "", defaultValue: p, selfManaged: m = !1, options: h, placeholder: g, required: _, disabled: v, ariaLabel: y, cardName: b, onChanged: x, onOpened: S, onClosed: C } = u, w = u.id, T = !!u.invalid, E = e(), D = E.isInForm && !!d, [O, k] = s(p ?? f), A = D ? E.formData[d] ?? "" : m ? O : f;
+	function j(e) {
+		D ? E.handleChange(d, e) : (m && k(e), x({
+			name: d,
+			value: e
+		}));
+	}
+	function M(e) {
+		e ? S({}) : C({});
+	}
+	let N = `${b}-${d ?? "select"}`;
+	return /* @__PURE__ */ l(t, {
+		value: A,
+		defaultValue: p,
+		onValueChange: j,
+		onOpenChange: M,
+		disabled: v,
+		required: _,
+		"aria-label": y,
+		children: [/* @__PURE__ */ c(a, {
+			id: w ?? N,
+			"aria-invalid": T || void 0,
+			"data-pihanga": b,
+			children: /* @__PURE__ */ c(o, { placeholder: g ?? "Select…" })
+		}), /* @__PURE__ */ c(n, { children: /* @__PURE__ */ c(r, { children: h.map((e) => /* @__PURE__ */ c(i, {
+			value: e.value,
+			disabled: e.disabled,
+			children: e.label
+		}, e.value)) }) })]
+	});
+};
+//#endregion
+export { u as SelectComponent };
+
+//# sourceMappingURL=select.component.js.map

package/cards/select/select.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.component.js","names":[],"sources":["../../../src/cards/select/select.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Select as RadixSelect,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiSelectEvents, PiSelectProps} from \"./select.types\";\n\nexport const SelectComponent = (\n  props: PiCardProps<PiSelectProps, PiSelectEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    defaultValue,\n    selfManaged = false,\n    options,\n    placeholder,\n    required,\n    disabled,\n    ariaLabel,\n    cardName,\n    onChanged,\n    onOpened,\n    onClosed,\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  // Internal state used only when selfManaged=true and not bound to a form.\n  const [managedValue, setManagedValue] = useState<string>(\n    defaultValue ?? propValue,\n  );\n\n  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : selfManaged\n      ? managedValue\n      : propValue;\n\n  function handleChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      if (selfManaged) {\n        setManagedValue(newValue);\n      }\n      onChanged({name, value: newValue});\n    }\n  }\n\n  function handleOpenChange(open: boolean) {\n    if (open) {\n      onOpened({});\n    } else {\n      onClosed({});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"select\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <RadixSelect\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={handleChange}\n      onOpenChange={handleOpenChange}\n      disabled={disabled}\n      required={required}\n      aria-label={ariaLabel}\n    >\n      <SelectTrigger\n        id={fieldId}\n        aria-invalid={invalid || undefined}\n        data-pihanga={cardName}\n      >\n        <SelectValue placeholder={placeholder ?? \"Select…\"} />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectGroup>\n          {options.map((opt) => (\n            <SelectItem\n              key={opt.value}\n              value={opt.value}\n              disabled={opt.disabled}\n            >\n              {opt.label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectContent>\n    </RadixSelect>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,iBACA,iBAAc,IACd,YACA,gBACA,aACA,aACA,cACA,aACA,cACA,aACA,gBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAGvC,CAAC,GAAc,KAAmB,EACtC,KAAgB,CAClB,GAEM,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD,IACE,IACA;CAEN,SAAS,EAAa,GAAkB;EACtC,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAE7B,KACF,EAAgB,CAAQ,GAE1B,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAEA,SAAS,EAAiB,GAAe;EACvC,AAAI,IACF,EAAS,CAAC,CAAC,IAEX,EAAS,CAAC,CAAC;CAEf;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACS;EACO;EACd,eAAe;EACf,cAAc;EACJ;EACA;EACV,cAAY;YAPd,CASE,kBAAC,GAAD;GACE,IAbU,KAAc;GAcxB,gBAAc,KAAW,KAAA;GACzB,gBAAc;aAEd,kBAAC,GAAD,EAAa,aAAa,KAAe,UAAY,CAAA;EACxC,CAAA,GACf,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,GAAD;GAEE,OAAO,EAAI;GACX,UAAU,EAAI;aAEb,EAAI;EACK,GALL,EAAI,KAKC,CACb,EACU,CAAA,EACA,CAAA,CACJ;;AAEjB"}

package/cards/select/select.types.d.ts

@@ -0,0 +1,73 @@
+export declare const PI_SELECT_CARD = "pi/select";
+export declare const Select: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiSelectProps, S, PiSelectEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_SELECT_ACTION: {
+    CHANGED: string;
+    CLOSED: string;
+    OPENED: string;
+};
+export declare const onPiSelectChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectChangedEvent>) => void;
+export declare const onPiSelectOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectOpenedEvent>) => void;
+export declare const onPiSelectClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiSelectClosedEvent>) => void;
+export type PiSelectOption = {
+    /** The value stored in form state / dispatched in events. */
+    value: string;
+    /** Human-readable label shown in the dropdown. */
+    label: string;
+    /** When true, the option is shown but cannot be selected. */
+    disabled?: boolean;
+};
+export type PiSelectProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its selected value from form data and
+     * writes back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * Controlled value used in standalone mode (outside a Form).
+     * Ignored when `name` is set and the component is inside a pi/form.
+     */
+    value?: string;
+    /**
+     * When true the component manages its own selected-value state internally.
+     * Selecting an item will still dispatch the normal `onChanged` action, but
+     * the UI will immediately reflect the new selection without waiting for the
+     * host application to update `value` via a reducer.
+     *
+     * Has no effect when the component is bound to a pi/form via `name`.
+     */
+    selfManaged?: boolean;
+    /**
+     * Default (uncontrolled) value. Mirrors Radix `defaultValue`.
+     */
+    defaultValue?: string;
+    /** Available options to display in the dropdown. */
+    options: PiSelectOption[];
+    /** Placeholder text shown when no option is selected. */
+    placeholder?: string;
+    /** When true, the select is required (HTML form attribute). */
+    required?: boolean;
+    /** When true, the select is disabled and non-interactive. */
+    disabled?: boolean;
+    /** Accessible label for screen readers. */
+    ariaLabel?: string;
+};
+export type PiSelectChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** The value of the newly selected option. */
+    value: string;
+};
+export type PiSelectOpenedEvent = Record<string, never>;
+export type PiSelectClosedEvent = Record<string, never>;
+export type PiSelectEvents = {
+    onChanged: PiSelectChangedEvent;
+    onOpened: PiSelectOpenedEvent;
+    onClosed: PiSelectClosedEvent;
+};

package/cards/select/select.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/select/select.types.ts
+var r = "pi/select", i = e(r), a = n(r, [
+	"changed",
+	"opened",
+	"closed"
+]), o = t(a.CHANGED), s = t(a.OPENED), c = t(a.CLOSED);
+//#endregion
+export { a as PI_SELECT_ACTION, r as PI_SELECT_CARD, i as Select, o as onPiSelectChanged, c as onPiSelectClosed, s as onPiSelectOpened };
+
+//# sourceMappingURL=select.types.js.map

package/cards/select/select.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.types.js","names":[],"sources":["../../../src/cards/select/select.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SELECT_CARD = \"pi/select\";\n\nexport const Select = createCardDeclaration<PiSelectProps, PiSelectEvents>(\n  PI_SELECT_CARD,\n);\n\nexport const PI_SELECT_ACTION = registerActions(PI_SELECT_CARD, [\n  \"changed\",\n  \"opened\",\n  \"closed\",\n]);\n\nexport const onPiSelectChanged = createOnAction<PiSelectChangedEvent>(\n  PI_SELECT_ACTION.CHANGED,\n);\n\nexport const onPiSelectOpened = createOnAction<PiSelectOpenedEvent>(\n  PI_SELECT_ACTION.OPENED,\n);\n\nexport const onPiSelectClosed = createOnAction<PiSelectClosedEvent>(\n  PI_SELECT_ACTION.CLOSED,\n);\n\nexport type PiSelectOption = {\n  /** The value stored in form state / dispatched in events. */\n  value: string;\n  /** Human-readable label shown in the dropdown. */\n  label: string;\n  /** When true, the option is shown but cannot be selected. */\n  disabled?: boolean;\n};\n\nexport type PiSelectProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * When true the component manages its own selected-value state internally.\n   * Selecting an item will still dispatch the normal `onChanged` action, but\n   * the UI will immediately reflect the new selection without waiting for the\n   * host application to update `value` via a reducer.\n   *\n   * Has no effect when the component is bound to a pi/form via `name`.\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Default (uncontrolled) value. Mirrors Radix `defaultValue`.\n   */\n  defaultValue?: string;\n\n  /** Available options to display in the dropdown. */\n  options: PiSelectOption[];\n\n  /** Placeholder text shown when no option is selected. */\n  placeholder?: string;\n\n  /** When true, the select is required (HTML form attribute). */\n  required?: boolean;\n\n  /** When true, the select is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Accessible label for screen readers. */\n  ariaLabel?: string;\n};\n\nexport type PiSelectChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** The value of the newly selected option. */\n  value: string;\n};\n\nexport type PiSelectOpenedEvent = Record<string, never>;\n\nexport type PiSelectClosedEvent = Record<string, never>;\n\nexport type PiSelectEvents = {\n  onChanged: PiSelectChangedEvent;\n  onOpened: PiSelectOpenedEvent;\n  onClosed: PiSelectClosedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB;CAC9D;CACA;CACA;AACF,CAAC,GAEY,IAAoB,EAC/B,EAAiB,OACnB,GAEa,IAAmB,EAC9B,EAAiB,MACnB,GAEa,IAAmB,EAC9B,EAAiB,MACnB"}

package/cards/stack/index.d.ts

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

package/cards/stack/index.js

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

package/cards/stack/index.js.map

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

package/cards/stack/stack.component.d.ts

@@ -0,0 +1,7 @@
+import { StackProps } from './stack.types';
+import { PiCardProps } from '@pihanga2/core';
+import * as React from "react";
+export type SelectSD = {
+    root?: string;
+};
+export declare const Component: (props: PiCardProps<StackProps>) => React.ReactNode;

package/cards/stack/stack.component.js

@@ -0,0 +1,83 @@
+import { Card as e } from "@pihanga2/core";
+import { Fragment as t } from "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/cards/stack/stack.component.tsx
+var a = (a) => {
+	let { content: o, direction: s, divider: c, spacing: l, justifyContent: u, alignItems: d, className: f, style: p, cardName: m } = a, h = [
+		f,
+		(p?.shad || {}).root,
+		"flex"
+	];
+	if (s) switch (s) {
+		case "row":
+			h.push("flex-row");
+			break;
+		case "row-reverse":
+			h.push("flex-row-reverse");
+			break;
+		case "column":
+			h.push("flex-col");
+			break;
+		case "column-reverse":
+			h.push("flex-col-reverse");
+			break;
+	}
+	if (u) switch (u) {
+		case "flex-start":
+			h.push("justify-start");
+			break;
+		case "center":
+			h.push("justify-center");
+			break;
+		case "flex-end":
+			h.push("justify-end");
+			break;
+		case "space-between":
+			h.push("justify-between");
+			break;
+		case "space-around":
+			h.push("justify-around");
+			break;
+		case "space-evenly":
+			h.push("justify-evenly");
+			break;
+	}
+	if (d) switch (d) {
+		case "flex-start":
+			h.push("items-start");
+			break;
+		case "center":
+			h.push("items-center");
+			break;
+		case "stretch":
+			h.push("items-stretch");
+			break;
+		case "flex-end":
+			h.push("items-end");
+			break;
+		case "baseline":
+			h.push("items-baseline");
+			break;
+		default: console.warn("stack: unsupported 'alignItems' property", d);
+	}
+	l && l > 0 && h.push(`gap-${l}`);
+	function g() {
+		return o ? o.map((n, a) => /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ r(e, {
+			cardName: n,
+			parentCard: m
+		}, `item-${a}`), c && a < o.length - 1 && /* @__PURE__ */ r(e, {
+			cardName: c,
+			parentCard: m
+		}, `divider-${a}`)] }, a)) : null;
+	}
+	return /* @__PURE__ */ i("div", {
+		className: n(h),
+		"data-pihanga": m,
+		children: [g(), a.children]
+	});
+};
+//#endregion
+export { a as Component };
+
+//# sourceMappingURL=stack.component.js.map

package/cards/stack/stack.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.component.js","names":[],"sources":["../../../src/cards/stack/stack.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {StackProps} from \"./stack.types\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\nimport {Fragment} from \"react\";\n\nexport type SelectSD = {\n  root?: string;\n};\n\nexport const Component = (props: PiCardProps<StackProps>): React.ReactNode => {\n  const {\n    content,\n    direction,\n    divider,\n    spacing,\n    justifyContent,\n    alignItems,\n    className,\n    style,\n    cardName,\n  } = props;\n  const sd: SelectSD = (style as {shad?: SelectSD} | undefined)?.shad || {};\n\n  const cn = [className, sd.root, \"flex\"];\n  if (direction) {\n    switch (direction) {\n      // \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\"\n      case \"row\":\n        cn.push(\"flex-row\");\n        break;\n      case \"row-reverse\":\n        cn.push(\"flex-row-reverse\");\n        break;\n      case \"column\":\n        cn.push(\"flex-col\");\n        break;\n      case \"column-reverse\":\n        cn.push(\"flex-col-reverse\");\n        break;\n    }\n  }\n  if (justifyContent) {\n    switch (justifyContent) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"\n      case \"flex-start\":\n        cn.push(\"justify-start\");\n        break;\n      case \"center\":\n        cn.push(\"justify-center\");\n        break;\n      case \"flex-end\":\n        cn.push(\"justify-end\");\n        break;\n      case \"space-between\":\n        cn.push(\"justify-between\");\n        break;\n      case \"space-around\":\n        cn.push(\"justify-around\");\n        break;\n      case \"space-evenly\":\n        cn.push(\"justify-evenly\");\n        break;\n    }\n  }\n  if (alignItems) {\n    switch (alignItems) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"normal\" | \"stretch\" | \"start\" | \"end\" | \"baseline\" | \"initial\" | \"inherit\"\n      case \"flex-start\":\n        cn.push(\"items-start\");\n        break;\n      case \"center\":\n        cn.push(\"items-center\");\n        break;\n      case \"stretch\":\n        cn.push(\"items-stretch\");\n        break;\n      case \"flex-end\":\n        cn.push(\"items-end\");\n        break;\n      case \"baseline\":\n        cn.push(\"items-baseline\");\n        break;\n      default:\n        console.warn(\"stack: unsupported 'alignItems' property\", alignItems);\n    }\n  }\n  if (spacing && spacing > 0) {\n    if (\n      direction === undefined ||\n      direction === \"row\" ||\n      direction === \"row-reverse\"\n    ) {\n      cn.push(`gap-${spacing}`);\n    } else {\n      cn.push(`gap-${spacing}`);\n    }\n  }\n\n  function renderContent() {\n    if (!content) return null;\n\n    return content.map((cn, i) => (\n      <Fragment key={i}>\n        <Card cardName={cn} parentCard={cardName} key={`item-${i}`} />\n        {divider && i < content.length - 1 && (\n          <Card cardName={divider} parentCard={cardName} key={`divider-${i}`} />\n        )}\n      </Fragment>\n    ));\n  }\n\n  return (\n    <div className={clsx(cn)} data-pihanga={cardName}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAWA,IAAa,KAAa,MAAoD;CAC5E,IAAM,EACJ,YACA,cACA,YACA,YACA,mBACA,eACA,cACA,UACA,gBACE,GAGE,IAAK;EAAC;GAFU,GAAyC,QAAQ,CAAC,GAE9C;EAAM;CAAM;CACtC,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;EACF,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,iBAAiB;GACzB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,cAAc;GACtB;EACF,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,WAAW;GACnB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,SACE,QAAQ,KAAK,4CAA4C,CAAU;CACvE;CAEF,AAAI,KAAW,IAAU,KAMrB,EAAG,KAAK,OAAO,GAAS;CAM5B,SAAS,IAAgB;EAGvB,OAFK,IAEE,EAAQ,KAAK,GAAI,MACtB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAA6B,GAAd,QAAQ,GAAM,GAC5D,KAAW,IAAI,EAAQ,SAAS,KAC/B,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAgC,GAAjB,WAAW,GAAM,CAE/D,EAAA,GALK,CAKL,CACX,IAToB;CAUvB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,CAAE;EAAG,gBAAc;YAAxC,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}

package/cards/stack/stack.types.d.ts

@@ -0,0 +1,47 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const STACK_CARD = "shad/stack";
+/**
+ * CSS `flex-direction` values supported by the Stack card.
+ */
+export type DirectionT = "column-reverse" | "column" | "row-reverse" | "row";
+/**
+ * CSS `justify-content` values supported by the Stack card.
+ */
+export type JustifyContentT = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+/**
+ * CSS `align-items` values supported by the Stack card.
+ */
+export type AlignItemsT = "normal" | "stretch" | "center" | "flex-start" | "flex-end" | "start" | "end" | "baseline" | "initial" | "inherit";
+export type StackProps<S = object> = {
+    /** Ordered list of child card refs to render */
+    content: PiCardRef[];
+    /** Flex direction — defaults to `"column"` */
+    direction?: DirectionT;
+    /** Optional card ref rendered as a separator between children */
+    divider?: PiCardRef;
+    /** Tailwind gap spacing units between children */
+    spacing?: number;
+    justifyContent?: JustifyContentT;
+    alignItems?: AlignItemsT;
+    /** Additional Tailwind utility classes */
+    className?: string;
+    /** Card style object (use the `shad` key for Tailwind-compatible overrides) */
+    style?: S;
+};
+/**
+ * Factory function for declaring a `shad/stack` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {Stack} from "@/cards/stack";
+ *
+ * registerCard("myApp/toolbar", Stack({
+ *   direction:      "row",
+ *   spacing:        2,
+ *   alignItems:     "center",
+ *   justifyContent: "space-between",
+ *   content:        ["myApp/logo", "myApp/navLinks", "myApp/userMenu"],
+ * }));
+ * ```
+ */
+export declare const Stack: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<StackProps<object>, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/stack/stack.types.js

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

package/cards/stack/stack.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.types.js","names":[],"sources":["../../../src/cards/stack/stack.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const STACK_CARD = \"shad/stack\";\n\n/**\n * CSS `flex-direction` values supported by the Stack card.\n */\nexport type DirectionT = \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\";\n\n/**\n * CSS `justify-content` values supported by the Stack card.\n */\nexport type JustifyContentT =\n  | \"flex-start\"\n  | \"center\"\n  | \"flex-end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\n/**\n * CSS `align-items` values supported by the Stack card.\n */\nexport type AlignItemsT =\n  | \"normal\"\n  | \"stretch\"\n  | \"center\"\n  | \"flex-start\"\n  | \"flex-end\"\n  | \"start\"\n  | \"end\"\n  | \"baseline\"\n  | \"initial\"\n  | \"inherit\";\n\nexport type StackProps<S = object> = {\n  /** Ordered list of child card refs to render */\n  content: PiCardRef[];\n\n  /** Flex direction — defaults to `\"column\"` */\n  direction?: DirectionT;\n  /** Optional card ref rendered as a separator between children */\n  divider?: PiCardRef;\n  /** Tailwind gap spacing units between children */\n  spacing?: number;\n\n  justifyContent?: JustifyContentT;\n  alignItems?: AlignItemsT;\n\n  /** Additional Tailwind utility classes */\n  className?: string;\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n};\n\n/**\n * Factory function for declaring a `shad/stack` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Stack} from \"@/cards/stack\";\n *\n * registerCard(\"myApp/toolbar\", Stack({\n *   direction:      \"row\",\n *   spacing:        2,\n *   alignItems:     \"center\",\n *   justifyContent: \"space-between\",\n *   content:        [\"myApp/logo\", \"myApp/navLinks\", \"myApp/userMenu\"],\n * }));\n * ```\n */\nexport const Stack = createCardDeclaration<StackProps>(STACK_CARD);\n"],"mappings":";;AAEA,IAAa,IAAa,cAqEb,IAAQ,EAAkC,CAAU"}

package/cards/stepper/index.d.ts

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

package/cards/stepper/index.js

@@ -0,0 +1,13 @@
+import { StepperComponent as e } from "./stepper.component.js";
+import { STEPPER_ACTION as t, STEPPER_CARD as n, Stepper as r, onStepperStepClicked as i } from "./stepper.types.js";
+import { registerCardComponent as a } from "@pihanga2/core";
+//#region src/cards/stepper/index.ts
+a({
+	name: n,
+	component: e,
+	events: { onStepClicked: t.STEPCLICKED }
+});
+//#endregion
+export { t as STEPPER_ACTION, n as STEPPER_CARD, r as Stepper, i as onStepperStepClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/stepper/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {StepperComponent} from \"./stepper.component\";\nimport {STEPPER_ACTION, STEPPER_CARD} from \"./stepper.types\";\n\nexport * from \"./stepper.types\";\n\nregisterCardComponent({\n  name: STEPPER_CARD,\n  component: StepperComponent,\n  // Explicit mapping avoids CamelCase issues: STEPCLICKED → onStepClicked\n  // (actionTypesToEvents would produce onStepclicked with lowercase 'c').\n  events: {\n    onStepClicked: STEPPER_ACTION.STEPCLICKED,\n  },\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CAGX,QAAQ,EACN,eAAe,EAAe,YAChC;AACF,CAAC"}

package/cards/stepper/stepper.component.d.ts

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

package/cards/stepper/stepper.component.js

@@ -0,0 +1,48 @@
+import { StepperUI as e } from "../../components/ui/stepper.js";
+/* empty css        */
+import { Card as t } from "@pihanga2/core";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/cards/stepper/stepper.component.tsx
+var i = (i) => {
+	let { steps: a, activeStep: o, defaultActiveStep: s = 0, selfManaged: c = !1, orientation: l = "horizontal", size: u = "md", showContent: d = !1, className: f, cardName: p, onStepClicked: m } = i, [h, g] = n(o ?? s), _ = c ? h : o ?? 0, v = a.map((e) => ({
+		id: e.id,
+		title: e.title,
+		description: e.description,
+		optional: e.optional,
+		labelNode: e.labelCard ? /* @__PURE__ */ r(t, {
+			cardName: e.labelCard,
+			parentCard: p
+		}) : void 0
+	}));
+	function y(e, t) {
+		c && g(e), typeof m == "function" && m({
+			stepIndex: e,
+			stepId: t
+		});
+	}
+	function b(e) {
+		if (!d || l !== "vertical") return null;
+		let n = a[e];
+		return n?.contentCard ? /* @__PURE__ */ r(t, {
+			cardName: n.contentCard,
+			parentCard: p
+		}) : null;
+	}
+	return /* @__PURE__ */ r("div", {
+		"data-pihanga": p,
+		children: /* @__PURE__ */ r(e, {
+			steps: v,
+			activeStep: _,
+			orientation: l,
+			size: u,
+			className: f,
+			onStepClick: y,
+			renderStepContent: b
+		})
+	});
+};
+//#endregion
+export { i as StepperComponent };
+
+//# sourceMappingURL=stepper.component.js.map

package/cards/stepper/stepper.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.component.js","names":[],"sources":["../../../src/cards/stepper/stepper.component.tsx"],"sourcesContent":["import React, {useState} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {StepperUI, type StepData} from \"@/components/ui/stepper\";\nimport type {StepperEvents, StepperProps} from \"./stepper.types\";\n// Default visual styles — import before component renders so BEM classes are styled.\n// Override by targeting the same class names in a stylesheet loaded after this one.\nimport \"./stepper.css\";\n\nexport const StepperComponent = (\n  props: PiCardProps<StepperProps, StepperEvents>,\n): React.ReactNode => {\n  const {\n    steps,\n    activeStep: propActiveStep,\n    defaultActiveStep = 0,\n    selfManaged = false,\n    orientation = \"horizontal\",\n    size = \"md\",\n    showContent = false,\n    className,\n    cardName,\n    onStepClicked,\n  } = props;\n\n  // Internal state used only when selfManaged=true.\n  // Initialised from propActiveStep (if given) or defaultActiveStep.\n  const [managedStep, setManagedStep] = useState<number>(\n    propActiveStep ?? defaultActiveStep,\n  );\n\n  // Resolve the effective active step:\n  //   - selfManaged  → use internal state\n  //   - controlled   → use the prop (fall back to 0 if not set)\n  const activeStep = selfManaged ? managedStep : (propActiveStep ?? 0);\n\n  // Map StepItem[] → StepData[] (UI primitive only needs serialisable fields\n  // plus an optional pre-rendered React node for custom labels).\n  const stepData: StepData[] = steps.map((step) => ({\n    id: step.id,\n    title: step.title,\n    description: step.description,\n    optional: step.optional,\n    // If a labelCard is specified, render it here and pass as `labelNode`.\n    // The UI primitive will display it instead of the default title/description.\n    labelNode: step.labelCard ? (\n      <Card cardName={step.labelCard} parentCard={cardName} />\n    ) : undefined,\n  }));\n\n  function handleStepClick(stepIndex: number, stepId: string) {\n    if (selfManaged) {\n      setManagedStep(stepIndex);\n    }\n    // Dispatch Pihanga event when the callback is wired (it may be absent for\n    // inline / anonymous card declarations that have no registered reducer).\n    if (typeof onStepClicked === \"function\") {\n      onStepClicked({stepIndex, stepId});\n    }\n  }\n\n  /**\n   * Render a card ref for the active step's content (vertical mode only).\n   * We look up the original `steps` array to get the `contentCard` reference.\n   */\n  function renderStepContent(stepIndex: number): React.ReactNode {\n    if (!showContent || orientation !== \"vertical\") return null;\n    const step = steps[stepIndex];\n    if (!step?.contentCard) return null;\n    return <Card cardName={step.contentCard} parentCard={cardName} />;\n  }\n\n  return (\n    <div data-pihanga={cardName}>\n      <StepperUI\n        steps={stepData}\n        activeStep={activeStep}\n        orientation={orientation}\n        size={size}\n        className={className}\n        onStepClick={handleStepClick}\n        renderStepContent={renderStepContent}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAQA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,YAAY,GACZ,uBAAoB,GACpB,iBAAc,IACd,iBAAc,cACd,UAAO,MACP,iBAAc,IACd,cACA,aACA,qBACE,GAIE,CAAC,GAAa,KAAkB,EACpC,KAAkB,CACpB,GAKM,IAAa,IAAc,IAAe,KAAkB,GAI5D,IAAuB,EAAM,KAAK,OAAU;EAChD,IAAI,EAAK;EACT,OAAO,EAAK;EACZ,aAAa,EAAK;EAClB,UAAU,EAAK;EAGf,WAAW,EAAK,YACd,kBAAC,GAAD;GAAM,UAAU,EAAK;GAAW,YAAY;EAAW,CAAA,IACrD,KAAA;CACN,EAAE;CAEF,SAAS,EAAgB,GAAmB,GAAgB;EAM1D,AALI,KACF,EAAe,CAAS,GAItB,OAAO,KAAkB,cAC3B,EAAc;GAAC;GAAW;EAAM,CAAC;CAErC;CAMA,SAAS,EAAkB,GAAoC;EAC7D,IAAI,CAAC,KAAe,MAAgB,YAAY,OAAO;EACvD,IAAM,IAAO,EAAM;EAEnB,OADK,GAAM,cACJ,kBAAC,GAAD;GAAM,UAAU,EAAK;GAAa,YAAY;EAAW,CAAA,IADjC;CAEjC;CAEA,OACE,kBAAC,OAAD;EAAK,gBAAc;YACjB,kBAAC,GAAD;GACE,OAAO;GACK;GACC;GACP;GACK;GACX,aAAa;GACM;EACpB,CAAA;CACE,CAAA;AAET"}

package/cards/stepper/stepper.types.d.ts

@@ -0,0 +1,96 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const STEPPER_CARD = "shad/stepper";
+export declare const Stepper: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<StepperProps, S, StepperEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const STEPPER_ACTION: {
+    STEPCLICKED: string;
+};
+export declare const onStepperStepClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & StepperStepClickedEvent>) => void;
+/**
+ * A single step in the stepper.
+ */
+export type StepItem = {
+    /** Unique identifier used in events. */
+    id: string;
+    /** Short label shown below/beside the step indicator. */
+    title: string;
+    /** Optional secondary text shown under the title. */
+    description?: string;
+    /**
+     * If true, an "(Optional)" suffix is appended to the title.
+     * Mirrors the MUI Joy UI `optional` prop.
+     */
+    optional?: boolean;
+    /**
+     * Optional Pihanga card rendered **instead of** the default title/description
+     * text label.  Useful for rich labels (icons, custom markup, etc.).
+     * The card receives no extra props — use `memo` in its own declaration if
+     * it needs to read from state.
+     */
+    labelCard?: PiCardRef;
+    /**
+     * A card ref rendered as the body of this step when it is active
+     * and the stepper is in `"vertical"` orientation with `showContent: true`.
+     */
+    contentCard?: PiCardRef;
+};
+export type StepperProps = {
+    /** Ordered list of step definitions. */
+    steps: StepItem[];
+    /**
+     * 0-based index of the currently active step (controlled mode).
+     * Steps before this index are rendered as "completed";
+     * steps after are "upcoming".
+     *
+     * Required in controlled mode (`selfManaged: false`).
+     * Used as the initial value in self-managed mode when provided
+     * (otherwise defaults to `defaultActiveStep ?? 0`).
+     */
+    activeStep?: number;
+    /**
+     * Initial active step used only in self-managed mode (`selfManaged: true`).
+     * Ignored in controlled mode.
+     * @default 0
+     */
+    defaultActiveStep?: number;
+    /**
+     * When `true`, the component manages its own `activeStep` state internally.
+     * Clicking a step immediately advances the indicator without waiting for the
+     * host application to update the `activeStep` prop via a reducer.
+     * The `onStepClicked` event is still dispatched on each click.
+     *
+     * When `false` (default), `activeStep` fully controls the display.
+     * @default false
+     */
+    selfManaged?: boolean;
+    /**
+     * Layout orientation.
+     * - `"horizontal"` (default): steps flow left-to-right with labels below.
+     * - `"vertical"`: steps stack top-to-bottom with labels/content to the right.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Visual size of the step indicators.
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * When `true` and `orientation === "vertical"`, the active step's
+     * `contentCard` is rendered inline beneath its label.
+     * @default false
+     */
+    showContent?: boolean;
+    /** Additional Tailwind classes applied to the root element. */
+    className?: string;
+};
+export type StepperStepClickedEvent = {
+    /** 0-based index of the clicked step. */
+    stepIndex: number;
+    /** The `id` of the clicked step definition. */
+    stepId: string;
+};
+export type StepperEvents = {
+    /** Fired when the user clicks on a step indicator. */
+    onStepClicked: StepperStepClickedEvent;
+};

package/cards/stepper/stepper.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/stepper/stepper.types.ts
+var r = "shad/stepper", i = e(r), a = n(r, ["stepClicked"]), o = t(a.STEPCLICKED);
+//#endregion
+export { a as STEPPER_ACTION, r as STEPPER_CARD, i as Stepper, o as onStepperStepClicked };
+
+//# sourceMappingURL=stepper.types.js.map

package/cards/stepper/stepper.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.types.js","names":[],"sources":["../../../src/cards/stepper/stepper.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const STEPPER_CARD = \"shad/stepper\";\n\nexport const Stepper = createCardDeclaration<StepperProps, StepperEvents>(\n  STEPPER_CARD,\n);\n\nexport const STEPPER_ACTION = registerActions(STEPPER_CARD, [\"stepClicked\"]);\n\nexport const onStepperStepClicked = createOnAction<StepperStepClickedEvent>(\n  STEPPER_ACTION.STEPCLICKED,\n);\n\n// ─── Step definition ─────────────────────────────────────────────────────────\n\n/**\n * A single step in the stepper.\n */\nexport type StepItem = {\n  /** Unique identifier used in events. */\n  id: string;\n\n  /** Short label shown below/beside the step indicator. */\n  title: string;\n\n  /** Optional secondary text shown under the title. */\n  description?: string;\n\n  /**\n   * If true, an \"(Optional)\" suffix is appended to the title.\n   * Mirrors the MUI Joy UI `optional` prop.\n   */\n  optional?: boolean;\n\n  /**\n   * Optional Pihanga card rendered **instead of** the default title/description\n   * text label.  Useful for rich labels (icons, custom markup, etc.).\n   * The card receives no extra props — use `memo` in its own declaration if\n   * it needs to read from state.\n   */\n  labelCard?: PiCardRef;\n\n  /**\n   * A card ref rendered as the body of this step when it is active\n   * and the stepper is in `\"vertical\"` orientation with `showContent: true`.\n   */\n  contentCard?: PiCardRef;\n};\n\n// ─── Card props ───────────────────────────────────────────────────────────────\n\nexport type StepperProps = {\n  /** Ordered list of step definitions. */\n  steps: StepItem[];\n\n  /**\n   * 0-based index of the currently active step (controlled mode).\n   * Steps before this index are rendered as \"completed\";\n   * steps after are \"upcoming\".\n   *\n   * Required in controlled mode (`selfManaged: false`).\n   * Used as the initial value in self-managed mode when provided\n   * (otherwise defaults to `defaultActiveStep ?? 0`).\n   */\n  activeStep?: number;\n\n  /**\n   * Initial active step used only in self-managed mode (`selfManaged: true`).\n   * Ignored in controlled mode.\n   * @default 0\n   */\n  defaultActiveStep?: number;\n\n  /**\n   * When `true`, the component manages its own `activeStep` state internally.\n   * Clicking a step immediately advances the indicator without waiting for the\n   * host application to update the `activeStep` prop via a reducer.\n   * The `onStepClicked` event is still dispatched on each click.\n   *\n   * When `false` (default), `activeStep` fully controls the display.\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Layout orientation.\n   * - `\"horizontal\"` (default): steps flow left-to-right with labels below.\n   * - `\"vertical\"`: steps stack top-to-bottom with labels/content to the right.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n\n  /**\n   * Visual size of the step indicators.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n\n  /**\n   * When `true` and `orientation === \"vertical\"`, the active step's\n   * `contentCard` is rendered inline beneath its label.\n   * @default false\n   */\n  showContent?: boolean;\n\n  /** Additional Tailwind classes applied to the root element. */\n  className?: string;\n};\n\n// ─── Events ───────────────────────────────────────────────────────────────────\n\nexport type StepperStepClickedEvent = {\n  /** 0-based index of the clicked step. */\n  stepIndex: number;\n  /** The `id` of the clicked step definition. */\n  stepId: string;\n};\n\nexport type StepperEvents = {\n  /** Fired when the user clicks on a step indicator. */\n  onStepClicked: StepperStepClickedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,gBAEf,IAAU,EACrB,CACF,GAEa,IAAiB,EAAgB,GAAc,CAAC,aAAa,CAAC,GAE9D,IAAuB,EAClC,EAAe,WACjB"}

package/cards/switch/index.d.ts

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