@pihanga2/shadcn 0.2.15 → 0.2.18

package/cards/suspense/suspense.types.d.ts

@@ -0,0 +1,67 @@
+import { PiCardRef } from '@pihanga2/core';
+import { SkeletonRowSize, SkeletonSpacing } from '../loadingSkeleton';
+export declare const SUSPENSE_CARD = "shad/suspense";
+export declare const Suspense: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<SuspenseProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Props for the `shad/suspense` card.
+ *
+ * Wraps `content` in a React `<Suspense>` boundary so it can suspend
+ * independently of its siblings (e.g. when its component is code-split via
+ * `React.lazy`).
+ *
+ * **Default fallback** — animated shimmer skeleton rows (same as
+ * `shad/loading-skeleton`); customise with `rows` / `rowSize` / `spacing`:
+ * ```ts
+ * registerCard("myApp/editorSection", PiSuspense({
+ *   content: "myApp/codeEditor",
+ *   rows:    5,
+ *   rowSize: "lg",
+ * }));
+ * ```
+ *
+ * **Custom fallback card** — pass any registered card name via `fallback` to
+ * replace the built-in skeleton entirely:
+ * ```ts
+ * registerCard("myApp/graphSection", PiSuspense({
+ *   content:  "myApp/graphView",
+ *   fallback: "myApp/graphPlaceholder",
+ * }));
+ * ```
+ */
+export type SuspenseProps = {
+    /**
+     * The card to render inside the Suspense boundary.
+     * Typically registered with a `React.lazy` component so it can suspend.
+     */
+    content: PiCardRef;
+    /**
+     * Optional card to use as the Suspense fallback.
+     * When provided, the built-in skeleton props below are ignored.
+     */
+    fallback?: PiCardRef;
+    /**
+     * Number of placeholder rows shown while suspended.
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Named height preset for each shimmer row.
+     * @default "md"
+     */
+    rowSize?: SkeletonRowSize;
+    /**
+     * Named gap preset between shimmer rows.
+     * @default "md"
+     */
+    spacing?: SkeletonSpacing;
+    /**
+     * Raw Tailwind classes for every shimmer row.
+     * When set, takes precedence over `rowSize`.
+     */
+    rowClassName?: string;
+    /**
+     * Raw Tailwind classes for the outer wrapper `<div>`.
+     * When set, takes precedence over `spacing`.
+     */
+    className?: string;
+};

package/cards/suspense/suspense.types.js

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

package/cards/suspense/suspense.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suspense.types.js","names":[],"sources":["../../../src/cards/suspense/suspense.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\nimport type {SkeletonRowSize, SkeletonSpacing} from \"@/cards/loadingSkeleton\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const SUSPENSE_CARD = \"shad/suspense\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Suspense = createCardDeclaration<SuspenseProps>(SUSPENSE_CARD);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/suspense` card.\n *\n * Wraps `content` in a React `<Suspense>` boundary so it can suspend\n * independently of its siblings (e.g. when its component is code-split via\n * `React.lazy`).\n *\n * **Default fallback** — animated shimmer skeleton rows (same as\n * `shad/loading-skeleton`); customise with `rows` / `rowSize` / `spacing`:\n * ```ts\n * registerCard(\"myApp/editorSection\", PiSuspense({\n *   content: \"myApp/codeEditor\",\n *   rows:    5,\n *   rowSize: \"lg\",\n * }));\n * ```\n *\n * **Custom fallback card** — pass any registered card name via `fallback` to\n * replace the built-in skeleton entirely:\n * ```ts\n * registerCard(\"myApp/graphSection\", PiSuspense({\n *   content:  \"myApp/graphView\",\n *   fallback: \"myApp/graphPlaceholder\",\n * }));\n * ```\n */\nexport type SuspenseProps = {\n  /**\n   * The card to render inside the Suspense boundary.\n   * Typically registered with a `React.lazy` component so it can suspend.\n   */\n  content: PiCardRef;\n\n  /**\n   * Optional card to use as the Suspense fallback.\n   * When provided, the built-in skeleton props below are ignored.\n   */\n  fallback?: PiCardRef;\n\n  // ── Built-in skeleton fallback options (ignored when `fallback` is set) ────\n\n  /**\n   * Number of placeholder rows shown while suspended.\n   * @default 3\n   */\n  rows?: number;\n\n  /**\n   * Named height preset for each shimmer row.\n   * @default \"md\"\n   */\n  rowSize?: SkeletonRowSize;\n\n  /**\n   * Named gap preset between shimmer rows.\n   * @default \"md\"\n   */\n  spacing?: SkeletonSpacing;\n\n  /**\n   * Raw Tailwind classes for every shimmer row.\n   * When set, takes precedence over `rowSize`.\n   */\n  rowClassName?: string;\n\n  /**\n   * Raw Tailwind classes for the outer wrapper `<div>`.\n   * When set, takes precedence over `spacing`.\n   */\n  className?: string;\n};\n// No events — display-only structural card.\n"],"mappings":";;AAMA,IAAa,IAAgB,iBAIhB,IAAW,EAAqC,CAAa"}

