@pihanga2/shadcn 0.1.0

package/cards/loadingSkeleton/loading-skeleton.component.d.ts

@@ -0,0 +1,19 @@
+import { PiCardProps } from '@pihanga2/core';
+import { LoadingSkeletonProps } from './loading-skeleton.types';
+import * as React from "react";
+/**
+ * LoadingSkeletonComponent
+ *
+ * While `loading` is `true`: renders `rows` animated shimmer rows inside a
+ * flex column wrapper.
+ *
+ * **Presets** — `rowSize` and `spacing` select named height / gap values
+ * without needing Tailwind knowledge.
+ *
+ * **Raw overrides** — `rowClassName` (overrides `rowSize`) and `className`
+ * (overrides `spacing`) accept arbitrary Tailwind classes for custom layouts.
+ *
+ * While `loading` is `false`: transparently passes through to `content` (no
+ * extra DOM wrapper) or renders nothing when `content` is omitted.
+ */
+export declare const LoadingSkeletonComponent: (props: PiCardProps<LoadingSkeletonProps>) => React.ReactNode;

package/cards/loadingSkeleton/loading-skeleton.component.js

@@ -0,0 +1,33 @@
+import { Card as e } from "@pihanga2/core";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/cards/loadingSkeleton/loading-skeleton.component.tsx
+var n = {
+	xs: "h-3",
+	sm: "h-5",
+	md: "h-10",
+	lg: "h-14",
+	xl: "h-20"
+}, r = {
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4"
+}, i = (i) => {
+	let { cardName: a, loading: o, rows: s = 3, rowSize: c = "md", spacing: l = "md", rowClassName: u, className: d, content: f } = i;
+	if (o) {
+		let e = u ?? `rounded-md bg-foreground/15 ${n[c]}`;
+		return /* @__PURE__ */ t("div", {
+			"data-pihanga": a,
+			className: d ?? `flex w-full flex-col ${r[l]}`,
+			children: Array.from({ length: s }).map((n, r) => /* @__PURE__ */ t("div", { className: `animate-pulse ${e}` }, r))
+		});
+	}
+	return f ? /* @__PURE__ */ t(e, {
+		cardName: f,
+		parentCard: a
+	}) : null;
+};
+//#endregion
+export { i as LoadingSkeletonComponent };
+
+//# sourceMappingURL=loading-skeleton.component.js.map

package/cards/loadingSkeleton/loading-skeleton.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-skeleton.component.js","names":[],"sources":["../../../src/cards/loadingSkeleton/loading-skeleton.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {\n  LoadingSkeletonProps,\n  SkeletonRowSize,\n  SkeletonSpacing,\n} from \"./loading-skeleton.types\";\n\n// ── Preset maps ───────────────────────────────────────────────────────────────\n\n/** Height class for each named `rowSize` preset. */\nconst ROW_SIZE_CLASS: Record<SkeletonRowSize, string> = {\n  xs: \"h-3\", // 12 px — tiny text / timestamp lines\n  sm: \"h-5\", // 20 px — small text or menu items\n  md: \"h-10\", // 40 px — standard input / row\n  lg: \"h-14\", // 56 px — large card rows\n  xl: \"h-20\", // 80 px — wide widget / hero section\n};\n\n/** Gap class for each named `spacing` preset. */\nconst SPACING_CLASS: Record<SkeletonSpacing, string> = {\n  sm: \"gap-2\", //  8 px\n  md: \"gap-3\", // 12 px\n  lg: \"gap-4\", // 16 px\n};\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\n/**\n * LoadingSkeletonComponent\n *\n * While `loading` is `true`: renders `rows` animated shimmer rows inside a\n * flex column wrapper.\n *\n * **Presets** — `rowSize` and `spacing` select named height / gap values\n * without needing Tailwind knowledge.\n *\n * **Raw overrides** — `rowClassName` (overrides `rowSize`) and `className`\n * (overrides `spacing`) accept arbitrary Tailwind classes for custom layouts.\n *\n * While `loading` is `false`: transparently passes through to `content` (no\n * extra DOM wrapper) or renders nothing when `content` is omitted.\n */\nexport const LoadingSkeletonComponent = (\n  props: PiCardProps<LoadingSkeletonProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    loading,\n    rows = 3,\n    rowSize = \"md\",\n    spacing = \"md\",\n    rowClassName,\n    className,\n    content,\n  } = props;\n\n  if (loading) {\n    // rawClassName takes precedence over the preset; preset is the fallback.\n    const rowCls =\n      rowClassName ?? `rounded-md bg-foreground/15 ${ROW_SIZE_CLASS[rowSize]}`;\n    const wrapperCls =\n      className ?? `flex w-full flex-col ${SPACING_CLASS[spacing]}`;\n\n    return (\n      <div data-pihanga={cardName} className={wrapperCls}>\n        {Array.from({length: rows}).map((_, i) => (\n          <div key={i} className={`animate-pulse ${rowCls}`} />\n        ))}\n      </div>\n    );\n  }\n\n  if (content) {\n    // Transparent pass-through: no extra wrapper element.\n    return <Card cardName={content} parentCard={cardName} />;\n  }\n\n  // Loaded with no content card — render nothing.\n  return null;\n};\n"],"mappings":";;;;AAWA,IAAM,IAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAAiD;CACrD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAmBa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,YACA,UAAO,GACP,aAAU,MACV,aAAU,MACV,iBACA,cACA,eACE;CAEJ,IAAI,GAAS;EAEX,IAAM,IACJ,KAAgB,+BAA+B,EAAe;EAIhE,OACE,kBAAC,OAAD;GAAK,gBAAc;GAAU,WAH7B,KAAa,wBAAwB,EAAc;aAIhD,MAAM,KAAK,EAAC,QAAQ,EAAI,CAAC,EAAE,KAAK,GAAG,MAClC,kBAAC,OAAD,EAAa,WAAW,iBAAiB,IAAW,GAA1C,CAA0C,CACrD;EACE,CAAA;CAET;CAQA,OANI,IAEK,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IAIlD;AACT"}

