@vtex/faststore 0.0.1

package/dist/matter/product-information/product-information.js

@@ -0,0 +1,355 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/matter/product-information/product-information.tsx
+const fragment = graphql(`
+  fragment ProductInformationData on Query {
+    productBySlug(slug: $slug) {
+      __typename
+      id
+      title
+      description
+      descriptionHtml
+      referenceId
+      vendor
+      brand {
+        __typename
+        id
+        name
+      }
+      variants(first: 1) {
+        edges {
+          node {
+            __typename
+            id
+            sku
+            name
+          }
+        }
+      }
+      seo {
+        title
+      }
+    }
+  }
+`);
+const PRODUCT_INFORMATION_CONTEXT_UNSET = Symbol("ProductInformationContextUnset");
+const ProductInformationContext = createContext(PRODUCT_INFORMATION_CONTEXT_UNSET);
+function useProductInformation() {
+	const ctx = useContext(ProductInformationContext);
+	if (ctx === PRODUCT_INFORMATION_CONTEXT_UNSET) throw new Error("ProductInformation components must be used inside ProductInformationRoot.");
+	return ctx;
+}
+function transformProductInformationData(data) {
+	const brand = data.brand?.name ?? data.vendor ?? null;
+	const firstVariant = data.variants.edges[0]?.node ?? null;
+	const sku = firstVariant?.sku ?? null;
+	const variantName = firstVariant?.name ?? null;
+	const seoTitle = data.seo?.title ?? null;
+	return {
+		title: data.title,
+		description: data.description,
+		descriptionHtml: data.descriptionHtml,
+		referenceId: data.referenceId,
+		brand,
+		sku,
+		variantName,
+		seoTitle
+	};
+}
+const ProductInformationRootDefinition = defineComponent({
+	name: "ProductInformationRoot",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	editor: {
+		label: "Product Information",
+		category: "commerce"
+	},
+	schema: {},
+	providesContext: "product-information",
+	guideline: "Root container for PDP product text — wraps ProductInformationTitle, ProductInformationDescription, ProductInformationBrand, ProductInformationSku, and ProductInformationReferenceId (any subset, any order). See product-information.md."
+});
+const ProductInformationTitleDefinition = defineComponent({
+	name: "ProductInformationTitle",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationTitle,
+	editor: {
+		label: "Product Title",
+		category: "commerce"
+	},
+	schema: {
+		as: {
+			type: [
+				"h1",
+				"h2",
+				"h3",
+				"h4",
+				"h5",
+				"h6"
+			],
+			default: "h1",
+			label: "Element tag"
+		},
+		separator: {
+			type: "string",
+			label: "Variant separator"
+		}
+	},
+	requiresContext: "product-information",
+	guideline: "Renders the product title inside a ProductInformationRoot (or any ancestor providing `product-information` context); `as` controls the heading level (`h1`–`h6`, default `h1`) and `separator` optionally appends the selected variant name."
+});
+const ProductInformationDescriptionDefinition = defineComponent({
+	name: "ProductInformationDescription",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationDescription,
+	editor: {
+		label: "Product Description",
+		category: "commerce"
+	},
+	schema: {
+		format: {
+			type: [
+				"auto",
+				"plain",
+				"html"
+			],
+			default: "auto",
+			label: "Description format"
+		},
+		collapse: {
+			type: [
+				"none",
+				"showMore",
+				"section"
+			],
+			default: "none",
+			label: "Collapse pattern"
+		},
+		defaultExpanded: {
+			type: "boolean",
+			default: true,
+			label: "Expanded by default"
+		},
+		collapsedLines: {
+			type: "number",
+			default: 4,
+			label: "Collapsed line count"
+		},
+		moreLabel: {
+			type: "string",
+			default: "Show more",
+			label: "Trigger label (collapsed)"
+		},
+		lessLabel: {
+			type: "string",
+			default: "Show less",
+			label: "Trigger label (expanded)"
+		}
+	},
+	requiresContext: "product-information",
+	guideline: "Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure)."
+});
+const ProductInformationBrandDefinition = defineComponent({
+	name: "ProductInformationBrand",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationBrand,
+	editor: {
+		label: "Product Brand",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "product-information",
+	guideline: "Renders the product brand name inside a ProductInformationRoot (or any ancestor providing `product-information` context); prefers `brand.name` and falls back to `vendor`."
+});
+const ProductInformationSkuDefinition = defineComponent({
+	name: "ProductInformationSku",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationSku,
+	editor: {
+		label: "Product SKU",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "product-information",
+	guideline: "Renders the first-variant SKU code inside a ProductInformationRoot (or any ancestor providing `product-information` context)."
+});
+const ProductInformationReferenceIdDefinition = defineComponent({
+	name: "ProductInformationReferenceId",
+	importPath: "@vtex/faststore/components",
+	component: ProductInformationReferenceId,
+	editor: {
+		label: "Product Reference ID",
+		category: "commerce"
+	},
+	schema: {},
+	requiresContext: "product-information",
+	guideline: "Renders the merchant reference ID inside a ProductInformationRoot (or any ancestor providing `product-information` context)."
+});
+function ProductInformationRoot({ $data: $dataProp, className, children, ...props }) {
+	const $data = useDataOverride($dataProp);
+	const contextValue = $data ? transformProductInformationData($data) : null;
+	return /* @__PURE__ */ jsx(ProductInformationContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-product-information": "",
+			children
+		})
+	});
+}
+function ProductInformationTitle({ as = "h1", separator, className, ...props }) {
+	const ctx = useProductInformation();
+	const variantName = ctx?.variantName ?? null;
+	const warnedRef = useRef(false);
+	const nullVariantSeenRef = useRef(false);
+	useEffect(() => {
+		if (process.env.NODE_ENV !== "production") return;
+		if (separator === void 0 || !ctx) return;
+		if (variantName === null) {
+			if (nullVariantSeenRef.current && !warnedRef.current) {
+				warnedRef.current = true;
+				console.warn("[ProductInformationTitle] `separator` is set but the selected variant has no `name`; the title will render the product name alone. Ensure the SKU Selector wires Variant.name into the cache, or omit `separator` to silence this warning.");
+			}
+			nullVariantSeenRef.current = true;
+			return;
+		}
+		nullVariantSeenRef.current = false;
+	});
+	if (!ctx) return null;
+	const composed = separator !== void 0 && variantName ? `${ctx.title}${separator}${variantName}` : ctx.title;
+	return /* @__PURE__ */ jsx(as, {
+		...props,
+		className,
+		"data-fs-product-information-title": "",
+		"data-fs-product-information-title-as": as,
+		children: composed
+	});
+}
+function ProductInformationDescription({ format = "auto", collapse = "none", defaultExpanded = true, collapsedLines = 4, moreLabel = "Show more", lessLabel = "Show less", className, ...props }) {
+	const ctx = useProductInformation();
+	if (!ctx) return null;
+	const wantsRich = format === "auto" || format === "html";
+	const wantsPlain = format === "auto" || format === "plain";
+	const htmlPayload = wantsRich ? ctx.descriptionHtml : null;
+	const plain = wantsPlain ? ctx.description : null;
+	if (!htmlPayload && !plain) return null;
+	const htmlProps = htmlPayload ? { dangerouslySetInnerHTML: { __html: htmlPayload } } : void 0;
+	const panelChildren = htmlPayload ? void 0 : plain;
+	if (collapse === "none") {
+		if (htmlPayload) return /* @__PURE__ */ jsx("div", {
+			...props,
+			...htmlProps,
+			className,
+			"data-fs-product-information-description": "",
+			"data-fs-product-information-description-collapse": "none",
+			"data-fs-text": ""
+		});
+		return /* @__PURE__ */ jsx("p", {
+			...props,
+			className,
+			"data-fs-product-information-description": "",
+			"data-fs-product-information-description-collapse": "none",
+			"data-fs-text": "",
+			children: plain
+		});
+	}
+	return /* @__PURE__ */ jsx(DescriptionCollapsible, {
+		...props,
+		className,
+		collapse,
+		defaultExpanded,
+		collapsedLines,
+		moreLabel,
+		lessLabel,
+		htmlProps,
+		panelChildren
+	});
+}
+function DescriptionCollapsible({ collapse, defaultExpanded, collapsedLines, moreLabel, lessLabel, className, htmlProps, panelChildren, ...props }) {
+	const [open, setOpen] = useState(defaultExpanded);
+	const panelId = useId();
+	const clampStyle = collapse === "showMore" && !open ? {
+		display: "-webkit-box",
+		WebkitBoxOrient: "vertical",
+		WebkitLineClamp: Math.max(1, Math.floor(collapsedLines)),
+		overflow: "hidden"
+	} : void 0;
+	const triggerLabel = open ? lessLabel : moreLabel;
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		...props,
+		className,
+		open,
+		onOpenChange: setOpen,
+		"data-fs-product-information-description": "",
+		"data-fs-product-information-description-collapse": collapse,
+		children: [collapse === "section" ? /* @__PURE__ */ jsx(Collapsible.Panel, {
+			...htmlProps,
+			hiddenUntilFound: true,
+			keepMounted: true,
+			"data-fs-product-information-description-panel": "",
+			"data-fs-text": "",
+			children: panelChildren
+		}) : /* @__PURE__ */ jsx("div", {
+			...htmlProps,
+			id: panelId,
+			"data-fs-product-information-description-panel": "",
+			"data-fs-text": "",
+			style: clampStyle,
+			children: panelChildren
+		}), /* @__PURE__ */ jsx(Collapsible.Trigger, {
+			...collapse === "section" ? null : { "aria-controls": panelId },
+			"data-fs-product-information-description-trigger": "",
+			children: triggerLabel
+		})]
+	});
+}
+function ProductInformationBrand({ className, ...props }) {
+	const ctx = useProductInformation();
+	if (!ctx || !ctx.brand) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-product-information-brand": "",
+		children: ctx.brand
+	});
+}
+function ProductInformationSku({ className, ...props }) {
+	const ctx = useProductInformation();
+	if (!ctx || !ctx.sku) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-product-information-sku": "",
+		children: ctx.sku
+	});
+}
+function ProductInformationReferenceId({ className, ...props }) {
+	const ctx = useProductInformation();
+	if (!ctx || !ctx.referenceId) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-product-information-reference-id": "",
+		children: ctx.referenceId
+	});
+}
+const ProductInformation = {
+	Root: ProductInformationRoot,
+	Title: ProductInformationTitle,
+	Description: ProductInformationDescription,
+	Brand: ProductInformationBrand,
+	Sku: ProductInformationSku,
+	ReferenceId: ProductInformationReferenceId
+};
+//#endregion
+export { ProductInformation, ProductInformationBrand, ProductInformationBrandDefinition, ProductInformationDescription, ProductInformationDescriptionDefinition, ProductInformationReferenceId, ProductInformationReferenceIdDefinition, ProductInformationRoot, ProductInformationRootDefinition, ProductInformationSku, ProductInformationSkuDefinition, ProductInformationTitle, ProductInformationTitleDefinition };
+
+//# sourceMappingURL=product-information.js.map

