@companix/uikit 0.0.3 → 0.0.4

package/dist/bundle.es9.js

@@ -1,47 +1,75 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-/* empty css            */
-import { Form as u } from "./bundle.es11.js";
-import { useStepperInput as f } from "./bundle.es35.js";
-import { usePress as h } from "./bundle.es36.js";
-import { Button as v } from "./bundle.es3.js";
-import { attr as x } from "@companix/utils-browser";
-import { Icon as m } from "./bundle.es37.js";
-import { faChevronUp as C, faChevronDown as b } from "@fortawesome/free-solid-svg-icons";
-const y = ({ inputStyle: r, placeholder: t, buttons: n, ...o }) => {
-  const { inputRef: s, increment: p, decrement: i, handleChange: d, value: l } = f(o);
-  return /* @__PURE__ */ a("div", { className: "number-input-container", children: [
-    /* @__PURE__ */ e(
-      u,
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import A from "classnames";
+import F from "react-input-mask";
+import { useLayoutAndUpdate as M } from "./bundle.es33.js";
+import { attr as c } from "@companix/utils-browser";
+import { forwardRef as R, useRef as m, useCallback as g } from "react";
+import { mergeRefs as U } from "react-merge-refs";
+const Q = R(
+  ({
+    required: n,
+    size: f,
+    fill: a,
+    leftElement: e,
+    rightElement: u,
+    onChange: x,
+    onValueChange: $,
+    readOnly: b,
+    className: I,
+    value: N,
+    placeholder: W,
+    disabled: p,
+    mask: y,
+    maskChar: C,
+    inputRef: L,
+    ...j
+  }, k) => {
+    const s = m(null), l = m(null), d = m(null), q = { Right: l, Left: d }, h = g((t) => {
+      if (s.current) {
+        const i = s.current.style, o = q[t];
+        o.current && o.current.clientWidth ? i[`padding${t}`] !== `${o.current.clientWidth}px` && (i[`padding${t}`] = `${o.current.clientWidth}px`) : i[`padding${t}`] && (i[`padding${t}`] = "");
+      }
+    }, []);
+    M(() => {
+      h("Left"), h("Right");
+    }, [u, e]);
+    const w = g((t) => {
+      x?.(t), $?.(t.target.value, t.target);
+    }, []);
+    return /* @__PURE__ */ z(
+      "div",
       {
-        ref: s,
-        placeholder: t,
-        style: r,
-        value: l,
-        onChange: d
+        ref: k,
+        className: A("form", I),
+        "data-size": f ?? "md",
+        "data-fill": c(a),
+        "data-required": c(n),
+        "data-disabled": c(p),
+        ...j,
+        children: [
+          e && /* @__PURE__ */ r("span", { ref: d, className: "form-input-base-left-element", children: e }),
+          /* @__PURE__ */ r(
+            v,
+            {
+              type: "text",
+              ref: U([s, L]),
+              className: "form-input form-input-base",
+              "aria-disabled": p,
+              onChange: w,
+              value: N,
+              placeholder: W,
+              disabled: p,
+              readOnly: b,
+              maskChar: C,
+              mask: y
+            }
+          ),
+          u && /* @__PURE__ */ r("span", { ref: l, className: "form-input-base-right-element", children: u })
+        ]
       }
-    ),
-    n && /* @__PURE__ */ e(I, { increment: p, decrement: i })
-  ] });
-}, I = ({ increment: r, decrement: t }) => /* @__PURE__ */ a("div", { className: "number-stepper", children: [
-  /* @__PURE__ */ e(c, { slot: "increment", onClick: r, children: /* @__PURE__ */ e(m, { size: "xxs", icon: C }) }),
-  /* @__PURE__ */ e("div", { className: "number-stepper-splitter" }),
-  /* @__PURE__ */ e(c, { slot: "decrement", onClick: t, children: /* @__PURE__ */ e(m, { size: "xxs", icon: b }) })
-] }), c = ({ children: r, slot: t, onClick: n }) => {
-  const { pressProps: o, isPressed: s } = h({ onClick: n, preventFocusOnPress: !0 }), { onBeforeInput: p, ...i } = o;
-  return /* @__PURE__ */ e(
-    v,
-    {
-      ...i,
-      onBeforeInput: p,
-      "data-slot": t,
-      "data-size": void 0,
-      "data-pressed": x(s),
-      style: { border: "none" },
-      className: "number-stepper-slot",
-      children: r
-    }
-  );
-};
+    );
+  }
+), v = R(({ mask: n, maskChar: f, ...a }, e) => n ? /* @__PURE__ */ r(F, { inputRef: e, mask: n, maskChar: f, ...a }) : /* @__PURE__ */ r("input", { ref: e, ...a }));
 export {
-  y as StepperInput
+  Q as Form
 };

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/{types/index.d.ts → index.d.ts}