package/cards/loadingSkeleton/loading-skeleton.types.d.ts

@@ -0,0 +1,94 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const LOADING_SKELETON_CARD = "shad/loading-skeleton";
+export declare const LoadingSkeleton: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<LoadingSkeletonProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Named height presets for skeleton rows.
+ *
+ * | Value | Height   | Typical use                     |
+ * |-------|----------|---------------------------------|
+ * | `xs`  | 12 px    | Tiny text / timestamp lines     |
+ * | `sm`  | 20 px    | Small text or menu items        |
+ * | `md`  | 40 px    | Standard input / row (default)  |
+ * | `lg`  | 56 px    | Large card rows                 |
+ * | `xl`  | 80 px    | Wide widget / hero section      |
+ */
+export type SkeletonRowSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Named gap presets between skeleton rows.
+ *
+ * | Value | Gap    |
+ * |-------|--------|
+ * | `sm`  |  8 px  |
+ * | `md`  | 12 px  |
+ * | `lg`  | 16 px  |
+ */
+export type SkeletonSpacing = "sm" | "md" | "lg";
+/**
+ * Props for the `shad/loading-skeleton` card.
+ *
+ * Shows animated shimmer rows while `loading` is `true`; once `loading`
+ * becomes `false` it transparently passes through to `content` (or renders
+ * nothing when `content` is omitted).
+ *
+ * **Quick setup** — use the preset props:
+ * ```ts
+ * registerCard("myApp/area", LoadingSkeleton({
+ *   loading:  memo((s: AppState) => s.dataLoading),
+ *   rows:     4,
+ *   rowSize:  "lg",
+ *   spacing:  "lg",
+ *   content:  "myApp/dataList",
+ * }));
+ * ```
+ *
+ * **Custom Tailwind** — override with raw class strings:
+ * ```ts
+ * registerCard("myApp/area", LoadingSkeleton({
+ *   loading:      memo((s: AppState) => s.dataLoading),
+ *   rows:         4,
+ *   rowClassName: "h-32 rounded-xl bg-primary/10",
+ *   className:    "grid grid-cols-2 gap-4 w-full",
+ *   content:      "myApp/cardGrid",
+ * }));
+ * ```
+ */
+export type LoadingSkeletonProps = {
+    /** When `true`, render animated skeleton rows; when `false` render
+     *  `content` (or nothing if `content` is omitted). */
+    loading: boolean;
+    /**
+     * Number of placeholder rows to render while loading.
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Named height preset for each shimmer row.
+     * Ignored when `rowClassName` is provided.
+     * @default "md"
+     */
+    rowSize?: SkeletonRowSize;
+    /**
+     * Named gap preset between shimmer rows.
+     * Ignored when `className` is provided.
+     * @default "md"
+     */
+    spacing?: SkeletonSpacing;
+    /**
+     * Raw Tailwind classes for every shimmer row.
+     * When set, takes precedence over `rowSize`.
+     * Must include a height (`h-*`) and optionally `rounded-*` and `bg-*`.
+     * Tip: use `bg-foreground/15` for good contrast in both themes.
+     */
+    rowClassName?: string;
+    /**
+     * Raw Tailwind classes for the outer `<div>` wrapper (loading state only).
+     * When set, takes precedence over `spacing`.
+     * Include `w-full` to ensure rows fill the container.
+     */
+    className?: string;
+    /**
+     * Card to render when `loading` is `false`.
+     * When omitted the card renders nothing in the loaded state.
+     */
+    content?: PiCardRef;
+};

package/cards/loadingSkeleton/loading-skeleton.types.js

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

