@evolve.ui/core-components 1.0.0

package/card/components/createInfo.cjs

@@ -0,0 +1,61 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Typography_Text = require("../../Typography/Text.cjs");
+const require_providers = require("../../providers.cjs");
+const require_Typography_Links = require("../../Typography/Links.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Card/components/createInfo.tsx
+/**
+* The sizes of the shadows used in the card.
+*
+* Pass this to the shadowSize prop of `createInfo`.
+*/
+const shadowSizes = {
+	footer: 141,
+	location: 282,
+	sellerName: 143,
+	shipping: 79
+};
+/**
+* Creates the card component that uses the given key of the `CardData` as a piece of info.
+*
+* This info might include
+* - Seller Name
+* - Location
+* - Shipping
+* - Footer
+*/
+const createInfo = ({ className = "line-clamp-2", skeletonWidth, useHref, useText }) => ({
+	Component: (props) => {
+		const info = useText(props);
+		const href = useHref?.(props);
+		const navigate = require_providers.usePreventDefaultLinkOnClick();
+		const handleClick = (0, react.useCallback)((href) => navigate(href), [navigate]);
+		if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Links.SubtleWeakLink, {
+			className,
+			href,
+			onClick: handleClick(href),
+			size: "sm",
+			children: info
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+			className,
+			color: "secondary",
+			children: info
+		});
+	},
+	skeletonConfig: {
+		height: 22,
+		type: "inline",
+		width: skeletonWidth
+	}
+});
+//#endregion
+exports.createInfo = createInfo;
+exports.shadowSizes = shadowSizes;
+
+//# sourceMappingURL=createInfo.cjs.map

