@protohiro/effects 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +4 -1
  2. package/dist/index.cjs +37 -158
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +37 -129
  5. package/dist/index.js.map +1 -1
  6. package/package.json +5 -5
package/README.md CHANGED
@@ -25,5 +25,8 @@ export function Button() {
25
25
  - `useGlowEffect`
26
26
  - `useNoiseEffect`
27
27
 
28
+ Live demo:
29
+ https://libs.protohiro.com/effects/
30
+
28
31
  For full docs and demos, see:
29
- https://github.com/snwol/protoeffects
32
+ https://github.com/protohiro-com/effects
package/dist/index.cjs CHANGED
@@ -1,44 +1,42 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var index_exports = {};
22
- __export(index_exports, {
23
- useGlowEffect: () => useGlowEffect,
24
- useGradientBorderEffect: () => useGradientBorderEffect,
25
- useNoiseEffect: () => useNoiseEffect
26
- });
27
- module.exports = __toCommonJS(index_exports);
28
-
29
- // src/effects/useGradientBorderEffect.ts
30
- var import_effects_core2 = require("@protohiro/effects-core");
31
- var import_react2 = require("react");
32
-
33
- // src/shared/effectStyles.ts
34
- var EFFECT_STYLES = `
1
+ 'use strict';var effectsCore=require('@protohiro/effects-core'),react=require('react');var t=`
35
2
  .pe-gradient-border {
36
3
  position: relative;
4
+ isolation: isolate;
37
5
  border-radius: var(--pe-gb-radius, inherit);
38
- border: var(--pe-gb-thickness, 2px) solid transparent;
39
- background:
40
- linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,
41
- linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;
6
+ border-color: transparent;
7
+ }
8
+
9
+ .pe-gradient-border::before {
10
+ content: '';
11
+ position: absolute;
12
+ z-index: -1;
13
+ inset: calc(var(--pe-gb-thickness, 2px) * -1);
14
+ border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
15
+ box-sizing: border-box;
16
+ padding: var(--pe-gb-thickness, 2px);
17
+ background: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9));
18
+ pointer-events: none;
19
+
20
+ /* Hollow out the center so only the ring remains. */
21
+ -webkit-mask:
22
+ linear-gradient(#fff 0 0) content-box,
23
+ linear-gradient(#fff 0 0);
24
+ -webkit-mask-composite: xor;
25
+ mask:
26
+ linear-gradient(#fff 0 0) content-box,
27
+ linear-gradient(#fff 0 0);
28
+ mask-composite: exclude;
29
+ }
30
+
31
+ @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
32
+ .pe-gradient-border::before {
33
+ z-index: -1;
34
+ inset: calc(var(--pe-gb-thickness, 2px) * -1);
35
+ border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
36
+ padding: 0;
37
+ border: var(--pe-gb-thickness, 2px) solid;
38
+ border-image: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) 1;
39
+ }
42
40
  }
43
41
 
44
42
  .pe-glow {
@@ -72,124 +70,5 @@ var EFFECT_STYLES = `
72
70
  opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);
73
71
  }
74
72
  }
75
- `;
76
-
77
- // src/shared/useCssEffect.ts
78
- var import_effects_core = require("@protohiro/effects-core");
79
- var import_react = require("react");
80
- function useCssEffect(input) {
81
- const [node, setNode] = (0, import_react.useState)(null);
82
- (0, import_react.useEffect)(() => {
83
- if (!node || input.disabled) {
84
- return;
85
- }
86
- (0, import_effects_core.ensureGlobalStyle)(input.styleId, input.styleText);
87
- const cleanups = [];
88
- cleanups.push((0, import_effects_core.applyEffectClass)(node, input.className));
89
- if (input.userClassName) {
90
- cleanups.push((0, import_effects_core.applyEffectClass)(node, input.userClassName));
91
- }
92
- cleanups.push((0, import_effects_core.applyCssVars)(node, input.vars));
93
- return () => {
94
- for (const cleanup of cleanups.reverse()) {
95
- cleanup();
96
- }
97
- };
98
- }, [
99
- node,
100
- input.className,
101
- input.userClassName,
102
- input.disabled,
103
- input.styleId,
104
- input.styleText,
105
- input.vars
106
- ]);
107
- return (0, import_react.useCallback)((next) => {
108
- setNode(next);
109
- }, []);
110
- }
111
-
112
- // src/effects/useGradientBorderEffect.ts
113
- var STYLE_ID = "protohiro-effects-base";
114
- function useGradientBorderEffect(options = {}) {
115
- const vars = (0, import_react2.useMemo)(
116
- () => ({
117
- "--pe-gb-thickness": (0, import_effects_core2.toCssLength)(options.thickness),
118
- "--pe-gb-radius": (0, import_effects_core2.toCssLength)(options.radius),
119
- "--pe-gb-colors": options.colors,
120
- "--pe-gb-angle": (0, import_effects_core2.toCssAngle)(options.angle)
121
- }),
122
- [options.thickness, options.radius, options.colors, options.angle]
123
- );
124
- return useCssEffect({
125
- className: "pe-gradient-border",
126
- userClassName: options.className,
127
- vars,
128
- disabled: options.disabled,
129
- styleId: STYLE_ID,
130
- styleText: EFFECT_STYLES
131
- });
132
- }
133
-
134
- // src/effects/useGlowEffect.ts
135
- var import_effects_core3 = require("@protohiro/effects-core");
136
- var import_react3 = require("react");
137
- var STYLE_ID2 = "protohiro-effects-base";
138
- function useGlowEffect(options = {}) {
139
- const vars = (0, import_react3.useMemo)(
140
- () => ({
141
- "--pe-glow-color": options.color,
142
- "--pe-glow-blur": (0, import_effects_core3.toCssLength)(options.blur),
143
- "--pe-glow-spread": (0, import_effects_core3.toCssLength)(options.spread),
144
- "--pe-glow-opacity": (0, import_effects_core3.toCssNumber)(options.opacity)
145
- }),
146
- [options.color, options.blur, options.spread, options.opacity]
147
- );
148
- return useCssEffect({
149
- className: "pe-glow",
150
- userClassName: options.className,
151
- vars,
152
- disabled: options.disabled,
153
- styleId: STYLE_ID2,
154
- styleText: EFFECT_STYLES
155
- });
156
- }
157
-
158
- // src/effects/useNoiseEffect.ts
159
- var import_effects_core4 = require("@protohiro/effects-core");
160
- var import_react4 = require("react");
161
- var STYLE_ID3 = "protohiro-effects-base";
162
- function clampUnit(value) {
163
- if (value === void 0) {
164
- return void 0;
165
- }
166
- if (Number.isNaN(value)) {
167
- return void 0;
168
- }
169
- return Math.max(0, Math.min(1, value));
170
- }
171
- function useNoiseEffect(options = {}) {
172
- const intensity = clampUnit(options.intensity);
173
- const vars = (0, import_react4.useMemo)(
174
- () => ({
175
- "--pe-noise-size": (0, import_effects_core4.toCssLength)(options.size ?? 120),
176
- "--pe-noise-opacity": (0, import_effects_core4.toCssNumber)(intensity ?? 0.2)
177
- }),
178
- [options.size, intensity]
179
- );
180
- return useCssEffect({
181
- className: "pe-noise",
182
- userClassName: options.className,
183
- vars,
184
- disabled: options.disabled,
185
- styleId: STYLE_ID3,
186
- styleText: EFFECT_STYLES
187
- });
188
- }
189
- // Annotate the CommonJS export names for ESM import in node:
190
- 0 && (module.exports = {
191
- useGlowEffect,
192
- useGradientBorderEffect,
193
- useNoiseEffect
194
- });
73
+ `;function o(e){let[r,a]=react.useState(null);return react.useEffect(()=>{if(!r||e.disabled)return;effectsCore.ensureGlobalStyle(e.styleId,e.styleText);let s=[];return s.push(effectsCore.applyEffectClass(r,e.className)),e.userClassName&&s.push(effectsCore.applyEffectClass(r,e.userClassName)),s.push(effectsCore.applyCssVars(r,e.vars)),()=>{for(let d of s.reverse())d();}},[r,e.className,e.userClassName,e.disabled,e.styleId,e.styleText,e.vars]),react.useCallback(s=>{a(s);},[])}var x="protohiro-effects-base";function E(e={}){let r=react.useMemo(()=>({"--pe-gb-thickness":effectsCore.toCssLength(e.thickness),"--pe-gb-radius":effectsCore.toCssLength(e.radius),"--pe-gb-colors":e.colors,"--pe-gb-angle":effectsCore.toCssAngle(e.angle)}),[e.thickness,e.radius,e.colors,e.angle]);return o({className:"pe-gradient-border",userClassName:e.className,vars:r,disabled:e.disabled,styleId:x,styleText:t})}var T="protohiro-effects-base";function h(e={}){let r=react.useMemo(()=>({"--pe-glow-color":e.color,"--pe-glow-blur":effectsCore.toCssLength(e.blur),"--pe-glow-spread":effectsCore.toCssLength(e.spread),"--pe-glow-opacity":effectsCore.toCssNumber(e.opacity)}),[e.color,e.blur,e.spread,e.opacity]);return o({className:"pe-glow",userClassName:e.className,vars:r,disabled:e.disabled,styleId:T,styleText:t})}var k="protohiro-effects-base";function L(e){if(e!==void 0&&!Number.isNaN(e))return Math.max(0,Math.min(1,e))}function S(e={}){let r=L(e.intensity),a=react.useMemo(()=>({"--pe-noise-size":effectsCore.toCssLength(e.size??120),"--pe-noise-opacity":effectsCore.toCssNumber(r??.2)}),[e.size,r]);return o({className:"pe-noise",userClassName:e.className,vars:a,disabled:e.disabled,styleId:k,styleText:t})}exports.useGlowEffect=h;exports.useGradientBorderEffect=E;exports.useNoiseEffect=S;//# sourceMappingURL=index.cjs.map
195
74
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/shared/effectStyles.ts","../src/shared/useCssEffect.ts","../src/effects/useGradientBorderEffect.ts","../src/effects/useGlowEffect.ts","../src/effects/useNoiseEffect.ts"],"names":["EFFECT_STYLES","useCssEffect","input","node","setNode","useState","useEffect","ensureGlobalStyle","cleanups","applyEffectClass","applyCssVars","cleanup","useCallback","next","STYLE_ID","useGradientBorderEffect","options","vars","useMemo","toCssLength","toCssAngle","useGlowEffect","toCssNumber","clampUnit","value","useNoiseEffect","intensity"],"mappings":"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","file":"index.cjs","sourcesContent":["export const EFFECT_STYLES = `\n.pe-gradient-border {\n position: relative;\n isolation: isolate;\n border-radius: var(--pe-gb-radius, inherit);\n border-color: transparent;\n}\n\n.pe-gradient-border::before {\n content: '';\n position: absolute;\n z-index: -1;\n inset: calc(var(--pe-gb-thickness, 2px) * -1);\n border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));\n box-sizing: border-box;\n padding: var(--pe-gb-thickness, 2px);\n background: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9));\n pointer-events: none;\n\n /* Hollow out the center so only the ring remains. */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n}\n\n@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {\n .pe-gradient-border::before {\n z-index: -1;\n inset: calc(var(--pe-gb-thickness, 2px) * -1);\n border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));\n padding: 0;\n border: var(--pe-gb-thickness, 2px) solid;\n border-image: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) 1;\n }\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 { 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","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"]}
package/dist/index.js CHANGED
@@ -1,16 +1,42 @@
1
- // src/effects/useGradientBorderEffect.ts
2
- import { toCssAngle, toCssLength } from "@protohiro/effects-core";
3
- import { useMemo } from "react";
4
-
5
- // src/shared/effectStyles.ts
6
- var EFFECT_STYLES = `
1
+ import {toCssAngle,toCssLength,toCssNumber,ensureGlobalStyle,applyEffectClass,applyCssVars}from'@protohiro/effects-core';import {useMemo,useState,useEffect,useCallback}from'react';var t=`
7
2
  .pe-gradient-border {
8
3
  position: relative;
4
+ isolation: isolate;
9
5
  border-radius: var(--pe-gb-radius, inherit);
10
- border: var(--pe-gb-thickness, 2px) solid transparent;
11
- background:
12
- linear-gradient(var(--pe-bg-fill, transparent), var(--pe-bg-fill, transparent)) padding-box,
13
- linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) border-box;
6
+ border-color: transparent;
7
+ }
8
+
9
+ .pe-gradient-border::before {
10
+ content: '';
11
+ position: absolute;
12
+ z-index: -1;
13
+ inset: calc(var(--pe-gb-thickness, 2px) * -1);
14
+ border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
15
+ box-sizing: border-box;
16
+ padding: var(--pe-gb-thickness, 2px);
17
+ background: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9));
18
+ pointer-events: none;
19
+
20
+ /* Hollow out the center so only the ring remains. */
21
+ -webkit-mask:
22
+ linear-gradient(#fff 0 0) content-box,
23
+ linear-gradient(#fff 0 0);
24
+ -webkit-mask-composite: xor;
25
+ mask:
26
+ linear-gradient(#fff 0 0) content-box,
27
+ linear-gradient(#fff 0 0);
28
+ mask-composite: exclude;
29
+ }
30
+
31
+ @supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
32
+ .pe-gradient-border::before {
33
+ z-index: -1;
34
+ inset: calc(var(--pe-gb-thickness, 2px) * -1);
35
+ border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));
36
+ padding: 0;
37
+ border: var(--pe-gb-thickness, 2px) solid;
38
+ border-image: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) 1;
39
+ }
14
40
  }
