@companix/uikit 0.0.3 → 0.0.4

package/dist/Tabs/Tabs.scss

@@ -0,0 +1,58 @@
+@use '../mixins.scss';
+
+.tabs {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 0 auto;
+  position: relative;
+
+  @include mixins.use-styles(tab, container);
+}
+
+.tab-indicator-container {
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+
+  @include mixins.use-styles(tab, indicator, container);
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  @include mixins.use-styles(tab, indicator);
+}
+
+.tab {
+  outline: none;
+  font-family: inherit;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  background-color: transparent;
+  user-select: none;
+  position: relative;
+  cursor: pointer;
+  font-family: inherit;
+
+  @include mixins.use-styles(tab);
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    @include mixins.use-styles(tab, disabled);
+  }
+
+  &:not([data-disabled]):not([data-state='active']):hover {
+    @include mixins.use-styles(tab, hover);
+  }
+
+  &[data-state='active'] {
+    @include mixins.use-styles(tab, active);
+  }
+}

package/dist/TextArea/TextArea.scss

@@ -0,0 +1,34 @@
+.form-textarea {
+  display: flex;
+
+  textarea {
+    padding: var(--form_space-y, 0px) var(--form_space, 0px);
+    border-radius: var(--form_border-radius);
+    border-style: solid;
+    border-width: 2px;
+    border-top-width: 0;
+    border-left-width: 0;
+    border-color: transparent;
+    min-height: max-content;
+    resize: vertical;
+    display: block;
+
+    ::-webkit-search-cancel-button {
+      display: none;
+    }
+
+    ::-webkit-search-decoration {
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    ::-ms-clear {
+      display: none;
+    }
+
+    &[data-grow] {
+      resize: none;
+      border: none;
+    }
+  }
+}

package/dist/Toaster/Toaster.scss

@@ -0,0 +1,151 @@
+@use '../mixins.scss';
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    @include mixins.use-styles(toaster, $appearance);
+
+    .toaster {
+      &-icon {
+        @include mixins.use-styles(toaster, $appearance, icon);
+      }
+
+      &-title {
+        @include mixins.use-styles(toaster, $appearance, title);
+      }
+
+      &-description {
+        @include mixins.use-styles(toaster, $appearance, description);
+      }
+    }
+  }
+}
+
+.toaster {
+  pointer-events: all;
+  position: absolute;
+  outline: none;
+  opacity: 1;
+  transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
+  transform: var(--y);
+  display: flex;
+  align-items: center;
+
+  @include mixins.use-styles(toaster);
+
+  // appearance
+
+  @include use-appearance(primary);
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+  @include use-appearance(warning);
+
+  &[data-expanded]:not([data-mounted]) {
+    opacity: 0;
+    --y: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset, 0)));
+  }
+
+  &[data-expanded][data-mounted] {
+    --y: translateY(calc(var(--lift) * var(--offset)));
+  }
+
+  &[data-state='closed'] {
+    animation: toastOut 400ms, toastFadeOut 400ms;
+  }
+
+  &-viewport {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    left: var(--toaster_viewport_offset);
+    right: var(--toaster_viewport_offset);
+    z-index: 40;
+    outline: none;
+    pointer-events: none;
+    gap: var(--toasters-gap, 0);
+
+    &[data-side='top'] {
+      top: var(--toaster_viewport_offset);
+
+      .toaster {
+        --lift: 1;
+        top: 0;
+      }
+    }
+
+    &[data-side='bottom'] {
+      bottom: var(--toaster_viewport_offset);
+      top: auto;
+
+      .toaster {
+        --lift: -1;
+        bottom: 0;
+      }
+    }
+
+    &[data-align='center'] {
+      align-items: center;
+    }
+
+    &[data-align='right'] {
+      align-items: flex-end;
+    }
+
+    &[data-align='left'] {
+      align-items: flex-start;
+    }
+  }
+
+  &-content {
+    display: flex;
+    flex-direction: column;
+
+    @include mixins.use-styles(toaster, content);
+  }
+
+  &-title {
+    @include mixins.use-styles(toaster, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(toaster, description);
+  }
+
+  &-close {
+    cursor: pointer;
+    top: var(--toaster_close_space, 0);
+    right: var(--toaster_close_space, 0);
+    position: absolute;
+    transition: color 0.2s;
+
+    @include mixins.use-styles(toaster, close);
+
+    &:hover {
+      @include mixins.use-styles(toaster, close, hover);
+    }
+
+    svg {
+      @include mixins.use-size(toaster, close, size);
+    }
+  }
+
+  &-icon {
+    @include mixins.use-styles(toaster, icon);
+
+    svg {
+      @include mixins.use-size(toaster, icon, size);
+    }
+  }
+}
+
+@keyframes toastOut {
+  to {
+    transform: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset)));
+  }
+}
+
+@keyframes toastFadeOut {
+  to {
+    opacity: 0;
+  }
+}

