skillgrid 0.0.88 → 0.0.90

package/dist/index.d.ts

@@ -29,3 +29,4 @@ export * from './components/Progress';
 export * from './components/Switch';
 export * from './components/FileUpload';
 export * from './components/Popover';
+export * from './utils/generate-brand-primary-palette';

package/dist/index.es.js

@@ -1,95 +1,97 @@
 import { Avatar as e } from "./components/Avatar/index.js";
 import { Radio as p } from "./components/Radio/index.js";
-import { default as x } from "./locale/en_US.js";
-import { default as a } from "./locale/ru_RU.js";
-import { Button as s } from "./components/Button/Button.js";
-import { Modal as i } from "./components/Modal/Modal.js";
-import { Alert as l } from "./components/Alert/Alert.js";
-import { Placeholder as u } from "./components/Placeholder/Placeholder.js";
-import { Badge as v } from "./components/Badge/Badge.js";
-import { Image as P } from "./components/Image/Image.js";
-import { Loader as S } from "./components/Loader/Loader.js";
-import { ConfigProvider as L } from "./components/ConfigProvider/ConfigProvider.js";
-import { useConfig as y, useLocale as A } from "./components/ConfigProvider/ConfigProvider.hook.js";
-import { Icon as k } from "./components/Icon/IconWithCategories.js";
-import { CountryIcons as w } from "./components/Icon/categories/country.js";
-import { EditorIcons as R } from "./components/Icon/categories/editor.js";
-import { LayoutIcons as F } from "./components/Icon/categories/layout.js";
-import { UsersIcons as H } from "./components/Icon/categories/users.js";
-import { GeneralIcons as j } from "./components/Icon/categories/general.js";
-import { ArrowsIcons as z } from "./components/Icon/categories/arrows.js";
-import { ChartsIcons as K } from "./components/Icon/categories/charts.js";
-import { PrivateIcons as O } from "./components/Icon/categories/private.js";
-import { DevelopmentIcons as V } from "./components/Icon/categories/development.js";
-import { ProductIcons as X } from "./components/Icon/categories/product.js";
-import { ServiceIcons as Z } from "./components/Icon/categories/service.js";
-import { extendLocale as $ } from "./locale/extendLocale.js";
-import { Tag as ro } from "./components/Tag/Tag.js";
-import { Checkbox as to } from "./components/Checkbox/Checkbox.js";
-import { Typography as fo } from "./components/Typography/Typography.js";
-import { TextInput as mo } from "./components/TextInput/TextInput.js";
-import { TextArea as no } from "./components/TextArea/TextArea.js";
-import { Helper as co } from "./components/Helper/Helper.js";
-import { List as lo } from "./components/List/List.js";
-import { Tabs as uo } from "./components/Tabs/Tabs.js";
-import { Tooltip as vo } from "./components/Tooltip/Tooltip.js";
-import { SegmentedControl as Po } from "./components/SegmentedControl/SegmentedControl.js";
-import { Trigger as So } from "./components/Trigger/Trigger.js";
-import { useSnackbar as Lo } from "./components/Snackbar/lib/useSnackbar.js";
-import { SnackbarProvider as yo } from "./components/Snackbar/Provider/SnackbarProvider.js";
-import { Divider as Uo } from "./components/Divider/Divider.js";
-import { Drop as Do } from "./components/Drop/Drop.js";
-import { Container as Bo } from "./components/Container/Container.js";
-import { Progress as Eo } from "./components/Progress/Progress.js";
-import { Switch as Go } from "./components/Switch/Switch.js";
-import { FileUpload as Mo } from "./components/FileUpload/FileUpload.js";
-import { Popover as qo } from "./components/Popover/Popover.js";
+import { generateBrandPrimaryPalette as m } from "./utils/generate-brand-primary-palette.js";
+import { default as a } from "./locale/en_US.js";
+import { default as s } from "./locale/ru_RU.js";
+import { Button as i } from "./components/Button/Button.js";
+import { Modal as l } from "./components/Modal/Modal.js";
+import { Alert as g } from "./components/Alert/Alert.js";
+import { Placeholder as P } from "./components/Placeholder/Placeholder.js";
+import { Badge as C } from "./components/Badge/Badge.js";
+import { Image as S } from "./components/Image/Image.js";
+import { Loader as y } from "./components/Loader/Loader.js";
+import { ConfigProvider as b } from "./components/ConfigProvider/ConfigProvider.js";
+import { useConfig as U, useLocale as k } from "./components/ConfigProvider/ConfigProvider.hook.js";
+import { Icon as D } from "./components/Icon/IconWithCategories.js";
+import { CountryIcons as R } from "./components/Icon/categories/country.js";
+import { EditorIcons as F } from "./components/Icon/categories/editor.js";
+import { LayoutIcons as H } from "./components/Icon/categories/layout.js";
+import { UsersIcons as j } from "./components/Icon/categories/users.js";
+import { GeneralIcons as z } from "./components/Icon/categories/general.js";
+import { ArrowsIcons as K } from "./components/Icon/categories/arrows.js";
+import { ChartsIcons as O } from "./components/Icon/categories/charts.js";
+import { PrivateIcons as V } from "./components/Icon/categories/private.js";
+import { DevelopmentIcons as X } from "./components/Icon/categories/development.js";
+import { ProductIcons as Z } from "./components/Icon/categories/product.js";
+import { ServiceIcons as $ } from "./components/Icon/categories/service.js";
+import { extendLocale as ro } from "./locale/extendLocale.js";
+import { Tag as to } from "./components/Tag/Tag.js";
+import { Checkbox as fo } from "./components/Checkbox/Checkbox.js";
+import { Typography as xo } from "./components/Typography/Typography.js";
+import { TextInput as no } from "./components/TextInput/TextInput.js";
+import { TextArea as co } from "./components/TextArea/TextArea.js";
+import { Helper as lo } from "./components/Helper/Helper.js";
+import { List as go } from "./components/List/List.js";
+import { Tabs as Po } from "./components/Tabs/Tabs.js";
+import { Tooltip as Co } from "./components/Tooltip/Tooltip.js";
+import { SegmentedControl as So } from "./components/SegmentedControl/SegmentedControl.js";
+import { Trigger as yo } from "./components/Trigger/Trigger.js";
+import { useSnackbar as bo } from "./components/Snackbar/lib/useSnackbar.js";
+import { SnackbarProvider as Uo } from "./components/Snackbar/Provider/SnackbarProvider.js";
+import { Divider as Bo } from "./components/Divider/Divider.js";
+import { Drop as wo } from "./components/Drop/Drop.js";
+import { Container as Eo } from "./components/Container/Container.js";
+import { Progress as Go } from "./components/Progress/Progress.js";
+import { Switch as Mo } from "./components/Switch/Switch.js";
+import { FileUpload as qo } from "./components/FileUpload/FileUpload.js";
+import { Popover as Jo } from "./components/Popover/Popover.js";
 export {
-  l as Alert,
-  z as ArrowsIcons,
+  g as Alert,
+  K as ArrowsIcons,
   e as Avatar,
-  v as Badge,
-  s as Button,
-  K as ChartsIcons,
-  to as Checkbox,
-  L as ConfigProvider,
-  Bo as Container,
-  w as CountryIcons,
-  V as DevelopmentIcons,
-  Uo as Divider,
-  Do as Drop,
-  R as EditorIcons,
-  Mo as FileUpload,
-  j as GeneralIcons,
-  co as Helper,
-  k as Icon,
-  P as Image,
-  F as LayoutIcons,
-  lo as List,
-  S as Loader,
-  i as Modal,
-  u as Placeholder,
-  qo as Popover,
-  O as PrivateIcons,
-  X as ProductIcons,
-  Eo as Progress,
+  C as Badge,
+  i as Button,
+  O as ChartsIcons,
+  fo as Checkbox,
+  b as ConfigProvider,
+  Eo as Container,
+  R as CountryIcons,
+  X as DevelopmentIcons,
+  Bo as Divider,
+  wo as Drop,
+  F as EditorIcons,
+  qo as FileUpload,
+  z as GeneralIcons,
+  lo as Helper,
+  D as Icon,
+  S as Image,
+  H as LayoutIcons,
+  go as List,
+  y as Loader,
+  l as Modal,
+  P as Placeholder,
+  Jo as Popover,
+  V as PrivateIcons,
+  Z as ProductIcons,
+  Go as Progress,
   p as Radio,
-  Po as SegmentedControl,
-  Z as ServiceIcons,
-  yo as SnackbarProvider,
-  Go as Switch,
-  uo as Tabs,
-  ro as Tag,
-  no as TextArea,
-  mo as TextInput,
-  vo as Tooltip,
-  So as Trigger,
-  fo as Typography,
-  H as UsersIcons,
-  x as enUS,
-  $ as extendLocale,
-  a as ruRU,
-  y as useConfig,
-  A as useLocale,
-  Lo as useSnackbar
+  So as SegmentedControl,
+  $ as ServiceIcons,
+  Uo as SnackbarProvider,
+  Mo as Switch,
+  Po as Tabs,
+  to as Tag,
+  co as TextArea,
+  no as TextInput,
+  Co as Tooltip,
+  yo as Trigger,
+  xo as Typography,
+  j as UsersIcons,
+  a as enUS,
+  ro as extendLocale,
+  m as generateBrandPrimaryPalette,
+  s as ruRU,
+  U as useConfig,
+  k as useLocale,
+  bo as useSnackbar
 };