package/cards/typography/typography.component.js

@@ -16,27 +16,28 @@ var a = {
 	small: ["small", "text-sm font-medium leading-none"],
 	muted: ["p", "text-sm text-muted-foreground"]
 }, o = (s) => {
-	let { text: c, childCard: l, paragraph: u, level: d, className: f, style: p, cardName: m, _dispatch: h, _cls: g } = s, [_, v] = d ? a[d] : ["div", ""];
-	function y() {
+	let { text: c, childCard: l, paragraph: u, level: d, className: f, style: p, id: m, cardName: h, _dispatch: g, _cls: _ } = s, [v, y] = d ? a[d] : ["div", ""];
+	function b() {
 		return l ? /* @__PURE__ */ i(n, {
 			cardName: l,
-			parentCard: m
-		}) : u ? /* @__PURE__ */ i(r, { children: u.map((e, t) => b(e, t)) }) : c;
+			parentCard: h
+		}) : u ? /* @__PURE__ */ i(r, { children: u.map((e, t) => x(e, t)) }) : c;
 	}
-	function b(e, t) {
+	function x(e, t) {
 		return typeof e == "string" ? e : e && typeof e == "object" ? o({
 			...e,
-			_dispatch: h,
-			_cls: g,
-			cardName: m,
+			_dispatch: g,
+			_cls: _,
+			cardName: h,
 			key: t
 		}) : null;
 	}
-	return t.createElement(_, {
-		className: e(v, f),
+	return t.createElement(v, {
+		className: e(y, f),
 		style: p,
-		"data-pihanga": m
-	}, y());
+		...m ? { id: m } : {},
+		"data-pihanga": h
+	}, b());
 };
 //#endregion
 export { o as TypographyComponent };

