@fire-spark/rn-ui 0.0.1

package/dist/menu.d.ts

@@ -0,0 +1,21 @@
+import { Text, View } from "react-native";
+import { ComponentProps } from "react";
+//#region src/menu.d.ts
+type ViewProps = ComponentProps<typeof View> & {
+  className?: string;
+};
+type TextProps = ComponentProps<typeof Text> & {
+  className?: string;
+};
+type EmptyMediaProps = ViewProps & {
+  variant?: "icon" | "default";
+};
+declare const Menu: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const MenuEmpty: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const MenuEmptyHeader: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const MenuEmptyMedia: (props: EmptyMediaProps) => import("react").JSX.Element;
+declare const MenuEmptyTitle: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const MenuEmptyDescription: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const MenuEmptyContent: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+//#endregion
+export { Menu, MenuEmpty, MenuEmptyContent, MenuEmptyDescription, MenuEmptyHeader, MenuEmptyMedia, MenuEmptyTitle };

package/dist/menu.js

@@ -0,0 +1,42 @@
+import { t as cn } from "./cn-C_hacsED.js";
+import { Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu.tsx
+const menuBase = "Menu bg-background text-foreground min-h-0 flex-1 flex-col";
+const emptyBase = `border-border bg-muted/30 min-h-0 w-full flex-1 flex-col items-center justify-center gap-4 rounded-xl border border-dashed px-6 py-12`;
+const emptyTitleBase = "text-foreground text-sm font-semibold tracking-tight";
+const emptyDescBase = "text-muted-foreground text-sm leading-relaxed";
+const emptyContentBase = "flex-row flex-wrap items-center justify-center gap-2";
+const Menu = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(menuBase, className),
+	...props
+});
+const MenuEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(emptyBase, className),
+	...props
+});
+const MenuEmptyHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn("max-w-sm flex-col items-center gap-2", className),
+	...props
+});
+const MenuEmptyMedia = (props) => {
+	const { className, variant = "icon", ...rest } = props;
+	return /* @__PURE__ */ jsx(View, {
+		className: cn("mb-1 shrink-0 items-center justify-center", variant === "icon" ? "bg-muted size-12 rounded-full" : "text-muted-foreground", className),
+		...rest
+	});
+};
+const MenuEmptyTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(emptyTitleBase, className),
+	...props
+});
+const MenuEmptyDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(emptyDescBase, className),
+	...props
+});
+const MenuEmptyContent = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(emptyContentBase, className),
+	...props
+});
+//#endregion
+export { Menu, MenuEmpty, MenuEmptyContent, MenuEmptyDescription, MenuEmptyHeader, MenuEmptyMedia, MenuEmptyTitle };

package/dist/product-card.d.ts

@@ -0,0 +1,31 @@
+import { t as UiImageProps } from "./ui-image-bUZSq9v9.js";
+import { Pressable, Text, View } from "react-native";
+import { ComponentProps } from "react";
+//#region src/product-card.d.ts
+type ViewProps = ComponentProps<typeof View> & {
+  className?: string;
+};
+type TextProps = ComponentProps<typeof Text> & {
+  className?: string;
+};
+type PressableProps = ComponentProps<typeof Pressable> & {
+  className?: string;
+};
+declare const ProductCard: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardContent: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardMedia: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardImageSlot: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardImage: (props: UiImageProps) => import("react").JSX.Element;
+declare const ProductCardHeader: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardTitle: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardMeta: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardDescription: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardFooter: ({ className, ...props }: ViewProps) => import("react").JSX.Element;
+declare const ProductCardPrice: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardAnchorPrice: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardRating: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardBadge: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardDiscount: ({ className, ...props }: TextProps) => import("react").JSX.Element;
+declare const ProductCardAddButton: (props: PressableProps) => import("react").JSX.Element;
+//#endregion
+export { ProductCard, ProductCardAddButton, ProductCardAnchorPrice, ProductCardBadge, ProductCardContent, ProductCardDescription, ProductCardDiscount, ProductCardFooter, ProductCardHeader, ProductCardImage, ProductCardImageSlot, ProductCardMedia, ProductCardMeta, ProductCardPrice, ProductCardRating, ProductCardTitle };

package/dist/product-card.js

