@companix/uikit 0.0.32 → 0.0.34

package/dist/bundle.es8.js

@@ -1,28 +1,87 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useState as p } from "react";
-import { Popover as m } from "./bundle.es7.js";
-const f = ({ children: e, content: t, side: r }) => {
-  const [s, o] = p(!1);
-  return /* @__PURE__ */ n(
-    m,
-    {
-      showArrows: !0,
-      className: "tooltip",
-      open: s,
-      side: r,
-      content: () => t,
-      triggerProps: {
-        onMouseEnter: () => {
-          o(!0);
-        },
-        onMouseLeave: () => {
-          o(!1);
-        }
-      },
-      children: e
+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 {
-  f as Tooltip
+  C as ImitateScroll
 };

package/dist/bundle.es80.js

@@ -0,0 +1,22 @@
+import { __exports as i } from "./bundle.es81.js";
+var c;
+function o() {
+  return c ? i : (c = 1, (function(e) {
+    Object.defineProperty(e, "__esModule", { value: !0 });
+    var n = "fas", r = "chevron-left", f = 320, v = 512, a = [9001], t = "f053", h = "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z";
+    e.definition = {
+      prefix: n,
+      iconName: r,
+      icon: [
+        f,
+        v,
+        a,
+        t,
+        h
+      ]
+    }, e.faChevronLeft = e.definition, e.prefix = n, e.iconName = r, e.width = f, e.height = v, e.ligatures = a, e.unicode = t, e.svgPathData = h, e.aliases = a;
+  })(i), i);
+}
+export {
+  o as __require
+};

package/dist/bundle.es81.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/bundle.es9.js

@@ -1,77 +1,24 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useMemo as F, useImperativeHandle as I } from "react";
-import { Popover as T } from "./bundle.es7.js";
-import { useFroozeClosing as b } from "./bundle.es39.js";
-import { SelectInput as z } from "./bundle.es40.js";
-import { useScrollListController as B } from "./bundle.es41.js";
-import { SelectOptions as D } from "./bundle.es42.js";
-import { mergeRefs as j } from "react-merge-refs";
-const G = (a) => {
-  const {
-    options: n,
-    onChange: i,
-    value: r,
-    minimalOptions: m,
-    matchTarget: f = "width",
-    children: u,
-    disabled: p,
-    scrollRef: d,
-    popoverRef: v,
-    clearButton: s,
-    ...h
-  } = a, t = F(() => {
-    const o = r === null ? -1 : n.findIndex((e) => e.value === r);
-    return {
-      index: o,
-      option: n[o]
-    };
-  }, [n, r]), x = t.option?.value ?? null, { popoverRef: R, froozePopoverPosition: C, handleAnimationEnd: g } = b(), { scrollToElement: c, optionsWrapperRef: O, scrollBoxRef: P } = B();
-  I(d, () => ({
-    scrollTo: (o) => c(o, "top")
-  }));
-  const S = (o, e) => {
-    C(), i(o), e();
-  }, A = (o) => {
-    o.stopPropagation(), s && i(null);
-  }, E = () => {
-    t.index !== -1 && c(t.index, "center");
+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__ */ l(
-    T,
-    {
-      minimal: !0,
-      ref: j([R, v]),
-      sideOffset: 0,
-      matchTarget: f,
-      onAnimationEnd: g,
-      onOpenAutoFocus: (o) => o.preventDefault(),
-      onCloseAutoFocus: (o) => o.preventDefault(),
-      disabled: p,
-      content: ({ close: o }) => /* @__PURE__ */ l(
-        D,
-        {
-          options: n,
-          active: x,
-          scrollboxRef: P,
-          optionsWrapperRef: O,
-          minimalOptions: m,
-          onOpened: E,
-          onSelect: (e) => S(e, o)
-        }
-      ),
-      children: u ?? /* @__PURE__ */ l(
-        z,
-        {
-          ...h,
-          disabled: p,
-          clearButton: s,
-          value: t.option?.title ?? "",
-          onClear: A
-        }
-      )
-    }
-  );
+  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 {
-  G as Select
+  u as Segments
 };

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+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';
@@ -7,6 +11,8 @@ 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';
@@ -58,6 +64,7 @@ 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';

package/dist/index.scss

@@ -1,3 +1,4 @@
+@use './Avatar/Avatar.scss';
 @use './Button/Button.scss';
 @use './Icon/icon.scss';
 @use './Popover/Popover.scss';
@@ -21,6 +22,7 @@
 @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/package.json

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