package/dist/styles/brand.module.css.js

@@ -1,4 +1,26 @@
-import '../assets/styles/brand.module-BVg9LAk-.css';const t = {};
+const r = `:root {
+  --brand-primary-50:  #665414;
+  --brand-primary-100: #766013;
+  --brand-primary-150: #8E7313;
+  --brand-primary-200: #A08112;
+  --brand-primary-250: #B48C00;
+  --brand-primary-300: #C19700;
+  --brand-primary-350: #CDA000;
+  --brand-primary-400: #E0AF00;
+  --brand-primary-450: #EFBE0D;
+  --brand-primary-500: #FFC804;
+  --brand-primary-550: #FFD12F;
+  --brand-primary-600: #FFD74A;
+  --brand-primary-650: #FFDD65;
+  --brand-primary-700: #FFE27B;
+  --brand-primary-750: #FFE895;
+  --brand-primary-800: #FFEDAB;
+  --brand-primary-850: #FFF1BF;
+  --brand-primary-900: #FFF4CE;
+  --brand-primary-950: #FFF8DE;
+  --brand-primary-970: #FFFBEC;
+}
+`;
 export {
-  t as default
+  r as default
 };

package/dist/styles/brand.module.css2.js

@@ -0,0 +1,4 @@
+import '../assets/styles/brand.module-BVg9LAk-.css';const t = {};
+export {
+  t as default
+};

