themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/receipt-BM8xsGFy.js

@@ -0,0 +1,113 @@
+"use client";
+import { t as e } from "./utils-C2EKeIw3.js";
+import { a as t } from "./typography-Cv8MT-82.js";
+import { t as n } from "./structure-MvKVq-oL.js";
+import { t as r, u as i } from "./smart-card-CYLn46e6.js";
+import { r as a, t as o } from "./number-BNT_BIzJ.js";
+import { forwardRef as s, useEffect as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/blocks/commerce/receipt/receipt.tsx
+function p(e, t, n, r) {
+	if (!(e > 0 && t > 0 && n > 0)) return;
+	let i = Math.min(n, t / 4), a = Math.max(1, Math.min(1024, Math.round(e / r))), o = e / a, s = (e, t) => `${Number(e.toFixed(2))}px ${Number(t.toFixed(2))}px`, c = [s(0, i)];
+	for (let e = 0; e < a; e++) c.push(s((e + .5) * o, 0), s((e + 1) * o, i));
+	c.push(s(e, t - i));
+	for (let e = a - 1; e >= 0; e--) c.push(s((e + .5) * o, t), s(e * o, t - i));
+	return `polygon(${c.join(", ")})`;
+}
+var m = s(function({ children: t, header: a, footer: o, qrCode: s, padding: m = "md", toothDepth: h = 5, toothWidth: g = 8, shadow: _ = !0, className: v, ...y }, b) {
+	let x = l(null), [S, C] = u(), w = Number.isFinite(h) ? Math.max(0, h) : 5, T = Number.isFinite(g) ? Math.max(2, g) : 8;
+	c(() => {
+		let e = x.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.getBoundingClientRect();
+			C(p(t.width, t.height, w, T));
+		};
+		if (t(), typeof ResizeObserver > "u") return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [
+		w,
+		T,
+		t,
+		a,
+		o,
+		s
+	]);
+	let E = i(o) || i(s);
+	return /* @__PURE__ */ f("div", {
+		...y,
+		ref: b,
+		className: e("receipt--component relative isolate w-full min-w-0", v),
+		children: [_ && /* @__PURE__ */ d("div", {
+			"aria-hidden": "true",
+			className: "receipt--shadow pointer-events-none absolute inset-x-0 rounded-radius shadow-sm",
+			style: { insetBlock: w }
+		}), /* @__PURE__ */ d(r, {
+			ref: x,
+			surface: "flat",
+			padding: m,
+			headerStart: a,
+			footerSlot: E ? /* @__PURE__ */ f(n, {
+				gap: "normal",
+				align: "center",
+				className: "receipt--footer w-full min-w-0",
+				children: [s, o]
+			}) : void 0,
+			className: "receipt--paper relative bg-card text-card-foreground",
+			style: { clipPath: S },
+			children: t
+		})]
+	});
+});
+//#endregion
+//#region src/components/blocks/commerce/receipt/receipt-items.tsx
+function h({ items: r, currency: i, locale: s, unit: c, minorUnitScale: l, formatMode: u, className: p, ...m }) {
+	return r.length === 0 ? null : /* @__PURE__ */ d(n, {
+		...m,
+		gap: "md",
+		className: e("receipt-items--component min-w-0", p),
+		children: r.map((e) => /* @__PURE__ */ f(n, {
+			direction: "horizontal",
+			gap: "md",
+			justify: "between",
+			align: "start",
+			wrap: !1,
+			className: "receipt-items--item min-w-0",
+			children: [/* @__PURE__ */ f(n, {
+				gap: "dense",
+				className: "receipt-items--copy min-w-0 flex-1",
+				children: [/* @__PURE__ */ f(t, {
+					className: "break-words [overflow-wrap:anywhere]",
+					children: [
+						e.name,
+						" × ",
+						/* @__PURE__ */ d(o, {
+							value: e.quantity,
+							locale: s,
+							align: "left"
+						})
+					]
+				}), e.description != null && /* @__PURE__ */ d(t, {
+					size: "xs",
+					type: "secondary",
+					className: "break-words [overflow-wrap:anywhere]",
+					children: e.description
+				})]
+			}), /* @__PURE__ */ d(a, {
+				amount: e.total ?? e.quantity * e.unitPrice,
+				currency: i,
+				locale: s,
+				unit: c,
+				minorUnitScale: l,
+				formatMode: u,
+				className: "receipt-items--amount min-w-0 max-w-full whitespace-normal [overflow-wrap:anywhere]"
+			})]
+		}, e.id))
+	});
+}
+//#endregion
+export { m as n, h as t };
+
+//# sourceMappingURL=receipt-BM8xsGFy.js.map

package/dist/receipt-BM8xsGFy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"receipt-BM8xsGFy.js","names":["NumberValue","cn","Text","Stack","Card","hasRenderableContent","Money","Number$1","paperClip","width","height","depth","inset","count","toothWidth","step","point","x","y","points","segment","Receipt","forwardRef","props","paper","useRef","clipPath","setClipPath","useState","toothDepth","element","update","rectangle","observer","children","header","footer","qrCode","hasFooter","className","shadow","ReceiptItems","items","item"],"sources":["../src/components/blocks/commerce/receipt/receipt.tsx","../src/components/blocks/commerce/receipt/receipt-items.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Card, hasRenderableContent } from '../../../base/cards';\nimport { Stack } from '../../../base/structure';\nimport { cn } from '../../../../lib/utils';\nimport type { ReceiptProps } from './types';\n\nfunction paperClip(width: number, height: number, depth: number, toothWidth: number) {\n\tif (!(width > 0 && height > 0 && depth > 0)) return undefined;\n\tconst inset = Math.min(depth, height / 4);\n\tconst count = Math.max(1, Math.min(1024, Math.round(width / toothWidth)));\n\tconst step = width / count;\n\tconst point = (x: number, y: number) => `${Number(x.toFixed(2))}px ${Number(y.toFixed(2))}px`;\n\tconst points: string[] = [point(0, inset)];\n\tfor (let segment = 0; segment < count; segment++) {\n\t\tpoints.push(point((segment + 0.5) * step, 0), point((segment + 1) * step, inset));\n\t}\n\tpoints.push(point(width, height - inset));\n\tfor (let segment = count - 1; segment >= 0; segment--) {\n\t\tpoints.push(point((segment + 0.5) * step, height), point(segment * step, height - inset));\n\t}\n\treturn `polygon(${points.join(', ')})`;\n}\n\n/** Explicit paper surface: Card owns all content insets; clipping is decorative geometry. */\nexport const Receipt = forwardRef<HTMLDivElement, ReceiptProps>(function Receipt({\n\tchildren, header, footer, qrCode, padding = 'md', toothDepth = 5, toothWidth = 8,\n\tshadow = true, className, ...props\n}, ref) {\n\tconst paper = useRef<HTMLDivElement>(null);\n\tconst [clipPath, setClipPath] = useState<string>();\n\tconst depth = Number.isFinite(toothDepth) ? Math.max(0, toothDepth) : 5;\n\tconst width = Number.isFinite(toothWidth) ? Math.max(2, toothWidth) : 8;\n\tuseEffect(() => {\n\t\tconst element = paper.current;\n\t\tif (!element) return;\n\t\tconst update = () => {\n\t\t\tconst rectangle = element.getBoundingClientRect();\n\t\t\tsetClipPath(paperClip(rectangle.width, rectangle.height, depth, width));\n\t\t};\n\t\tupdate();\n\t\tif (typeof ResizeObserver === 'undefined') {\n\t\t\twindow.addEventListener('resize', update);\n\t\t\treturn () => window.removeEventListener('resize', update);\n\t\t}\n\t\tconst observer = new ResizeObserver(update);\n\t\tobserver.observe(element);\n\t\treturn () => observer.disconnect();\n\t}, [depth, width, children, header, footer, qrCode]);\n\tconst hasFooter = hasRenderableContent(footer) || hasRenderableContent(qrCode);\n\treturn <div {...props} ref={ref} className={cn('receipt--component relative isolate w-full min-w-0', className)}>\n\t\t{shadow && <div aria-hidden=\"true\" className=\"receipt--shadow pointer-events-none absolute inset-x-0 rounded-radius shadow-sm\" style={{ insetBlock: depth }} />}\n\t\t<Card ref={paper} surface=\"flat\" padding={padding} headerStart={header}\n\t\t\tfooterSlot={hasFooter ? <Stack gap=\"normal\" align=\"center\" className=\"receipt--footer w-full min-w-0\">{qrCode}{footer}</Stack> : undefined}\n\t\t\tclassName=\"receipt--paper relative bg-card text-card-foreground\" style={{ clipPath }}>\n\t\t\t{children}\n\t\t</Card>\n\t</div>;\n});\n","import { Stack } from '../../../base/structure';\nimport { Money } from '../../../primitives/money';\nimport { Number as NumberValue } from '../../../primitives/number';\nimport { Text } from '../../../typography/text';\nimport { cn } from '../../../../lib/utils';\nimport type { ReceiptItemsProps } from './types';\n\nexport function ReceiptItems({ items, currency, locale, unit, minorUnitScale, formatMode, className, ...props }: ReceiptItemsProps) {\n\tif (items.length === 0) return null;\n\treturn <Stack {...props} gap=\"md\" className={cn('receipt-items--component min-w-0', className)}>\n\t\t{items.map(item => <Stack key={item.id} direction=\"horizontal\" gap=\"md\" justify=\"between\" align=\"start\" wrap={false} className=\"receipt-items--item min-w-0\">\n\t\t\t<Stack gap=\"dense\" className=\"receipt-items--copy min-w-0 flex-1\">\n\t\t\t\t<Text className=\"break-words [overflow-wrap:anywhere]\">{item.name} × <NumberValue value={item.quantity} locale={locale} align=\"left\" /></Text>\n\t\t\t\t{item.description != null && <Text size=\"xs\" type=\"secondary\" className=\"break-words [overflow-wrap:anywhere]\">{item.description}</Text>}\n\t\t\t</Stack>\n\t\t\t<Money amount={item.total ?? item.quantity * item.unitPrice} currency={currency} locale={locale} unit={unit} minorUnitScale={minorUnitScale} formatMode={formatMode} className=\"receipt-items--amount min-w-0 max-w-full whitespace-normal [overflow-wrap:anywhere]\" />\n\t\t</Stack>)}\n\t</Stack>;\n}\n"],"mappings":"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"}

