@pihanga2/shadcn 0.2.9 → 0.2.11

package/AGENT.building-cards.md

@@ -817,7 +817,7 @@ includes `@import "@pihanga2/shadcn/theme.css"`.  That single import:
 
 1. Defines the CSS custom property palette (`:root`, `.dark`)
 2. Maps them to Tailwind v4 utility tokens (`@theme inline`)
-3. Tells Tailwind to scan the library's compiled files (`@source "."`)
+3. Tells Tailwind to scan the library's compiled files (`@source unsafe(".")`)
 
 Apps that already use shadcn/ui with their own theme setup do not need the
 import — their `:root` variables cascade over the defaults.

package/AGENT.using-cards.md

@@ -82,7 +82,7 @@
 | **Cards available** | All 34 | 30 core (no graphin / jsonViewer / markdownViewer / resizable) |
 | **Requires `shadcn init`** | Yes | No |
 | **Files land in your project** | Yes — editable source | No — compiled bundle |
-| **Tailwind** | Consumer's own Tailwind config | Add `@source` pointing at `node_modules/@pihanga2/shadcn/dist-lib` |
+| **Tailwind** | Consumer's own Tailwind config | `@import "@pihanga2/shadcn/theme.css"` handles source scanning automatically |
 
 Use the **registry** for projects already on shadcn/ui or when you want to
 customise card source.  Use the **npm package** for monorepos, CI, or anywhere
@@ -137,11 +137,17 @@ Then use `registerCard(...)` in your init function exactly as with the registry.
 **Cards NOT in the npm package** (registry-only due to heavy deps):
 `graphin`, `jsonViewer`, `markdownViewer`, `resizable`.
 
-**Tailwind:** add `@source` to your CSS so Tailwind can scan the package:
+**Tailwind:** import `theme.css` from the package — it contains `@source "."` which tells Tailwind to scan the package automatically (Tailwind v4.3+):
 ```css
 /* src/index.css — Tailwind v4 */
 @import "tailwindcss";
-@source "../../node_modules/@pihanga2/shadcn/dist-lib";
+@import "@pihanga2/shadcn/theme.css";
+```
+
+If you already have your own shadcn/ui theme and skip the `theme.css` import, add `@source` lines pointing at the package's compiled output instead:
+```css
+@source "../node_modules/@pihanga2/shadcn/cards";
+@source "../node_modules/@pihanga2/shadcn/components";
 ```
 
 ### Migrating a card from npm to a local customised copy