package/dist/Tooltip/Tooltip.scss

@@ -0,0 +1,28 @@
+@use '../mixins.scss';
+
+.tooltip .popover {
+  &-content {
+    @include mixins.use-styles(tooltip);
+    max-height: none;
+  }
+
+  &-arrow {
+    &-fill {
+      fill: mixins.get-var-name(tooltip, background);
+    }
+  }
+}
+
+.tooltip {
+  &[data-appearance='default'] {
+    &[data-state='open'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(tooltip, in);
+    }
+
+    &[data-state='closed'] {
+      transform-origin: var(--radix-popover-content-transform-origin);
+      @include mixins.use-styles(tooltip, out);
+    }
+  }
+}

package/dist/bundle.es.js

@@ -1,61 +1,58 @@
-/* empty css           */
-import { Button as t } from "./bundle.es3.js";
-import { Spinner as m } from "./bundle.es4.js";
-import { Scrollable as f } from "./bundle.es5.js";
-import { ImitateScroll as l } from "./bundle.es6.js";
-import { Popover as n } from "./bundle.es7.js";
-import { Tooltip as u } from "./bundle.es8.js";
-import { StepperInput as s } from "./bundle.es9.js";
-import { Select as T } from "./bundle.es10.js";
-import { Form as A } from "./bundle.es11.js";
-import { OptionItem as I } from "./bundle.es12.js";
-import { NumberInput as w } from "./bundle.es13.js";
-import { OptionsList as L } from "./bundle.es14.js";
-import { ButtonGroup as h } from "./bundle.es15.js";
-import { Checkbox as v } from "./bundle.es16.js";
-import { Switch as F } from "./bundle.es17.js";
-import { Radio as y } from "./bundle.es18.js";
-import { Drawer as N } from "./bundle.es19.js";
-import { Dialog as j } from "./bundle.es20.js";
-import { AlertDialog as z } from "./bundle.es21.js";
-import { LoadButton as H } from "./bundle.es22.js";
-import { Tabs as K } from "./bundle.es23.js";
-import { Countdown as Q } from "./bundle.es24.js";
-import { TextArea as V } from "./bundle.es25.js";
-import { SelectTags as X } from "./bundle.es26.js";
-import { DatePicker as Z } from "./bundle.es27.js";
-import { FileOverlay as $ } from "./bundle.es28.js";
-import { useLocalStorage as ro } from "./bundle.es29.js";
-import { createAlertAgent as to } from "./bundle.es30.js";
-import { createToaster as mo } from "./bundle.es31.js";
+import { Button as e } from "./bundle.es2.js";
+import { Spinner as p } from "./bundle.es3.js";
+import { Scrollable as x } from "./bundle.es4.js";
+import { ImitateScroll as a } from "./bundle.es5.js";
+import { Popover as i } from "./bundle.es6.js";
+import { Tooltip as c } from "./bundle.es7.js";
+import { Select as S } from "./bundle.es8.js";
+import { Form as g } from "./bundle.es9.js";
+import { OptionItem as b } from "./bundle.es10.js";
+import { NumberInput as D } from "./bundle.es11.js";
+import { OptionsList as w } from "./bundle.es12.js";
+import { ButtonGroup as I } from "./bundle.es13.js";
+import { Checkbox as O } from "./bundle.es14.js";
+import { Switch as k } from "./bundle.es15.js";
+import { Radio as C } from "./bundle.es16.js";
+import { Drawer as P } from "./bundle.es17.js";
+import { Dialog as G } from "./bundle.es18.js";
+import { AlertDialog as R } from "./bundle.es19.js";
+import { LoadButton as q } from "./bundle.es20.js";
+import { Tabs as E } from "./bundle.es21.js";
+import { Countdown as J } from "./bundle.es22.js";
+import { TextArea as M } from "./bundle.es23.js";
+import { SelectTags as U } from "./bundle.es24.js";
+import { DatePicker as W } from "./bundle.es25.js";
+import { FileOverlay as Y } from "./bundle.es26.js";
+import { useLocalStorage as _ } from "./bundle.es27.js";
+import { createAlertAgent as oo } from "./bundle.es28.js";
+import { createToaster as eo } from "./bundle.es29.js";
 export {
-  z as AlertDialog,
-  t as Button,
-  h as ButtonGroup,
-  v as Checkbox,
-  Q as Countdown,
-  Z as DatePicker,
-  j as Dialog,
-  N as Drawer,
-  $ as FileOverlay,
-  A as Form,
-  l as ImitateScroll,
-  H as LoadButton,
-  w as NumberInput,
-  I as OptionItem,
-  L as OptionsList,
-  n as Popover,
-  y as Radio,
-  f as Scrollable,
-  T as Select,
-  X as SelectTags,
-  m as Spinner,
-  s as StepperInput,
-  F as Switch,
-  K as Tabs,
-  V as TextArea,
-  u as Tooltip,
-  to as createAlertAgent,
-  mo as createToaster,
-  ro as useLocalStorage
+  R as AlertDialog,
+  e as Button,
+  I as ButtonGroup,
+  O as Checkbox,
+  J as Countdown,
+  W as DatePicker,
+  G as Dialog,
+  P as Drawer,
+  Y as FileOverlay,
+  g as Form,
+  a as ImitateScroll,
+  q as LoadButton,
+  D as NumberInput,
+  b as OptionItem,
+  w as OptionsList,
+  i as Popover,
+  C as Radio,
+  x as Scrollable,
+  S as Select,
+  U as SelectTags,
+  p as Spinner,
+  k as Switch,
+  E as Tabs,
+  M as TextArea,
+  c as Tooltip,
+  oo as createAlertAgent,
+  eo as createToaster,
+  _ as useLocalStorage
 };

