@companix/uikit 0.0.36 → 0.0.37

package/dist/bundle.es7.js

@@ -0,0 +1,87 @@
+import { jsx as v } from "react/jsx-runtime";
+import S from "classnames";
+import { forwardRef as I } from "react";
+import { customCSS as r, px as i } from "@companix/utils-browser";
+const $ = I((t, c) => {
+  let {
+    interactionKind: m = "static",
+    thumbPos: g = "center",
+    thumbPadding: l = 4,
+    heightAuto: s,
+    scrollX: h,
+    className: u,
+    scrollY: n,
+    onWheel: b,
+    maxHeight: d,
+    onScroll: f,
+    thumbColor: p,
+    children: w
+  } = t;
+  const x = (() => {
+    if (t.implementation === "edge") {
+      l = 0;
+      const { padding: o, scrollbarWidth: e } = t;
+      return {
+        ...r({ "--scrollbar-width": i(e) }),
+        padding: `0px ${o - e}px 0px ${o}px`
+      };
+    }
+    if (t.implementation === "outer") {
+      const { shadowPadding: o = 0, noneCorrect: e, scrollbarWidth: a } = t;
+      return window.IS_MOBILE ? {
+        padding: o,
+        margin: -o
+      } : {
+        ...r({ "--scrollbar-width": i(a) }),
+        padding: o,
+        margin: -o,
+        marginRight: e ? void 0 : `calc(-${a}px - ${o}px)`,
+        marginBottom: 0
+      };
+    }
+    if (t.implementation === "inner") {
+      const { padding: o } = t;
+      return window.IS_MOBILE ? {
+        [n ? "paddingLeft" : "paddingTop"]: o,
+        [n ? "paddingRight" : "paddingBottom"]: o
+      } : {
+        [n ? "paddingLeft" : "paddingTop"]: o,
+        ...r({ "--scrollbar-width": i(o) })
+      };
+    }
+    return {};
+  })();
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: c,
+      onWheel: b,
+      onScroll: f,
+      onMouseDown: (o) => {
+        o.preventDefault();
+      },
+      style: {
+        ...x,
+        ...t.style,
+        maxHeight: d ? i(d) : void 0,
+        ...r({ "--thumb-padding": i(l) }),
+        ...r({ "--thumb-color": p ?? "#c1c2c8bd" })
+      },
+      className: S(
+        !window.IS_MOBILE && "scrollable",
+        u,
+        s ? "" : "h-full",
+        {
+          "overflow-y-scroll": n,
+          "overflow-x-scroll": h,
+          "scrollable-hover-interaction": m === "hover",
+          "scrollable-border-position": g === "border"
+        }
+      ),
+      children: w
+    }
+  );
+});
+export {
+  $ as Scrollable
+};

package/dist/bundle.es8.js

