@thinkersteps_labs/3d-viewer-react-native 1.0.0 → 2.0.0

package/dist/swatches/JewelryCustomizer.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { ViewerProps, ViewerRef } from '../types.js';
+import { type DiamondShape, type ShapeOption } from './ShapeSwatches.js';
 import { type UseJewelryCustomizerOptions } from './useJewelryCustomizer.js';
-export interface JewelryCustomizerProps extends Omit<ViewerProps, 'metalColor' | 'stoneColor'>, UseJewelryCustomizerOptions {
+export interface JewelryCustomizerProps extends Omit<ViewerProps, 'metalColor' | 'stoneColor' | 'shape'>, UseJewelryCustomizerOptions {
     containerStyle?: StyleProp<ViewStyle>;
     viewerHeight?: number;
+    showShapeSwatches?: boolean;
     showMetalSwatches?: boolean;
     showStoneSwatches?: boolean;
+    onShapeChange?: (shape: DiamondShape, option?: ShapeOption) => void;
 }
 export declare const JewelryCustomizer: React.ForwardRefExoticComponent<JewelryCustomizerProps & React.RefAttributes<ViewerRef>>;
 export default JewelryCustomizer;

package/dist/swatches/JewelryCustomizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JewelryCustomizer.d.ts","sourceRoot":"","sources":["../../src/swatches/JewelryCustomizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAIzD,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,2BAA2B,CAAA;AAElC,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,YAAY,CAAC,EACpD,2BAA2B;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,eAAO,MAAM,iBAAiB,0FAqD7B,CAAA;AAYD,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"JewelryCustomizer.d.ts","sourceRoot":"","sources":["../../src/swatches/JewelryCustomizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AACzC,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAIzD,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAEL,KAAK,2BAA2B,EACjC,MAAM,2BAA2B,CAAA;AAElC,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC,EAC9D,2BAA2B;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpE;AAED,eAAO,MAAM,iBAAiB,0FA4E7B,CAAA;AAYD,eAAe,iBAAiB,CAAA"}

package/dist/swatches/JewelryCustomizer.js

@@ -4,16 +4,24 @@ import { View, StyleSheet, } from 'react-native';
 import { Viewer } from '../Viewer.js';
 import { MetalSwatches } from './MetalSwatches.js';
 import { StoneSwatches } from './StoneSwatches.js';
+import { ShapeSwatches, } from './ShapeSwatches.js';
 import { useJewelryCustomizer, } from './useJewelryCustomizer.js';
 export const JewelryCustomizer = forwardRef(function JewelryCustomizer(props, ref) {
-    const { defaultMetal, defaultStone, metalOptions, stoneOptions, containerStyle, viewerHeight = 360, showMetalSwatches = true, showStoneSwatches = true, style, ...viewerRest } = props;
+    const { defaultMetal, defaultStone, defaultShape, metalOptions, stoneOptions, shapeOptions, availableShapes, containerStyle, viewerHeight = 360, showShapeSwatches = false, showMetalSwatches = true, showStoneSwatches = true, onShapeChange, style, ...viewerRest } = props;
     const customizer = useJewelryCustomizer({
         defaultMetal,
         defaultStone,
+        defaultShape,
         metalOptions,
         stoneOptions,
+        shapeOptions,
+        availableShapes,
     });
-    return (_jsxs(View, { style: [styles.container, containerStyle], children: [_jsx(View, { style: [{ height: viewerHeight }, style], children: _jsx(Viewer, { ref: ref, metalColor: customizer.metal, stoneColor: customizer.stone, ...viewerRest }) }), _jsxs(View, { style: styles.controls, children: [showMetalSwatches && (_jsx(MetalSwatches, { value: customizer.metal, onChange: (metalId) => customizer.setMetal(metalId), options: customizer.metalOptions })), showStoneSwatches && (_jsx(StoneSwatches, { value: customizer.stone, onChange: (stoneId) => customizer.setStone(stoneId), options: customizer.stoneOptions }))] })] }));
+    const handleShapeChange = (newShape, opt) => {
+        customizer.setShape(newShape);
+        onShapeChange?.(newShape, opt);
+    };
+    return (_jsxs(View, { style: [styles.container, containerStyle], children: [_jsx(View, { style: [{ height: viewerHeight }, style], children: _jsx(Viewer, { ref: ref, metalColor: customizer.metal, stoneColor: customizer.stone, shape: customizer.shape, ...viewerRest }) }), _jsxs(View, { style: styles.controls, children: [showShapeSwatches && (_jsx(ShapeSwatches, { value: customizer.shape, onChange: handleShapeChange, options: customizer.shapeOptions, availableShapes: customizer.availableShapes })), showMetalSwatches && (_jsx(MetalSwatches, { value: customizer.metal, onChange: (metalId) => customizer.setMetal(metalId), options: customizer.metalOptions })), showStoneSwatches && (_jsx(StoneSwatches, { value: customizer.stone, onChange: (stoneId) => customizer.setStone(stoneId), options: customizer.stoneOptions }))] })] }));
 });
 const styles = StyleSheet.create({
     container: {

package/dist/swatches/JewelryCustomizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"JewelryCustomizer.js","sourceRoot":"","sources":["../../src/swatches/JewelryCustomizer.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EACL,IAAI,EACJ,UAAU,GAGX,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EACL,oBAAoB,GAErB,MAAM,2BAA2B,CAAA;AAWlC,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CACzC,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EACJ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,YAAY,GAAG,GAAG,EAClB,iBAAiB,GAAG,IAAI,EACxB,iBAAiB,GAAG,IAAI,EACxB,KAAK,EACL,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,MAAM,UAAU,GAAG,oBAAoB,CAAC;QACtC,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,YAAY;KACb,CAAC,CAAA;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,aAC7C,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,YAC5C,KAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,CAAC,KAAK,EAC5B,UAAU,EAAE,UAAU,CAAC,KAAK,KACxB,UAAU,GACd,GACG,EAEP,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,aACzB,iBAAiB,IAAI,CACpB,KAAC,aAAa,IACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EACnD,OAAO,EAAE,UAAU,CAAC,YAAY,GAChC,CACH,EAEA,iBAAiB,IAAI,CACpB,KAAC,aAAa,IACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EACnD,OAAO,EAAE,UAAU,CAAC,YAAY,GAChC,CACH,IACI,IACF,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,QAAQ,EAAE;QACR,iBAAiB,EAAE,EAAE;QACrB,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAA;AAEF,eAAe,iBAAiB,CAAA"}
+{"version":3,"file":"JewelryCustomizer.js","sourceRoot":"","sources":["../../src/swatches/JewelryCustomizer.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EACL,IAAI,EACJ,UAAU,GAGX,MAAM,cAAc,CAAA;AAErB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EACL,aAAa,GAGd,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,oBAAoB,GAErB,MAAM,2BAA2B,CAAA;AAalC,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CACzC,SAAS,iBAAiB,CAAC,KAAK,EAAE,GAAG;IACnC,MAAM,EACJ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,cAAc,EACd,YAAY,GAAG,GAAG,EAClB,iBAAiB,GAAG,KAAK,EACzB,iBAAiB,GAAG,IAAI,EACxB,iBAAiB,GAAG,IAAI,EACxB,aAAa,EACb,KAAK,EACL,GAAG,UAAU,EACd,GAAG,KAAK,CAAA;IAET,MAAM,UAAU,GAAG,oBAAoB,CAAC;QACtC,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,YAAY;QACZ,eAAe;KAChB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GAAG,CAAC,QAAsB,EAAE,GAAiB,EAAE,EAAE;QACtE,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QAC7B,aAAa,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,aAC7C,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,YAC5C,KAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,UAAU,CAAC,KAAK,EAC5B,UAAU,EAAE,UAAU,CAAC,KAAK,EAC5B,KAAK,EAAE,UAAU,CAAC,KAAK,KACnB,UAAU,GACd,GACG,EAEP,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,aACzB,iBAAiB,IAAI,CACpB,KAAC,aAAa,IACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,QAAQ,EAAE,iBAAiB,EAC3B,OAAO,EAAE,UAAU,CAAC,YAAY,EAChC,eAAe,EAAE,UAAU,CAAC,eAAe,GAC3C,CACH,EAEA,iBAAiB,IAAI,CACpB,KAAC,aAAa,IACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EACnD,OAAO,EAAE,UAAU,CAAC,YAAY,GAChC,CACH,EAEA,iBAAiB,IAAI,CACpB,KAAC,aAAa,IACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,EACnD,OAAO,EAAE,UAAU,CAAC,YAAY,GAChC,CACH,IACI,IACF,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,QAAQ,EAAE;QACR,iBAAiB,EAAE,EAAE;QACrB,UAAU,EAAE,CAAC;KACd;CACF,CAAC,CAAA;AAEF,eAAe,iBAAiB,CAAA"}

package/dist/swatches/ShapeSelect.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type DiamondShape, type ShapeOption } from './ShapeSwatches.js';
+export interface ShapeSelectProps {
+    value?: DiamondShape | string;
+    onChange?: (shapeId: DiamondShape, option?: ShapeOption) => void;
+    options?: ShapeOption[];
+    availableShapes?: (DiamondShape | string)[];
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ShapeSelect({ value, onChange, options, availableShapes, label, placeholder, disabled, style, }: ShapeSelectProps): React.JSX.Element;
+//# sourceMappingURL=ShapeSelect.d.ts.map

package/dist/swatches/ShapeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeSelect.d.ts","sourceRoot":"","sources":["../../src/swatches/ShapeSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAOL,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAA;AACrB,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAA;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IAChE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAA;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAKD,wBAAgB,WAAW,CAAC,EAC1B,KAAe,EACf,QAAQ,EACR,OAA0B,EAC1B,eAAe,EACf,KAAuB,EACvB,WAAoC,EACpC,QAAgB,EAChB,KAAK,GACN,EAAE,gBAAgB,qBA2IlB"}

package/dist/swatches/ShapeSelect.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View, Text, Pressable, Modal, ScrollView, StyleSheet, } from 'react-native';
+import { CANONICAL_SHAPES, } from './ShapeSwatches.js';
+const BUTTON_HIT_SLOP = { top: 6, bottom: 6, left: 6, right: 6 };
+const ITEM_HIT_SLOP = { top: 4, bottom: 4, left: 4, right: 4 };
+export function ShapeSelect({ value = 'round', onChange, options = CANONICAL_SHAPES, availableShapes, label = 'Diamond Shape', placeholder = 'Select diamond shape', disabled = false, style, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const activeOption = options.find((s) => s.id === value);
+    const filteredOptions = availableShapes
+        ? options.filter((s) => availableShapes.includes(s.id))
+        : options;
+    const handleSelect = (s) => {
+        onChange?.(s.id, s);
+        setIsOpen(false);
+    };
+    return (_jsxs(View, { style: [styles.container, style], children: [label && _jsx(Text, { style: styles.label, children: label }), _jsxs(Pressable, { hitSlop: BUTTON_HIT_SLOP, accessibilityRole: "combobox", accessibilityLabel: `${label}: ${activeOption ? activeOption.name : placeholder}`, accessibilityState: { expanded: isOpen, disabled }, disabled: disabled, onPress: () => setIsOpen(true), style: ({ pressed }) => [
+                    styles.triggerButton,
+                    pressed && styles.triggerButtonPressed,
+                    disabled && styles.triggerButtonDisabled,
+                ], children: [_jsxs(View, { style: styles.triggerLeft, children: [_jsx(Text, { style: styles.triggerIcon, children: activeOption?.icon || '💎' }), _jsxs(View, { style: styles.triggerTextContainer, children: [_jsx(Text, { style: styles.triggerName, children: activeOption ? activeOption.name : placeholder }), activeOption?.badge && (_jsx(View, { style: styles.badge, children: _jsx(Text, { style: styles.badgeText, children: activeOption.badge }) }))] })] }), _jsx(Text, { style: styles.chevron, children: "\u25BE" })] }), _jsx(Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: _jsx(Pressable, { style: styles.modalOverlay, onPress: () => setIsOpen(false), children: _jsxs(Pressable, { style: styles.modalSheet, onPress: (e) => e.stopPropagation(), children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { children: [_jsx(Text, { style: styles.modalTitle, children: "Select Diamond Cut" }), _jsx(Text, { style: styles.modalSubtitle, children: "Choose a canonical center diamond shape" })] }), _jsx(Pressable, { hitSlop: BUTTON_HIT_SLOP, accessibilityRole: "button", accessibilityLabel: "Close shape selection", onPress: () => setIsOpen(false), style: styles.closeButton, children: _jsx(Text, { style: styles.closeButtonText, children: "\u2715" }) })] }), _jsx(ScrollView, { style: styles.optionsList, showsVerticalScrollIndicator: true, children: filteredOptions.map((s) => {
+                                    const isSelected = s.id === value;
+                                    return (_jsxs(Pressable, { hitSlop: ITEM_HIT_SLOP, accessibilityRole: "radio", accessibilityState: { selected: isSelected }, accessibilityLabel: `${s.name} diamond cut, ${s.desc}`, onPress: () => handleSelect(s), style: ({ pressed }) => [
+                                            styles.optionItem,
+                                            isSelected && styles.optionItemSelected,
+                                            pressed && styles.optionItemPressed,
+                                        ], children: [_jsxs(View, { style: styles.optionLeft, children: [_jsx(Text, { style: styles.optionIcon, children: s.icon || '💎' }), _jsxs(View, { style: styles.optionDetails, children: [_jsxs(View, { style: styles.optionNameRow, children: [_jsx(Text, { style: [
+                                                                            styles.optionName,
+                                                                            isSelected && styles.optionNameSelected,
+                                                                        ], children: s.name }), s.badge && (_jsx(View, { style: [
+                                                                            styles.optionBadge,
+                                                                            isSelected && styles.optionBadgeSelected,
+                                                                        ], children: _jsx(Text, { style: [
+                                                                                styles.optionBadgeText,
+                                                                                isSelected && styles.optionBadgeTextSelected,
+                                                                            ], children: s.badge }) }))] }), _jsx(Text, { style: styles.optionDesc, children: s.desc })] })] }), isSelected && _jsx(Text, { style: styles.checkmark, children: "\u2713" })] }, s.id));
+                                }) })] }) }) })] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 4,
+    },
+    label: {
+        fontSize: 12,
+        fontWeight: '700',
+        letterSpacing: 0.8,
+        textTransform: 'uppercase',
+        color: '#94a3b8',
+        marginBottom: 6,
+    },
+    triggerButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: '#0f172a',
+        borderWidth: 1,
+        borderColor: '#334155',
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+    },
+    triggerButtonPressed: {
+        backgroundColor: '#1e293b',
+        borderColor: '#c9a96e',
+    },
+    triggerButtonDisabled: {
+        opacity: 0.5,
+    },
+    triggerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    triggerIcon: {
+        fontSize: 16,
+    },
+    triggerTextContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    triggerName: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#f8fafc',
+    },
+    badge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        backgroundColor: 'rgba(201, 169, 110, 0.15)',
+        borderWidth: 1,
+        borderColor: 'rgba(201, 169, 110, 0.35)',
+    },
+    badgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#c9a96e',
+    },
+    chevron: {
+        fontSize: 14,
+        color: '#94a3b8',
+    },
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        justifyContent: 'flex-end',
+    },
+    modalSheet: {
+        backgroundColor: '#0f172a',
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        borderWidth: 1,
+        borderColor: '#334155',
+        maxHeight: '80%',
+        paddingBottom: 24,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderBottomWidth: 1,
+        borderBottomColor: '#1e293b',
+    },
+    modalTitle: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#f8fafc',
+    },
+    modalSubtitle: {
+        fontSize: 12,
+        color: '#94a3b8',
+        marginTop: 2,
+    },
+    closeButton: {
+        width: 28,
+        height: 28,
+        borderRadius: 14,
+        backgroundColor: '#1e293b',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    closeButtonText: {
+        fontSize: 14,
+        color: '#cbd5e1',
+        fontWeight: '600',
+    },
+    optionsList: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+    },
+    optionItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 8,
+        marginVertical: 2,
+        borderWidth: 1,
+        borderColor: 'transparent',
+    },
+    optionItemPressed: {
+        backgroundColor: '#1e293b',
+    },
+    optionItemSelected: {
+        backgroundColor: 'rgba(201, 169, 110, 0.1)',
+        borderColor: '#c9a96e',
+    },
+    optionLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        flex: 1,
+    },
+    optionIcon: {
+        fontSize: 20,
+    },
+    optionDetails: {
+        flex: 1,
+    },
+    optionNameRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    optionName: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#f8fafc',
+    },
+    optionNameSelected: {
+        color: '#c9a96e',
+    },
+    optionBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 1,
+        borderRadius: 4,
+        backgroundColor: '#1e293b',
+    },
+    optionBadgeSelected: {
+        backgroundColor: 'rgba(201, 169, 110, 0.2)',
+    },
+    optionBadgeText: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#94a3b8',
+    },
+    optionBadgeTextSelected: {
+        color: '#c9a96e',
+    },
+    optionDesc: {
+        fontSize: 12,
+        color: '#64748b',
+        marginTop: 2,
+    },
+    checkmark: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#c9a96e',
+        marginLeft: 8,
+    },
+});
+//# sourceMappingURL=ShapeSelect.js.map

