@pihanga2/shadcn 0.1.0

package/cards/dropDownMenu/drop-down.component.js

@@ -0,0 +1,205 @@
+import { DropdownOpenContext as e } from "./dropdown-context.js";
+import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuLabel as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuShortcut as u, DropdownMenuSub as d, DropdownMenuSubContent as f, DropdownMenuSubTrigger as p, DropdownMenuTrigger as m } from "./dropdown-menu.ui.js";
+import { Card as h } from "@pihanga2/core";
+import g from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/cards/dropDownMenu/drop-down.component.tsx
+var b = (b) => {
+	let { trigger: x, menuLabel: S, menuAlign: C, items: w, cardName: T, checkboxCloseDelayMs: E } = b, [D, O] = g.useState(!1), k = g.useRef(null), [A, j] = g.useState({}), M = g.useCallback((e, t) => [...e, t].join("::"), []), N = g.useCallback((e, t = []) => {
+		let n = {};
+		if (!e?.length) return n;
+		for (let r of e) if (!(!r || typeof r == "string")) {
+			if (r.type === "group") {
+				Object.assign(n, N(r.items, t));
+				continue;
+			}
+			if (r.type === "submenu") {
+				let e = B(r);
+				Object.assign(n, N(r.items, [...t, e]));
+				continue;
+			}
+			if (r.type === "checkbox") {
+				let e = !!(r.checked ?? r.defaultChecked ?? !1);
+				n[M(t, r.id)] = e;
+			}
+		}
+		return n;
+	}, [M]);
+	function P() {
+		k.current !== null && (window.clearTimeout(k.current), k.current = null);
+	}
+	function F() {
+		P(), O(!1);
+	}
+	function I(e) {
+		P(), k.current = window.setTimeout(() => {
+			k.current = null, O(!1);
+		}, e);
+	}
+	g.useEffect(() => () => {
+		P();
+	}, []), g.useEffect(() => {
+		D && j(N(w));
+	}, [
+		D,
+		w,
+		N
+	]);
+	function L() {
+		return /* @__PURE__ */ v("span", {
+			className: "inline-flex",
+			"data-pihanga-trigger-wrapper": !0,
+			children: /* @__PURE__ */ v(e.Provider, {
+				value: D,
+				children: /* @__PURE__ */ v(h, {
+					cardName: x,
+					parentCard: T
+				})
+			})
+		});
+	}
+	function R() {
+		return S ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(o, { children: S }), /* @__PURE__ */ v(l, {})] }) : null;
+	}
+	function z(e) {
+		return typeof e == "string" ? e : /* @__PURE__ */ v(h, {
+			cardName: e,
+			parentCard: T
+		});
+	}
+	function B(e) {
+		return e.id ? e.id : typeof e.label == "string" ? e.label : "submenu";
+	}
+	function V(e) {
+		b.onSelected(e);
+	}
+	function H(e) {
+		return e ? /* @__PURE__ */ v(u, { children: e }) : null;
+	}
+	function U(e, t = []) {
+		return e.map((e, r) => {
+			if (e === null) return /* @__PURE__ */ v(l, {}, `sep-${r}`);
+			if (typeof e == "string") return /* @__PURE__ */ v(a, {
+				onSelect: () => V({
+					type: "item",
+					id: e,
+					path: t
+				}),
+				children: e
+			}, `s-${r}`);
+			if (e.type === "separator") return /* @__PURE__ */ v(l, {}, `sepobj-${r}`);
+			if (e.type === "label") {
+				let t = e;
+				return /* @__PURE__ */ v(o, {
+					inset: t.inset,
+					children: z(t.label)
+				}, `label-${r}`);
+			}
+			if (e.type === "group") {
+				let n = e;
+				return /* @__PURE__ */ y(i, { children: [n.label && /* @__PURE__ */ v(o, {
+					inset: n.inset,
+					children: z(n.label)
+				}), U(n.items, t)] }, `group-${r}`);
+			}
+			if (e.type === "submenu") {
+				let n = e, i = B(n), a = [...t, i];
+				return /* @__PURE__ */ y(d, { children: [/* @__PURE__ */ y(p, {
+					inset: n.inset,
+					disabled: n.disabled,
+					children: [z(n.label), H(n.shortcut)]
+				}), /* @__PURE__ */ v(f, { children: U(n.items, a) })] }, `sub-${r}`);
+			}
+			if (e.type === "checkbox") {
+				let r = e, i = M(t, r.id);
+				return /* @__PURE__ */ y(n, {
+					checked: A[i] ?? !!(r.checked ?? r.defaultChecked ?? !1),
+					disabled: r.disabled,
+					onCheckedChange: (e) => {
+						let n = !!e;
+						j((e) => ({
+							...e,
+							[i]: n
+						})), V({
+							type: "checkbox",
+							id: r.id,
+							checked: n,
+							path: t
+						}), typeof E == "number" && (E > 0 ? I(E) : F());
+					},
+					onSelect: (e) => {
+						(r.keepOpen || typeof E == "number") && e.preventDefault();
+					},
+					children: [z(r.label), H(r.shortcut)]
+				}, `cb-${r.id}`);
+			}
+			if (e.type === "radio-group") {
+				let n = e;
+				return /* @__PURE__ */ y(s, {
+					value: n.value,
+					defaultValue: n.defaultValue,
+					onValueChange: (e) => {
+						V({
+							type: "radio",
+							id: n.id,
+							value: e,
+							path: t
+						});
+					},
+					children: [n.label && /* @__PURE__ */ v(o, {
+						inset: n.inset,
+						children: z(n.label)
+					}), n.items.map((e) => /* @__PURE__ */ y(c, {
+						value: e.value,
+						disabled: e.disabled,
+						className: e.inset ? "pl-8" : void 0,
+						hideIcon: e.hideIcon,
+						onSelect: (t) => {
+							e.keepOpen && t.preventDefault();
+						},
+						children: [z(e.label), H(e.shortcut)]
+					}, `${n.id}:${e.value}`))]
+				}, `rg-${n.id}`);
+			}
+			if (e.type === "item") {
+				let n = e;
+				return /* @__PURE__ */ y(a, {
+					disabled: n.disabled,
+					className: n.inset ? "pl-8" : void 0,
+					onSelect: (e) => {
+						n.keepOpen && e.preventDefault(), V({
+							type: "item",
+							id: n.id,
+							path: t
+						});
+					},
+					children: [z(n.label), H(n.shortcut)]
+				}, `it-${n.id}`);
+			}
+			return null;
+		});
+	}
+	let W = w;
+	return /* @__PURE__ */ y(t, {
+		"data-pihanga": T,
+		open: D,
+		onOpenChange: (e) => {
+			if (!e) {
+				F();
+				return;
+			}
+			P(), j(N(w)), O(!0);
+		},
+		children: [/* @__PURE__ */ v(m, {
+			asChild: !0,
+			children: L()
+		}), /* @__PURE__ */ y(r, {
+			align: C,
+			children: [R(), W?.length ? U(W) : null]
+		})]
+	});
+};
+//#endregion
+export { b as Component };
+
+//# sourceMappingURL=drop-down.component.js.map

