@paper-design/shaders-react 0.0.36 → 0.0.38

package/dist/shaders/waves.d.ts

@@ -0,0 +1,14 @@
+import { type ShaderComponentProps } from '../shader-mount.js';
+import { type WavesParams, type ShaderPreset } from '@paper-design/shaders';
+export interface WavesProps extends ShaderComponentProps, WavesParams {
+}
+type WavesPreset = ShaderPreset<WavesParams>;
+export declare const defaultPreset: WavesPreset;
+export declare const spikesPreset: WavesPreset;
+export declare const groovyPreset: WavesPreset;
+export declare const tangledUpPreset: WavesPreset;
+export declare const zigZagPreset: WavesPreset;
+export declare const waveRidePreset: WavesPreset;
+export declare const wavesPresets: WavesPreset[];
+export declare const Waves: React.FC<WavesProps>;
+export {};

package/dist/shaders/waves.js

@@ -0,0 +1,178 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import { memo } from "react";
+import { ShaderMount } from "../shader-mount.js";
+import { colorPropsAreEqual } from "../color-props-are-equal.js";
+import {
+  defaultPatternSizing,
+  getShaderColorFromString,
+  wavesFragmentShader,
+  ShaderFitOptions
+} from "@paper-design/shaders";
+import { jsx } from "react/jsx-runtime";
+const defaultPreset = {
+  name: "Default",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1.6,
+    rotation: 0,
+    colorFront: "#ffffff",
+    colorBack: "#102c70",
+    shape: 0,
+    frequency: 0.5,
+    amplitude: 0.6,
+    spacing: 0.65,
+    proportion: 0.15,
+    softness: 0
+  }
+};
+const spikesPreset = {
+  name: "Spikes",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1 / 2.3,
+    rotation: 0,
+    colorFront: "#fdffe6",
+    colorBack: "#34123b",
+    shape: 0,
+    frequency: 0.5,
+    amplitude: 0.9,
+    spacing: 0.37,
+    proportion: 0.93,
+    softness: 0.15
+  }
+};
+const groovyPreset = {
+  name: "Groovy",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1 / 0.5,
+    rotation: 1,
+    colorFront: "#fcfcee",
+    colorBack: "#ff896b",
+    shape: 2.37,
+    frequency: 0.2,
+    amplitude: 0.67,
+    spacing: 1.17,
+    proportion: 0.57,
+    softness: 0
+  }
+};
+const tangledUpPreset = {
+  name: "Tangled up",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1 / 3.04,
+    rotation: 1,
+    colorFront: "#133a41",
+    colorBack: "#c2d8b6",
+    shape: 3,
+    frequency: 0.44,
+    amplitude: 0.57,
+    spacing: 1.05,
+    proportion: 0.97,
+    softness: 0
+  }
+};
+const zigZagPreset = {
+  name: "Zig zag",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1 / 2.7,
+    rotation: 1,
+    colorFront: "#000000",
+    colorBack: "#e6e6e6",
+    shape: 0,
+    frequency: 0.6,
+    amplitude: 0.8,
+    spacing: 0.5,
+    proportion: 1,
+    softness: 0.5
+  }
+};
+const waveRidePreset = {
+  name: "Ride the wave",
+  params: {
+    ...defaultPatternSizing,
+    scale: 1 / 0.84,
+    rotation: 0,
+    colorFront: "#fdffe6",
+    colorBack: "#1f1f1f",
+    shape: 2.23,
+    frequency: 0.1,
+    amplitude: 0.6,
+    spacing: 0.41,
+    proportion: 0.99,
+    softness: 0
+  }
+};
+const wavesPresets = [
+  defaultPreset,
+  spikesPreset,
+  groovyPreset,
+  tangledUpPreset,
+  zigZagPreset,
+  waveRidePreset
+];
+const Waves = memo(function WavesImpl({
+  // Own props
+  colorFront = defaultPreset.params.colorFront,
+  colorBack = defaultPreset.params.colorBack,
+  shape = defaultPreset.params.shape,
+  frequency = defaultPreset.params.frequency,
+  amplitude = defaultPreset.params.amplitude,
+  spacing = defaultPreset.params.spacing,
+  proportion = defaultPreset.params.proportion,
+  softness = defaultPreset.params.softness,
+  // Sizing props
+  fit = defaultPreset.params.fit,
+  scale = defaultPreset.params.scale,
+  rotation = defaultPreset.params.rotation,
+  offsetX = defaultPreset.params.offsetX,
+  offsetY = defaultPreset.params.offsetY,
+  originX = defaultPreset.params.originX,
+  originY = defaultPreset.params.originY,
+  worldWidth = defaultPreset.params.worldWidth,
+  worldHeight = defaultPreset.params.worldHeight,
+  // Other props
+  maxPixelCount = 6016 * 3384,
+  // Higher max resolution for this shader
+  ...props
+}) {
+  const uniforms = {
+    // Own uniforms
+    u_colorFront: getShaderColorFromString(colorFront),
+    u_colorBack: getShaderColorFromString(colorBack),
+    u_shape: shape,
+    u_frequency: frequency,
+    u_amplitude: amplitude,
+    u_spacing: spacing,
+    u_proportion: proportion,
+    u_softness: softness,
+    // Sizing uniforms
+    u_fit: ShaderFitOptions[fit],
+    u_scale: scale,
+    u_rotation: rotation,
+    u_offsetX: offsetX,
+    u_offsetY: offsetY,
+    u_originX: originX,
+    u_originY: originY,
+    u_worldWidth: worldWidth,
+    u_worldHeight: worldHeight
+  };
+  return /* @__PURE__ */ jsx(ShaderMount, { ...props, fragmentShader: wavesFragmentShader, uniforms });
+}, colorPropsAreEqual);
+export {
+  Waves,
+  defaultPreset,
+  groovyPreset,
+  spikesPreset,
+  tangledUpPreset,
+  waveRidePreset,
+  wavesPresets,
+  zigZagPreset
+};
+//# sourceMappingURL=waves.js.map