package/dist/swatches/ShapeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeSelect.js","sourceRoot":"","sources":["../../src/swatches/ShapeSelect.tsx"],"names":[],"mappings":"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"}

package/dist/swatches/ShapeSwatches.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type DiamondShape = 'none' | 'round' | 'oval' | 'cushion' | 'pear' | 'princess' | 'emerald' | 'asscher' | 'radiant' | 'marquise' | 'heart';
+export interface ShapeOption {
+    id: DiamondShape;
+    name: string;
+    desc: string;
+    badge?: string;
+    icon?: string;
+}
+export declare const CANONICAL_SHAPES: ShapeOption[];
+export interface ShapeSwatchesProps {
+    value?: DiamondShape | string;
+    onChange?: (shapeId: DiamondShape, option?: ShapeOption) => void;
+    options?: ShapeOption[];
+    availableShapes?: (DiamondShape | string)[];
+    showLabel?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function ShapeSwatches({ value, onChange, options, availableShapes, showLabel, style, }: ShapeSwatchesProps): React.JSX.Element;
+export default ShapeSwatches;
+//# sourceMappingURL=ShapeSwatches.d.ts.map

package/dist/swatches/ShapeSwatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeSwatches.d.ts","sourceRoot":"","sources":["../../src/swatches/ShapeSwatches.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EAEf,MAAM,cAAc,CAAA;AAErB,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,OAAO,CAAA;AAEX,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,YAAY,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,gBAAgB,EAAE,WAAW,EAWzC,CAAA;AAID,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAA;IAC7B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IAChE,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,eAAe,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAA;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAe,EACf,QAAQ,EACR,OAA0B,EAC1B,eAAe,EACf,SAAgB,EAChB,KAAK,GACN,EAAE,kBAAkB,qBAwFpB;AAuGD,eAAe,aAAa,CAAA"}

package/dist/swatches/ShapeSwatches.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable, ScrollView, StyleSheet, } from 'react-native';
+export const CANONICAL_SHAPES = [
+    { id: 'round', name: 'Round', desc: '57 brilliant facets', badge: 'Brilliant', icon: '⚪' },
+    { id: 'oval', name: 'Oval', desc: 'Elongated brilliance', badge: 'Modified', icon: '🥚' },
+    { id: 'cushion', name: 'Cushion', desc: 'Pillow-soft corners', badge: 'Antique', icon: '◽' },
+    { id: 'princess', name: 'Princess', desc: 'Sharp geometric cut', badge: 'Square', icon: '◻️' },
+    { id: 'emerald', name: 'Emerald', desc: 'Step-cut hall of mirrors', badge: 'Step Cut', icon: '▭' },
+    { id: 'pear', name: 'Pear', desc: 'Teardrop elegance', badge: 'Teardrop', icon: '💧' },
+    { id: 'marquise', name: 'Marquise', desc: 'Navette eye cut', badge: 'Navette', icon: '👁️' },
+    { id: 'heart', name: 'Heart', desc: 'Romantic silhouette', badge: 'Solitaire', icon: '🤍' },
+    { id: 'radiant', name: 'Radiant', desc: 'Brilliant trimmed corners', badge: 'Hybrid', icon: '💎' },
+    { id: 'asscher', name: 'Asscher', desc: 'Square step facets', badge: 'Art Deco', icon: '⏹️' },
+];
+const CARD_HIT_SLOP = { top: 4, bottom: 4, left: 4, right: 4 };
+export function ShapeSwatches({ value = 'round', onChange, options = CANONICAL_SHAPES, availableShapes, showLabel = true, style, }) {
+    const activeOption = options.find((s) => s.id === value);
+    return (_jsxs(View, { style: [styles.container, style], children: [showLabel && (_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: "Diamond Cut & Shape" }), activeOption && (_jsxs(Text, { style: styles.selectedName, children: [activeOption.name, " \u00B7 ", activeOption.desc] }))] })), _jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.scrollRow, children: options.map((s) => {
+                    const isSelected = value === s.id;
+                    const isAvailable = availableShapes ? availableShapes.includes(s.id) : true;
+                    return (_jsxs(Pressable, { hitSlop: CARD_HIT_SLOP, accessibilityRole: "radio", accessibilityState: { selected: isSelected, disabled: !isAvailable }, accessibilityLabel: `${s.name} diamond cut, ${s.desc}`, disabled: !isAvailable, onPress: () => isAvailable && onChange?.(s.id, s), style: ({ pressed }) => [
+                            styles.swatchCard,
+                            isSelected && styles.swatchCardActive,
+                            !isAvailable && styles.swatchCardDisabled,
+                            pressed && isAvailable && styles.swatchCardPressed,
+                        ], children: [_jsxs(View, { style: styles.cardHeader, children: [_jsx(Text, { style: styles.icon, children: s.icon || '💎' }), s.badge && (_jsx(View, { style: [
+                                            styles.badge,
+                                            isSelected && styles.badgeActive,
+                                        ], children: _jsx(Text, { style: [
+                                                styles.badgeText,
+                                                isSelected && styles.badgeTextActive,
+                                            ], children: s.badge }) }))] }), _jsx(Text, { style: [
+                                    styles.shapeName,
+                                    isSelected && styles.shapeNameActive,
+                                    !isAvailable && styles.shapeNameDisabled,
+                                ], children: s.name }), _jsx(Text, { style: [
+                                    styles.shapeDesc,
+                                    isSelected && styles.shapeDescActive,
+                                    !isAvailable && styles.shapeDescDisabled,
+                                ], numberOfLines: 1, children: isAvailable ? s.desc : 'Unavailable' })] }, s.id));
+                }) })] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        marginVertical: 8,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+        paddingHorizontal: 4,
+    },
+    title: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#334155',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    selectedName: {
+        fontSize: 12,
+        fontWeight: '600',
+        color: '#0284c7',
+    },
+    scrollRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        paddingVertical: 4,
+        paddingHorizontal: 2,
+    },
+    swatchCard: {
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: '#e2e8f0',
+        backgroundColor: '#f8fafc',
+        minWidth: 110,
+    },
+    swatchCardActive: {
+        backgroundColor: '#0f172a',
+        borderColor: '#0f172a',
+    },
+    swatchCardDisabled: {
+        opacity: 0.45,
+        backgroundColor: '#f1f5f9',
+    },
+    swatchCardPressed: {
+        opacity: 0.85,
+        transform: [{ scale: 0.98 }],
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+    },
+    icon: {
+        fontSize: 16,
+    },
+    badge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 4,
+        backgroundColor: '#e2e8f0',
+    },
+    badgeActive: {
+        backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    },
+    badgeText: {
+        fontSize: 9,
+        fontWeight: '700',
+        color: '#475569',
+    },
+    badgeTextActive: {
+        color: '#ffffff',
+    },
+    shapeName: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#1e293b',
+    },
+    shapeNameActive: {
+        color: '#ffffff',
+    },
+    shapeNameDisabled: {
+        color: '#94a3b8',
+    },
+    shapeDesc: {
+        fontSize: 10,
+        color: '#64748b',
+        marginTop: 2,
+    },
+    shapeDescActive: {
+        color: '#94a3b8',
+    },
+    shapeDescDisabled: {
+        color: '#cbd5e1',
+    },
+});
+export default ShapeSwatches;
+//# sourceMappingURL=ShapeSwatches.js.map