@@ -384,7 +390,7 @@ Full registry index: `https://ivcap-works.github.io/pihanga-shadcn/r/registry.js
 - Activate cards with `import "@pihanga2/shadcn"` (all) or per-card sub-paths.
 - `graphin`, `jsonViewer`, `markdownViewer`, `resizable` are not in the npm
   package — use the registry for those.
-- Point Tailwind at `node_modules/@pihanga2/shadcn/dist-lib` to scan classes.
+- Import `@pihanga2/shadcn/theme.css` — it handles Tailwind source scanning automatically via `@source "."`.
 - **Import types from the card index, not deep sub-paths.**  The exports map
   only exposes `@pihanga2/shadcn/cards/<card>` — every type from
   `<card>.types.ts` is re-exported there.  Deep paths like

package/README.md

@@ -62,7 +62,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (41)
+## Included cards (43)
 
 - `avatar`
 - `badge`
@@ -80,6 +80,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `flexGrid`
 - `form`
 - `framework`
+- `iconCard`
 - `infoCard`
 - `input`
 - `jsonViewer`
@@ -95,6 +96,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `resizable`
 - `scrollbarWithAnnotations`
 - `select`
+- `sheetCard`
 - `slider`
 - `sliderValue`
 - `stack`

package/cards/box/box.component.js

@@ -3,19 +3,20 @@ import { Card as e } from "@pihanga2/core";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/cards/box/box.component.tsx
 var r = (r) => {
-	let { content: i, className: a, style: o, cardName: s } = r, c = { ...o };
-	r.height && (c.height = `${r.height}px`), r.width && (c.width = `${r.width}px`), r.marginTop && (c.marginTop = `${r.marginTop}px`), r.marginBottom && (c.marginBottom = `${r.marginBottom}px`), r.marginLeft && (c.marginLeft = `${r.marginLeft}px`), r.marginRight && (c.marginRight = `${r.marginRight}px`), r.paddingTop && (c.paddingTop = `${r.paddingTop}px`), r.paddingBottom && (c.paddingBottom = `${r.paddingBottom}px`), r.paddingLeft && (c.paddingLeft = `${r.paddingLeft}px`), r.paddingRight && (c.paddingRight = `${r.paddingRight}px`);
-	function l() {
-		return i ? i.map((n, r) => /* @__PURE__ */ t(e, {
+	let { content: i, singleContent: a, className: o, style: s, cardName: c } = r, l = { ...s };
+	r.height && (l.height = `${r.height}px`), r.width && (l.width = `${r.width}px`), r.marginTop && (l.marginTop = `${r.marginTop}px`), r.marginBottom && (l.marginBottom = `${r.marginBottom}px`), r.marginLeft && (l.marginLeft = `${r.marginLeft}px`), r.marginRight && (l.marginRight = `${r.marginRight}px`), r.paddingTop && (l.paddingTop = `${r.paddingTop}px`), r.paddingBottom && (l.paddingBottom = `${r.paddingBottom}px`), r.paddingLeft && (l.paddingLeft = `${r.paddingLeft}px`), r.paddingRight && (l.paddingRight = `${r.paddingRight}px`);
+	let u = a ? [a] : i;
+	function d() {
+		return u ? u.map((n, r) => /* @__PURE__ */ t(e, {
 			cardName: n,
-			parentCard: s
+			parentCard: c
 		}, r)) : null;
 	}
 	return /* @__PURE__ */ n("div", {
-		className: a,
-		style: c,
-		"data-pihanga": s,
-		children: [l(), r.children]
+		className: o,
+		style: l,
+		"data-pihanga": c,
+		children: [d(), r.children]
 	});
 };
 //#endregion

package/cards/box/box.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.component.js","names":[],"sources":["../../../src/cards/box/box.component.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {BoxProps} from \"./box.types\";\n\nexport const BoxComponent = (props: PiCardProps<BoxProps>): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  const sy: Record<string, string | number> = {\n    ...(style as Record<string, string | number> | undefined),\n  };\n  if (props.height) sy.height = `${props.height}px`;\n  if (props.width) sy.width = `${props.width}px`;\n\n  if (props.marginTop) sy.marginTop = `${props.marginTop}px`;\n  if (props.marginBottom) sy.marginBottom = `${props.marginBottom}px`;\n  if (props.marginLeft) sy.marginLeft = `${props.marginLeft}px`;\n  if (props.marginRight) sy.marginRight = `${props.marginRight}px`;\n\n  if (props.paddingTop) sy.paddingTop = `${props.paddingTop}px`;\n  if (props.paddingBottom) sy.paddingBottom = `${props.paddingBottom}px`;\n  if (props.paddingLeft) sy.paddingLeft = `${props.paddingLeft}px`;\n  if (props.paddingRight) sy.paddingRight = `${props.paddingRight}px`;\n\n  function renderContent() {\n    if (!content) return null;\n    return content.map((cn, i) => (\n      <Card cardName={cn} parentCard={cardName} key={i} />\n    ));\n  }\n\n  return (\n    <div className={className} style={sy} data-pihanga={cardName}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,KAAgB,MAAkD;CAC7E,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY,GAExC,IAAsC,EAC1C,GAAI,EACN;CAYA,AAXI,EAAM,WAAQ,EAAG,SAAS,GAAG,EAAM,OAAO,MAC1C,EAAM,UAAO,EAAG,QAAQ,GAAG,EAAM,MAAM,MAEvC,EAAM,cAAW,EAAG,YAAY,GAAG,EAAM,UAAU,MACnD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa,MAC5D,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MAEzD,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,kBAAe,EAAG,gBAAgB,GAAG,EAAM,cAAc,MAC/D,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MACzD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa;CAEhE,SAAS,IAAgB;EAEvB,OADK,IACE,EAAQ,KAAK,GAAI,MACtB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD,IAHoB;CAIvB;CAEA,OACE,kBAAC,OAAD;EAAgB;EAAW,OAAO;EAAI,gBAAc;YAApD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}
+{"version":3,"file":"box.component.js","names":[],"sources":["../../../src/cards/box/box.component.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {BoxProps} from \"./box.types\";\n\nexport const BoxComponent = (props: PiCardProps<BoxProps>): React.ReactNode => {\n  const {content, singleContent, className, style, cardName} = props;\n\n  const sy: Record<string, string | number> = {\n    ...(style as Record<string, string | number> | undefined),\n  };\n  if (props.height) sy.height = `${props.height}px`;\n  if (props.width) sy.width = `${props.width}px`;\n\n  if (props.marginTop) sy.marginTop = `${props.marginTop}px`;\n  if (props.marginBottom) sy.marginBottom = `${props.marginBottom}px`;\n  if (props.marginLeft) sy.marginLeft = `${props.marginLeft}px`;\n  if (props.marginRight) sy.marginRight = `${props.marginRight}px`;\n\n  if (props.paddingTop) sy.paddingTop = `${props.paddingTop}px`;\n  if (props.paddingBottom) sy.paddingBottom = `${props.paddingBottom}px`;\n  if (props.paddingLeft) sy.paddingLeft = `${props.paddingLeft}px`;\n  if (props.paddingRight) sy.paddingRight = `${props.paddingRight}px`;\n\n  const cards = singleContent ? [singleContent] : content;\n  function renderContent() {\n    if (!cards) return null;\n    return cards.map((cn, i) => (\n      <Card cardName={cn} parentCard={cardName} key={i} />\n    ));\n  }\n\n  return (\n    <div className={className} style={sy} data-pihanga={cardName}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,KAAgB,MAAkD;CAC7E,IAAM,EAAC,YAAS,kBAAe,cAAW,UAAO,gBAAY,GAEvD,IAAsC,EAC1C,GAAI,EACN;CAYA,AAXI,EAAM,WAAQ,EAAG,SAAS,GAAG,EAAM,OAAO,MAC1C,EAAM,UAAO,EAAG,QAAQ,GAAG,EAAM,MAAM,MAEvC,EAAM,cAAW,EAAG,YAAY,GAAG,EAAM,UAAU,MACnD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa,MAC5D,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MAEzD,EAAM,eAAY,EAAG,aAAa,GAAG,EAAM,WAAW,MACtD,EAAM,kBAAe,EAAG,gBAAgB,GAAG,EAAM,cAAc,MAC/D,EAAM,gBAAa,EAAG,cAAc,GAAG,EAAM,YAAY,MACzD,EAAM,iBAAc,EAAG,eAAe,GAAG,EAAM,aAAa;CAEhE,IAAM,IAAQ,IAAgB,CAAC,CAAa,IAAI;CAChD,SAAS,IAAgB;EAEvB,OADK,IACE,EAAM,KAAK,GAAI,MACpB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD,IAHkB;CAIrB;CAEA,OACE,kBAAC,OAAD;EAAgB;EAAW,OAAO;EAAI,gBAAc;YAApD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}

package/cards/box/box.types.d.ts

@@ -22,6 +22,8 @@ export type DisplayGridT = {
 export type BoxProps<S = object> = {
     /** Child card refs rendered inside the box */
     content?: PiCardRef[];
+    /** Single child to make dynmic selection (s) => ... possible */
+    singleContent?: PiCardRef;
     /** Override the root element type */
     component?: React.ElementType;
     /** Fixed height in pixels */

package/cards/box/box.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.types.js","names":[],"sources":["../../../src/cards/box/box.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const BOX_CARD = \"shad/box\";\n\n/**\n * Responsive display grid breakpoints.\n *\n * Each key maps to a CSS display value applied at that viewport width:\n * - `xs`: < 640 px (default / mobile-first)\n * - `sm`: ≥ 640 px\n * - `md`: ≥ 768 px\n * - `lg`: ≥ 1024 px\n * - `xl`: ≥ 1280 px\n * - `xxl`: ≥ 1536 px\n */\nexport type DisplayGridT = {\n  xs?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  xxl?: string;\n};\n\nexport type BoxProps<S = object> = {\n  /** Child card refs rendered inside the box */\n  content?: PiCardRef[];\n\n  /** Override the root element type */\n  component?: React.ElementType;\n\n  /** Fixed height in pixels */\n  height?: number;\n  /** Fixed width in pixels */\n  width?: number;\n\n  marginTop?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n  marginRight?: number;\n\n  paddingTop?: number;\n  paddingBottom?: number;\n  paddingLeft?: number;\n  paddingRight?: number;\n\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n  /** Additional Tailwind utility classes */\n  className?: string;\n};\n\n/**\n * Factory function for declaring a `shad/box` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Box} from \"@/cards/box\";\n *\n * registerCard(\"myApp/spacer\", Box({height: 24}));\n *\n * registerCard(\"myApp/contentRegion\", Box({\n *   content:    [\"myApp/card1\", \"myApp/card2\"],\n *   paddingTop: 16,\n *   className:  \"rounded-lg border bg-card\",\n * }));\n * ```\n */\nexport const Box = createCardDeclaration<BoxProps>(BOX_CARD);\n"],"mappings":";;AAEA,IAAa,IAAW,YAkEX,IAAM,EAAgC,CAAQ"}
+{"version":3,"file":"box.types.js","names":[],"sources":["../../../src/cards/box/box.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const BOX_CARD = \"shad/box\";\n\n/**\n * Responsive display grid breakpoints.\n *\n * Each key maps to a CSS display value applied at that viewport width:\n * - `xs`: < 640 px (default / mobile-first)\n * - `sm`: ≥ 640 px\n * - `md`: ≥ 768 px\n * - `lg`: ≥ 1024 px\n * - `xl`: ≥ 1280 px\n * - `xxl`: ≥ 1536 px\n */\nexport type DisplayGridT = {\n  xs?: string;\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n  xxl?: string;\n};\n\nexport type BoxProps<S = object> = {\n  /** Child card refs rendered inside the box */\n  content?: PiCardRef[];\n\n  /** Single child to make dynmic selection (s) => ... possible */\n  singleContent?: PiCardRef;\n\n  /** Override the root element type */\n  component?: React.ElementType;\n\n  /** Fixed height in pixels */\n  height?: number;\n  /** Fixed width in pixels */\n  width?: number;\n\n  marginTop?: number;\n  marginBottom?: number;\n  marginLeft?: number;\n  marginRight?: number;\n\n  paddingTop?: number;\n  paddingBottom?: number;\n  paddingLeft?: number;\n  paddingRight?: number;\n\n  /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n  style?: S;\n  /** Additional Tailwind utility classes */\n  className?: string;\n};\n\n/**\n * Factory function for declaring a `shad/box` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Box} from \"@/cards/box\";\n *\n * registerCard(\"myApp/spacer\", Box({height: 24}));\n *\n * registerCard(\"myApp/contentRegion\", Box({\n *   content:    [\"myApp/card1\", \"myApp/card2\"],\n *   paddingTop: 16,\n *   className:  \"rounded-lg border bg-card\",\n * }));\n * ```\n */\nexport const Box = createCardDeclaration<BoxProps>(BOX_CARD);\n"],"mappings":";;AAEA,IAAa,IAAW,YAqEX,IAAM,EAAgC,CAAQ"}

