@protohiro/effects 0.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @protohiro/effects
+
+Zero-wrapper React hooks for composable CSS effects.
+
+## Install
+
+```bash
+npm install @protohiro/effects
+```
+
+## Quick start
+
+```tsx
+import { useGradientBorderEffect } from '@protohiro/effects';
+
+export function Button() {
+  const ref = useGradientBorderEffect({ thickness: 2, angle: 90 });
+  return <button ref={ref}>Click</button>;
+}
+```
+
+## Hooks
+
+- `useGradientBorderEffect`
+- `useGlowEffect`
+- `useNoiseEffect`
+
+For full docs and demos, see:
+https://github.com/snwol/protoeffects

package/dist/index.cjs

@@ -0,0 +1,195 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useGlowEffect: () => useGlowEffect,
+  useGradientBorderEffect: () => useGradientBorderEffect,
+  useNoiseEffect: () => useNoiseEffect
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/effects/useGradientBorderEffect.ts
+var import_effects_core2 = require("@protohiro/effects-core");
+var import_react2 = require("react");
+
+// src/shared/effectStyles.ts
+var EFFECT_STYLES = `
+.pe-gradient-border {
+  position: relative;
+  border-radius: var(--pe-gb-radius, inherit);
+  border: var(--pe-gb-thickness, 2px) solid transparent;
+  background:
+    linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,
+    linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;
+}
+
+.pe-glow {
+  box-shadow:
+    0 0 var(--pe-glow-blur, 24px)
+      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.4) * 100%), transparent),
+    0 0 var(--pe-glow-spread, 2px)
+      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.2) * 100%), transparent);
+}
+
+.pe-noise {
+  position: relative;
+}
+
+.pe-noise::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: var(--pe-noise-size, 80px) var(--pe-noise-size, 80px);
+  background-repeat: repeat;
+  image-rendering: pixelated;
+  filter: contrast(190%) brightness(110%);
+  opacity: var(--pe-noise-opacity, 0.28);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pe-noise::after {
+    opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);
+  }
+}
+`;
+
+// src/shared/useCssEffect.ts
+var import_effects_core = require("@protohiro/effects-core");
+var import_react = require("react");
+function useCssEffect(input) {
+  const [node, setNode] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!node || input.disabled) {
+      return;
+    }
+    (0, import_effects_core.ensureGlobalStyle)(input.styleId, input.styleText);
+    const cleanups = [];
+    cleanups.push((0, import_effects_core.applyEffectClass)(node, input.className));
+    if (input.userClassName) {
+      cleanups.push((0, import_effects_core.applyEffectClass)(node, input.userClassName));
+    }
+    cleanups.push((0, import_effects_core.applyCssVars)(node, input.vars));
+    return () => {
+      for (const cleanup of cleanups.reverse()) {
+        cleanup();
+      }
+    };
+  }, [
+    node,
+    input.className,
+    input.userClassName,
+    input.disabled,
+    input.styleId,
+    input.styleText,
+    input.vars
+  ]);
+  return (0, import_react.useCallback)((next) => {
+    setNode(next);
+  }, []);
+}
+
+// src/effects/useGradientBorderEffect.ts
+var STYLE_ID = "protohiro-effects-base";
+function useGradientBorderEffect(options = {}) {
+  const vars = (0, import_react2.useMemo)(
+    () => ({
+      "--pe-gb-thickness": (0, import_effects_core2.toCssLength)(options.thickness),
+      "--pe-gb-radius": (0, import_effects_core2.toCssLength)(options.radius),
+      "--pe-gb-colors": options.colors,
+      "--pe-gb-angle": (0, import_effects_core2.toCssAngle)(options.angle)
+    }),
+    [options.thickness, options.radius, options.colors, options.angle]
+  );
+  return useCssEffect({
+    className: "pe-gradient-border",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID,
+    styleText: EFFECT_STYLES
+  });
+}
+
+// src/effects/useGlowEffect.ts
+var import_effects_core3 = require("@protohiro/effects-core");
+var import_react3 = require("react");
+var STYLE_ID2 = "protohiro-effects-base";
+function useGlowEffect(options = {}) {
+  const vars = (0, import_react3.useMemo)(
+    () => ({
+      "--pe-glow-color": options.color,
+      "--pe-glow-blur": (0, import_effects_core3.toCssLength)(options.blur),
+      "--pe-glow-spread": (0, import_effects_core3.toCssLength)(options.spread),
+      "--pe-glow-opacity": (0, import_effects_core3.toCssNumber)(options.opacity)
+    }),
+    [options.color, options.blur, options.spread, options.opacity]
+  );
+  return useCssEffect({
+    className: "pe-glow",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID2,
+    styleText: EFFECT_STYLES
+  });
+}
+
+// src/effects/useNoiseEffect.ts
+var import_effects_core4 = require("@protohiro/effects-core");
+var import_react4 = require("react");
+var STYLE_ID3 = "protohiro-effects-base";
+function clampUnit(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (Number.isNaN(value)) {
+    return void 0;
+  }
+  return Math.max(0, Math.min(1, value));
+}
+function useNoiseEffect(options = {}) {
+  const intensity = clampUnit(options.intensity);
+  const vars = (0, import_react4.useMemo)(
+    () => ({
+      "--pe-noise-size": (0, import_effects_core4.toCssLength)(options.size ?? 120),
+      "--pe-noise-opacity": (0, import_effects_core4.toCssNumber)(intensity ?? 0.2)
+    }),
+    [options.size, intensity]
+  );
+  return useCssEffect({
+    className: "pe-noise",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID3,
+    styleText: EFFECT_STYLES
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGlowEffect,
+  useGradientBorderEffect,
+  useNoiseEffect
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/effects/useGradientBorderEffect.ts","../src/shared/effectStyles.ts","../src/shared/useCssEffect.ts","../src/effects/useGlowEffect.ts","../src/effects/useNoiseEffect.ts"],"sourcesContent":["export { useGradientBorderEffect } from './effects/useGradientBorderEffect';\nexport { useGlowEffect } from './effects/useGlowEffect';\nexport { useNoiseEffect } from './effects/useNoiseEffect';\n\nexport type { EffectBaseOptions, GlowOptions, GradientBorderOptions, NoiseOptions } from './types';\n","import { toCssAngle, toCssLength } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { GradientBorderOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nexport function useGradientBorderEffect<T extends HTMLElement = HTMLElement>(\n  options: GradientBorderOptions = {},\n) {\n  const vars = useMemo(\n    () => ({\n      '--pe-gb-thickness': toCssLength(options.thickness),\n      '--pe-gb-radius': toCssLength(options.radius),\n      '--pe-gb-colors': options.colors,\n      '--pe-gb-angle': toCssAngle(options.angle),\n    }),\n    [options.thickness, options.radius, options.colors, options.angle],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-gradient-border',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n","export const EFFECT_STYLES = `\n.pe-gradient-border {\n  position: relative;\n  border-radius: var(--pe-gb-radius, inherit);\n  border: var(--pe-gb-thickness, 2px) solid transparent;\n  background:\n    linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,\n    linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;\n}\n\n.pe-glow {\n  box-shadow:\n    0 0 var(--pe-glow-blur, 24px)\n      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.4) * 100%), transparent),\n    0 0 var(--pe-glow-spread, 2px)\n      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.2) * 100%), transparent);\n}\n\n.pe-noise {\n  position: relative;\n}\n\n.pe-noise::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-size: var(--pe-noise-size, 80px) var(--pe-noise-size, 80px);\n  background-repeat: repeat;\n  image-rendering: pixelated;\n  filter: contrast(190%) brightness(110%);\n  opacity: var(--pe-noise-opacity, 0.28);\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pe-noise::after {\n    opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);\n  }\n}\n`;\n","import { applyCssVars, applyEffectClass, ensureGlobalStyle } from '@protohiro/effects-core';\nimport { useCallback, useEffect, useState } from 'react';\n\ntype UseCssEffectInput = {\n  className: string;\n  userClassName?: string;\n  vars: Record<string, string | undefined>;\n  disabled?: boolean;\n  styleId: string;\n  styleText: string;\n};\n\nexport function useCssEffect<T extends HTMLElement>(input: UseCssEffectInput) {\n  const [node, setNode] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (!node || input.disabled) {\n      return;\n    }\n\n    ensureGlobalStyle(input.styleId, input.styleText);\n\n    const cleanups: Array<() => void> = [];\n    cleanups.push(applyEffectClass(node, input.className));\n\n    if (input.userClassName) {\n      cleanups.push(applyEffectClass(node, input.userClassName));\n    }\n\n    cleanups.push(applyCssVars(node, input.vars));\n\n    return () => {\n      for (const cleanup of cleanups.reverse()) {\n        cleanup();\n      }\n    };\n  }, [\n    node,\n    input.className,\n    input.userClassName,\n    input.disabled,\n    input.styleId,\n    input.styleText,\n    input.vars,\n  ]);\n\n  return useCallback((next: T | null) => {\n    setNode(next);\n  }, []);\n}\n","import { toCssLength, toCssNumber } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { GlowOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nexport function useGlowEffect<T extends HTMLElement = HTMLElement>(options: GlowOptions = {}) {\n  const vars = useMemo(\n    () => ({\n      '--pe-glow-color': options.color,\n      '--pe-glow-blur': toCssLength(options.blur),\n      '--pe-glow-spread': toCssLength(options.spread),\n      '--pe-glow-opacity': toCssNumber(options.opacity),\n    }),\n    [options.color, options.blur, options.spread, options.opacity],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-glow',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n","import { toCssLength, toCssNumber } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { NoiseOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nfunction clampUnit(value: number | undefined): number | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (Number.isNaN(value)) {\n    return undefined;\n  }\n\n  return Math.max(0, Math.min(1, value));\n}\n\nexport function useNoiseEffect<T extends HTMLElement = HTMLElement>(options: NoiseOptions = {}) {\n  const intensity = clampUnit(options.intensity);\n\n  const vars = useMemo(\n    () => ({\n      '--pe-noise-size': toCssLength(options.size ?? 120),\n      '--pe-noise-opacity': toCssNumber(intensity ?? 0.2),\n    }),\n    [options.size, intensity],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-noise',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,uBAAwC;AACxC,IAAAC,gBAAwB;;;ACDjB,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACA7B,0BAAkE;AAClE,mBAAiD;AAW1C,SAAS,aAAoC,OAA0B;AAC5E,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAmB,IAAI;AAE/C,8BAAU,MAAM;AACd,QAAI,CAAC,QAAQ,MAAM,UAAU;AAC3B;AAAA,IACF;AAEA,+CAAkB,MAAM,SAAS,MAAM,SAAS;AAEhD,UAAM,WAA8B,CAAC;AACrC,aAAS,SAAK,sCAAiB,MAAM,MAAM,SAAS,CAAC;AAErD,QAAI,MAAM,eAAe;AACvB,eAAS,SAAK,sCAAiB,MAAM,MAAM,aAAa,CAAC;AAAA,IAC3D;AAEA,aAAS,SAAK,kCAAa,MAAM,MAAM,IAAI,CAAC;AAE5C,WAAO,MAAM;AACX,iBAAW,WAAW,SAAS,QAAQ,GAAG;AACxC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,EACR,CAAC;AAED,aAAO,0BAAY,CAAC,SAAmB;AACrC,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,CAAC;AACP;;;AF1CA,IAAM,WAAW;AAEV,SAAS,wBACd,UAAiC,CAAC,GAClC;AACA,QAAM,WAAO;AAAA,IACX,OAAO;AAAA,MACL,yBAAqB,kCAAY,QAAQ,SAAS;AAAA,MAClD,sBAAkB,kCAAY,QAAQ,MAAM;AAAA,MAC5C,kBAAkB,QAAQ;AAAA,MAC1B,qBAAiB,iCAAW,QAAQ,KAAK;AAAA,IAC3C;AAAA,IACA,CAAC,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,QAAQ,QAAQ,KAAK;AAAA,EACnE;AAEA,SAAO,aAAgB;AAAA,IACrB,WAAW;AAAA,IACX,eAAe,QAAQ;AAAA,IACvB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AACH;;;AG9BA,IAAAC,uBAAyC;AACzC,IAAAC,gBAAwB;AAMxB,IAAMC,YAAW;AAEV,SAAS,cAAmD,UAAuB,CAAC,GAAG;AAC5F,QAAM,WAAO;AAAA,IACX,OAAO;AAAA,MACL,mBAAmB,QAAQ;AAAA,MAC3B,sBAAkB,kCAAY,QAAQ,IAAI;AAAA,MAC1C,wBAAoB,kCAAY,QAAQ,MAAM;AAAA,MAC9C,yBAAqB,kCAAY,QAAQ,OAAO;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,OAAO,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,OAAO;AAAA,EAC/D;AAEA,SAAO,aAAgB;AAAA,IACrB,WAAW;AAAA,IACX,eAAe,QAAQ;AAAA,IACvB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAASA;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AACH;;;AC5BA,IAAAC,uBAAyC;AACzC,IAAAC,gBAAwB;AAMxB,IAAMC,YAAW;AAEjB,SAAS,UAAU,OAA+C;AAChE,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO,MAAM,KAAK,GAAG;AACvB,WAAO;AAAA,EACT;AAEA,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;AACvC;AAEO,SAAS,eAAoD,UAAwB,CAAC,GAAG;AAC9F,QAAM,YAAY,UAAU,QAAQ,SAAS;AAE7C,QAAM,WAAO;AAAA,IACX,OAAO;AAAA,MACL,uBAAmB,kCAAY,QAAQ,QAAQ,GAAG;AAAA,MAClD,0BAAsB,kCAAY,aAAa,GAAG;AAAA,IACpD;AAAA,IACA,CAAC,QAAQ,MAAM,SAAS;AAAA,EAC1B;AAEA,SAAO,aAAgB;AAAA,IACrB,WAAW;AAAA,IACX,eAAe,QAAQ;AAAA,IACvB;AAAA,IACA,UAAU,QAAQ;AAAA,IAClB,SAASA;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AACH;","names":["import_effects_core","import_react","import_effects_core","import_react","STYLE_ID","import_effects_core","import_react","STYLE_ID"]}

package/dist/index.d.cts

@@ -0,0 +1,28 @@
+interface EffectBaseOptions {
+    disabled?: boolean;
+    className?: string;
+}
+interface GradientBorderOptions extends EffectBaseOptions {
+    thickness?: string | number;
+    radius?: string | number;
+    colors?: string;
+    angle?: string | number;
+}
+interface GlowOptions extends EffectBaseOptions {
+    color?: string;
+    blur?: string | number;
+    spread?: string | number;
+    opacity?: number;
+}
+interface NoiseOptions extends EffectBaseOptions {
+    size?: string | number;
+    intensity?: number;
+}
+
+declare function useGradientBorderEffect<T extends HTMLElement = HTMLElement>(options?: GradientBorderOptions): (next: T | null) => void;
+
+declare function useGlowEffect<T extends HTMLElement = HTMLElement>(options?: GlowOptions): (next: T | null) => void;
+
+declare function useNoiseEffect<T extends HTMLElement = HTMLElement>(options?: NoiseOptions): (next: T | null) => void;
+
+export { type EffectBaseOptions, type GlowOptions, type GradientBorderOptions, type NoiseOptions, useGlowEffect, useGradientBorderEffect, useNoiseEffect };

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+interface EffectBaseOptions {
+    disabled?: boolean;
+    className?: string;
+}
+interface GradientBorderOptions extends EffectBaseOptions {
+    thickness?: string | number;
+    radius?: string | number;
+    colors?: string;
+    angle?: string | number;
+}
+interface GlowOptions extends EffectBaseOptions {
+    color?: string;
+    blur?: string | number;
+    spread?: string | number;
+    opacity?: number;
+}
+interface NoiseOptions extends EffectBaseOptions {
+    size?: string | number;
+    intensity?: number;
+}
+
+declare function useGradientBorderEffect<T extends HTMLElement = HTMLElement>(options?: GradientBorderOptions): (next: T | null) => void;
+
+declare function useGlowEffect<T extends HTMLElement = HTMLElement>(options?: GlowOptions): (next: T | null) => void;
+
+declare function useNoiseEffect<T extends HTMLElement = HTMLElement>(options?: NoiseOptions): (next: T | null) => void;
+
+export { type EffectBaseOptions, type GlowOptions, type GradientBorderOptions, type NoiseOptions, useGlowEffect, useGradientBorderEffect, useNoiseEffect };

package/dist/index.js

@@ -0,0 +1,166 @@
+// src/effects/useGradientBorderEffect.ts
+import { toCssAngle, toCssLength } from "@protohiro/effects-core";
+import { useMemo } from "react";
+
+// src/shared/effectStyles.ts
+var EFFECT_STYLES = `
+.pe-gradient-border {
+  position: relative;
+  border-radius: var(--pe-gb-radius, inherit);
+  border: var(--pe-gb-thickness, 2px) solid transparent;
+  background:
+    linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,
+    linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;
+}
+
+.pe-glow {
+  box-shadow:
+    0 0 var(--pe-glow-blur, 24px)
+      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.4) * 100%), transparent),
+    0 0 var(--pe-glow-spread, 2px)
+      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.2) * 100%), transparent);
+}
+
+.pe-noise {
+  position: relative;
+}
+
+.pe-noise::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: var(--pe-noise-size, 80px) var(--pe-noise-size, 80px);
+  background-repeat: repeat;
+  image-rendering: pixelated;
+  filter: contrast(190%) brightness(110%);
+  opacity: var(--pe-noise-opacity, 0.28);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pe-noise::after {
+    opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);
+  }
+}
+`;
+
+// src/shared/useCssEffect.ts
+import { applyCssVars, applyEffectClass, ensureGlobalStyle } from "@protohiro/effects-core";
+import { useCallback, useEffect, useState } from "react";
+function useCssEffect(input) {
+  const [node, setNode] = useState(null);
+  useEffect(() => {
+    if (!node || input.disabled) {
+      return;
+    }
+    ensureGlobalStyle(input.styleId, input.styleText);
+    const cleanups = [];
+    cleanups.push(applyEffectClass(node, input.className));
+    if (input.userClassName) {
+      cleanups.push(applyEffectClass(node, input.userClassName));
+    }
+    cleanups.push(applyCssVars(node, input.vars));
+    return () => {
+      for (const cleanup of cleanups.reverse()) {
+        cleanup();
+      }
+    };
+  }, [
+    node,
+    input.className,
+    input.userClassName,
+    input.disabled,
+    input.styleId,
+    input.styleText,
+    input.vars
+  ]);
+  return useCallback((next) => {
+    setNode(next);
+  }, []);
+}
+
+// src/effects/useGradientBorderEffect.ts
+var STYLE_ID = "protohiro-effects-base";
+function useGradientBorderEffect(options = {}) {
+  const vars = useMemo(
+    () => ({
+      "--pe-gb-thickness": toCssLength(options.thickness),
+      "--pe-gb-radius": toCssLength(options.radius),
+      "--pe-gb-colors": options.colors,
+      "--pe-gb-angle": toCssAngle(options.angle)
+    }),
+    [options.thickness, options.radius, options.colors, options.angle]
+  );
+  return useCssEffect({
+    className: "pe-gradient-border",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID,
+    styleText: EFFECT_STYLES
+  });
+}
+
+// src/effects/useGlowEffect.ts
+import { toCssLength as toCssLength2, toCssNumber } from "@protohiro/effects-core";
+import { useMemo as useMemo2 } from "react";
+var STYLE_ID2 = "protohiro-effects-base";
+function useGlowEffect(options = {}) {
+  const vars = useMemo2(
+    () => ({
+      "--pe-glow-color": options.color,
+      "--pe-glow-blur": toCssLength2(options.blur),
+      "--pe-glow-spread": toCssLength2(options.spread),
+      "--pe-glow-opacity": toCssNumber(options.opacity)
+    }),
+    [options.color, options.blur, options.spread, options.opacity]
+  );
+  return useCssEffect({
+    className: "pe-glow",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID2,
+    styleText: EFFECT_STYLES
+  });
+}
+
+// src/effects/useNoiseEffect.ts
+import { toCssLength as toCssLength3, toCssNumber as toCssNumber2 } from "@protohiro/effects-core";
+import { useMemo as useMemo3 } from "react";
+var STYLE_ID3 = "protohiro-effects-base";
+function clampUnit(value) {
+  if (value === void 0) {
+    return void 0;
+  }
+  if (Number.isNaN(value)) {
+    return void 0;
+  }
+  return Math.max(0, Math.min(1, value));
+}
+function useNoiseEffect(options = {}) {
+  const intensity = clampUnit(options.intensity);
+  const vars = useMemo3(
+    () => ({
+      "--pe-noise-size": toCssLength3(options.size ?? 120),
+      "--pe-noise-opacity": toCssNumber2(intensity ?? 0.2)
+    }),
+    [options.size, intensity]
+  );
+  return useCssEffect({
+    className: "pe-noise",
+    userClassName: options.className,
+    vars,
+    disabled: options.disabled,
+    styleId: STYLE_ID3,
+    styleText: EFFECT_STYLES
+  });
+}
+export {
+  useGlowEffect,
+  useGradientBorderEffect,
+  useNoiseEffect
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/effects/useGradientBorderEffect.ts","../src/shared/effectStyles.ts","../src/shared/useCssEffect.ts","../src/effects/useGlowEffect.ts","../src/effects/useNoiseEffect.ts"],"sourcesContent":["import { toCssAngle, toCssLength } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { GradientBorderOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nexport function useGradientBorderEffect<T extends HTMLElement = HTMLElement>(\n  options: GradientBorderOptions = {},\n) {\n  const vars = useMemo(\n    () => ({\n      '--pe-gb-thickness': toCssLength(options.thickness),\n      '--pe-gb-radius': toCssLength(options.radius),\n      '--pe-gb-colors': options.colors,\n      '--pe-gb-angle': toCssAngle(options.angle),\n    }),\n    [options.thickness, options.radius, options.colors, options.angle],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-gradient-border',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n","export const EFFECT_STYLES = `\n.pe-gradient-border {\n  position: relative;\n  border-radius: var(--pe-gb-radius, inherit);\n  border: var(--pe-gb-thickness, 2px) solid transparent;\n  background:\n    linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,\n    linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;\n}\n\n.pe-glow {\n  box-shadow:\n    0 0 var(--pe-glow-blur, 24px)\n      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.4) * 100%), transparent),\n    0 0 var(--pe-glow-spread, 2px)\n      color-mix(in srgb, var(--pe-glow-color, #38bdf8) calc(var(--pe-glow-opacity, 0.2) * 100%), transparent);\n}\n\n.pe-noise {\n  position: relative;\n}\n\n.pe-noise::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E\");\n  background-size: var(--pe-noise-size, 80px) var(--pe-noise-size, 80px);\n  background-repeat: repeat;\n  image-rendering: pixelated;\n  filter: contrast(190%) brightness(110%);\n  opacity: var(--pe-noise-opacity, 0.28);\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pe-noise::after {\n    opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);\n  }\n}\n`;\n","import { applyCssVars, applyEffectClass, ensureGlobalStyle } from '@protohiro/effects-core';\nimport { useCallback, useEffect, useState } from 'react';\n\ntype UseCssEffectInput = {\n  className: string;\n  userClassName?: string;\n  vars: Record<string, string | undefined>;\n  disabled?: boolean;\n  styleId: string;\n  styleText: string;\n};\n\nexport function useCssEffect<T extends HTMLElement>(input: UseCssEffectInput) {\n  const [node, setNode] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (!node || input.disabled) {\n      return;\n    }\n\n    ensureGlobalStyle(input.styleId, input.styleText);\n\n    const cleanups: Array<() => void> = [];\n    cleanups.push(applyEffectClass(node, input.className));\n\n    if (input.userClassName) {\n      cleanups.push(applyEffectClass(node, input.userClassName));\n    }\n\n    cleanups.push(applyCssVars(node, input.vars));\n\n    return () => {\n      for (const cleanup of cleanups.reverse()) {\n        cleanup();\n      }\n    };\n  }, [\n    node,\n    input.className,\n    input.userClassName,\n    input.disabled,\n    input.styleId,\n    input.styleText,\n    input.vars,\n  ]);\n\n  return useCallback((next: T | null) => {\n    setNode(next);\n  }, []);\n}\n","import { toCssLength, toCssNumber } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { GlowOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nexport function useGlowEffect<T extends HTMLElement = HTMLElement>(options: GlowOptions = {}) {\n  const vars = useMemo(\n    () => ({\n      '--pe-glow-color': options.color,\n      '--pe-glow-blur': toCssLength(options.blur),\n      '--pe-glow-spread': toCssLength(options.spread),\n      '--pe-glow-opacity': toCssNumber(options.opacity),\n    }),\n    [options.color, options.blur, options.spread, options.opacity],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-glow',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n","import { toCssLength, toCssNumber } from '@protohiro/effects-core';\nimport { useMemo } from 'react';\n\nimport type { NoiseOptions } from '../types';\nimport { EFFECT_STYLES } from '../shared/effectStyles';\nimport { useCssEffect } from '../shared/useCssEffect';\n\nconst STYLE_ID = 'protohiro-effects-base';\n\nfunction clampUnit(value: number | undefined): number | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (Number.isNaN(value)) {\n    return undefined;\n  }\n\n  return Math.max(0, Math.min(1, value));\n}\n\nexport function useNoiseEffect<T extends HTMLElement = HTMLElement>(options: NoiseOptions = {}) {\n  const intensity = clampUnit(options.intensity);\n\n  const vars = useMemo(\n    () => ({\n      '--pe-noise-size': toCssLength(options.size ?? 120),\n      '--pe-noise-opacity': toCssNumber(intensity ?? 0.2),\n    }),\n    [options.size, intensity],\n  );\n\n  return useCssEffect<T>({\n    className: 'pe-noise',\n    userClassName: options.className,\n    vars,\n    disabled: options.disabled,\n    styleId: STYLE_ID,\n    styleText: EFFECT_STYLES,\n  });\n}\n"],"mappings":"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","names":["toCssLength","useMemo","STYLE_ID","useMemo","toCssLength","toCssLength","toCssNumber","useMemo","STYLE_ID","useMemo","toCssLength","toCssNumber"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@protohiro/effects",
+  "version": "0.1.0",
+  "description": "Zero-wrapper React hooks for composable CSS effects.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/snwol/protoeffects.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/snwol/protoeffects#readme",
+  "bugs": {
+    "url": "https://github.com/snwol/protoeffects/issues"
+  },
+  "keywords": [
+    "protoeffects",
+    "react",
+    "hooks",
+    "css",
+    "effects"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@protohiro/effects-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}