package/dist/swatches/ShapeSwatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeSwatches.js","sourceRoot":"","sources":["../../src/swatches/ShapeSwatches.tsx"],"names":[],"mappings":"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"}

package/dist/swatches/index.d.ts

@@ -1,5 +1,7 @@
 export { MetalSwatches, type MetalSwatchesProps } from './MetalSwatches.js';
 export { StoneSwatches, type StoneSwatchesProps } from './StoneSwatches.js';
+export { ShapeSwatches, type ShapeSwatchesProps, type DiamondShape, type ShapeOption, CANONICAL_SHAPES, } from './ShapeSwatches.js';
+export { ShapeSelect, type ShapeSelectProps } from './ShapeSelect.js';
 export { useJewelryCustomizer, type UseJewelryCustomizerOptions, type UseJewelryCustomizerReturn, } from './useJewelryCustomizer.js';
 export { JewelryCustomizer, type JewelryCustomizerProps, default, } from './JewelryCustomizer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/swatches/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/swatches/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EACL,oBAAoB,EACpB,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,GAChC,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,OAAO,GACR,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/swatches/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACrE,OAAO,EACL,oBAAoB,EACpB,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,GAChC,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,OAAO,GACR,MAAM,wBAAwB,CAAA"}

package/dist/swatches/index.js

