@horang-corp/react-system 0.1.1

package/patterns/wrap.mjs

@@ -0,0 +1,25 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const wrapConfig = {
+transform(props) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
+  return {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    columnGap,
+    rowGap,
+    ...rest
+  };
+}}
+
+export const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles)
+  return wrapConfig.transform(_styles, patternFns)
+}
+
+export const wrap = (styles) => css(getWrapStyle(styles))
+wrap.raw = getWrapStyle

package/runtime.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react'
+
+export declare function useSquircleClip<T extends HTMLElement>(
+    cornerRadius: number,
+    cornerSmoothing: number,
+): [RefObject<T | null>, string | undefined]
+
+export declare function mergeProps<T extends object>(defaults: T, props: Partial<T>): T

package/runtime.mjs

@@ -0,0 +1,87 @@
+import { getSvgPath } from 'figma-squircle'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+export function useSquircleClip(cornerRadius, cornerSmoothing) {
+    const ref = useRef(null)
+    const [clipPath, setClipPath] = useState(undefined)
+    useLayoutEffect(() => {
+        const el = ref.current
+        if (!el) return
+        let frame = 0
+        const timeouts = []
+        const update = () => {
+            const r = el.getBoundingClientRect()
+            if (!r.width || !r.height) return
+            const rootFontSize = Number.parseFloat(
+                window.getComputedStyle(document.documentElement).fontSize,
+            )
+            const scale = Number.isFinite(rootFontSize) && rootFontSize > 0 ? rootFontSize / 16 : 1
+            const path = getSvgPath({
+                width: r.width,
+                height: r.height,
+                cornerRadius: cornerRadius * scale * 1.02,
+                cornerSmoothing,
+            })
+                .replace(/\n/g, ' ')
+                .trim()
+            setClipPath(`path('${path}')`)
+        }
+        let framesLeft = 12
+        const scheduleFrames = () => {
+            if (framesLeft <= 0) return
+            frame = requestAnimationFrame(() => {
+                framesLeft -= 1
+                update()
+                scheduleFrames()
+            })
+        }
+        update()
+        scheduleFrames()
+        for (const ms of [50, 200, 800]) {
+            timeouts.push(setTimeout(update, ms))
+        }
+        const ro = new ResizeObserver(update)
+        ro.observe(el)
+        return () => {
+            cancelAnimationFrame(frame)
+            for (const timeout of timeouts) clearTimeout(timeout)
+            ro.disconnect()
+        }
+    }, [cornerRadius, cornerSmoothing])
+    return [ref, clipPath]
+}
+
+export function mergeProps(defaults, props) {
+    const out = { ...defaults }
+    for (const k in props) {
+        const raw = props[k]
+        if (raw === undefined) continue
+        out[k] = normalizeLiteralProp(raw)
+    }
+    return out
+}
+
+function normalizeLiteralProp(v) {
+    if (!v || typeof v !== 'object') return v
+    const obj = v
+    if (obj.kind !== 'literal') return v
+    const inner = obj.value
+    if (inner == null) return v
+    if (typeof inner === 'string') return inner
+    if (typeof inner === 'number' || typeof inner === 'boolean') return inner
+    if (typeof inner === 'object') {
+        const r = inner
+        if ('unit' in r && 'value' in r) {
+            const num = Number(r.value)
+            if (r.unit === 'px') return `${+(num / 16).toFixed(6)}rem`
+            return `${num}${r.unit}`
+        }
+        if ('r' in r && 'g' in r && 'b' in r) {
+            const a = 'a' in r ? Number(r.a) : 1
+            return a < 1
+                ? `rgba(${r.r}, ${r.g}, ${r.b}, ${a})`
+                : `rgb(${r.r}, ${r.g}, ${r.b})`
+        }
+    }
+    return v
+}