package/cards/dropDownMenu/drop-down.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-down.component.js","names":[],"sources":["../../../src/cards/dropDownMenu/drop-down.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu.ui\";\n\nimport type {\n  DropDownMenuEntry,\n  DropDownMenuEvents,\n  DropDownMenuProps,\n  MenuContent,\n  MenuLabelEntry,\n  MenuSubMenuEntry,\n} from \"./drop-down.types\";\n\nimport {DropdownOpenContext} from \"./dropdown-context\";\n\nexport const Component = (\n  props: PiCardProps<DropDownMenuProps, DropDownMenuEvents>,\n): React.ReactNode => {\n  const {trigger, menuLabel, menuAlign, items, cardName, checkboxCloseDelayMs} =\n    props;\n\n  const [open, setOpen] = React.useState(false);\n  const closeTimerRef = React.useRef<number | null>(null);\n\n  const [localCheckboxChecked, setLocalCheckboxChecked] = React.useState<\n    Record<string, boolean>\n  >({});\n\n  const checkboxKey = React.useCallback((path: string[], id: string) => {\n    return [...path, id].join(\"::\");\n  }, []);\n\n  const buildCheckboxStateFromItems = React.useCallback(\n    (\n      entries: DropDownMenuEntry[] | undefined,\n      path: string[] = [],\n    ): Record<string, boolean> => {\n      const state: Record<string, boolean> = {};\n      if (!entries?.length) return state;\n\n      for (const entry of entries) {\n        if (!entry || typeof entry === \"string\") continue;\n        if (entry.type === \"group\") {\n          Object.assign(state, buildCheckboxStateFromItems(entry.items, path));\n          continue;\n        }\n        if (entry.type === \"submenu\") {\n          const subId = entryIdForPath(entry);\n          Object.assign(\n            state,\n            buildCheckboxStateFromItems(entry.items, [...path, subId]),\n          );\n          continue;\n        }\n        if (entry.type === \"checkbox\") {\n          const initial = Boolean(\n            entry.checked ?? entry.defaultChecked ?? false,\n          );\n          state[checkboxKey(path, entry.id)] = initial;\n        }\n      }\n\n      return state;\n    },\n    [checkboxKey],\n  );\n\n  function clearCloseTimer() {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  }\n\n  function closeNow() {\n    clearCloseTimer();\n    setOpen(false);\n  }\n\n  function scheduleClose(delayMs: number) {\n    clearCloseTimer();\n    closeTimerRef.current = window.setTimeout(() => {\n      closeTimerRef.current = null;\n      setOpen(false);\n    }, delayMs);\n  }\n\n  React.useEffect(() => {\n    return () => {\n      // cleanup on unmount\n      clearCloseTimer();\n    };\n  }, []);\n\n  // If the menu model changes while open, resync the local checkbox state.\n  // This lets external state updates still win.\n  React.useEffect(() => {\n    if (!open) return;\n    setLocalCheckboxChecked(buildCheckboxStateFromItems(items));\n  }, [open, items, buildCheckboxStateFromItems]);\n\n  function renderTrigger() {\n    // IMPORTANT: Radix `DropdownMenuTrigger` with `asChild` requires its direct\n    // child to accept/forward the props Radix injects (pointer handlers, aria\n    // attributes, refs). `@pihanga2/core`'s <Card /> does not forward arbitrary\n    // props to the underlying DOM element rendered by the referenced card.\n    //\n    // So we always provide a real DOM element as the trigger and render the\n    // PiCard inside it. Events bubble, so clicking the inner PiButton still\n    // toggles the menu.\n    //\n    // We provide the dropdown's open state via context so nested components\n    // (like Button) can hide their tooltips when the dropdown is open.\n    return (\n      <span className=\"inline-flex\" data-pihanga-trigger-wrapper>\n        <DropdownOpenContext.Provider value={open}>\n          <Card cardName={trigger} parentCard={cardName} />\n        </DropdownOpenContext.Provider>\n      </span>\n    );\n  }\n\n  function renderLabel() {\n    if (!menuLabel) return null;\n    return (\n      <>\n        <DropdownMenuLabel>{menuLabel}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n      </>\n    );\n  }\n\n  function contentToNode(content: MenuContent): React.ReactNode {\n    if (typeof content === \"string\") return content;\n    return <Card cardName={content} parentCard={cardName} />;\n  }\n\n  function entryIdForPath(entry: MenuSubMenuEntry): string {\n    if (entry.id) return entry.id;\n    return typeof entry.label === \"string\" ? entry.label : \"submenu\";\n  }\n\n  function emitSelected(ev: {\n    type: \"item\" | \"checkbox\" | \"radio\";\n    id: string;\n    value?: string;\n    checked?: boolean;\n    path?: string[];\n  }) {\n    props.onSelected(ev);\n  }\n\n  function renderShortcut(shortcut?: string) {\n    if (!shortcut) return null;\n    return <DropdownMenuShortcut>{shortcut}</DropdownMenuShortcut>;\n  }\n\n  function renderEntries(entries: DropDownMenuEntry[], path: string[] = []) {\n    return entries.map((entry, idx) => {\n      if (entry === null) {\n        return <DropdownMenuSeparator key={`sep-${idx}`} />;\n      }\n\n      if (typeof entry === \"string\") {\n        // legacy style within `items` (still supported)\n        return (\n          <DropdownMenuItem\n            key={`s-${idx}`}\n            onSelect={() => emitSelected({type: \"item\", id: entry, path})}\n          >\n            {entry}\n          </DropdownMenuItem>\n        );\n      }\n\n      if (entry.type === \"separator\") {\n        return <DropdownMenuSeparator key={`sepobj-${idx}`} />;\n      }\n\n      if (entry.type === \"label\") {\n        const e: MenuLabelEntry = entry;\n        return (\n          <DropdownMenuLabel key={`label-${idx}`} inset={e.inset}>\n            {contentToNode(e.label)}\n          </DropdownMenuLabel>\n        );\n      }\n\n      if (entry.type === \"group\") {\n        const e = entry;\n        return (\n          <DropdownMenuGroup key={`group-${idx}`}>\n            {e.label && (\n              <DropdownMenuLabel inset={e.inset}>\n                {contentToNode(e.label)}\n              </DropdownMenuLabel>\n            )}\n            {renderEntries(e.items, path)}\n          </DropdownMenuGroup>\n        );\n      }\n\n      if (entry.type === \"submenu\") {\n        const e: MenuSubMenuEntry = entry;\n        const subId = entryIdForPath(e);\n        const nextPath = [...path, subId];\n        return (\n          <DropdownMenuSub key={`sub-${idx}`}>\n            <DropdownMenuSubTrigger inset={e.inset} disabled={e.disabled}>\n              {contentToNode(e.label)}\n              {renderShortcut(e.shortcut)}\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              {renderEntries(e.items, nextPath)}\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        );\n      }\n\n      if (entry.type === \"checkbox\") {\n        const e = entry;\n        const key = checkboxKey(path, e.id);\n        const checked =\n          localCheckboxChecked[key] ??\n          Boolean(e.checked ?? e.defaultChecked ?? false);\n        return (\n          <DropdownMenuCheckboxItem\n            key={`cb-${e.id}`}\n            checked={checked}\n            disabled={e.disabled}\n            onCheckedChange={(checked) => {\n              const nextChecked = Boolean(checked);\n\n              // Update local state immediately so the tick updates while menu is open.\n              setLocalCheckboxChecked((prev) => ({\n                ...prev,\n                [key]: nextChecked,\n              }));\n\n              emitSelected({\n                type: \"checkbox\",\n                id: e.id,\n                checked: nextChecked,\n                path,\n              });\n\n              // If a delay is configured, keep menu open but schedule an auto-close.\n              // Each checkbox selection resets the timer.\n              if (typeof checkboxCloseDelayMs === \"number\") {\n                if (checkboxCloseDelayMs > 0) {\n                  scheduleClose(checkboxCloseDelayMs);\n                } else {\n                  // Treat 0ms as \"close immediately\".\n                  closeNow();\n                }\n              }\n            }}\n            onSelect={(evt) => {\n              // keepOpen OR delayed-close mode should keep menu open after select.\n              if (e.keepOpen || typeof checkboxCloseDelayMs === \"number\") {\n                evt.preventDefault();\n              }\n            }}\n          >\n            {contentToNode(e.label)}\n            {renderShortcut(e.shortcut)}\n          </DropdownMenuCheckboxItem>\n        );\n      }\n\n      if (entry.type === \"radio-group\") {\n        const e = entry;\n        return (\n          <DropdownMenuRadioGroup\n            key={`rg-${e.id}`}\n            value={e.value}\n            defaultValue={e.defaultValue}\n            onValueChange={(value) => {\n              emitSelected({type: \"radio\", id: e.id, value, path});\n            }}\n          >\n            {e.label && (\n              <DropdownMenuLabel inset={e.inset}>\n                {contentToNode(e.label)}\n              </DropdownMenuLabel>\n            )}\n            {e.items.map((ri) => (\n              <DropdownMenuRadioItem\n                key={`${e.id}:${ri.value}`}\n                value={ri.value}\n                disabled={ri.disabled}\n                className={ri.inset ? \"pl-8\" : undefined}\n                hideIcon={ri.hideIcon}\n                onSelect={(evt) => {\n                  if (ri.keepOpen) evt.preventDefault();\n                }}\n              >\n                {contentToNode(ri.label)}\n                {renderShortcut(ri.shortcut)}\n              </DropdownMenuRadioItem>\n            ))}\n          </DropdownMenuRadioGroup>\n        );\n      }\n\n      if (entry.type === \"item\") {\n        const e = entry;\n        return (\n          <DropdownMenuItem\n            key={`it-${e.id}`}\n            disabled={e.disabled}\n            className={e.inset ? \"pl-8\" : undefined}\n            onSelect={(evt) => {\n              if (e.keepOpen) evt.preventDefault();\n              emitSelected({type: \"item\", id: e.id, path});\n            }}\n          >\n            {contentToNode(e.label)}\n            {renderShortcut(e.shortcut)}\n          </DropdownMenuItem>\n        );\n      }\n\n      // Exhaustiveness guard (should never happen)\n      return null;\n    });\n  }\n\n  const effectiveItems = items;\n\n  return (\n    <DropdownMenu\n      data-pihanga={cardName}\n      open={open}\n      onOpenChange={(nextOpen) => {\n        // Any non-checkbox close reason (outside click, escape, blur, etc.)\n        // should close immediately and cancel pending timers.\n        if (!nextOpen) {\n          closeNow();\n          return;\n        }\n\n        clearCloseTimer();\n        setLocalCheckboxChecked(buildCheckboxStateFromItems(items));\n        setOpen(true);\n      }}\n    >\n      <DropdownMenuTrigger asChild>{renderTrigger()}</DropdownMenuTrigger>\n      <DropdownMenuContent align={menuAlign}>\n        {renderLabel()}\n        {effectiveItems?.length ? renderEntries(effectiveItems) : null}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n"],"mappings":"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"}

