@pihanga2/shadcn 0.2.12 → 0.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cards/box/box.component.js +8 -7
- package/cards/box/box.component.js.map +1 -1
- package/cards/box/box.types.d.ts +2 -0
- package/cards/box/box.types.js.map +1 -1
- package/cards/graphin/graphin.types.d.ts +15 -0
- package/cards/stack/stack.component.js +22 -20
- package/cards/stack/stack.component.js.map +1 -1
- package/cards/stack/stack.types.d.ts +2 -0
- package/cards/stack/stack.types.js.map +1 -1
- package/cards/textField/textField.component.js +2 -1
- package/cards/textField/textField.component.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,20 +3,21 @@ import { Card as e } from "@pihanga2/core";
|
|
|
3
3
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
4
4
|
//#region src/cards/box/box.component.tsx
|
|
5
5
|
var r = (r) => {
|
|
6
|
-
let { content: i, singleContent: a, className: o, style: s, cardName: c } = r,
|
|
7
|
-
r.height && (
|
|
8
|
-
let
|
|
9
|
-
function
|
|
10
|
-
return
|
|
6
|
+
let { content: i, singleContent: a, className: o, style: s, cardName: c, data: l } = r, u = { ...s };
|
|
7
|
+
r.height && (u.height = `${r.height}px`), r.width && (u.width = `${r.width}px`), r.marginTop && (u.marginTop = `${r.marginTop}px`), r.marginBottom && (u.marginBottom = `${r.marginBottom}px`), r.marginLeft && (u.marginLeft = `${r.marginLeft}px`), r.marginRight && (u.marginRight = `${r.marginRight}px`), r.paddingTop && (u.paddingTop = `${r.paddingTop}px`), r.paddingBottom && (u.paddingBottom = `${r.paddingBottom}px`), r.paddingLeft && (u.paddingLeft = `${r.paddingLeft}px`), r.paddingRight && (u.paddingRight = `${r.paddingRight}px`);
|
|
8
|
+
let d = a ? [a] : i;
|
|
9
|
+
function f() {
|
|
10
|
+
return d ? d.map((n, r) => /* @__PURE__ */ t(e, {
|
|
11
11
|
cardName: n,
|
|
12
12
|
parentCard: c
|
|
13
13
|
}, r)) : null;
|
|
14
14
|
}
|
|
15
15
|
return /* @__PURE__ */ n("div", {
|
|
16
16
|
className: o,
|
|
17
|
-
style:
|
|
17
|
+
style: u,
|
|
18
18
|
"data-pihanga": c,
|
|
19
|
-
|
|
19
|
+
...l ? Object.fromEntries(Object.entries(l).map(([e, t]) => [`data-${e}`, t])) : {},
|
|
20
|
+
children: [f(), r.children]
|
|
20
21
|
});
|
|
21
22
|
};
|
|
22
23
|
//#endregion
|
|
@@ -1 +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, 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
|
|
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, singleContent, className, style, cardName, data} = 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 const dataAttrs = data\n ? Object.fromEntries(Object.entries(data).map(([k, v]) => [`data-${k}`, v]))\n : {};\n\n return (\n <div\n className={className}\n style={sy}\n data-pihanga={cardName}\n {...dataAttrs}\n >\n {renderContent()}\n {props.children}\n </div>\n );\n};\n"],"mappings":";;;;AAKA,IAAa,KAAgB,MAAkD;CAC7E,IAAM,EAAC,YAAS,kBAAe,cAAW,UAAO,aAAU,YAAQ,GAE7D,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;CAMA,OACE,kBAAC,OAAD;EACa;EACX,OAAO;EACP,gBAAc;EACd,GATc,IACd,OAAO,YAAY,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,IACzE,CAAC;YAGH,CAMG,EAAc,GACd,EAAM,QACJ;;AAET"}
|
package/cards/box/box.types.d.ts
CHANGED
|
@@ -42,6 +42,8 @@ export type BoxProps<S = object> = {
|
|
|
42
42
|
style?: S;
|
|
43
43
|
/** Additional Tailwind utility classes */
|
|
44
44
|
className?: string;
|
|
45
|
+
/** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */
|
|
46
|
+
data?: Record<string, string>;
|
|
45
47
|
};
|
|
46
48
|
/**
|
|
47
49
|
* Factory function for declaring a `shad/box` card instance.
|
|
@@ -1 +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 /** 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,
|
|
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 /** 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 /** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */\n data?: Record<string, 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,YAwEX,IAAM,EAAgC,CAAQ"}
|
|
@@ -162,6 +162,15 @@ export type GraphinProps = {
|
|
|
162
162
|
* @example 2 // 200 % — start zoomed in on a small graph
|
|
163
163
|
*/
|
|
164
164
|
zoomLevel?: number;
|
|
165
|
+
/**
|
|
166
|
+
* When `false` node labels are hidden globally.
|
|
167
|
+
*
|
|
168
|
+
* You can also hide/show labels on a per-style basis by setting
|
|
169
|
+
* `showLabel: false` on individual entries in `nodeStyles`.
|
|
170
|
+
*
|
|
171
|
+
* @default true
|
|
172
|
+
*/
|
|
173
|
+
showLabels?: boolean;
|
|
165
174
|
/**
|
|
166
175
|
* When `true` every edge is rendered with an arrowhead at its **target**
|
|
167
176
|
* end, making the graph visually directed.
|
|
@@ -386,6 +395,12 @@ export type GraphinNodeStyleDef = {
|
|
|
386
395
|
labelFill?: string;
|
|
387
396
|
/** Label font size in pixels. */
|
|
388
397
|
labelFontSize?: number;
|
|
398
|
+
/**
|
|
399
|
+
* When `false`, hides the label for nodes using this style.
|
|
400
|
+
* Overrides the card-level `showLabels` prop for these nodes.
|
|
401
|
+
* @default true
|
|
402
|
+
*/
|
|
403
|
+
showLabel?: boolean;
|
|
389
404
|
};
|
|
390
405
|
/**
|
|
391
406
|
* Map from **style name** → visual spec.
|
|
@@ -4,65 +4,65 @@ import n from "clsx";
|
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
5
|
//#region src/cards/stack/stack.component.tsx
|
|
6
6
|
var a = (a) => {
|
|
7
|
-
let { content: o, direction: s, divider: c, spacing: l, justifyContent: u, alignItems: d, className: f, style: p, cardName: m } = a,
|
|
7
|
+
let { content: o, direction: s, divider: c, spacing: l, justifyContent: u, alignItems: d, className: f, style: p, cardName: m, data: h } = a, g = [
|
|
8
8
|
f,
|
|
9
9
|
(p ?? {}).root,
|
|
10
10
|
"flex"
|
|
11
11
|
];
|
|
12
12
|
if (s) switch (s) {
|
|
13
13
|
case "row":
|
|
14
|
-
|
|
14
|
+
g.push("flex-row");
|
|
15
15
|
break;
|
|
16
16
|
case "row-reverse":
|
|
17
|
-
|
|
17
|
+
g.push("flex-row-reverse");
|
|
18
18
|
break;
|
|
19
19
|
case "column":
|
|
20
|
-
|
|
20
|
+
g.push("flex-col");
|
|
21
21
|
break;
|
|
22
22
|
case "column-reverse":
|
|
23
|
-
|
|
23
|
+
g.push("flex-col-reverse");
|
|
24
24
|
break;
|
|
25
25
|
}
|
|
26
26
|
if (u) switch (u) {
|
|
27
27
|
case "flex-start":
|
|
28
|
-
|
|
28
|
+
g.push("justify-start");
|
|
29
29
|
break;
|
|
30
30
|
case "center":
|
|
31
|
-
|
|
31
|
+
g.push("justify-center");
|
|
32
32
|
break;
|
|
33
33
|
case "flex-end":
|
|
34
|
-
|
|
34
|
+
g.push("justify-end");
|
|
35
35
|
break;
|
|
36
36
|
case "space-between":
|
|
37
|
-
|
|
37
|
+
g.push("justify-between");
|
|
38
38
|
break;
|
|
39
39
|
case "space-around":
|
|
40
|
-
|
|
40
|
+
g.push("justify-around");
|
|
41
41
|
break;
|
|
42
42
|
case "space-evenly":
|
|
43
|
-
|
|
43
|
+
g.push("justify-evenly");
|
|
44
44
|
break;
|
|
45
45
|
}
|
|
46
46
|
if (d) switch (d) {
|
|
47
47
|
case "flex-start":
|
|
48
|
-
|
|
48
|
+
g.push("items-start");
|
|
49
49
|
break;
|
|
50
50
|
case "center":
|
|
51
|
-
|
|
51
|
+
g.push("items-center");
|
|
52
52
|
break;
|
|
53
53
|
case "stretch":
|
|
54
|
-
|
|
54
|
+
g.push("items-stretch");
|
|
55
55
|
break;
|
|
56
56
|
case "flex-end":
|
|
57
|
-
|
|
57
|
+
g.push("items-end");
|
|
58
58
|
break;
|
|
59
59
|
case "baseline":
|
|
60
|
-
|
|
60
|
+
g.push("items-baseline");
|
|
61
61
|
break;
|
|
62
62
|
default: console.warn("stack: unsupported 'alignItems' property", d);
|
|
63
63
|
}
|
|
64
|
-
l && l > 0 &&
|
|
65
|
-
function
|
|
64
|
+
l && l > 0 && g.push(`gap-${l}`);
|
|
65
|
+
function _() {
|
|
66
66
|
return o ? o.map((n, a) => /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(t, {
|
|
67
67
|
cardName: n,
|
|
68
68
|
parentCard: m
|
|
@@ -71,10 +71,12 @@ var a = (a) => {
|
|
|
71
71
|
parentCard: m
|
|
72
72
|
}, `divider-${a}`)] }, a)) : null;
|
|
73
73
|
}
|
|
74
|
+
let v = h ? Object.fromEntries(Object.entries(h).map(([e, t]) => [`data-${e}`, t])) : {};
|
|
74
75
|
return /* @__PURE__ */ i("div", {
|
|
75
|
-
className: n(
|
|
76
|
+
className: n(g),
|
|
76
77
|
"data-pihanga": m,
|
|
77
|
-
|
|
78
|
+
...v,
|
|
79
|
+
children: [_(), a.children]
|
|
78
80
|
});
|
|
79
81
|
};
|
|
80
82
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.component.js","names":[],"sources":["../../../src/cards/stack/stack.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {StackProps} from \"./stack.types\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\nimport {Fragment} from \"react\";\n\nexport type SelectSD = {\n root?: string;\n};\n\nexport const Component = (props: PiCardProps<StackProps>): React.ReactNode => {\n const {\n content,\n direction,\n divider,\n spacing,\n justifyContent,\n alignItems,\n className,\n style,\n cardName,\n } = props;\n const sd: SelectSD = (style as SelectSD | undefined) ?? {};\n\n const cn = [className, sd.root, \"flex\"];\n if (direction) {\n switch (direction) {\n // \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\"\n case \"row\":\n cn.push(\"flex-row\");\n break;\n case \"row-reverse\":\n cn.push(\"flex-row-reverse\");\n break;\n case \"column\":\n cn.push(\"flex-col\");\n break;\n case \"column-reverse\":\n cn.push(\"flex-col-reverse\");\n break;\n }\n }\n if (justifyContent) {\n switch (justifyContent) {\n // \"flex-start\" | \"center\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"\n case \"flex-start\":\n cn.push(\"justify-start\");\n break;\n case \"center\":\n cn.push(\"justify-center\");\n break;\n case \"flex-end\":\n cn.push(\"justify-end\");\n break;\n case \"space-between\":\n cn.push(\"justify-between\");\n break;\n case \"space-around\":\n cn.push(\"justify-around\");\n break;\n case \"space-evenly\":\n cn.push(\"justify-evenly\");\n break;\n }\n }\n if (alignItems) {\n switch (alignItems) {\n // \"flex-start\" | \"center\" | \"flex-end\" | \"normal\" | \"stretch\" | \"start\" | \"end\" | \"baseline\" | \"initial\" | \"inherit\"\n case \"flex-start\":\n cn.push(\"items-start\");\n break;\n case \"center\":\n cn.push(\"items-center\");\n break;\n case \"stretch\":\n cn.push(\"items-stretch\");\n break;\n case \"flex-end\":\n cn.push(\"items-end\");\n break;\n case \"baseline\":\n cn.push(\"items-baseline\");\n break;\n default:\n console.warn(\"stack: unsupported 'alignItems' property\", alignItems);\n }\n }\n if (spacing && spacing > 0) {\n if (\n direction === undefined ||\n direction === \"row\" ||\n direction === \"row-reverse\"\n ) {\n cn.push(`gap-${spacing}`);\n } else {\n cn.push(`gap-${spacing}`);\n }\n }\n\n function renderContent() {\n if (!content) return null;\n\n return content.map((cn, i) => (\n <Fragment key={i}>\n <Card cardName={cn} parentCard={cardName} key={`item-${i}`} />\n {divider && i < content.length - 1 && (\n <Card cardName={divider} parentCard={cardName} key={`divider-${i}`} />\n )}\n </Fragment>\n ));\n }\n\n return (\n <div className={clsx(cn)} data-pihanga={cardName}>\n {renderContent()}\n {props.children}\n </div>\n );\n};\n"],"mappings":";;;;;AAWA,IAAa,KAAa,MAAoD;CAC5E,IAAM,EACJ,YACA,cACA,YACA,YACA,mBACA,eACA,cACA,UACA,
|
|
1
|
+
{"version":3,"file":"stack.component.js","names":[],"sources":["../../../src/cards/stack/stack.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {StackProps} from \"./stack.types\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\nimport {Fragment} from \"react\";\n\nexport type SelectSD = {\n root?: string;\n};\n\nexport const Component = (props: PiCardProps<StackProps>): React.ReactNode => {\n const {\n content,\n direction,\n divider,\n spacing,\n justifyContent,\n alignItems,\n className,\n style,\n cardName,\n data,\n } = props;\n const sd: SelectSD = (style as SelectSD | undefined) ?? {};\n\n const cn = [className, sd.root, \"flex\"];\n if (direction) {\n switch (direction) {\n // \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\"\n case \"row\":\n cn.push(\"flex-row\");\n break;\n case \"row-reverse\":\n cn.push(\"flex-row-reverse\");\n break;\n case \"column\":\n cn.push(\"flex-col\");\n break;\n case \"column-reverse\":\n cn.push(\"flex-col-reverse\");\n break;\n }\n }\n if (justifyContent) {\n switch (justifyContent) {\n // \"flex-start\" | \"center\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"\n case \"flex-start\":\n cn.push(\"justify-start\");\n break;\n case \"center\":\n cn.push(\"justify-center\");\n break;\n case \"flex-end\":\n cn.push(\"justify-end\");\n break;\n case \"space-between\":\n cn.push(\"justify-between\");\n break;\n case \"space-around\":\n cn.push(\"justify-around\");\n break;\n case \"space-evenly\":\n cn.push(\"justify-evenly\");\n break;\n }\n }\n if (alignItems) {\n switch (alignItems) {\n // \"flex-start\" | \"center\" | \"flex-end\" | \"normal\" | \"stretch\" | \"start\" | \"end\" | \"baseline\" | \"initial\" | \"inherit\"\n case \"flex-start\":\n cn.push(\"items-start\");\n break;\n case \"center\":\n cn.push(\"items-center\");\n break;\n case \"stretch\":\n cn.push(\"items-stretch\");\n break;\n case \"flex-end\":\n cn.push(\"items-end\");\n break;\n case \"baseline\":\n cn.push(\"items-baseline\");\n break;\n default:\n console.warn(\"stack: unsupported 'alignItems' property\", alignItems);\n }\n }\n if (spacing && spacing > 0) {\n if (\n direction === undefined ||\n direction === \"row\" ||\n direction === \"row-reverse\"\n ) {\n cn.push(`gap-${spacing}`);\n } else {\n cn.push(`gap-${spacing}`);\n }\n }\n\n function renderContent() {\n if (!content) return null;\n\n return content.map((cn, i) => (\n <Fragment key={i}>\n <Card cardName={cn} parentCard={cardName} key={`item-${i}`} />\n {divider && i < content.length - 1 && (\n <Card cardName={divider} parentCard={cardName} key={`divider-${i}`} />\n )}\n </Fragment>\n ));\n }\n\n const dataAttrs = data\n ? Object.fromEntries(Object.entries(data).map(([k, v]) => [`data-${k}`, v]))\n : {};\n\n return (\n <div className={clsx(cn)} data-pihanga={cardName} {...dataAttrs}>\n {renderContent()}\n {props.children}\n </div>\n );\n};\n"],"mappings":";;;;;AAWA,IAAa,KAAa,MAAoD;CAC5E,IAAM,EACJ,YACA,cACA,YACA,YACA,mBACA,eACA,cACA,UACA,aACA,YACE,GAGE,IAAK;EAAC;GAFU,KAAkC,CAAC,GAE/B;EAAM;CAAM;CACtC,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;EACF,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,iBAAiB;GACzB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,cAAc;GACtB;EACF,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,WAAW;GACnB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,SACE,QAAQ,KAAK,4CAA4C,CAAU;CACvE;CAEF,AAAI,KAAW,IAAU,KAMrB,EAAG,KAAK,OAAO,GAAS;CAM5B,SAAS,IAAgB;EAGvB,OAFK,IAEE,EAAQ,KAAK,GAAI,MACtB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAA6B,GAAd,QAAQ,GAAM,GAC5D,KAAW,IAAI,EAAQ,SAAS,KAC/B,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAgC,GAAjB,WAAW,GAAM,CAE/D,EAAA,GALK,CAKL,CACX,IAToB;CAUvB;CAEA,IAAM,IAAY,IACd,OAAO,YAAY,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,IACzE,CAAC;CAEL,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,CAAE;EAAG,gBAAc;EAAU,GAAI;YAAtD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}
|
|
@@ -41,4 +41,6 @@ export type StackProps<S = object> = {
|
|
|
41
41
|
className?: string;
|
|
42
42
|
/** Card style object (use the `shad` key for Tailwind-compatible overrides) */
|
|
43
43
|
style?: S;
|
|
44
|
+
/** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */
|
|
45
|
+
data?: Record<string, string>;
|
|
44
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stack.types.js","names":[],"sources":["../../../src/cards/stack/stack.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\nimport type {AlignItemsT} from \"../types\";\n\nexport const STACK_CARD = \"pi/stack\";\n\n/**\n * Factory function for declaring a `stack` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Stack} from \"@/cards/stack\";\n *\n * registerCard(\"myApp/toolbar\", Stack({\n * direction: \"row\",\n * spacing: 2,\n * alignItems: \"center\",\n * justifyContent: \"space-between\",\n * content: [\"myApp/logo\", \"myApp/navLinks\", \"myApp/userMenu\"],\n * }));\n * ```\n */\nexport const Stack = createCardDeclaration<StackProps>(STACK_CARD);\n\n/**\n * CSS `flex-direction` values supported by the Stack card.\n */\nexport type DirectionT = \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\";\n\n/**\n * CSS `justify-content` values supported by the Stack card.\n */\nexport type JustifyContentT =\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n\nexport type StackProps<S = object> = {\n /** Ordered list of child card refs to render */\n content: PiCardRef[];\n\n /** Flex direction — defaults to `\"column\"` */\n direction?: DirectionT;\n /** Optional card ref rendered as a separator between children */\n divider?: PiCardRef;\n /** Tailwind gap spacing units between children */\n spacing?: number;\n\n justifyContent?: JustifyContentT;\n alignItems?: AlignItemsT;\n\n /** Additional Tailwind utility classes */\n className?: string;\n /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n style?: S;\n};\n"],"mappings":";;AAGA,IAAa,IAAa,YAkBb,IAAQ,EAAkC,CAAU"}
|
|
1
|
+
{"version":3,"file":"stack.types.js","names":[],"sources":["../../../src/cards/stack/stack.types.ts"],"sourcesContent":["import {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\nimport type {AlignItemsT} from \"../types\";\n\nexport const STACK_CARD = \"pi/stack\";\n\n/**\n * Factory function for declaring a `stack` card instance.\n *\n * ```ts\n * import {registerCard} from \"@pihanga2/core\";\n * import {Stack} from \"@/cards/stack\";\n *\n * registerCard(\"myApp/toolbar\", Stack({\n * direction: \"row\",\n * spacing: 2,\n * alignItems: \"center\",\n * justifyContent: \"space-between\",\n * content: [\"myApp/logo\", \"myApp/navLinks\", \"myApp/userMenu\"],\n * }));\n * ```\n */\nexport const Stack = createCardDeclaration<StackProps>(STACK_CARD);\n\n/**\n * CSS `flex-direction` values supported by the Stack card.\n */\nexport type DirectionT = \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\";\n\n/**\n * CSS `justify-content` values supported by the Stack card.\n */\nexport type JustifyContentT =\n | \"flex-start\"\n | \"center\"\n | \"flex-end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n\nexport type StackProps<S = object> = {\n /** Ordered list of child card refs to render */\n content: PiCardRef[];\n\n /** Flex direction — defaults to `\"column\"` */\n direction?: DirectionT;\n /** Optional card ref rendered as a separator between children */\n divider?: PiCardRef;\n /** Tailwind gap spacing units between children */\n spacing?: number;\n\n justifyContent?: JustifyContentT;\n alignItems?: AlignItemsT;\n\n /** Additional Tailwind utility classes */\n className?: string;\n /** Card style object (use the `shad` key for Tailwind-compatible overrides) */\n style?: S;\n\n /** Arbitrary data attributes rendered as `data-{key}={value}` on the root element */\n data?: Record<string, string>;\n};\n"],"mappings":";;AAGA,IAAa,IAAa,YAkBb,IAAQ,EAAkC,CAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textField.component.js","names":[],"sources":["../../../src/cards/textField/textField.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiTextFieldEvents, PiTextFieldProps} from \"./textField.types\";\n\nexport const TextFieldComponent = (\n props: PiCardProps<PiTextFieldProps, PiTextFieldEvents>,\n): React.ReactNode => {\n const {\n name,\n value: propValue = \"\",\n type = \"text\",\n placeholder,\n disabled,\n cardName,\n onChanged,\n } = props;\n\n // `id` and `invalid` may be injected by a parent pi/field card via\n // Pihanga's extra-prop forwarding. They are not in the official type so\n // we read them through an escape hatch.\n const injectedId = (props as {id?: string}).id;\n const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n // Detect if we are inside a pi/form card via React context.\n const form = useFormContext();\n const useFormData = form.isInForm && Boolean(name);\n\n const value = useFormData\n ? ((form.formData[name!] as string | undefined) ?? \"\")\n : propValue;\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n const newValue = e.target.value;\n if (useFormData) {\n form.handleChange(name!, newValue);\n } else {\n onChanged({name, value: newValue});\n }\n }\n\n // Use the id injected by pi/field (for label↔control linking); fall back\n // to a locally-generated id when used standalone.\n const selfId = `${cardName}-${name ?? \"field\"}`;\n const fieldId = injectedId ?? selfId;\n\n return (\n <Input\n id={fieldId}\n type={type}\n value={value}\n onChange={handleChange}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n />\n );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAW,EAAE,OAAO;EAC1B,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,IAJY,KAAc;EAKpB;EACC;EACP,UAAU;EACG;EACH;EACV,gBAAc,KAAW,KAAA;
|
|
1
|
+
{"version":3,"file":"textField.component.js","names":[],"sources":["../../../src/cards/textField/textField.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiTextFieldEvents, PiTextFieldProps} from \"./textField.types\";\n\nexport const TextFieldComponent = (\n props: PiCardProps<PiTextFieldProps, PiTextFieldEvents>,\n): React.ReactNode => {\n const {\n name,\n value: propValue = \"\",\n type = \"text\",\n placeholder,\n disabled,\n cardName,\n onChanged,\n } = props;\n\n // `id` and `invalid` may be injected by a parent pi/field card via\n // Pihanga's extra-prop forwarding. They are not in the official type so\n // we read them through an escape hatch.\n const injectedId = (props as {id?: string}).id;\n const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n // Detect if we are inside a pi/form card via React context.\n const form = useFormContext();\n const useFormData = form.isInForm && Boolean(name);\n\n const value = useFormData\n ? ((form.formData[name!] as string | undefined) ?? \"\")\n : propValue;\n\n function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n const newValue = e.target.value;\n if (useFormData) {\n form.handleChange(name!, newValue);\n } else {\n onChanged({name, value: newValue});\n }\n }\n\n // Use the id injected by pi/field (for label↔control linking); fall back\n // to a locally-generated id when used standalone.\n const selfId = `${cardName}-${name ?? \"field\"}`;\n const fieldId = injectedId ?? selfId;\n\n return (\n <Input\n id={fieldId}\n type={type}\n value={value}\n onChange={handleChange}\n placeholder={placeholder}\n disabled={disabled}\n aria-invalid={invalid || undefined}\n data-pihanga={cardName}\n />\n );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAW,EAAE,OAAO;EAC1B,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,IAJY,KAAc;EAKpB;EACC;EACP,UAAU;EACG;EACH;EACV,gBAAc,KAAW,KAAA;EACzB,gBAAc;CACf,CAAA;AAEL"}
|