@pzh-ui/react 0.0.2

package/README.md

@@ -0,0 +1,19 @@
+# `@pzh-ui/react`
+
+This package contains default components to use in Provincie Zuid-Holland projects.
+
+Add the NPM package for the components. The component library can be imported as a whole, or per component.
+
+In order to add the entire component library, install [@pzh-ui/react](https://www.npmjs.com/package/@pzh-ui/react) using your favorite package manager.
+
+For example, `yarn add @pzh-ui/react`
+
+After installing the dependency, you can start using the components as follows:
+
+```jsx
+import { Button } from '@pzh-ui/react'
+
+function Page() {
+    return <Button label="Click here" />
+}
+```

package/dist/Notification/Notification.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type NotificationVariant = 'info' | 'warning' | 'positive' | 'negative';
+type NotificationSize = 'm' | 's' | 'xs';
+export interface NotificationProps {
+    variant?: NotificationVariant;
+    size?: NotificationSize;
+    className?: string;
+    children?: ReactNode;
+    title: ReactNode;
+    onClose?: () => void;
+}
+export declare const Notification: ({ variant, size, className, children, title, onClose, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Notification.d.ts.map

package/dist/Notification/Notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../src/Notification/Notification.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;AACvE,KAAK,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAA;AAExC,MAAM,WAAW,iBAAiB;IAC9B,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAoDD,eAAO,MAAM,YAAY,GAAI,yDAO1B,iBAAiB,4CAoDnB,CAAA"}

package/dist/Notification/Notification.js

@@ -0,0 +1,92 @@
+import { cn as e } from "../utils/cn.js";
+import { Text as t } from "../Text/Text.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Ban as i, CircleCheckSolid as a, CircleInfoSolid as o, TriangleExclamationSolid as s, XmarkLarge as c } from "@pzh-ui/icons";
+//#region src/Notification/Notification.tsx
+var l = {
+	info: {
+		icon: o,
+		container: "bg-pzh-blue-10 border-pzh-blue-100",
+		body: "text-pzh-blue-900"
+	},
+	warning: {
+		icon: s,
+		container: "bg-pzh-yellow-10 border-pzh-yellow-100",
+		body: "text-pzh-gray-700"
+	},
+	positive: {
+		icon: a,
+		container: "bg-pzh-green-10 border-pzh-green-100",
+		body: "text-pzh-green-900"
+	},
+	negative: {
+		icon: i,
+		container: "bg-pzh-red-10 border-pzh-red-100",
+		body: "text-pzh-red-900"
+	}
+}, u = {
+	m: {
+		padding: "p-4",
+		iconSize: 18,
+		iconClass: "min-w-[18px]",
+		iconMargin: "mt-1",
+		titleClass: "text-heading-s",
+		bodySize: "s"
+	},
+	s: {
+		padding: "pl-4 pr-2 py-2",
+		iconSize: 16,
+		iconClass: "min-w-4 mt-0.5",
+		iconMargin: "mt-0.5",
+		titleClass: "text-heading-xs",
+		bodySize: "s"
+	},
+	xs: {
+		padding: "pl-2 pr-1 py-1",
+		iconSize: 14,
+		iconClass: "min-w-3.5 mt-[3px]",
+		iconMargin: "mt-[3px]",
+		titleClass: "text-s -mt-0.5",
+		bodySize: "xs"
+	}
+}, d = ({ variant: i = "info", size: a = "m", className: o, children: s, title: d, onClose: f }) => {
+	let { icon: p, container: m, body: h } = l[i], { padding: g, iconSize: _, iconClass: v, iconMargin: y, titleClass: b, bodySize: x } = u[a];
+	return /* @__PURE__ */ n("div", {
+		className: e("inline-block rounded border", m, g, o),
+		children: /* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between gap-2",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ n(p, {
+					size: _,
+					className: e(v, y, h)
+				}), /* @__PURE__ */ r("div", {
+					className: e("flex flex-col", { "gap-1": a !== "xs" }),
+					children: [/* @__PURE__ */ n(t, {
+						as: "span",
+						bold: !0,
+						className: e("block", b, h),
+						children: d
+					}), s && /* @__PURE__ */ n(t, {
+						size: x,
+						className: h,
+						children: s
+					})]
+				})]
+			}), f && /* @__PURE__ */ n("button", {
+				type: "button",
+				"aria-label": "Sluiten",
+				onClick: f,
+				className: e("cursor-pointer", y, h),
+				children: /* @__PURE__ */ n(c, {
+					size: 14,
+					className: "min-w-6"
+				})
+			})]
+		})
+	});
+};
+//#endregion
+export { d as Notification };
+
+//# sourceMappingURL=Notification.js.map

