@charcoal-ui/utils 5.0.0-beta.6 → 5.0.0-beta.7

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 (5) hide show
  1. package/dist/index.cjs +1 -229
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +1 -190
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -1,230 +1,2 @@
1
- //#region rolldown:runtime
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __copyProps = (to, from, except, desc) => {
9
- if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
10
- key = keys[i];
11
- if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
12
- get: ((k) => from[k]).bind(null, key),
13
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
14
- });
15
- }
16
- return to;
17
- };
18
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
19
- value: mod,
20
- enumerable: true
21
- }) : target, mod));
22
-
23
- //#endregion
24
- let polished = require("polished");
25
- polished = __toESM(polished);
26
-
27
- //#region src/index.ts
28
- const GRADIENT_DIRECTIONS = [
29
- "to top",
30
- "to bottom",
31
- "to left",
32
- "to right"
33
- ];
34
- function transparentGradient(color, defaultDirection = "to bottom") {
35
- return function transparentGradient$1(direction = defaultDirection) {
36
- const transparent = (0, polished.rgba)(color, 0);
37
- return (0, polished.linearGradient)({
38
- colorStops: [color, transparent],
39
- fallback: transparent,
40
- toDirection: typeof direction === "object" ? defaultDirection : direction
41
- });
42
- };
43
- }
44
- function gradient(toDirection = "to bottom") {
45
- return function toLinearGradient(value) {
46
- return (0, polished.linearGradient)({
47
- colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),
48
- fallback: value[0]?.color,
49
- toDirection
50
- });
51
- };
52
- }
53
- function applyEffectToGradient(effect) {
54
- return function toGradient(value) {
55
- return value.map(({ color, ratio }) => ({
56
- color: applyEffect(color, effect),
57
- ratio
58
- }));
59
- };
60
- }
61
- function applyEffect(baseColor, effects) {
62
- const color = baseColor ?? "#00000000";
63
- if (Array.isArray(effects)) return effects.reduce(applySingleEffect, color);
64
- return applySingleEffect(color, effects);
65
- }
66
- function applySingleEffect(baseColor, effect) {
67
- switch (effect.type) {
68
- case "alpha": return applyAlpha(baseColor, effect);
69
- case "opacity": return applyOpacity(baseColor, effect);
70
- case "replace": return applyReplace(baseColor, effect);
71
- default: throw new RangeError(`Unknown effect type ${effect.type}, upgrade @charcoal-ui/utils`);
72
- }
73
- }
74
- function applyAlpha(baseColor, { color, opacity }) {
75
- const base = (0, polished.parseToRgb)(baseColor);
76
- const effect = (0, polished.parseToRgb)(color);
77
- return (0, polished.rgba)(...alphaBlend([
78
- base.red,
79
- base.green,
80
- base.blue,
81
- base.alpha ?? 1
82
- ], [
83
- effect.red,
84
- effect.green,
85
- effect.blue,
86
- clamp(0, 1, (effect.alpha ?? 1) * (opacity ?? 1))
87
- ]));
88
- }
89
- function applyOpacity(baseColor, { opacity }) {
90
- const parsed = (0, polished.parseToRgb)(baseColor);
91
- parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1) * opacity);
92
- return (0, polished.rgbToColorString)(parsed);
93
- }
94
- function applyReplace(baseColor, { color = baseColor, opacity }) {
95
- if (opacity === void 0) return color;
96
- const parsed = (0, polished.parseToRgb)(color);
97
- parsed.alpha = opacity;
98
- return (0, polished.rgbToColorString)(parsed);
99
- }
100
- /**
101
- * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)
102
- *
103
- * @param src `[r, g, b, alpha]` Background
104
- * @param dst `[r, g, b, alpha]` Foreground
105
- */
106
- function alphaBlend(src, dst) {
107
- const srcA = src[3];
108
- const dstA = dst[3];
109
- const outA = srcA + dstA * (1 - srcA);
110
- if (outA < EPS) return [
111
- 0,
112
- 0,
113
- 0,
114
- 0
115
- ];
116
- return [
117
- Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),
118
- Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),
119
- Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),
120
- outA
121
- ];
122
- }
123
- const EPS = 1e-6;
124
- function clamp(min, max, value) {
125
- return Math.min(Math.max(value, min), max);
126
- }
127
- /**
128
- * affix `px` unit
129
- *
130
- * @param value pixel
131
- */
132
- function px(value) {
133
- return `${value}px`;
134
- }
135
- /**
136
- * affix `s` unit
137
- *
138
- * @param value second
139
- */
140
- function dur(value) {
141
- return `${value}s`;
142
- }
143
- const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`;
144
- const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`;
145
- /**
146
- * Construct media query from breakpoint
147
- */
148
- function maxWidth(breakpoint) {
149
- return `(max-width: ${breakpoint - 1}px)`;
150
- }
151
- /**
152
- * Derive half-leading from typography size
153
- */
154
- const halfLeading = ({ fontSize, lineHeight }) => (lineHeight - fontSize) / 2;
155
- /**
156
- * Namespaced custom property
157
- */
158
- const customPropertyToken = (id, modifiers = []) => `--charcoal-${id}${modifiers.length === 0 ? "" : ["", modifiers].join("-")}`;
159
- /**
160
- * @example
161
- * ```js
162
- * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
163
- * ````
164
- */
165
- function mapKeys(object, callback) {
166
- return Object.fromEntries(Object.entries(object).map(([key, value]) => [callback(key), value]));
167
- }
168
- /**
169
- * @example
170
- * ```js
171
- * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
172
- * key === 'b' ? undefined : [key + '1', value.toUpperCase()]
173
- * ) // => { a1: "AA", c1: "CC" }
174
- * ```
175
- */
176
- function mapObject(source, callback) {
177
- return Object.fromEntries(Object.entries(source).flatMap(([key, value]) => {
178
- const entry = callback(key, value);
179
- if (entry) return [entry];
180
- else return [];
181
- }));
182
- }
183
- /**
184
- * @example
185
- * ```js
186
- * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
187
- * [key + '1', value + '1'],
188
- * [key + '2', value + '2'],
189
- * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
190
- * ```
191
- */
192
- function flatMapObject(source, callback) {
193
- return Object.fromEntries(Object.entries(source).flatMap(([key, value]) => {
194
- return callback(key, value);
195
- }));
196
- }
197
- /**
198
- * @example
199
- * ```ts
200
- * filterObject(
201
- * { a: 'aa', b: 'bb', c: 'cc' },
202
- * (value): value is string => value !== 'bb'
203
- * ) // => { a: "aa", c: "cc" }
204
- * ```
205
- */
206
- function filterObject(source, fn) {
207
- return mapObject(source, (key, value) => {
208
- if (fn(value) === true) return [key, value];
209
- else return null;
210
- });
211
- }
212
-
213
- //#endregion
214
- exports.GRADIENT_DIRECTIONS = GRADIENT_DIRECTIONS;
215
- exports.applyEffect = applyEffect;
216
- exports.applyEffectToGradient = applyEffectToGradient;
217
- exports.customPropertyToken = customPropertyToken;
218
- exports.disabledSelector = disabledSelector;
219
- exports.dur = dur;
220
- exports.filterObject = filterObject;
221
- exports.flatMapObject = flatMapObject;
222
- exports.gradient = gradient;
223
- exports.halfLeading = halfLeading;
224
- exports.mapKeys = mapKeys;
225
- exports.mapObject = mapObject;
226
- exports.maxWidth = maxWidth;
227
- exports.notDisabledSelector = notDisabledSelector;
228
- exports.px = px;
229
- exports.transparentGradient = transparentGradient;
1
+ var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`polished`);c=s(c);const l=[`to top`,`to bottom`,`to left`,`to right`];function u(e,t=`to bottom`){return function(n=t){let r=(0,c.rgba)(e,0);return(0,c.linearGradient)({colorStops:[e,r],fallback:r,toDirection:typeof n==`object`?t:n})}}function d(e=`to bottom`){return function(t){return(0,c.linearGradient)({colorStops:t.map(({color:e,ratio:t})=>`${e} ${t}%`),fallback:t[0]?.color,toDirection:e})}}function f(e){return function(t){return t.map(({color:t,ratio:n})=>({color:p(t,e),ratio:n}))}}function p(e,t){let n=e??`#00000000`;return Array.isArray(t)?t.reduce(m,n):m(n,t)}function m(e,t){switch(t.type){case`alpha`:return h(e,t);case`opacity`:return g(e,t);case`replace`:return _(e,t);default:throw RangeError(`Unknown effect type ${t.type}, upgrade @charcoal-ui/utils`)}}function h(e,{color:t,opacity:n}){let r=(0,c.parseToRgb)(e),i=(0,c.parseToRgb)(t);return(0,c.rgba)(...v([r.red,r.green,r.blue,r.alpha??1],[i.red,i.green,i.blue,b(0,1,(i.alpha??1)*(n??1))]))}function g(e,{opacity:t}){let n=(0,c.parseToRgb)(e);return n.alpha=b(0,1,(n.alpha??1)*t),(0,c.rgbToColorString)(n)}function _(e,{color:t=e,opacity:n}){if(n===void 0)return t;let r=(0,c.parseToRgb)(t);return r.alpha=n,(0,c.rgbToColorString)(r)}function v(e,t){let n=e[3],r=t[3],i=n+r*(1-n);return i<y?[0,0,0,0]:[Math.round((e[0]*n*(1-r)+t[0]*r)/i),Math.round((e[1]*n*(1-r)+t[1]*r)/i),Math.round((e[2]*n*(1-r)+t[2]*r)/i),i]}const y=1e-6;function b(e,t,n){return Math.min(Math.max(n,e),t)}function x(e){return`${e}px`}function S(e){return`${e}s`}const C=`&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`,w=`&:disabled, &[aria-disabled]:not([aria-disabled=false])`;function T(e){return`(max-width: ${e-1}px)`}const E=({fontSize:e,lineHeight:t})=>(t-e)/2,D=(e,t=[])=>`--charcoal-${e}${t.length===0?``:[``,t].join(`-`)}`;function O(e,t){return Object.fromEntries(Object.entries(e).map(([e,n])=>[t(e),n]))}function k(e,t){return Object.fromEntries(Object.entries(e).flatMap(([e,n])=>{let r=t(e,n);return r?[r]:[]}))}function A(e,t){return Object.fromEntries(Object.entries(e).flatMap(([e,n])=>t(e,n)))}function j(e,t){return k(e,(e,n)=>t(n)===!0?[e,n]:null)}exports.GRADIENT_DIRECTIONS=l,exports.applyEffect=p,exports.applyEffectToGradient=f,exports.customPropertyToken=D,exports.disabledSelector=`&:disabled, &[aria-disabled]:not([aria-disabled=false])`,exports.dur=S,exports.filterObject=j,exports.flatMapObject=A,exports.gradient=d,exports.halfLeading=E,exports.mapKeys=O,exports.mapObject=k,exports.maxWidth=T,exports.notDisabledSelector=`&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`,exports.px=x,exports.transparentGradient=u;
230
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["transparentGradient","base: RgbaColor","effect: RgbaColor","parsed: RgbaColor"],"sources":["../src/index.ts"],"sourcesContent":["import { rgba, rgbToColorString, parseToRgb, linearGradient } from 'polished'\nimport type { RgbColor } from 'polished/lib/types/color'\n\nimport type {\n AlphaEffect,\n Effect,\n Effects,\n GradientMaterial,\n OpacityEffect,\n ReplaceEffect,\n TypographyDescriptor,\n} from '@charcoal-ui/foundation'\nimport type { Styles } from 'polished/lib/types/style'\n\nexport const GRADIENT_DIRECTIONS = [\n 'to top',\n 'to bottom',\n 'to left',\n 'to right',\n] as const\n\nexport type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number]\n\nexport function transparentGradient(\n color: string,\n defaultDirection: GradientDirection = 'to bottom',\n) {\n return function transparentGradient(\n direction: GradientDirection | object = defaultDirection,\n ): Styles {\n const transparent = rgba(color, 0)\n return linearGradient({\n colorStops: [color, transparent],\n fallback: transparent,\n toDirection: typeof direction === 'object' ? defaultDirection : direction,\n })\n }\n}\n\nexport function gradient(toDirection: GradientDirection = 'to bottom') {\n return function toLinearGradient(value: GradientMaterial): Styles {\n return linearGradient({\n colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),\n fallback: value[0]?.color,\n toDirection,\n })\n }\n}\n\nexport function applyEffectToGradient(effect: Effects) {\n return function toGradient(value: GradientMaterial): GradientMaterial {\n return value.map(({ color, ratio }) => ({\n color: applyEffect(color, effect),\n ratio,\n }))\n }\n}\n\ninterface RgbaColor extends RgbColor {\n alpha?: number\n}\n\ninterface ReadonlyArrayConstructor {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isArray(value: any): value is readonly any[]\n}\n\nexport function applyEffect(\n baseColor: string | null,\n effects: Effects,\n): string {\n const color = baseColor ?? '#00000000'\n if ((Array as ReadonlyArrayConstructor).isArray(effects)) {\n return effects.reduce(applySingleEffect, color)\n }\n return applySingleEffect(color, effects)\n}\n\nfunction applySingleEffect(baseColor: string, effect: Effect): string {\n switch (effect.type) {\n case 'alpha':\n return applyAlpha(baseColor, effect)\n case 'opacity':\n return applyOpacity(baseColor, effect)\n case 'replace':\n return applyReplace(baseColor, effect)\n default:\n throw new RangeError(\n `Unknown effect type ${\n (effect as Effect).type\n }, upgrade @charcoal-ui/utils`,\n )\n }\n}\n\nfunction applyAlpha(baseColor: string, { color, opacity }: AlphaEffect) {\n const base: RgbaColor = parseToRgb(baseColor)\n const effect: RgbaColor = parseToRgb(color)\n const src = [base.red, base.green, base.blue, base.alpha ?? 1.0] as const\n const dst = [\n effect.red,\n effect.green,\n effect.blue,\n clamp(0, 1, (effect.alpha ?? 1.0) * (opacity ?? 1.0)),\n ] as const\n return rgba(...alphaBlend(src, dst))\n}\n\nfunction applyOpacity(baseColor: string, { opacity }: OpacityEffect) {\n const parsed: RgbaColor = parseToRgb(baseColor)\n parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1.0) * opacity)\n return rgbToColorString(parsed)\n}\n\nfunction applyReplace(\n baseColor: string,\n { color = baseColor, opacity }: ReplaceEffect,\n) {\n if (opacity === undefined) {\n return color\n }\n const parsed: RgbaColor = parseToRgb(color)\n // NOTE: intentionally ignores any alpha value in the baseColor\n parsed.alpha = opacity\n return rgbToColorString(parsed)\n}\n\ntype Color4 = readonly [number, number, number, number]\n\n/**\n * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)\n *\n * @param src `[r, g, b, alpha]` Background\n * @param dst `[r, g, b, alpha]` Foreground\n */\nfunction alphaBlend(src: Color4, dst: Color4): Color4 {\n const srcA = src[3]\n const dstA = dst[3]\n const outA = srcA + dstA * (1 - srcA)\n if (outA < EPS) {\n // blending 0% alpha with 0% alpha\n return [0, 0, 0, 0]\n }\n return [\n Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),\n Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),\n Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),\n outA,\n ]\n}\nconst EPS = 1e-6\n\nfunction clamp(min: number, max: number, value: number) {\n return Math.min(Math.max(value, min), max)\n}\n\n/**\n * affix `px` unit\n *\n * @param value pixel\n */\nexport function px(value: number) {\n return `${value}px`\n}\n\n/**\n * affix `s` unit\n *\n * @param value second\n */\nexport function dur(value: number) {\n return `${value}s`\n}\n\nexport const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`\n\nexport const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`\n\n/**\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n return `(max-width: ${breakpoint - 1}px)`\n}\n\n/**\n * Derive half-leading from typography size\n */\nexport const halfLeading = ({\n fontSize,\n lineHeight,\n}: TypographyDescriptor): number => (lineHeight - fontSize) / 2\n\n/**\n * Namespaced custom property\n */\nexport const customPropertyToken = (\n id: string,\n modifiers: readonly string[] = [],\n): `--charcoal-${string}` =>\n `--charcoal-${id}${modifiers.length === 0 ? '' : ['', modifiers].join('-')}`\n\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n object: Record<string, V>,\n callback: (key: string) => K,\n) {\n return Object.fromEntries(\n Object.entries(object).map(([key, value]) => [callback(key), value]),\n ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n * key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (\n key: SourceKey,\n value: SourceValue,\n ) => [DestKey, DestValue] | null | undefined,\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n const entry = callback(key as SourceKey, value as SourceValue)\n if (entry) {\n return [entry]\n } else {\n return []\n }\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n * [key + '1', value + '1'],\n * [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][],\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n return callback(key as SourceKey, value as SourceValue)\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n * { a: 'aa', b: 'bb', c: 'cc' },\n * (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n source: Record<string, Source>,\n fn: (value: Source) => value is Dest,\n) {\n return mapObject(source, (key, value) => {\n if (fn(value) === true) {\n return [key, value]\n } else {\n return null\n }\n }) as Record<string, Dest>\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","names":["transparentGradient","base: RgbaColor","effect: RgbaColor","parsed: RgbaColor"],"sources":["../src/index.ts"],"sourcesContent":["import { rgba, rgbToColorString, parseToRgb, linearGradient } from 'polished'\nimport type { RgbColor } from 'polished/lib/types/color'\n\nimport type {\n AlphaEffect,\n Effect,\n Effects,\n GradientMaterial,\n OpacityEffect,\n ReplaceEffect,\n TypographyDescriptor,\n} from '@charcoal-ui/foundation'\nimport type { Styles } from 'polished/lib/types/style'\n\nexport const GRADIENT_DIRECTIONS = [\n 'to top',\n 'to bottom',\n 'to left',\n 'to right',\n] as const\n\nexport type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number]\n\nexport function transparentGradient(\n color: string,\n defaultDirection: GradientDirection = 'to bottom',\n) {\n return function transparentGradient(\n direction: GradientDirection | object = defaultDirection,\n ): Styles {\n const transparent = rgba(color, 0)\n return linearGradient({\n colorStops: [color, transparent],\n fallback: transparent,\n toDirection: typeof direction === 'object' ? defaultDirection : direction,\n })\n }\n}\n\nexport function gradient(toDirection: GradientDirection = 'to bottom') {\n return function toLinearGradient(value: GradientMaterial): Styles {\n return linearGradient({\n colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),\n fallback: value[0]?.color,\n toDirection,\n })\n }\n}\n\nexport function applyEffectToGradient(effect: Effects) {\n return function toGradient(value: GradientMaterial): GradientMaterial {\n return value.map(({ color, ratio }) => ({\n color: applyEffect(color, effect),\n ratio,\n }))\n }\n}\n\ninterface RgbaColor extends RgbColor {\n alpha?: number\n}\n\ninterface ReadonlyArrayConstructor {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isArray(value: any): value is readonly any[]\n}\n\nexport function applyEffect(\n baseColor: string | null,\n effects: Effects,\n): string {\n const color = baseColor ?? '#00000000'\n if ((Array as ReadonlyArrayConstructor).isArray(effects)) {\n return effects.reduce(applySingleEffect, color)\n }\n return applySingleEffect(color, effects)\n}\n\nfunction applySingleEffect(baseColor: string, effect: Effect): string {\n switch (effect.type) {\n case 'alpha':\n return applyAlpha(baseColor, effect)\n case 'opacity':\n return applyOpacity(baseColor, effect)\n case 'replace':\n return applyReplace(baseColor, effect)\n default:\n throw new RangeError(\n `Unknown effect type ${\n (effect as Effect).type\n }, upgrade @charcoal-ui/utils`,\n )\n }\n}\n\nfunction applyAlpha(baseColor: string, { color, opacity }: AlphaEffect) {\n const base: RgbaColor = parseToRgb(baseColor)\n const effect: RgbaColor = parseToRgb(color)\n const src = [base.red, base.green, base.blue, base.alpha ?? 1.0] as const\n const dst = [\n effect.red,\n effect.green,\n effect.blue,\n clamp(0, 1, (effect.alpha ?? 1.0) * (opacity ?? 1.0)),\n ] as const\n return rgba(...alphaBlend(src, dst))\n}\n\nfunction applyOpacity(baseColor: string, { opacity }: OpacityEffect) {\n const parsed: RgbaColor = parseToRgb(baseColor)\n parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1.0) * opacity)\n return rgbToColorString(parsed)\n}\n\nfunction applyReplace(\n baseColor: string,\n { color = baseColor, opacity }: ReplaceEffect,\n) {\n if (opacity === undefined) {\n return color\n }\n const parsed: RgbaColor = parseToRgb(color)\n // NOTE: intentionally ignores any alpha value in the baseColor\n parsed.alpha = opacity\n return rgbToColorString(parsed)\n}\n\ntype Color4 = readonly [number, number, number, number]\n\n/**\n * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)\n *\n * @param src `[r, g, b, alpha]` Background\n * @param dst `[r, g, b, alpha]` Foreground\n */\nfunction alphaBlend(src: Color4, dst: Color4): Color4 {\n const srcA = src[3]\n const dstA = dst[3]\n const outA = srcA + dstA * (1 - srcA)\n if (outA < EPS) {\n // blending 0% alpha with 0% alpha\n return [0, 0, 0, 0]\n }\n return [\n Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),\n Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),\n Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),\n outA,\n ]\n}\nconst EPS = 1e-6\n\nfunction clamp(min: number, max: number, value: number) {\n return Math.min(Math.max(value, min), max)\n}\n\n/**\n * affix `px` unit\n *\n * @param value pixel\n */\nexport function px(value: number) {\n return `${value}px`\n}\n\n/**\n * affix `s` unit\n *\n * @param value second\n */\nexport function dur(value: number) {\n return `${value}s`\n}\n\nexport const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`\n\nexport const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`\n\n/**\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n return `(max-width: ${breakpoint - 1}px)`\n}\n\n/**\n * Derive half-leading from typography size\n */\nexport const halfLeading = ({\n fontSize,\n lineHeight,\n}: TypographyDescriptor): number => (lineHeight - fontSize) / 2\n\n/**\n * Namespaced custom property\n */\nexport const customPropertyToken = (\n id: string,\n modifiers: readonly string[] = [],\n): `--charcoal-${string}` =>\n `--charcoal-${id}${modifiers.length === 0 ? '' : ['', modifiers].join('-')}`\n\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n object: Record<string, V>,\n callback: (key: string) => K,\n) {\n return Object.fromEntries(\n Object.entries(object).map(([key, value]) => [callback(key), value]),\n ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n * key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (\n key: SourceKey,\n value: SourceValue,\n ) => [DestKey, DestValue] | null | undefined,\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n const entry = callback(key as SourceKey, value as SourceValue)\n if (entry) {\n return [entry]\n } else {\n return []\n }\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n * [key + '1', value + '1'],\n * [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][],\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n return callback(key as SourceKey, value as SourceValue)\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n * { a: 'aa', b: 'bb', c: 'cc' },\n * (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n source: Record<string, Source>,\n fn: (value: Source) => value is Dest,\n) {\n return mapObject(source, (key, value) => {\n if (fn(value) === true) {\n return [key, value]\n } else {\n return null\n }\n }) as Record<string, Dest>\n}\n"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,191 +1,2 @@
1
- import { linearGradient, parseToRgb, rgbToColorString, rgba } from "polished";
2
-
3
- //#region src/index.ts
4
- const GRADIENT_DIRECTIONS = [
5
- "to top",
6
- "to bottom",
7
- "to left",
8
- "to right"
9
- ];
10
- function transparentGradient(color, defaultDirection = "to bottom") {
11
- return function transparentGradient$1(direction = defaultDirection) {
12
- const transparent = rgba(color, 0);
13
- return linearGradient({
14
- colorStops: [color, transparent],
15
- fallback: transparent,
16
- toDirection: typeof direction === "object" ? defaultDirection : direction
17
- });
18
- };
19
- }
20
- function gradient(toDirection = "to bottom") {
21
- return function toLinearGradient(value) {
22
- return linearGradient({
23
- colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),
24
- fallback: value[0]?.color,
25
- toDirection
26
- });
27
- };
28
- }
29
- function applyEffectToGradient(effect) {
30
- return function toGradient(value) {
31
- return value.map(({ color, ratio }) => ({
32
- color: applyEffect(color, effect),
33
- ratio
34
- }));
35
- };
36
- }
37
- function applyEffect(baseColor, effects) {
38
- const color = baseColor ?? "#00000000";
39
- if (Array.isArray(effects)) return effects.reduce(applySingleEffect, color);
40
- return applySingleEffect(color, effects);
41
- }
42
- function applySingleEffect(baseColor, effect) {
43
- switch (effect.type) {
44
- case "alpha": return applyAlpha(baseColor, effect);
45
- case "opacity": return applyOpacity(baseColor, effect);
46
- case "replace": return applyReplace(baseColor, effect);
47
- default: throw new RangeError(`Unknown effect type ${effect.type}, upgrade @charcoal-ui/utils`);
48
- }
49
- }
50
- function applyAlpha(baseColor, { color, opacity }) {
51
- const base = parseToRgb(baseColor);
52
- const effect = parseToRgb(color);
53
- return rgba(...alphaBlend([
54
- base.red,
55
- base.green,
56
- base.blue,
57
- base.alpha ?? 1
58
- ], [
59
- effect.red,
60
- effect.green,
61
- effect.blue,
62
- clamp(0, 1, (effect.alpha ?? 1) * (opacity ?? 1))
63
- ]));
64
- }
65
- function applyOpacity(baseColor, { opacity }) {
66
- const parsed = parseToRgb(baseColor);
67
- parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1) * opacity);
68
- return rgbToColorString(parsed);
69
- }
70
- function applyReplace(baseColor, { color = baseColor, opacity }) {
71
- if (opacity === void 0) return color;
72
- const parsed = parseToRgb(color);
73
- parsed.alpha = opacity;
74
- return rgbToColorString(parsed);
75
- }
76
- /**
77
- * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)
78
- *
79
- * @param src `[r, g, b, alpha]` Background
80
- * @param dst `[r, g, b, alpha]` Foreground
81
- */
82
- function alphaBlend(src, dst) {
83
- const srcA = src[3];
84
- const dstA = dst[3];
85
- const outA = srcA + dstA * (1 - srcA);
86
- if (outA < EPS) return [
87
- 0,
88
- 0,
89
- 0,
90
- 0
91
- ];
92
- return [
93
- Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),
94
- Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),
95
- Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),
96
- outA
97
- ];
98
- }
99
- const EPS = 1e-6;
100
- function clamp(min, max, value) {
101
- return Math.min(Math.max(value, min), max);
102
- }
103
- /**
104
- * affix `px` unit
105
- *
106
- * @param value pixel
107
- */
108
- function px(value) {
109
- return `${value}px`;
110
- }
111
- /**
112
- * affix `s` unit
113
- *
114
- * @param value second
115
- */
116
- function dur(value) {
117
- return `${value}s`;
118
- }
119
- const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`;
120
- const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`;
121
- /**
122
- * Construct media query from breakpoint
123
- */
124
- function maxWidth(breakpoint) {
125
- return `(max-width: ${breakpoint - 1}px)`;
126
- }
127
- /**
128
- * Derive half-leading from typography size
129
- */
130
- const halfLeading = ({ fontSize, lineHeight }) => (lineHeight - fontSize) / 2;
131
- /**
132
- * Namespaced custom property
133
- */
134
- const customPropertyToken = (id, modifiers = []) => `--charcoal-${id}${modifiers.length === 0 ? "" : ["", modifiers].join("-")}`;
135
- /**
136
- * @example
137
- * ```js
138
- * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
139
- * ````
140
- */
141
- function mapKeys(object, callback) {
142
- return Object.fromEntries(Object.entries(object).map(([key, value]) => [callback(key), value]));
143
- }
144
- /**
145
- * @example
146
- * ```js
147
- * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
148
- * key === 'b' ? undefined : [key + '1', value.toUpperCase()]
149
- * ) // => { a1: "AA", c1: "CC" }
150
- * ```
151
- */
152
- function mapObject(source, callback) {
153
- return Object.fromEntries(Object.entries(source).flatMap(([key, value]) => {
154
- const entry = callback(key, value);
155
- if (entry) return [entry];
156
- else return [];
157
- }));
158
- }
159
- /**
160
- * @example
161
- * ```js
162
- * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
163
- * [key + '1', value + '1'],
164
- * [key + '2', value + '2'],
165
- * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
166
- * ```
167
- */
168
- function flatMapObject(source, callback) {
169
- return Object.fromEntries(Object.entries(source).flatMap(([key, value]) => {
170
- return callback(key, value);
171
- }));
172
- }
173
- /**
174
- * @example
175
- * ```ts
176
- * filterObject(
177
- * { a: 'aa', b: 'bb', c: 'cc' },
178
- * (value): value is string => value !== 'bb'
179
- * ) // => { a: "aa", c: "cc" }
180
- * ```
181
- */
182
- function filterObject(source, fn) {
183
- return mapObject(source, (key, value) => {
184
- if (fn(value) === true) return [key, value];
185
- else return null;
186
- });
187
- }
188
-
189
- //#endregion
190
- export { GRADIENT_DIRECTIONS, applyEffect, applyEffectToGradient, customPropertyToken, disabledSelector, dur, filterObject, flatMapObject, gradient, halfLeading, mapKeys, mapObject, maxWidth, notDisabledSelector, px, transparentGradient };
1
+ import{linearGradient as e,parseToRgb as t,rgbToColorString as n,rgba as r}from"polished";const i=[`to top`,`to bottom`,`to left`,`to right`];function a(t,n=`to bottom`){return function(i=n){let a=r(t,0);return e({colorStops:[t,a],fallback:a,toDirection:typeof i==`object`?n:i})}}function o(t=`to bottom`){return function(n){return e({colorStops:n.map(({color:e,ratio:t})=>`${e} ${t}%`),fallback:n[0]?.color,toDirection:t})}}function s(e){return function(t){return t.map(({color:t,ratio:n})=>({color:c(t,e),ratio:n}))}}function c(e,t){let n=e??`#00000000`;return Array.isArray(t)?t.reduce(l,n):l(n,t)}function l(e,t){switch(t.type){case`alpha`:return u(e,t);case`opacity`:return d(e,t);case`replace`:return f(e,t);default:throw RangeError(`Unknown effect type ${t.type}, upgrade @charcoal-ui/utils`)}}function u(e,{color:n,opacity:i}){let a=t(e),o=t(n);return r(...p([a.red,a.green,a.blue,a.alpha??1],[o.red,o.green,o.blue,h(0,1,(o.alpha??1)*(i??1))]))}function d(e,{opacity:r}){let i=t(e);return i.alpha=h(0,1,(i.alpha??1)*r),n(i)}function f(e,{color:r=e,opacity:i}){if(i===void 0)return r;let a=t(r);return a.alpha=i,n(a)}function p(e,t){let n=e[3],r=t[3],i=n+r*(1-n);return i<m?[0,0,0,0]:[Math.round((e[0]*n*(1-r)+t[0]*r)/i),Math.round((e[1]*n*(1-r)+t[1]*r)/i),Math.round((e[2]*n*(1-r)+t[2]*r)/i),i]}const m=1e-6;function h(e,t,n){return Math.min(Math.max(n,e),t)}function g(e){return`${e}px`}function _(e){return`${e}s`}const v=`&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`,y=`&:disabled, &[aria-disabled]:not([aria-disabled=false])`;function b(e){return`(max-width: ${e-1}px)`}const x=({fontSize:e,lineHeight:t})=>(t-e)/2,S=(e,t=[])=>`--charcoal-${e}${t.length===0?``:[``,t].join(`-`)}`;function C(e,t){return Object.fromEntries(Object.entries(e).map(([e,n])=>[t(e),n]))}function w(e,t){return Object.fromEntries(Object.entries(e).flatMap(([e,n])=>{let r=t(e,n);return r?[r]:[]}))}function T(e,t){return Object.fromEntries(Object.entries(e).flatMap(([e,n])=>t(e,n)))}function E(e,t){return w(e,(e,n)=>t(n)===!0?[e,n]:null)}export{i as GRADIENT_DIRECTIONS,c as applyEffect,s as applyEffectToGradient,S as customPropertyToken,y as disabledSelector,_ as dur,E as filterObject,T as flatMapObject,o as gradient,x as halfLeading,C as mapKeys,w as mapObject,b as maxWidth,v as notDisabledSelector,g as px,a as transparentGradient};
191
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["transparentGradient","base: RgbaColor","effect: RgbaColor","parsed: RgbaColor"],"sources":["../src/index.ts"],"sourcesContent":["import { rgba, rgbToColorString, parseToRgb, linearGradient } from 'polished'\nimport type { RgbColor } from 'polished/lib/types/color'\n\nimport type {\n AlphaEffect,\n Effect,\n Effects,\n GradientMaterial,\n OpacityEffect,\n ReplaceEffect,\n TypographyDescriptor,\n} from '@charcoal-ui/foundation'\nimport type { Styles } from 'polished/lib/types/style'\n\nexport const GRADIENT_DIRECTIONS = [\n 'to top',\n 'to bottom',\n 'to left',\n 'to right',\n] as const\n\nexport type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number]\n\nexport function transparentGradient(\n color: string,\n defaultDirection: GradientDirection = 'to bottom',\n) {\n return function transparentGradient(\n direction: GradientDirection | object = defaultDirection,\n ): Styles {\n const transparent = rgba(color, 0)\n return linearGradient({\n colorStops: [color, transparent],\n fallback: transparent,\n toDirection: typeof direction === 'object' ? defaultDirection : direction,\n })\n }\n}\n\nexport function gradient(toDirection: GradientDirection = 'to bottom') {\n return function toLinearGradient(value: GradientMaterial): Styles {\n return linearGradient({\n colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),\n fallback: value[0]?.color,\n toDirection,\n })\n }\n}\n\nexport function applyEffectToGradient(effect: Effects) {\n return function toGradient(value: GradientMaterial): GradientMaterial {\n return value.map(({ color, ratio }) => ({\n color: applyEffect(color, effect),\n ratio,\n }))\n }\n}\n\ninterface RgbaColor extends RgbColor {\n alpha?: number\n}\n\ninterface ReadonlyArrayConstructor {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isArray(value: any): value is readonly any[]\n}\n\nexport function applyEffect(\n baseColor: string | null,\n effects: Effects,\n): string {\n const color = baseColor ?? '#00000000'\n if ((Array as ReadonlyArrayConstructor).isArray(effects)) {\n return effects.reduce(applySingleEffect, color)\n }\n return applySingleEffect(color, effects)\n}\n\nfunction applySingleEffect(baseColor: string, effect: Effect): string {\n switch (effect.type) {\n case 'alpha':\n return applyAlpha(baseColor, effect)\n case 'opacity':\n return applyOpacity(baseColor, effect)\n case 'replace':\n return applyReplace(baseColor, effect)\n default:\n throw new RangeError(\n `Unknown effect type ${\n (effect as Effect).type\n }, upgrade @charcoal-ui/utils`,\n )\n }\n}\n\nfunction applyAlpha(baseColor: string, { color, opacity }: AlphaEffect) {\n const base: RgbaColor = parseToRgb(baseColor)\n const effect: RgbaColor = parseToRgb(color)\n const src = [base.red, base.green, base.blue, base.alpha ?? 1.0] as const\n const dst = [\n effect.red,\n effect.green,\n effect.blue,\n clamp(0, 1, (effect.alpha ?? 1.0) * (opacity ?? 1.0)),\n ] as const\n return rgba(...alphaBlend(src, dst))\n}\n\nfunction applyOpacity(baseColor: string, { opacity }: OpacityEffect) {\n const parsed: RgbaColor = parseToRgb(baseColor)\n parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1.0) * opacity)\n return rgbToColorString(parsed)\n}\n\nfunction applyReplace(\n baseColor: string,\n { color = baseColor, opacity }: ReplaceEffect,\n) {\n if (opacity === undefined) {\n return color\n }\n const parsed: RgbaColor = parseToRgb(color)\n // NOTE: intentionally ignores any alpha value in the baseColor\n parsed.alpha = opacity\n return rgbToColorString(parsed)\n}\n\ntype Color4 = readonly [number, number, number, number]\n\n/**\n * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)\n *\n * @param src `[r, g, b, alpha]` Background\n * @param dst `[r, g, b, alpha]` Foreground\n */\nfunction alphaBlend(src: Color4, dst: Color4): Color4 {\n const srcA = src[3]\n const dstA = dst[3]\n const outA = srcA + dstA * (1 - srcA)\n if (outA < EPS) {\n // blending 0% alpha with 0% alpha\n return [0, 0, 0, 0]\n }\n return [\n Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),\n Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),\n Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),\n outA,\n ]\n}\nconst EPS = 1e-6\n\nfunction clamp(min: number, max: number, value: number) {\n return Math.min(Math.max(value, min), max)\n}\n\n/**\n * affix `px` unit\n *\n * @param value pixel\n */\nexport function px(value: number) {\n return `${value}px`\n}\n\n/**\n * affix `s` unit\n *\n * @param value second\n */\nexport function dur(value: number) {\n return `${value}s`\n}\n\nexport const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`\n\nexport const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`\n\n/**\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n return `(max-width: ${breakpoint - 1}px)`\n}\n\n/**\n * Derive half-leading from typography size\n */\nexport const halfLeading = ({\n fontSize,\n lineHeight,\n}: TypographyDescriptor): number => (lineHeight - fontSize) / 2\n\n/**\n * Namespaced custom property\n */\nexport const customPropertyToken = (\n id: string,\n modifiers: readonly string[] = [],\n): `--charcoal-${string}` =>\n `--charcoal-${id}${modifiers.length === 0 ? '' : ['', modifiers].join('-')}`\n\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n object: Record<string, V>,\n callback: (key: string) => K,\n) {\n return Object.fromEntries(\n Object.entries(object).map(([key, value]) => [callback(key), value]),\n ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n * key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (\n key: SourceKey,\n value: SourceValue,\n ) => [DestKey, DestValue] | null | undefined,\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n const entry = callback(key as SourceKey, value as SourceValue)\n if (entry) {\n return [entry]\n } else {\n return []\n }\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n * [key + '1', value + '1'],\n * [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][],\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n return callback(key as SourceKey, value as SourceValue)\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n * { a: 'aa', b: 'bb', c: 'cc' },\n * (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n source: Record<string, Source>,\n fn: (value: Source) => value is Dest,\n) {\n return mapObject(source, (key, value) => {\n if (fn(value) === true) {\n return [key, value]\n } else {\n return null\n }\n }) as Record<string, Dest>\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["transparentGradient","base: RgbaColor","effect: RgbaColor","parsed: RgbaColor"],"sources":["../src/index.ts"],"sourcesContent":["import { rgba, rgbToColorString, parseToRgb, linearGradient } from 'polished'\nimport type { RgbColor } from 'polished/lib/types/color'\n\nimport type {\n AlphaEffect,\n Effect,\n Effects,\n GradientMaterial,\n OpacityEffect,\n ReplaceEffect,\n TypographyDescriptor,\n} from '@charcoal-ui/foundation'\nimport type { Styles } from 'polished/lib/types/style'\n\nexport const GRADIENT_DIRECTIONS = [\n 'to top',\n 'to bottom',\n 'to left',\n 'to right',\n] as const\n\nexport type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number]\n\nexport function transparentGradient(\n color: string,\n defaultDirection: GradientDirection = 'to bottom',\n) {\n return function transparentGradient(\n direction: GradientDirection | object = defaultDirection,\n ): Styles {\n const transparent = rgba(color, 0)\n return linearGradient({\n colorStops: [color, transparent],\n fallback: transparent,\n toDirection: typeof direction === 'object' ? defaultDirection : direction,\n })\n }\n}\n\nexport function gradient(toDirection: GradientDirection = 'to bottom') {\n return function toLinearGradient(value: GradientMaterial): Styles {\n return linearGradient({\n colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),\n fallback: value[0]?.color,\n toDirection,\n })\n }\n}\n\nexport function applyEffectToGradient(effect: Effects) {\n return function toGradient(value: GradientMaterial): GradientMaterial {\n return value.map(({ color, ratio }) => ({\n color: applyEffect(color, effect),\n ratio,\n }))\n }\n}\n\ninterface RgbaColor extends RgbColor {\n alpha?: number\n}\n\ninterface ReadonlyArrayConstructor {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n isArray(value: any): value is readonly any[]\n}\n\nexport function applyEffect(\n baseColor: string | null,\n effects: Effects,\n): string {\n const color = baseColor ?? '#00000000'\n if ((Array as ReadonlyArrayConstructor).isArray(effects)) {\n return effects.reduce(applySingleEffect, color)\n }\n return applySingleEffect(color, effects)\n}\n\nfunction applySingleEffect(baseColor: string, effect: Effect): string {\n switch (effect.type) {\n case 'alpha':\n return applyAlpha(baseColor, effect)\n case 'opacity':\n return applyOpacity(baseColor, effect)\n case 'replace':\n return applyReplace(baseColor, effect)\n default:\n throw new RangeError(\n `Unknown effect type ${\n (effect as Effect).type\n }, upgrade @charcoal-ui/utils`,\n )\n }\n}\n\nfunction applyAlpha(baseColor: string, { color, opacity }: AlphaEffect) {\n const base: RgbaColor = parseToRgb(baseColor)\n const effect: RgbaColor = parseToRgb(color)\n const src = [base.red, base.green, base.blue, base.alpha ?? 1.0] as const\n const dst = [\n effect.red,\n effect.green,\n effect.blue,\n clamp(0, 1, (effect.alpha ?? 1.0) * (opacity ?? 1.0)),\n ] as const\n return rgba(...alphaBlend(src, dst))\n}\n\nfunction applyOpacity(baseColor: string, { opacity }: OpacityEffect) {\n const parsed: RgbaColor = parseToRgb(baseColor)\n parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1.0) * opacity)\n return rgbToColorString(parsed)\n}\n\nfunction applyReplace(\n baseColor: string,\n { color = baseColor, opacity }: ReplaceEffect,\n) {\n if (opacity === undefined) {\n return color\n }\n const parsed: RgbaColor = parseToRgb(color)\n // NOTE: intentionally ignores any alpha value in the baseColor\n parsed.alpha = opacity\n return rgbToColorString(parsed)\n}\n\ntype Color4 = readonly [number, number, number, number]\n\n/**\n * NOTE: alpha component must be in range from 0.0 to 1.0. (0.0 represents a fully transparent)\n *\n * @param src `[r, g, b, alpha]` Background\n * @param dst `[r, g, b, alpha]` Foreground\n */\nfunction alphaBlend(src: Color4, dst: Color4): Color4 {\n const srcA = src[3]\n const dstA = dst[3]\n const outA = srcA + dstA * (1 - srcA)\n if (outA < EPS) {\n // blending 0% alpha with 0% alpha\n return [0, 0, 0, 0]\n }\n return [\n Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),\n Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),\n Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),\n outA,\n ]\n}\nconst EPS = 1e-6\n\nfunction clamp(min: number, max: number, value: number) {\n return Math.min(Math.max(value, min), max)\n}\n\n/**\n * affix `px` unit\n *\n * @param value pixel\n */\nexport function px(value: number) {\n return `${value}px`\n}\n\n/**\n * affix `s` unit\n *\n * @param value second\n */\nexport function dur(value: number) {\n return `${value}s`\n}\n\nexport const notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`\n\nexport const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`\n\n/**\n * Construct media query from breakpoint\n */\nexport function maxWidth(breakpoint: number) {\n return `(max-width: ${breakpoint - 1}px)`\n}\n\n/**\n * Derive half-leading from typography size\n */\nexport const halfLeading = ({\n fontSize,\n lineHeight,\n}: TypographyDescriptor): number => (lineHeight - fontSize) / 2\n\n/**\n * Namespaced custom property\n */\nexport const customPropertyToken = (\n id: string,\n modifiers: readonly string[] = [],\n): `--charcoal-${string}` =>\n `--charcoal-${id}${modifiers.length === 0 ? '' : ['', modifiers].join('-')}`\n\n/**\n * @example\n * ```js\n * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: \"aa\", B: \"bb\" }\n * ````\n */\nexport function mapKeys<V, K extends string>(\n object: Record<string, V>,\n callback: (key: string) => K,\n) {\n return Object.fromEntries(\n Object.entries(object).map(([key, value]) => [callback(key), value]),\n ) as Record<K, V>\n}\n\n/**\n * @example\n * ```js\n * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>\n * key === 'b' ? undefined : [key + '1', value.toUpperCase()]\n * ) // => { a1: \"AA\", c1: \"CC\" }\n * ```\n */\nexport function mapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (\n key: SourceKey,\n value: SourceValue,\n ) => [DestKey, DestValue] | null | undefined,\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n const entry = callback(key as SourceKey, value as SourceValue)\n if (entry) {\n return [entry]\n } else {\n return []\n }\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```js\n * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [\n * [key + '1', value + '1'],\n * [key + '2', value + '2'],\n * ]) // => { a1: \"aa1\", a2: \"aa2\", b1: \"bb1\", b2: \"bb2\" }\n * ```\n */\nexport function flatMapObject<\n SourceKey extends string,\n SourceValue,\n DestKey extends string,\n DestValue,\n>(\n source: Record<SourceKey, SourceValue>,\n callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][],\n) {\n return Object.fromEntries(\n Object.entries(source).flatMap(([key, value]) => {\n return callback(key as SourceKey, value as SourceValue)\n }),\n ) as Record<DestKey, DestValue>\n}\n\n/**\n * @example\n * ```ts\n * filterObject(\n * { a: 'aa', b: 'bb', c: 'cc' },\n * (value): value is string => value !== 'bb'\n * ) // => { a: \"aa\", c: \"cc\" }\n * ```\n */\nexport function filterObject<Source, Dest extends Source>(\n source: Record<string, Source>,\n fn: (value: Source) => value is Dest,\n) {\n return mapObject(source, (key, value) => {\n if (fn(value) === true) {\n return [key, value]\n } else {\n return null\n }\n }) as Record<string, Dest>\n}\n"],"mappings":"0FAcA,MAAa,EAAsB,CACjC,SACA,YACA,UACA,WACD,CAID,SAAgB,EACd,EACA,EAAsC,YACtC,CACA,OAAO,SACL,EAAwC,EAChC,CACR,IAAM,EAAc,EAAK,EAAO,EAAE,CAClC,OAAO,EAAe,CACpB,WAAY,CAAC,EAAO,EAAY,CAChC,SAAU,EACV,YAAa,OAAO,GAAc,SAAW,EAAmB,EACjE,CAAC,EAIN,SAAgB,EAAS,EAAiC,YAAa,CACrE,OAAO,SAA0B,EAAiC,CAChE,OAAO,EAAe,CACpB,WAAY,EAAM,KAAK,CAAE,QAAO,WAAY,GAAG,EAAM,GAAG,EAAM,GAAG,CACjE,SAAU,EAAM,IAAI,MACpB,cACD,CAAC,EAIN,SAAgB,EAAsB,EAAiB,CACrD,OAAO,SAAoB,EAA2C,CACpE,OAAO,EAAM,KAAK,CAAE,QAAO,YAAa,CACtC,MAAO,EAAY,EAAO,EAAO,CACjC,QACD,EAAE,EAaP,SAAgB,EACd,EACA,EACQ,CACR,IAAM,EAAQ,GAAa,YAI3B,OAHK,MAAmC,QAAQ,EAAQ,CAC/C,EAAQ,OAAO,EAAmB,EAAM,CAE1C,EAAkB,EAAO,EAAQ,CAG1C,SAAS,EAAkB,EAAmB,EAAwB,CACpE,OAAQ,EAAO,KAAf,CACE,IAAK,QACH,OAAO,EAAW,EAAW,EAAO,CACtC,IAAK,UACH,OAAO,EAAa,EAAW,EAAO,CACxC,IAAK,UACH,OAAO,EAAa,EAAW,EAAO,CACxC,QACE,MAAU,WACR,uBACG,EAAkB,KACpB,8BACF,EAIP,SAAS,EAAW,EAAmB,CAAE,QAAO,WAAwB,CACtE,IAAMC,EAAkB,EAAW,EAAU,CACvCC,EAAoB,EAAW,EAAM,CAQ3C,OAAO,EAAK,GAAG,EAPH,CAAC,EAAK,IAAK,EAAK,MAAO,EAAK,KAAM,EAAK,OAAS,EAAI,CACpD,CACV,EAAO,IACP,EAAO,MACP,EAAO,KACP,EAAM,EAAG,GAAI,EAAO,OAAS,IAAQ,GAAW,GAAK,CACtD,CACkC,CAAC,CAGtC,SAAS,EAAa,EAAmB,CAAE,WAA0B,CACnE,IAAMC,EAAoB,EAAW,EAAU,CAE/C,MADA,GAAO,MAAQ,EAAM,EAAG,GAAI,EAAO,OAAS,GAAO,EAAQ,CACpD,EAAiB,EAAO,CAGjC,SAAS,EACP,EACA,CAAE,QAAQ,EAAW,WACrB,CACA,GAAI,IAAY,IAAA,GACd,OAAO,EAET,IAAMA,EAAoB,EAAW,EAAM,CAG3C,MADA,GAAO,MAAQ,EACR,EAAiB,EAAO,CAWjC,SAAS,EAAW,EAAa,EAAqB,CACpD,IAAM,EAAO,EAAI,GACX,EAAO,EAAI,GACX,EAAO,EAAO,GAAQ,EAAI,GAKhC,OAJI,EAAO,EAEF,CAAC,EAAG,EAAG,EAAG,EAAE,CAEd,CACL,KAAK,OAAO,EAAI,GAAK,GAAQ,EAAI,GAAQ,EAAI,GAAK,GAAQ,EAAK,CAC/D,KAAK,OAAO,EAAI,GAAK,GAAQ,EAAI,GAAQ,EAAI,GAAK,GAAQ,EAAK,CAC/D,KAAK,OAAO,EAAI,GAAK,GAAQ,EAAI,GAAQ,EAAI,GAAK,GAAQ,EAAK,CAC/D,EACD,CAEH,MAAM,EAAM,KAEZ,SAAS,EAAM,EAAa,EAAa,EAAe,CACtD,OAAO,KAAK,IAAI,KAAK,IAAI,EAAO,EAAI,CAAE,EAAI,CAQ5C,SAAgB,EAAG,EAAe,CAChC,MAAO,GAAG,EAAM,IAQlB,SAAgB,EAAI,EAAe,CACjC,MAAO,GAAG,EAAM,GAGlB,MAAa,EAAsB,gEAEtB,EAAmB,0DAKhC,SAAgB,EAAS,EAAoB,CAC3C,MAAO,eAAe,EAAa,EAAE,KAMvC,MAAa,GAAe,CAC1B,WACA,iBACmC,EAAa,GAAY,EAKjD,GACX,EACA,EAA+B,EAAE,GAEjC,cAAc,IAAK,EAAU,SAAW,EAAI,GAAK,CAAC,GAAI,EAAU,CAAC,KAAK,IAAI,GAQ5E,SAAgB,EACd,EACA,EACA,CACA,OAAO,OAAO,YACZ,OAAO,QAAQ,EAAO,CAAC,KAAK,CAAC,EAAK,KAAW,CAAC,EAAS,EAAI,CAAE,EAAM,CAAC,CACrE,CAWH,SAAgB,EAMd,EACA,EAIA,CACA,OAAO,OAAO,YACZ,OAAO,QAAQ,EAAO,CAAC,SAAS,CAAC,EAAK,KAAW,CAC/C,IAAM,EAAQ,EAAS,EAAkB,EAAqB,CAI5D,OAHE,EACK,CAAC,EAAM,CAEP,EAAE,EAEX,CACH,CAYH,SAAgB,EAMd,EACA,EACA,CACA,OAAO,OAAO,YACZ,OAAO,QAAQ,EAAO,CAAC,SAAS,CAAC,EAAK,KAC7B,EAAS,EAAkB,EAAqB,CACvD,CACH,CAYH,SAAgB,EACd,EACA,EACA,CACA,OAAO,EAAU,GAAS,EAAK,IACzB,EAAG,EAAM,GAAK,GACT,CAAC,EAAK,EAAM,CAEZ,KAET"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@charcoal-ui/utils",
3
- "version": "5.0.0-beta.6",
3
+ "version": "5.0.0-beta.7",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
18
18
  "sideEffects": false,
19
19
  "dependencies": {
20
20
  "polished": "^4.1.4",
21
- "@charcoal-ui/foundation": "5.0.0-beta.6"
21
+ "@charcoal-ui/foundation": "5.0.0-beta.7"
22
22
  },
23
23
  "files": [
24
24
  "src",