@companix/uikit 0.0.97 → 0.0.99

package/dist/Button/Button.scss

@@ -118,7 +118,7 @@
     @include mixins.use-styles(button, size, sm);
 
     &:has(> svg:only-child) {
-      width: var(--button_size_sm_height);
+      width: mixins.get-style(button, size, sm, height);
     }
   }
 
@@ -126,7 +126,7 @@
     @include mixins.use-styles(button, size, md);
 
     &:has(> svg:only-child) {
-      width: var(--button_size_md_height);
+      width: mixins.get-style(button, size, md, height);
     }
   }
 
@@ -134,7 +134,7 @@
     @include mixins.use-styles(button, size, lg);
 
     &:has(> svg:only-child) {
-      width: var(--button_size_lg_height);
+      width: mixins.get-style(button, size, lg, height);
     }
   }
 

package/dist/Select/Select.scss

@@ -92,8 +92,8 @@
 // expand icon
 
 .expand-icon {
-  color: var(--select_expand_color);
   transition: transform 0.2s;
+  @include mixins.use-styles(select, expand);
 }
 
 .form {

package/dist/__helpers/createPopupRegistry.d.ts

@@ -21,6 +21,12 @@ type PopupsRegistry<T extends Store> = {
     Open: OpenAgent<T>;
 };
 export declare const createPopupRegistry: <T extends Store>(mapping: T) => PopupsRegistry<T>;
+interface PopupContextValue {
+    open: boolean;
+    onOpenChange: (value: boolean) => void;
+    onClosed: () => void;
+}
+export declare const usePopup: () => PopupContextValue;
 interface DialogShellProps extends Omit<DialogProps, 'open' | 'onOpenChange' | 'onClosed'> {
 }
 export declare const DialogShell: ({ children, ...props }: DialogShellProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es.js

@@ -2,7 +2,7 @@ import { Avatar as e } from "./bundle.es2.js";
 import { avatarSizes as p } from "./bundle.es3.js";
 import { Button as a } from "./bundle.es4.js";
 import { ButtonGroup as x } from "./bundle.es5.js";
-import { Spinner as s } from "./bundle.es6.js";
+import { Spinner as i } from "./bundle.es6.js";
 import { Scrollable as c } from "./bundle.es7.js";
 import { ImitateScroll as u } from "./bundle.es8.js";
 import { Segments as D } from "./bundle.es9.js";
@@ -28,7 +28,7 @@ import { TextArea as or } from "./bundle.es28.js";
 import { DatePicker as tr } from "./bundle.es29.js";
 import { DateInput as mr } from "./bundle.es30.js";
 import { FileOverlay as fr } from "./bundle.es31.js";
-import { FormGroup as ir } from "./bundle.es32.js";
+import { FormGroup as sr } from "./bundle.es32.js";
 import { TimePicker as nr } from "./bundle.es33.js";
 import { Icon as lr } from "./bundle.es34.js";
 import { ProgressBar as Sr } from "./bundle.es35.js";
@@ -46,11 +46,11 @@ import { useLoading as Er } from "./bundle.es46.js";
 import { createAlertAgent as qr } from "./bundle.es47.js";
 import { createToaster as Jr } from "./bundle.es48.js";
 import { Toast as Qr } from "./bundle.es49.js";
-import { DialogShell as Vr, DrawerShell as Xr, createPopupRegistry as Zr } from "./bundle.es50.js";
-import { createPopoversRegistry as $r } from "./bundle.es51.js";
-import { createScope as oo, createStaticScope as eo } from "./bundle.es52.js";
-import { RemoveListener as po } from "./bundle.es53.js";
-import { MONDAY as ao, addMonths as fo, createDayDisableChecker as xo, endOfDay as io, endOfWeek as so, isDayMinMaxRestricted as no, isSameDate as co, setMonth as lo, setYear as uo, startOfDay as So, startOfWeek as Do, subMonths as go, useDayDisableCheker as ho } from "./bundle.es54.js";
+import { DialogShell as Vr, DrawerShell as Xr, createPopupRegistry as Zr, usePopup as _r } from "./bundle.es50.js";
+import { createPopoversRegistry as ro } from "./bundle.es51.js";
+import { createScope as eo, createStaticScope as to } from "./bundle.es52.js";
+import { RemoveListener as mo } from "./bundle.es53.js";
+import { MONDAY as fo, addMonths as xo, createDayDisableChecker as so, endOfDay as io, endOfWeek as no, isDayMinMaxRestricted as co, isSameDate as lo, setMonth as uo, setYear as So, startOfDay as Do, startOfWeek as go, subMonths as ho, useDayDisableCheker as Po } from "./bundle.es54.js";
 export {
   Q as AlertDialog,
   e as Avatar,
@@ -69,12 +69,12 @@ export {
   Ar as DropArea,
   Or as DropAreaProvider,
   fr as FileOverlay,
-  ir as FormGroup,
+  sr as FormGroup,
   lr as Icon,
   u as ImitateScroll,
   O as Input,
   V as LoadingButton,
-  ao as MONDAY,
+  fo as MONDAY,
   I as NumberInput,
   b as OptionItem,
   M as OptionsList,
@@ -84,13 +84,13 @@ export {
   Tr as ProgressRing,
   F as Radio,
   N as RadioGroup,
-  po as RemoveListener,
+  mo as RemoveListener,
   c as Scrollable,
   D as Segments,
   k as Select,
   v as SelectTags,
   gr as Skeleton,
-  s as Spinner,
+  i as Spinner,
   W as Switch,
   Z as Tabs,
   or as TextArea,
@@ -99,30 +99,31 @@ export {
   Qr as Toast,
   P as Tooltip,
   yr as WriteBar,
-  fo as addMonths,
+  xo as addMonths,
   p as avatarSizes,
   Cr as colorSchemeScript,
   qr as createAlertAgent,
-  xo as createDayDisableChecker,
-  $r as createPopoversRegistry,
+  so as createDayDisableChecker,
+  ro as createPopoversRegistry,
   Zr as createPopupRegistry,
-  oo as createScope,
-  eo as createStaticScope,
+  eo as createScope,
+  to as createStaticScope,
   Jr as createToaster,
   io as endOfDay,
-  so as endOfWeek,
-  no as isDayMinMaxRestricted,
-  co as isSameDate,
-  lo as setMonth,
-  uo as setYear,
-  So as startOfDay,
-  Do as startOfWeek,
-  go as subMonths,
+  no as endOfWeek,
+  co as isDayMinMaxRestricted,
+  lo as isSameDate,
+  uo as setMonth,
+  So as setYear,
+  Do as startOfDay,
+  go as startOfWeek,
+  ho as subMonths,
   zr as useBooleanState,
-  ho as useDayDisableCheker,
+  Po as useDayDisableCheker,
   Rr as useDragEnter,
   Er as useLoading,
   Gr as useLocalStorage,
+  _r as usePopup,
   Nr as useResizeTextarea,
   Ir as useTheme
 };

package/dist/bundle.es50.js

@@ -1,50 +1,54 @@
-import { jsx as r, Fragment as h } from "react/jsx-runtime";
-import { useContext as C, createContext as x, useState as P, useEffect as g, useCallback as u } from "react";
-import { hash as v } from "@companix/utils-js";
-import { Dialog as w } from "./bundle.es22.js";
-import { Drawer as D } from "./bundle.es21.js";
-const j = (o) => {
-  const t = {}, e = {}, p = [], c = v();
-  for (const n in o)
-    t[n] = () => {
+import { jsx as r, Fragment as C } from "react/jsx-runtime";
+import { useContext as h, createContext as x, useState as P, useEffect as g, useCallback as u, memo as v } from "react";
+import { hash as w } from "@companix/utils-js";
+import { Dialog as D } from "./bundle.es22.js";
+import { Drawer as S } from "./bundle.es21.js";
+const F = (t) => {
+  const o = {}, e = {}, p = [], c = w();
+  for (const n in t)
+    o[n] = () => {
     }, e[n] = () => {
-    }, p.push(() => /* @__PURE__ */ r(S, { Open: t, Close: e, name: n, Content: o[n] }));
+    }, p.push(() => /* @__PURE__ */ r(O, { Open: o, Close: e, name: n, Content: t[n] }));
   return {
-    Open: t,
+    Open: o,
     Close: e,
-    Overlay: () => /* @__PURE__ */ r(h, { children: p.map((n, s) => /* @__PURE__ */ r(n, {}, `popup-${c}-${s}`)) })
+    Overlay: () => /* @__PURE__ */ r(C, { children: p.map((n, s) => /* @__PURE__ */ r(n, {}, `popup-${c}-${s}`)) })
   };
-}, S = ({ name: o, Open: t, Close: e, Content: p }) => {
-  const [{ data: c, open: n }, s] = P({ data: null, open: !1 });
+}, O = ({ name: t, Open: o, Close: e, Content: p }) => {
+  const [{ data: c, open: n }, s] = P({
+    data: null,
+    open: !1
+  });
   g(() => {
-    t[o] = (a) => {
+    o[t] = (a) => {
       s({ data: a, open: !0 });
-    }, e[o] = () => {
+    }, e[t] = () => {
       n && l();
     };
   }, []);
   const l = u(() => {
     s(({ data: a }) => ({ data: a, open: !1 }));
-  }, []), d = u(() => {
+  }, []), m = u(() => {
     s({ data: null, open: !1 });
-  }, []), m = u((a) => {
+  }, []), d = u((a) => {
     a || l();
   }, []);
-  return c ? /* @__PURE__ */ r(i.Provider, { value: { open: n, onOpenChange: m, onClosed: d }, children: /* @__PURE__ */ r(p, { data: c, close: l }) }) : null;
-}, i = x(null), f = () => {
-  const o = C(i);
-  if (!o)
+  return c ? /* @__PURE__ */ r(i.Provider, { value: { open: n, onOpenChange: d, onClosed: m }, children: /* @__PURE__ */ r(y, { data: c, close: l, Content: p }) }) : null;
+}, y = v(({ data: t, close: o, Content: e }) => /* @__PURE__ */ r(e, { data: t, close: o })), i = x(null), f = () => {
+  const t = h(i);
+  if (!t)
     throw new Error("Popup context not provided");
-  return o;
-}, k = ({ children: o, ...t }) => {
+  return t;
+}, R = ({ children: t, ...o }) => {
   const e = f();
-  return /* @__PURE__ */ r(w, { ...e, ...t, children: o });
-}, F = ({ children: o, ...t }) => {
+  return /* @__PURE__ */ r(D, { ...e, ...o, children: t });
+}, W = ({ children: t, ...o }) => {
   const e = f();
-  return /* @__PURE__ */ r(D, { ...e, ...t, children: o });
+  return /* @__PURE__ */ r(S, { ...e, ...o, children: t });
 };
 export {
-  k as DialogShell,
-  F as DrawerShell,
-  j as createPopupRegistry
+  R as DialogShell,
+  W as DrawerShell,
+  F as createPopupRegistry,
+  f as usePopup
 };

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export { Toast } from './Toaster/Toast';
 export * from './types';
 export type { CalendarProps } from './Calendar/Calendar';
 export type { OptionsSource, UseOptionsResponse } from './Select/OptionsPopover';
-export { createPopupRegistry, DialogShell, DrawerShell } from './__helpers/createPopupRegistry';
+export { createPopupRegistry, DialogShell, DrawerShell, usePopup } from './__helpers/createPopupRegistry';
 export { createPopoversRegistry } from './__helpers/createPopoversRegistry';
 export { createScope, createStaticScope } from './__helpers/createScope';
 export type { PopupProps } from './__helpers/createPopupRegistry';

package/dist/mixins.scss

@@ -53,11 +53,11 @@
 
 @mixin set-style($property, $source, $keys...) {
   $path: list.append($keys, $property);
-  $var-name: get-value($source, $path...);
+  $value: get-value($source, $path...);
 
-  @if $var-name != null {
-    @if meta.type-of($var-name) != 'map' {
-      #{$property}: $var-name;
+  @if $value != null {
+    @if meta.type-of($value) != 'map' {
+      #{$property}: $value;
     }
   }
 }
@@ -70,6 +70,11 @@
   }
 }
 
+@function get-style($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+  @return get-value($source, $keys...);
+}
+
 @mixin use-styles-debug($component, $keys...) {
   $source: map.get(theme.$tokens, $component);
 

package/dist/theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:string';
 @use 'sass:list';
+@use 'sass:meta';
 
 $button-appearances: ();
 $tokens: ();
@@ -65,6 +66,14 @@ $tokens: ();
   );
 }
 
+@function unquote-value($value) {
+  @if meta.type-of($value) == 'string' {
+    @return string.unquote($value);
+  }
+
+  @return $value;
+}
+
 @mixin use-button-properties($vars) {
   @each $full-name, $v in $vars {
     // Разбиваем путь: primary-default-enabled-background → ('primary', 'default', 'enabled', 'background')
@@ -94,6 +103,21 @@ $tokens: ();
   }
 }
 
+@mixin use-layout($components) {
+  @each $component-name, $v in $components {
+    $component-vars: map.get($components, $component-name);
+
+    @each $path, $v in $component-vars {
+      $name: #{$component-name}_#{$path};
+      // Разбиваем путь: primary_default_enabled_background → ('primary', 'default', 'enabled', 'background')
+      $keys: str-split($name, '_');
+      $value: unquote-value(map.get($component-vars, $path));
+      // Глубоко добавляем значение в структуру
+      $tokens: map-deep-set($tokens, $keys, $value) !global;
+    }
+  }
+}
+
 @mixin use-css-vars($prefix, $map) {
   @each $name, $value in $map {
     --#{$prefix}_#{$name}: #{$value};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",