package/dist/bundle.es10.js

@@ -1,87 +1,38 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as E, useEffect as I } from "react";
-import { OptionsList as b } from "./bundle.es14.js";
-import { OptionItem as B } from "./bundle.es12.js";
-import { Popover as F } from "./bundle.es7.js";
-import { useFroozeClosing as z } from "./bundle.es38.js";
-import { SelectInput as D } from "./bundle.es39.js";
-import { useScrollListController as L } from "./bundle.es40.js";
-const y = (c) => {
-  const {
-    options: e,
-    onChange: i,
-    minimalOptions: a,
-    clearButton: m,
-    clearButtonIcon: u,
-    matchTarget: f = "width",
-    value: l,
-    children: n,
-    disabled: s,
-    ...d
-  } = c, p = E(() => {
-    const o = e.findIndex((t) => t.value === l);
-    return {
-      index: o,
-      option: e[o]
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import N from "classnames";
+import { Icon as v } from "./bundle.es34.js";
+import { attr as t } from "@companix/utils-browser";
+import { forwardRef as k } from "react";
+import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
+const O = k(
+  ({ title: d, icon: n, active: c, label: e, disabled: r, minimal: a, onClick: l, className: m, ...s }, p) => {
+    const f = (h) => {
+      r || l?.(h);
     };
-  }, [e, l]), v = p.option?.value ?? null, { popoverRef: h, froozePopoverPosition: x, handleAnimationEnd: O } = z(), { scrollToElement: C, optionsWrapperRef: g, scrollBoxRef: P } = L(), R = (o, t) => {
-    x(), i(o), t();
-  }, S = (o) => {
-    o.stopPropagation(), i(null);
-  }, A = () => {
-    p.index !== -1 && C(p.index, !0);
-  };
-  return /* @__PURE__ */ r(
-    F,
-    {
-      minimal: !0,
-      ref: h,
-      sideOffset: 0,
-      matchTarget: f,
-      onAnimationEnd: O,
-      onOpenAutoFocus: (o) => o.preventDefault(),
-      onCloseAutoFocus: (o) => o.preventDefault(),
-      disabled: s,
-      content: ({ close: o }) => /* @__PURE__ */ r(
-        T,
-        {
-          options: e,
-          active: v,
-          scrollboxRef: P,
-          optionsWrapperRef: g,
-          minimalOptions: a,
-          onOpened: A,
-          onSelect: (t) => R(t, o)
-        }
-      ),
-      children: n ?? /* @__PURE__ */ r(
-        D,
-        {
-          ...d,
-          disabled: s,
-          value: p.option?.title ?? "",
-          onClear: S,
-          clearButton: m,
-          clearButtonIcon: u
-        }
-      )
-    }
-  );
-}, T = (c) => {
-  const { active: e, onOpened: i, scrollboxRef: a, optionsWrapperRef: m, options: u, onSelect: f, minimalOptions: l } = c;
-  return I(() => {
-    i?.();
-  }, []), /* @__PURE__ */ r(b, { scrollboxRef: a, optionsWrapperRef: m, maxHeight: 300, children: u.map((n, s) => /* @__PURE__ */ r(
-    B,
-    {
-      active: e === n.value,
-      onClick: () => f?.(n.value),
-      minimal: l,
-      ...n
-    },
-    `option-item-${n.value}-${s}`
-  )) });
-};
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: p,
+        ...s,
+        className: N("option", m),
+        "data-selected": t(c),
+        "data-disabled": t(r),
+        "data-minimal": t(a),
+        onClick: f,
+        children: [
+          /* @__PURE__ */ i("div", { className: "option-content", children: [
+            n && /* @__PURE__ */ o("div", { className: "option-icon", children: n }),
+            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
+              /* @__PURE__ */ o("div", { className: "option-title", children: d }),
+              e && /* @__PURE__ */ o("div", { className: "option-label", children: e })
+            ] })
+          ] }),
+          c && !a && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x }) })
+        ]
+      }
+    );
+  }
+);
 export {
-  y as Select
+  O as OptionItem
 };

