@pihanga2/shadcn 0.2.14 → 0.2.17

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.14",
+  "version": "0.2.17",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -84,6 +84,10 @@
       "import": "./cards/jsonViewer/index.js",
       "types": "./cards/jsonViewer/index.d.ts"
     },
+    "./cards/keyboardOverlay": {
+      "import": "./cards/keyboardOverlay/index.js",
+      "types": "./cards/keyboardOverlay/index.d.ts"
+    },
     "./cards/list": {
       "import": "./cards/list/index.js",
       "types": "./cards/list/index.d.ts"
@@ -152,6 +156,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"
@@ -218,6 +226,7 @@
     "./cards/infoCard/index.js",
     "./cards/input/index.js",
     "./cards/jsonViewer/index.js",
+    "./cards/keyboardOverlay/index.js",
     "./cards/list/index.js",
     "./cards/loadingOverlay/index.js",
     "./cards/loadingSkeleton/index.js",
@@ -235,6 +244,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",
@@ -260,7 +270,7 @@
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "@pihanga2/core": "^0.3.21",
+    "@pihanga2/core": "^0.3.34",
     "@pihanga2/cards": "*"
   },
   "dependencies": {