package/cards/typography/typography.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.component.js","names":[],"sources":["../../../src/cards/typography/typography.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {TypographyLevel, TypographyProps} from \"./typography.types\";\n\n/** Maps each level to [html element, tailwind classes] */\nconst LEVEL_CONFIG: Record<\n  TypographyLevel,\n  [keyof React.JSX.IntrinsicElements, string]\n> = {\n  h1: [\"h1\", \"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\"],\n  h2: [\n    \"h2\",\n    \"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\",\n  ],\n  h3: [\"h3\", \"scroll-m-20 text-2xl font-semibold tracking-tight\"],\n  h4: [\"h4\", \"scroll-m-20 text-xl font-semibold tracking-tight\"],\n  p: [\"p\", \"leading-7 [&:not(:first-child)]:mt-6\"],\n  blockquote: [\"blockquote\", \"mt-6 border-l-2 pl-6 italic\"],\n  code: [\n    \"code\",\n    \"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\",\n  ],\n  lead: [\"p\", \"text-xl text-muted-foreground\"],\n  large: [\"div\", \"text-lg font-semibold\"],\n  small: [\"small\", \"text-sm font-medium leading-none\"],\n  muted: [\"p\", \"text-sm text-muted-foreground\"],\n};\n\nexport const TypographyComponent = (\n  props: PiCardProps<TypographyProps>,\n): React.ReactNode => {\n  const {\n    text,\n    childCard,\n    paragraph,\n    level,\n    className,\n    style,\n    cardName,\n    _dispatch,\n    _cls,\n  } = props;\n\n  const [el, levelClass] = level ? LEVEL_CONFIG[level] : [\"div\", \"\"];\n\n  function renderChildren(): React.ReactNode {\n    if (childCard) {\n      return <Card cardName={childCard} parentCard={cardName} />;\n    }\n    if (paragraph) {\n      return <>{paragraph.map((item, i) => renderParaItem(item, i))}</>;\n    }\n    return text;\n  }\n\n  function renderParaItem(\n    item: string | TypographyProps,\n    key: number,\n  ): React.ReactNode {\n    if (typeof item === \"string\") {\n      return item;\n    }\n    if (item && typeof item === \"object\") {\n      return TypographyComponent({\n        ...item,\n        _dispatch,\n        _cls,\n        cardName,\n        key,\n      } as PiCardProps<TypographyProps> & {key: number});\n    }\n    return null;\n  }\n\n  return React.createElement(\n    el,\n    {\n      className: cn(levelClass, className),\n      style,\n      \"data-pihanga\": cardName,\n    },\n    renderChildren(),\n  );\n};\n"],"mappings":";;;;;AAMA,IAAM,IAGF;CACF,IAAI,CAAC,MAAM,gEAAgE;CAC3E,IAAI,CACF,MACA,4EACF;CACA,IAAI,CAAC,MAAM,mDAAmD;CAC9D,IAAI,CAAC,MAAM,kDAAkD;CAC7D,GAAG,CAAC,KAAK,sCAAsC;CAC/C,YAAY,CAAC,cAAc,6BAA6B;CACxD,MAAM,CACJ,QACA,mFACF;CACA,MAAM,CAAC,KAAK,+BAA+B;CAC3C,OAAO,CAAC,OAAO,uBAAuB;CACtC,OAAO,CAAC,SAAS,kCAAkC;CACnD,OAAO,CAAC,KAAK,+BAA+B;AAC9C,GAEa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,cACA,UACA,cACA,UACA,aACA,cACA,YACE,GAEE,CAAC,GAAI,KAAc,IAAQ,EAAa,KAAS,CAAC,OAAO,EAAE;CAEjE,SAAS,IAAkC;EAOzC,OANI,IACK,kBAAC,GAAD;GAAM,UAAU;GAAW,YAAY;EAAW,CAAA,IAEvD,IACK,kBAAA,GAAA,EAAA,UAAG,EAAU,KAAK,GAAM,MAAM,EAAe,GAAM,CAAC,CAAC,EAAI,CAAA,IAE3D;CACT;CAEA,SAAS,EACP,GACA,GACiB;EAajB,OAZI,OAAO,KAAS,WACX,IAEL,KAAQ,OAAO,KAAS,WACnB,EAAoB;GACzB,GAAG;GACH;GACA;GACA;GACA;EACF,CAAiD,IAE5C;CACT;CAEA,OAAO,EAAM,cACX,GACA;EACE,WAAW,EAAG,GAAY,CAAS;EACnC;EACA,gBAAgB;CAClB,GACA,EAAe,CACjB;AACF"}
+{"version":3,"file":"typography.component.js","names":[],"sources":["../../../src/cards/typography/typography.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {TypographyLevel, TypographyProps} from \"./typography.types\";\n\n/** Maps each level to [html element, tailwind classes] */\nconst LEVEL_CONFIG: Record<\n  TypographyLevel,\n  [keyof React.JSX.IntrinsicElements, string]\n> = {\n  h1: [\"h1\", \"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\"],\n  h2: [\n    \"h2\",\n    \"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0\",\n  ],\n  h3: [\"h3\", \"scroll-m-20 text-2xl font-semibold tracking-tight\"],\n  h4: [\"h4\", \"scroll-m-20 text-xl font-semibold tracking-tight\"],\n  p: [\"p\", \"leading-7 [&:not(:first-child)]:mt-6\"],\n  blockquote: [\"blockquote\", \"mt-6 border-l-2 pl-6 italic\"],\n  code: [\n    \"code\",\n    \"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\",\n  ],\n  lead: [\"p\", \"text-xl text-muted-foreground\"],\n  large: [\"div\", \"text-lg font-semibold\"],\n  small: [\"small\", \"text-sm font-medium leading-none\"],\n  muted: [\"p\", \"text-sm text-muted-foreground\"],\n};\n\nexport const TypographyComponent = (\n  props: PiCardProps<TypographyProps>,\n): React.ReactNode => {\n  const {\n    text,\n    childCard,\n    paragraph,\n    level,\n    className,\n    style,\n    id,\n    cardName,\n    _dispatch,\n    _cls,\n  } = props;\n\n  const [el, levelClass] = level ? LEVEL_CONFIG[level] : [\"div\", \"\"];\n\n  function renderChildren(): React.ReactNode {\n    if (childCard) {\n      return <Card cardName={childCard} parentCard={cardName} />;\n    }\n    if (paragraph) {\n      return <>{paragraph.map((item, i) => renderParaItem(item, i))}</>;\n    }\n    return text;\n  }\n\n  function renderParaItem(\n    item: string | TypographyProps,\n    key: number,\n  ): React.ReactNode {\n    if (typeof item === \"string\") {\n      return item;\n    }\n    if (item && typeof item === \"object\") {\n      return TypographyComponent({\n        ...item,\n        _dispatch,\n        _cls,\n        cardName,\n        key,\n      } as PiCardProps<TypographyProps> & {key: number});\n    }\n    return null;\n  }\n\n  return React.createElement(\n    el,\n    {\n      className: cn(levelClass, className),\n      style,\n      ...(id ? {id} : {}),\n      \"data-pihanga\": cardName,\n    },\n    renderChildren(),\n  );\n};\n"],"mappings":";;;;;AAMA,IAAM,IAGF;CACF,IAAI,CAAC,MAAM,gEAAgE;CAC3E,IAAI,CACF,MACA,4EACF;CACA,IAAI,CAAC,MAAM,mDAAmD;CAC9D,IAAI,CAAC,MAAM,kDAAkD;CAC7D,GAAG,CAAC,KAAK,sCAAsC;CAC/C,YAAY,CAAC,cAAc,6BAA6B;CACxD,MAAM,CACJ,QACA,mFACF;CACA,MAAM,CAAC,KAAK,+BAA+B;CAC3C,OAAO,CAAC,OAAO,uBAAuB;CACtC,OAAO,CAAC,SAAS,kCAAkC;CACnD,OAAO,CAAC,KAAK,+BAA+B;AAC9C,GAEa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,cACA,UACA,cACA,UACA,OACA,aACA,cACA,YACE,GAEE,CAAC,GAAI,KAAc,IAAQ,EAAa,KAAS,CAAC,OAAO,EAAE;CAEjE,SAAS,IAAkC;EAOzC,OANI,IACK,kBAAC,GAAD;GAAM,UAAU;GAAW,YAAY;EAAW,CAAA,IAEvD,IACK,kBAAA,GAAA,EAAA,UAAG,EAAU,KAAK,GAAM,MAAM,EAAe,GAAM,CAAC,CAAC,EAAI,CAAA,IAE3D;CACT;CAEA,SAAS,EACP,GACA,GACiB;EAajB,OAZI,OAAO,KAAS,WACX,IAEL,KAAQ,OAAO,KAAS,WACnB,EAAoB;GACzB,GAAG;GACH;GACA;GACA;GACA;EACF,CAAiD,IAE5C;CACT;CAEA,OAAO,EAAM,cACX,GACA;EACE,WAAW,EAAG,GAAY,CAAS;EACnC;EACA,GAAI,IAAK,EAAC,MAAE,IAAI,CAAC;EACjB,gBAAgB;CAClB,GACA,EAAe,CACjB;AACF"}