package/card/components/createInfo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createInfo.cjs","names":["usePreventDefaultLinkOnClick","SubtleWeakLink","BodySecondary"],"sources":["../../../src/Card/components/createInfo.tsx"],"sourcesContent":["import { ReactNode, useCallback } from 'react';\n\nimport { usePreventDefaultLinkOnClick } from '../../providers';\nimport { SubtleWeakLink } from '../../Typography/Links/Links';\nimport { BodySecondary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\n/**\n * The sizes of the shadows used in the card.\n *\n * Pass this to the shadowSize prop of `createInfo`.\n */\nexport const shadowSizes = {\n    footer: 141,\n    location: 282,\n    sellerName: 143,\n    shipping: 79,\n} as const;\n\n/**\n * Creates the card component that uses the given key of the `CardData` as a piece of info.\n *\n * This info might include\n * - Seller Name\n * - Location\n * - Shipping\n * - Footer\n */\nexport const createInfo = <ExtraData,>({\n    className = 'line-clamp-2',\n    skeletonWidth,\n    useHref,\n    useText,\n}: {\n    /**\n     * Pass styles down including line clamping\n     *\n     * @default 'line-clamp-2'\n     */\n    className?: string;\n    /** The width of the shadow to use. See `shadowSizes` export for options. */\n    skeletonWidth?: number;\n    /** A hook that returns the href to use for the name (makes it a link) */\n    useHref?: CardHook<ExtraData, string>;\n    /** A hook that returns the text to use for the component */\n    useText: CardHook<ExtraData, ReactNode>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const info = useText(props);\n        const href = useHref?.(props);\n        const navigate = usePreventDefaultLinkOnClick();\n\n        // Memoize the click handler\n        const handleClick = useCallback((href: string) => navigate(href), [navigate]);\n\n        if (href) {\n            return (\n                <SubtleWeakLink\n                    className={className}\n                    href={href}\n                    onClick={handleClick(href)}\n                    size=\"sm\"\n                >\n                    {info}\n                </SubtleWeakLink>\n            );\n        }\n\n        return (\n            <BodySecondary\n                className={className}\n                color=\"secondary\"\n            >\n                {info}\n            </BodySecondary>\n        );\n    },\n    skeletonConfig: {\n        height: 22,\n        type: 'inline',\n        width: skeletonWidth,\n    },\n});\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAa,cAAc;CACvB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;AACd;;;;;;;;;;AAWA,MAAa,cAA0B,EACnC,YAAY,gBACZ,eACA,SACA,eAc6B;CAC7B,YAAY,UAAU;EAClB,MAAM,OAAO,QAAQ,KAAK;EAC1B,MAAM,OAAO,UAAU,KAAK;EAC5B,MAAM,WAAWA,kBAAAA,6BAA6B;EAG9C,MAAM,eAAA,GAAA,MAAA,YAAA,EAA2B,SAAiB,SAAS,IAAI,GAAG,CAAC,QAAQ,CAAC;EAE5E,IAAI,MACA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,gBAAD;GACe;GACL;GACN,SAAS,YAAY,IAAI;GACzB,MAAK;aAEJ;EACW,CAAA;EAIxB,OACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,eAAD;GACe;GACX,OAAM;aAEL;EACU,CAAA;CAEvB;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/components/createInfo.d.cts

@@ -0,0 +1,2 @@
+import { n as shadowSizes, t as createInfo } from "../../createInfo-USBqE7Tt.cjs";
+export { createInfo, shadowSizes };

package/card/components/createInfo.d.mts

@@ -0,0 +1,2 @@
+import { n as shadowSizes, t as createInfo } from "../../createInfo-C9sqGWBq.mjs";
+export { createInfo, shadowSizes };

package/card/components/createInfo.mjs

@@ -0,0 +1,56 @@
+'use client';
+import { BodySecondary } from "../../Typography/Text.mjs";
+import { usePreventDefaultLinkOnClick } from "../../providers.mjs";
+import { SubtleWeakLink } from "../../Typography/Links.mjs";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/components/createInfo.tsx
+/**
+* The sizes of the shadows used in the card.
+*
+* Pass this to the shadowSize prop of `createInfo`.
+*/
+const shadowSizes = {
+	footer: 141,
+	location: 282,
+	sellerName: 143,
+	shipping: 79
+};
+/**
+* Creates the card component that uses the given key of the `CardData` as a piece of info.
+*
+* This info might include
+* - Seller Name
+* - Location
+* - Shipping
+* - Footer
+*/
+const createInfo = ({ className = "line-clamp-2", skeletonWidth, useHref, useText }) => ({
+	Component: (props) => {
+		const info = useText(props);
+		const href = useHref?.(props);
+		const navigate = usePreventDefaultLinkOnClick();
+		const handleClick = useCallback((href) => navigate(href), [navigate]);
+		if (href) return /* @__PURE__ */ jsx(SubtleWeakLink, {
+			className,
+			href,
+			onClick: handleClick(href),
+			size: "sm",
+			children: info
+		});
+		return /* @__PURE__ */ jsx(BodySecondary, {
+			className,
+			color: "secondary",
+			children: info
+		});
+	},
+	skeletonConfig: {
+		height: 22,
+		type: "inline",
+		width: skeletonWidth
+	}
+});
+//#endregion
+export { createInfo, shadowSizes };
+
+//# sourceMappingURL=createInfo.mjs.map

package/card/components/createInfo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createInfo.mjs","names":[],"sources":["../../../src/Card/components/createInfo.tsx"],"sourcesContent":["import { ReactNode, useCallback } from 'react';\n\nimport { usePreventDefaultLinkOnClick } from '../../providers';\nimport { SubtleWeakLink } from '../../Typography/Links/Links';\nimport { BodySecondary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\n/**\n * The sizes of the shadows used in the card.\n *\n * Pass this to the shadowSize prop of `createInfo`.\n */\nexport const shadowSizes = {\n    footer: 141,\n    location: 282,\n    sellerName: 143,\n    shipping: 79,\n} as const;\n\n/**\n * Creates the card component that uses the given key of the `CardData` as a piece of info.\n *\n * This info might include\n * - Seller Name\n * - Location\n * - Shipping\n * - Footer\n */\nexport const createInfo = <ExtraData,>({\n    className = 'line-clamp-2',\n    skeletonWidth,\n    useHref,\n    useText,\n}: {\n    /**\n     * Pass styles down including line clamping\n     *\n     * @default 'line-clamp-2'\n     */\n    className?: string;\n    /** The width of the shadow to use. See `shadowSizes` export for options. */\n    skeletonWidth?: number;\n    /** A hook that returns the href to use for the name (makes it a link) */\n    useHref?: CardHook<ExtraData, string>;\n    /** A hook that returns the text to use for the component */\n    useText: CardHook<ExtraData, ReactNode>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const info = useText(props);\n        const href = useHref?.(props);\n        const navigate = usePreventDefaultLinkOnClick();\n\n        // Memoize the click handler\n        const handleClick = useCallback((href: string) => navigate(href), [navigate]);\n\n        if (href) {\n            return (\n                <SubtleWeakLink\n                    className={className}\n                    href={href}\n                    onClick={handleClick(href)}\n                    size=\"sm\"\n                >\n                    {info}\n                </SubtleWeakLink>\n            );\n        }\n\n        return (\n            <BodySecondary\n                className={className}\n                color=\"secondary\"\n            >\n                {info}\n            </BodySecondary>\n        );\n    },\n    skeletonConfig: {\n        height: 22,\n        type: 'inline',\n        width: skeletonWidth,\n    },\n});\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,cAAc;CACvB,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,UAAU;AACd;;;;;;;;;;AAWA,MAAa,cAA0B,EACnC,YAAY,gBACZ,eACA,SACA,eAc6B;CAC7B,YAAY,UAAU;EAClB,MAAM,OAAO,QAAQ,KAAK;EAC1B,MAAM,OAAO,UAAU,KAAK;EAC5B,MAAM,WAAW,6BAA6B;EAG9C,MAAM,cAAc,aAAa,SAAiB,SAAS,IAAI,GAAG,CAAC,QAAQ,CAAC;EAE5E,IAAI,MACA,OACI,oBAAC,gBAAD;GACe;GACL;GACN,SAAS,YAAY,IAAI;GACzB,MAAK;aAEJ;EACW,CAAA;EAIxB,OACI,oBAAC,eAAD;GACe;GACX,OAAM;aAEL;EACU,CAAA;CAEvB;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/components/createName.cjs

@@ -0,0 +1,43 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Typography_Text = require("../../Typography/Text.cjs");
+const require_providers = require("../../providers.cjs");
+const require_Typography_Links = require("../../Typography/Links.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Card/components/createName.tsx
+/**
+* Creates the card component with default "name" styles
+*/
+const createName = ({ className = "line-clamp-2", useHref, useText }) => ({
+	Component: (props) => {
+		const navigate = require_providers.usePreventDefaultLinkOnClick();
+		const name = useText(props);
+		const href = useHref?.(props);
+		const linkClasses = (0, react.useMemo)(() => (0, _evolve_ui_theme_system.cn)("hui-card-name peer-hover/card-image:text-link-primary peer-hover/card-image:underline", className), []);
+		if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Links.SubtleMonochromeLink, {
+			className: linkClasses,
+			href,
+			onClick: navigate(href),
+			size: "md",
+			children: name
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodySecondary, {
+			className: linkClasses,
+			children: name
+		});
+	},
+	skeletonConfig: {
+		height: 24,
+		type: "inline",
+		width: 230
+	}
+});
+//#endregion
+exports.createName = createName;
+
+//# sourceMappingURL=createName.cjs.map

package/card/components/createName.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createName.cjs","names":["usePreventDefaultLinkOnClick","SubtleMonochromeLink","BodySecondary"],"sources":["../../../src/Card/components/createName.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { usePreventDefaultLinkOnClick } from '../../providers';\nimport { SubtleMonochromeLink } from '../../Typography/Links/Links';\nimport { BodySecondary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\n/**\n * Creates the card component with default \"name\" styles\n */\nexport const createName = <ExtraData,>({\n    className = 'line-clamp-2',\n    useHref,\n    useText,\n}: {\n    /**\n     * Pass styles down including line clamping\n     *\n     * @default 'line-clamp-2'\n     */\n    className?: string;\n    /** The number of lines to wrap */\n    lineClamp?: number;\n    /** A hook that returns the href to use for the name (makes it a link) */\n    useHref?: CardHook<ExtraData, string>;\n    /** A hook that returns the text to use for the component */\n    useText: CardHook<ExtraData, ReactNode>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const navigate = usePreventDefaultLinkOnClick();\n        const name = useText(props);\n        const href = useHref?.(props);\n\n        // Memoize the full class names\n        const linkClasses = useMemo(\n            () =>\n                cn('hui-card-name peer-hover/card-image:text-link-primary peer-hover/card-image:underline', className),\n            []\n        );\n\n        if (href) {\n            return (\n                <SubtleMonochromeLink\n                    className={linkClasses}\n                    href={href}\n                    onClick={navigate(href)}\n                    size=\"md\"\n                >\n                    {name}\n                </SubtleMonochromeLink>\n            );\n        }\n\n        return <BodySecondary className={linkClasses}>{name}</BodySecondary>;\n    },\n    skeletonConfig: {\n        height: 24,\n        type: 'inline',\n        width: 230,\n    },\n});\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAa,cAA0B,EACnC,YAAY,gBACZ,SACA,eAc6B;CAC7B,YAAY,UAAU;EAClB,MAAM,WAAWA,kBAAAA,6BAA6B;EAC9C,MAAM,OAAO,QAAQ,KAAK;EAC1B,MAAM,OAAO,UAAU,KAAK;EAG5B,MAAM,eAAA,GAAA,MAAA,QAAA,QAAA,GAAA,wBAAA,GAAA,CAEK,yFAAyF,SAAS,GACzG,CAAC,CACL;EAEA,IAAI,MACA,OACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,sBAAD;GACI,WAAW;GACL;GACN,SAAS,SAAS,IAAI;GACtB,MAAK;aAEJ;EACiB,CAAA;EAI9B,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,eAAD;GAAe,WAAW;aAAc;EAAoB,CAAA;CACvE;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/components/createName.d.cts

@@ -0,0 +1,2 @@
+import { t as createName } from "../../createName-DB7BL9GP.cjs";
+export { createName };

package/card/components/createName.d.mts

@@ -0,0 +1,2 @@
+import { t as createName } from "../../createName-U7oHRNVL.mjs";
+export { createName };

package/card/components/createName.mjs

@@ -0,0 +1,39 @@
+'use client';
+import { BodySecondary } from "../../Typography/Text.mjs";
+import { usePreventDefaultLinkOnClick } from "../../providers.mjs";
+import { SubtleMonochromeLink } from "../../Typography/Links.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/components/createName.tsx
+/**
+* Creates the card component with default "name" styles
+*/
+const createName = ({ className = "line-clamp-2", useHref, useText }) => ({
+	Component: (props) => {
+		const navigate = usePreventDefaultLinkOnClick();
+		const name = useText(props);
+		const href = useHref?.(props);
+		const linkClasses = useMemo(() => cn("hui-card-name peer-hover/card-image:text-link-primary peer-hover/card-image:underline", className), []);
+		if (href) return /* @__PURE__ */ jsx(SubtleMonochromeLink, {
+			className: linkClasses,
+			href,
+			onClick: navigate(href),
+			size: "md",
+			children: name
+		});
+		return /* @__PURE__ */ jsx(BodySecondary, {
+			className: linkClasses,
+			children: name
+		});
+	},
+	skeletonConfig: {
+		height: 24,
+		type: "inline",
+		width: 230
+	}
+});
+//#endregion
+export { createName };
+
+//# sourceMappingURL=createName.mjs.map

package/card/components/createName.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createName.mjs","names":[],"sources":["../../../src/Card/components/createName.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ReactNode, useMemo } from 'react';\n\nimport { usePreventDefaultLinkOnClick } from '../../providers';\nimport { SubtleMonochromeLink } from '../../Typography/Links/Links';\nimport { BodySecondary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\n/**\n * Creates the card component with default \"name\" styles\n */\nexport const createName = <ExtraData,>({\n    className = 'line-clamp-2',\n    useHref,\n    useText,\n}: {\n    /**\n     * Pass styles down including line clamping\n     *\n     * @default 'line-clamp-2'\n     */\n    className?: string;\n    /** The number of lines to wrap */\n    lineClamp?: number;\n    /** A hook that returns the href to use for the name (makes it a link) */\n    useHref?: CardHook<ExtraData, string>;\n    /** A hook that returns the text to use for the component */\n    useText: CardHook<ExtraData, ReactNode>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const navigate = usePreventDefaultLinkOnClick();\n        const name = useText(props);\n        const href = useHref?.(props);\n\n        // Memoize the full class names\n        const linkClasses = useMemo(\n            () =>\n                cn('hui-card-name peer-hover/card-image:text-link-primary peer-hover/card-image:underline', className),\n            []\n        );\n\n        if (href) {\n            return (\n                <SubtleMonochromeLink\n                    className={linkClasses}\n                    href={href}\n                    onClick={navigate(href)}\n                    size=\"md\"\n                >\n                    {name}\n                </SubtleMonochromeLink>\n            );\n        }\n\n        return <BodySecondary className={linkClasses}>{name}</BodySecondary>;\n    },\n    skeletonConfig: {\n        height: 24,\n        type: 'inline',\n        width: 230,\n    },\n});\n"],"mappings":";;;;;;;;;;AAYA,MAAa,cAA0B,EACnC,YAAY,gBACZ,SACA,eAc6B;CAC7B,YAAY,UAAU;EAClB,MAAM,WAAW,6BAA6B;EAC9C,MAAM,OAAO,QAAQ,KAAK;EAC1B,MAAM,OAAO,UAAU,KAAK;EAG5B,MAAM,cAAc,cAEZ,GAAG,yFAAyF,SAAS,GACzG,CAAC,CACL;EAEA,IAAI,MACA,OACI,oBAAC,sBAAD;GACI,WAAW;GACL;GACN,SAAS,SAAS,IAAI;GACtB,MAAK;aAEJ;EACiB,CAAA;EAI9B,OAAO,oBAAC,eAAD;GAAe,WAAW;aAAc;EAAoB,CAAA;CACvE;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/components/createPriceStatus.cjs

@@ -0,0 +1,77 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Typography_Text = require("../../Typography/Text.cjs");
+const require_Typography_InlineButton = require("../../Typography/InlineButton.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_intl = require("react-intl");
+//#region src/Card/components/createPriceStatus.tsx
+const priceStatusSeeSoldPriceIntlKey = "hui.card.priceStatusSeeSoldPrice";
+const priceStatusPreviewOnlyIntlKey = "hui.card.priceStatusPreviewOnly";
+const priceStatusSoldIntlKey = "hui.card.priceStatusSold";
+/**
+* Creates the card component that represents price.
+*/
+const createPriceStatus = ({ useBidCount, useIsPriceStatusHidden, useIsPriceStatusPreviewOnly, useIsPriceStatusSold, useOnSeeSoldPriceClick, usePrice, useShouldPriceStatusShowBidCount }) => ({
+	Component: (props) => {
+		const price = usePrice(props);
+		const bidCount = useBidCount?.(props);
+		const { formatMessage } = (0, react_intl.useIntl)();
+		const isPriceStatusHidden = useIsPriceStatusHidden?.(props);
+		const isPriceStatusPreviewOnly = useIsPriceStatusPreviewOnly?.(props);
+		const isPriceStatusSold = useIsPriceStatusSold?.(props);
+		const onSeeSoldPriceClick = useOnSeeSoldPriceClick?.(props);
+		const shouldPriceStatusShowBidCount = useShouldPriceStatusShowBidCount?.(props);
+		const containerClasses = "flex gap-xs";
+		const textClasses = "hui-text-h5";
+		const seeSoldPriceText = (0, react.useMemo)(() => formatMessage({
+			defaultMessage: "See Sold Price",
+			id: priceStatusSeeSoldPriceIntlKey
+		}), [formatMessage]);
+		const previewOnlyText = (0, react.useMemo)(() => formatMessage({
+			defaultMessage: "Preview Only",
+			id: priceStatusPreviewOnlyIntlKey
+		}), [formatMessage]);
+		const soldForText = (0, react.useMemo)(() => formatMessage({
+			defaultMessage: "Sold for {price}",
+			id: priceStatusSoldIntlKey
+		}, { price }), [formatMessage, price]);
+		if (isPriceStatusHidden) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_InlineButton.InlineButton, {
+			onClick: () => onSeeSoldPriceClick,
+			children: seeSoldPriceText
+		});
+		if (isPriceStatusPreviewOnly) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: textClasses,
+			children: previewOnlyText
+		});
+		if (isPriceStatusSold) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: containerClasses,
+			children: soldForText
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: containerClasses,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: textClasses,
+				children: price
+			}), shouldPriceStatusShowBidCount && bidCount && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+				color: "secondary",
+				children: bidCount
+			})]
+		});
+	},
+	skeletonConfig: {
+		height: 22,
+		type: "inline",
+		width: 56
+	}
+});
+//#endregion
+exports.createPriceStatus = createPriceStatus;
+exports.priceStatusPreviewOnlyIntlKey = priceStatusPreviewOnlyIntlKey;
+exports.priceStatusSeeSoldPriceIntlKey = priceStatusSeeSoldPriceIntlKey;
+exports.priceStatusSoldIntlKey = priceStatusSoldIntlKey;
+
+//# sourceMappingURL=createPriceStatus.cjs.map

package/card/components/createPriceStatus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPriceStatus.cjs","names":["InlineButton","BodyPrimary"],"sources":["../../../src/Card/components/createPriceStatus.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { InlineButton } from '../../Typography/InlineButton/InlineButton';\nimport { BodyPrimary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\nexport const priceStatusSeeSoldPriceIntlKey = 'hui.card.priceStatusSeeSoldPrice';\nexport const priceStatusPreviewOnlyIntlKey = 'hui.card.priceStatusPreviewOnly';\nexport const priceStatusSoldIntlKey = 'hui.card.priceStatusSold';\n\n/**\n * Creates the card component that represents price.\n */\nexport const createPriceStatus = <ExtraData,>({\n    useBidCount,\n    useIsPriceStatusHidden,\n    useIsPriceStatusPreviewOnly,\n    useIsPriceStatusSold,\n    useOnSeeSoldPriceClick,\n    usePrice,\n    useShouldPriceStatusShowBidCount,\n}: {\n    /** A hook that returns the bid count to use for the component */\n    useBidCount?: CardHook<ExtraData, string>;\n    /** Returns whether the price status should be hidden. */\n    useIsPriceStatusHidden?: CardHook<ExtraData, boolean>;\n    /** Returns whether the price status should be \"Preview Only\". */\n    useIsPriceStatusPreviewOnly?: CardHook<ExtraData, boolean>;\n    /** Returns whether the price status should be \"Sold for\". */\n    useIsPriceStatusSold?: CardHook<ExtraData, boolean>;\n    /** Adds the onclick to the \"See Sold Price\" button. */\n    useOnSeeSoldPriceClick?: CardHook<ExtraData, () => void>;\n    /** A hook that returns the price to use for the component */\n    usePrice: CardHook<ExtraData, string>;\n    /** Returns whether the price status should show the bid count. */\n    useShouldPriceStatusShowBidCount?: CardHook<ExtraData, boolean>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const price = usePrice(props);\n        const bidCount = useBidCount?.(props);\n        const { formatMessage } = useIntl();\n\n        const isPriceStatusHidden = useIsPriceStatusHidden?.(props);\n        const isPriceStatusPreviewOnly = useIsPriceStatusPreviewOnly?.(props);\n        const isPriceStatusSold = useIsPriceStatusSold?.(props);\n        const onSeeSoldPriceClick = useOnSeeSoldPriceClick?.(props);\n        const shouldPriceStatusShowBidCount = useShouldPriceStatusShowBidCount?.(props);\n\n        // Memoize classes\n        const containerClasses = 'flex gap-xs';\n        const textClasses = 'hui-text-h5';\n\n        // Memoize formatMessage calls\n        const seeSoldPriceText = useMemo(\n            () => formatMessage({ defaultMessage: 'See Sold Price', id: priceStatusSeeSoldPriceIntlKey }),\n            [formatMessage]\n        );\n        const previewOnlyText = useMemo(\n            () => formatMessage({ defaultMessage: 'Preview Only', id: priceStatusPreviewOnlyIntlKey }),\n            [formatMessage]\n        );\n        const soldForText = useMemo(\n            () =>\n                formatMessage(\n                    {\n                        defaultMessage: 'Sold for {price}',\n                        id: priceStatusSoldIntlKey,\n                    },\n                    { price }\n                ),\n            [formatMessage, price]\n        );\n\n        if (isPriceStatusHidden) {\n            return <InlineButton onClick={() => onSeeSoldPriceClick}>{seeSoldPriceText}</InlineButton>;\n        }\n\n        if (isPriceStatusPreviewOnly) {\n            return <span className={textClasses}>{previewOnlyText}</span>;\n        }\n\n        if (isPriceStatusSold) {\n            return <div className={containerClasses}>{soldForText}</div>;\n        }\n\n        return (\n            <div className={containerClasses}>\n                <span className={textClasses}>{price}</span>\n                {shouldPriceStatusShowBidCount && bidCount && <BodyPrimary color=\"secondary\">{bidCount}</BodyPrimary>}\n            </div>\n        );\n    },\n    skeletonConfig: {\n        height: 22,\n        type: 'inline',\n        width: 56,\n    },\n});\n"],"mappings":";;;;;;;;;;AAQA,MAAa,iCAAiC;AAC9C,MAAa,gCAAgC;AAC7C,MAAa,yBAAyB;;;;AAKtC,MAAa,qBAAiC,EAC1C,aACA,wBACA,6BACA,sBACA,wBACA,UACA,wCAgB6B;CAC7B,YAAY,UAAU;EAClB,MAAM,QAAQ,SAAS,KAAK;EAC5B,MAAM,WAAW,cAAc,KAAK;EACpC,MAAM,EAAE,mBAAA,GAAA,WAAA,QAAA,CAA0B;EAElC,MAAM,sBAAsB,yBAAyB,KAAK;EAC1D,MAAM,2BAA2B,8BAA8B,KAAK;EACpE,MAAM,oBAAoB,uBAAuB,KAAK;EACtD,MAAM,sBAAsB,yBAAyB,KAAK;EAC1D,MAAM,gCAAgC,mCAAmC,KAAK;EAG9E,MAAM,mBAAmB;EACzB,MAAM,cAAc;EAGpB,MAAM,oBAAA,GAAA,MAAA,QAAA,OACI,cAAc;GAAE,gBAAgB;GAAkB,IAAI;EAA+B,CAAC,GAC5F,CAAC,aAAa,CAClB;EACA,MAAM,mBAAA,GAAA,MAAA,QAAA,OACI,cAAc;GAAE,gBAAgB;GAAgB,IAAI;EAA8B,CAAC,GACzF,CAAC,aAAa,CAClB;EACA,MAAM,eAAA,GAAA,MAAA,QAAA,OAEE,cACI;GACI,gBAAgB;GAChB,IAAI;EACR,GACA,EAAE,MAAM,CACZ,GACJ,CAAC,eAAe,KAAK,CACzB;EAEA,IAAI,qBACA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,gCAAAA,cAAD;GAAc,eAAe;aAAsB;EAA+B,CAAA;EAG7F,IAAI,0BACA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAW;aAAc;EAAsB,CAAA;EAGhE,IAAI,mBACA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAW;aAAmB;EAAiB,CAAA;EAG/D,OACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAW;aAAhB,CACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAW;cAAc;GAAY,CAAA,GAC1C,iCAAiC,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,aAAD;IAAa,OAAM;cAAa;GAAsB,CAAA,CACnG;;CAEb;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/components/createPriceStatus.d.cts

@@ -0,0 +1,2 @@
+import { i as priceStatusSoldIntlKey, n as priceStatusPreviewOnlyIntlKey, r as priceStatusSeeSoldPriceIntlKey, t as createPriceStatus } from "../../createPriceStatus-C-amebFt.cjs";
+export { createPriceStatus, priceStatusPreviewOnlyIntlKey, priceStatusSeeSoldPriceIntlKey, priceStatusSoldIntlKey };

package/card/components/createPriceStatus.d.mts

@@ -0,0 +1,2 @@
+import { i as priceStatusSoldIntlKey, n as priceStatusPreviewOnlyIntlKey, r as priceStatusSeeSoldPriceIntlKey, t as createPriceStatus } from "../../createPriceStatus-DBWT6ob8.mjs";
+export { createPriceStatus, priceStatusPreviewOnlyIntlKey, priceStatusSeeSoldPriceIntlKey, priceStatusSoldIntlKey };

package/card/components/createPriceStatus.mjs

@@ -0,0 +1,70 @@
+'use client';
+import { BodyPrimary } from "../../Typography/Text.mjs";
+import { InlineButton } from "../../Typography/InlineButton.mjs";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+//#region src/Card/components/createPriceStatus.tsx
+const priceStatusSeeSoldPriceIntlKey = "hui.card.priceStatusSeeSoldPrice";
+const priceStatusPreviewOnlyIntlKey = "hui.card.priceStatusPreviewOnly";
+const priceStatusSoldIntlKey = "hui.card.priceStatusSold";
+/**
+* Creates the card component that represents price.
+*/
+const createPriceStatus = ({ useBidCount, useIsPriceStatusHidden, useIsPriceStatusPreviewOnly, useIsPriceStatusSold, useOnSeeSoldPriceClick, usePrice, useShouldPriceStatusShowBidCount }) => ({
+	Component: (props) => {
+		const price = usePrice(props);
+		const bidCount = useBidCount?.(props);
+		const { formatMessage } = useIntl();
+		const isPriceStatusHidden = useIsPriceStatusHidden?.(props);
+		const isPriceStatusPreviewOnly = useIsPriceStatusPreviewOnly?.(props);
+		const isPriceStatusSold = useIsPriceStatusSold?.(props);
+		const onSeeSoldPriceClick = useOnSeeSoldPriceClick?.(props);
+		const shouldPriceStatusShowBidCount = useShouldPriceStatusShowBidCount?.(props);
+		const containerClasses = "flex gap-xs";
+		const textClasses = "hui-text-h5";
+		const seeSoldPriceText = useMemo(() => formatMessage({
+			defaultMessage: "See Sold Price",
+			id: priceStatusSeeSoldPriceIntlKey
+		}), [formatMessage]);
+		const previewOnlyText = useMemo(() => formatMessage({
+			defaultMessage: "Preview Only",
+			id: priceStatusPreviewOnlyIntlKey
+		}), [formatMessage]);
+		const soldForText = useMemo(() => formatMessage({
+			defaultMessage: "Sold for {price}",
+			id: priceStatusSoldIntlKey
+		}, { price }), [formatMessage, price]);
+		if (isPriceStatusHidden) return /* @__PURE__ */ jsx(InlineButton, {
+			onClick: () => onSeeSoldPriceClick,
+			children: seeSoldPriceText
+		});
+		if (isPriceStatusPreviewOnly) return /* @__PURE__ */ jsx("span", {
+			className: textClasses,
+			children: previewOnlyText
+		});
+		if (isPriceStatusSold) return /* @__PURE__ */ jsx("div", {
+			className: containerClasses,
+			children: soldForText
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: containerClasses,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: textClasses,
+				children: price
+			}), shouldPriceStatusShowBidCount && bidCount && /* @__PURE__ */ jsx(BodyPrimary, {
+				color: "secondary",
+				children: bidCount
+			})]
+		});
+	},
+	skeletonConfig: {
+		height: 22,
+		type: "inline",
+		width: 56
+	}
+});
+//#endregion
+export { createPriceStatus, priceStatusPreviewOnlyIntlKey, priceStatusSeeSoldPriceIntlKey, priceStatusSoldIntlKey };
+
+//# sourceMappingURL=createPriceStatus.mjs.map

package/card/components/createPriceStatus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createPriceStatus.mjs","names":[],"sources":["../../../src/Card/components/createPriceStatus.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { InlineButton } from '../../Typography/InlineButton/InlineButton';\nimport { BodyPrimary } from '../../Typography/Text/Text';\nimport { CardComponent } from '../types';\nimport { CardHook } from './types';\n\nexport const priceStatusSeeSoldPriceIntlKey = 'hui.card.priceStatusSeeSoldPrice';\nexport const priceStatusPreviewOnlyIntlKey = 'hui.card.priceStatusPreviewOnly';\nexport const priceStatusSoldIntlKey = 'hui.card.priceStatusSold';\n\n/**\n * Creates the card component that represents price.\n */\nexport const createPriceStatus = <ExtraData,>({\n    useBidCount,\n    useIsPriceStatusHidden,\n    useIsPriceStatusPreviewOnly,\n    useIsPriceStatusSold,\n    useOnSeeSoldPriceClick,\n    usePrice,\n    useShouldPriceStatusShowBidCount,\n}: {\n    /** A hook that returns the bid count to use for the component */\n    useBidCount?: CardHook<ExtraData, string>;\n    /** Returns whether the price status should be hidden. */\n    useIsPriceStatusHidden?: CardHook<ExtraData, boolean>;\n    /** Returns whether the price status should be \"Preview Only\". */\n    useIsPriceStatusPreviewOnly?: CardHook<ExtraData, boolean>;\n    /** Returns whether the price status should be \"Sold for\". */\n    useIsPriceStatusSold?: CardHook<ExtraData, boolean>;\n    /** Adds the onclick to the \"See Sold Price\" button. */\n    useOnSeeSoldPriceClick?: CardHook<ExtraData, () => void>;\n    /** A hook that returns the price to use for the component */\n    usePrice: CardHook<ExtraData, string>;\n    /** Returns whether the price status should show the bid count. */\n    useShouldPriceStatusShowBidCount?: CardHook<ExtraData, boolean>;\n}): CardComponent<ExtraData> => ({\n    Component: (props) => {\n        const price = usePrice(props);\n        const bidCount = useBidCount?.(props);\n        const { formatMessage } = useIntl();\n\n        const isPriceStatusHidden = useIsPriceStatusHidden?.(props);\n        const isPriceStatusPreviewOnly = useIsPriceStatusPreviewOnly?.(props);\n        const isPriceStatusSold = useIsPriceStatusSold?.(props);\n        const onSeeSoldPriceClick = useOnSeeSoldPriceClick?.(props);\n        const shouldPriceStatusShowBidCount = useShouldPriceStatusShowBidCount?.(props);\n\n        // Memoize classes\n        const containerClasses = 'flex gap-xs';\n        const textClasses = 'hui-text-h5';\n\n        // Memoize formatMessage calls\n        const seeSoldPriceText = useMemo(\n            () => formatMessage({ defaultMessage: 'See Sold Price', id: priceStatusSeeSoldPriceIntlKey }),\n            [formatMessage]\n        );\n        const previewOnlyText = useMemo(\n            () => formatMessage({ defaultMessage: 'Preview Only', id: priceStatusPreviewOnlyIntlKey }),\n            [formatMessage]\n        );\n        const soldForText = useMemo(\n            () =>\n                formatMessage(\n                    {\n                        defaultMessage: 'Sold for {price}',\n                        id: priceStatusSoldIntlKey,\n                    },\n                    { price }\n                ),\n            [formatMessage, price]\n        );\n\n        if (isPriceStatusHidden) {\n            return <InlineButton onClick={() => onSeeSoldPriceClick}>{seeSoldPriceText}</InlineButton>;\n        }\n\n        if (isPriceStatusPreviewOnly) {\n            return <span className={textClasses}>{previewOnlyText}</span>;\n        }\n\n        if (isPriceStatusSold) {\n            return <div className={containerClasses}>{soldForText}</div>;\n        }\n\n        return (\n            <div className={containerClasses}>\n                <span className={textClasses}>{price}</span>\n                {shouldPriceStatusShowBidCount && bidCount && <BodyPrimary color=\"secondary\">{bidCount}</BodyPrimary>}\n            </div>\n        );\n    },\n    skeletonConfig: {\n        height: 22,\n        type: 'inline',\n        width: 56,\n    },\n});\n"],"mappings":";;;;;;AAQA,MAAa,iCAAiC;AAC9C,MAAa,gCAAgC;AAC7C,MAAa,yBAAyB;;;;AAKtC,MAAa,qBAAiC,EAC1C,aACA,wBACA,6BACA,sBACA,wBACA,UACA,wCAgB6B;CAC7B,YAAY,UAAU;EAClB,MAAM,QAAQ,SAAS,KAAK;EAC5B,MAAM,WAAW,cAAc,KAAK;EACpC,MAAM,EAAE,kBAAkB,QAAQ;EAElC,MAAM,sBAAsB,yBAAyB,KAAK;EAC1D,MAAM,2BAA2B,8BAA8B,KAAK;EACpE,MAAM,oBAAoB,uBAAuB,KAAK;EACtD,MAAM,sBAAsB,yBAAyB,KAAK;EAC1D,MAAM,gCAAgC,mCAAmC,KAAK;EAG9E,MAAM,mBAAmB;EACzB,MAAM,cAAc;EAGpB,MAAM,mBAAmB,cACf,cAAc;GAAE,gBAAgB;GAAkB,IAAI;EAA+B,CAAC,GAC5F,CAAC,aAAa,CAClB;EACA,MAAM,kBAAkB,cACd,cAAc;GAAE,gBAAgB;GAAgB,IAAI;EAA8B,CAAC,GACzF,CAAC,aAAa,CAClB;EACA,MAAM,cAAc,cAEZ,cACI;GACI,gBAAgB;GAChB,IAAI;EACR,GACA,EAAE,MAAM,CACZ,GACJ,CAAC,eAAe,KAAK,CACzB;EAEA,IAAI,qBACA,OAAO,oBAAC,cAAD;GAAc,eAAe;aAAsB;EAA+B,CAAA;EAG7F,IAAI,0BACA,OAAO,oBAAC,QAAD;GAAM,WAAW;aAAc;EAAsB,CAAA;EAGhE,IAAI,mBACA,OAAO,oBAAC,OAAD;GAAK,WAAW;aAAmB;EAAiB,CAAA;EAG/D,OACI,qBAAC,OAAD;GAAK,WAAW;aAAhB,CACI,oBAAC,QAAD;IAAM,WAAW;cAAc;GAAY,CAAA,GAC1C,iCAAiC,YAAY,oBAAC,aAAD;IAAa,OAAM;cAAa;GAAsB,CAAA,CACnG;;CAEb;CACA,gBAAgB;EACZ,QAAQ;EACR,MAAM;EACN,OAAO;CACX;AACJ"}

package/card/factory.cjs

@@ -0,0 +1,7 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_cardFactory = require("../cardFactory-DTU3jY-R.cjs");
+exports.cardFactory = require_cardFactory.cardFactory;

package/card/factory.d.cts

@@ -0,0 +1,3 @@
+import { n as CardSpec, t as CardComponent } from "../types-wcNSa96H.cjs";
+import { n as cardFactory, t as CreatedCard } from "../cardFactory-CEKTSSXs.cjs";
+export { type CardComponent, type CardSpec, CreatedCard, cardFactory };

package/card/factory.d.mts

@@ -0,0 +1,3 @@
+import { n as CardSpec, t as CardComponent } from "../types-wcNSa96H.mjs";
+import { n as cardFactory, t as CreatedCard } from "../cardFactory-Z5a675Nr.mjs";
+export { type CardComponent, type CardSpec, CreatedCard, cardFactory };

package/card/factory.mjs

@@ -0,0 +1,3 @@
+'use client';
+import { t as cardFactory } from "../cardFactory-B0Ah0Qb8.mjs";
+export { cardFactory };

package/card/singleCard.cjs

@@ -0,0 +1,18 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Card/SingleCard.tsx
+const SingleCard = ({ card: Card, className, data, forceSkeleton }) => {
+	if (forceSkeleton) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Card.Skeleton, { className });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Card.Normal, {
+		cardData: data,
+		className
+	});
+};
+//#endregion
+exports.SingleCard = SingleCard;
+
+//# sourceMappingURL=singleCard.cjs.map

package/card/singleCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"singleCard.cjs","names":[],"sources":["../../src/Card/SingleCard.tsx"],"sourcesContent":["import { SharedProps } from './sharedProps';\n\ntype Props<CardData> = {\n    className?: string;\n    /**\n     * The data to pass to the card component.\n     */\n    data: CardData;\n} & SharedProps<CardData>;\n\nexport const SingleCard = <CardData,>({ card: Card, className, data, forceSkeleton }: Props<CardData>) => {\n    if (forceSkeleton) {\n        return <Card.Skeleton className={className} />;\n    }\n\n    return (\n        <Card.Normal\n            cardData={data}\n            className={className}\n        />\n    );\n};\n"],"mappings":";;;;;;AAUA,MAAa,cAAyB,EAAE,MAAM,MAAM,WAAW,MAAM,oBAAqC;CACtG,IAAI,eACA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAK,UAAN,EAA0B,UAAY,CAAA;CAGjD,OACI,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAK,QAAN;EACI,UAAU;EACC;CACd,CAAA;AAET"}

package/card/singleCard.d.cts

@@ -0,0 +1,2 @@
+import { t as SingleCard } from "../SingleCard-X1dP0AHZ.cjs";
+export { SingleCard };

package/card/singleCard.d.mts

@@ -0,0 +1,2 @@
+import { t as SingleCard } from "../SingleCard-DPaHU2wR.mjs";
+export { SingleCard };

package/card/singleCard.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/SingleCard.tsx
+const SingleCard = ({ card: Card, className, data, forceSkeleton }) => {
+	if (forceSkeleton) return /* @__PURE__ */ jsx(Card.Skeleton, { className });
+	return /* @__PURE__ */ jsx(Card.Normal, {
+		cardData: data,
+		className
+	});
+};
+//#endregion
+export { SingleCard };
+
+//# sourceMappingURL=singleCard.mjs.map

package/card/singleCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"singleCard.mjs","names":[],"sources":["../../src/Card/SingleCard.tsx"],"sourcesContent":["import { SharedProps } from './sharedProps';\n\ntype Props<CardData> = {\n    className?: string;\n    /**\n     * The data to pass to the card component.\n     */\n    data: CardData;\n} & SharedProps<CardData>;\n\nexport const SingleCard = <CardData,>({ card: Card, className, data, forceSkeleton }: Props<CardData>) => {\n    if (forceSkeleton) {\n        return <Card.Skeleton className={className} />;\n    }\n\n    return (\n        <Card.Normal\n            cardData={data}\n            className={className}\n        />\n    );\n};\n"],"mappings":";;AAUA,MAAa,cAAyB,EAAE,MAAM,MAAM,WAAW,MAAM,oBAAqC;CACtG,IAAI,eACA,OAAO,oBAAC,KAAK,UAAN,EAA0B,UAAY,CAAA;CAGjD,OACI,oBAAC,KAAK,QAAN;EACI,UAAU;EACC;CACd,CAAA;AAET"}

package/cardFactory-B0Ah0Qb8.mjs

@@ -0,0 +1,102 @@
+import { Skeleton } from "./skeleton.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { createElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/types.ts
+const isSpacer = (component) => component.spacerPx > 0;
+//#endregion
+//#region src/Card/cardFactory.tsx
+/**
+* This function takes a `CardSpec` and returns a React component.
+*
+* This function should be called _once_ for each card spec.
+* You can export the result of this function and use it in your app later.
+*/
+const cardFactory = (cardSpec) => {
+	const { components: oldComponents, name } = cardSpec;
+	if (!oldComponents.length) throw new Error("Card must have at least one component");
+	let componentCount = 0;
+	const components = [];
+	const spacing = new Array(oldComponents.length).fill(0);
+	let currentSkeletonOffset = 0;
+	const skeletonComponents = [];
+	for (const componentOrSpace of oldComponents) {
+		if (isSpacer(componentOrSpace)) {
+			if (componentCount === 0) throw new Error("Card cannot start with a spacer");
+			currentSkeletonOffset += componentOrSpace.spacerPx;
+			spacing[componentCount] += componentOrSpace.spacerPx;
+			continue;
+		}
+		const component = componentOrSpace;
+		components.push(component);
+		if (component.skeletonConfig) {
+			const skeletonConfig = component.skeletonConfig;
+			if (skeletonConfig.type === "inline" && skeletonConfig.width && skeletonConfig.height) {
+				skeletonComponents.push(/* @__PURE__ */ jsx("rect", {
+					height: skeletonConfig.height,
+					rx: skeletonConfig.rx ?? 4,
+					ry: skeletonConfig.ry ?? 4,
+					width: skeletonConfig.width,
+					x: "0",
+					y: currentSkeletonOffset
+				}, componentCount));
+				currentSkeletonOffset += skeletonConfig.height;
+			} else if (skeletonConfig.type === "absolute") skeletonComponents.push(skeletonConfig.node);
+		}
+		componentCount++;
+	}
+	const Normal = ({ cardData, className, onCardClick, visibilityRef }) => {
+		return /* @__PURE__ */ jsx(CardContainer, {
+			className: cn("group", cardSpec.className, className),
+			id: cardData?.id ?? void 0,
+			onClick: onCardClick ? () => onCardClick(cardData) : void 0,
+			spacing,
+			visibilityRef,
+			children: components.map((component, index) => /* @__PURE__ */ createElement(component.Component, {
+				...cardData,
+				key: index
+			}))
+		});
+	};
+	Normal.displayName = name;
+	const CardSkeleton = ({ className }) => {
+		return /* @__PURE__ */ jsx(CardContainer, {
+			className: cn(cardSpec.className, className),
+			isSkeleton: true,
+			spacing,
+			children: /* @__PURE__ */ jsx(Skeleton, {
+				viewBox: `0 0 282 ${cardSpec.overrideSkeletonHeightPx ?? currentSkeletonOffset}`,
+				children: skeletonComponents
+			})
+		});
+	};
+	CardSkeleton.displayName = name + "Skeleton";
+	return {
+		Normal,
+		Skeleton: CardSkeleton
+	};
+};
+const CardContainer = ({ children, className, isSkeleton, onClick, spacing, visibilityRef, ...props }) => {
+	const { styles } = useMemo(() => {
+		const styles = {};
+		spacing.forEach((space, i) => {
+			if (space !== 0) {
+				const key = `--card-spacing-${i}`;
+				styles[key] = `${space}px`;
+			}
+		});
+		return { styles };
+	}, [spacing]);
+	return /* @__PURE__ */ jsx(isSkeleton ? "div" : "article", {
+		className: cn("hui-item-card relative flex w-full flex-col", className),
+		onClick,
+		ref: visibilityRef,
+		style: styles,
+		...props,
+		children
+	});
+};
+//#endregion
+export { cardFactory as t };
+
+//# sourceMappingURL=cardFactory-B0Ah0Qb8.mjs.map