package/dist/rich-text-B7sBAdDG.js

@@ -0,0 +1,32 @@
+"use client";
+import { p as e } from "./ui-provider-CftIB6TY.js";
+import { t } from "./utils-C2EKeIw3.js";
+import { t as n } from "./text.styles-BwB7vAF2.js";
+import { t as r } from "./sanitize-html-BG9FGe-j.js";
+import { t as i } from "./content-typography-CnwgMJ37.js";
+import { forwardRef as a, useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/typography/rich-text/rich-text.tsx
+var c = a(function({ html: a, type: c = "main", size: l, align: u = "left", lineHeight: d = "normal", weight: f = "regular", className: p, numeric: m = !1, tag: h = "p", ...g }, _) {
+	let { defaultTextSize: v } = e(), y = l ?? v ?? "sm", b = o(() => r(a ?? ""), [a]);
+	return b ? /* @__PURE__ */ s(h, {
+		ref: _,
+		className: t(i, n({
+			type: c,
+			size: y,
+			align: u,
+			lineHeight: d,
+			weight: f,
+			numeric: m,
+			className: p
+		})),
+		"data-typography": "rich-text",
+		dangerouslySetInnerHTML: { __html: b },
+		...g
+	}) : null;
+});
+c.displayName = "RichText";
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=rich-text-B7sBAdDG.js.map

package/dist/rich-text-B7sBAdDG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text-B7sBAdDG.js","names":["useTypographyConfig","resolveTextClassNames","sanitizeHtml","contentTypographyClassName","RichText","forwardRef","sizeProp","Tag","props","size","defaultTextSize","sanitizedHtml","useMemo","html","cn"],"sources":["../src/components/typography/rich-text/rich-text.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\n\nimport { sanitizeHtml } from '../../../lib/sanitize-html';\nimport { useTypographyConfig } from '../../../lib/ui-provider';\nimport { cn } from '../../../lib/utils';\nimport { contentTypographyClassName } from '../content-typography';\n\nimport type { TextProps } from '../text';\nimport { resolveTextClassNames } from '../text.styles';\n\nexport interface RichTextProps\n\textends Omit<\n\t\tTextProps,\n\t\t'children' | 'content' | 'dangerouslySetInnerHTML'\n\t> {\n\t/** HTML sanitized through the package allowlist before rendering. */\n\thtml?: string | null;\n}\n\nexport const RichText = forwardRef<HTMLElement, RichTextProps>(\n\tfunction RichText(\n\t\t{\n\t\t\thtml,\n\t\t\ttype = 'main',\n\t\t\tsize: sizeProp,\n\t\t\talign = 'left',\n\t\t\tlineHeight = 'normal',\n\t\t\tweight = 'regular',\n\t\t\tclassName,\n\t\t\tnumeric = false,\n\t\t\ttag: Tag = 'p',\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) {\n\t\tconst { defaultTextSize } = useTypographyConfig();\n\t\tconst size = sizeProp ?? defaultTextSize ?? 'sm';\n\t\tconst sanitizedHtml = useMemo(() => sanitizeHtml(html ?? ''), [html]);\n\n\t\tif (!sanitizedHtml) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\tref={ref as never}\n\t\t\t\tclassName={cn(contentTypographyClassName, resolveTextClassNames({\n\t\t\t\t\ttype,\n\t\t\t\t\tsize,\n\t\t\t\t\talign,\n\t\t\t\t\tlineHeight,\n\t\t\t\t\tweight,\n\t\t\t\t\tnumeric,\n\t\t\t\t\tclassName,\n\t\t\t\t}))}\n\t\t\t\tdata-typography=\"rich-text\"\n\t\t\t\tdangerouslySetInnerHTML={{ __html: sanitizedHtml }}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\n\nRichText.displayName = 'RichText';\n"],"mappings":";;;;;;;;;AAmBA,IAAaI,IAAWC,EACvB,SACC,EACC,SACA,UAAO,QACP,MAAMC,GACN,WAAQ,QACR,gBAAa,UACb,YAAS,WACT,cACA,aAAU,IACV,KAAKC,IAAM,KACX,GAAGC,KAEJ,GACC;CACD,IAAM,EAAE,uBAAoBR,EAAoB,GAC1CS,IAAOH,KAAYI,KAAmB,MACtCC,IAAgBC,QAAcV,EAAaW,KAAQ,EAAE,GAAG,CAACA,CAAI,CAAC;CAMpE,OAJKF,IAKJ,kBAACJ,GAAD;EACM;EACL,WAAWO,EAAGX,GAA4BF,EAAsB;GAC/D;GACA;GACA;GACA;GACA;GACA;GACA;EACD,CAAC,CAAC;EACF,mBAAgB;EAChB,yBAAyB,EAAE,QAAQU,EAAc;EACjD,GAAIH;CACJ,CAAA,IAlBM;AAoBT,CACD;AAEA,EAAS,cAAc"}