package/cards/loadingSkeleton/loading-skeleton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-skeleton.types.js","names":[],"sources":["../../../src/cards/loadingSkeleton/loading-skeleton.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const LOADING_SKELETON_CARD = \"shad/loading-skeleton\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const LoadingSkeleton = createCardDeclaration<LoadingSkeletonProps>(\n  LOADING_SKELETON_CARD,\n);\n\n// ── Preset enums ──────────────────────────────────────────────────────────────\n\n/**\n * Named height presets for skeleton rows.\n *\n * | Value | Height   | Typical use                     |\n * |-------|----------|---------------------------------|\n * | `xs`  | 12 px    | Tiny text / timestamp lines     |\n * | `sm`  | 20 px    | Small text or menu items        |\n * | `md`  | 40 px    | Standard input / row (default)  |\n * | `lg`  | 56 px    | Large card rows                 |\n * | `xl`  | 80 px    | Wide widget / hero section      |\n */\nexport type SkeletonRowSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Named gap presets between skeleton rows.\n *\n * | Value | Gap    |\n * |-------|--------|\n * | `sm`  |  8 px  |\n * | `md`  | 12 px  |\n * | `lg`  | 16 px  |\n */\nexport type SkeletonSpacing = \"sm\" | \"md\" | \"lg\";\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/loading-skeleton` card.\n *\n * Shows animated shimmer rows while `loading` is `true`; once `loading`\n * becomes `false` it transparently passes through to `content` (or renders\n * nothing when `content` is omitted).\n *\n * **Quick setup** — use the preset props:\n * ```ts\n * registerCard(\"myApp/area\", LoadingSkeleton({\n *   loading:  memo((s: AppState) => s.dataLoading),\n *   rows:     4,\n *   rowSize:  \"lg\",\n *   spacing:  \"lg\",\n *   content:  \"myApp/dataList\",\n * }));\n * ```\n *\n * **Custom Tailwind** — override with raw class strings:\n * ```ts\n * registerCard(\"myApp/area\", LoadingSkeleton({\n *   loading:      memo((s: AppState) => s.dataLoading),\n *   rows:         4,\n *   rowClassName: \"h-32 rounded-xl bg-primary/10\",\n *   className:    \"grid grid-cols-2 gap-4 w-full\",\n *   content:      \"myApp/cardGrid\",\n * }));\n * ```\n */\nexport type LoadingSkeletonProps = {\n  /** When `true`, render animated skeleton rows; when `false` render\n   *  `content` (or nothing if `content` is omitted). */\n  loading: boolean;\n\n  /**\n   * Number of placeholder rows to render while loading.\n   * @default 3\n   */\n  rows?: number;\n\n  // ── Preset controls (no Tailwind knowledge needed) ────────────────────────\n\n  /**\n   * Named height preset for each shimmer row.\n   * Ignored when `rowClassName` is provided.\n   * @default \"md\"\n   */\n  rowSize?: SkeletonRowSize;\n\n  /**\n   * Named gap preset between shimmer rows.\n   * Ignored when `className` is provided.\n   * @default \"md\"\n   */\n  spacing?: SkeletonSpacing;\n\n  // ── Raw Tailwind overrides (power users) ──────────────────────────────────\n\n  /**\n   * Raw Tailwind classes for every shimmer row.\n   * When set, takes precedence over `rowSize`.\n   * Must include a height (`h-*`) and optionally `rounded-*` and `bg-*`.\n   * Tip: use `bg-foreground/15` for good contrast in both themes.\n   */\n  rowClassName?: string;\n\n  /**\n   * Raw Tailwind classes for the outer `<div>` wrapper (loading state only).\n   * When set, takes precedence over `spacing`.\n   * Include `w-full` to ensure rows fill the container.\n   */\n  className?: string;\n\n  /**\n   * Card to render when `loading` is `false`.\n   * When omitted the card renders nothing in the loaded state.\n   */\n  content?: PiCardRef;\n};\n// No events — display-only card.\n"],"mappings":";;AAKA,IAAa,IAAwB,yBAIxB,IAAkB,EAC7B,CACF"}

package/cards/markdownViewer/index.d.ts

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

package/cards/markdownViewer/markdownViewer.component.d.ts

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

package/cards/markdownViewer/markdownViewer.types.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties } from 'react';
+import { PluggableList } from 'unified';
+import { Components } from 'react-markdown';
+export declare const MARKDOWN_CARD = "markdown-viewer";
+export declare const MarkdownViewer: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MarkdownViewerProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type MarkdownViewerProps = {
+    /** Markdown source string to render directly. */
+    source?: string;
+    /** URL/path to a file whose text content will be fetched and rendered. */
+    path?: string;
+    /**
+     * Truncate rendered text to approximately this many characters (word boundary).
+     * A negative value (default: -1) disables truncation.
+     */
+    maxBodyLength?: number;
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList;
+    remarkRehypeOptions?: object;
+    /**
+     * Custom element renderers passed directly to `react-markdown`.
+     * Merged on top of the card's built-in defaults (code/pre styling).
+     * Use this to override how individual HTML elements are rendered.
+     */
+    components?: Components;
+    /** Additional CSS class to apply to the outer wrapper div. */
+    className?: string;
+    style?: CSSProperties;
+};

package/cards/menu/index.d.ts

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

package/cards/menu/index.js

@@ -0,0 +1,13 @@
+import { MenuComponent as e } from "./menu.component.js";
+import { MENU_ACTION as t, MENU_CARD as n, Menu as r, onMenuClicked as i } from "./menu.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/menu/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as MENU_ACTION, n as MENU_CARD, r as Menu, i as onMenuClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/menu/index.js.map

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

package/cards/menu/menu.component.d.ts

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

package/cards/menu/menu.component.js

@@ -0,0 +1,23 @@
+import { Menubar as e, MenubarContent as t, MenubarItem as n, MenubarMenu as r, MenubarSeparator as i, MenubarTrigger as a } from "../../components/ui/menubar.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/cards/menu/menu.component.tsx
+var c = (c) => {
+	let { menuButton: l, items: u, className: d, cardName: f, onClicked: p } = c;
+	return /* @__PURE__ */ o(e, {
+		className: d,
+		"data-pihanga": f,
+		children: /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o(a, {
+			disabled: l.isDisabled,
+			children: l.label
+		}), /* @__PURE__ */ o(t, { children: u.map((e, t) => e === null ? /* @__PURE__ */ o(i, {}, t) : /* @__PURE__ */ o(n, {
+			disabled: e.disabled,
+			onClick: () => p({ itemID: e.id }),
+			children: e.title ?? e.id
+		}, e.id)) })] })
+	});
+};
+//#endregion
+export { c as MenuComponent };
+
+//# sourceMappingURL=menu.component.js.map