@@ -0,0 +1,105 @@
+import { t as cn } from "./cn-C_hacsED.js";
+import { t as UiImage } from "./ui-image-A3QxzafV.js";
+import { Pressable, Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/product-card.tsx
+const cardBase = `bg-card text-card-foreground border-border w-full flex-row overflow-hidden rounded-xl border`;
+const contentBase = `ProductCardContent min-h-28 min-w-0 flex-1 flex-col justify-center gap-1 p-3`;
+const titleBase = `text-card-foreground line-clamp-1 min-w-0 text-base min-h-[1.375em] font-semibold leading-snug`;
+const footerBase = "mt-auto flex-row flex-wrap items-center gap-2 pt-1";
+const priceBase = "text-card-foreground text-base font-semibold tabular-nums";
+const anchorBase = "text-muted-foreground text-sm tabular-nums line-through";
+const badgeBase = `bg-secondary text-secondary-foreground rounded-md px-2 py-0.5 text-xs font-medium`;
+const discountBase = `w-fit rounded-full bg-red-600 px-2 py-0.5 text-xs font-semibold text-white`;
+const addBtnBase = `bg-background border-border absolute bottom-2 right-2 z-10 size-8 items-center justify-center rounded-full`;
+const ProductCard = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(cardBase, className),
+	...props
+});
+const ProductCardContent = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(contentBase, className),
+	...props
+});
+const ProductCardMedia = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn("bg-muted relative size-[164px] overflow-hidden", className),
+	...props
+});
+const ProductCardImageSlot = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn("absolute inset-0", className),
+	...props
+});
+const ProductCardImage = (props) => /* @__PURE__ */ jsx(ProductCardImageSlot, { children: /* @__PURE__ */ jsx(UiImage, { ...props }) });
+const ProductCardHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn("flex-col gap-1", className),
+	...props
+});
+const ProductCardTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(titleBase, className),
+	numberOfLines: 1,
+	...props
+});
+const ProductCardMeta = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn("flex-row flex-wrap items-center gap-1", className),
+	...props
+});
+const ProductCardDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn("text-muted-foreground min-h-[2.75em] text-sm leading-snug", className),
+	numberOfLines: 2,
+	...props
+});
+const ProductCardFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(View, {
+	className: cn(footerBase, className),
+	...props
+});
+const ProductCardPrice = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(priceBase, className),
+	...props
+});
+const ProductCardAnchorPrice = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(anchorBase, className),
+	...props
+});
+const ProductCardRating = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn("text-sm font-medium", className),
+	...props
+});
+const ProductCardBadge = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(badgeBase, className),
+	...props
+});
+const ProductCardDiscount = ({ className, ...props }) => /* @__PURE__ */ jsx(Text, {
+	className: cn(discountBase, className),
+	...props
+});
+const plus1 = {
+	color: "#fff",
+	fontSize: 20
+};
+const plus2 = {
+	lineHeight: 22,
+	fontWeight: "400"
+};
+const plusStyle = {
+	...plus1,
+	...plus2
+};
+const addBtnStyle = { borderWidth: .5 };
+const ProductCardAddButton = (props) => {
+	const { children, className, style, ...rest } = props;
+	const fallback = /* @__PURE__ */ jsx(Text, {
+		style: plusStyle,
+		children: "+"
+	});
+	const btnClass = cn(addBtnBase, className);
+	let btnStyle = addBtnStyle;
+	if (typeof style === "function") btnStyle = (state) => [addBtnStyle, style(state)];
+	else if (style != null) btnStyle = [addBtnStyle, style];
+	return /* @__PURE__ */ jsx(Pressable, {
+		className: btnClass,
+		style: btnStyle,
+		...rest,
+		children: children ?? fallback
+	});
+};
+//#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,88 @@
+import { t as UiImageProps } from "./ui-image-bUZSq9v9.js";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import * as React 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;
+};
+type ProductDetailProviderProps = {
+  children: React.ReactNode;
+  productId?: string;
+  initialQuantities?: ProductDetailQuantities;
+};
+declare const useProductDetail: () => ProductDetailContextValue;
+declare const ProductDetailProvider: (props: ProductDetailProviderProps) => React.JSX.Element;
+type ViewProps = React.ComponentProps<typeof View> & {
+  className?: string;
+};
+type BodyScroll = {
+  scrollTo: (o: {
+    y: number;
+    animated?: boolean;
+  }) => void;
+};
+type ScrollProps = React.ComponentProps<typeof ScrollView> & {
+  className?: string;
+  ref?: React.Ref<BodyScroll>;
+};
+type TextProps = React.ComponentProps<typeof Text> & {
+  className?: string;
+};
+type PressableProps = React.ComponentProps<typeof Pressable> & {
+  className?: string;
+};
+declare const ProductDetail: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailBody: (props: ScrollProps) => React.JSX.Element;
+declare const ProductDetailLayout: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailMedia: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailImageSlot: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailImage: (props: UiImageProps) => React.JSX.Element;
+declare const ProductDetailPanel: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailHeader: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailTitle: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailMeta: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailPrice: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailAnchorPrice: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailDiscount: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailDescription: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailBadge: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailGroups: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailGroup: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailGroupHeader: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailGroupTitle: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailGroupHint: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailGroupDescription: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailGroupRequired: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailOptions: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailOption: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailOptionLabel: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailOptionName: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailOptionPrice: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailOptionControl: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailBack: ({ children, className, ...rest }: PressableProps) => React.JSX.Element;
+declare const ProductDetailRelated: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailRelatedTitle: ({ className, ...rest }: TextProps) => React.JSX.Element;
+declare const ProductDetailRelatedGrid: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailFooter: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailSubmit: ({ children, className, ...rest }: PressableProps) => React.JSX.Element;
+//#endregion
+export { ProductDetail, ProductDetailActions, ProductDetailAnchorPrice, ProductDetailBack, ProductDetailBadge, ProductDetailBody, ProductDetailContextMeta, 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, ProductDetailProviderProps, ProductDetailQuantities, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, ProductDetailState, ProductDetailSubmit, ProductDetailTitle, useProductDetail };

