@fire-spark/rn-ui 0.0.1 → 0.0.3

package/dist/product-detail.d.ts

@@ -78,6 +78,13 @@ 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;
+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 +92,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, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, ProductDetailOptions, ProductDetailPanel, ProductDetailPrice, ProductDetailProvider, ProductDetailProviderProps, ProductDetailQuantities, ProductDetailRelated, ProductDetailRelatedGrid, ProductDetailRelatedTitle, ProductDetailState, ProductDetailSubmit, ProductDetailTitle, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, useProductDetail };

package/dist/product-detail.js

@@ -140,6 +140,8 @@ 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 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 +177,34 @@ const ProductDetailOptionLabel = view("min-w-0 flex-1");
 const ProductDetailOptionName = text(optionNameBase);
 const ProductDetailOptionPrice = text(optPriceBase);
 const ProductDetailOptionControl = view(optControlBase);
+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 +212,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, ProductDetailOptionControl, ProductDetailOptionLabel, ProductDetailOptionName, ProductDetailOptionPrice, 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.1",
+  "version": "0.0.3",
   "description": "Fire Spark React Native UI components",
   "type": "module",
   "sideEffects": false,
@@ -11,61 +11,51 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "development": "./src/index.ts",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./button": {
-      "development": "./src/button.tsx",
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js",
       "default": "./dist/button.js"
     },
     "./category": {
-      "development": "./src/category.tsx",
       "types": "./dist/category.d.ts",
       "import": "./dist/category.js",
       "default": "./dist/category.js"
     },
     "./menu": {
-      "development": "./src/menu.tsx",
       "types": "./dist/menu.d.ts",
       "import": "./dist/menu.js",
       "default": "./dist/menu.js"
     },
     "./category-nav": {
-      "development": "./src/category-nav.tsx",
       "types": "./dist/category-nav.d.ts",
       "import": "./dist/category-nav.js",
       "default": "./dist/category-nav.js"
     },
     "./use-active-category": {
-      "development": "./src/use-active-category.ts",
       "types": "./dist/use-active-category.d.ts",
       "import": "./dist/use-active-category.js",
       "default": "./dist/use-active-category.js"
     },
     "./product-card": {
-      "development": "./src/product-card.tsx",
       "types": "./dist/product-card.d.ts",
       "import": "./dist/product-card.js",
       "default": "./dist/product-card.js"
     },
     "./product-detail": {
-      "development": "./src/product-detail.tsx",
       "types": "./dist/product-detail.d.ts",
       "import": "./dist/product-detail.js",
       "default": "./dist/product-detail.js"
     },
     "./cart": {
-      "development": "./src/cart.tsx",
       "types": "./dist/cart.d.ts",
       "import": "./dist/cart.js",
       "default": "./dist/cart.js"
     },
     "./checkout": {
-      "development": "./src/checkout.tsx",
       "types": "./dist/checkout.d.ts",
       "import": "./dist/checkout.js",
       "default": "./dist/checkout.js"