package/cards/menu/menu.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.component.js","names":[],"sources":["../../../src/cards/menu/menu.component.tsx"],"sourcesContent":["import React from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {\n  Menubar,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarSeparator,\n  MenubarTrigger,\n} from \"@/components/ui/menubar\";\nimport type {MenuEvents, MenuProps} from \"./menu.types\";\n\nexport const MenuComponent = (\n  props: PiCardProps<MenuProps, MenuEvents>,\n): React.ReactNode => {\n  const {menuButton, items, className, cardName, onClicked} = props;\n\n  return (\n    <Menubar className={className} data-pihanga={cardName}>\n      <MenubarMenu>\n        <MenubarTrigger disabled={menuButton.isDisabled}>\n          {menuButton.label}\n        </MenubarTrigger>\n        <MenubarContent>\n          {items.map((item, idx) => {\n            if (item === null) {\n              return <MenubarSeparator key={idx} />;\n            }\n            return (\n              <MenubarItem\n                key={item.id}\n                disabled={item.disabled}\n                onClick={() => onClicked({itemID: item.id})}\n              >\n                {item.title ?? item.id}\n              </MenubarItem>\n            );\n          })}\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  );\n};\n"],"mappings":";;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,eAAY,UAAO,cAAW,aAAU,iBAAa;CAE5D,OACE,kBAAC,GAAD;EAAoB;EAAW,gBAAc;YAC3C,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAgB,UAAU,EAAW;aAClC,EAAW;EACE,CAAA,GAChB,kBAAC,GAAD,EAAA,UACG,EAAM,KAAK,GAAM,MACZ,MAAS,OACJ,kBAAC,GAAD,CAA6B,GAAN,CAAM,IAGpC,kBAAC,GAAD;GAEE,UAAU,EAAK;GACf,eAAe,EAAU,EAAC,QAAQ,EAAK,GAAE,CAAC;aAEzC,EAAK,SAAS,EAAK;EACT,GALN,EAAK,EAKC,CAEhB,EACa,CAAA,CACL,EAAA,CAAA;CACN,CAAA;AAEb"}

package/cards/menu/menu.types.d.ts

@@ -0,0 +1,53 @@
+import { ColorT, DecoratorT, SizeT, VariantT } from '../types';
+export declare const MENU_CARD = "shad/menu";
+export declare const Menu: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MenuProps<unknown, unknown>, S, MenuEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const MENU_ACTION: {
+    CLICKED: string;
+};
+export declare const onMenuClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & MenuClickEvent>) => void;
+export type BaseButtonProps = {
+    label: string;
+    tooltip?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    loadingPosition?: "center" | "start" | "end";
+    size?: SizeT;
+    color?: ColorT;
+    variant?: VariantT;
+    startDecorator?: DecoratorT;
+    endDecorator?: DecoratorT;
+};
+export type MenuItemT = {
+    id: string;
+    title?: string;
+    disabled?: boolean;
+    color?: ColorT;
+    variant?: VariantT;
+    startDecorator?: DecoratorT;
+    endDecorator?: DecoratorT;
+};
+/** A `null` entry renders as a visual separator between menu items. */
+export type MenuSeparatorT = null;
+export type PlacementT = "auto-end" | "auto-start" | "auto" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
+export type MenuProps<S = unknown, T = unknown> = {
+    /** Configuration for the trigger button that opens the menu. */
+    menuButton: BaseButtonProps;
+    /** Ordered list of menu items; `null` entries render as separators. */
+    items: (MenuItemT | MenuSeparatorT)[];
+    placement?: PlacementT;
+    size?: SizeT;
+    color?: ColorT;
+    variant?: VariantT;
+    className?: string;
+    style?: S;
+    theme?: T;
+};
+export type MenuClickEvent = {
+    /** The `id` of the menu item that was clicked. */
+    itemID: string;
+};
+export type MenuEvents = {
+    onClicked: MenuClickEvent;
+};

package/cards/menu/menu.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/menu/menu.types.ts
+var r = "shad/menu", i = e(r), a = n(r, ["clicked"]), o = t(a.CLICKED);
+//#endregion
+export { a as MENU_ACTION, r as MENU_CARD, i as Menu, o as onMenuClicked };
+
+//# sourceMappingURL=menu.types.js.map

package/cards/menu/menu.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.types.js","names":[],"sources":["../../../src/cards/menu/menu.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {ColorT, DecoratorT, SizeT, VariantT} from \"../types\";\n\nexport const MENU_CARD = \"shad/menu\";\nexport const Menu = createCardDeclaration<MenuProps, MenuEvents>(MENU_CARD);\n\nexport const MENU_ACTION = registerActions(MENU_CARD, [\"clicked\"]);\n\nexport const onMenuClicked = createOnAction<MenuClickEvent>(\n  MENU_ACTION.CLICKED,\n);\n\n// ---------------------------------------------------------------------------\n// Shared button props (re-used by trigger buttons)\n// ---------------------------------------------------------------------------\n\nexport type BaseButtonProps = {\n  label: string;\n  tooltip?: string;\n  isDisabled?: boolean;\n  isLoading?: boolean;\n  loadingPosition?: \"center\" | \"start\" | \"end\";\n  size?: SizeT;\n  color?: ColorT;\n  variant?: VariantT;\n  startDecorator?: DecoratorT;\n  endDecorator?: DecoratorT;\n};\n\n// ---------------------------------------------------------------------------\n// Menu item types\n// ---------------------------------------------------------------------------\n\nexport type MenuItemT = {\n  id: string;\n  title?: string;\n  disabled?: boolean;\n  color?: ColorT;\n  variant?: VariantT;\n  startDecorator?: DecoratorT;\n  endDecorator?: DecoratorT;\n};\n\n/** A `null` entry renders as a visual separator between menu items. */\nexport type MenuSeparatorT = null;\n\n// ---------------------------------------------------------------------------\n// Placement\n// ---------------------------------------------------------------------------\n\nexport type PlacementT =\n  | \"auto-end\"\n  | \"auto-start\"\n  | \"auto\"\n  | \"bottom-end\"\n  | \"bottom-start\"\n  | \"bottom\"\n  | \"left-end\"\n  | \"left-start\"\n  | \"left\"\n  | \"right-end\"\n  | \"right-start\"\n  | \"right\"\n  | \"top-end\"\n  | \"top-start\"\n  | \"top\";\n\n// ---------------------------------------------------------------------------\n// Card props & events\n// ---------------------------------------------------------------------------\n\nexport type MenuProps<S = unknown, T = unknown> = {\n  /** Configuration for the trigger button that opens the menu. */\n  menuButton: BaseButtonProps;\n  /** Ordered list of menu items; `null` entries render as separators. */\n  items: (MenuItemT | MenuSeparatorT)[];\n  placement?: PlacementT;\n  size?: SizeT;\n  color?: ColorT;\n  variant?: VariantT;\n  className?: string;\n  style?: S;\n  theme?: T;\n};\n\nexport type MenuClickEvent = {\n  /** The `id` of the menu item that was clicked. */\n  itemID: string;\n};\n\nexport type MenuEvents = {\n  onClicked: MenuClickEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAY,aACZ,IAAO,EAA6C,CAAS,GAE7D,IAAc,EAAgB,GAAW,CAAC,SAAS,CAAC,GAEpD,IAAgB,EAC3B,EAAY,OACd"}