@@ -1,5 +1,7 @@
 export { MetalSwatches } from './MetalSwatches.js';
 export { StoneSwatches } from './StoneSwatches.js';
+export { ShapeSwatches, CANONICAL_SHAPES, } from './ShapeSwatches.js';
+export { ShapeSelect } from './ShapeSelect.js';
 export { useJewelryCustomizer, } from './useJewelryCustomizer.js';
 export { JewelryCustomizer, default, } from './JewelryCustomizer.js';
 //# sourceMappingURL=index.js.map

package/dist/swatches/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/swatches/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EACL,oBAAoB,GAGrB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EAEjB,OAAO,GACR,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/swatches/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EACL,aAAa,EAIb,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,WAAW,EAAyB,MAAM,kBAAkB,CAAA;AACrE,OAAO,EACL,oBAAoB,GAGrB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,iBAAiB,EAEjB,OAAO,GACR,MAAM,wBAAwB,CAAA"}

package/dist/swatches/useJewelryCustomizer.d.ts

@@ -1,22 +1,32 @@
 import { type MetalColorProp, type StoneColorProp, type MetalPreset, type StonePreset } from '@thinkersteps_labs/3d-viewer-core';
+import { type DiamondShape, type ShapeOption } from './ShapeSwatches.js';
 export interface UseJewelryCustomizerOptions {
     defaultMetal?: MetalColorProp;
     defaultStone?: StoneColorProp;
+    defaultShape?: DiamondShape;
     metalOptions?: MetalPreset[];
     stoneOptions?: StonePreset[];
+    shapeOptions?: ShapeOption[];
+    availableShapes?: (DiamondShape | string)[];
 }
 export interface UseJewelryCustomizerReturn {
     metal: MetalColorProp;
     setMetal: (val: MetalColorProp) => void;
     stone: StoneColorProp;
     setStone: (val: StoneColorProp) => void;
+    shape: DiamondShape;
+    setShape: (val: DiamondShape) => void;
     metalPreset?: MetalPreset;
     stonePreset?: StonePreset;
+    shapeOption?: ShapeOption;
     metalOptions: MetalPreset[];
     stoneOptions: StonePreset[];
+    shapeOptions: ShapeOption[];
+    availableShapes?: (DiamondShape | string)[];
     viewerProps: {
         metalColor: MetalColorProp;
         stoneColor: StoneColorProp;
+        shape: DiamondShape;
     };
 }
 export declare function useJewelryCustomizer(options?: UseJewelryCustomizerOptions): UseJewelryCustomizerReturn;