package/dist/Notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","names":[],"sources":["../../src/Notification/Notification.tsx"],"sourcesContent":["import {\n    Ban,\n    CircleCheckSolid,\n    CircleInfoSolid,\n    TriangleExclamationSolid,\n    XmarkLarge,\n} from '@pzh-ui/icons'\nimport { ReactNode } from 'react'\nimport { Text } from '../Text'\nimport { cn } from '../utils'\n\ntype NotificationVariant = 'info' | 'warning' | 'positive' | 'negative'\ntype NotificationSize = 'm' | 's' | 'xs'\n\nexport interface NotificationProps {\n    variant?: NotificationVariant\n    size?: NotificationSize\n    className?: string\n    children?: ReactNode\n    title: ReactNode\n    onClose?: () => void\n}\n\nconst variantConfig = {\n    info: {\n        icon: CircleInfoSolid,\n        container: 'bg-pzh-blue-10 border-pzh-blue-100',\n        body: 'text-pzh-blue-900',\n    },\n    warning: {\n        icon: TriangleExclamationSolid,\n        container: 'bg-pzh-yellow-10 border-pzh-yellow-100',\n        body: 'text-pzh-gray-700',\n    },\n    positive: {\n        icon: CircleCheckSolid,\n        container: 'bg-pzh-green-10 border-pzh-green-100',\n        body: 'text-pzh-green-900',\n    },\n    negative: {\n        icon: Ban,\n        container: 'bg-pzh-red-10 border-pzh-red-100',\n        body: 'text-pzh-red-900',\n    },\n} satisfies Record<NotificationVariant, unknown>\n\nconst sizeConfig = {\n    m: {\n        padding: 'p-4',\n        iconSize: 18,\n        iconClass: 'min-w-[18px]',\n        iconMargin: 'mt-1',\n        titleClass: 'text-heading-s',\n        bodySize: 's',\n    },\n    s: {\n        padding: 'pl-4 pr-2 py-2',\n        iconSize: 16,\n        iconClass: 'min-w-4 mt-0.5',\n        iconMargin: 'mt-0.5',\n        titleClass: 'text-heading-xs',\n        bodySize: 's',\n    },\n    xs: {\n        padding: 'pl-2 pr-1 py-1',\n        iconSize: 14,\n        iconClass: 'min-w-3.5 mt-[3px]',\n        iconMargin: 'mt-[3px]',\n        titleClass: 'text-s -mt-0.5',\n        bodySize: 'xs',\n    },\n} as const\n\nexport const Notification = ({\n    variant = 'info',\n    size = 'm',\n    className,\n    children,\n    title,\n    onClose,\n}: NotificationProps) => {\n    const { icon: Icon, container, body } = variantConfig[variant]\n\n    const { padding, iconSize, iconClass, iconMargin, titleClass, bodySize } =\n        sizeConfig[size]\n\n    return (\n        <div\n            className={cn(\n                'inline-block rounded border',\n                container,\n                padding,\n                className\n            )}>\n            <div className=\"flex items-start justify-between gap-2\">\n                <div className=\"flex items-start gap-2\">\n                    <Icon\n                        size={iconSize}\n                        className={cn(iconClass, iconMargin, body)}\n                    />\n\n                    <div\n                        className={cn('flex flex-col', {\n                            'gap-1': size !== 'xs',\n                        })}>\n                        <Text\n                            as=\"span\"\n                            bold\n                            className={cn('block', titleClass, body)}>\n                            {title}\n                        </Text>\n\n                        {children && (\n                            <Text size={bodySize} className={body}>\n                                {children}\n                            </Text>\n                        )}\n                    </div>\n                </div>\n\n                {onClose && (\n                    <button\n                        type=\"button\"\n                        aria-label=\"Sluiten\"\n                        onClick={onClose}\n                        className={cn('cursor-pointer', iconMargin, body)}>\n                        <XmarkLarge size={14} className=\"min-w-6\" />\n                    </button>\n                )}\n            </div>\n        </div>\n    )\n}\n"],"mappings":";;;;;AAuBA,IAAM,IAAgB;CAClB,MAAM;EACF,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,SAAS;EACL,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,UAAU;EACN,MAAM;EACN,WAAW;EACX,MAAM;CACV;CACA,UAAU;EACN,MAAM;EACN,WAAW;EACX,MAAM;CACV;AACJ,GAEM,IAAa;CACf,GAAG;EACC,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,GAAG;EACC,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;CACA,IAAI;EACA,SAAS;EACT,UAAU;EACV,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,UAAU;CACd;AACJ,GAEa,KAAgB,EACzB,aAAU,QACV,UAAO,KACP,cACA,aACA,UACA,iBACqB;CACrB,IAAM,EAAE,MAAM,GAAM,cAAW,YAAS,EAAc,IAEhD,EAAE,YAAS,aAAU,cAAW,eAAY,eAAY,gBAC1D,EAAW;CAEf,OACI,kBAAC,OAAD;EACI,WAAW,EACP,+BACA,GACA,GACA,CACJ;YACA,kBAAC,OAAD;GAAK,WAAU;aAAf,CACI,kBAAC,OAAD;IAAK,WAAU;cAAf,CACI,kBAAC,GAAD;KACI,MAAM;KACN,WAAW,EAAG,GAAW,GAAY,CAAI;IAC5C,CAAA,GAED,kBAAC,OAAD;KACI,WAAW,EAAG,iBAAiB,EAC3B,SAAS,MAAS,KACtB,CAAC;eAHL,CAII,kBAAC,GAAD;MACI,IAAG;MACH,MAAA;MACA,WAAW,EAAG,SAAS,GAAY,CAAI;gBACtC;KACC,CAAA,GAEL,KACG,kBAAC,GAAD;MAAM,MAAM;MAAU,WAAW;MAC5B;KACC,CAAA,CAET;MACJ;OAEJ,KACG,kBAAC,UAAD;IACI,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAW,EAAG,kBAAkB,GAAY,CAAI;cAChD,kBAAC,GAAD;KAAY,MAAM;KAAI,WAAU;IAAW,CAAA;GACvC,CAAA,CAEX;;CACJ,CAAA;AAEb"}