package/cards/dropDownMenu/drop-down.types.d.ts

@@ -0,0 +1,131 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const DROP_DOWN_MENU_CARD = "pi/drop-down-menu";
+export declare const DropDownMenu: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<DropDownMenuProps, S, DropDownMenuEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const DROP_DOWN_MENU_ACTION: {
+    SELECTED: string;
+};
+export declare const onDropDownMenuClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DropDownMenuSelectedEventAdvanced>) => void;
+export type DropDownMenuProps = {
+    /**
+     * Dropdown trigger.
+     *
+     * - For a PiButton (or any custom) trigger, pass a `PiCardRef` and use the
+     *   referenced card's props. For `PiButton` specifically:
+     *   - `opts.iconName` + `opts.iconPlacement` to show an icon on the left/right.
+     *   - `label: ""` for an icon-only button.
+     *
+     * Implementation note: the dropdown trigger is wrapped in a DOM element so
+     * Radix can attach trigger handlers even when the trigger is rendered via
+     * `@pihanga2/core`'s `<Card />`.
+     */
+    trigger: PiCardRef;
+    menuAlign?: "center" | "end" | "start";
+    menuLabel?: string;
+    /**
+     * Menu declaration (supports sub-menus, checkbox/radio items, groups, labels, separators, ...).
+     *
+     * Prefer this over `itemGroups`.
+     */
+    items?: DropDownMenuEntry[];
+    /**
+     * When set (ms), selecting a checkbox item will keep the menu open and auto-close
+     * it after this delay. Each checkbox selection resets the timer.
+     *
+     * Blur / outside interactions still close immediately.
+     */
+    checkboxCloseDelayMs?: number;
+    className?: string;
+};
+/**
+ * Menu content can either be plain text or an embedded PiCard.
+ *
+ * NOTE: we intentionally type this as `PiCardRef` (a string), not a card definition.
+ */
+export type MenuContent = string | PiCardRef;
+export type MenuSeparatorEntry = null | {
+    type: "separator";
+};
+export type MenuLabelEntry = {
+    type: "label";
+    label: MenuContent;
+    inset?: boolean;
+};
+export type MenuActionItemEntry = {
+    type: "item";
+    id: string;
+    label: MenuContent;
+    disabled?: boolean;
+    inset?: boolean;
+    shortcut?: string;
+    /** Prevents the dropdown from closing when selected. */
+    keepOpen?: boolean;
+};
+export type MenuCheckboxItemEntry = {
+    type: "checkbox";
+    id: string;
+    label: MenuContent;
+    disabled?: boolean;
+    inset?: boolean;
+    shortcut?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Prevents the dropdown from closing when selected. */
+    keepOpen?: boolean;
+};
+export type MenuRadioItemEntry = {
+    value: string;
+    label: MenuContent;
+    disabled?: boolean;
+    inset?: boolean;
+    shortcut?: string;
+    /** Prevents the dropdown from closing when selected. */
+    keepOpen?: boolean;
+    /** Only affects the icon rendering (registry/ui supports this). */
+    hideIcon?: boolean;
+};
+export type MenuRadioGroupEntry = {
+    type: "radio-group";
+    id: string;
+    label?: MenuContent;
+    /** Optional extra left padding for the label (matches shadcn dropdown label inset). */
+    inset?: boolean;
+    value?: string;
+    defaultValue?: string;
+    items: MenuRadioItemEntry[];
+};
+export type MenuGroupEntry = {
+    type: "group";
+    label?: MenuContent;
+    /** Optional extra left padding for the label (matches shadcn dropdown label inset). */
+    inset?: boolean;
+    items: DropDownMenuEntry[];
+};
+export type MenuSubMenuEntry = {
+    type: "submenu";
+    /** Optional id used for event `path` (falls back to label string if possible). */
+    id?: string;
+    label: MenuContent;
+    disabled?: boolean;
+    inset?: boolean;
+    shortcut?: string;
+    items: DropDownMenuEntry[];
+};
+export type DropDownMenuEntry = string | MenuSeparatorEntry | MenuLabelEntry | MenuActionItemEntry | MenuCheckboxItemEntry | MenuRadioGroupEntry | MenuGroupEntry | MenuSubMenuEntry;
+export type DropDownMenuSelectedEventAdvanced = {
+    /** Discriminant for advanced menu items. */
+    type: "item" | "checkbox" | "radio";
+    /** The id of the selected menu entry (or the radio group id for `type: 'radio'`). */
+    id: string;
+    /** For radio items this is the selected value. */
+    value?: string;
+    /** For checkbox items this is the new checked state. */
+    checked?: boolean;
+    /** Hierarchical path of submenu ids leading to the item (if any). */
+    path?: string[];
+};
+export type DropDownMenuSelectedEvent = DropDownMenuSelectedEventAdvanced;
+export type DropDownMenuEvents = {
+    onSelected: DropDownMenuSelectedEvent;
+};