@@ -0,0 +1,87 @@
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import L from "classnames";
+import { useRef as d, useMemo as f, useCallback as n, useEffect as T, useLayoutEffect as H } from "react";
+import { getContainers as p, pc as h, px as v } from "@companix/utils-browser";
+const C = ({
+  children: b,
+  thumbClassName: y,
+  scrollableClassName: g,
+  thumbMargin: R = 0,
+  trackWidth: w = 20
+}) => {
+  const l = d(null), t = d(null), r = f(() => ({ positons: { top: 0, y: 0 }, scrollRatio: 0 }), []), i = f(() => ({
+    start() {
+      document.addEventListener("mousemove", a), document.addEventListener("mouseup", m);
+    },
+    clear() {
+      document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", m);
+    }
+  }), []);
+  T(() => {
+    const o = new ResizeObserver(u);
+    return t.current && p(t.current, (e) => {
+      o.observe(e);
+    }), () => {
+      t.current && p(t.current, (e) => {
+        o.unobserve(e);
+      });
+    };
+  }, []), H(() => {
+    u();
+  }, []);
+  const u = n(() => {
+    const { current: o } = t, { current: e } = l;
+    if (e && o) {
+      const s = o.clientHeight / o.scrollHeight;
+      e.style.height = h(s * 100), e.style.display = s === 1 ? "none" : "block", r.scrollRatio = s;
+    }
+  }, []), a = n(({ clientY: o }) => {
+    const { current: e } = t;
+    if (e) {
+      const s = o - r.positons.y;
+      e.scrollTop = r.positons.top + s / r.scrollRatio;
+    }
+  }, []), m = n(() => {
+    i.clear();
+  }, []), E = n(({ clientY: o }) => {
+    const { current: e } = t;
+    e && (r.positons = {
+      top: e.scrollTop,
+      y: o
+    }), i.start();
+  }, []), M = () => {
+    requestAnimationFrame(() => {
+      const { current: o } = t, { current: e } = l;
+      e && o && (e.style.top = h(o.scrollTop * 100 / o.scrollHeight));
+    });
+  };
+  return /* @__PURE__ */ x("div", { className: "relative h-full overflow-hidden", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: L("hidden-scroll h-full overflow-y-scroll", g),
+        onScroll: M,
+        ref: t,
+        children: b
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: "absolute right-0 top-0 box-border h-full",
+        style: { width: v(w), padding: v(R) },
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            onMouseDown: E,
+            className: `${y} relative w-full rounded-full`,
+            ref: l
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  C as ImitateScroll
+};

package/dist/bundle.es9.js

@@ -0,0 +1,24 @@
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { attr as d } from "@companix/utils-browser";
+const u = ({ value: t, onChange: i, options: r }) => {
+  const n = r.findIndex((e) => e.value === t), a = {
+    "--uikit--current-index": String(n),
+    "--uikit--options": String(r.length)
+  };
+  return /* @__PURE__ */ s("div", { className: "segments-container", children: /* @__PURE__ */ l("div", { role: "radiogroup", className: "segments", children: [
+    n > -1 && /* @__PURE__ */ s("div", { "aria-hidden": !0, className: "segments-slider", style: a }),
+    r.map((e) => /* @__PURE__ */ s(
+      "div",
+      {
+        onClick: () => i(e.value),
+        className: "segments-option",
+        "data-active": d(e.value === t),
+        children: e.label
+      },
+      `segment-${e.value}`
+    ))
+  ] }) });
+};
+export {
+  u as Segments
+};

package/dist/css-properties.scss

@@ -0,0 +1,120 @@
+$properties: (
+  // Layout
+  display,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  z-index,
+  float,
+  clear,
+  overflow,
+  overflow-x,
+  overflow-y,
+  visibility,
+  // Box model
+  box-sizing,
+  width,
+  min-width,
+  max-width,
+  height,
+  min-height,
+  max-height,
+  margin,
+  margin-top,
+  margin-right,
+  margin-bottom,
+  margin-left,
+  padding,
+  padding-top,
+  padding-right,
+  padding-bottom,
+  padding-left,
+  // Flexbox
+  flex,
+  flex-direction,
+  flex-wrap,
+  flex-grow,
+  flex-shrink,
+  flex-basis,
+  justify-content,
+  align-items,
+  align-content,
+  align-self,
+  gap,
+  row-gap,
+  column-gap,
+  // Grid
+  grid,
+  grid-template-columns,
+  grid-template-rows,
+  grid-template-areas,
+  grid-column,
+  grid-row,
+  grid-area,
+  // Typography
+  color,
+  font,
+  font-family,
+  font-size,
+  font-weight,
+  font-style,
+  font-stretch,
+  line-height,
+  letter-spacing,
+  text-align,
+  text-decoration,
+  text-transform,
+  text-overflow,
+  white-space,
+  word-break,
+  word-wrap,
+  // Background
+  background,
+  background-color,
+  background-image,
+  background-repeat,
+  background-position,
+  background-size,
+  // Border
+  border,
+  border-width,
+  border-style,
+  border-color,
+  border-radius,
+  border-top,
+  border-right,
+  border-bottom,
+  border-left,
+  // Effects
+  box-shadow,
+  opacity,
+  filter,
+  // Transform & animation
+  transform,
+  transform-origin,
+  transition,
+  transition-property,
+  transition-duration,
+  transition-timing-function,
+  transition-delay,
+  animation,
+  animation-name,
+  animation-duration,
+  animation-timing-function,
+  animation-delay,
+  animation-iteration-count,
+  animation-direction,
+  animation-fill-mode,
+  // Interaction
+  cursor,
+  pointer-events,
+  user-select,
+  // Misc
+  outline,
+  outline-offset,
+  resize,
+  object-fit,
+  object-position
+);

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export type { AvatarSize } from './Avatar/types';
+export { avatarSizes } from './Avatar/types';
+export { Button } from './Button';
+export type { ButtonProps, Appearance, Mode, Size } from './Button';
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { Scrollable } from './Scrollable';
+export { ImitateScroll } from './Scrollable/ImitateScroll';
+export type { ImitateScrollProps } from './Scrollable/ImitateScroll';
+export { Segments } from './Segments';
+export type { SegmentsProps } from './Segments';
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+export { Input } from './Input/Input';
+export type { InputProps } from './Input/Input';
+export { OptionItem } from './OptionItem/OptionItem';
+export type { OptionProps } from './OptionItem/OptionItem';
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps, ReactNumberFormatParams } from './NumberInput';
+export { OptionsList } from './OptionItem/OptionsList';
+export type { OptionsListProps } from './OptionItem/OptionsList';
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { Radio, RadioGroup } from './Radio';
+export type { RadioOption, RadioGroupProps } from './Radio';
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { Dialog } from './Dialog';
+export type { DialogProps, DialogSize } from './Dialog';
+export { AlertDialog } from './DialogAlert/Alert';
+export type { AlertDialogProps } from './DialogAlert/Alert';
+export { LoadingButton } from './LoadingButton';
+export type { LoadingButtonProps } from './LoadingButton';
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export { Countdown } from './Countdown';
+export type { CountDownProps } from './Countdown';
+export { TextArea } from './TextArea';
+export type { TextAreaProps } from './TextArea';
+export { SelectTags } from './SelectTags';
+export type { SelectTagsProps } from './SelectTags';
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';
+export { DateInput } from './DateInput';
+export type { DateInputProps } from './DateInput';
+export { FileOverlay } from './File';
+export type { FileOverlayProps } from './File';
+export { FormGroup } from './FormGroup';
+export type { FormGroupProps } from './FormGroup';
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker';
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+export { ProgressBar } from './Progress';
+export type { ProgressBarProps } from './Progress';
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export { ColorSchemeScript, colorSchemeScript } from './ThemeProvider/script';
+export { useLocalStorage } from './__hooks/use-local-storage';
+export { createAlertAgent } from './DialogAlert';
+export { createToaster } from './Toaster';
+export { Toast } from './Toaster/Toast';
+export * from './types';
+export type { CalendarProps } from './Calendar/Calendar';
+export { createDialogsRegistry, DialogShell } from './__helpers/createDialogRegistry';
+export { createPopoversRegistry } from './__helpers/createPopoversRegistry';
+export type { PopupProps } from './__helpers/createDialogRegistry';
+export type { PopoverContentProps } from './__helpers/createPopoversRegistry';

package/dist/index.scss

@@ -0,0 +1,28 @@
+@use './Avatar/Avatar.scss';
+@use './Button/Button.scss';
+@use './Icon/icon.scss';
+@use './Popover/Popover.scss';
+@use './Tooltip/Tooltip.scss';
+@use './Checkbox/Checkbox.scss';
+@use './Radio/Radio.scss';
+@use './Tabs/Tabs.scss';
+@use './Toaster/Toaster.scss';
+@use './Dialog/Popup.scss';
+@use './Dialog/Dialog.scss';
+@use './DialogAlert/Alert.scss';
+@use './Drawer/Drawer.scss';
+@use './Select/Select.scss';
+@use './TextArea/TextArea.scss';
+@use './SelectTags/SelectTags.scss';
+@use './OptionItem/Option.scss';
+@use './Input/Input.scss';
+@use './Input/Form.scss';
+@use './DateInput/DateInput.scss';
+@use './Calendar/Calendar.scss';
+@use './Switch/Switch.scss';
+@use './Spinner/Spinner.scss';
+@use './ButtonGroup/ButtonGroup.scss';
+@use './Segments/Segments.scss';
+@use './Scrollable/Scrollable.scss';
+@use './FormGroup/FormGroup.scss';
+@use './Progress/Progress.scss';

package/dist/mixins.scss

@@ -0,0 +1,102 @@
+@use './theme.scss';
+@use './css-properties.scss';
+
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+
+@mixin height($size) {
+  height: $size;
+  min-height: $size;
+  max-height: $size;
+}
+
+@mixin box($size) {
+  height: $size;
+  width: $size;
+  min-width: $size;
+}
+
+@mixin items-spacing($spacing) {
+  & > * {
+    margin-right: $spacing;
+  }
+
+  & > :last-child {
+    margin-right: 0;
+  }
+}
+
+@mixin truncate-text() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@function get-value($map, $keys...) {
+  $current: $map;
+
+  @each $key in $keys {
+    @if meta.type-of($current) != 'map' {
+      @return null;
+    }
+
+    $current: map.get($current, $key);
+
+    @if $current == null {
+      @return null;
+    }
+  }
+
+  @return $current;
+}
+
+@mixin set-style($property, $source, $keys...) {
+  $path: list.append($keys, $property);
+  $var-name: get-value($source, $path...);
+
+  @if $var-name != null {
+    @if meta.type-of($var-name) != 'map' {
+      #{$property}: $var-name;
+    }
+  }
+}
+
+@mixin use-styles($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+
+  @each $property, $v in css-properties.$properties {
+    @include set-style($property, $source, $keys...);
+  }
+}
+
+@mixin use-styles-debug($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+
+  @debug $source;
+
+  @each $property, $v in css-properties.$properties {
+    @include set-style($property, $source, $keys...);
+  }
+}
+
+@function get-var-name($component, $keys...) {
+  $source: map.get(theme.$tokens, $component);
+  $var-name: get-value($source, $keys...);
+
+  @return $var-name;
+}
+
+@mixin use-size($component, $keys...) {
+  $name: get-var-name($component, $keys...);
+
+  @if $name != null {
+    @if meta.type-of($name) != 'map' {
+      width: $name;
+      min-width: $name;
+      height: $name;
+    }
+  }
+}
+
+$appearances: ('primary', 'neutral', 'positive', 'negative');

package/dist/theme.scss

@@ -0,0 +1,101 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
+
+$button-appearances: ();
+$tokens: ();
+
+@function str-split($string, $delimiter) {
+  $result: ();
+  $buffer: '';
+
+  @for $i from 1 through string.length($string) {
+    $char: string.slice($string, $i, $i);
+
+    @if ($char == $delimiter) {
+      $result: list.append($result, $buffer);
+      $buffer: '';
+    } @else {
+      $buffer: $buffer + $char;
+    }
+  }
+
+  $result: list.append($result, $buffer);
+
+  @return $result;
+}
+
+@function list-slice($list, $start, $end: list.length($list)) {
+  $new: ();
+
+  @for $i from $start through $end {
+    $new: list.append($new, list.nth($list, $i));
+  }
+
+  @return $new;
+}
+
+/// Добавляет значение в многоуровневую карту
+@function map-deep-set($map, $keys, $value) {
+  $current: $map;
+  $key: list.nth($keys, 1);
+
+  @if list.length($keys) == 1 {
+    @return map.merge(
+      $current,
+      (
+        $key: $value
+      )
+    );
+  }
+
+  $nested: map.get($current, $key);
+
+  @if $nested == null {
+    $nested: ();
+  }
+
+  $nested: map-deep-set($nested, list-slice($keys, 2), $value);
+
+  @return map.merge(
+    $current,
+    (
+      $key: $nested
+    )
+  );
+}
+
+@mixin use-button-properties($vars) {
+  @each $full-name, $v in $vars {
+    // Разбиваем путь: primary-default-enabled-background → ('primary', 'default', 'enabled', 'background')
+    $parts: str-split($full-name, '_');
+    // Создаём CSS переменную:
+    $css-var: string.unquote('var(--btn_#{$full-name})');
+    // Глубоко добавляем значение в структуру
+    $button-appearances: map-deep-set($button-appearances, $parts, $css-var) !global;
+  }
+}
+
+@mixin use-tokens($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, '_');
+      // Создаём CSS переменную:
+      $css-var: string.unquote('var(--#{$name})');
+      // Глубоко добавляем значение в структуру
+      $tokens: map-deep-set($tokens, $keys, $css-var) !global;
+      // set scss var
+      --#{$name}: #{map.get($component-vars, $path)};
+    }
+  }
+}
+
+@mixin use-css-vars($prefix, $map) {
+  @each $name, $value in $map {
+    --#{$prefix}_#{$name}: #{$value};
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+export interface Option<T> {
+    title: string;
+    value: T;
+    icon?: React.ReactNode;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface DateFormat {
+    month: number;
+    year: number;
+    day: number;
+}
+export interface TimeFormat {
+    hours: number;
+    minutes: number;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
-  "types": "./src/index.ts",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "files": [
     "dist"
@@ -23,9 +23,9 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@companix/icons-solid": "file:../../icons/solid",
-    "@companix/utils-browser": "file:../utils-browser",
-    "@companix/utils-js": "file:../utils-js",
+    "@companix/icons-solid": "*",
+    "@companix/utils-browser": "*",
+    "@companix/utils-js": "*",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -65,4 +65,4 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.1.4"
   }
-}
+}