package/cards/iconCard/iconCard.component.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { IconCardProps } from './iconCard.types';
+/**
+ * `shad/icon` card component.
+ *
+ * Renders a named icon (resolved via the pihanga icon registry) inside a
+ * plain `<div>`.  The wrapping div accepts an optional `className` for
+ * Tailwind utilities and an optional `style` for inline CSS overrides.
+ */
+export declare const IconCardComponent: (props: PiCardProps<IconCardProps>) => React.ReactNode;

package/cards/iconCard/iconCard.component.js

@@ -0,0 +1,19 @@
+import { getIcon as e } from "../icons.js";
+import { cn as t } from "../../lib/utils.js";
+import "react";
+import "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/iconCard/iconCard.component.tsx
+var r = (r) => {
+	let { iconName: i, iconProps: a, className: o, style: s, cardName: c } = r;
+	return /* @__PURE__ */ n("div", {
+		className: t(o),
+		style: s,
+		"data-pihanga": c,
+		children: e(i, a)
+	});
+};
+//#endregion
+export { r as IconCardComponent };
+
+//# sourceMappingURL=iconCard.component.js.map

package/cards/iconCard/iconCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconCard.component.js","names":[],"sources":["../../../src/cards/iconCard/iconCard.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {getIcon} from \"@/cards/icons\";\nimport type {IconCardProps} from \"./iconCard.types\";\n\n/**\n * `shad/icon` card component.\n *\n * Renders a named icon (resolved via the pihanga icon registry) inside a\n * plain `<div>`.  The wrapping div accepts an optional `className` for\n * Tailwind utilities and an optional `style` for inline CSS overrides.\n */\nexport const IconCardComponent = (\n  props: PiCardProps<IconCardProps>,\n): React.ReactNode => {\n  const {iconName, iconProps, className, style, cardName} = props;\n\n  return (\n    <div className={cn(className)} style={style} data-pihanga={cardName}>\n      {getIcon(iconName, iconProps)}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAaA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,aAAU,cAAW,cAAW,UAAO,gBAAY;CAE1D,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,CAAS;EAAU;EAAO,gBAAc;YACxD,EAAQ,GAAU,CAAS;CACzB,CAAA;AAET"}