package/cards/dropDownMenu/drop-down.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/dropDownMenu/drop-down.types.ts
+var r = "pi/drop-down-menu", i = e(r), a = n(r, ["selected"]), o = t(a.SELECTED);
+//#endregion
+export { a as DROP_DOWN_MENU_ACTION, r as DROP_DOWN_MENU_CARD, i as DropDownMenu, o as onDropDownMenuClicked };
+
+//# sourceMappingURL=drop-down.types.js.map

package/cards/dropDownMenu/drop-down.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-down.types.js","names":[],"sources":["../../../src/cards/dropDownMenu/drop-down.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const DROP_DOWN_MENU_CARD = \"pi/drop-down-menu\";\nexport const DropDownMenu = createCardDeclaration<\n  DropDownMenuProps,\n  DropDownMenuEvents\n>(DROP_DOWN_MENU_CARD);\n\nexport const DROP_DOWN_MENU_ACTION = registerActions(DROP_DOWN_MENU_CARD, [\n  \"selected\",\n]);\n\nexport const onDropDownMenuClicked = createOnAction<DropDownMenuSelectedEvent>(\n  DROP_DOWN_MENU_ACTION.SELECTED,\n);\n\nexport type DropDownMenuProps = {\n  /**\n   * Dropdown trigger.\n   *\n   * - For a PiButton (or any custom) trigger, pass a `PiCardRef` and use the\n   *   referenced card's props. For `PiButton` specifically:\n   *   - `opts.iconName` + `opts.iconPlacement` to show an icon on the left/right.\n   *   - `label: \"\"` for an icon-only button.\n   *\n   * Implementation note: the dropdown trigger is wrapped in a DOM element so\n   * Radix can attach trigger handlers even when the trigger is rendered via\n   * `@pihanga2/core`'s `<Card />`.\n   */\n  trigger: PiCardRef;\n  menuAlign?: \"center\" | \"end\" | \"start\";\n  menuLabel?: string;\n\n  /**\n   * Menu declaration (supports sub-menus, checkbox/radio items, groups, labels, separators, ...).\n   *\n   * Prefer this over `itemGroups`.\n   */\n  items?: DropDownMenuEntry[];\n\n  /**\n   * When set (ms), selecting a checkbox item will keep the menu open and auto-close\n   * it after this delay. Each checkbox selection resets the timer.\n   *\n   * Blur / outside interactions still close immediately.\n   */\n  checkboxCloseDelayMs?: number;\n\n  className?: string;\n};\n\n/**\n * Menu content can either be plain text or an embedded PiCard.\n *\n * NOTE: we intentionally type this as `PiCardRef` (a string), not a card definition.\n */\nexport type MenuContent = string | PiCardRef;\n\nexport type MenuSeparatorEntry = null | {type: \"separator\"};\n\nexport type MenuLabelEntry = {\n  type: \"label\";\n  label: MenuContent;\n  inset?: boolean;\n};\n\nexport type MenuActionItemEntry = {\n  type: \"item\";\n  id: string;\n  label: MenuContent;\n  disabled?: boolean;\n  inset?: boolean;\n  shortcut?: string;\n  /** Prevents the dropdown from closing when selected. */\n  keepOpen?: boolean;\n};\n\nexport type MenuCheckboxItemEntry = {\n  type: \"checkbox\";\n  id: string;\n  label: MenuContent;\n  disabled?: boolean;\n  inset?: boolean;\n  shortcut?: string;\n  checked?: boolean;\n  defaultChecked?: boolean;\n  /** Prevents the dropdown from closing when selected. */\n  keepOpen?: boolean;\n};\n\nexport type MenuRadioItemEntry = {\n  value: string;\n  label: MenuContent;\n  disabled?: boolean;\n  inset?: boolean;\n  shortcut?: string;\n  /** Prevents the dropdown from closing when selected. */\n  keepOpen?: boolean;\n  /** Only affects the icon rendering (registry/ui supports this). */\n  hideIcon?: boolean;\n};\n\nexport type MenuRadioGroupEntry = {\n  type: \"radio-group\";\n  id: string;\n  label?: MenuContent;\n  /** Optional extra left padding for the label (matches shadcn dropdown label inset). */\n  inset?: boolean;\n  value?: string;\n  defaultValue?: string;\n  items: MenuRadioItemEntry[];\n};\n\nexport type MenuGroupEntry = {\n  type: \"group\";\n  label?: MenuContent;\n  /** Optional extra left padding for the label (matches shadcn dropdown label inset). */\n  inset?: boolean;\n  items: DropDownMenuEntry[];\n};\n\nexport type MenuSubMenuEntry = {\n  type: \"submenu\";\n  /** Optional id used for event `path` (falls back to label string if possible). */\n  id?: string;\n  label: MenuContent;\n  disabled?: boolean;\n  inset?: boolean;\n  shortcut?: string;\n  items: DropDownMenuEntry[];\n};\n\nexport type DropDownMenuEntry =\n  | string\n  | MenuSeparatorEntry\n  | MenuLabelEntry\n  | MenuActionItemEntry\n  | MenuCheckboxItemEntry\n  | MenuRadioGroupEntry\n  | MenuGroupEntry\n  | MenuSubMenuEntry;\n\nexport type DropDownMenuSelectedEventAdvanced = {\n  /** Discriminant for advanced menu items. */\n  type: \"item\" | \"checkbox\" | \"radio\";\n\n  /** The id of the selected menu entry (or the radio group id for `type: 'radio'`). */\n  id: string;\n\n  /** For radio items this is the selected value. */\n  value?: string;\n\n  /** For checkbox items this is the new checked state. */\n  checked?: boolean;\n\n  /** Hierarchical path of submenu ids leading to the item (if any). */\n  path?: string[];\n};\n\nexport type DropDownMenuSelectedEvent = DropDownMenuSelectedEventAdvanced;\n\nexport type DropDownMenuEvents = {\n  onSelected: DropDownMenuSelectedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAsB,qBACtB,IAAe,EAG1B,CAAmB,GAER,IAAwB,EAAgB,GAAqB,CACxE,UACF,CAAC,GAEY,IAAwB,EACnC,EAAsB,QACxB"}