package/dist/matter/product-information/product-information.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-information.js","names":["Component"],"sources":["../../../src/matter/product-information/product-information.tsx"],"sourcesContent":["'use client';\n\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties } from 'react';\nimport { createContext, useContext, useEffect, useId, useRef, useState } from 'react';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { ProductInformationDataFragment } from '../../sdk/generated/graphql.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — typed via @graphql-codegen client-preset\n// ---------------------------------------------------------------------------\n\nconst fragment = graphql(`\n  fragment ProductInformationData on Query {\n    productBySlug(slug: $slug) {\n      __typename\n      id\n      title\n      description\n      descriptionHtml\n      referenceId\n      vendor\n      brand {\n        __typename\n        id\n        name\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            __typename\n            id\n            sku\n            name\n          }\n        }\n      }\n      seo {\n        title\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype ProductSlice = NonNullable<ProductInformationDataFragment['productBySlug']>;\n\ntype ProductInformationContextData = {\n  title: string;\n  description: string | null;\n  descriptionHtml: string | null;\n  referenceId: string | null;\n  brand: string | null;\n  sku: string | null;\n  variantName: string | null;\n  seoTitle: string | null;\n};\n\ntype ProductInformationContextValue = ProductInformationContextData | null;\n\nconst PRODUCT_INFORMATION_CONTEXT_UNSET = Symbol('ProductInformationContextUnset');\n\ntype TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport type DescriptionFormat = 'auto' | 'plain' | 'html';\n\ntype Collapse = 'none' | 'showMore' | 'section';\n\nexport type ProductInformationRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: ProductSlice | null;\n};\n\nexport type ProductInformationTitleProps = Omit<ComponentPropsWithRef<'h1'>, 'children'> & {\n  as?: TitleAs;\n  separator?: string;\n};\n\n// `ComponentPropsWithoutRef` (not `WithRef`) because the wrapper element varies between `<p>`\n// and `<div>` depending on the resolved `format` branch. Exposing a `ref` typed for one element\n// would be unsound when the other branch resolves — the runtime element type and the\n// type-system promise would diverge silently. Refs are intentionally not part of the contract.\nexport type ProductInformationDescriptionProps = Omit<\n  ComponentPropsWithoutRef<'div'>,\n  'children' | 'dangerouslySetInnerHTML'\n> & {\n  /**\n   * Controls how the description renders.\n   * - `'auto'` (default) — prefers `descriptionHtml`; falls back to plain `description`; renders nothing when both are absent.\n   * - `'plain'` — strict plain text from `description`; never reads `descriptionHtml`.\n   * - `'html'` — strict rich HTML from `descriptionHtml` via `dangerouslySetInnerHTML`; renders nothing when absent (no fallback).\n   *\n   * Rich HTML is safe because Storefront API Core sanitizes `descriptionHtml` upstream.\n   *\n   * The rendered element follows from the resolved branch: plain text renders as `<p>`;\n   * rich HTML renders as `<div>` (so block-level markup inside `descriptionHtml` remains valid DOM).\n   * Both wrappers carry `data-fs-text=\"\"` so project-level `Text` typography cascades automatically.\n   */\n  format?: DescriptionFormat;\n  collapse?: Collapse;\n  defaultExpanded?: boolean;\n  collapsedLines?: number;\n  moreLabel?: string;\n  lessLabel?: string;\n};\n\nexport type ProductInformationBrandProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationSkuProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport type ProductInformationReferenceIdProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductInformationContext = createContext<\n  ProductInformationContextValue | typeof PRODUCT_INFORMATION_CONTEXT_UNSET\n>(PRODUCT_INFORMATION_CONTEXT_UNSET);\n\nfunction useProductInformation(): ProductInformationContextValue {\n  const ctx = useContext(ProductInformationContext);\n  if (ctx === PRODUCT_INFORMATION_CONTEXT_UNSET) {\n    throw new Error('ProductInformation components must be used inside ProductInformationRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\nfunction transformProductInformationData(data: ProductSlice): ProductInformationContextData {\n  const brand = data.brand?.name ?? data.vendor ?? null;\n  const firstVariant = data.variants.edges[0]?.node ?? null;\n  const sku = firstVariant?.sku ?? null;\n  const variantName = firstVariant?.name ?? null;\n  const seoTitle = data.seo?.title ?? null;\n\n  return {\n    title: data.title,\n    description: data.description,\n    descriptionHtml: data.descriptionHtml,\n    referenceId: data.referenceId,\n    brand,\n    sku,\n    variantName,\n    seoTitle,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductInformationRootDefinition = defineComponent<ProductInformationRootProps>({\n  name: 'ProductInformationRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Product Information', category: 'commerce' },\n  schema: {},\n  providesContext: 'product-information',\n  guideline:\n    'Root container for PDP product text — wraps ProductInformationTitle, ProductInformationDescription, ProductInformationBrand, ProductInformationSku, and ProductInformationReferenceId (any subset, any order). See product-information.md.',\n});\n\nexport const ProductInformationTitleDefinition = defineComponent<ProductInformationTitleProps>({\n  name: 'ProductInformationTitle',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationTitle,\n  editor: { label: 'Product Title', category: 'commerce' },\n  schema: {\n    as: {\n      type: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const,\n      default: 'h1',\n      label: 'Element tag',\n    },\n    separator: { type: 'string', label: 'Variant separator' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product title inside a ProductInformationRoot (or any ancestor providing `product-information` context); `as` controls the heading level (`h1`–`h6`, default `h1`) and `separator` optionally appends the selected variant name.',\n});\n\nexport const ProductInformationDescriptionDefinition = defineComponent<ProductInformationDescriptionProps>({\n  name: 'ProductInformationDescription',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationDescription,\n  editor: { label: 'Product Description', category: 'commerce' },\n  schema: {\n    format: {\n      type: ['auto', 'plain', 'html'] as const,\n      default: 'auto',\n      label: 'Description format',\n    },\n    collapse: {\n      type: ['none', 'showMore', 'section'] as const,\n      default: 'none',\n      label: 'Collapse pattern',\n    },\n    defaultExpanded: { type: 'boolean', default: true, label: 'Expanded by default' },\n    collapsedLines: { type: 'number', default: 4, label: 'Collapsed line count' },\n    moreLabel: { type: 'string', default: 'Show more', label: 'Trigger label (collapsed)' },\n    lessLabel: { type: 'string', default: 'Show less', label: 'Trigger label (expanded)' },\n  },\n  requiresContext: 'product-information',\n  guideline:\n    \"Renders the product description inside a ProductInformationRoot (or any ancestor providing `product-information` context); `format` selects the source (`'auto'` default prefers HTML, `'plain'` forces plain text, `'html'` forces HTML only); `collapse` selects the reveal pattern (`'none'` default, `'showMore'` inline line-clamp via `collapsedLines` with `moreLabel`/`lessLabel`, `'section'` Base UI Collapsible disclosure).\",\n});\n\nexport const ProductInformationBrandDefinition = defineComponent<ProductInformationBrandProps>({\n  name: 'ProductInformationBrand',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationBrand,\n  editor: { label: 'Product Brand', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the product brand name inside a ProductInformationRoot (or any ancestor providing `product-information` context); prefers `brand.name` and falls back to `vendor`.',\n});\n\nexport const ProductInformationSkuDefinition = defineComponent<ProductInformationSkuProps>({\n  name: 'ProductInformationSku',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationSku,\n  editor: { label: 'Product SKU', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the first-variant SKU code inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\nexport const ProductInformationReferenceIdDefinition = defineComponent<ProductInformationReferenceIdProps>({\n  name: 'ProductInformationReferenceId',\n  importPath: '@vtex/faststore/components',\n  component: ProductInformationReferenceId,\n  editor: { label: 'Product Reference ID', category: 'commerce' },\n  schema: {},\n  requiresContext: 'product-information',\n  guideline:\n    'Renders the merchant reference ID inside a ProductInformationRoot (or any ancestor providing `product-information` context).',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function ProductInformationRoot({\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductInformationRootProps) {\n  const $data = useDataOverride($dataProp);\n  const contextValue = $data ? transformProductInformationData($data) : null;\n\n  return (\n    <ProductInformationContext value={contextValue}>\n      <div {...props} className={className} data-fs-product-information=\"\">\n        {children}\n      </div>\n    </ProductInformationContext>\n  );\n}\n\nexport function ProductInformationTitle({ as = 'h1', separator, className, ...props }: ProductInformationTitleProps) {\n  const ctx = useProductInformation();\n  const variantName = ctx?.variantName ?? null;\n  const warnedRef = useRef(false);\n  const nullVariantSeenRef = useRef(false);\n\n  // NFR-3: warn once in production when `separator` is set but `variantName` stays null across\n  // commits (the SKU Selector gets one commit to hydrate before we conclude it's misconfigured).\n  // No deps array: the persistence check needs to evaluate on every commit, independent of any\n  // future memoization of the Root's context value.\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') return;\n    if (separator === undefined || !ctx) return;\n\n    if (variantName === null) {\n      if (nullVariantSeenRef.current && !warnedRef.current) {\n        warnedRef.current = true;\n        console.warn(\n          '[ProductInformationTitle] `separator` is set but the selected variant has no `name`; the title will render the product name alone. Ensure the SKU Selector wires Variant.name into the cache, or omit `separator` to silence this warning.',\n        );\n      }\n      nullVariantSeenRef.current = true;\n      return;\n    }\n\n    nullVariantSeenRef.current = false;\n  });\n\n  if (!ctx) return null;\n\n  const composed = separator !== undefined && variantName ? `${ctx.title}${separator}${variantName}` : ctx.title;\n\n  const Component = as;\n  return (\n    <Component\n      {...props}\n      className={className}\n      data-fs-product-information-title=\"\"\n      data-fs-product-information-title-as={as}\n    >\n      {composed}\n    </Component>\n  );\n}\n\nexport function ProductInformationDescription({\n  format = 'auto',\n  collapse = 'none',\n  defaultExpanded = true,\n  collapsedLines = 4,\n  moreLabel = 'Show more',\n  lessLabel = 'Show less',\n  className,\n  ...props\n}: ProductInformationDescriptionProps) {\n  const ctx = useProductInformation();\n  if (!ctx) return null;\n\n  // `'auto'` accepts both branches and prefers HTML; `'html'` and `'plain'` are strict opt-ins.\n  const wantsRich = format === 'auto' || format === 'html';\n  const wantsPlain = format === 'auto' || format === 'plain';\n  const htmlPayload = wantsRich ? ctx.descriptionHtml : null;\n  const plain = wantsPlain ? ctx.description : null;\n  if (!htmlPayload && !plain) return null;\n\n  // `format='auto'|'html'` is the opt-in: `descriptionHtml` is expected to be sanitized upstream by storefront-api-core.\n  const htmlProps = htmlPayload ? { dangerouslySetInnerHTML: { __html: htmlPayload } } : undefined;\n  const panelChildren = htmlPayload ? undefined : plain;\n\n  if (collapse === 'none') {\n    if (htmlPayload) {\n      return (\n        <div\n          {...props}\n          {...htmlProps}\n          className={className}\n          data-fs-product-information-description=\"\"\n          data-fs-product-information-description-collapse=\"none\"\n          data-fs-text=\"\"\n        />\n      );\n    }\n\n    return (\n      <p\n        {...props}\n        className={className}\n        data-fs-product-information-description=\"\"\n        data-fs-product-information-description-collapse=\"none\"\n        data-fs-text=\"\"\n      >\n        {plain}\n      </p>\n    );\n  }\n\n  return (\n    <DescriptionCollapsible\n      {...props}\n      className={className}\n      collapse={collapse}\n      defaultExpanded={defaultExpanded}\n      collapsedLines={collapsedLines}\n      moreLabel={moreLabel}\n      lessLabel={lessLabel}\n      htmlProps={htmlProps}\n      panelChildren={panelChildren}\n    />\n  );\n}\n\ntype DescriptionCollapsibleProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'dangerouslySetInnerHTML'> & {\n  collapse: Exclude<Collapse, 'none'>;\n  defaultExpanded: boolean;\n  collapsedLines: number;\n  moreLabel: string;\n  lessLabel: string;\n  htmlProps: { dangerouslySetInnerHTML: { __html: string } } | undefined;\n  panelChildren: string | null | undefined;\n};\n\nfunction DescriptionCollapsible({\n  collapse,\n  defaultExpanded,\n  collapsedLines,\n  moreLabel,\n  lessLabel,\n  className,\n  htmlProps,\n  panelChildren,\n  ...props\n}: DescriptionCollapsibleProps) {\n  const [open, setOpen] = useState(defaultExpanded);\n  // Only the 'showMore' branch uses panelId — its panel is a plain <div> we own end-to-end,\n  // so the trigger needs an explicit aria-controls. 'section' lets Base UI manage both the\n  // panel id and the trigger's aria-controls (per APG Disclosure: aria-controls is only\n  // required when the panel is open), which keeps the SSR HTML self-consistent without the\n  // layout-effect hop that Collapsible.Panel uses to sync an external id.\n  const panelId = useId();\n\n  // `collapsedLines` is a free `number` at the schema level, so 0, negatives, and decimals\n  // can reach the component. `-webkit-line-clamp` accepts an integer ≥ 1; anything else\n  // either renders no lines (0, negative) or behaves inconsistently across engines (decimals).\n  // Clamp here so invalid values fall back to the smallest visible state instead of leaking\n  // into the inline style.\n  const normalizedCollapsedLines = Math.max(1, Math.floor(collapsedLines));\n\n  const clampStyle: CSSProperties | undefined =\n    collapse === 'showMore' && !open\n      ? {\n          display: '-webkit-box',\n          WebkitBoxOrient: 'vertical',\n          WebkitLineClamp: normalizedCollapsedLines,\n          overflow: 'hidden',\n        }\n      : undefined;\n\n  const triggerLabel = open ? lessLabel : moreLabel;\n\n  return (\n    <Collapsible.Root\n      {...props}\n      className={className}\n      open={open}\n      onOpenChange={setOpen}\n      data-fs-product-information-description=\"\"\n      data-fs-product-information-description-collapse={collapse}\n    >\n      {collapse === 'section' ? (\n        <Collapsible.Panel\n          {...htmlProps}\n          hiddenUntilFound\n          keepMounted\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n        >\n          {panelChildren}\n        </Collapsible.Panel>\n      ) : (\n        <div\n          {...htmlProps}\n          id={panelId}\n          data-fs-product-information-description-panel=\"\"\n          data-fs-text=\"\"\n          style={clampStyle}\n        >\n          {panelChildren}\n        </div>\n      )}\n      <Collapsible.Trigger\n        // Base UI's `mergeProps` writes every key from `elementProps`, including ones whose\n        // value is `undefined` — passing `aria-controls={undefined}` would actively erase the\n        // attribute Base UI installs on the trigger when the panel is open. Only attach our\n        // own `aria-controls` for 'showMore', where we own the panel element directly.\n        {...(collapse === 'section' ? null : { 'aria-controls': panelId })}\n        data-fs-product-information-description-trigger=\"\"\n      >\n        {triggerLabel}\n      </Collapsible.Trigger>\n    </Collapsible.Root>\n  );\n}\n\nexport function ProductInformationBrand({ className, ...props }: ProductInformationBrandProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.brand) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-brand=\"\">\n      {ctx.brand}\n    </span>\n  );\n}\n\nexport function ProductInformationSku({ className, ...props }: ProductInformationSkuProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.sku) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-sku=\"\">\n      {ctx.sku}\n    </span>\n  );\n}\n\nexport function ProductInformationReferenceId({ className, ...props }: ProductInformationReferenceIdProps) {\n  const ctx = useProductInformation();\n  if (!ctx || !ctx.referenceId) return null;\n\n  return (\n    <span {...props} className={className} data-fs-product-information-reference-id=\"\">\n      {ctx.referenceId}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductInformation = {\n  Root: ProductInformationRoot,\n  Title: ProductInformationTitle,\n  Description: ProductInformationDescription,\n  Brand: ProductInformationBrand,\n  Sku: ProductInformationSku,\n  ReferenceId: ProductInformationReferenceId,\n};\n"],"mappings":"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"}

package/dist/matter/product-list/product-list.d.ts

@@ -0,0 +1,86 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/product-list/product-list.d.ts
+export type ProductListItemImage = {
+  src: string;
+  alt: string;
+};
+export type ProductListItem = {
+  id: string;
+  name: string;
+  image: ProductListItemImage;
+  price: number;
+  listPrice?: number;
+  variant?: string;
+  slug?: string;
+  spotPrice?: number;
+  tax?: number;
+  taxPercentage?: number | null;
+  availableForSale?: boolean;
+  availableQuantity?: number;
+  currency?: string;
+};
+export type ProductListRootProps = ComponentPropsWithRef<'div'> & {
+  products?: ProductListItem[];
+  /** When true, card prices render tax-inclusive (from the item's tax data). Default false. */
+  usePriceWithTaxes?: boolean;
+  /** Text for the tax label part when tax display is on. Default `'Tax included'`. */
+  taxesLabel?: string;
+};
+export type ProductListGridProps = ComponentPropsWithRef<'div'>;
+export type ProductCardProps = ComponentPropsWithRef<'div'> & {
+  /** Toggles the card border. Reflects onto data-fs-product-card-bordered; a swatch draws the border. Default true. */
+  bordered?: boolean;
+};
+export type ProductCardImageProps = ComponentPropsWithRef<'img'> & {
+  objectFit?: 'contain' | 'cover' | 'fill' | 'none';
+  /** CSS `aspect-ratio` (e.g. `'1/1'`, `'3/4'`, `'16/9'`); lays out the image box, orthogonal to `objectFit`. */
+  aspectRatio?: string;
+};
+export type ProductCardNameProps = ComponentPropsWithRef<'span'>;
+export type ProductCardPriceProps = ComponentPropsWithRef<'span'>;
+export type ProductCardListPriceProps = ComponentPropsWithRef<'span'>;
+export type ProductCardTaxLabelProps = ComponentPropsWithRef<'span'>;
+export type ProductCardDiscountProps = ComponentPropsWithRef<'span'> & {
+  format?: 'percentage' | 'absolute';
+};
+export type ProductCardAddToCartProps = ComponentPropsWithRef<'button'> & {
+  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */
+  $actions?: ComponentActions;
+};
+export declare const ProductListRootDefinition: ComponentDefinition<ProductListRootProps>;
+export declare const ProductListGridDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const ProductCardDefinition: ComponentDefinition<ProductCardProps>;
+export declare const ProductCardImageDefinition: ComponentDefinition<ProductCardImageProps>;
+export declare const ProductCardNameDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ProductCardPriceDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ProductCardListPriceDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ProductCardTaxLabelDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const ProductCardDiscountDefinition: ComponentDefinition<ProductCardDiscountProps>;
+export declare const ProductCardAddToCartDefinition: ComponentDefinition<ProductCardAddToCartProps>;
+export declare function ProductListRoot({ usePriceWithTaxes, taxesLabel, products, className, children, ...props }: ProductListRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListGrid({ className, children, ...props }: ProductListGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCard({ className, children, bordered, ...props }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCardImage({ className, objectFit, aspectRatio, ...props }: ProductCardImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCardName({ className, children, ...props }: ProductCardNameProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCardPrice({ className, children, ...props }: ProductCardPriceProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCardListPrice({ className, children, ...props }: ProductCardListPriceProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductCardTaxLabel({ className, children, ...props }: ProductCardTaxLabelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductCardDiscount({ className, children, format, ...props }: ProductCardDiscountProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ProductCardAddToCart({ className, children, onClick, $actions, ...props }: ProductCardAddToCartProps): import("react/jsx-runtime").JSX.Element;
+export declare const ProductList: {
+  Root: typeof ProductListRoot;
+  Grid: typeof ProductListGrid;
+  Card: typeof ProductCard;
+  CardImage: typeof ProductCardImage;
+  CardName: typeof ProductCardName;
+  CardPrice: typeof ProductCardPrice;
+  CardListPrice: typeof ProductCardListPrice;
+  CardTaxLabel: typeof ProductCardTaxLabel;
+  CardDiscount: typeof ProductCardDiscount;
+  CardAddToCart: typeof ProductCardAddToCart;
+};
+//#endregion
+//# sourceMappingURL=product-list.d.ts.map