package/cards/iconCard/iconCard.types.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export declare const ICON_CARD = "shad/icon";
+export type IconCardProps = {
+    /** Name of the icon as registered via `registerIcon` */
+    iconName: string;
+    /** Props forwarded to the icon element (e.g. size, strokeWidth) */
+    iconProps?: Record<string, any>;
+    /** Additional Tailwind classes applied to the wrapping `<div>` */
+    className?: string;
+    /** Inline styles applied to the wrapping `<div>` */
+    style?: React.CSSProperties;
+};
+/**
+ * Factory function for declaring a `shad/icon` card instance.
+ *
+ * ```ts
+ * import {registerCard} from "@pihanga2/core";
+ * import {ShadIcon} from "@/cards/iconCard";
+ *
+ * registerCard("myApp/saveIcon", ShadIcon({iconName: "save", className: "text-primary"}));
+ * ```
+ */
+export declare const ShadIcon: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<IconCardProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/iconCard/iconCard.types.js

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

package/cards/iconCard/iconCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconCard.types.js","names":[],"sources":["../../../src/cards/iconCard/iconCard.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const ICON_CARD = \"shad/icon\";\n\nexport type IconCardProps = {\n  /** Name of the icon as registered via `registerIcon` */\n  iconName: string;\n\n  /** Props forwarded to the icon element (e.g. size, strokeWidth) */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  iconProps?: Record<string, any>;\n\n  /** Additional Tailwind classes applied to the wrapping `<div>` */\n  className?: string;\n\n  /** Inline styles applied to the wrapping `<div>` */\n  style?: React.CSSProperties;\n};\n\n/**\n * Factory function for declaring a `shad/icon` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {ShadIcon} from \"@/cards/iconCard\";\n *\n * registerCard(\"myApp/saveIcon\", ShadIcon({iconName: \"save\", className: \"text-primary\"}));\n * ```\n */\nexport const ShadIcon = createCardDeclaration<IconCardProps>(ICON_CARD);\n"],"mappings":";;AAGA,IAAa,IAAY,aA2BZ,IAAW,EAAqC,CAAS"}

package/cards/iconCard/index.d.ts

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

package/cards/iconCard/index.js

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

package/cards/iconCard/index.js.map

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

package/cards/sheetCard/index.d.ts

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

package/cards/sheetCard/index.js

@@ -0,0 +1,13 @@
+import { SheetCardComponent as e } from "./sheetCard.component.js";
+import { PI_SHEET_ACTION as t, PI_SHEET_CARD as n, Sheet as r, onSheetClosed as i, onSheetOpenChanged as a, onSheetOpened as o } from "./sheetCard.types.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/sheetCard/index.ts
+c({
+	name: n,
+	component: e,
+	events: s(t)
+});
+//#endregion
+export { t as PI_SHEET_ACTION, n as PI_SHEET_CARD, r as Sheet, i as onSheetClosed, a as onSheetOpenChanged, o as onSheetOpened };
+
+//# sourceMappingURL=index.js.map

package/cards/sheetCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/sheetCard/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\nimport {SheetCardComponent} from \"./sheetCard.component\";\nimport {PI_SHEET_ACTION, PI_SHEET_CARD} from \"./sheetCard.types\";\n\nexport * from \"./sheetCard.types\";\n\nregisterCardComponent({\n  name: PI_SHEET_CARD,\n  component: SheetCardComponent,\n  events: actionTypesToEvents(PI_SHEET_ACTION),\n});\n"],"mappings":";;;;AAMA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAe;AAC7C,CAAC"}

package/cards/sheetCard/sheetCard.component.d.ts

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

package/cards/sheetCard/sheetCard.component.js