package/dist/Notification/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Notification';
+//# sourceMappingURL=index.d.ts.map

package/dist/Notification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Notification/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/Notification/index.js

@@ -0,0 +1,2 @@
+import { Notification as e } from "./Notification.js";
+export { e as Notification };

package/dist/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import { PolymorphicComponentProp } from '../utils/polymorphicComponent';
+type PossibleTypes = 'p' | 'span' | 'b' | 'strong' | 'i' | 'em' | 'mark' | 'small' | 'del' | 'ins' | 'sub' | 'sup' | 'blockquote' | 'code' | 'pre' | 'li' | 'dt' | 'dd' | 'label';
+export interface TextProps {
+    size?: 'xs' | 's' | 'm' | 'l';
+    color?: `text-${string}`;
+    bold?: boolean;
+}
+export declare const Text: <C extends PossibleTypes>({ as, size, color, bold, className, children, ...rest }: PolymorphicComponentProp<C, TextProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Text.d.ts.map

package/dist/Text/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAA;AAExE,KAAK,aAAa,GACZ,GAAG,GACH,MAAM,GACN,GAAG,GACH,QAAQ,GACR,GAAG,GACH,IAAI,GACJ,MAAM,GACN,OAAO,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,YAAY,GACZ,MAAM,GACN,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,OAAO,CAAA;AAEb,MAAM,WAAW,SAAS;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IAC7B,KAAK,CAAC,EAAE,QAAQ,MAAM,EAAE,CAAA;IACxB,IAAI,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,aAAa,EAAE,yDAQ3C,wBAAwB,CAAC,CAAC,EAAE,SAAS,CAAC,4CAaxC,CAAA"}

package/dist/Text/Text.js

@@ -0,0 +1,13 @@
+import { cn as e } from "../utils/cn.js";
+import { getTextStyles as t } from "../utils/getTextStyles.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/Text/Text.tsx
+var r = ({ as: r, size: i = "m", color: a = "text-pzh-blue-900", bold: o, className: s, children: c, ...l }) => /* @__PURE__ */ n(r || "p", {
+	className: e(a, t(i), s, { "font-bold": o }),
+	...l,
+	children: c
+});
+//#endregion
+export { r as Text };
+
+//# sourceMappingURL=Text.js.map

package/dist/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":[],"sources":["../../src/Text/Text.tsx"],"sourcesContent":["import { ElementType } from 'react'\n\nimport { cn } from '../utils'\nimport { getTextStyles } from '../utils/getTextStyles'\nimport { PolymorphicComponentProp } from '../utils/polymorphicComponent'\n\ntype PossibleTypes =\n    | 'p'\n    | 'span'\n    | 'b'\n    | 'strong'\n    | 'i'\n    | 'em'\n    | 'mark'\n    | 'small'\n    | 'del'\n    | 'ins'\n    | 'sub'\n    | 'sup'\n    | 'blockquote'\n    | 'code'\n    | 'pre'\n    | 'li'\n    | 'dt'\n    | 'dd'\n    | 'label'\n\nexport interface TextProps {\n    size?: 'xs' | 's' | 'm' | 'l'\n    color?: `text-${string}`\n    bold?: boolean\n}\n\nexport const Text = <C extends PossibleTypes>({\n    as,\n    size = 'm',\n    color = 'text-pzh-blue-900',\n    bold,\n    className,\n    children,\n    ...rest\n}: PolymorphicComponentProp<C, TextProps>) => {\n    const Component = as || ('p' as ElementType)\n    const styles = getTextStyles(size)\n\n    return (\n        <Component\n            className={cn(color, styles, className, {\n                'font-bold': bold,\n            })}\n            {...rest}>\n            {children}\n        </Component>\n    )\n}\n"],"mappings":";;;;AAiCA,IAAa,KAAiC,EAC1C,OACA,UAAO,KACP,WAAQ,qBACR,SACA,cACA,aACA,GAAG,QAMC,kBAJc,KAAO,KAIrB;CACI,WAAW,EAAG,GAJP,EAAc,CAIA,GAAQ,GAAW,EACpC,aAAa,EACjB,CAAC;CACD,GAAI;CACH;AACM,CAAA"}

package/dist/Text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Text';
+//# sourceMappingURL=index.d.ts.map

package/dist/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/dist/Text/index.js

@@ -0,0 +1,2 @@
+import { Text as e } from "./Text.js";
+export { e as Text };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Text } from './Text';
+export type { TextProps } from './Text';
+export { Notification } from './Notification';
+export type { NotificationProps } from './Notification';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+import { Text as e } from "./Text/Text.js";
+import { Notification as t } from "./Notification/Notification.js";
+export { t as Notification, e as Text };

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAwB5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/utils/cn.js