package/dist/styles/button.module.css.js

@@ -1,4 +1,4 @@
-import '../assets/styles/button.module-DjunAbRS.css';const t = {};
+import '../assets/styles/button.module-BG9KYkTN.css';const t = {};
 export {
   t as default
 };

package/dist/utils/generate-brand-primary-palette.d.ts

@@ -0,0 +1,36 @@
+declare const ACCENT_REFERENCE: {
+    readonly 50: "#000f31";
+    readonly 100: "#001947";
+    readonly 150: "#00235a";
+    readonly 200: "#012d6e";
+    readonly 250: "#003786";
+    readonly 300: "#00429b";
+    readonly 350: "#034cb4";
+    readonly 400: "#0058cc";
+    readonly 450: "#0d63e3";
+    readonly 500: "#0070ff";
+    readonly 550: "#2b7fff";
+    readonly 600: "#468ffd";
+    readonly 650: "#5e9eff";
+    readonly 700: "#76adfe";
+    readonly 750: "#8cbbff";
+    readonly 800: "#a4c9fe";
+    readonly 850: "#b9d7ff";
+    readonly 900: "#d1e4fe";
+    readonly 950: "#e7f2ff";
+    readonly 970: "#f3f9ff";
+};
+export type BrandPrimaryStep = keyof typeof ACCENT_REFERENCE;
+export type BrandPrimaryPalette = Record<`--brand-primary-${BrandPrimaryStep}`, string>;
+/**
+ * Генерирует CSS-переменные brand-primary из непрозрачного цвета #RGB или #RRGGBB.
+ * Шаг 500 точно сохраняет исходный цвет в формате шестизначного HEX.
+ *
+ * @param hex Исходный непрозрачный цвет в формате #RGB или #RRGGBB.
+ * @returns Объект CSS-переменных для ConfigProvider.theme.
+ * @example
+ * const theme = generateBrandPrimaryPalette('#FFC804');
+ * // <ConfigProvider theme={theme}>...</ConfigProvider>
+ */
+export declare function generateBrandPrimaryPalette(hex: string): BrandPrimaryPalette;
+export {};

package/dist/utils/generate-brand-primary-palette.js