@@ -0,0 +1,88 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../../components/ui/button.js";
+import { Sheet as n, SheetClose as r, SheetContent as i, SheetDescription as a, SheetFooter as o, SheetHeader as s, SheetTitle as c, SheetTrigger as l } from "../../components/ui/sheet.js";
+import u from "react";
+import { Card as d } from "@pihanga2/core";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/cards/sheetCard/sheetCard.component.tsx
+var m = (m) => {
+	let { id: h, trigger: g, content: _, title: v, description: y, open: b, side: x = "right", footer: S, footerCloseButtonText: C, className: w, headerClassName: T, contentClassName: E, footerClassName: D, cardName: O, onOpened: k, onClosed: A, onOpenChanged: j } = m, M = C === void 0 ? "Close" : C, [N, P] = u.useState(!1), F = b ?? N, I = u.useRef(b);
+	u.useEffect(() => {
+		I.current === !0 && b === !1 && F === !1 && A({
+			id: h,
+			reason: "programmatic"
+		}), I.current = b;
+	}, [
+		b,
+		F,
+		h,
+		A
+	]);
+	let L = (e) => {
+		b === void 0 && P(e), j({
+			open: e,
+			id: h
+		}), e ? k({ id: h }) : b === void 0 && A({
+			id: h,
+			reason: "user"
+		});
+	};
+	function R() {
+		return !v && !y ? null : /* @__PURE__ */ p(s, {
+			className: T,
+			children: [v && /* @__PURE__ */ f(c, { children: v }), y && /* @__PURE__ */ f(a, { children: y })]
+		});
+	}
+	function z() {
+		return S ? /* @__PURE__ */ f(o, {
+			className: D,
+			children: /* @__PURE__ */ f(d, {
+				cardName: S,
+				parentCard: O
+			})
+		}) : M === null ? null : /* @__PURE__ */ f(o, {
+			className: D,
+			children: /* @__PURE__ */ f(r, {
+				asChild: !0,
+				children: /* @__PURE__ */ f(t, {
+					variant: "outline",
+					children: M
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ p(n, {
+		open: F,
+		onOpenChange: L,
+		children: [g && /* @__PURE__ */ f(l, {
+			asChild: !0,
+			children: /* @__PURE__ */ f("span", {
+				className: "inline-flex",
+				"data-pihanga-trigger-wrapper": !0,
+				children: /* @__PURE__ */ f(d, {
+					cardName: g,
+					parentCard: O
+				})
+			})
+		}), /* @__PURE__ */ p(i, {
+			"data-pihanga": O,
+			side: x,
+			className: w,
+			children: [
+				R(),
+				/* @__PURE__ */ f("div", {
+					className: e("flex-1 overflow-y-auto p-4", E),
+					children: /* @__PURE__ */ f(d, {
+						cardName: _,
+						parentCard: O
+					})
+				}),
+				z()
+			]
+		})]
+	});
+};
+//#endregion
+export { m as SheetCardComponent };
+
+//# sourceMappingURL=sheetCard.component.js.map

package/cards/sheetCard/sheetCard.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheetCard.component.js","names":[],"sources":["../../../src/cards/sheetCard/sheetCard.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {\n  Sheet as SheetRoot,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetFooter,\n  SheetClose,\n} from \"@/registry/ui/sheet\";\nimport {Button} from \"@/registry/ui/button\";\n\nimport type {PiSheetEvents, PiSheetProps} from \"./sheetCard.types\";\n\nexport const SheetCardComponent = (\n  props: PiCardProps<PiSheetProps, PiSheetEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    trigger,\n    content,\n    title,\n    description,\n    open: controlledOpen,\n    side = \"right\",\n    footer,\n    footerCloseButtonText,\n    className,\n    headerClassName,\n    contentClassName,\n    footerClassName,\n    cardName,\n    onOpened,\n    onClosed,\n    onOpenChanged,\n  } = props;\n\n  const effectiveCloseText =\n    footerCloseButtonText === undefined ? \"Close\" : footerCloseButtonText;\n\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const open = controlledOpen ?? internalOpen;\n  const prevControlledOpenRef = React.useRef(controlledOpen);\n\n  // Detect programmatic close (controlled open: true → false)\n  React.useEffect(() => {\n    if (\n      prevControlledOpenRef.current === true &&\n      controlledOpen === false &&\n      open === false\n    ) {\n      onClosed({id, reason: \"programmatic\"});\n    }\n    prevControlledOpenRef.current = controlledOpen;\n  }, [controlledOpen, open, id, onClosed]);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (controlledOpen === undefined) {\n      setInternalOpen(nextOpen);\n    }\n    onOpenChanged({open: nextOpen, id});\n    if (nextOpen) {\n      onOpened({id});\n    } else if (controlledOpen === undefined) {\n      onClosed({id, reason: \"user\"});\n    }\n  };\n\n  function renderHeader() {\n    if (!title && !description) return null;\n    return (\n      <SheetHeader className={headerClassName}>\n        {title && <SheetTitle>{title}</SheetTitle>}\n        {description && <SheetDescription>{description}</SheetDescription>}\n      </SheetHeader>\n    );\n  }\n\n  function renderFooter() {\n    if (footer) {\n      return (\n        <SheetFooter className={footerClassName}>\n          <Card cardName={footer} parentCard={cardName} />\n        </SheetFooter>\n      );\n    }\n    if (effectiveCloseText !== null) {\n      return (\n        <SheetFooter className={footerClassName}>\n          <SheetClose asChild>\n            <Button variant=\"outline\">{effectiveCloseText}</Button>\n          </SheetClose>\n        </SheetFooter>\n      );\n    }\n    return null;\n  }\n\n  return (\n    <SheetRoot open={open} onOpenChange={handleOpenChange}>\n      {trigger && (\n        <SheetTrigger asChild>\n          <span className=\"inline-flex\" data-pihanga-trigger-wrapper>\n            <Card cardName={trigger} parentCard={cardName} />\n          </span>\n        </SheetTrigger>\n      )}\n      <SheetContent\n        data-pihanga={cardName}\n        side={side}\n        className={className}\n      >\n        {renderHeader()}\n        <div className={cn(\"flex-1 overflow-y-auto p-4\", contentClassName)}>\n          <Card cardName={content} parentCard={cardName} />\n        </div>\n        {renderFooter()}\n      </SheetContent>\n    </SheetRoot>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,YACA,YACA,UACA,gBACA,MAAM,GACN,UAAO,SACP,WACA,0BACA,cACA,oBACA,qBACA,oBACA,aACA,aACA,aACA,qBACE,GAEE,IACJ,MAA0B,KAAA,IAAY,UAAU,GAE5C,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAK,GACtD,IAAO,KAAkB,GACzB,IAAwB,EAAM,OAAO,CAAc;CAGzD,EAAM,gBAAgB;EAQpB,AANE,EAAsB,YAAY,MAClC,MAAmB,MACnB,MAAS,MAET,EAAS;GAAC;GAAI,QAAQ;EAAc,CAAC,GAEvC,EAAsB,UAAU;CAClC,GAAG;EAAC;EAAgB;EAAM;EAAI;CAAQ,CAAC;CAEvC,IAAM,KAAoB,MAAsB;EAK9C,AAJI,MAAmB,KAAA,KACrB,EAAgB,CAAQ,GAE1B,EAAc;GAAC,MAAM;GAAU;EAAE,CAAC,GAC9B,IACF,EAAS,EAAC,MAAE,CAAC,IACJ,MAAmB,KAAA,KAC5B,EAAS;GAAC;GAAI,QAAQ;EAAM,CAAC;CAEjC;CAEA,SAAS,IAAe;EAEtB,OADI,CAAC,KAAS,CAAC,IAAoB,OAEjC,kBAAC,GAAD;GAAa,WAAW;aAAxB,CACG,KAAS,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA,GACxC,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA,CACtD;;CAEjB;CAEA,SAAS,IAAe;EAiBtB,OAhBI,IAEA,kBAAC,GAAD;GAAa,WAAW;aACtB,kBAAC,GAAD;IAAM,UAAU;IAAQ,YAAY;GAAW,CAAA;EACpC,CAAA,IAGb,MAAuB,OASpB,OAPH,kBAAC,GAAD;GAAa,WAAW;aACtB,kBAAC,GAAD;IAAY,SAAA;cACV,kBAAC,GAAD;KAAQ,SAAQ;eAAW;IAA2B,CAAA;GAC5C,CAAA;EACD,CAAA;CAInB;CAEA,OACE,kBAAC,GAAD;EAAiB;EAAM,cAAc;YAArC,CACG,KACC,kBAAC,GAAD;GAAc,SAAA;aACZ,kBAAC,QAAD;IAAM,WAAU;IAAc,gCAAA;cAC5B,kBAAC,GAAD;KAAM,UAAU;KAAS,YAAY;IAAW,CAAA;GAC5C,CAAA;EACM,CAAA,GAEhB,kBAAC,GAAD;GACE,gBAAc;GACR;GACK;aAHb;IAKG,EAAa;IACd,kBAAC,OAAD;KAAK,WAAW,EAAG,8BAA8B,CAAgB;eAC/D,kBAAC,GAAD;MAAM,UAAU;MAAS,YAAY;KAAW,CAAA;IAC7C,CAAA;IACJ,EAAa;GACF;IACL;;AAEf"}

package/cards/sheetCard/sheetCard.types.d.ts

@@ -0,0 +1,99 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_SHEET_CARD = "pi/sheet";
+export declare const Sheet: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiSheetProps, S, PiSheetEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_SHEET_ACTION: {
+    CLOSED: string;
+    OPENED: string;
+    OPEN_CHANGED: string;
+};
+export declare const onSheetOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & SheetOpenedEvent>) => void;
+export declare const onSheetClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & SheetClosedEvent>) => void;
+export declare const onSheetOpenChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & SheetOpenChangedEvent>) => void;
+export type PiSheetProps = {
+    /**
+     * Optional id passed through to events for identification.
+     */
+    id?: string;
+    /**
+     * Optional trigger card (e.g. a Button).
+     *
+     * When provided, clicking it opens the sheet.
+     * When omitted, control the sheet via the `open` prop.
+     */
+    trigger?: PiCardRef;
+    /**
+     * Card to render as the sheet body content.
+     */
+    content: PiCardRef;
+    /**
+     * Optional sheet title (rendered in header).
+     */
+    title?: string;
+    /**
+     * Optional sheet description (rendered below title).
+     */
+    description?: string;
+    /**
+     * Controlled open state.
+     * When provided, visibility is fully managed externally.
+     */
+    open?: boolean;
+    /**
+     * Which edge the sheet slides in from.
+     * @default "right"
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * Optional footer card.
+     * When provided, takes precedence over the default close button.
+     */
+    footer?: PiCardRef;
+    /**
+     * Text for the default close button in the footer.
+     * Set to `null` to hide the default close button.
+     * @default "Close"
+     */
+    footerCloseButtonText?: string | null;
+    /**
+     * Additional CSS classes for the sheet content panel.
+     */
+    className?: string;
+    /**
+     * Additional CSS classes for the sheet header.
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS classes for the sheet body (wraps `content`).
+     */
+    contentClassName?: string;
+    /**
+     * Additional CSS classes for the sheet footer.
+     */
+    footerClassName?: string;
+};
+export type SheetOpenedEvent = {
+    id?: string;
+};
+export type SheetClosedEvent = {
+    id?: string;
+    /**
+     * - 'user': dismissed by user (outside click, ESC, X button)
+     * - 'programmatic': closed via props.open change
+     */
+    reason?: "user" | "programmatic";
+};
+export type SheetOpenChangedEvent = {
+    open: boolean;
+    id?: string;
+};
+export type PiSheetEvents = {
+    onOpened: SheetOpenedEvent;
+    onClosed: SheetClosedEvent;
+    onOpenChanged: SheetOpenChangedEvent;
+};

package/cards/sheetCard/sheetCard.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/sheetCard/sheetCard.types.ts
+var r = "pi/sheet", i = e(r), a = n(r, [
+	"opened",
+	"closed",
+	"open_changed"
+]), o = t(a.OPENED), s = t(a.CLOSED), c = t(a.OPEN_CHANGED);
+//#endregion
+export { a as PI_SHEET_ACTION, r as PI_SHEET_CARD, i as Sheet, s as onSheetClosed, c as onSheetOpenChanged, o as onSheetOpened };
+
+//# sourceMappingURL=sheetCard.types.js.map

package/cards/sheetCard/sheetCard.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheetCard.types.js","names":[],"sources":["../../../src/cards/sheetCard/sheetCard.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_SHEET_CARD = \"pi/sheet\";\n\nexport const Sheet = createCardDeclaration<PiSheetProps, PiSheetEvents>(\n  PI_SHEET_CARD,\n);\n\nexport const PI_SHEET_ACTION = registerActions(PI_SHEET_CARD, [\n  \"opened\",\n  \"closed\",\n  \"open_changed\",\n]);\n\nexport const onSheetOpened = createOnAction<SheetOpenedEvent>(\n  PI_SHEET_ACTION.OPENED,\n);\n\nexport const onSheetClosed = createOnAction<SheetClosedEvent>(\n  PI_SHEET_ACTION.CLOSED,\n);\n\nexport const onSheetOpenChanged = createOnAction<SheetOpenChangedEvent>(\n  PI_SHEET_ACTION.OPEN_CHANGED,\n);\n\nexport type PiSheetProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Optional trigger card (e.g. a Button).\n   *\n   * When provided, clicking it opens the sheet.\n   * When omitted, control the sheet via the `open` prop.\n   */\n  trigger?: PiCardRef;\n\n  /**\n   * Card to render as the sheet body content.\n   */\n  content: PiCardRef;\n\n  /**\n   * Optional sheet title (rendered in header).\n   */\n  title?: string;\n\n  /**\n   * Optional sheet description (rendered below title).\n   */\n  description?: string;\n\n  /**\n   * Controlled open state.\n   * When provided, visibility is fully managed externally.\n   */\n  open?: boolean;\n\n  /**\n   * Which edge the sheet slides in from.\n   * @default \"right\"\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /**\n   * Optional footer card.\n   * When provided, takes precedence over the default close button.\n   */\n  footer?: PiCardRef;\n\n  /**\n   * Text for the default close button in the footer.\n   * Set to `null` to hide the default close button.\n   * @default \"Close\"\n   */\n  footerCloseButtonText?: string | null;\n\n  /**\n   * Additional CSS classes for the sheet content panel.\n   */\n  className?: string;\n\n  /**\n   * Additional CSS classes for the sheet header.\n   */\n  headerClassName?: string;\n\n  /**\n   * Additional CSS classes for the sheet body (wraps `content`).\n   */\n  contentClassName?: string;\n\n  /**\n   * Additional CSS classes for the sheet footer.\n   */\n  footerClassName?: string;\n};\n\nexport type SheetOpenedEvent = {\n  id?: string;\n};\n\nexport type SheetClosedEvent = {\n  id?: string;\n  /**\n   * - 'user': dismissed by user (outside click, ESC, X button)\n   * - 'programmatic': closed via props.open change\n   */\n  reason?: \"user\" | \"programmatic\";\n};\n\nexport type SheetOpenChangedEvent = {\n  open: boolean;\n  id?: string;\n};\n\nexport type PiSheetEvents = {\n  onOpened: SheetOpenedEvent;\n  onClosed: SheetClosedEvent;\n  onOpenChanged: SheetOpenChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAgB,YAEhB,IAAQ,EACnB,CACF,GAEa,IAAkB,EAAgB,GAAe;CAC5D;CACA;CACA;AACF,CAAC,GAEY,IAAgB,EAC3B,EAAgB,MAClB,GAEa,IAAgB,EAC3B,EAAgB,MAClB,GAEa,IAAqB,EAChC,EAAgB,YAClB"}

package/cards/sheetCard.d.ts

@@ -0,0 +1 @@
+export * from './sheetCard/index';

package/components/ui/sheet.js

@@ -17,22 +17,28 @@ function o({ ...e }) {
 	});
 }
 function s({ ...e }) {
+	return /* @__PURE__ */ t(i.Close, {
+		"data-slot": "sheet-close",
+		...e
+	});
+}
+function c({ ...e }) {
 	return /* @__PURE__ */ t(i.Portal, {
 		"data-slot": "sheet-portal",
 		...e
 	});
 }