package/dist/product-detail.js

@@ -0,0 +1,185 @@
+import { t as cn } from "./cn-C_hacsED.js";
+import { t as UiImage } from "./ui-image-A3QxzafV.js";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+//#region src/product-detail.tsx
+const ProductDetailContext = React.createContext(null);
+const useProductDetail = () => {
+	const value = React.use(ProductDetailContext);
+	if (!value) throw new Error("useProductDetail needs ProductDetailProvider");
+	return value;
+};
+const ProductDetailProvider = (props) => {
+	const { children, productId } = props;
+	const { initialQuantities = {} } = props;
+	const [quantities, setQuantities] = React.useState(initialQuantities);
+	const [viewStack, setViewStack] = React.useState([]);
+	const selectSingle = (groupId, modifierId) => {
+		const next = { [modifierId]: 1 };
+		setQuantities((current) => ({
+			...current,
+			[groupId]: next
+		}));
+	};
+	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, qty) => {
+		setQuantities((current) => {
+			const group = { ...current[groupId] ?? {} };
+			const next = Math.max(0, Math.floor(qty));
+			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([]);
+	};
+	const state = {
+		quantities,
+		viewStack
+	};
+	const a1 = {
+		selectSingle,
+		toggleModifier,
+		setQuantity
+	};
+	const a2 = {
+		clearGroup,
+		pushView,
+		popView,
+		reset
+	};
+	const value = {
+		state,
+		actions: {
+			...a1,
+			...a2
+		},
+		meta: { productId }
+	};
+	return /* @__PURE__ */ jsx(ProductDetailContext, {
+		value,
+		children
+	});
+};
+const view = (base) => {
+	return ({ className, ...rest }) => /* @__PURE__ */ jsx(View, {
+		className: cn(base, className),
+		...rest
+	});
+};
+const text = (base) => {
+	return ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
+		className: cn(base, className),
+		...rest
+	});
+};
+const button = (base, labelTone) => {
+	return ({ children, className, ...rest }) => {
+		const labelClass = `${labelTone} text-sm font-medium`;
+		let content = children;
+		if (typeof children === "string" || typeof children === "number") content = /* @__PURE__ */ jsx(Text, {
+			className: labelClass,
+			children
+		});
+		return /* @__PURE__ */ jsx(Pressable, {
+			className: cn(base, className),
+			...rest,
+			children: content
+		});
+	};
+};
+const rootBase = "bg-background text-foreground min-h-0 flex-1 flex-col";
+const titleBase = `text-foreground text-2xl font-bold leading-tight tracking-tight`;
+const priceBase = "text-foreground text-lg font-semibold tabular-nums";
+const groupTitleBase = `text-foreground text-base font-semibold tracking-tight`;
+const optionNameBase = "text-foreground text-sm font-medium";
+const badgeBase = `bg-muted text-foreground w-fit rounded-full px-2.5 py-1 text-xs font-medium`;
+const requiredBase = `bg-muted text-foreground shrink-0 rounded-full px-2.5 py-1 text-xs font-medium`;
+const optionsBase = "border-border flex-col rounded-xl border";
+const optionBase = `border-border flex-row items-center justify-between gap-3 border-b px-4 py-3`;
+const relatedBase = "border-border flex-col gap-4 border-t px-6 py-6";
+const relatedTitleBase = `text-foreground text-base font-semibold tracking-tight`;
+const footerBase = `bg-background border-border shrink-0 border-t px-6 pt-4 pb-6`;
+const submitBase = `bg-primary w-full items-center justify-center rounded-full px-4 py-3`;
+const submitLabel = "text-primary-foreground";
+const backBase = "text-muted-foreground -ml-1 w-fit px-1 py-0.5";
+const mediaBase = "bg-muted relative aspect-[3/2] w-full overflow-hidden";
+const anchorBase = "text-muted-foreground text-sm tabular-nums line-through";
+const discountBase = `w-fit rounded-full bg-red-600 px-2 py-0.5 text-xs font-semibold text-white`;
+const descBase = "text-muted-foreground text-sm leading-relaxed";
+const groupHeaderBase = "flex-row items-start justify-between gap-3";
+const groupDescBase = "text-muted-foreground text-xs";
+const optPriceBase = "text-muted-foreground text-sm tabular-nums";
+const optControlBase = "shrink-0 flex-row items-center gap-2";
+const metaBase = "flex-row flex-wrap items-center gap-2";
+const ProductDetail = view(rootBase);
+const ProductDetailBody = (props) => {
+	const { className, ref, ...rest } = props;
+	return /* @__PURE__ */ jsx(ScrollView, {
+		ref,
+		className: cn("min-h-0 flex-1", className),
+		...rest
+	});
+};
+const ProductDetailLayout = view("min-w-0 flex-col gap-4");
+const ProductDetailMedia = view(mediaBase);
+const ProductDetailImageSlot = view("absolute inset-0");
+const ProductDetailImage = (props) => /* @__PURE__ */ jsx(ProductDetailImageSlot, { children: /* @__PURE__ */ jsx(UiImage, { ...props }) });
+const ProductDetailPanel = view("min-w-0 flex-col px-6");
+const ProductDetailHeader = view("flex-col gap-3 pb-2 pt-6");
+const ProductDetailTitle = text(titleBase);
+const ProductDetailMeta = view(metaBase);
+const ProductDetailPrice = text(priceBase);
+const ProductDetailAnchorPrice = text(anchorBase);
+const ProductDetailDiscount = text(discountBase);
+const ProductDetailDescription = text(descBase);
+const ProductDetailBadge = text(badgeBase);
+const ProductDetailGroups = view("flex-col gap-8 py-6");
+const ProductDetailGroup = view("flex-col gap-3");
+const ProductDetailGroupHeader = view(groupHeaderBase);
+const ProductDetailGroupTitle = text(groupTitleBase);
+const ProductDetailGroupHint = text("text-muted-foreground text-sm");
+const ProductDetailGroupDescription = text(groupDescBase);
+const ProductDetailGroupRequired = text(requiredBase);
+const ProductDetailOptions = view(optionsBase);
+const ProductDetailOption = view(optionBase);
+const ProductDetailOptionLabel = view("min-w-0 flex-1");
+const ProductDetailOptionName = text(optionNameBase);
+const ProductDetailOptionPrice = text(optPriceBase);
+const ProductDetailOptionControl = view(optControlBase);
+const ProductDetailBack = button(backBase, "text-muted-foreground");
+const ProductDetailRelated = view(relatedBase);
+const ProductDetailRelatedTitle = text(relatedTitleBase);
+const ProductDetailRelatedGrid = view("flex-row flex-wrap gap-3");
+const ProductDetailFooter = view(footerBase);
+const ProductDetailSubmit = button(submitBase, submitLabel);
+//#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/ui-image-A3QxzafV.js

