gospelo-iconcraft-react 0.3.5 → 0.3.7

package/dist/index.d.ts

@@ -571,6 +571,13 @@ interface IconCraftViewProps {
     notchColor?: string;
     /** Reticle color (default: '#000') */
     reticleColor?: string;
+    /**
+     * External CSS rotation preview (degrees).
+     * Applied only to the shape+icon layer via CSS transform,
+     * keeping dial and reticle layers fixed.
+     * Set to null/undefined to disable.
+     */
+    cssRotation?: number | null;
 }
 /** Props passed to custom reticle renderer */
 interface ReticleProps {
@@ -611,7 +618,7 @@ interface DialLabelProps {
  * <IconCraftView instance={icon} zIndex={10} />
  * ```
  */
-declare function IconCraftView({ instance, animation, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, showRotationDial, onRotationChange, rotationSnap, renderRing: renderRingProp, renderNotch: renderNotchProp, renderLabel: renderLabelProp, dialPreset, showReticle, renderReticle: renderReticleProp, reticlePreset, dialColor: dialColorProp, notchColor: notchColorProp, reticleColor: reticleColorProp, }: IconCraftViewProps): react_jsx_runtime.JSX.Element | null;
+declare function IconCraftView({ instance, animation, animationTarget, animateOnHover, zIndex, className, style, onClick, onLoad, onError, showRotationDial, onRotationChange, rotationSnap, renderRing: renderRingProp, renderNotch: renderNotchProp, renderLabel: renderLabelProp, dialPreset, showReticle, renderReticle: renderReticleProp, reticlePreset, dialColor: dialColorProp, notchColor: notchColorProp, reticleColor: reticleColorProp, cssRotation, }: IconCraftViewProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * IconCraftSimple Props

package/dist/index.js

@@ -1578,7 +1578,8 @@ function IconCraftView({
   reticlePreset,
   dialColor: dialColorProp,
   notchColor: notchColorProp,
-  reticleColor: reticleColorProp
+  reticleColor: reticleColorProp,
+  cssRotation
 }) {
   const resolvedDial = dialPreset ?? (renderRingProp || renderNotchProp || renderLabelProp ? void 0 : dialPresetDotted);
   const renderRing = resolvedDial?.renderRing ?? renderRingProp;
@@ -1952,12 +1953,18 @@ function IconCraftView({
     return null;
   }
   const previewDeg = isRotating ? dialDeg - rotation : 0;
+  const cssRotateDeg = cssRotation != null ? cssRotation - rotation : 0;
+  const shapeTransformDeg = previewDeg || cssRotateDeg;
   if (!showRotationDial && !showReticle) {
     return /* @__PURE__ */ jsx2(
       "div",
       {
         className,
-        style: { ...containerStyle, ...cssVars },
+        style: {
+          ...containerStyle,
+          ...cssVars,
+          ...shapeTransformDeg ? { transform: `rotate(${shapeTransformDeg}deg)` } : {}
+        },
         onClick,
         onMouseEnter: hoverAnim ? () => setIsHovering(true) : void 0,
         onMouseLeave: hoverAnim ? () => setIsHovering(false) : void 0,
@@ -2038,7 +2045,7 @@ function IconCraftView({
               position: "relative",
               zIndex: 1,
               ...cssVars,
-              ...previewDeg !== 0 ? { transform: `rotate(${previewDeg}deg)` } : {}
+              ...shapeTransformDeg ? { transform: `rotate(${shapeTransformDeg}deg)` } : {}
             },
             dangerouslySetInnerHTML: { __html: sanitizeSvg(animationStyles + processedSvg) }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gospelo-iconcraft-react",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "IconCraft React components - 3D decorative icon shapes from SVG",
   "license": "MIT",
   "author": "gorosun <goro-hayakawa@no-studio.net>",
@@ -32,7 +32,7 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "gospelo-iconcraft-wasm": "workspace:*",
+    "gospelo-iconcraft-wasm": "^0.3.5",
     "ulid": "^3.0.2"
   },
   "devDependencies": {