package/cards/dropDownMenu/dropdown-context.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+/**
+ * Context to communicate dropdown menu state to nested components (e.g., Button triggers).
+ * This allows triggers to hide their tooltips when the dropdown is open.
+ */
+export declare const DropdownOpenContext: React.Context<boolean>;
+export declare const useDropdownOpen: () => boolean;

package/cards/dropDownMenu/dropdown-context.js

@@ -0,0 +1,7 @@
+import e from "react";
+//#region src/cards/dropDownMenu/dropdown-context.tsx
+var t = e.createContext(!1), n = () => e.useContext(t);
+//#endregion
+export { t as DropdownOpenContext, n as useDropdownOpen };
+
+//# sourceMappingURL=dropdown-context.js.map

package/cards/dropDownMenu/dropdown-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-context.js","names":[],"sources":["../../../src/cards/dropDownMenu/dropdown-context.tsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * Context to communicate dropdown menu state to nested components (e.g., Button triggers).\n * This allows triggers to hide their tooltips when the dropdown is open.\n */\nexport const DropdownOpenContext = React.createContext<boolean>(false);\n\nexport const useDropdownOpen = () => React.useContext(DropdownOpenContext);\n"],"mappings":";;AAMA,IAAa,IAAsB,EAAM,cAAuB,EAAK,GAExD,UAAwB,EAAM,WAAW,CAAmB"}