package/cards/modeToggle/index.d.ts

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

package/cards/modeToggle/index.js

@@ -0,0 +1,13 @@
+import { ModeToggleComponent as e } from "./mode-toggle.component.js";
+import { MODE_TOGGLE_ACTION as t, MODE_TOGGLE_CARD as n, ModeToggle as r, onModeToggleChanged as i } from "./mode-toggle.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/modeToggle/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as MODE_TOGGLE_ACTION, n as MODE_TOGGLE_CARD, r as ModeToggle, i as onModeToggleChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/modeToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/modeToggle/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {ModeToggleComponent} from \"./mode-toggle.component\";\nimport {MODE_TOGGLE_ACTION, MODE_TOGGLE_CARD} from \"./mode-toggle.types\";\n\nexport * from \"./mode-toggle.types\";\n\nregisterCardComponent({\n  name: MODE_TOGGLE_CARD,\n  component: ModeToggleComponent,\n  events: actionTypesToEvents(MODE_TOGGLE_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAkB;AAChD,CAAC"}

package/cards/modeToggle/mode-toggle.component.d.ts

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

package/cards/modeToggle/mode-toggle.component.js

@@ -0,0 +1,32 @@
+import { Button as e } from "../../components/ui/button.js";
+import { useTheme as t } from "../../components/theme-provider/index.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Moon as i, Sun as a } from "lucide-react";
+//#region src/cards/modeToggle/mode-toggle.component.tsx
+var o = (o) => {
+	let { setTheme: s, theme: c } = t(), { variant: l, className: u, onModeChanged: d, cardName: f } = o;
+	function p() {
+		let e = c === "dark" ? "light" : "dark";
+		s(e), d({ mode: e });
+	}
+	return /* @__PURE__ */ r(e, {
+		variant: l ?? "outline",
+		size: "icon",
+		onClick: p,
+		className: u,
+		"data-pihanga": f,
+		children: [
+			/* @__PURE__ */ n(a, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }),
+			/* @__PURE__ */ n(i, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }),
+			/* @__PURE__ */ n("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})
+		]
+	});
+};
+//#endregion
+export { o as ModeToggleComponent };
+
+//# sourceMappingURL=mode-toggle.component.js.map

package/cards/modeToggle/mode-toggle.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.component.js","names":[],"sources":["../../../src/cards/modeToggle/mode-toggle.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Moon, Sun} from \"lucide-react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {Button} from \"@/components/ui/button\";\nimport {useTheme} from \"@/components/theme-provider\";\nimport type {ModeToggleEvents, ModeToggleProps} from \"./mode-toggle.types\";\n\nexport const ModeToggleComponent = (\n  props: PiCardProps<ModeToggleProps, ModeToggleEvents>,\n): React.ReactNode => {\n  const {setTheme, theme} = useTheme();\n  const {variant, className, onModeChanged, cardName} = props;\n\n  function onClick() {\n    const mode = theme === \"dark\" ? \"light\" : \"dark\";\n    setTheme(mode);\n    onModeChanged({mode});\n  }\n\n  return (\n    <Button\n      variant={variant ?? \"outline\"}\n      size=\"icon\"\n      onClick={onClick}\n      className={className}\n      data-pihanga={cardName}\n    >\n      <Sun className=\"h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0\" />\n      <Moon className=\"absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100\" />\n      <span className=\"sr-only\">Toggle theme</span>\n    </Button>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,aAAU,aAAS,EAAS,GAC7B,EAAC,YAAS,cAAW,kBAAe,gBAAY;CAEtD,SAAS,IAAU;EACjB,IAAM,IAAO,MAAU,SAAS,UAAU;EAE1C,AADA,EAAS,CAAI,GACb,EAAc,EAAC,QAAI,CAAC;CACtB;CAEA,OACE,kBAAC,GAAD;EACE,SAAS,KAAW;EACpB,MAAK;EACI;EACE;EACX,gBAAc;YALhB;GAOE,kBAAC,GAAD,EAAK,WAAU,uFAAwF,CAAA;GACvG,kBAAC,GAAD,EAAM,WAAU,+FAAgG,CAAA;GAChH,kBAAC,QAAD;IAAM,WAAU;cAAU;GAAkB,CAAA;EACtC;;AAEZ"}

package/cards/modeToggle/mode-toggle.types.d.ts

