@fire-spark/rn-ui 0.0.3 → 0.0.4

package/dist/product-detail.d.ts

@@ -78,6 +78,12 @@ 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 & {
@@ -92,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, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, 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,6 +139,10 @@ 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";
@@ -177,6 +181,30 @@ 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) => {
@@ -212,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, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, 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.3",
+  "version": "0.0.4",
   "description": "Fire Spark React Native UI components",
   "type": "module",
   "sideEffects": false,