-function c({ className: n, ...r }) {
+function l({ className: n, ...r }) {
 	return /* @__PURE__ */ t(i.Overlay, {
 		"data-slot": "sheet-overlay",
 		className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", n),
 		...r
 	});
 }
-function l({ className: a, children: o, side: l = "right", ...u }) {
-	return /* @__PURE__ */ n(s, { children: [/* @__PURE__ */ t(c, {}), /* @__PURE__ */ n(i.Content, {
+function u({ className: a, children: o, side: s = "right", ...u }) {
+	return /* @__PURE__ */ n(c, { children: [/* @__PURE__ */ t(l, {}), /* @__PURE__ */ n(i.Content, {
 		"data-slot": "sheet-content",
-		className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", l === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", l === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", l === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", l === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", a),
+		className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", s === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", s === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", s === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", s === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", a),
 		...u,
 		children: [o, /* @__PURE__ */ n(i.Close, {
 			className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
@@ -43,7 +49,35 @@ function l({ className: a, children: o, side: l = "right", ...u }) {
 		})]
 	})] });
 }
+function d({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "sheet-header",
+		className: e("flex flex-col gap-1.5 p-4", n),
+		...r
+	});
+}
+function f({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "sheet-footer",
+		className: e("mt-auto flex flex-col gap-2 p-4", n),
+		...r
+	});
+}
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Title, {
+		"data-slot": "sheet-title",
+		className: e("text-foreground font-semibold", n),
+		...r
+	});
+}
+function m({ className: n, ...r }) {
+	return /* @__PURE__ */ t(i.Description, {
+		"data-slot": "sheet-description",
+		className: e("text-muted-foreground text-sm", n),
+		...r
+	});
+}
 //#endregion
-export { a as Sheet, l as SheetContent, o as SheetTrigger };
+export { a as Sheet, s as SheetClose, u as SheetContent, m as SheetDescription, f as SheetFooter, d as SheetHeader, p as SheetTitle, o as SheetTrigger };
 
 //# sourceMappingURL=sheet.js.map

package/components/ui/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":[],"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/components/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"],"mappings":";;;;;;AAMA,SAAS,EAAM,EAAE,GAAG,KAA2D;CAC7E,OAAO,kBAAC,EAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,EAAa,EACpB,GAAG,KACmD;CACtD,OAAO,kBAAC,EAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAQA,SAAS,EAAY,EACnB,GAAG,KACkD;CACrD,OAAO,kBAAC,EAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,EAAa,EACpB,cACA,GAAG,KACmD;CACtD,OACE,kBAAC,EAAe,SAAhB;EACE,aAAU;EACV,WAAW,EACT,0JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EACpB,cACA,aACA,UAAO,SACP,GAAG,KAGF;CACD,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAe,CAAA,GACf,kBAAC,EAAe,SAAhB;EACE,aAAU;EACV,WAAW,EACT,8MACA,MAAS,WACP,oIACF,MAAS,UACP,iIACF,MAAS,SACP,4GACF,MAAS,YACP,qHACF,CACF;EACA,GAAI;YAdN,CAgBG,GACD,kBAAC,EAAe,OAAhB;GAAsB,WAAU;aAAhC,CACE,kBAAC,GAAD,EAAO,WAAU,SAAU,CAAA,GAC3B,kBAAC,QAAD;IAAM,WAAU;cAAU;GAAW,CAAA,CACjB;IACA;GACb,EAAA,CAAA;AAEjB"}
+{"version":3,"file":"sheet.js","names":[],"sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/components/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n          <XIcon className=\"size-4\" />\n          <span className=\"sr-only\">Close</span>\n        </SheetPrimitive.Close>\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"],"mappings":";;;;;;AAMA,SAAS,EAAM,EAAE,GAAG,KAA2D;CAC7E,OAAO,kBAAC,EAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,SAAS,EAAa,EACpB,GAAG,KACmD;CACtD,OAAO,kBAAC,EAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,EAAW,EAClB,GAAG,KACiD;CACpD,OAAO,kBAAC,EAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,SAAS,EAAY,EACnB,GAAG,KACkD;CACrD,OAAO,kBAAC,EAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,EAAa,EACpB,cACA,GAAG,KACmD;CACtD,OACE,kBAAC,EAAe,SAAhB;EACE,aAAU;EACV,WAAW,EACT,0JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EACpB,cACA,aACA,UAAO,SACP,GAAG,KAGF;CACD,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAe,CAAA,GACf,kBAAC,EAAe,SAAhB;EACE,aAAU;EACV,WAAW,EACT,8MACA,MAAS,WACP,oIACF,MAAS,UACP,iIACF,MAAS,SACP,4GACF,MAAS,YACP,qHACF,CACF;EACA,GAAI;YAdN,CAgBG,GACD,kBAAC,EAAe,OAAhB;GAAsB,WAAU;aAAhC,CACE,kBAAC,GAAD,EAAO,WAAU,SAAU,CAAA,GAC3B,kBAAC,QAAD;IAAM,WAAU;cAAU;GAAW,CAAA,CACjB;IACA;GACb,EAAA,CAAA;AAEjB;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,6BAA6B,CAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,mCAAmC,CAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAClB,cACA,GAAG,KACiD;CACpD,OACE,kBAAC,EAAe,OAAhB;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAiB,EACxB,cACA,GAAG,KACuD;CAC1D,OACE,kBAAC,EAAe,aAAhB;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -68,6 +68,10 @@
       "import": "./cards/framework/index.js",
       "types": "./cards/framework/index.d.ts"
     },
+    "./cards/iconCard": {
+      "import": "./cards/iconCard/index.js",
+      "types": "./cards/iconCard/index.d.ts"
+    },
     "./cards/infoCard": {
       "import": "./cards/infoCard/index.js",
       "types": "./cards/infoCard/index.d.ts"
@@ -128,6 +132,10 @@
       "import": "./cards/select/index.js",
       "types": "./cards/select/index.d.ts"
     },
+    "./cards/sheetCard": {
+      "import": "./cards/sheetCard/index.js",
+      "types": "./cards/sheetCard/index.d.ts"
+    },
     "./cards/slider": {
       "import": "./cards/slider/index.js",
       "types": "./cards/slider/index.d.ts"
@@ -206,6 +214,7 @@
     "./cards/flexGrid/index.js",
     "./cards/form/index.js",
     "./cards/framework/index.js",
+    "./cards/iconCard/index.js",
     "./cards/infoCard/index.js",
     "./cards/input/index.js",
     "./cards/jsonViewer/index.js",
@@ -221,6 +230,7 @@
     "./cards/resizable/index.js",
     "./cards/scrollbarWithAnnotations/index.js",
     "./cards/select/index.js",
+    "./cards/sheetCard/index.js",
     "./cards/slider/index.js",
     "./cards/sliderValue/index.js",
     "./cards/stack/index.js",

package/theme.css

@@ -99,4 +99,4 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-}
+}