@@ -0,0 +1,20 @@
+import { VariantT } from '../types';
+export declare const MODE_TOGGLE_CARD = "shad/mode-toggle";
+export declare const ModeToggle: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ModeToggleProps, S, ModeToggleEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const MODE_TOGGLE_ACTION: {
+    MODE_CHANGED: string;
+};
+export declare const onModeToggleChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ModeChangeEvent>) => void;
+export type ModeToggleProps = {
+    /** Visual variant of the toggle button.  Defaults to `"outline"`. */
+    variant?: VariantT;
+    className?: string;
+};
+export type ModeChangeEvent = {
+    mode: "light" | "dark" | "system";
+};
+export type ModeToggleEvents = {
+    onModeChanged: ModeChangeEvent;
+};

package/cards/modeToggle/mode-toggle.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/modeToggle/mode-toggle.types.ts
+var r = "shad/mode-toggle", i = e(r), a = n(r, ["mode_changed"]), o = t(a.MODE_CHANGED);
+//#endregion
+export { a as MODE_TOGGLE_ACTION, r as MODE_TOGGLE_CARD, i as ModeToggle, o as onModeToggleChanged };
+
+//# sourceMappingURL=mode-toggle.types.js.map

package/cards/modeToggle/mode-toggle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-toggle.types.js","names":[],"sources":["../../../src/cards/modeToggle/mode-toggle.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {VariantT} from \"../types\";\n\nexport const MODE_TOGGLE_CARD = \"shad/mode-toggle\";\nexport const ModeToggle = createCardDeclaration<\n  ModeToggleProps,\n  ModeToggleEvents\n>(MODE_TOGGLE_CARD);\n\nexport const MODE_TOGGLE_ACTION = registerActions(MODE_TOGGLE_CARD, [\n  \"mode_changed\",\n]);\n\nexport const onModeToggleChanged = createOnAction<ModeChangeEvent>(\n  MODE_TOGGLE_ACTION.MODE_CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Card props & events\n// ---------------------------------------------------------------------------\n\nexport type ModeToggleProps = {\n  /** Visual variant of the toggle button.  Defaults to `\"outline\"`. */\n  variant?: VariantT;\n  className?: string;\n};\n\nexport type ModeChangeEvent = {\n  mode: \"light\" | \"dark\" | \"system\";\n};\n\nexport type ModeToggleEvents = {\n  onModeChanged: ModeChangeEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAmB,oBACnB,IAAa,EAGxB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,cACF,CAAC,GAEY,IAAsB,EACjC,EAAmB,YACrB"}

package/cards/navbarSearch/index.d.ts

@@ -0,0 +1 @@
+export * from './navbarSearch.type';

package/cards/navbarSearch/index.js

@@ -0,0 +1,13 @@
+import { Component as e } from "./navbarSearch.component.js";
+import { NAVBAR_SEARCH_ACTION as t, NAVBAR_SEARCH_CARD as n, NavbarSearch as r, onNavbarSearchFocus as i, onNavbarSearchItems as a, onNavbarSearchSubmit as o } from "./navbarSearch.type.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/navbarSearch/index.ts
+c({
+	name: n,
+	component: e,
+	events: s(t)
+});
+//#endregion
+export { t as NAVBAR_SEARCH_ACTION, n as NAVBAR_SEARCH_CARD, r as NavbarSearch, i as onNavbarSearchFocus, a as onNavbarSearchItems, o as onNavbarSearchSubmit };
+
+//# sourceMappingURL=index.js.map

package/cards/navbarSearch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/navbarSearch/index.ts"],"sourcesContent":["import {\n  actionTypesToEvents,\n  registerCardComponent,\n} from \"@pihanga2/core\";\n\nimport {Component} from \"./navbarSearch.component\";\nimport {NAVBAR_SEARCH_ACTION, NAVBAR_SEARCH_CARD} from \"./navbarSearch.type\";\n\nexport * from \"./navbarSearch.type\";\n\nregisterCardComponent({\n  name: NAVBAR_SEARCH_CARD,\n  component: Component,\n  events: actionTypesToEvents(NAVBAR_SEARCH_ACTION),\n});\n"],"mappings":";;;;AAUA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAoB;AAClD,CAAC"}

package/cards/navbarSearch/navbarSearch.component.d.ts

@@ -0,0 +1,3 @@
+import { PiCardProps } from '@pihanga2/core';
+import { NavbarSearchEvents, NavbarSearchProps } from './navbarSearch.type';
+export declare const Component: (props: PiCardProps<NavbarSearchProps, NavbarSearchEvents>) => React.ReactNode;

package/cards/navbarSearch/navbarSearch.component.js

