@fire-spark/rn-ui 0.0.2 → 0.0.4

package/dist/product-detail.d.ts

@@ -78,6 +78,19 @@ declare const ProductDetailOptionLabel: ({ className, ...rest }: ViewProps) => R
 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;
+type OptionMarkProps = ViewProps & {
+  checked?: boolean;
+};
+/** Selection mark for `ProductDetailOptionControl`; the row owns the a11y role. */
+declare const ProductDetailOptionRadio: (props: OptionMarkProps) => React.JSX.Element;
+declare const ProductDetailOptionCheckbox: (props: OptionMarkProps) => React.JSX.Element;
+declare const ProductDetailVariantGroup: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+declare const ProductDetailVariantOptions: ({ className, ...rest }: ViewProps) => React.JSX.Element;
+type VariantOptionProps = PressableProps & {
+  selected?: boolean;
+};
+declare const ProductDetailVariantOption: (props: VariantOptionProps) => React.JSX.Element;
+declare const ProductDetailVariantOptionImage: (props: UiImageProps) => 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;
@@ -85,4 +98,4 @@ declare const ProductDetailRelatedGrid: ({ className, ...rest }: ViewProps) => R
 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 };
+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, ProductDetailOptionCheckbox, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, ProductDetailOptionRadio, ProductDetailOptions, ProductDetailPanel, ProductDetailPrice, ProductDetailProvider, ProductDetailProviderProps, ProductDetailQuantities, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, ProductDetailState, ProductDetailSubmit, ProductDetailTitle, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, useProductDetail };

package/dist/product-detail.js

@@ -139,7 +139,13 @@ 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 markBase = "size-5 shrink-0 items-center justify-center border-2";
+const radioBase = `${markBase} rounded-full`;
+const checkboxBase = `${markBase} rounded-md`;
+const tickBase = "text-primary-foreground text-xs font-bold leading-none";
 const metaBase = "flex-row flex-wrap items-center gap-2";
+const variantOptionBase = `min-w-24 items-center gap-2 rounded-xl border px-3 py-3`;
+const variantOptionOn = "border-foreground bg-muted";
 const ProductDetail = view(rootBase);
 const ProductDetailBody = (props) => {
 	const { className, ref, ...rest } = props;
@@ -175,6 +181,58 @@ const ProductDetailOptionLabel = view("min-w-0 flex-1");
 const ProductDetailOptionName = text(optionNameBase);
 const ProductDetailOptionPrice = text(optPriceBase);
 const ProductDetailOptionControl = view(optControlBase);
+/** Selection mark for `ProductDetailOptionControl`; the row owns the a11y role. */
+const ProductDetailOptionRadio = (props) => {
+	const { checked = false, className, children, ...rest } = props;
+	const tone = checked ? "border-primary" : "border-input";
+	const fill = checked ? children ?? /* @__PURE__ */ jsx(View, { className: "bg-primary size-2.5 rounded-full" }) : null;
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(radioBase, tone, className),
+		...rest,
+		children: fill
+	});
+};
+const ProductDetailOptionCheckbox = (props) => {
+	const { checked = false, className, children, ...rest } = props;
+	const tone = checked ? "border-primary bg-primary" : "border-input";
+	const fill = checked ? children ?? /* @__PURE__ */ jsx(Text, {
+		className: tickBase,
+		children: "✓"
+	}) : null;
+	return /* @__PURE__ */ jsx(View, {
+		className: cn(checkboxBase, tone, className),
+		...rest,
+		children: fill
+	});
+};
+const ProductDetailVariantGroup = view("flex-col gap-3");
+const ProductDetailVariantOptions = view("flex-row flex-wrap gap-2");
+const ProductDetailVariantOption = (props) => {
+	const { selected = false, disabled, className, children, ...rest } = props;
+	const optionClass = cn(variantOptionBase, selected ? variantOptionOn : "border-border", disabled ? "opacity-50" : "", className);
+	const p1 = {
+		selected,
+		disabled: !!disabled,
+		checked: selected
+	};
+	let content = children;
+	if (typeof children === "string" || typeof children === "number") content = /* @__PURE__ */ jsx(Text, {
+		className: optionNameBase,
+		children
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		role: "radio",
+		accessibilityState: p1,
+		disabled,
+		className: optionClass,
+		...rest,
+		children: content
+	});
+};
+const ProductDetailVariantOptionImage = (props) => /* @__PURE__ */ jsx(View, {
+	className: "size-14 overflow-hidden rounded-lg",
+	children: /* @__PURE__ */ jsx(UiImage, { ...props })
+});
 const ProductDetailBack = button(backBase, "text-muted-foreground");
 const ProductDetailRelated = view(relatedBase);
 const ProductDetailRelatedTitle = text(relatedTitleBase);
@@ -182,4 +240,4 @@ 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 };
+export { ProductDetail, ProductDetailAnchorPrice, ProductDetailBack, ProductDetailBadge, ProductDetailBody, ProductDetailDescription, ProductDetailDiscount, ProductDetailFooter, ProductDetailGroup, ProductDetailGroupDescription, ProductDetailGroupHeader, ProductDetailGroupHint, ProductDetailGroupRequired, ProductDetailGroupTitle, ProductDetailGroups, ProductDetailHeader, ProductDetailImage, ProductDetailImageSlot, ProductDetailLayout, ProductDetailMedia, ProductDetailMeta, ProductDetailOption, ProductDetailOptionCheckbox, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, ProductDetailOptionRadio, ProductDetailOptions, ProductDetailPanel, ProductDetailPrice, ProductDetailProvider, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, ProductDetailSubmit, ProductDetailTitle, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, useProductDetail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fire-spark/rn-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Fire Spark React Native UI components",
   "type": "module",
   "sideEffects": false,