@moises.ai/design-system 3.9.25 → 3.9.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.9.25",
+  "version": "3.9.27",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -1,112 +1,36 @@
-import { useState } from 'react'
 import classNames from 'classnames'
-
-const palettes = {
-  lyrics: ['#0f2a4f', '#1a3a6b', '#2a5a8b', '#1a4a7b', '#3a6a9b', '#152e55'],
-  stems: ['#083a48', '#0a4a5a', '#1a5a6a', '#0f3a4a', '#2a6a7a', '#1a6070'],
-  voice: ['#3a1a0a', '#5a2a10', '#7a3a1a', '#4a2010', '#8a4a2a', '#6a3018'],
-  studio: ['#083838', '#0a4a4a', '#1a5a5a', '#0a3a3a', '#2a6a6a', '#0f5050'],
-  master: ['#1a1030', '#2a1a4a', '#3a2a5a', '#4a3a6a', '#2a1848', '#352060'],
-}
-
-function hashSeed(str) {
-  let h = 0
-  for (let i = 0; i < str.length; i++) {
-    h = (Math.imul(31, h) + str.charCodeAt(i)) | 0
-  }
-  return h >>> 0
-}
-
-function createRng(seed) {
-  let s = hashSeed(String(seed))
-  return () => {
-    s = (s + 0x6d2b79f5) | 0
-    let t = Math.imul(s ^ (s >>> 15), 1 | s)
-    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
-  }
-}
-
-function generatePattern(type, seed) {
-  const rng = createRng(seed)
-  const colors = palettes[type] || palettes.lyrics
-  const pick = () => colors[Math.floor(rng() * colors.length)]
-
-  const bg = pick()
-
-  const blobCount = 6 + Math.floor(rng() * 3)
-  const blobs = Array.from({ length: blobCount }, () => {
-    const midStop = 10 + Math.floor(rng() * 20)
-    return {
-      x: -20 + rng() * 140,
-      y: -20 + rng() * 140,
-      size: 140 + rng() * 120,
-      fill: pick(),
-      midStop,
-    }
-  })
-
-  return { bg, blobs }
-}
+import lyrics from './Patterns/thumb-song-lyrics.jpg'
+import mastering from './Patterns/thumb-song-master.jpg'
+import stems from './Patterns/thumb-song-stems.jpg'
+import studio from './Patterns/thumb-song-studio.jpg'
+import voice from './Patterns/thumb-song-voice.jpg'
 
 export const ProductsBrandPattern = ({
   className,
   size = '40px',
   type = 'lyrics',
   cover,
-  title,
   ...props
 }) => {
-  const [randomSeed] = useState(() => String(Math.random()))
-
-  if (cover) {
-    return (
-      <img
-        src={cover}
-        alt={`${type} pattern`}
-        width={size}
-        height={size}
-        draggable={false}
-        className={classNames(className)}
-        {...props}
-      />
-    )
+  const patterns = {
+    'stems': stems,
+    'voice': voice,
+    'studio': studio,
+    'master': mastering,
+    'lyrics': lyrics,
   }
 
-  const effectiveSeed = title != null ? title : randomSeed
-  const { bg, blobs } = generatePattern(type, effectiveSeed)
-
+  const pattern = cover || patterns[type]
   return (
-    <div
-      aria-label={`${type} pattern`}
-      role="img"
+    <img
+      src={pattern}
+      alt={`${type} pattern`}
+      width={size}
+      height={size}
+      draggable={false}
       className={classNames(className)}
-      style={{
-        position: 'relative',
-        width: size,
-        height: size,
-        overflow: 'hidden',
-        backgroundColor: bg,
-        flexShrink: 0,
-      }}
       {...props}
-    >
-      {blobs.map((b, i) => (
-        <div
-          key={i}
-          style={{
-            position: 'absolute',
-            left: `${b.x}%`,
-            top: `${b.y}%`,
-            width: `${b.size}%`,
-            height: `${b.size}%`,
-            borderRadius: '50%',
-            background: `radial-gradient(circle, ${b.fill} ${b.midStop}%, transparent 70%)`,
-            transform: 'translate(-50%, -50%)',
-          }}
-        />
-      ))}
-    </div>
+    />
   )
 }