@@ -0,0 +1,88 @@
+import { Input as e } from "../../components/ui/input.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/cards/navbarSearch/navbarSearch.component.tsx
+var r = (r) => {
+	let { searchItems: i, placeholder: a = "Load Spec...", onSearchSubmit: o, onSearchItems: s, onSearchFocus: c, cardName: l } = r, u = i?.length ? `${l}-search` : void 0, d = (e, t) => {
+		let n = e.trim();
+		n && (o?.({ search: n }), t && (t.value = "", f("")), t?.blur());
+	}, f = (e) => {
+		s?.({ search: e });
+	}, p = (e, t) => {
+		i?.includes(e) && d(e, t);
+	}, m = (e) => {
+		e && e.showPicker?.();
+	};
+	return /* @__PURE__ */ t("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			let t = new FormData(e.currentTarget);
+			d(String(t.get("search") || ""), e.currentTarget.elements.namedItem("search"));
+		},
+		autoComplete: "off",
+		className: "ml-auto flex-1 sm:flex-initial",
+		"data-pihanga": l,
+		children: /* @__PURE__ */ n("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ t(e, {
+				type: "search",
+				placeholder: a,
+				name: "search",
+				list: u,
+				autoComplete: "off",
+				className: "sm:w-[300px] md:w-[200px] lg:w-[300px]",
+				onFocus: () => {
+					c?.({});
+				},
+				onClick: (e) => {
+					m(e.currentTarget);
+				},
+				onBeforeInput: (e) => {
+					e.preventDefault();
+				},
+				onKeyDown: (e) => {
+					let t = new Set([
+						"Tab",
+						"Enter",
+						"Escape",
+						"ArrowDown",
+						"ArrowUp",
+						"ArrowLeft",
+						"ArrowRight",
+						"Home",
+						"End",
+						"Shift",
+						"Control",
+						"Alt",
+						"Meta"
+					]);
+					if (!(e.ctrlKey || e.metaKey || e.altKey)) {
+						if (t.has(e.key)) {
+							e.key === "ArrowDown" && m(e.currentTarget);
+							return;
+						}
+						e.preventDefault();
+					}
+				},
+				onInput: (e) => {
+					let t = e.target, n = t.value;
+					f(n), p(n, t);
+				},
+				onChange: (e) => {
+					let t = e.target, n = t.value;
+					f(n), p(n, t);
+				},
+				onBlur: (e) => {
+					let t = e.target, n = t.value;
+					p(n, t);
+				}
+			}), u && /* @__PURE__ */ t("datalist", {
+				id: u,
+				children: i.map((e) => /* @__PURE__ */ t("option", { value: e }, e))
+			})]
+		})
+	});
+};
+//#endregion
+export { r as Component };
+
+//# sourceMappingURL=navbarSearch.component.js.map

package/cards/navbarSearch/navbarSearch.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbarSearch.component.js","names":[],"sources":["../../../src/cards/navbarSearch/navbarSearch.component.tsx"],"sourcesContent":["import {Input} from \"@/registry/ui/input\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport type {\n  NavbarSearchEvents,\n  NavbarSearchProps,\n} from \"./navbarSearch.type\";\n\nexport const Component = (\n  props: PiCardProps<NavbarSearchProps, NavbarSearchEvents>,\n): React.ReactNode => {\n  const {\n    searchItems,\n    placeholder = \"Load Spec...\",\n    onSearchSubmit,\n    onSearchItems,\n    onSearchFocus,\n    cardName,\n  } = props;\n  const listId = searchItems?.length ? `${cardName}-search` : undefined;\n\n  const submitSearch = (value: string, input?: HTMLInputElement | null) => {\n    const search = value.trim();\n    if (!search) return;\n    onSearchSubmit?.({search});\n    if (input) {\n      input.value = \"\";\n      emitSearchInput(\"\");\n    }\n    input?.blur();\n  };\n\n  const emitSearchInput = (value: string) => {\n    onSearchItems?.({search: value});\n  };\n\n  const maybeSubmit = (value: string, input?: HTMLInputElement | null) => {\n    if (searchItems?.includes(value)) {\n      submitSearch(value, input);\n    }\n  };\n\n  const openNativeSuggestions = (input: HTMLInputElement | null) => {\n    if (!input) {\n      return;\n    }\n\n    const pickerInput = input as HTMLInputElement & {\n      showPicker?: () => void;\n    };\n    pickerInput.showPicker?.();\n  };\n\n  const blockManualTyping = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const allowedKeys = new Set([\n      \"Tab\",\n      \"Enter\",\n      \"Escape\",\n      \"ArrowDown\",\n      \"ArrowUp\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Home\",\n      \"End\",\n      \"Shift\",\n      \"Control\",\n      \"Alt\",\n      \"Meta\",\n    ]);\n\n    if (event.ctrlKey || event.metaKey || event.altKey) {\n      return;\n    }\n\n    if (allowedKeys.has(event.key)) {\n      if (event.key === \"ArrowDown\") {\n        openNativeSuggestions(event.currentTarget);\n      }\n      return;\n    }\n\n    event.preventDefault();\n  };\n\n  return (\n    <form\n      onSubmit={(el) => {\n        el.preventDefault();\n        const data = new FormData(el.currentTarget);\n        submitSearch(\n          String(data.get(\"search\") || \"\"),\n          el.currentTarget.elements.namedItem(\"search\") as HTMLInputElement | null,\n        );\n      }}\n      autoComplete=\"off\"\n      className=\"ml-auto flex-1 sm:flex-initial\"\n      data-pihanga={cardName}\n    >\n      <div className=\"relative\">\n        <Input\n          type=\"search\"\n          placeholder={placeholder}\n          name=\"search\"\n          list={listId}\n          autoComplete=\"off\"\n          className=\"sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n          onFocus={() => {\n            onSearchFocus?.({});\n          }}\n          onClick={(e) => {\n            openNativeSuggestions(e.currentTarget);\n          }}\n          onBeforeInput={(e) => {\n            e.preventDefault();\n          }}\n          onKeyDown={blockManualTyping}\n          onInput={(e) => {\n            const input = e.target as HTMLInputElement;\n            const value = input.value;\n            emitSearchInput(value);\n            maybeSubmit(value, input);\n          }}\n          onChange={(e) => {\n            const input = e.target as HTMLInputElement;\n            const value = input.value;\n            emitSearchInput(value);\n            maybeSubmit(value, input);\n          }}\n          onBlur={(e) => {\n            const input = e.target as HTMLInputElement;\n            const value = input.value;\n            maybeSubmit(value, input);\n          }}\n        />\n        {listId && (\n          <datalist id={listId}>\n            {searchItems!.map((item) => (\n              <option key={item} value={item} />\n            ))}\n          </datalist>\n        )}\n      </div>\n    </form>\n  );\n};\n"],"mappings":";;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,gBACA,iBAAc,gBACd,mBACA,kBACA,kBACA,gBACE,GACE,IAAS,GAAa,SAAS,GAAG,EAAS,WAAW,KAAA,GAEtD,KAAgB,GAAe,MAAoC;EACvE,IAAM,IAAS,EAAM,KAAK;EACrB,MACL,IAAiB,EAAC,UAAM,CAAC,GACrB,MACF,EAAM,QAAQ,IACd,EAAgB,EAAE,IAEpB,GAAO,KAAK;CACd,GAEM,KAAmB,MAAkB;EACzC,IAAgB,EAAC,QAAQ,EAAK,CAAC;CACjC,GAEM,KAAe,GAAe,MAAoC;EACtE,AAAI,GAAa,SAAS,CAAK,KAC7B,EAAa,GAAO,CAAK;CAE7B,GAEM,KAAyB,MAAmC;EAC3D,KAOL,EAAY,aAAa;CAC3B;CAiCA,OACE,kBAAC,QAAD;EACE,WAAW,MAAO;GAChB,EAAG,eAAe;GAClB,IAAM,IAAO,IAAI,SAAS,EAAG,aAAa;GAC1C,EACE,OAAO,EAAK,IAAI,QAAQ,KAAK,EAAE,GAC/B,EAAG,cAAc,SAAS,UAAU,QAAQ,CAC9C;EACF;EACA,cAAa;EACb,WAAU;EACV,gBAAc;YAEd,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,GAAD;IACE,MAAK;IACQ;IACb,MAAK;IACL,MAAM;IACN,cAAa;IACb,WAAU;IACV,eAAe;KACb,IAAgB,CAAC,CAAC;IACpB;IACA,UAAU,MAAM;KACd,EAAsB,EAAE,aAAa;IACvC;IACA,gBAAgB,MAAM;KACpB,EAAE,eAAe;IACnB;IACA,YA9DmB,MAAiD;KAC1E,IAAM,IAAc,IAAI,IAAI;MAC1B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;KACF,CAAC;KAEG,QAAM,WAAW,EAAM,WAAW,EAAM,SAI5C;UAAI,EAAY,IAAI,EAAM,GAAG,GAAG;OAC9B,AAAI,EAAM,QAAQ,eAChB,EAAsB,EAAM,aAAa;OAE3C;MACF;MAEA,EAAM,eAAe;KAFrB;IAGF;IAkCQ,UAAU,MAAM;KACd,IAAM,IAAQ,EAAE,QACV,IAAQ,EAAM;KAEpB,AADA,EAAgB,CAAK,GACrB,EAAY,GAAO,CAAK;IAC1B;IACA,WAAW,MAAM;KACf,IAAM,IAAQ,EAAE,QACV,IAAQ,EAAM;KAEpB,AADA,EAAgB,CAAK,GACrB,EAAY,GAAO,CAAK;IAC1B;IACA,SAAS,MAAM;KACb,IAAM,IAAQ,EAAE,QACV,IAAQ,EAAM;KACpB,EAAY,GAAO,CAAK;IAC1B;GACD,CAAA,GACA,KACC,kBAAC,YAAD;IAAU,IAAI;cACX,EAAa,KAAK,MACjB,kBAAC,UAAD,EAAmB,OAAO,EAAO,GAApB,CAAoB,CAClC;GACO,CAAA,CAET;;CACD,CAAA;AAEV"}