15
41
 
16
42
  .pe-glow {
@@ -44,123 +70,5 @@ var EFFECT_STYLES = `
44
70
  opacity: calc(var(--pe-noise-opacity, 0.28) * 0.9);
45
71
  }
46
72
  }
47
- `;
48
-
49
- // src/shared/useCssEffect.ts
50
- import { applyCssVars, applyEffectClass, ensureGlobalStyle } from "@protohiro/effects-core";
51
- import { useCallback, useEffect, useState } from "react";
52
- function useCssEffect(input) {
53
- const [node, setNode] = useState(null);
54
- useEffect(() => {
55
- if (!node || input.disabled) {
56
- return;
57
- }
58
- ensureGlobalStyle(input.styleId, input.styleText);
59
- const cleanups = [];
60
- cleanups.push(applyEffectClass(node, input.className));
61
- if (input.userClassName) {
62
- cleanups.push(applyEffectClass(node, input.userClassName));
63
- }
64
- cleanups.push(applyCssVars(node, input.vars));
65
- return () => {
66
- for (const cleanup of cleanups.reverse()) {
67
- cleanup();
68
- }
69
- };
70
- }, [
71
- node,
72
- input.className,
73
- input.userClassName,
74
- input.disabled,
75
- input.styleId,
76
- input.styleText,
77
- input.vars
78
- ]);
79
- return useCallback((next) => {
80
- setNode(next);
81
- }, []);
82
- }
83
-
84
- // src/effects/useGradientBorderEffect.ts
85
- var STYLE_ID = "protohiro-effects-base";
86
- function useGradientBorderEffect(options = {}) {
87
- const vars = useMemo(
88
- () => ({
89
- "--pe-gb-thickness": toCssLength(options.thickness),
90
- "--pe-gb-radius": toCssLength(options.radius),
91
- "--pe-gb-colors": options.colors,
92
- "--pe-gb-angle": toCssAngle(options.angle)
93
- }),
94
- [options.thickness, options.radius, options.colors, options.angle]
95
- );
96
- return useCssEffect({
97
- className: "pe-gradient-border",
98
- userClassName: options.className,
99
- vars,
100
- disabled: options.disabled,
101
- styleId: STYLE_ID,
102
- styleText: EFFECT_STYLES
103
- });
104
- }
105
-
106
- // src/effects/useGlowEffect.ts
107
- import { toCssLength as toCssLength2, toCssNumber } from "@protohiro/effects-core";
108
- import { useMemo as useMemo2 } from "react";
109
- var STYLE_ID2 = "protohiro-effects-base";
110
- function useGlowEffect(options = {}) {
111
- const vars = useMemo2(
112
- () => ({
113
- "--pe-glow-color": options.color,
114
- "--pe-glow-blur": toCssLength2(options.blur),
115
- "--pe-glow-spread": toCssLength2(options.spread),
116
- "--pe-glow-opacity": toCssNumber(options.opacity)
117
- }),
118
- [options.color, options.blur, options.spread, options.opacity]
119
- );
120
- return useCssEffect({
121
- className: "pe-glow",
122
- userClassName: options.className,
123
- vars,
124
- disabled: options.disabled,
125
- styleId: STYLE_ID2,
126
- styleText: EFFECT_STYLES
127
- });
128
- }
129
-
130
- // src/effects/useNoiseEffect.ts
131
- import { toCssLength as toCssLength3, toCssNumber as toCssNumber2 } from "@protohiro/effects-core";
132
- import { useMemo as useMemo3 } from "react";
133
- var STYLE_ID3 = "protohiro-effects-base";
134
- function clampUnit(value) {
135
- if (value === void 0) {
136
- return void 0;
137
- }
138
- if (Number.isNaN(value)) {
139
- return void 0;
140
- }
141
- return Math.max(0, Math.min(1, value));
142
- }
143
- function useNoiseEffect(options = {}) {
144
- const intensity = clampUnit(options.intensity);
145
- const vars = useMemo3(
146
- () => ({
147
- "--pe-noise-size": toCssLength3(options.size ?? 120),
148
- "--pe-noise-opacity": toCssNumber2(intensity ?? 0.2)
149
- }),
150
- [options.size, intensity]
151
- );
152
- return useCssEffect({
153
- className: "pe-noise",
154
- userClassName: options.className,
155
- vars,
156
- disabled: options.disabled,
157
- styleId: STYLE_ID3,
158
- styleText: EFFECT_STYLES
159
- });
160
- }
161
- export {
162
- useGlowEffect,
163
- useGradientBorderEffect,
164
- useNoiseEffect
165
- };
73
+ `;function o(e){let[r,a]=useState(null);return useEffect(()=>{if(!r||e.disabled)return;ensureGlobalStyle(e.styleId,e.styleText);let s=[];return s.push(applyEffectClass(r,e.className)),e.userClassName&&s.push(applyEffectClass(r,e.userClassName)),s.push(applyCssVars(r,e.vars)),()=>{for(let d of s.reverse())d();}},[r,e.className,e.userClassName,e.disabled,e.styleId,e.styleText,e.vars]),useCallback(s=>{a(s);},[])}var x="protohiro-effects-base";function E(e={}){let r=useMemo(()=>({"--pe-gb-thickness":toCssLength(e.thickness),"--pe-gb-radius":toCssLength(e.radius),"--pe-gb-colors":e.colors,"--pe-gb-angle":toCssAngle(e.angle)}),[e.thickness,e.radius,e.colors,e.angle]);return o({className:"pe-gradient-border",userClassName:e.className,vars:r,disabled:e.disabled,styleId:x,styleText:t})}var T="protohiro-effects-base";function h(e={}){let r=useMemo(()=>({"--pe-glow-color":e.color,"--pe-glow-blur":toCssLength(e.blur),"--pe-glow-spread":toCssLength(e.spread),"--pe-glow-opacity":toCssNumber(e.opacity)}),[e.color,e.blur,e.spread,e.opacity]);return o({className:"pe-glow",userClassName:e.className,vars:r,disabled:e.disabled,styleId:T,styleText:t})}var k="protohiro-effects-base";function L(e){if(e!==void 0&&!Number.isNaN(e))return Math.max(0,Math.min(1,e))}function S(e={}){let r=L(e.intensity),a=useMemo(()=>({"--pe-noise-size":toCssLength(e.size??120),"--pe-noise-opacity":toCssNumber(r??.2)}),[e.size,r]);return o({className:"pe-noise",userClassName:e.className,vars:a,disabled:e.disabled,styleId:k,styleText:t})}export{h as useGlowEffect,E as useGradientBorderEffect,S as useNoiseEffect};//# sourceMappingURL=index.js.map
166
74
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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"]}
1
+ {"version":3,"sources":["../src/shared/effectStyles.ts","../src/shared/useCssEffect.ts","../src/effects/useGradientBorderEffect.ts","../src/effects/useGlowEffect.ts","../src/effects/useNoiseEffect.ts"],"names":["EFFECT_STYLES","useCssEffect","input","node","setNode","useState","useEffect","ensureGlobalStyle","cleanups","applyEffectClass","applyCssVars","cleanup","useCallback","next","STYLE_ID","useGradientBorderEffect","options","vars","useMemo","toCssLength","toCssAngle","useGlowEffect","toCssNumber","clampUnit","value","useNoiseEffect","intensity"],"mappings":"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","file":"index.js","sourcesContent":["export const EFFECT_STYLES = `\n.pe-gradient-border {\n position: relative;\n isolation: isolate;\n border-radius: var(--pe-gb-radius, inherit);\n border-color: transparent;\n}\n\n.pe-gradient-border::before {\n content: '';\n position: absolute;\n z-index: -1;\n inset: calc(var(--pe-gb-thickness, 2px) * -1);\n border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));\n box-sizing: border-box;\n padding: var(--pe-gb-thickness, 2px);\n background: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9));\n pointer-events: none;\n\n /* Hollow out the center so only the ring remains. */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n mask-composite: exclude;\n}\n\n@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {\n .pe-gradient-border::before {\n z-index: -1;\n inset: calc(var(--pe-gb-thickness, 2px) * -1);\n border-radius: calc(var(--pe-gb-radius, 0px) + var(--pe-gb-thickness, 2px));\n padding: 0;\n border: var(--pe-gb-thickness, 2px) solid;\n border-image: linear-gradient(var(--pe-gb-angle, 120deg), var(--pe-gb-colors, #5eead4, #0ea5e9)) 1;\n }\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 { 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","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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@protohiro/effects",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "Zero-wrapper React hooks for composable CSS effects.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -9,12 +9,12 @@
9
9
  "types": "./dist/index.d.ts",
10
10
  "repository": {
11
11
  "type": "git",
12
- "url": "git+https://github.com/snwol/protoeffects.git",
12
+ "url": "git+https://github.com/protohiro-com/effects.git",
13
13
  "directory": "packages/react"
14
14
  },
15
- "homepage": "https://github.com/snwol/protoeffects#readme",
15
+ "homepage": "https://github.com/protohiro-com/effects#readme",
16
16
  "bugs": {
17
- "url": "https://github.com/snwol/protoeffects/issues"
17
+ "url": "https://github.com/protohiro-com/effects/issues"
18
18
  },
19
19
  "keywords": [
20
20
  "protoeffects",
@@ -39,7 +39,7 @@
39
39
  ],
40
40
  "sideEffects": false,
41
41
  "dependencies": {
42
- "@protohiro/effects-core": "0.1.0"
42
+ "@protohiro/effects-core": "0.1.2"
43
43
  },
44
44
  "peerDependencies": {
45
45
  "react": "^18.0.0",