package/dist/shaders/waves.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shaders/waves.tsx"],
+  "sourcesContent": ["import { memo } from 'react';\nimport { ShaderMount, type ShaderComponentProps } from '../shader-mount.js';\nimport { colorPropsAreEqual } from '../color-props-are-equal.js';\nimport {\n  defaultPatternSizing,\n  getShaderColorFromString,\n  wavesFragmentShader,\n  ShaderFitOptions,\n  type WavesParams,\n  type WavesUniforms,\n  type ShaderPreset,\n} from '@paper-design/shaders';\n\nexport interface WavesProps extends ShaderComponentProps, WavesParams {}\n\ntype WavesPreset = ShaderPreset<WavesParams>;\n\nexport const defaultPreset: WavesPreset = {\n  name: 'Default',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1.6,\n    rotation: 0,\n    colorFront: '#ffffff',\n    colorBack: '#102c70',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.6,\n    spacing: 0.65,\n    proportion: 0.15,\n    softness: 0,\n  },\n};\n\nexport const spikesPreset: WavesPreset = {\n  name: 'Spikes',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.3,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#34123b',\n    shape: 0,\n    frequency: 0.5,\n    amplitude: 0.9,\n    spacing: 0.37,\n    proportion: 0.93,\n    softness: 0.15,\n  },\n};\n\nexport const groovyPreset: WavesPreset = {\n  name: 'Groovy',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.5,\n    rotation: 1,\n    colorFront: '#fcfcee',\n    colorBack: '#ff896b',\n    shape: 2.37,\n    frequency: 0.2,\n    amplitude: 0.67,\n    spacing: 1.17,\n    proportion: 0.57,\n    softness: 0,\n  },\n};\n\nexport const tangledUpPreset: WavesPreset = {\n  name: 'Tangled up',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 3.04,\n    rotation: 1,\n    colorFront: '#133a41',\n    colorBack: '#c2d8b6',\n    shape: 3,\n    frequency: 0.44,\n    amplitude: 0.57,\n    spacing: 1.05,\n    proportion: 0.97,\n    softness: 0,\n  },\n};\n\nexport const zigZagPreset: WavesPreset = {\n  name: 'Zig zag',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 2.7,\n    rotation: 1,\n    colorFront: '#000000',\n    colorBack: '#e6e6e6',\n    shape: 0,\n    frequency: 0.6,\n    amplitude: 0.8,\n    spacing: 0.5,\n    proportion: 1,\n    softness: 0.5,\n  },\n};\n\nexport const waveRidePreset: WavesPreset = {\n  name: 'Ride the wave',\n  params: {\n    ...defaultPatternSizing,\n    scale: 1 / 0.84,\n    rotation: 0,\n    colorFront: '#fdffe6',\n    colorBack: '#1f1f1f',\n    shape: 2.23,\n    frequency: 0.1,\n    amplitude: 0.6,\n    spacing: 0.41,\n    proportion: 0.99,\n    softness: 0,\n  },\n};\n\nexport const wavesPresets: WavesPreset[] = [\n  defaultPreset,\n  spikesPreset,\n  groovyPreset,\n  tangledUpPreset,\n  zigZagPreset,\n  waveRidePreset,\n];\n\nexport const Waves: React.FC<WavesProps> = memo(function WavesImpl({\n  // Own props\n  colorFront = defaultPreset.params.colorFront,\n  colorBack = defaultPreset.params.colorBack,\n  shape = defaultPreset.params.shape,\n  frequency = defaultPreset.params.frequency,\n  amplitude = defaultPreset.params.amplitude,\n  spacing = defaultPreset.params.spacing,\n  proportion = defaultPreset.params.proportion,\n  softness = defaultPreset.params.softness,\n\n  // Sizing props\n  fit = defaultPreset.params.fit,\n  scale = defaultPreset.params.scale,\n  rotation = defaultPreset.params.rotation,\n  offsetX = defaultPreset.params.offsetX,\n  offsetY = defaultPreset.params.offsetY,\n  originX = defaultPreset.params.originX,\n  originY = defaultPreset.params.originY,\n  worldWidth = defaultPreset.params.worldWidth,\n  worldHeight = defaultPreset.params.worldHeight,\n\n  // Other props\n  maxPixelCount = 6016 * 3384, // Higher max resolution for this shader\n  ...props\n}: WavesProps) {\n  const uniforms = {\n    // Own uniforms\n    u_colorFront: getShaderColorFromString(colorFront),\n    u_colorBack: getShaderColorFromString(colorBack),\n    u_shape: shape,\n    u_frequency: frequency,\n    u_amplitude: amplitude,\n    u_spacing: spacing,\n    u_proportion: proportion,\n    u_softness: softness,\n\n    // Sizing uniforms\n    u_fit: ShaderFitOptions[fit],\n    u_scale: scale,\n    u_rotation: rotation,\n    u_offsetX: offsetX,\n    u_offsetY: offsetY,\n    u_originX: originX,\n    u_originY: originY,\n    u_worldWidth: worldWidth,\n    u_worldHeight: worldHeight,\n  } satisfies WavesUniforms;\n\n  return <ShaderMount {...props} fragmentShader={wavesFragmentShader} uniforms={uniforms} />;\n}, colorPropsAreEqual);\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/use-merge-refs.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ * @see https://floating-ui.com/docs/react-utils#usemergerefs
+ */
+export declare function useMergeRefs<Instance>(refs: Array<React.Ref<Instance> | undefined>): null | React.Ref<Instance>;

package/dist/use-merge-refs.js

@@ -0,0 +1,48 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *                    Paper Shaders                    *
+ *       https://github.com/paper-design/shaders       *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import * as React from "react";
+function useMergeRefs(refs) {
+  const cleanupRef = React.useRef(void 0);
+  const refEffect = React.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup?.());
+    };
+  }, refs);
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+  }, refs);
+}
+export {
+  useMergeRefs
+};
+//# sourceMappingURL=use-merge-refs.js.map