@@ -0,0 +1,23 @@
+import { clsx as e } from "clsx";
+import { extendTailwindMerge as t } from "tailwind-merge";
+//#region src/utils/cn.ts
+var n = t({ override: { classGroups: { "font-size": [
+	"text-xs",
+	"text-s",
+	"text-m",
+	"text-l",
+	"text-heading-xs",
+	"text-heading-s",
+	"text-heading-m",
+	"text-heading-l",
+	"text-heading-xl",
+	"text-heading-xxl",
+	"text-heading-xxxl"
+] } } });
+function r(...t) {
+	return n(e(t));
+}
+//#endregion
+export { r as cn };
+
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.js","names":[],"sources":["../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { extendTailwindMerge } from 'tailwind-merge'\n\nconst twMerge = extendTailwindMerge({\n    // use the `extend` key in case you want to extend instead of override\n    override: {\n        classGroups: {\n            'font-size': [\n                'text-xs',\n                'text-s',\n                'text-m',\n                'text-l',\n                'text-heading-xs',\n                'text-heading-s',\n                'text-heading-m',\n                'text-heading-l',\n                'text-heading-xl',\n                'text-heading-xxl',\n                'text-heading-xxxl',\n            ],\n        },\n    },\n})\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAGA,IAAM,IAAU,EAAoB,EAEhC,UAAU,EACN,aAAa,EACT,aAAa;CACT;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACJ,EACJ,EACJ,EACJ,CAAC;AAED,SAAgB,EAAG,GAAG,GAAsB;CACxC,OAAO,EAAQ,EAAK,CAAM,CAAC;AAC/B"}

package/dist/utils/getTextStyles.d.ts

@@ -0,0 +1,3 @@
+import { TextProps } from '../Text';
+export declare const getTextStyles: (size: TextProps["size"]) => string;
+//# sourceMappingURL=getTextStyles.d.ts.map

package/dist/utils/getTextStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTextStyles.d.ts","sourceRoot":"","sources":["../../src/utils/getTextStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,CAAC,MAAM,CAAC,KAAG,MAavD,CAAA"}

package/dist/utils/getTextStyles.js

@@ -0,0 +1,14 @@
+//#region src/utils/getTextStyles.ts
+var e = (e) => {
+	switch (e) {
+		case "l": return "text-l";
+		case "m": return "text-m";
+		case "s": return "text-s";
+		case "xs": return "text-xs";
+		default: return "";
+	}
+};
+//#endregion
+export { e as getTextStyles };
+
+//# sourceMappingURL=getTextStyles.js.map

package/dist/utils/getTextStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTextStyles.js","names":[],"sources":["../../src/utils/getTextStyles.ts"],"sourcesContent":["import { TextProps } from '../Text'\n\nexport const getTextStyles = (size: TextProps['size']): string => {\n    switch (size) {\n        case 'l':\n            return 'text-l'\n        case 'm':\n            return 'text-m'\n        case 's':\n            return 'text-s'\n        case 'xs':\n            return 'text-xs'\n        default:\n            return ''\n    }\n}\n"],"mappings":";AAEA,IAAa,KAAiB,MAAoC;CAC9D,QAAQ,GAAR;EACI,KAAK,KACD,OAAO;EACX,KAAK,KACD,OAAO;EACX,KAAK,KACD,OAAO;EACX,KAAK,MACD,OAAO;EACX,SACI,OAAO;CACf;AACJ"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA"}

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+import { cn as e } from "./cn.js";
+export { e as cn };

package/dist/utils/polymorphicComponent.d.ts

@@ -0,0 +1,40 @@
+type DataProps = {
+    [key: `data-${string}`]: string | number | undefined | boolean;
+};
+type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>['ref'];
+export type As = React.ElementType;
+type AsProp<Component extends As> = {
+    as?: Component;
+};
+type PropsToOmit<Component extends As, Props> = keyof (AsProp<Component> & Props);
+export type PolymorphicComponentProp<Component extends As, Props = object> = React.PropsWithChildren<Props & AsProp<Component>> & Omit<React.ComponentPropsWithoutRef<Component>, PropsToOmit<Component, Props>> & DataProps;
+export type PolymorphicComponentPropWithRef<Component extends As, Props = object> = PolymorphicComponentProp<Component, Props> & {
+    ref?: PolymorphicRef<Component>;
+} & DataProps;
+export declare function forwardRef<Props extends object, DefaultAs extends As = 'div'>(component: React.ForwardRefRenderFunction<unknown, React.PropsWithoutRef<PolymorphicComponentProp<DefaultAs, Props>>>): <Component extends As = DefaultAs>(props: PolymorphicComponentPropWithRef<Component, Props>) => React.ReactElement | null;
+export declare const polyComponent: <Props extends object, Component extends As = As>(component: React.FC<PolymorphicComponentProp<Component, Props>>) => import("react").FC<PolymorphicComponentProp<Component, Props>>;
+export {};
+/**
+
+Usage with ref:
+
+interface TestPropsBase {
+  title: string;
+}
+
+export type TestProps<Component extends As = "div"> = PolyMorphicComponentPropWithRef<TestPropsBase, Component>;
+
+export const Test = forwardRef<TestPropsBase, As = "div">(
+  ({ as, title, ...props }, ref) => {
+    const Component = as || "button";
+
+    return (
+      <Component ref={ref} {...props}>
+        {title}
+      </Component>
+    )
+  }
+);
+
+*/
+//# sourceMappingURL=polymorphicComponent.d.ts.map

package/dist/utils/polymorphicComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphicComponent.d.ts","sourceRoot":"","sources":["../../src/utils/polymorphicComponent.ts"],"names":[],"mappings":"AAEA,KAAK,SAAS,GAAG;IACb,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;CACjE,CAAA;AAED,KAAK,cAAc,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC3C,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAEzC,MAAM,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAA;AAElC,KAAK,MAAM,CAAC,SAAS,SAAS,EAAE,IAAI;IAChC,EAAE,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,KAAK,WAAW,CAAC,SAAS,SAAS,EAAE,EAAE,KAAK,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,GACpE,KAAK,CAAC,CAAA;AAEV,MAAM,MAAM,wBAAwB,CAChC,SAAS,SAAS,EAAE,EACpB,KAAK,GAAG,MAAM,IACd,KAAK,CAAC,iBAAiB,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,GAClD,IAAI,CACA,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC,EACzC,WAAW,CAAC,SAAS,EAAE,KAAK,CAAC,CAChC,GACD,SAAS,CAAA;AAEb,MAAM,MAAM,+BAA+B,CACvC,SAAS,SAAS,EAAE,EACpB,KAAK,GAAG,MAAM,IACd,wBAAwB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;CAClC,GAAG,SAAS,CAAA;AAEb,wBAAgB,UAAU,CAAC,KAAK,SAAS,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,KAAK,EACzE,SAAS,EAAE,KAAK,CAAC,wBAAwB,CACrC,OAAO,EACP,KAAK,CAAC,eAAe,CAAC,wBAAwB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACpE,GAE+C,CAC5C,SAAS,SAAS,EAAE,GAAG,SAAS,EAEhC,KAAK,EAAE,+BAA+B,CAAC,SAAS,EAAE,KAAK,CAAC,KACvD,KAAK,CAAC,YAAY,GAAG,IAAI,CACjC;AAED,eAAO,MAAM,aAAa,GAAI,KAAK,SAAS,MAAM,EAAE,SAAS,SAAS,EAAE,GAAG,EAAE,EACzE,WAAW,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,mEAGlE,CAAA;;AAED;;;;;;;;;;;;;;;;;;;;;;EAsBE"}

package/dist/utils/polymorphicComponent.js

@@ -0,0 +1,10 @@
+import { forwardRef as e } from "react";
+//#region src/utils/polymorphicComponent.ts
+function t(t) {
+	return e(t);
+}
+var n = (e) => e;
+//#endregion
+export { t as forwardRef, n as polyComponent };
+
+//# sourceMappingURL=polymorphicComponent.js.map

package/dist/utils/polymorphicComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphicComponent.js","names":[],"sources":["../../src/utils/polymorphicComponent.ts"],"sourcesContent":["import { forwardRef as forwardRefReact } from 'react'\n\ntype DataProps = {\n    [key: `data-${string}`]: string | number | undefined | boolean\n}\n\ntype PolymorphicRef<C extends React.ElementType> =\n    React.ComponentPropsWithRef<C>['ref']\n\nexport type As = React.ElementType\n\ntype AsProp<Component extends As> = {\n    as?: Component\n}\n\ntype PropsToOmit<Component extends As, Props> = keyof (AsProp<Component> &\n    Props)\n\nexport type PolymorphicComponentProp<\n    Component extends As,\n    Props = object,\n> = React.PropsWithChildren<Props & AsProp<Component>> &\n    Omit<\n        React.ComponentPropsWithoutRef<Component>,\n        PropsToOmit<Component, Props>\n    > &\n    DataProps\n\nexport type PolymorphicComponentPropWithRef<\n    Component extends As,\n    Props = object,\n> = PolymorphicComponentProp<Component, Props> & {\n    ref?: PolymorphicRef<Component>\n} & DataProps\n\nexport function forwardRef<Props extends object, DefaultAs extends As = 'div'>(\n    component: React.ForwardRefRenderFunction<\n        unknown,\n        React.PropsWithoutRef<PolymorphicComponentProp<DefaultAs, Props>>\n    >\n) {\n    return forwardRefReact(component) as unknown as <\n        Component extends As = DefaultAs,\n    >(\n        props: PolymorphicComponentPropWithRef<Component, Props>\n    ) => React.ReactElement | null\n}\n\nexport const polyComponent = <Props extends object, Component extends As = As>(\n    component: React.FC<PolymorphicComponentProp<Component, Props>>\n) => {\n    return component\n}\n\n/**\n\nUsage with ref:\n\ninterface TestPropsBase {\n  title: string;\n}\n\nexport type TestProps<Component extends As = \"div\"> = PolyMorphicComponentPropWithRef<TestPropsBase, Component>;\n\nexport const Test = forwardRef<TestPropsBase, As = \"div\">(\n  ({ as, title, ...props }, ref) => {\n    const Component = as || \"button\";\n\n    return (\n      <Component ref={ref} {...props}>\n        {title}\n      </Component>\n    )\n  }\n);\n\n*/\n\n/*\nUsage without ref:\n\ninterface TestProps {\n  icon?: IconDefinition;\n}\n\nexport const Test = <C extends React.ElementType>({\n  as,\n  icon,\n  children,\n  ...props\n}: PolymorphicComponentProp<C, TestProps>) => {\n  const Component = as || \"button\";\n\n  return (\n    <Component {...props}>\n      {icon && (\n        <FontAwesomeIcon icon={icon} />\n      )}\n\n      {children}\n    </Component>\n  );\n};\n\n*/\n"],"mappings":";;AAmCA,SAAgB,EACZ,GAIF;CACE,OAAO,EAAgB,CAAS;AAKpC;AAEA,IAAa,KACT,MAEO"}

package/package.json

@@ -0,0 +1,78 @@
+{
+    "name": "@pzh-ui/react",
+    "version": "0.0.2",
+    "description": "Contains default components to use in Provincie Zuid-Holland projects.",
+    "homepage": "https://github.com/Provincie-Zuid-Holland/pzh-ui#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "files": [
+        "dist"
+    ],
+    "type": "module",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Provincie-Zuid-Holland/pzh-ui.git"
+    },
+    "scripts": {
+        "test": "vitest",
+        "chromatic": "npx chromatic --project-token=chpt_086ce80c51e31f9 --auto-accept-changes --build-script-name=build-storybook",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
+        "build": "vite build && tsc -p tsconfig.build.json"
+    },
+    "bugs": {
+        "url": "https://github.com/Provincie-Zuid-Holland/pzh-ui/issues"
+    },
+    "dependencies": {
+        "@pzh-ui/icons": "^0.0.95",
+        "clsx": "^2.1.1",
+        "react": "^19.2.7",
+        "react-dom": "^19.2.7",
+        "tailwind-merge": "^3.6.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.29.7",
+        "@babel/preset-env": "^7.29.7",
+        "@babel/preset-react": "^7.29.7",
+        "@babel/preset-typescript": "^7.29.7",
+        "@storybook/addon-docs": "^10.4.2",
+        "@storybook/react-vite": "^10.4.2",
+        "@tailwindcss/vite": "^4.3.0",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@types/babel__core": "^7",
+        "@types/babel__preset-env": "^7",
+        "@vitejs/plugin-react": "^6.0.2",
+        "babel-loader": "^10.1.1",
+        "babel-plugin-import": "^1.13.8",
+        "eslint": "^10.4.1",
+        "eslint-plugin-storybook": "^10.4.2",
+        "glob": "^13.0.6",
+        "jsdom": "^29.1.1",
+        "rollup-plugin-visualizer": "^7.0.1",
+        "storybook": "^10.4.2",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.60.1",
+        "vite": "^8.0.16",
+        "vitest": "^4.1.8"
+    },
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    },
+    "gitHead": "cefc02eca39763001719a8173f0f81747e6098ee"
+}