package/cards/dropDownMenu/dropdown-menu.ui.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+/**
+ * Pihanga-owned copy of the registry dropdown-menu primitives.
+ *
+ * Why this exists:
+ * - `src/registry/**` is upstream-managed and must remain read-only.
+ * - We needed menu width/shrink-to-fit fixes (`w-max`, avoid %/calc widths)
+ *   for correct sizing with long labels.
+ */
+export declare const dropdownMenuItemVariants: (props?: ({
+    size?: "default" | "none" | null | undefined;
+    variant?: "default" | "none" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare function DropdownMenu(props: DropdownMenuPrimitive.DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuTrigger(props: DropdownMenuPrimitive.DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuGroup(props: DropdownMenuPrimitive.DropdownMenuGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuPortal(props: DropdownMenuPrimitive.DropdownMenuPortalProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuSub(props: DropdownMenuPrimitive.DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuRadioGroup(props: DropdownMenuPrimitive.DropdownMenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuSubTrigger({ children, className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuContent({ className, portal, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {
+    portal?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuCheckboxItem({ children, className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuRadioItem({ children, className, hideIcon, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    hideIcon?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare function useOpenState(): {
+    open: boolean;
+    onOpenChange: (_value?: boolean) => void;
+};

package/cards/dropDownMenu/dropdown-menu.ui.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CheckIcon as i, ChevronRightIcon as a } from "lucide-react";
+import * as o from "@radix-ui/react-dropdown-menu";
+//#region src/cards/dropDownMenu/dropdown-menu.ui.tsx
+var s = t(e("relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground", "text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground"), {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "mx-1 h-[28px] px-2.5",
+			none: ""
+		},
+		variant: {
+			default: "focus:bg-accent focus:text-accent-foreground",
+			none: ""
+		}
+	}
+}), c = t(e("mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none"), { variants: { inset: { true: "pl-8" } } });
+function l(e) {
+	return /* @__PURE__ */ n(o.Root, { ...e });
+}
+function u(e) {
+	return /* @__PURE__ */ n(o.Trigger, { ...e });
+}
+function d(e) {
+	return /* @__PURE__ */ n(o.Group, {
+		className: "py-1.5",
+		...e
+	});
+}
+function f(e) {
+	return /* @__PURE__ */ n(o.Sub, { ...e });
+}
+function p(e) {
+	return /* @__PURE__ */ n(o.RadioGroup, { ...e });
+}
+function m({ children: t, className: i, inset: s, ...c }) {
+	return /* @__PURE__ */ r(o.SubTrigger, {
+		className: e("mx-1 flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent data-[state=open]:bg-accent", "no-focus-ring", "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", s && "pl-8", i),
+		...c,
+		children: [t, /* @__PURE__ */ n(a, { className: "ml-auto" })]
+	});
+}
+function h({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.SubContent, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", t),
+		...r
+	});
+}
+function g({ className: t, portal: r, ...i }) {
+	let a = /* @__PURE__ */ n(o.Content, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom", t),
+		sideOffset: 4,
+		...i
+	});
+	return r ? /* @__PURE__ */ n(o.Portal, { children: a }) : a;
+}
+function _({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.Item, {
+		className: e(s(), t),
+		...r
+	});
+}
+function v({ children: t, className: a, ...s }) {
+	return /* @__PURE__ */ r(o.CheckboxItem, {
+		className: e("relative flex items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4", "mx-1 h-[28px] cursor-pointer data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground", a),
+		...s,
+		children: [/* @__PURE__ */ n("span", {
+			className: "absolute right-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
+		}), t]
+	});
+}
+function y({ children: t, className: a, hideIcon: s, ...c }) {
+	return /* @__PURE__ */ r(o.RadioItem, {
+		className: e("relative flex items-center rounded-sm pr-2 pl-8 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "mx-1 h-[28px] cursor-pointer gap-2 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4", a),
+		...c,
+		children: [!s && /* @__PURE__ */ n("span", {
+			className: "absolute left-2 flex size-3.5 items-center justify-center",
+			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
+		}), t]
+	});
+}
+function b({ className: t, inset: r, ...i }) {
+	return /* @__PURE__ */ n(o.Label, {
+		className: e(c({ inset: r }), t),
+		...i
+	});
+}
+function x({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.Separator, {
+		className: e("-mx-1 my-1 h-px bg-muted", t),
+		...r
+	});
+}
+function S({ className: t, ...r }) {
+	return /* @__PURE__ */ n("span", {
+		className: e("ml-auto text-xs tracking-widest opacity-60", t),
+		...r
+	});
+}
+//#endregion
+export { l as DropdownMenu, v as DropdownMenuCheckboxItem, g as DropdownMenuContent, d as DropdownMenuGroup, _ as DropdownMenuItem, b as DropdownMenuLabel, p as DropdownMenuRadioGroup, y as DropdownMenuRadioItem, x as DropdownMenuSeparator, S as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuSubContent, m as DropdownMenuSubTrigger, u as DropdownMenuTrigger };
+
+//# sourceMappingURL=dropdown-menu.ui.js.map

package/cards/dropDownMenu/dropdown-menu.ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.ui.js","names":[],"sources":["../../../src/cards/dropDownMenu/dropdown-menu.ui.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport {CheckIcon, ChevronRightIcon} from \"lucide-react\";\n\nimport {cn} from \"@/lib/utils\";\n\n/**\n * Pihanga-owned copy of the registry dropdown-menu primitives.\n *\n * Why this exists:\n * - `src/registry/**` is upstream-managed and must remain read-only.\n * - We needed menu width/shrink-to-fit fixes (`w-max`, avoid %/calc widths)\n *   for correct sizing with long labels.\n */\nexport const dropdownMenuItemVariants = cva(\n  cn(\n    \"relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground\",\n    \"text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground\",\n  ),\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        // NOTE: Do NOT use %/calc-based widths here.\n        // Radix positions the dropdown content with a shrink-to-fit layout.\n        // If menu items have percentage widths, they don't contribute to the\n        // intrinsic (max-content) sizing of the container.\n        default: \"mx-1 h-[28px] px-2.5\",\n        none: \"\",\n      },\n      variant: {\n        default: \"focus:bg-accent focus:text-accent-foreground\",\n        none: \"\",\n      },\n    },\n  },\n);\n\nconst dropdownMenuLabelVariants = cva(\n  cn(\n    \"mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none\",\n  ),\n  {\n    variants: {\n      inset: {\n        true: \"pl-8\",\n      },\n    },\n  },\n);\n\nexport function DropdownMenu(props: DropdownMenuPrimitive.DropdownMenuProps) {\n  return <DropdownMenuPrimitive.Root {...props} />;\n}\n\nexport function DropdownMenuTrigger(\n  props: DropdownMenuPrimitive.DropdownMenuTriggerProps,\n) {\n  return <DropdownMenuPrimitive.Trigger {...props} />;\n}\n\nexport function DropdownMenuGroup(\n  props: DropdownMenuPrimitive.DropdownMenuGroupProps,\n) {\n  return <DropdownMenuPrimitive.Group className=\"py-1.5\" {...props} />;\n}\n\nexport function DropdownMenuPortal(\n  props: DropdownMenuPrimitive.DropdownMenuPortalProps,\n) {\n  return <DropdownMenuPrimitive.Portal {...props} />;\n}\n\nexport function DropdownMenuSub(\n  props: DropdownMenuPrimitive.DropdownMenuSubProps,\n) {\n  return <DropdownMenuPrimitive.Sub {...props} />;\n}\n\nexport function DropdownMenuRadioGroup(\n  props: DropdownMenuPrimitive.DropdownMenuRadioGroupProps,\n) {\n  return <DropdownMenuPrimitive.RadioGroup {...props} />;\n}\n\nexport function DropdownMenuSubTrigger({\n  children,\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      className={cn(\n        \"mx-1 flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent data-[state=open]:bg-accent\",\n        \"no-focus-ring\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  );\n}\n\nexport function DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      className={cn(\n        // `w-max` ensures submenu width grows with its content (up to max-w)\n        \"z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuContent({\n  className,\n  portal,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content> & {\n  portal?: boolean;\n}) {\n  const content = (\n    <DropdownMenuPrimitive.Content\n      className={cn(\n        // `w-max` makes the menu container grow with its content (up to max-w)\n        \"z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring\",\n        \"data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom\",\n        className,\n      )}\n      sideOffset={4}\n      {...props}\n    />\n  );\n\n  if (portal) {\n    return (\n      <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>\n    );\n  }\n\n  return content;\n}\n\nexport function DropdownMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> &\n  VariantProps<typeof dropdownMenuItemVariants>) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(dropdownMenuItemVariants(), className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuCheckboxItem({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      className={cn(\n        \"relative flex items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4\",\n        // NOTE: Do NOT use %/calc-based widths here for the same reason as\n        // dropdownMenuItemVariants: it prevents shrink-to-fit content sizing.\n        // IMPORTANT: Don't use `px-*` here, it would override `pr-8` above and\n        // cause the label to overlap the right-side check indicator.\n        \"mx-1 h-[28px] cursor-pointer data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuRadioItem({\n  children,\n  className,\n  hideIcon,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  hideIcon?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      className={cn(\n        \"relative flex items-center rounded-sm pr-2 pl-8 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n        // NOTE: Do NOT use %/calc-based widths here for the same reason as\n        // dropdownMenuItemVariants: it prevents shrink-to-fit content sizing.\n        // IMPORTANT: Don't use `px-*` here, it would override `pl-8` above and\n        // misalign the radio indicator.\n        \"mx-1 h-[28px] cursor-pointer gap-2 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {!hideIcon && (\n        <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n          <DropdownMenuPrimitive.ItemIndicator>\n            <CheckIcon />\n          </DropdownMenuPrimitive.ItemIndicator>\n        </span>\n      )}\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  );\n}\n\nexport function DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean;\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn(dropdownMenuLabelVariants({inset}), className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function useOpenState() {\n  const [open, setOpen] = React.useState(false);\n\n  const onOpenChange = React.useCallback(\n    (_value = !open) => {\n      setOpen(_value);\n    },\n    [open],\n  );\n\n  return {\n    open,\n    onOpenChange,\n  };\n}\n"],"mappings":"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"}

package/cards/dropDownMenu/index.d.ts

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

package/cards/dropDownMenu/index.js

@@ -0,0 +1,13 @@
+import { DROP_DOWN_MENU_ACTION as e, DROP_DOWN_MENU_CARD as t, DropDownMenu as n, onDropDownMenuClicked as r } from "./drop-down.types.js";
+import { Component as i } from "./drop-down.component.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/dropDownMenu/index.ts
+o({
+	name: t,
+	component: i,
+	events: a(e)
+});
+//#endregion
+export { e as DROP_DOWN_MENU_ACTION, t as DROP_DOWN_MENU_CARD, n as DropDownMenu, r as onDropDownMenuClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/dropDownMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/dropDownMenu/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {DROP_DOWN_MENU_ACTION, DROP_DOWN_MENU_CARD} from \"./drop-down.types\";\nimport {Component} from \"./drop-down.component\";\n\nexport * from \"./drop-down.types\";\n\nregisterCardComponent({\n  name: DROP_DOWN_MENU_CARD,\n  component: Component,\n  events: actionTypesToEvents(DROP_DOWN_MENU_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAqB;AACnD,CAAC"}

package/cards/emptyCard.d.ts

@@ -0,0 +1,7 @@
+import { PiCardProps } from '@pihanga2/core';
+import * as React from "react";
+export declare const EmptyCard: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<EmptyProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type EmptyProps = {
+    style?: React.CSSProperties;
+};
+export declare const EmptyComponent: (props: PiCardProps<EmptyProps>) => React.ReactNode;

package/cards/field/field.component.d.ts

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