package/dist/swatches/useJewelryCustomizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useJewelryCustomizer.d.ts","sourceRoot":"","sources":["../../src/swatches/useJewelryCustomizer.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAA;AAE1C,MAAM,WAAW,2BAA2B;IAC1C,YAAY,CAAC,EAAE,cAAc,CAAA;IAC7B,YAAY,CAAC,EAAE,cAAc,CAAA;IAC7B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;CAC7B;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACvC,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,WAAW,EAAE;QACX,UAAU,EAAE,cAAc,CAAA;QAC1B,UAAU,EAAE,cAAc,CAAA;KAC3B,CAAA;CACF;AAED,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CAiC5B"}
+{"version":3,"file":"useJewelryCustomizer.d.ts","sourceRoot":"","sources":["../../src/swatches/useJewelryCustomizer.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EACjB,MAAM,oBAAoB,CAAA;AAE3B,MAAM,WAAW,2BAA2B;IAC1C,YAAY,CAAC,EAAE,cAAc,CAAA;IAC7B,YAAY,CAAC,EAAE,cAAc,CAAA;IAC7B,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,eAAe,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAA;CAC5C;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACvC,KAAK,EAAE,cAAc,CAAA;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAA;IACvC,KAAK,EAAE,YAAY,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;IACrC,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,eAAe,CAAC,EAAE,CAAC,YAAY,GAAG,MAAM,CAAC,EAAE,CAAA;IAC3C,WAAW,EAAE;QACX,UAAU,EAAE,cAAc,CAAA;QAC1B,UAAU,EAAE,cAAc,CAAA;QAC1B,KAAK,EAAE,YAAY,CAAA;KACpB,CAAA;CACF;AAED,wBAAgB,oBAAoB,CAClC,OAAO,GAAE,2BAAgC,GACxC,0BAA0B,CA2D5B"}

package/dist/swatches/useJewelryCustomizer.js

@@ -1,24 +1,42 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { CANONICAL_METAL_PRESETS, CANONICAL_STONE_PRESETS, getMetalPreset, getStonePreset, } from '@thinkersteps_labs/3d-viewer-core';
+import { CANONICAL_SHAPES, } from './ShapeSwatches.js';
 export function useJewelryCustomizer(options = {}) {
-    const { defaultMetal = 'yellow-gold-18k', defaultStone = 'diamond-colorless', metalOptions = CANONICAL_METAL_PRESETS, stoneOptions = CANONICAL_STONE_PRESETS, } = options;
-    const [metal, setMetal] = useState(defaultMetal);
-    const [stone, setStone] = useState(defaultStone);
+    const { defaultMetal = 'yellow-gold-18k', defaultStone = 'diamond-colorless', defaultShape = 'round', metalOptions = CANONICAL_METAL_PRESETS, stoneOptions = CANONICAL_STONE_PRESETS, shapeOptions = CANONICAL_SHAPES, availableShapes, } = options;
+    const [metal, setMetalState] = useState(defaultMetal);
+    const [stone, setStoneState] = useState(defaultStone);
+    const [shape, setShapeState] = useState(defaultShape);
+    const setMetal = useCallback((val) => {
+        setMetalState(val);
+    }, []);
+    const setStone = useCallback((val) => {
+        setStoneState(val);
+    }, []);
+    const setShape = useCallback((val) => {
+        setShapeState(val);
+    }, []);
     const metalPreset = useMemo(() => getMetalPreset(metal), [metal]);
     const stonePreset = useMemo(() => getStonePreset(stone), [stone]);
+    const shapeOption = useMemo(() => shapeOptions.find((s) => s.id === shape), [shapeOptions, shape]);
     const viewerProps = useMemo(() => ({
         metalColor: metal,
         stoneColor: stone,
-    }), [metal, stone]);
+        shape,
+    }), [metal, stone, shape]);
     return {
         metal,
         setMetal,
         stone,
         setStone,
+        shape,
+        setShape,
         metalPreset,
         stonePreset,
+        shapeOption,
         metalOptions,
         stoneOptions,
+        shapeOptions,
+        availableShapes,
         viewerProps,
     };
 }