@@ -4,7 +4,6 @@ export { Scrollable } from './Scrollable';
 export { ImitateScroll } from './Scrollable/ImitateScroll';
 export { Popover } from './Popover';
 export { Tooltip } from './Tooltip';
-export { StepperInput } from './Stepper';
 export { Select } from './Select';
 export { Form } from './Form';
 export { OptionItem } from './OptionItem/OptionItem';

package/dist/index.scss

@@ -0,0 +1,25 @@
+@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 './Form/Form.scss';
+@use './Select/Select.scss';
+@use './TextArea/TextArea.scss';
+@use './SelectTags/SelectTags.scss';
+@use './OptionItem/Option.scss';
+@use './DateInput/DateInput.scss';
+@use './DatePicker/DatePicker.scss';
+@use './DatePicker/Calendar.scss';
+@use './Form/Input.scss';
+@use './Switch/Switch.scss';
+@use './Spinner/Spinner.scss';
+@use './ButtonGroup/ButtonGroup.scss';
+@use './Scrollable/Scrollable.scss';

package/dist/mixins.scss

@@ -0,0 +1,100 @@
+@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;
+    }
+  }
+}

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/package.json

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

package/dist/bundle.es46.js

@@ -1,72 +0,0 @@
-import { jsxs as D, jsx as t } from "react/jsx-runtime";
-import { dateToFormat as $, weeks as g, createVoids as p, getDayIndex as b, getFirstDay as u, getMonthMaxDay as k } from "./bundle.es50.js";
-import { CalendarHeader as F } from "./bundle.es51.js";
-import { useCalendar as j } from "./bundle.es52.js";
-import { attr as m } from "@companix/utils-browser";
-import { isSameDate as f } from "./bundle.es47.js";
-import { useLayoutEffect as I } from "react";
-const T = ({ disablePickers: c, value: e, onChange: i, ...l }) => {
-  const {
-    viewDate: n,
-    setViewDate: r,
-    setNextMonth: N,
-    setPrevMonth: x,
-    isMonthDisabled: M,
-    isYearDisabled: v,
-    isDayDisabled: w
-  } = j(l);
-  I(() => {
-    e && r(e);
-  }, [e]);
-  const o = $(n), h = n.getMonth(), y = n.getFullYear(), C = /* @__PURE__ */ new Date();
-  return /* @__PURE__ */ D("div", { className: "calendar", children: [
-    /* @__PURE__ */ t(
-      F,
-      {
-        viewDate: n,
-        onChange: r,
-        onNextMonth: N,
-        onPrevMonth: x,
-        disablePickers: c,
-        isMonthDisabled: M,
-        isYearDisabled: v
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: "calendar-names", children: g.map((d, a) => /* @__PURE__ */ t("div", { className: "calendar-name", children: d }, `week-name-${a}`)) }),
-    /* @__PURE__ */ D("div", { className: "calendar-days", children: [
-      p(b(u(o.month, o.year))).map((d, a) => /* @__PURE__ */ t("div", { className: "calendar-day", "data-void": !0 }, `void-${d}-${a}`)),
-      p(k(o.month, o.year)).map((d, a) => {
-        const s = new Date(y, h, a + 1);
-        return /* @__PURE__ */ t(
-          P,
-          {
-            day: a + 1,
-            disabled: w(s),
-            selected: !!(e && f(e, s)),
-            today: f(s, C),
-            onSelect: () => i?.(s)
-          },
-          `date-${d}-${y}-${h}-${a}`
-        );
-      })
-    ] })
-  ] });
-}, P = ({ day: c, disabled: e, selected: i, today: l, onSelect: n }) => {
-  const r = () => {
-    e || n?.();
-  };
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: "calendar-day",
-      "data-disabled": m(e),
-      "data-selected": m(i),
-      "data-today": m(l),
-      onClick: r,
-      children: /* @__PURE__ */ t("span", { className: "calendar-day-number", children: c })
-    }
-  );
-};
-export {
-  T as Calendar
-};

