@fire-spark/react-ui 0.0.1

package/dist/product-card.js

@@ -0,0 +1,108 @@
+import { t as cn } from "./cn-Ccejyh36.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/product-card.tsx
+const ProductCard = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("bg-card text-card-foreground @container/product-card flex h-full min-w-0 w-full overflow-hidden rounded-xl border shadow-sm", className),
+	...props
+});
+ProductCard.displayName = "ProductCard";
+const ProductCardContent = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("ProductCardContent flex min-h-28 min-w-0 flex-1 flex-col justify-center gap-1 p-2 @min-[20rem]/product-card:gap-1.5 @min-[20rem]/product-card:p-4", className),
+	...props
+});
+ProductCardContent.displayName = "ProductCardContent";
+const ProductCardMedia = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("bg-muted relative size-[164px] shrink-0 self-center overflow-hidden", className),
+	...props
+});
+ProductCardMedia.displayName = "ProductCardMedia";
+const ProductCardImageSlot = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("size-full", className),
+	...props
+});
+ProductCardImageSlot.displayName = "ProductCardImageSlot";
+const ProductCardImage = ({ ref, className, alt = "", ...props }) => /* @__PURE__ */ jsx(ProductCardImageSlot, { children: /* @__PURE__ */ jsx("img", {
+	ref,
+	alt,
+	className: cn("size-full object-cover", className),
+	...props
+}) });
+ProductCardImage.displayName = "ProductCardImage";
+const ProductCardHeader = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col gap-1", className),
+	...props
+});
+ProductCardHeader.displayName = "ProductCardHeader";
+const ProductCardTitle = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("h3", {
+	ref,
+	className: cn("line-clamp-1 min-h-[1lh] min-w-0 text-sm leading-snug font-semibold tracking-tight @min-[20rem]/product-card:text-base", className),
+	...props
+});
+ProductCardTitle.displayName = "ProductCardTitle";
+const ProductCardMeta = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("text-foreground flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs @min-[20rem]/product-card:text-sm", className),
+	...props
+});
+ProductCardMeta.displayName = "ProductCardMeta";
+const ProductCardDescription = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-muted-foreground line-clamp-2 min-h-[2lh] min-w-0 text-xs leading-snug @min-[20rem]/product-card:text-sm", className),
+	...props
+});
+ProductCardDescription.displayName = "ProductCardDescription";
+const ProductCardFooter = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("mt-auto flex flex-wrap items-center gap-2 pt-1", className),
+	...props
+});
+ProductCardFooter.displayName = "ProductCardFooter";
+const ProductCardPrice = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("text-base font-semibold tabular-nums", className),
+	...props
+});
+ProductCardPrice.displayName = "ProductCardPrice";
+const ProductCardAnchorPrice = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("text-muted-foreground text-sm tabular-nums line-through", className),
+	...props
+});
+ProductCardAnchorPrice.displayName = "ProductCardAnchorPrice";
+const ProductCardRating = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("inline-flex items-center gap-1 text-sm font-medium", className),
+	...props
+});
+ProductCardRating.displayName = "ProductCardRating";
+const ProductCardBadge = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("bg-secondary text-secondary-foreground inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium", className),
+	...props
+});
+ProductCardBadge.displayName = "ProductCardBadge";
+const ProductCardDiscount = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("inline-flex w-fit items-center rounded-full bg-red-600 px-2 py-0.5 text-xs font-semibold text-white", className),
+	...props
+});
+ProductCardDiscount.displayName = "ProductCardDiscount";
+const ProductCardAddButton = ({ ref, className, type = "button", children, ...props }) => /* @__PURE__ */ jsx("button", {
+	ref,
+	type,
+	className: cn("bg-background absolute right-2 bottom-2 z-10 flex size-8 items-center justify-center rounded-full border shadow-md transition-colors hover:bg-accent", className),
+	...props,
+	children: children ?? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "text-lg leading-none font-medium",
+		children: "+"
+	})
+});
+ProductCardAddButton.displayName = "ProductCardAddButton";
+//#endregion
+export { ProductCard, ProductCardAddButton, ProductCardAnchorPrice, ProductCardBadge, ProductCardContent, ProductCardDescription, ProductCardDiscount, ProductCardFooter, ProductCardHeader, ProductCardImage, ProductCardImageSlot, ProductCardMedia, ProductCardMeta, ProductCardPrice, ProductCardRating, ProductCardTitle };

package/dist/product-detail.d.ts