package/dist/bundle.es11.js

@@ -1,75 +1,33 @@
-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.es41.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}`] = "");
+import { jsx as f } from "react/jsx-runtime";
+import { useState as m, useRef as p } from "react";
+import { Form as l } from "./bundle.es9.js";
+const N = ({ value: r, onChange: u, ...e }) => {
+  const [, t] = m([]), n = p(o(r));
+  return +n.current !== r && (n.current = o(r)), /* @__PURE__ */ f(
+    l,
+    {
+      ...e,
+      value: n.current,
+      onChange: (i) => {
+        const s = i.currentTarget.value.trim();
+        if (s === "")
+          return n.current = "", u(null);
+        if (!(s.startsWith(".") || s.replace(".", "").split("").some((c) => isNaN(parseInt(c))))) {
+          if (n.current = a(s.split("")), +n.current === r)
+            return t([]);
+          u(+n.current);
+        }
       }
-    }, []);
-    M(() => {
-      h("Left"), h("Right");
-    }, [u, e]);
-    const w = g((t) => {
-      x?.(t), $?.(t.target.value, t.target);
-    }, []);
-    return /* @__PURE__ */ z(
-      "div",
-      {
-        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 })
-        ]
-      }
-    );
-  }
-), 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 }));
+    }
+  );
+}, o = (r) => r === null ? "" : r.toString(), a = (r) => {
+  const u = [...r], e = [...r];
+  if (e.every((t) => t === "0"))
+    return "0";
+  for (let t = 0; t < e.length && e[t] === "0"; t++)
+    e[t] === "0" && e[t + 1] !== "." && u.shift();
+  return u.join("");
+};
 export {
-  Q as Form
+  N as NumberInput
 };

package/dist/bundle.es12.js

@@ -1,38 +1,18 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import N from "classnames";
-import { Icon as v } from "./bundle.es37.js";
-import { attr as t } from "@companix/utils-browser";
-import { forwardRef as k } from "react";
-import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
-const O = k(
-  ({ title: d, icon: n, active: c, label: e, disabled: r, minimal: a, onClick: l, className: m, ...s }, p) => {
-    const f = (h) => {
-      r || l?.(h);
-    };
-    return /* @__PURE__ */ i(
-      "div",
-      {
-        ref: p,
-        ...s,
-        className: N("option", m),
-        "data-selected": t(c),
-        "data-disabled": t(r),
-        "data-minimal": t(a),
-        onClick: f,
-        children: [
-          /* @__PURE__ */ i("div", { className: "option-content", children: [
-            n && /* @__PURE__ */ o("div", { className: "option-icon", children: n }),
-            /* @__PURE__ */ i("div", { className: "option-content-layout", children: [
-              /* @__PURE__ */ o("div", { className: "option-title", children: d }),
-              e && /* @__PURE__ */ o("div", { className: "option-label", children: e })
-            ] })
-          ] }),
-          c && !a && /* @__PURE__ */ o("div", { className: "option-check", children: /* @__PURE__ */ o(v, { icon: x }) })
-        ]
-      }
-    );
+import { jsx as r } from "react/jsx-runtime";
+import { Scrollable as n } from "./bundle.es4.js";
+const s = ({ children: o, maxHeight: t, scrollboxRef: i, optionsWrapperRef: e }) => /* @__PURE__ */ r(
+  n,
+  {
+    ref: i,
+    implementation: "inner",
+    padding: 10,
+    thumbPadding: 3,
+    thumbColor: "#0000002b",
+    maxHeight: t,
+    scrollY: !0,
+    children: /* @__PURE__ */ r("div", { className: "option-list", ref: e, children: o })
   }
 );
 export {
-  O as OptionItem
+  s as OptionsList
 };