@charcoal-ui/utils 1.0.0-alpha.1 → 1.0.0

package/dist/index.cjs

@@ -0,0 +1,2 @@
+var r=require("polished");function t(r,t){var e=null!=r?r:"#00000000";return Array.isArray(t)?t.reduce(o,e):o(e,t)}function o(t,o){switch(o.type){case"alpha":return function(t,o){var a,i,l=o.color,u=o.opacity,c=r.parseToRgb(t),p=r.parseToRgb(l),d=[c.red,c.green,c.blue,null!=(a=c.alpha)?a:1],s=[p.red,p.green,p.blue,n(0,1,(null!=(i=p.alpha)?i:1)*(null!=u?u:1))];return r.rgba.apply(void 0,function(r,t){var o=r[3],n=t[3],a=o+n*(1-o);return a<e?[0,0,0,0]:[Math.round((r[0]*o*(1-n)+t[0]*n)/a),Math.round((r[1]*o*(1-n)+t[1]*n)/a),Math.round((r[2]*o*(1-n)+t[2]*n)/a),a]}(d,s))}(t,o);case"opacity":return function(t,o){var e,a=o.opacity,i=r.parseToRgb(t);return i.alpha=n(0,1,(null!=(e=i.alpha)?e:1)*a),r.rgbToColorString(i)}(t,o);case"replace":return function(t,o){var e=o.color,n=void 0===e?t:e,a=o.opacity;if(void 0===a)return n;var i=r.parseToRgb(n);return i.alpha=a,r.rgbToColorString(i)}(t,o);default:throw new RangeError("Unknown effect type "+o.type+", upgrade @charcoal-ui/utils")}}var e=1e-6;function n(r,t,o){return Math.min(Math.max(o,r),t)}exports.GRADIENT_DIRECTIONS=["to top","to bottom","to left","to right"],exports.applyEffect=t,exports.applyEffectToGradient=function(r){return function(o){return o.map(function(o){var e=o.ratio;return{color:t(o.color,r),ratio:e}})}},exports.disabledSelector="&:disabled, &[aria-disabled]:not([aria-disabled=false])",exports.dur=function(r){return r+"s"},exports.gradient=function(t){return void 0===t&&(t="to bottom"),function(o){var e;return r.linearGradient({colorStops:o.map(function(r){return r.color+" "+r.ratio+"%"}),fallback:null==(e=o[0])?void 0:e.color,toDirection:t})}},exports.halfLeading=function(r){return(r.lineHeight-r.fontSize)/2},exports.maxWidth=function(r){return"(max-width: "+(r-1)+"px)"},exports.notDisabledSelector="&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]",exports.px=function(r){return r+"px"},exports.transparentGradient=function(t,o){return void 0===o&&(o="to bottom"),function(e){void 0===e&&(e=o);var n=r.rgba(t,0);return r.linearGradient({colorStops:[t,n],fallback:n,toDirection:"object"==typeof e?o:e})}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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"],"names":["applyEffect","baseColor","effects","color","Array","isArray","reduce","applySingleEffect","effect","type","opacity","base","parseToRgb","src","red","green","blue","alpha","dst","clamp","rgba","srcA","dstA","outA","EPS","Math","round","alphaBlend","applyAlpha","parsed","rgbToColorString","applyOpacity","undefined","applyReplace","RangeError","min","max","value","map","ratio","toDirection","linearGradient","colorStops","fallback","_value$","lineHeight","fontSize","breakpoint","defaultDirection","direction","transparent"],"mappings":"mCAkEgBA,EACdC,EACAC,GAEA,IAAMC,QAAQF,EAAAA,EAAa,YAC3B,OAAKG,MAAmCC,QAAQH,GACvCA,EAAQI,OAAOC,EAAmBJ,GAEpCI,EAAkBJ,EAAOD,GAGlC,SAASK,EAAkBN,EAAmBO,GAC5C,OAAQA,EAAOC,MACb,IAAK,QACH,OAcN,SAAoBR,aAAqBE,IAAAA,MAAOO,IAAAA,QACxCC,EAAkBC,aAAWX,GAC7BO,EAAoBI,aAAWT,GAC/BU,EAAM,CAACF,EAAKG,IAAKH,EAAKI,MAAOJ,EAAKK,cAAML,EAAKM,SAAS,GACtDC,EAAM,CACVV,EAAOM,IACPN,EAAOO,MACPP,EAAOQ,KACPG,EAAM,EAAG,YAAIX,EAAOS,SAAS,UAAQP,EAAAA,EAAW,KAElD,OAAOU,oBA8BT,SAAoBP,EAAaK,GAC/B,IAAMG,EAAOR,EAAI,GACXS,EAAOJ,EAAI,GACXK,EAAOF,EAAOC,GAAQ,EAAID,GAChC,OAAIE,EAAOC,EAEF,CAAC,EAAG,EAAG,EAAG,GAEZ,CACLC,KAAKC,OAAOb,EAAI,GAAKQ,GAAQ,EAAIC,GAAQJ,EAAI,GAAKI,GAAQC,GAC1DE,KAAKC,OAAOb,EAAI,GAAKQ,GAAQ,EAAIC,GAAQJ,EAAI,GAAKI,GAAQC,GAC1DE,KAAKC,OAAOb,EAAI,GAAKQ,GAAQ,EAAIC,GAAQJ,EAAI,GAAKI,GAAQC,GAC1DA,GA1CaI,CAAWd,EAAKK,IAxBpBU,CAAW3B,EAAWO,GAC/B,IAAK,UACH,OAyBN,SAAsBP,WAAqBS,IAAAA,QACnCmB,EAAoBjB,aAAWX,GAErC,OADA4B,EAAOZ,MAAQE,EAAM,EAAG,YAAIU,EAAOZ,SAAS,GAAOP,GAC5CoB,mBAAiBD,GA5BbE,CAAa9B,EAAWO,GACjC,IAAK,UACH,OA6BN,SACEP,aACEE,MAAAA,aAAQF,IAAWS,IAAAA,QAErB,QAAgBsB,IAAZtB,EACF,OAAOP,EAET,IAAM0B,EAAoBjB,aAAWT,GAGrC,OADA0B,EAAOZ,MAAQP,EACRoB,mBAAiBD,GAvCbI,CAAahC,EAAWO,GACjC,QACE,UAAU0B,kCAEL1B,EAAkBC,sCA6D7B,IAAMe,EAAM,KAEZ,SAASL,EAAMgB,EAAaC,EAAaC,GACvC,OAAOZ,KAAKU,IAAIV,KAAKW,IAAIC,EAAOF,GAAMC,+BA3IL,CACjC,SACA,YACA,UACA,yEA+BoC5B,GACpC,gBAA2B6B,GACzB,OAAOA,EAAMC,IAAI,gBAAUC,IAAAA,YAAa,CACtCpC,MAAOH,IADWG,MACQK,GAC1B+B,MAAAA,+GAqHcF,GAClB,OAAUA,iCApIaG,GACvB,gBADuBA,IAAAA,EAAiC,sBACvBH,SAC/B,OAAOI,iBAAe,CACpBC,WAAYL,EAAMC,IAAI,qBAAGnC,YAAOoC,YAChCI,kBAAUN,EAAM,WAANO,EAAUzC,MACpBqC,YAAAA,0BAgJqB,qBAAaK,aAAVC,UACF,6BARHC,GACvB,sBAAsBA,EAAa,0HArBlBV,GACjB,OAAUA,6CA1IVlC,EACA6C,GAEA,gBAFAA,IAAAA,EAAsC,sBAGpCC,YAAAA,IAAAA,EAAwCD,GAExC,IAAME,EAAc9B,OAAKjB,EAAO,GAChC,OAAOsC,iBAAe,CACpBC,WAAY,CAACvC,EAAO+C,GACpBP,SAAUO,EACVV,YAAkC,iBAAdS,EAAyBD,EAAmBC"}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+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;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.modern.js

@@ -0,0 +1,2 @@
+import{rgba as t,linearGradient as o,rgbToColorString as n,parseToRgb as r}from"polished";const a=["to top","to bottom","to left","to right"];function e(n,r="to bottom"){return function(a=r){const e=t(n,0);return o({colorStops:[n,e],fallback:e,toDirection:"object"==typeof a?r:a})}}function c(t="to bottom"){return function(n){var r;return o({colorStops:n.map(({color:t,ratio:o})=>`${t} ${o}%`),fallback:null==(r=n[0])?void 0:r.color,toDirection:t})}}function i(t){return function(o){return o.map(({color:o,ratio:n})=>({color:u(o,t),ratio:n}))}}function u(t,o){const n=null!=t?t:"#00000000";return Array.isArray(o)?o.reduce(l,n):l(n,o)}function l(o,a){switch(a.type){case"alpha":return function(o,{color:n,opacity:a}){var e,c;const i=r(o),u=r(n),l=[i.red,i.green,i.blue,null!=(e=i.alpha)?e:1],p=[u.red,u.green,u.blue,s(0,1,(null!=(c=u.alpha)?c:1)*(null!=a?a:1))];return t(...function(t,o){const n=t[3],r=o[3],a=n+r*(1-n);return a<f?[0,0,0,0]:[Math.round((t[0]*n*(1-r)+o[0]*r)/a),Math.round((t[1]*n*(1-r)+o[1]*r)/a),Math.round((t[2]*n*(1-r)+o[2]*r)/a),a]}(l,p))}(o,a);case"opacity":return function(t,{opacity:o}){var a;const e=r(t);return e.alpha=s(0,1,(null!=(a=e.alpha)?a:1)*o),n(e)}(o,a);case"replace":return function(t,{color:o=t,opacity:a}){if(void 0===a)return o;const e=r(o);return e.alpha=a,n(e)}(o,a);default:throw new RangeError(`Unknown effect type ${a.type}, upgrade @charcoal-ui/utils`)}}const f=1e-6;function s(t,o,n){return Math.min(Math.max(n,t),o)}function p(t){return`${t}px`}function d(t){return`${t}s`}const h="&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]",b="&:disabled, &[aria-disabled]:not([aria-disabled=false])";function m(t){return`(max-width: ${t-1}px)`}const y=({fontSize:t,lineHeight:o})=>(o-t)/2;export{a as GRADIENT_DIRECTIONS,u as applyEffect,i as applyEffectToGradient,b as disabledSelector,d as dur,c as gradient,y as halfLeading,m as maxWidth,h as notDisabledSelector,p as px,e as transparentGradient};
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","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"],"names":["GRADIENT_DIRECTIONS","transparentGradient","color","defaultDirection","direction","transparent","rgba","linearGradient","colorStops","fallback","toDirection","gradient","value","map","ratio","_value$","applyEffectToGradient","effect","applyEffect","baseColor","effects","Array","isArray","reduce","applySingleEffect","type","opacity","base","parseToRgb","src","red","green","blue","alpha","dst","clamp","srcA","dstA","outA","EPS","Math","round","alphaBlend","applyAlpha","parsed","rgbToColorString","applyOpacity","undefined","applyReplace","RangeError","min","max","px","dur","notDisabledSelector","disabledSelector","maxWidth","breakpoint","halfLeading","fontSize","lineHeight"],"mappings":"0FAaaA,MAAAA,EAAsB,CACjC,SACA,YACA,UACA,qBAKcC,EACdC,EACAC,EAAsC,aAEtC,gBACEC,EAAwCD,GAExC,MAAME,EAAcC,EAAKJ,EAAO,GAChC,OAAOK,EAAe,CACpBC,WAAY,CAACN,EAAOG,GACpBI,SAAUJ,EACVK,YAAkC,iBAAdN,EAAyBD,EAAmBC,cAKtDO,EAASD,EAAiC,aACxD,gBAAiCE,SAC/B,OAAOL,EAAe,CACpBC,WAAYI,EAAMC,IAAI,EAAGX,MAAAA,EAAOY,MAAAA,QAAeZ,KAASY,MACxDL,kBAAUG,EAAM,WAANG,EAAUb,MACpBQ,YAAAA,cAKUM,EAAsBC,GACpC,gBAA2BL,GACzB,OAAOA,EAAMC,IAAI,EAAGX,MAAAA,EAAOY,MAAAA,OACzBZ,MAAOgB,EAAYhB,EAAOe,GAC1BH,MAAAA,eAcUI,EACdC,EACAC,GAEA,MAAMlB,QAAQiB,EAAAA,EAAa,YAC3B,OAAKE,MAAmCC,QAAQF,GACvCA,EAAQG,OAAOC,EAAmBtB,GAEpCsB,EAAkBtB,EAAOkB,GAGlC,SAASI,EAAkBL,EAAmBF,GAC5C,OAAQA,EAAOQ,MACb,IAAK,QACH,OAcN,SAAoBN,GAAmBjB,MAAEA,EAAFwB,QAASA,YAC9C,MAAMC,EAAkBC,EAAWT,GAC7BF,EAAoBW,EAAW1B,GAC/B2B,EAAM,CAACF,EAAKG,IAAKH,EAAKI,MAAOJ,EAAKK,cAAML,EAAKM,SAAS,GACtDC,EAAM,CACVjB,EAAOa,IACPb,EAAOc,MACPd,EAAOe,KACPG,EAAM,EAAG,YAAIlB,EAAOgB,SAAS,UAAQP,EAAAA,EAAW,KAElD,OAAOpB,KA8BT,SAAoBuB,EAAaK,GAC/B,MAAME,EAAOP,EAAI,GACXQ,EAAOH,EAAI,GACXI,EAAOF,EAAOC,GAAQ,EAAID,GAChC,OAAIE,EAAOC,EAEF,CAAC,EAAG,EAAG,EAAG,GAEZ,CACLC,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DE,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DE,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DA,GA1CaI,CAAWb,EAAKK,IAxBpBS,CAAWxB,EAAWF,GAC/B,IAAK,UACH,OAyBN,SAAsBE,GAAmBO,QAAEA,UACzC,MAAMkB,EAAoBhB,EAAWT,GAErC,OADAyB,EAAOX,MAAQE,EAAM,EAAG,YAAIS,EAAOX,SAAS,GAAOP,GAC5CmB,EAAiBD,GA5BbE,CAAa3B,EAAWF,GACjC,IAAK,UACH,OA6BN,SACEE,GACAjB,MAAEA,EAAQiB,EAAVO,QAAqBA,IAErB,QAAgBqB,IAAZrB,EACF,OAAOxB,EAET,MAAM0C,EAAoBhB,EAAW1B,GAGrC,OADA0C,EAAOX,MAAQP,EACRmB,EAAiBD,GAvCbI,CAAa7B,EAAWF,GACjC,QACE,UAAUgC,kCAELhC,EAAkBQ,qCA6D7B,MAAMc,EAAM,KAEZ,SAASJ,EAAMe,EAAaC,EAAavC,GACvC,OAAO4B,KAAKU,IAAIV,KAAKW,IAAIvC,EAAOsC,GAAMC,YAQxBC,EAAGxC,GACjB,SAAUA,eAQIyC,EAAIzC,GAClB,SAAUA,KAGC0C,MAAAA,kEAEAC,qEAKGC,EAASC,GACvB,qBAAsBA,EAAa,OAMxBC,MAAAA,EAAc,EAAGC,SAAAA,EAAUC,WAAAA,MACrCA,EAAaD,GAAY"}

package/dist/index.module.js

@@ -0,0 +1,2 @@
+import{rgba as r,linearGradient as t,rgbToColorString as o,parseToRgb as n}from"polished";var a=["to top","to bottom","to left","to right"];function e(o,n){return void 0===n&&(n="to bottom"),function(a){void 0===a&&(a=n);var e=r(o,0);return t({colorStops:[o,e],fallback:e,toDirection:"object"==typeof a?n:a})}}function i(r){return void 0===r&&(r="to bottom"),function(o){var n;return t({colorStops:o.map(function(r){return r.color+" "+r.ratio+"%"}),fallback:null==(n=o[0])?void 0:n.color,toDirection:r})}}function u(r){return function(t){return t.map(function(t){var o=t.ratio;return{color:l(t.color,r),ratio:o}})}}function l(r,t){var o=null!=r?r:"#00000000";return Array.isArray(t)?t.reduce(c,o):c(o,t)}function c(t,a){switch(a.type){case"alpha":return function(t,o){var a,e,i=o.color,u=o.opacity,l=n(t),c=n(i),p=[l.red,l.green,l.blue,null!=(a=l.alpha)?a:1],v=[c.red,c.green,c.blue,d(0,1,(null!=(e=c.alpha)?e:1)*(null!=u?u:1))];return r.apply(void 0,function(r,t){var o=r[3],n=t[3],a=o+n*(1-o);return a<f?[0,0,0,0]:[Math.round((r[0]*o*(1-n)+t[0]*n)/a),Math.round((r[1]*o*(1-n)+t[1]*n)/a),Math.round((r[2]*o*(1-n)+t[2]*n)/a),a]}(p,v))}(t,a);case"opacity":return function(r,t){var a,e=t.opacity,i=n(r);return i.alpha=d(0,1,(null!=(a=i.alpha)?a:1)*e),o(i)}(t,a);case"replace":return function(r,t){var a=t.color,e=void 0===a?r:a,i=t.opacity;if(void 0===i)return e;var u=n(e);return u.alpha=i,o(u)}(t,a);default:throw new RangeError("Unknown effect type "+a.type+", upgrade @charcoal-ui/utils")}}var f=1e-6;function d(r,t,o){return Math.min(Math.max(o,r),t)}function p(r){return r+"px"}function v(r){return r+"s"}var h="&:not(:disabled):not([aria-disabled]), &[aria-disabled=false]",s="&:disabled, &[aria-disabled]:not([aria-disabled=false])";function b(r){return"(max-width: "+(r-1)+"px)"}var y=function(r){return(r.lineHeight-r.fontSize)/2};export{a as GRADIENT_DIRECTIONS,l as applyEffect,u as applyEffectToGradient,s as disabledSelector,v as dur,i as gradient,y as halfLeading,b as maxWidth,h as notDisabledSelector,p as px,e as transparentGradient};
+//# sourceMappingURL=index.module.js.map

package/dist/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","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"],"names":["GRADIENT_DIRECTIONS","transparentGradient","color","defaultDirection","direction","transparent","rgba","linearGradient","colorStops","fallback","toDirection","gradient","value","map","ratio","_value$","applyEffectToGradient","effect","applyEffect","baseColor","effects","Array","isArray","reduce","applySingleEffect","type","opacity","base","parseToRgb","src","red","green","blue","alpha","dst","clamp","srcA","dstA","outA","EPS","Math","round","alphaBlend","applyAlpha","parsed","rgbToColorString","applyOpacity","undefined","applyReplace","RangeError","min","max","px","dur","notDisabledSelector","disabledSelector","maxWidth","breakpoint","halfLeading","lineHeight","fontSize"],"mappings":"0FAaaA,IAAAA,EAAsB,CACjC,SACA,YACA,UACA,qBAKcC,EACdC,EACAC,GAEA,gBAFAA,IAAAA,EAAsC,sBAGpCC,YAAAA,IAAAA,EAAwCD,GAExC,IAAME,EAAcC,EAAKJ,EAAO,GAChC,OAAOK,EAAe,CACpBC,WAAY,CAACN,EAAOG,GACpBI,SAAUJ,EACVK,YAAkC,iBAAdN,EAAyBD,EAAmBC,cAKtDO,EAASD,GACvB,gBADuBA,IAAAA,EAAiC,sBACvBE,SAC/B,OAAOL,EAAe,CACpBC,WAAYI,EAAMC,IAAI,qBAAGX,YAAOY,YAChCL,kBAAUG,EAAM,WAANG,EAAUb,MACpBQ,YAAAA,cAKUM,EAAsBC,GACpC,gBAA2BL,GACzB,OAAOA,EAAMC,IAAI,gBAAUC,IAAAA,YAAa,CACtCZ,MAAOgB,IADWhB,MACQe,GAC1BH,MAAAA,eAcUI,EACdC,EACAC,GAEA,IAAMlB,QAAQiB,EAAAA,EAAa,YAC3B,OAAKE,MAAmCC,QAAQF,GACvCA,EAAQG,OAAOC,EAAmBtB,GAEpCsB,EAAkBtB,EAAOkB,GAGlC,SAASI,EAAkBL,EAAmBF,GAC5C,OAAQA,EAAOQ,MACb,IAAK,QACH,OAcN,SAAoBN,aAAqBjB,IAAAA,MAAOwB,IAAAA,QACxCC,EAAkBC,EAAWT,GAC7BF,EAAoBW,EAAW1B,GAC/B2B,EAAM,CAACF,EAAKG,IAAKH,EAAKI,MAAOJ,EAAKK,cAAML,EAAKM,SAAS,GACtDC,EAAM,CACVjB,EAAOa,IACPb,EAAOc,MACPd,EAAOe,KACPG,EAAM,EAAG,YAAIlB,EAAOgB,SAAS,UAAQP,EAAAA,EAAW,KAElD,OAAOpB,eA8BT,SAAoBuB,EAAaK,GAC/B,IAAME,EAAOP,EAAI,GACXQ,EAAOH,EAAI,GACXI,EAAOF,EAAOC,GAAQ,EAAID,GAChC,OAAIE,EAAOC,EAEF,CAAC,EAAG,EAAG,EAAG,GAEZ,CACLC,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DE,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DE,KAAKC,OAAOZ,EAAI,GAAKO,GAAQ,EAAIC,GAAQH,EAAI,GAAKG,GAAQC,GAC1DA,GA1CaI,CAAWb,EAAKK,IAxBpBS,CAAWxB,EAAWF,GAC/B,IAAK,UACH,OAyBN,SAAsBE,WAAqBO,IAAAA,QACnCkB,EAAoBhB,EAAWT,GAErC,OADAyB,EAAOX,MAAQE,EAAM,EAAG,YAAIS,EAAOX,SAAS,GAAOP,GAC5CmB,EAAiBD,GA5BbE,CAAa3B,EAAWF,GACjC,IAAK,UACH,OA6BN,SACEE,aACEjB,MAAAA,aAAQiB,IAAWO,IAAAA,QAErB,QAAgBqB,IAAZrB,EACF,OAAOxB,EAET,IAAM0C,EAAoBhB,EAAW1B,GAGrC,OADA0C,EAAOX,MAAQP,EACRmB,EAAiBD,GAvCbI,CAAa7B,EAAWF,GACjC,QACE,UAAUgC,kCAELhC,EAAkBQ,sCA6D7B,IAAMc,EAAM,KAEZ,SAASJ,EAAMe,EAAaC,EAAavC,GACvC,OAAO4B,KAAKU,IAAIV,KAAKW,IAAIvC,EAAOsC,GAAMC,YAQxBC,EAAGxC,GACjB,OAAUA,gBAQIyC,EAAIzC,GAClB,OAAUA,MAGC0C,IAAAA,kEAEAC,qEAKGC,EAASC,GACvB,sBAAsBA,EAAa,SAMxBC,IAAAA,EAAc,qBAAaC,aAAVC,UACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/utils",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,7 +24,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/theme": "^1.0.0-alpha.1",
+    "@charcoal-ui/foundation": "^1.0.0",
     "polished": "^4.1.4"
   },
   "files": [
@@ -34,5 +34,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d09e09a796f92782be600672efb5c80a6a7b51b"
+  "gitHead": "addc6d8f443865a8b56327ef9a4ff2e69942a30b"
 }