@@ -0,0 +1,17 @@
+import { t as cn } from "./cn-C_hacsED.js";
+import { Image } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/ui-image.tsx
+/** Default RN Image, or any base via `as` (e.g. expo-image). */
+const UiImage = (props) => {
+	const { as, className, ...rest } = props;
+	const Comp = as ?? Image;
+	const cover = as == null ? { resizeMode: "cover" } : {};
+	return /* @__PURE__ */ jsx(Comp, {
+		className: cn("size-full", className),
+		...cover,
+		...rest
+	});
+};
+//#endregion
+export { UiImage as t };

package/dist/ui-image-bUZSq9v9.d.ts

@@ -0,0 +1,11 @@
+import { Image } from "react-native";
+import { ComponentProps, ElementType } from "react";
+//#region src/lib/ui-image.d.ts
+type RnImageProps = ComponentProps<typeof Image> & {
+  className?: string;
+};
+type UiImageProps = RnImageProps & {
+  as?: ElementType;
+};
+//#endregion
+export { UiImageProps as t };

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

@@ -0,0 +1,29 @@
+import { LayoutChangeEvent } from "react-native";
+import { RefObject } from "react";
+//#region src/use-active-category.d.ts
+type Scrollable = {
+  scrollTo: (opts: {
+    y: number;
+    animated?: boolean;
+  }) => void;
+};
+type UseActiveCategoryOptions = {
+  categoryIds: readonly string[];
+  offset?: number;
+  scrollRef?: RefObject<Scrollable | null>;
+};
+declare const useActiveCategory: (opts: UseActiveCategoryOptions) => {
+  activeCategoryId: string;
+  setActiveCategoryId: import("react").Dispatch<import("react").SetStateAction<string>>;
+  selectCategory: (categoryId: string) => void;
+  onScroll: (event: {
+    nativeEvent: {
+      contentOffset: {
+        y: number;
+      };
+    };
+  }) => void;
+  registerCategory: (categoryId: string) => (event: LayoutChangeEvent) => void;
+};
+//#endregion
+export { UseActiveCategoryOptions, useActiveCategory };

