@fire-spark/react-ui 0.0.2 → 0.0.3

package/dist/product-detail.d.ts

@@ -201,6 +201,31 @@ declare function ProductDetailOptionControl({ ref, className, ...props }: HTMLAt
 declare namespace ProductDetailOptionControl {
   var displayName: string;
 }
+declare function ProductDetailVariantGroup({ ref, className, ...props }: HTMLAttributes<HTMLElement> & {
+  ref?: React.RefObject<HTMLElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailVariantGroup {
+  var displayName: string;
+}
+declare function ProductDetailVariantOptions({ ref, className, role, ...props }: HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailVariantOptions {
+  var displayName: string;
+}
+declare function ProductDetailVariantOption({ ref, className, selected, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+  ref?: React.RefObject<HTMLButtonElement | null>;
+  selected?: boolean;
+}): import("react").JSX.Element;
+declare namespace ProductDetailVariantOption {
+  var displayName: string;
+}
+declare function ProductDetailVariantOptionImage({ ref, className, alt, ...props }: ImgHTMLAttributes<HTMLImageElement> & {
+  ref?: React.RefObject<HTMLImageElement | null>;
+}): import("react").JSX.Element;
+declare namespace ProductDetailVariantOptionImage {
+  var displayName: string;
+}
 declare function ProductDetailBack({ ref, className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
   ref?: React.RefObject<HTMLButtonElement | null>;
 }): import("react").JSX.Element;
@@ -238,4 +263,4 @@ 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 };
+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, ProductDetailVariantGroup, ProductDetailVariantOption, ProductDetailVariantOptionImage, ProductDetailVariantOptions, useProductDetail };

package/dist/product-detail.js

@@ -249,6 +249,37 @@ const ProductDetailOptionControl = ({ ref, className, ...props }) => /* @__PURE_
 	...props
 });
 ProductDetailOptionControl.displayName = "ProductDetailOptionControl";
+/** Variant question (e.g. size); render before modifier groups. */
+const ProductDetailVariantGroup = ({ ref, className, ...props }) => /* @__PURE__ */ jsx("section", {
+	ref,
+	className: cn("flex flex-col gap-3", className),
+	...props
+});
+ProductDetailVariantGroup.displayName = "ProductDetailVariantGroup";
+const ProductDetailVariantOptions = ({ ref, className, role = "radiogroup", ...props }) => /* @__PURE__ */ jsx("div", {
+	ref,
+	role,
+	className: cn("grid grid-cols-2 gap-2 @min-[28rem]/product-detail:grid-cols-3", className),
+	...props
+});
+ProductDetailVariantOptions.displayName = "ProductDetailVariantOptions";
+const ProductDetailVariantOption = ({ ref, className, selected = false, type = "button", ...props }) => /* @__PURE__ */ jsx("button", {
+	ref,
+	type,
+	role: "radio",
+	"aria-checked": selected,
+	"data-selected": selected ? "true" : "false",
+	className: cn("hover:border-foreground/40 data-[selected=true]:border-foreground data-[selected=true]:bg-muted flex min-w-0 flex-col items-center gap-2 rounded-xl border px-3 py-3 text-center text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", className),
+	...props
+});
+ProductDetailVariantOption.displayName = "ProductDetailVariantOption";
+const ProductDetailVariantOptionImage = ({ ref, className, alt = "", ...props }) => /* @__PURE__ */ jsx("img", {
+	ref,
+	alt,
+	className: cn("aspect-square w-14 rounded-lg object-cover", className),
+	...props
+});
+ProductDetailVariantOptionImage.displayName = "ProductDetailVariantOptionImage";
 const ProductDetailBack = ({ ref, className, type = "button", ...props }) => /* @__PURE__ */ jsx("button", {
 	ref,
 	type,
@@ -288,4 +319,4 @@ const ProductDetailSubmit = ({ ref, className, type = "button", ...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 };
+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/react-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Fire Spark React UI components",
   "type": "module",
   "sideEffects": false,