@charcoal-ui/utils 2.5.0 → 2.7.0

package/dist/index.cjs.js

@@ -0,0 +1,204 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  GRADIENT_DIRECTIONS: () => GRADIENT_DIRECTIONS,
+  applyEffect: () => applyEffect,
+  applyEffectToGradient: () => applyEffectToGradient,
+  customPropertyToken: () => customPropertyToken,
+  disabledSelector: () => disabledSelector,
+  dur: () => dur,
+  filterObject: () => filterObject,
+  flatMapObject: () => flatMapObject,
+  gradient: () => gradient,
+  halfLeading: () => halfLeading,
+  mapKeys: () => mapKeys,
+  mapObject: () => mapObject,
+  maxWidth: () => maxWidth,
+  notDisabledSelector: () => notDisabledSelector,
+  px: () => px,
+  transparentGradient: () => transparentGradient
+});
+module.exports = __toCommonJS(src_exports);
+var import_polished = require("polished");
+var GRADIENT_DIRECTIONS = [
+  "to top",
+  "to bottom",
+  "to left",
+  "to right"
+];
+function transparentGradient(color, defaultDirection = "to bottom") {
+  return function transparentGradient2(direction = defaultDirection) {
+    const transparent = (0, import_polished.rgba)(color, 0);
+    return (0, import_polished.linearGradient)({
+      colorStops: [color, transparent],
+      fallback: transparent,
+      toDirection: typeof direction === "object" ? defaultDirection : direction
+    });
+  };
+}
+function gradient(toDirection = "to bottom") {
+  return function toLinearGradient(value) {
+    return (0, import_polished.linearGradient)({
+      colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),
+      fallback: value[0]?.color,
+      toDirection
+    });
+  };
+}
+function applyEffectToGradient(effect) {
+  return function toGradient(value) {
+    return value.map(({ color, ratio }) => ({
+      color: applyEffect(color, effect),
+      ratio
+    }));
+  };
+}
+function applyEffect(baseColor, effects) {
+  const color = baseColor ?? "#00000000";
+  if (Array.isArray(effects)) {
+    return effects.reduce(applySingleEffect, color);
+  }
+  return applySingleEffect(color, effects);
+}
+function applySingleEffect(baseColor, effect) {
+  switch (effect.type) {
+    case "alpha":
+      return applyAlpha(baseColor, effect);
+    case "opacity":
+      return applyOpacity(baseColor, effect);
+    case "replace":
+      return applyReplace(baseColor, effect);
+    default:
+      throw new RangeError(
+        `Unknown effect type ${effect.type}, upgrade @charcoal-ui/utils`
+      );
+  }
+}
+function applyAlpha(baseColor, { color, opacity }) {
+  const base = (0, import_polished.parseToRgb)(baseColor);
+  const effect = (0, import_polished.parseToRgb)(color);
+  const src = [base.red, base.green, base.blue, base.alpha ?? 1];
+  const dst = [
+    effect.red,
+    effect.green,
+    effect.blue,
+    clamp(0, 1, (effect.alpha ?? 1) * (opacity ?? 1))
+  ];
+  return (0, import_polished.rgba)(...alphaBlend(src, dst));
+}
+function applyOpacity(baseColor, { opacity }) {
+  const parsed = (0, import_polished.parseToRgb)(baseColor);
+  parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1) * opacity);
+  return (0, import_polished.rgbToColorString)(parsed);
+}
+function applyReplace(baseColor, { color = baseColor, opacity }) {
+  if (opacity === void 0) {
+    return color;
+  }
+  const parsed = (0, import_polished.parseToRgb)(color);
+  parsed.alpha = opacity;
+  return (0, import_polished.rgbToColorString)(parsed);
+}
+function alphaBlend(src, dst) {
+  const srcA = src[3];
+  const dstA = dst[3];
+  const outA = srcA + dstA * (1 - srcA);
+  if (outA < EPS) {
+    return [0, 0, 0, 0];
+  }
+  return [
+    Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),
+    Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),
+    Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),
+    outA
+  ];
+}
+var EPS = 1e-6;
+function clamp(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+function px(value) {
+  return `${value}px`;
+}
+function dur(value) {
+  return `${value}s`;
+}
+var notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`;
+var disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`;
+function maxWidth(breakpoint) {
+  return `(max-width: ${breakpoint - 1}px)`;
+}
+var halfLeading = ({ fontSize, lineHeight }) => (lineHeight - fontSize) / 2;
+var customPropertyToken = (id, modifiers = []) => `--charcoal-${id}${modifiers.length === 0 ? "" : ["", modifiers].join("-")}`;
+function mapKeys(object, callback) {
+  return Object.fromEntries(
+    Object.entries(object).map(([key, value]) => [callback(key), value])
+  );
+}
+function mapObject(source, callback) {
+  return Object.fromEntries(
+    Object.entries(source).flatMap(([key, value]) => {
+      const entry = callback(key, value);
+      if (entry) {
+        return [entry];
+      } else {
+        return [];
+      }
+    })
+  );
+}
+function flatMapObject(source, callback) {
+  return Object.fromEntries(
+    Object.entries(source).flatMap(([key, value]) => {
+      return callback(key, value);
+    })
+  );
+}
+function filterObject(source, fn) {
+  return mapObject(source, (key, value) => {
+    if (fn(value) === true) {
+      return [key, value];
+    } else {
+      return null;
+    }
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GRADIENT_DIRECTIONS,
+  applyEffect,
+  applyEffectToGradient,
+  customPropertyToken,
+  disabledSelector,
+  dur,
+  filterObject,
+  flatMapObject,
+  gradient,
+  halfLeading,
+  mapKeys,
+  mapObject,
+  maxWidth,
+  notDisabledSelector,
+  px,
+  transparentGradient
+});
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { linearGradient, parseToRgb, rgba, rgbToColorString } from 'polished'\nimport { RgbColor } from 'polished/lib/types/color'\n\nimport {\n  type AlphaEffect,\n  type Effect,\n  type Effects,\n  type GradientMaterial,\n  type OpacityEffect,\n  type ReplaceEffect,\n  type TypographyDescriptor,\n} from '@charcoal-ui/foundation'\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  ) {\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) {\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 = ({ fontSize, lineHeight }: TypographyDescriptor) =>\n  (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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","names":["transparentGradient"]}

package/dist/index.d.ts

@@ -1,70 +1,70 @@
-import { type Effects, type GradientMaterial, type TypographyDescriptor } from '@charcoal-ui/foundation';
-export declare const GRADIENT_DIRECTIONS: readonly ["to top", "to bottom", "to left", "to right"];
-export declare type GradientDirection = typeof GRADIENT_DIRECTIONS[number];
-export declare function transparentGradient(color: string, defaultDirection?: GradientDirection): (direction?: GradientDirection | object) => import("polished/lib/types/style").Styles;
-export declare function gradient(toDirection?: GradientDirection): (value: GradientMaterial) => import("polished/lib/types/style").Styles;
-export declare function applyEffectToGradient(effect: Effects): (value: GradientMaterial) => GradientMaterial;
-export declare function applyEffect(baseColor: string | null, effects: Effects): string;
-/**
- * affix `px` unit
- *
- * @param value pixel
- */
-export declare function px(value: number): string;
-/**
- * affix `s` unit
- *
- * @param value second
- */
-export declare function dur(value: number): string;
-export declare const notDisabledSelector = "&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]";
-export declare const disabledSelector = "&:disabled, &[aria-disabled]:not([aria-disabled=false])";
-/**
- * Construct media query from breakpoint
- */
-export declare function maxWidth(breakpoint: number): string;
-/**
- * Derive half-leading from typography size
- */
-export declare const halfLeading: ({ fontSize, lineHeight }: TypographyDescriptor) => number;
-/**
- * Namespaced custom property
- */
-export declare const customPropertyToken: (id: string, modifiers?: readonly string[]) => `--charcoal-${string}`;
-/**
- * @example
- * ```js
- * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
- * ````
- */
-export declare function mapKeys<V, K extends string>(object: Record<string, V>, callback: (key: string) => K): Record<K, V>;
-/**
- * @example
- * ```js
- * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
- *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]
- * ) // => { a1: "AA", c1: "CC" }
- * ```
- */
-export declare function mapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue] | null | undefined): Record<DestKey, DestValue>;
-/**
- * @example
- * ```js
- * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
- *   [key + '1', value + '1'],
- *   [key + '2', value + '2'],
- * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
- * ```
- */
-export declare function flatMapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]): Record<DestKey, DestValue>;
-/**
- * @example
- * ```ts
- * filterObject(
- *   { a: 'aa', b: 'bb', c: 'cc' },
- *   (value): value is string => value !== 'bb'
- * ) // => { a: "aa", c: "cc" }
- * ```
- */
-export declare function filterObject<Source, Dest extends Source>(source: Record<string, Source>, fn: (value: Source) => value is Dest): Record<string, Dest>;
+import { type Effects, type GradientMaterial, type TypographyDescriptor } from '@charcoal-ui/foundation';
+export declare const GRADIENT_DIRECTIONS: readonly ["to top", "to bottom", "to left", "to right"];
+export type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number];
+export declare function transparentGradient(color: string, defaultDirection?: GradientDirection): (direction?: GradientDirection | object) => import("polished/lib/types/style").Styles;
+export declare function gradient(toDirection?: GradientDirection): (value: GradientMaterial) => import("polished/lib/types/style").Styles;
+export declare function applyEffectToGradient(effect: Effects): (value: GradientMaterial) => GradientMaterial;
+export declare function applyEffect(baseColor: string | null, effects: Effects): string;
+/**
+ * affix `px` unit
+ *
+ * @param value pixel
+ */
+export declare function px(value: number): string;
+/**
+ * affix `s` unit
+ *
+ * @param value second
+ */
+export declare function dur(value: number): string;
+export declare const notDisabledSelector = "&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]";
+export declare const disabledSelector = "&:disabled, &[aria-disabled]:not([aria-disabled=false])";
+/**
+ * Construct media query from breakpoint
+ */
+export declare function maxWidth(breakpoint: number): string;
+/**
+ * Derive half-leading from typography size
+ */
+export declare const halfLeading: ({ fontSize, lineHeight }: TypographyDescriptor) => number;
+/**
+ * Namespaced custom property
+ */
+export declare const customPropertyToken: (id: string, modifiers?: readonly string[]) => `--charcoal-${string}`;
+/**
+ * @example
+ * ```js
+ * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
+ * ````
+ */
+export declare function mapKeys<V, K extends string>(object: Record<string, V>, callback: (key: string) => K): Record<K, V>;
+/**
+ * @example
+ * ```js
+ * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
+ *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]
+ * ) // => { a1: "AA", c1: "CC" }
+ * ```
+ */
+export declare function mapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue] | null | undefined): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```js
+ * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
+ *   [key + '1', value + '1'],
+ *   [key + '2', value + '2'],
+ * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
+ * ```
+ */
+export declare function flatMapObject<SourceKey extends string, SourceValue, DestKey extends string, DestValue>(source: Record<SourceKey, SourceValue>, callback: (key: SourceKey, value: SourceValue) => [DestKey, DestValue][]): Record<DestKey, DestValue>;
+/**
+ * @example
+ * ```ts
+ * filterObject(
+ *   { a: 'aa', b: 'bb', c: 'cc' },
+ *   (value): value is string => value !== 'bb'
+ * ) // => { a: "aa", c: "cc" }
+ * ```
+ */
+export declare function filterObject<Source, Dest extends Source>(source: Record<string, Source>, fn: (value: Source) => value is Dest): Record<string, Dest>;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,gBAAgB,EAGrB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAA;AAEhC,eAAO,MAAM,mBAAmB,yDAKtB,CAAA;AAEV,oBAAY,iBAAiB,GAAG,OAAO,mBAAmB,CAAC,MAAM,CAAC,CAAA;AAElE,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,gBAAgB,GAAE,iBAA+B,gBAGpC,iBAAiB,GAAG,MAAM,+CASxC;AAED,wBAAgB,QAAQ,CAAC,WAAW,GAAE,iBAA+B,0EAQpE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,OAAO,iDAOpD;AAWD,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,OAAO,EAAE,OAAO,GACf,MAAM,CAMR;AAgFD;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,UAE/B;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,UAEhC;AAED,eAAO,MAAM,mBAAmB,kEAAkE,CAAA;AAElG,eAAO,MAAM,gBAAgB,4DAA4D,CAAA;AAEzF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,UAE1C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6BAA8B,oBAAoB,WAC7C,CAAA;AAE7B;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAC1B,MAAM,cACC,SAAS,MAAM,EAAE,KAC3B,cAAc,MAAM,EACuD,CAAA;AAE9E;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,OAAO,EACZ,KAAK,gBAAgB,EAGrB,KAAK,oBAAoB,EAC1B,MAAM,yBAAyB,CAAA;AAEhC,eAAO,MAAM,mBAAmB,yDAKtB,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpE,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,EACb,gBAAgB,GAAE,iBAA+B,gBAGpC,iBAAiB,GAAG,MAAM,+CASxC;AAED,wBAAgB,QAAQ,CAAC,WAAW,GAAE,iBAA+B,0EAQpE;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,OAAO,iDAOpD;AAWD,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,OAAO,EAAE,OAAO,GACf,MAAM,CAMR;AAgFD;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,UAE/B;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,UAEhC;AAED,eAAO,MAAM,mBAAmB,kEAAkE,CAAA;AAElG,eAAO,MAAM,gBAAgB,4DAA4D,CAAA;AAEzF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,UAAU,EAAE,MAAM,UAE1C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6BAA8B,oBAAoB,WAC7C,CAAA;AAE7B;;GAEG;AACH,eAAO,MAAM,mBAAmB,OAC1B,MAAM,cACC,SAAS,MAAM,EAAE,KAC3B,cAAc,MAAM,EACuD,CAAA;AAE9E;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,EACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,gBAK7B;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CACvB,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CACR,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,WAAW,KACf,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,8BAY7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAC3B,SAAS,SAAS,MAAM,EACxB,WAAW,EACX,OAAO,SAAS,MAAM,EACtB,SAAS,EAET,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,EACtC,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,KAAK,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,8BAOzE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,IAAI,SAAS,MAAM,EACtD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,IAAI,IAAI,wBASrC"}