package/dist/use-merge-refs.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/use-merge-refs.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/react-utils#usemergerefs\n */\nexport function useMergeRefs<Instance>(refs: Array<React.Ref<Instance> | undefined>): null | React.Ref<Instance> {\n  const cleanupRef = React.useRef<void | (() => void)>(undefined);\n\n  const refEffect = React.useCallback((instance: Instance | null) => {\n    const cleanups = refs.map((ref) => {\n      if (ref == null) {\n        return;\n      }\n\n      if (typeof ref === 'function') {\n        const refCallback = ref;\n        const refCleanup: void | (() => void) = refCallback(instance);\n        return typeof refCleanup === 'function'\n          ? refCleanup\n          : () => {\n              refCallback(null);\n            };\n      }\n\n      (ref as React.RefObject<Instance | null>).current = instance;\n      return () => {\n        (ref as React.RefObject<Instance | null>).current = null;\n      };\n    });\n\n    return () => {\n      cleanups.forEach((refCleanup) => refCleanup?.());\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref == null)) {\n      return null;\n    }\n\n    return (value) => {\n      if (cleanupRef.current) {\n        cleanupRef.current();\n        (cleanupRef as React.RefObject<void | (() => void)>).current = undefined;\n      }\n\n      if (value != null) {\n        (cleanupRef as React.RefObject<void | (() => void)>).current = refEffect(value);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, refs);\n}\n"],
+  "mappings": ";;;;;AAAA,YAAY,WAAW;AAMhB,SAAS,aAAuB,MAA0E;AAC/G,QAAM,aAAa,MAAM,OAA4B,MAAS;AAE9D,QAAM,YAAY,MAAM,YAAY,CAAC,aAA8B;AACjE,UAAM,WAAW,KAAK,IAAI,CAAC,QAAQ;AACjC,UAAI,OAAO,MAAM;AACf;AAAA,MACF;AAEA,UAAI,OAAO,QAAQ,YAAY;AAC7B,cAAM,cAAc;AACpB,cAAM,aAAkC,YAAY,QAAQ;AAC5D,eAAO,OAAO,eAAe,aACzB,aACA,MAAM;AACJ,sBAAY,IAAI;AAAA,QAClB;AAAA,MACN;AAEA,MAAC,IAAyC,UAAU;AACpD,aAAO,MAAM;AACX,QAAC,IAAyC,UAAU;AAAA,MACtD;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,eAAS,QAAQ,CAAC,eAAe,aAAa,CAAC;AAAA,IACjD;AAAA,EAEF,GAAG,IAAI;AAEP,SAAO,MAAM,QAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,OAAO,IAAI,GAAG;AACpC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,UAAI,WAAW,SAAS;AACtB,mBAAW,QAAQ;AACnB,QAAC,WAAoD,UAAU;AAAA,MACjE;AAEA,UAAI,SAAS,MAAM;AACjB,QAAC,WAAoD,UAAU,UAAU,KAAK;AAAA,MAChF;AAAA,IACF;AAAA,EAEF,GAAG,IAAI;AACT;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paper-design/shaders-react",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "type-check": "tsc --project tsconfig.json"
   },
   "dependencies": {
-    "@paper-design/shaders": "0.0.32"
+    "@paper-design/shaders": "0.0.34"
   },
   "devDependencies": {
     "@types/react": "19.1.0"
@@ -38,4 +38,4 @@
       "optional": true
     }
   }
-}
+}