@bbki.ng/components 2.1.24 → 2.1.27

package/dist/index.cjs

@@ -1122,7 +1122,7 @@ var Gallery = (props) => {
 // lib/loading-spiral/LoadingSpiral.tsx
 var import_phenomenon = __toESM(require("phenomenon"), 1);
 var import_classnames13 = __toESM(require("classnames"), 1);
-var import_react23 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // lib/loading-spiral/createSettings.ts
 var createSettings = (settings) => {
@@ -1147,10 +1147,7 @@ var createSettings = (settings) => {
 
 // lib/loading-spiral/constants.ts
 var VERTEX_SHADER = `
-  attribute vec3 ${"aColor" /* COLOR */};
-  attribute float ${"aOffsetY" /* OFFSET_Y */};
   attribute float ${"aPercent" /* PERCENT */};
-  attribute float ${"aLength" /* LENGTH */};
   attribute float ${"aPointSize" /* POINT_SIZE */};
 
   uniform mat4 uProjectionMatrix;
@@ -1160,10 +1157,10 @@ var VERTEX_SHADER = `
 
   varying vec3 vColor;
   
-  vec3 curve(float _percent, float _length) {
+  vec3 curve(float _percent) {
     const float PI2 = 3.141592653589793 * 2.0;
-    float radius = 0.028 / 0.15 * _length;
-
+    const float _length = 0.3;
+    const float radius = 0.056;
     float t = mod(_percent, 0.25) / 0.25;
     t = mod(_percent, 0.25) - (2.0 * (1.0 - t) * t * -0.0185 + t * t * 0.25);
     float x = _length * sin(PI2 * _percent);
@@ -1188,75 +1185,35 @@ var VERTEX_SHADER = `
     );
   }
 
-  mat4 translateY(float _offset){
-    return mat4(
-      1.0, 0.0, 0.0, 0.0,
-      0.0, 1.0, 0.0, -1.0 * _offset,
-      0.0, 0.0, 1.0, 0.0,
-      0.0, 0.0, 0.0, 1.0
-    );
-  }
-  
   void main(){
     gl_Position = uProjectionMatrix
      * uModelMatrix
      * uViewMatrix
      * rotateX(uProgress)
-     * vec4(curve(${"aPercent" /* PERCENT */}, ${"aLength" /* LENGTH */}), 1.0)
-     * translateY(${"aOffsetY" /* OFFSET_Y */});
+     * vec4(curve(${"aPercent" /* PERCENT */}), 1.0);
 
     gl_PointSize = ${"aPointSize" /* POINT_SIZE */};
-    vColor = ${"aColor" /* COLOR */};
   }
 `;
 var FRAGMENT_SHADER = `
   precision mediump float;
   uniform float uProgress;
-  varying vec3 vColor;
   void main(){
-    gl_FragColor = vec4(vColor, 1.0);
+    gl_FragColor = vec4(0.81, 0.83, 0.85, 1.0);
   }
 `;
 
-// lib/loading-spiral/utils.ts
-var rgba = (val) => {
-  const [r, g, b, a] = val;
-  return [r / 255, g / 255, b / 255, a];
-};
-
 // lib/loading-spiral/createOptions.ts
-var DEFAULT_OPT = {
-  multiplier: 5e3,
-  color: [209, 213, 219, 1],
-  offset: -0.3,
-  length: 0.3
-};
-var createOptions = (opt = DEFAULT_OPT) => {
-  const { multiplier, color, length, offset = -1 * 0.3 } = opt;
+var createOptions = () => {
   const attributes = [
     {
       name: "aPercent" /* PERCENT */,
       data: (i, total) => [i / total],
       size: 1
     },
-    {
-      name: "aLength" /* LENGTH */,
-      data: () => [length],
-      size: 1
-    },
-    {
-      name: "aColor" /* COLOR */,
-      data: () => rgba(color),
-      size: 3
-    },
-    {
-      name: "aOffsetY" /* OFFSET_Y */,
-      data: () => [offset],
-      size: 1
-    },
     {
       name: "aPointSize" /* POINT_SIZE */,
-      data: () => [window.devicePixelRatio * 1.5],
+      data: () => [window.devicePixelRatio * 1.3],
       size: 1
     }
   ];
@@ -1269,57 +1226,41 @@ var createOptions = (opt = DEFAULT_OPT) => {
   return {
     uniforms,
     attributes,
-    multiplier,
+    multiplier: 4e3,
     vertex: VERTEX_SHADER,
     fragment: FRAGMENT_SHADER
   };
 };
 
-// lib/loading-spiral/useCanvasRef.ts
-var import_react22 = require("react");
-var useResizedCanvasRef = (maxSize) => {
-  const canvasRef = (0, import_react22.useRef)(null);
-  const containerRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
-    const canvas = canvasRef.current;
-    const container = containerRef.current;
-    if (!canvas || !container)
-      return;
-    const { width, height } = container.getBoundingClientRect();
-    const canvasSize = Math.min(width, height);
-    const size = Math.min(canvasSize, maxSize);
-    canvas.setAttribute("width", `${size}`);
-    canvas.setAttribute("height", `${size}`);
-  }, []);
-  return {
-    canvasRef,
-    containerRef
-  };
-};
-
 // lib/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  const { className, canvas, step, maxWidth = 1e3, ...rest } = props || {};
-  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth);
-  (0, import_react23.useEffect)(() => {
+  const { className, step } = props || {};
+  const canvasRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (!canvasRef.current) {
       return;
     }
     const phenomenon = new import_phenomenon.default({
       settings: createSettings({ canvas: canvasRef.current, step }),
       context: {
-        antialias: true
+        antialias: true,
+        alpha: true
       }
     });
     phenomenon.add(
       "spiral",
-      createOptions(Object.assign({}, DEFAULT_OPT, rest))
+      createOptions()
     );
   }, []);
-  return /* @__PURE__ */ import_react23.default.createElement("canvas", {
+  return /* @__PURE__ */ import_react22.default.createElement("canvas", {
+    style: {
+      maxWidth: 500,
+      maxHeight: 500,
+      imageRendering: "pixelated"
+    },
     ref: canvasRef,
     className: (0, import_classnames13.default)(
-      "h-full w-full overflow-hidden flex justify-center items-center",
+      "h-full w-full overflow-hidden flex justify-center items-center aspect-1",
       className
     )
   });