package/cards/typography/typography.types.d.ts

@@ -16,6 +16,8 @@ export type TypographyProps = {
     paragraph?: (string | TypographyProps)[];
     /** Semantic level — controls the HTML element and default prose styling. */
     level?: TypographyLevel;
+    /** HTML `id` attribute — enables `<a href="#id">` anchor scrolling. */
+    id?: string;
     /** Additional CSS classes applied directly to the element. */
     className?: string;
     /** Inline styles applied directly to the element. */

package/cards/typography/typography.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.js","names":[],"sources":["../../../src/cards/typography/typography.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const TYPOGRAPHY_CARD = \"shad/typography\";\n\nexport const Typography =\n  createCardDeclaration<TypographyProps>(TYPOGRAPHY_CARD);\n\n/**\n * Semantic level controls both the rendered HTML element and default\n * Tailwind prose styling (following shadcn/ui typography conventions).\n */\nexport type TypographyLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"blockquote\"\n  | \"code\"\n  | \"lead\" // large muted intro paragraph\n  | \"large\" // large text, semibold\n  | \"small\" // small, medium-weight\n  | \"muted\"; // small, muted-foreground\n\nexport type TypographyProps = {\n  /** Plain text content. */\n  text?: string;\n  /** A child card rendered as content. */\n  childCard?: PiCardRef;\n  /** Inline paragraph: mix of literal strings and nested TypographyProps. */\n  paragraph?: (string | TypographyProps)[];\n\n  /** Semantic level — controls the HTML element and default prose styling. */\n  level?: TypographyLevel;\n\n  /** Additional CSS classes applied directly to the element. */\n  className?: string;\n  /** Inline styles applied directly to the element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;;AAGA,IAAa,IAAkB,mBAElB,IACX,EAAuC,CAAe"}
+{"version":3,"file":"typography.types.js","names":[],"sources":["../../../src/cards/typography/typography.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const TYPOGRAPHY_CARD = \"shad/typography\";\n\nexport const Typography =\n  createCardDeclaration<TypographyProps>(TYPOGRAPHY_CARD);\n\n/**\n * Semantic level controls both the rendered HTML element and default\n * Tailwind prose styling (following shadcn/ui typography conventions).\n */\nexport type TypographyLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"blockquote\"\n  | \"code\"\n  | \"lead\" // large muted intro paragraph\n  | \"large\" // large text, semibold\n  | \"small\" // small, medium-weight\n  | \"muted\"; // small, muted-foreground\n\nexport type TypographyProps = {\n  /** Plain text content. */\n  text?: string;\n  /** A child card rendered as content. */\n  childCard?: PiCardRef;\n  /** Inline paragraph: mix of literal strings and nested TypographyProps. */\n  paragraph?: (string | TypographyProps)[];\n\n  /** Semantic level — controls the HTML element and default prose styling. */\n  level?: TypographyLevel;\n\n  /** HTML `id` attribute — enables `<a href=\"#id\">` anchor scrolling. */\n  id?: string;\n  /** Additional CSS classes applied directly to the element. */\n  className?: string;\n  /** Inline styles applied directly to the element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;;AAGA,IAAa,IAAkB,mBAElB,IACX,EAAuC,CAAe"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.15",
+  "version": "0.2.18",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -128,6 +128,14 @@
       "import": "./cards/resizable/index.js",
       "types": "./cards/resizable/index.d.ts"
     },
+    "./cards/resizableColumns": {
+      "import": "./cards/resizableColumns/index.js",
+      "types": "./cards/resizableColumns/index.d.ts"
+    },
+    "./cards/resizableGrid": {
+      "import": "./cards/resizableGrid/index.js",
+      "types": "./cards/resizableGrid/index.d.ts"
+    },
     "./cards/scrollbarWithAnnotations": {
       "import": "./cards/scrollbarWithAnnotations/index.js",
       "types": "./cards/scrollbarWithAnnotations/index.d.ts"
@@ -156,6 +164,10 @@
       "import": "./cards/stepper/index.js",
       "types": "./cards/stepper/index.d.ts"
     },
+    "./cards/suspense": {
+      "import": "./cards/suspense/index.js",
+      "types": "./cards/suspense/index.d.ts"
+    },
     "./cards/switch": {
       "import": "./cards/switch/index.js",
       "types": "./cards/switch/index.d.ts"
@@ -233,6 +245,8 @@
     "./cards/pageWithNavbarMeta/index.js",
     "./cards/pasteTarget/index.js",
     "./cards/resizable/index.js",
+    "./cards/resizableColumns/index.js",
+    "./cards/resizableGrid/index.js",
     "./cards/scrollbarWithAnnotations/index.js",
     "./cards/select/index.js",
     "./cards/sheetCard/index.js",
@@ -240,6 +254,7 @@
     "./cards/sliderValue/index.js",
     "./cards/stack/index.js",
     "./cards/stepper/index.js",
+    "./cards/suspense/index.js",
     "./cards/switch/index.js",
     "./cards/tabs/index.js",
     "./cards/textField/index.js",
@@ -265,7 +280,7 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@pihanga2/core": "^0.3.21",
+    "@pihanga2/core": "^0.3.34",
     "@pihanga2/cards": "*"
   },
   "dependencies": {