package/cards/navbarSearch/navbarSearch.type.d.ts

@@ -0,0 +1,32 @@
+export declare const NAVBAR_SEARCH_CARD = "navbarSearch";
+export declare const NavbarSearch: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<NavbarSearchProps, S, NavbarSearchEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const NAVBAR_SEARCH_ACTION: {
+    SEARCH_SUBMIT: string;
+    SEARCH_ITEMS: string;
+    SEARCH_FOCUS: string;
+};
+export declare const onNavbarSearchSubmit: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & NavbarSearchEvent>) => void;
+export declare const onNavbarSearchItems: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & NavbarSearchInputEvent>) => void;
+export declare const onNavbarSearchFocus: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & NavbarSearchFocusEvent>) => void;
+export type NavbarSearchProps = {
+    searchItems?: string[];
+    placeholder?: string;
+};
+export type NavbarSearchEvent = {
+    search: string;
+};
+export type NavbarSearchInputEvent = {
+    search: string;
+};
+export type NavbarSearchFocusEvent = Record<string, never>;
+export type NavbarSearchEvents = {
+    onSearchSubmit: NavbarSearchEvent;
+    onSearchItems?: NavbarSearchInputEvent;
+    onSearchFocus?: NavbarSearchFocusEvent;
+};

package/cards/navbarSearch/navbarSearch.type.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/navbarSearch/navbarSearch.type.ts
+var r = "navbarSearch", i = e(r), a = n(r, [
+	"search_submit",
+	"search_items",
+	"search_focus"
+]), o = t(a.SEARCH_SUBMIT), s = t(a.SEARCH_ITEMS), c = t(a.SEARCH_FOCUS);
+//#endregion
+export { a as NAVBAR_SEARCH_ACTION, r as NAVBAR_SEARCH_CARD, i as NavbarSearch, c as onNavbarSearchFocus, s as onNavbarSearchItems, o as onNavbarSearchSubmit };
+
+//# sourceMappingURL=navbarSearch.type.js.map