@@ -0,0 +1,241 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ImgHTMLAttributes, ReactNode } from "react";
+//#region src/product-detail.d.ts
+type ProductDetailQuantities = Record<string, Record<string, number>>;
+type ProductDetailState = {
+  quantities: ProductDetailQuantities;
+  viewStack: string[];
+};
+type ProductDetailActions = {
+  selectSingle: (groupId: string, modifierId: string) => void;
+  toggleModifier: (groupId: string, modifierId: string) => void;
+  setQuantity: (groupId: string, modifierId: string, quantity: number) => void;
+  clearGroup: (groupId: string) => void;
+  pushView: (viewId: string) => void;
+  popView: () => void;
+  reset: () => void;
+};
+type ProductDetailContextMeta = {
+  productId?: string;
+};
+type ProductDetailContextValue = {
+  state: ProductDetailState;
+  actions: ProductDetailActions;
+  meta: ProductDetailContextMeta;
+};
+declare const useProductDetail: () => ProductDetailContextValue;
+type ProductDetailProviderProps = {
+  children: ReactNode;
+  productId?: string;
+  initialQuantities?: ProductDetailQuantities;
+};
+declare function ProductDetailProvider({ children, productId, initialQuantities }: ProductDetailProviderProps): import("react").JSX.Element;
+declare namespace ProductDetailProvider {
+  var displayName: string;
+}
+declare function ProductDetail({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetail {
+  var displayName: string;
+}
+declare function ProductDetailBody({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailBody {
+  var displayName: string;
+}
+declare function ProductDetailLayout({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailLayout {
+  var displayName: string;
+}
+declare function ProductDetailMedia({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailMedia {
+  var displayName: string;
+}
+declare function ProductDetailImageSlot({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailImageSlot {
+  var displayName: string;
+}
+declare function ProductDetailImage({ ref, className, alt, ...props }: ImgHTMLAttributes<HTMLImageElement> & {
+  ref?: React.RefObject<HTMLImageElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailImage {
+  var displayName: string;
+}
+declare function ProductDetailPanel({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailPanel {
+  var displayName: string;
+}
+declare function ProductDetailHeader({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailHeader {
+  var displayName: string;
+}
+declare function ProductDetailTitle({ ref, className, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLHeadingElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailTitle {
+  var displayName: string;
+}
+declare function ProductDetailMeta({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailMeta {
+  var displayName: string;
+}
+declare function ProductDetailPrice({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailPrice {
+  var displayName: string;
+}
+declare function ProductDetailAnchorPrice({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailAnchorPrice {
+  var displayName: string;
+}
+declare function ProductDetailDiscount({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailDiscount {
+  var displayName: string;
+}
+declare function ProductDetailDescription({ ref, className, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailDescription {
+  var displayName: string;
+}
+declare function ProductDetailBadge({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailBadge {
+  var displayName: string;
+}
+declare function ProductDetailGroups({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroups {
+  var displayName: string;
+}
+declare function ProductDetailGroup({ ref, className, ...props }: HTMLAttributes<HTMLElement> & {
+  ref?: React.RefObject<HTMLElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroup {
+  var displayName: string;
+}
+declare function ProductDetailGroupHeader({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroupHeader {
+  var displayName: string;
+}
+declare function ProductDetailGroupTitle({ ref, className, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLHeadingElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroupTitle {
+  var displayName: string;
+}
+declare function ProductDetailGroupHint({ ref, className, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroupHint {
+  var displayName: string;
+}
+declare function ProductDetailGroupDescription({ ref, className, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroupDescription {
+  var displayName: string;
+}
+declare function ProductDetailGroupRequired({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailGroupRequired {
+  var displayName: string;
+}
+declare function ProductDetailOptions({ ref, className, ...props }: HTMLAttributes<HTMLUListElement> & {
+  ref?: React.RefObject<HTMLUListElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOptions {
+  var displayName: string;
+}
+declare function ProductDetailOption({ ref, className, selected, ...props }: HTMLAttributes<HTMLLIElement> & {
+  ref?: React.RefObject<HTMLLIElement | null>;
+  selected?: boolean;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOption {
+  var displayName: string;
+}
+declare function ProductDetailOptionLabel({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOptionLabel {
+  var displayName: string;
+}
+declare function ProductDetailOptionName({ ref, className, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOptionName {
+  var displayName: string;
+}
+declare function ProductDetailOptionPrice({ ref, className, ...props }: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.RefObject<HTMLParagraphElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOptionPrice {
+  var displayName: string;
+}
+declare function ProductDetailOptionControl({ ref, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+  ref?: React.RefObject<HTMLSpanElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailOptionControl {
+  var displayName: string;
+}
+declare function ProductDetailBack({ ref, className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailBack {
+  var displayName: string;
+}
+declare function ProductDetailRelated({ ref, className, ...props }: HTMLAttributes<HTMLElement> & {
+  ref?: React.RefObject<HTMLElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailRelated {
+  var displayName: string;
+}
+declare function ProductDetailRelatedTitle({ ref, className, ...props }: HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.RefObject<HTMLHeadingElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailRelatedTitle {
+  var displayName: string;
+}
+declare function ProductDetailRelatedGrid({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailRelatedGrid {
+  var displayName: string;
+}
+declare function ProductDetailFooter({ ref, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailFooter {
+  var displayName: string;
+}
+declare function ProductDetailSubmit({ ref, className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+  ref?: React.RefObject<HTMLButtonElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailSubmit {
+  var displayName: string;
+}
+//#endregion
+export { ProductDetail, type ProductDetailActions, ProductDetailAnchorPrice, ProductDetailBack, ProductDetailBadge, ProductDetailBody, type ProductDetailContextMeta, type ProductDetailContextValue, ProductDetailDescription, ProductDetailDiscount, ProductDetailFooter, ProductDetailGroup, ProductDetailGroupDescription, ProductDetailGroupHeader, ProductDetailGroupHint, ProductDetailGroupRequired, ProductDetailGroupTitle, ProductDetailGroups, ProductDetailHeader, ProductDetailImage, ProductDetailImageSlot, ProductDetailLayout, ProductDetailMedia, ProductDetailMeta, ProductDetailOption, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, ProductDetailOptions, ProductDetailPanel, ProductDetailPrice, ProductDetailProvider, type ProductDetailProviderProps, type ProductDetailQuantities, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, type ProductDetailState, ProductDetailSubmit, ProductDetailTitle, useProductDetail };

package/dist/product-detail.js

@@ -0,0 +1,291 @@
+"use client";
+import { t as cn } from "./cn-Ccejyh36.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useState } from "react";
+//#region src/product-detail.tsx
+const ProductDetailContext = createContext(null);
+const useProductDetail = () => {
+	const value = use(ProductDetailContext);
+	if (!value) throw new Error("useProductDetail must be used within ProductDetailProvider");
+	return value;
+};
+const ProductDetailProvider = ({ children, productId, initialQuantities = {} }) => {
+	const [quantities, setQuantities] = useState(initialQuantities);
+	const [viewStack, setViewStack] = useState([]);
+	const selectSingle = (groupId, modifierId) => {
+		setQuantities((current) => ({
+			...current,
+			[groupId]: { [modifierId]: 1 }
+		}));
+	};
+	const toggleModifier = (groupId, modifierId) => {
+		setQuantities((current) => {
+			const group = { ...current[groupId] ?? {} };
+			if ((group[modifierId] ?? 0) > 0) delete group[modifierId];
+			else group[modifierId] = 1;
+			return {
+				...current,
+				[groupId]: group
+			};
+		});
+	};
+	const setQuantity = (groupId, modifierId, quantity) => {
+		setQuantities((current) => {
+			const group = { ...current[groupId] ?? {} };
+			const next = Math.max(0, Math.floor(quantity));
+			if (next <= 0) delete group[modifierId];
+			else group[modifierId] = next;
+			return {
+				...current,
+				[groupId]: group
+			};
+		});
+	};
+	const clearGroup = (groupId) => {
+		setQuantities((current) => ({
+			...current,
+			[groupId]: {}
+		}));
+	};
+	const pushView = (viewId) => {
+		setViewStack((current) => [...current, viewId]);
+	};
+	const popView = () => {
+		setViewStack((current) => current.slice(0, -1));
+	};
+	const reset = () => {
+		setQuantities(initialQuantities);
+		setViewStack([]);
+	};
+	return /* @__PURE__ */ jsx(ProductDetailContext, {
+		value: {
+			state: {
+				quantities,
+				viewStack
+			},
+			actions: {
+				selectSingle,
+				toggleModifier,
+				setQuantity,
+				clearGroup,
+				pushView,
+				popView,
+				reset
+			},
+			meta: { productId }
+		},
+		children
+	});
+};
+ProductDetailProvider.displayName = "ProductDetailProvider";
+const ProductDetail = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("@container/product-detail flex min-h-0 flex-1 flex-col", className),
+	...props
+});
+ProductDetail.displayName = "ProductDetail";
+const ProductDetailBody = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("-mx-6 min-h-0 flex-1 overflow-y-auto @min-[36rem]/product-detail:px-6", className),
+	...props
+});
+ProductDetailBody.displayName = "ProductDetailBody";
+const ProductDetailLayout = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("grid min-w-0 gap-4 @min-[36rem]/product-detail:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] @min-[36rem]/product-detail:gap-6", className),
+	...props
+});
+ProductDetailLayout.displayName = "ProductDetailLayout";
+const ProductDetailMedia = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("bg-muted relative aspect-[3/2] w-full min-w-0 overflow-hidden @min-[36rem]/product-detail:aspect-square @min-[36rem]/product-detail:sticky @min-[36rem]/product-detail:top-0 @min-[36rem]/product-detail:self-start", className),
+	...props
+});
+ProductDetailMedia.displayName = "ProductDetailMedia";
+const ProductDetailImageSlot = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("absolute inset-0", className),
+	...props
+});
+ProductDetailImageSlot.displayName = "ProductDetailImageSlot";
+const ProductDetailImage = ({ ref, className, alt = "", ...props }) => /* @__PURE__ */ jsx(ProductDetailImageSlot, { children: /* @__PURE__ */ jsx("img", {
+	ref,
+	alt,
+	className: cn("size-full object-cover", className),
+	...props
+}) });
+ProductDetailImage.displayName = "ProductDetailImage";
+const ProductDetailPanel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex min-w-0 flex-col px-6 @min-[36rem]/product-detail:px-0", className),
+	...props
+});
+ProductDetailPanel.displayName = "ProductDetailPanel";
+const ProductDetailHeader = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col gap-3 pt-6 pr-8 pb-2", className),
+	...props
+});
+ProductDetailHeader.displayName = "ProductDetailHeader";
+const ProductDetailTitle = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("h2", {
+	ref,
+	className: cn("text-2xl leading-tight font-bold tracking-tight sm:text-3xl", className),
+	...props
+});
+ProductDetailTitle.displayName = "ProductDetailTitle";
+const ProductDetailMeta = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-wrap items-center gap-2", className),
+	...props
+});
+ProductDetailMeta.displayName = "ProductDetailMeta";
+const ProductDetailPrice = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("text-base font-semibold tabular-nums sm:text-lg", className),
+	...props
+});
+ProductDetailPrice.displayName = "ProductDetailPrice";
+const ProductDetailAnchorPrice = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("text-muted-foreground text-sm tabular-nums line-through", className),
+	...props
+});
+ProductDetailAnchorPrice.displayName = "ProductDetailAnchorPrice";
+const ProductDetailDiscount = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("inline-flex w-fit items-center rounded-full bg-red-600 px-2 py-0.5 text-xs font-semibold text-white", className),
+	...props
+});
+ProductDetailDiscount.displayName = "ProductDetailDiscount";
+const ProductDetailDescription = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-muted-foreground text-sm leading-relaxed", className),
+	...props
+});
+ProductDetailDescription.displayName = "ProductDetailDescription";
+const ProductDetailBadge = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("bg-muted text-foreground inline-flex w-fit items-center rounded-full px-2.5 py-1 text-xs font-medium", className),
+	...props
+});
+ProductDetailBadge.displayName = "ProductDetailBadge";
+const ProductDetailGroups = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex flex-col gap-8 py-6", className),
+	...props
+});
+ProductDetailGroups.displayName = "ProductDetailGroups";
+const ProductDetailGroup = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("section", {
+	ref,
+	className: cn("flex flex-col gap-3", className),
+	...props
+});
+ProductDetailGroup.displayName = "ProductDetailGroup";
+const ProductDetailGroupHeader = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("flex items-start justify-between gap-3", className),
+	...props
+});
+ProductDetailGroupHeader.displayName = "ProductDetailGroupHeader";
+const ProductDetailGroupTitle = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("h3", {
+	ref,
+	className: cn("text-base font-semibold tracking-tight", className),
+	...props
+});
+ProductDetailGroupTitle.displayName = "ProductDetailGroupTitle";
+const ProductDetailGroupHint = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-muted-foreground mt-0.5 text-sm", className),
+	...props
+});
+ProductDetailGroupHint.displayName = "ProductDetailGroupHint";
+const ProductDetailGroupDescription = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-muted-foreground mt-1 text-xs", className),
+	...props
+});
+ProductDetailGroupDescription.displayName = "ProductDetailGroupDescription";
+const ProductDetailGroupRequired = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("bg-muted text-foreground shrink-0 rounded-full px-2.5 py-1 text-xs font-medium", className),
+	...props
+});
+ProductDetailGroupRequired.displayName = "ProductDetailGroupRequired";
+const ProductDetailOptions = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("ul", {
+	ref,
+	className: cn("divide-border flex flex-col divide-y rounded-xl border", className),
+	...props
+});
+ProductDetailOptions.displayName = "ProductDetailOptions";
+const ProductDetailOption = ({ ref, className, selected = false, ...props }) => /* @__PURE__ */ jsx("li", {
+	ref,
+	"data-selected": selected ? "true" : "false",
+	className: cn("flex cursor-pointer items-center justify-between gap-3 px-4 py-3", className),
+	...props
+});
+ProductDetailOption.displayName = "ProductDetailOption";
+const ProductDetailOptionLabel = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("min-w-0 flex-1", className),
+	...props
+});
+ProductDetailOptionLabel.displayName = "ProductDetailOptionLabel";
+const ProductDetailOptionName = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("truncate text-sm font-medium", className),
+	...props
+});
+ProductDetailOptionName.displayName = "ProductDetailOptionName";
+const ProductDetailOptionPrice = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("text-muted-foreground text-sm tabular-nums", className),
+	...props
+});
+ProductDetailOptionPrice.displayName = "ProductDetailOptionPrice";
+/** Slot for your own radio / checkbox / stepper — no built-in controls. */
+const ProductDetailOptionControl = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("span", {
+	ref,
+	className: cn("flex shrink-0 items-center gap-2", className),
+	...props
+});
+ProductDetailOptionControl.displayName = "ProductDetailOptionControl";
+const ProductDetailBack = ({ ref, className, type = "button", ...props }) => /* @__PURE__ */ jsx("button", {
+	ref,
+	type,
+	className: cn("text-muted-foreground hover:text-foreground -ml-1 w-fit px-1 py-0.5 text-sm font-medium", className),
+	...props
+});
+ProductDetailBack.displayName = "ProductDetailBack";
+const ProductDetailRelated = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("section", {
+	ref,
+	className: cn("flex flex-col gap-4 border-t px-6 py-6 @min-[36rem]/product-detail:px-0", className),
+	...props
+});
+ProductDetailRelated.displayName = "ProductDetailRelated";
+const ProductDetailRelatedTitle = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("h3", {
+	ref,
+	className: cn("text-base font-semibold tracking-tight sm:text-lg", className),
+	...props
+});
+ProductDetailRelatedTitle.displayName = "ProductDetailRelatedTitle";
+const ProductDetailRelatedGrid = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("grid gap-3 @min-[36rem]/product-detail:grid-cols-2", className),
+	...props
+});
+ProductDetailRelatedGrid.displayName = "ProductDetailRelatedGrid";
+const ProductDetailFooter = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("bg-background shrink-0 border-t py-4 sm:py-5", className),
+	...props
+});
+ProductDetailFooter.displayName = "ProductDetailFooter";
+const ProductDetailSubmit = ({ ref, className, type = "button", ...props }) => /* @__PURE__ */ jsx("button", {
+	ref,
+	type,
+	className: cn("bg-foreground text-background hover:bg-foreground/90 flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50", className),
+	...props
+});
+ProductDetailSubmit.displayName = "ProductDetailSubmit";
+//#endregion
+export { ProductDetail, ProductDetailAnchorPrice, ProductDetailBack, ProductDetailBadge, ProductDetailBody, ProductDetailDescription, ProductDetailDiscount, ProductDetailFooter, ProductDetailGroup, ProductDetailGroupDescription, ProductDetailGroupHeader, ProductDetailGroupHint, ProductDetailGroupRequired, ProductDetailGroupTitle, ProductDetailGroups, ProductDetailHeader, ProductDetailImage, ProductDetailImageSlot, ProductDetailLayout, ProductDetailMedia, ProductDetailMeta, ProductDetailOption, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, ProductDetailOptions, ProductDetailPanel, ProductDetailPrice, ProductDetailProvider, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, ProductDetailSubmit, ProductDetailTitle, useProductDetail };

package/dist/use-active-category.d.ts

@@ -0,0 +1,15 @@
+//#region src/use-active-category.d.ts
+type UseActiveCategoryOptions = {
+  categoryIds: readonly string[];
+  /** Scroll container. Defaults to the window. */
+  root?: Element | null;
+  /** Pixels from the top of the scroll viewport used as the “current” line. */
+  offset?: number;
+};
+declare const useActiveCategory: (options: UseActiveCategoryOptions) => {
+  activeCategoryId: string;
+  setActiveCategoryId: import("react").Dispatch<import("react").SetStateAction<string>>;
+  selectCategory: (categoryId: string) => void;
+};
+//#endregion
+export { UseActiveCategoryOptions, useActiveCategory };