package/dist/bundle.es47.js

@@ -1,70 +0,0 @@
-import { useMemo as D, useCallback as c } from "react";
-function l(e, t) {
-  return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
-}
-function f(e) {
-  const t = new Date(e);
-  return t.setHours(0, 0, 0, 0), t;
-}
-function h(e) {
-  const t = new Date(e);
-  return t.setHours(23, 59, 59, 999), t;
-}
-function M(e, t = {}) {
-  const { min: n, max: r, withTime: s = !1 } = t;
-  return !s && (n && l(e, n) || r && l(e, r)) ? !1 : !!(n && e < n || r && e > r);
-}
-function m(e, t) {
-  const n = new Date(e);
-  if (!t)
-    return n;
-  const r = n.getDate(), s = new Date(e);
-  s.setMonth(n.getMonth() + t + 1, 0);
-  const a = s.getDate();
-  return r >= a ? s : (n.setFullYear(s.getFullYear(), s.getMonth(), r), n);
-}
-function F(e, t) {
-  return m(e, -1);
-}
-function g(e) {
-  const t = new Date(e), n = new Date(t);
-  return n.setFullYear(t.getFullYear(), t.getMonth() + 1, 0), n.setHours(0, 0, 0, 0), n.getDate();
-}
-function Y(e, t) {
-  const n = new Date(e);
-  return n.setFullYear(t), n;
-}
-function y(e, t) {
-  const n = new Date(e), r = n.getFullYear(), s = n.getDate(), a = new Date(e);
-  a.setFullYear(r, t, 15), a.setHours(0, 0, 0, 0);
-  const u = g(a);
-  return n.setMonth(t, Math.min(s, u)), n;
-}
-const w = (e) => {
-  const { disableFuture: t, disablePast: n, maxDateTime: r, minDateTime: s, shouldDisableDate: a } = e;
-  return (u, i) => {
-    const o = /* @__PURE__ */ new Date();
-    return a ? a(u) : t ? f(u) > o : n ? h(u) < o : s || r ? M(u, { min: s, max: r, withTime: i }) : !1;
-  };
-}, d = (e) => {
-  const t = D(() => w(e), [
-    e.disableFuture,
-    e.disablePast,
-    e.shouldDisableDate,
-    e.minDateTime,
-    e.maxDateTime
-  ]);
-  return c(t, [t]);
-};
-export {
-  m as addMonths,
-  w as createDayDisableChecker,
-  h as endOfDay,
-  M as isDayMinMaxRestricted,
-  l as isSameDate,
-  y as setMonth,
-  Y as setYear,
-  f as startOfDay,
-  F as subMonths,
-  d as useDayDisableCheker
-};

package/dist/bundle.es48.js

@@ -1,34 +0,0 @@
-import { jsx as s, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as f, useState as u, useImperativeHandle as c } from "react";
-import { AlertDialog as x } from "./bundle.es21.js";
-const g = f((a, l) => {
-  const [i, n] = u([]);
-  c(
-    l,
-    () => ({
-      showAlert: (e) => {
-        n((t) => [...t, e]);
-      }
-    }),
-    []
-  );
-  const d = (e) => {
-    n((t) => {
-      const r = [...t], o = r.findIndex((m) => m.id === e);
-      return o !== -1 && r.splice(o, 1), r;
-    });
-  };
-  return /* @__PURE__ */ s(p, { children: i.map(({ id: e, ...t }) => /* @__PURE__ */ s(
-    x,
-    {
-      defaultOpen: !0,
-      onUnMounted: () => d(e),
-      ...a,
-      ...t
-    },
-    `alert-${e}`
-  )) });
-});
-export {
-  g as Viewport
-};