@@ -0,0 +1,101 @@
+import { colordx as s, inGamutSrgb as S, extend as A } from "@colordx/core";
+import N from "@colordx/core/plugins/a11y";
+import j from "@colordx/core/plugins/mix";
+import G from "../styles/brand.module.css.js";
+A([N, j]);
+const h = {
+  50: "#000f31",
+  100: "#001947",
+  150: "#00235a",
+  200: "#012d6e",
+  250: "#003786",
+  300: "#00429b",
+  350: "#034cb4",
+  400: "#0058cc",
+  450: "#0d63e3",
+  500: "#0070ff",
+  550: "#2b7fff",
+  600: "#468ffd",
+  650: "#5e9eff",
+  700: "#76adfe",
+  750: "#8cbbff",
+  800: "#a4c9fe",
+  850: "#b9d7ff",
+  900: "#d1e4fe",
+  950: "#e7f2ff",
+  970: "#f3f9ff"
+}, y = Object.fromEntries(
+  [...G.matchAll(/(--brand-primary-\d+):\s*(#[\da-f]{6})\s*;/gi)].map(([, t, e]) => [
+    t,
+    e
+  ])
+);
+function c(t) {
+  const e = s(t);
+  return e.apcaContrast("#ffffff", { precision: 6 }) + e.apcaContrast("#000000", { precision: 6 });
+}
+const M = s(h[500]).toOklch().c, v = c(h[500]), P = c("#000000"), $ = c("#ffffff"), B = Object.entries(h).map(([t, e]) => {
+  const r = c(e), f = s(e).toOklch().c;
+  return {
+    step: Number(t),
+    token: `--brand-primary-${t}`,
+    score: r,
+    chromaRatio: f / M
+  };
+});
+function F(t, e, r) {
+  if (S({ l: t, c: e, h: r })) return s({ l: t, c: e, h: r }).toHex();
+  let f = 0, a = e;
+  for (let m = 0; m < 24; m++) {
+    const n = (f + a) / 2;
+    S({ l: t, c: n, h: r }) ? f = n : a = n;
+  }
+  return s({ l: t, c: f, h: r }).toHex();
+}
+function J(t) {
+  if (typeof t != "string" || !/^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(t))
+    return { ...y };
+  try {
+    return T(t);
+  } catch {
+    return { ...y };
+  }
+}
+function T(t) {
+  const e = s(t), r = e.toHex(), f = c(r), { c: a, h: m } = e.toOklch(), n = {};
+  let d = "#000000", u = P;
+  for (const o of B) {
+    if (o.step === 970) {
+      n[o.token] = e.mix("#ffffff", 0.925).toHex();
+      continue;
+    }
+    if (o.step === 950) {
+      n[o.token] = e.mix("#ffffff", 0.875).toHex();
+      continue;
+    }
+    if (o.step === 900) {
+      n[o.token] = e.mix("#ffffff", 0.825).toHex();
+      continue;
+    }
+    if (o.step === 500) {
+      n[o.token] = r, d = r, u = f;
+      continue;
+    }
+    const x = o.step < 500 ? P : $, R = (o.score - v) / (x - v), l = f + R * (x - f);
+    if (l === f) {
+      n[o.token] = r;
+      continue;
+    }
+    let k = 0, g = 1, i = o.step < 500 ? r : d, H = Math.abs(c(i) - l);
+    const w = a * o.chromaRatio;
+    for (let C = 0; C < 28; C++) {
+      const b = (k + g) / 2, E = F(b, w, m), p = c(E), O = Math.abs(p - l);
+      p <= u && (o.step > 500 || p >= f) && O < H && (i = E, H = O), p > l ? k = b : g = b;
+    }
+    n[o.token] = i, d = i, u = c(i);
+  }
+  return n;
+}
+export {
+  J as generateBrandPrimaryPalette
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skillgrid",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "description": "Skillgrid Components Library",
   "keywords": [
     "react",
@@ -126,6 +126,7 @@
   },
   "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
   "dependencies": {
+    "@colordx/core": "^7.2.0",
     "@floating-ui/react": "^0.27.16",
     "@testing-library/react": "^16.3.0",
     "antd": "^5.25.1",

package/dist/assets/components/Radio/Radio.module-TNOIshDX.css

@@ -1 +0,0 @@
-:root{--radio-background-neutral: #FFFFFF;--radio-border-neutral: var(--base-graphite-90);--radio-icon-neutral: #FFFFFF;--radio-background-accent: var(--brand-primary-500);--radio-background-accent-hovered: var(--brand-primary-550);--radio-background-negative: var(--base-red-60);--radio-border-negative: var(--base-red-60);--radio-background-secondary: var(--base-graphite-85);--radio-border-secondary: var(--base-graphite-95);--radio-icon-secondary: var(--base-graphite-95);--radio-focused-accent: color-mix(in srgb, var(--brand-primary-500) 48%, transparent);--radio-focused-negative: color-mix(in srgb, var(--base-red-60) 48%, transparent);--radio-focused-secondary: color-mix(in srgb, var(--radio-background-secondary) 48%, transparent);--radio-animation-ease-in-out-200: all .2s ease-in-out;--radio-animation-ease-in-out-tiger-200: all .2s ease-in-out;--radio-scale-pressed: 1.05;--radio-size-small: 16.67px;--radio-size-medium: 16.67px;--radio-size-large: 20px;--radio-padding: 2px;--radio-border-width: 1.5px;--radio-focus-ring-width: 4px;--radio-icon-size: 8px;--radio-gap: 10px;--radio-mode-card-xl-padding: 16px;--radio-mode-card-m-padding: 14px;--radio-mode-card-s-padding: 10px 8px;--radio-mode-card-border-radius: 12px;--radio-mode-card-border: 1px solid var(--radio-border-neutral);--radio-label-font-size: 14px;--radio-label-line-height: 20px}._default_nm7dp_53{display:flex}._radio_nm7dp_59{cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:var(--radio-padding);color:var(--radio-icon-neutral);background-color:var(--radio-background-neutral);border-color:var(--radio-border-neutral);border-style:solid;border-width:var(--radio-border-width);border-radius:50%;transition:var(--radio-animation-ease-in-out-tiger-200)}._radio_nm7dp_59._checked_nm7dp_80{background-color:var(--radio-background-accent);border:none}._radio_nm7dp_59._error_nm7dp_85{border-color:var(--radio-border-negative)}._radio_nm7dp_59._error_nm7dp_85._checked_nm7dp_80{background-color:var(--radio-background-negative);border:none}._radio_nm7dp_59._disabled_nm7dp_94,._radio_nm7dp_59._error_nm7dp_85._disabled_nm7dp_94{cursor:not-allowed;border-color:var(--radio-border-secondary)}._radio_nm7dp_59._checked_nm7dp_80._disabled_nm7dp_94{background-color:var(--radio-background-secondary);border:none}._radio_nm7dp_59:focus-visible:not(._disabled_nm7dp_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_nm7dp_59._checked_nm7dp_80:focus-visible:not(._disabled_nm7dp_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-accent)}._radio_nm7dp_59._error_nm7dp_85:focus-visible:not(._disabled_nm7dp_94){outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-negative)}._radio_nm7dp_59._disabled_nm7dp_94:focus-visible{outline:none;box-shadow:0 0 0 var(--radio-focus-ring-width) var(--radio-focused-secondary)}._icon_nm7dp_130{width:var(--radio-icon-size);height:var(--radio-icon-size);fill:currentcolor;transition:var(--radio-animation-ease-in-out-200)}._small_nm7dp_138{width:var(--radio-size-small);min-width:var(--radio-size-small);height:var(--radio-size-small);min-height:var(--radio-size-small)}._medium_nm7dp_145{width:var(--radio-size-medium);min-width:var(--radio-size-medium);height:var(--radio-size-medium);min-height:var(--radio-size-medium)}._large_nm7dp_152{width:var(--radio-size-large);min-width:var(--radio-size-large);height:var(--radio-size-large);min-height:var(--radio-size-large)}._label_nm7dp_159{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;gap:var(--radio-gap);align-items:center}._label_nm7dp_159[aria-disabled=true]{cursor:not-allowed}._label_nm7dp_159:hover ._radio_nm7dp_59:not(._checked_nm7dp_80,._error_nm7dp_85,._disabled_nm7dp_94) ._icon_nm7dp_130{fill:var(--radio-icon-secondary)}._label_nm7dp_159:hover ._radio_nm7dp_59._checked_nm7dp_80:not(._error_nm7dp_85,._disabled_nm7dp_94){background-color:var(--radio-background-accent-hovered)}._label_nm7dp_159:active ._radio_nm7dp_59:not(._disabled_nm7dp_94){transform:scale(var(--radio-scale-pressed))}._container_nm7dp_185{display:flex;gap:var(--radio-gap);align-items:baseline;width:fit-content;font-family:var(--font-family);font-size:var(--radio-label-font-size);line-height:var(--radio-label-line-height);color:var(--text-primary)}._input_nm7dp_198{position:absolute;width:0;height:0;opacity:0}._card_nm7dp_205{padding:var(--radio-mode-card-m-padding);border:var(--radio-mode-card-border);border-radius:var(--radio-mode-card-border-radius)}._smallCard_nm7dp_211{padding:var(--radio-mode-card-s-padding)}._mediumCard_nm7dp_215{padding:var(--radio-mode-card-m-padding)}._largeCard_nm7dp_219{padding:var(--radio-mode-card-xl-padding)}[data-skillgridDarkTheme=true]{--radio-background-neutral: var(--bg-secondary);--radio-border-neutral: var(--stroke-neutral);--radio-icon-neutral: var(--bg-secondary);--radio-background-secondary: var(--stroke-neutral-disabled);--radio-border-secondary: var(--stroke-neutral);--radio-icon-secondary: var(--stroke-neutral)}