package/dist/use-active-category.js

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/use-active-category.ts
+/** Wait until scroll events stop before trusting the spy again. */
+const SCROLL_SETTLE_MS = 140;
+/** Fallback if scroll never starts; scroll handler re-arms while moving. */
+const SCROLL_LOCK_FALLBACK_MS = 1e3;
+const useActiveCategory = (opts) => {
+	const { categoryIds, offset = 0, scrollRef } = opts;
+	const [activeCategoryId, setActiveCategoryId] = useState(() => {
+		return categoryIds[0] ?? "";
+	});
+	const offsetsRef = useRef(/* @__PURE__ */ new Map());
+	const lockedIdRef = useRef(null);
+	const settleTimerRef = useRef(null);
+	useEffect(() => {
+		if (categoryIds.length === 0) {
+			setActiveCategoryId("");
+			return;
+		}
+		setActiveCategoryId((current) => {
+			if (categoryIds.includes(current)) return current;
+			return categoryIds[0] ?? "";
+		});
+	}, [categoryIds, categoryIds.join("\0")]);
+	useEffect(() => {
+		return () => {
+			if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+		};
+	}, []);
+	const armSettleUnlock = () => {
+		if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+		settleTimerRef.current = setTimeout(() => {
+			lockedIdRef.current = null;
+		}, SCROLL_SETTLE_MS);
+	};
+	const registerCategory = (categoryId) => {
+		return (event) => {
+			const y = event.nativeEvent.layout.y;
+			offsetsRef.current.set(categoryId, y);
+		};
+	};
+	const onScroll = (event) => {
+		const scrollY = event.nativeEvent.contentOffset.y;
+		if (lockedIdRef.current) {
+			armSettleUnlock();
+			return;
+		}
+		const threshold = scrollY + offset + 1;
+		let current = categoryIds[0] ?? "";
+		for (const id of categoryIds) {
+			const top = offsetsRef.current.get(id);
+			if (top !== void 0 && top <= threshold) current = id;
+		}
+		setActiveCategoryId((previous) => {
+			return previous === current ? previous : current;
+		});
+	};
+	const selectCategory = (categoryId) => {
+		lockedIdRef.current = categoryId;
+		setActiveCategoryId(categoryId);
+		const top = offsetsRef.current.get(categoryId) ?? 0;
+		const y = Math.max(0, top - offset);
+		scrollRef?.current?.scrollTo({
+			y,
+			animated: true
+		});
+		if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
+		settleTimerRef.current = setTimeout(() => {
+			lockedIdRef.current = null;
+		}, SCROLL_LOCK_FALLBACK_MS);
+	};
+	return {
+		activeCategoryId,
+		setActiveCategoryId,
+		selectCategory,
+		onScroll,
+		registerCategory
+	};
+};
+//#endregion
+export { useActiveCategory };