package/src/index.ts

@@ -2,13 +2,14 @@ import { linearGradient, parseToRgb, rgba, rgbToColorString } from 'polished'
 import { RgbColor } from 'polished/lib/types/color'
 
 import {
-  AlphaEffect,
-  Effect,
-  Effects,
-  GradientMaterial,
-  OpacityEffect,
-  ReplaceEffect,
-} from '@charcoal-ui/theme'
+  type AlphaEffect,
+  type Effect,
+  type Effects,
+  type GradientMaterial,
+  type OpacityEffect,
+  type ReplaceEffect,
+  type TypographyDescriptor,
+} from '@charcoal-ui/foundation'
 
 export const GRADIENT_DIRECTIONS = [
   'to top',
@@ -59,6 +60,7 @@ interface RgbaColor extends RgbColor {
 }
 
 interface ReadonlyArrayConstructor {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   isArray(value: any): value is readonly any[]
 }
 
@@ -179,3 +181,9 @@ export const disabledSelector = `&:disabled, &[aria-disabled]:not([aria-disabled
 export function maxWidth(breakpoint: number) {
   return `(max-width: ${breakpoint - 1}px)`
 }
+
+/**
+ * Derive half-leading from typography size
+ */
+export const halfLeading = ({ fontSize, lineHeight }: TypographyDescriptor) =>
+  (lineHeight - fontSize) / 2