package/dist/index.esm.js

@@ -0,0 +1,164 @@
+// src/index.ts
+import { linearGradient, parseToRgb, rgba, rgbToColorString } from "polished";
+var GRADIENT_DIRECTIONS = [
+  "to top",
+  "to bottom",
+  "to left",
+  "to right"
+];
+function transparentGradient(color, defaultDirection = "to bottom") {
+  return function transparentGradient2(direction = defaultDirection) {
+    const transparent = rgba(color, 0);
+    return linearGradient({
+      colorStops: [color, transparent],
+      fallback: transparent,
+      toDirection: typeof direction === "object" ? defaultDirection : direction
+    });
+  };
+}
+function gradient(toDirection = "to bottom") {
+  return function toLinearGradient(value) {
+    return linearGradient({
+      colorStops: value.map(({ color, ratio }) => `${color} ${ratio}%`),
+      fallback: value[0]?.color,
+      toDirection
+    });
+  };
+}
+function applyEffectToGradient(effect) {
+  return function toGradient(value) {
+    return value.map(({ color, ratio }) => ({
+      color: applyEffect(color, effect),
+      ratio
+    }));
+  };
+}
+function applyEffect(baseColor, effects) {
+  const color = baseColor ?? "#00000000";
+  if (Array.isArray(effects)) {
+    return effects.reduce(applySingleEffect, color);
+  }
+  return applySingleEffect(color, effects);
+}
+function applySingleEffect(baseColor, effect) {
+  switch (effect.type) {
+    case "alpha":
+      return applyAlpha(baseColor, effect);
+    case "opacity":
+      return applyOpacity(baseColor, effect);
+    case "replace":
+      return applyReplace(baseColor, effect);
+    default:
+      throw new RangeError(
+        `Unknown effect type ${effect.type}, upgrade @charcoal-ui/utils`
+      );
+  }
+}
+function applyAlpha(baseColor, { color, opacity }) {
+  const base = parseToRgb(baseColor);
+  const effect = parseToRgb(color);
+  const src = [base.red, base.green, base.blue, base.alpha ?? 1];
+  const dst = [
+    effect.red,
+    effect.green,
+    effect.blue,
+    clamp(0, 1, (effect.alpha ?? 1) * (opacity ?? 1))
+  ];
+  return rgba(...alphaBlend(src, dst));
+}
+function applyOpacity(baseColor, { opacity }) {
+  const parsed = parseToRgb(baseColor);
+  parsed.alpha = clamp(0, 1, (parsed.alpha ?? 1) * opacity);
+  return rgbToColorString(parsed);
+}
+function applyReplace(baseColor, { color = baseColor, opacity }) {
+  if (opacity === void 0) {
+    return color;
+  }
+  const parsed = parseToRgb(color);
+  parsed.alpha = opacity;
+  return rgbToColorString(parsed);
+}
+function alphaBlend(src, dst) {
+  const srcA = src[3];
+  const dstA = dst[3];
+  const outA = srcA + dstA * (1 - srcA);
+  if (outA < EPS) {
+    return [0, 0, 0, 0];
+  }
+  return [
+    Math.round((src[0] * srcA * (1 - dstA) + dst[0] * dstA) / outA),
+    Math.round((src[1] * srcA * (1 - dstA) + dst[1] * dstA) / outA),
+    Math.round((src[2] * srcA * (1 - dstA) + dst[2] * dstA) / outA),
+    outA
+  ];
+}
+var EPS = 1e-6;
+function clamp(min, max, value) {
+  return Math.min(Math.max(value, min), max);
+}
+function px(value) {
+  return `${value}px`;
+}
+function dur(value) {
+  return `${value}s`;
+}
+var notDisabledSelector = `&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]`;
+var disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled=false])`;
+function maxWidth(breakpoint) {
+  return `(max-width: ${breakpoint - 1}px)`;
+}
+var halfLeading = ({ fontSize, lineHeight }) => (lineHeight - fontSize) / 2;
+var customPropertyToken = (id, modifiers = []) => `--charcoal-${id}${modifiers.length === 0 ? "" : ["", modifiers].join("-")}`;
+function mapKeys(object, callback) {
+  return Object.fromEntries(
+    Object.entries(object).map(([key, value]) => [callback(key), value])
+  );
+}
+function mapObject(source, callback) {
+  return Object.fromEntries(
+    Object.entries(source).flatMap(([key, value]) => {
+      const entry = callback(key, value);
+      if (entry) {
+        return [entry];
+      } else {
+        return [];
+      }
+    })
+  );
+}
+function flatMapObject(source, callback) {
+  return Object.fromEntries(
+    Object.entries(source).flatMap(([key, value]) => {
+      return callback(key, value);
+    })
+  );
+}
+function filterObject(source, fn) {
+  return mapObject(source, (key, value) => {
+    if (fn(value) === true) {
+      return [key, value];
+    } else {
+      return null;
+    }
+  });
+}
+export {
+  GRADIENT_DIRECTIONS,
+  applyEffect,
+  applyEffectToGradient,
+  customPropertyToken,
+  disabledSelector,
+  dur,
+  filterObject,
+  flatMapObject,
+  gradient,
+  halfLeading,
+  mapKeys,
+  mapObject,
+  maxWidth,
+  notDisabledSelector,
+  px,
+  transparentGradient
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { linearGradient, parseToRgb, rgba, rgbToColorString } from 'polished'\nimport { RgbColor } from 'polished/lib/types/color'\n\nimport {\n  type AlphaEffect,\n  type Effect,\n  type Effects,\n  type GradientMaterial,\n  type OpacityEffect,\n  type ReplaceEffect,\n  type TypographyDescriptor,\n} from '@charcoal-ui/foundation'\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  ) {\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) {\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 = ({ fontSize, lineHeight }: TypographyDescriptor) =>\n  (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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","names":["transparentGradient"]}

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@charcoal-ui/utils",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "license": "Apache-2.0",
-  "type": "module",
-  "source": "./src/index.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.module.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "exports": {
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.modern.js"
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.esm.js"
   },
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "microbundle --compress=false -f modern,esm,cjs --tsconfig tsconfig.build.json",
-    "typecheck": "tsc --noEmit --project tsconfig.build.json",
-    "clean": "rimraf dist"
+    "build": "run-p --print-label 'build:*'",
+    "build:bundle": "FORCE_COLOR=1 tsup",
+    "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
+    "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
+    "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "microbundle": "^0.14.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "typescript": "^4.5.5"
+    "tsup": "^6.5.0",
+    "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^2.5.0",
+    "@charcoal-ui/foundation": "^2.7.0",
     "polished": "^4.1.4"
   },
   "files": [
@@ -39,5 +39,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/utils"
   },
-  "gitHead": "f2d6f530bbc4467e9205a4e70ce65a57372860a8"
+  "gitHead": "77e32148d5a981f988e8bbc0c88aec82b0936a1a"
 }

package/src/index.ts

@@ -18,7 +18,7 @@ export const GRADIENT_DIRECTIONS = [
   'to right',
 ] as const
 
-export type GradientDirection = typeof GRADIENT_DIRECTIONS[number]
+export type GradientDirection = (typeof GRADIENT_DIRECTIONS)[number]
 
 export function transparentGradient(
   color: string,