@companix/uikit 0.0.43 → 0.0.45

package/dist/Select/SelectOptions.d.ts

@@ -1,4 +1,9 @@
 import { Option } from '..';
+export interface SelectAddOption {
+    text: string;
+    closeOnClick?: boolean;
+    onClick: () => void;
+}
 interface SelectPopoverProps<T> {
     scrollboxRef?: React.RefObject<HTMLDivElement>;
     optionsWrapperRef?: React.RefObject<HTMLDivElement>;
@@ -7,12 +12,7 @@ interface SelectPopoverProps<T> {
     active?: T | null;
     onSelect?: (value: T) => void;
     onOpened?: () => void;
-    close: () => void;
-    addOption?: {
-        text: string;
-        closeOnClick?: boolean;
-        onClick: () => void;
-    };
+    addOption?: SelectAddOption;
 }
 export declare const SelectOptions: <T>(props: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Select/index.d.ts

@@ -1,5 +1,6 @@
 import { Option } from '../types';
 import { SelectFormProps } from './SelectInput';
+import { SelectAddOption } from './SelectOptions';
 interface Cleanable<T> {
     clearButton: true;
     onChange: (event: T | null) => void;
@@ -9,20 +10,19 @@ interface UnCleanable<T> {
     onChange: (event: T) => void;
 }
 type DependedValueType<T> = Cleanable<T> | UnCleanable<T>;
-export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & {
-    value: T | null;
-    options: Option<T>[];
-    children?: React.ReactNode;
+export interface SelectParams {
     minimalOptions?: boolean;
     matchTarget?: 'width' | 'min-width';
     popoverRef?: React.Ref<HTMLDivElement>;
     scrollRef?: React.Ref<{
         scrollTo: (index: number) => void;
     }>;
-    addOption?: {
-        text: string;
-        onClick: () => void;
-    };
+    addOption?: SelectAddOption;
+}
+export type SelectProps<T> = Omit<SelectFormProps, 'value' | 'onChange' | 'closeButton'> & DependedValueType<T> & SelectParams & {
+    value: T | null;
+    options: Option<T>[];
+    children?: React.ReactNode;
 };
 export declare const Select: <T>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Spinner/Spinner.scss

@@ -1,14 +1,19 @@
+@use '../mixins.scss';
+
 @keyframes spinner-border {
   to {
     transform: rotate(360deg);
   }
 }
 
-.spinner-border {
+.spinner {
   display: inline-block;
   border-style: solid;
   border-color: currentColor;
+  border-width: 2px;
   border-right-color: transparent;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
+
+  @include mixins.use-styles(spinner);
 }

package/dist/Spinner/index.d.ts

@@ -1,7 +1,5 @@
 export interface SpinnerProps {
     size?: number;
-    width?: number;
-    color?: string;
     className?: string;
 }
-export declare const Spinner: ({ size, className, width, color }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Spinner: ({ size, className }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bundle.es12.js

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

package/dist/bundle.es4.js

@@ -1,43 +1,43 @@
-import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
-import j from "classnames";
-import { Spinner as k } from "./bundle.es6.js";
-import { forwardRef as w } from "react";
+import { jsx as e, jsxs as x, Fragment as j } from "react/jsx-runtime";
+import k from "classnames";
+import { Spinner as z } from "./bundle.es6.js";
+import { forwardRef as N } from "react";
 import { attr as r } from "@companix/utils-browser";
-const F = w(
+const F = N(
   ({
     children: d,
     fill: l,
-    text: i,
+    text: m,
     active: c,
     mode: f = "default",
     appearance: s = "neutral",
     size: p = "md",
     align: u,
-    icon: m,
+    icon: n,
     loading: t,
     className: b,
-    iconRight: n,
-    Component: o = "button",
+    iconRight: o,
+    Component: i = "button",
     ...a
   }, v) => /* @__PURE__ */ e(
-    o,
+    i,
     {
       ref: v,
-      className: j("button", b),
+      className: k("button", b),
       "data-size": p,
       "data-loading": r(t),
-      "data-align": t ? "center" : u ?? (m && n ? "left" : "center"),
+      "data-align": t ? "center" : u ?? (n && o ? "left" : "center"),
       "data-appearance": s,
       "data-mode": f,
       "data-fill": r(l),
       "data-active": r(c),
-      type: o === "button" ? "button" : void 0,
+      type: i === "button" ? "button" : void 0,
       ...a,
       onClick: t ?? a.disabled ? void 0 : a.onClick,
-      children: t ? /* @__PURE__ */ e(k, { size: 14, width: 2 }) : /* @__PURE__ */ x(h, { children: [
-        m,
-        (d ?? i) && /* @__PURE__ */ e("span", { className: "button-text", children: i ?? d }),
-        n
+      children: t ? /* @__PURE__ */ e(z, { size: 14 }) : /* @__PURE__ */ x(j, { children: [
+        n,
+        (d ?? m) && /* @__PURE__ */ e("span", { className: "button-text", children: m ?? d }),
+        o
       ] })
     }
   )

package/dist/bundle.es48.js

@@ -1,47 +1,44 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useEffect as u } from "react";
-import { OptionItem as i } from "./bundle.es14.js";
-import { OptionsList as x } from "./bundle.es16.js";
-import { Icon as k } from "./bundle.es33.js";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { useEffect as x } from "react";
+import { OptionItem as e } from "./bundle.es14.js";
+import { OptionsList as O } from "./bundle.es16.js";
+import { Icon as u } from "./bundle.es33.js";
 import { faPlus as v } from "@companix/icons-solid";
-const b = (n) => {
+const S = (n) => {
   const {
-    active: c,
-    onOpened: l,
+    active: m,
+    onOpened: r,
     addOption: o,
-    scrollboxRef: m,
-    optionsWrapperRef: r,
+    scrollboxRef: c,
+    optionsWrapperRef: p,
     options: s,
-    onSelect: p,
-    close: a,
-    minimalOptions: f
+    onSelect: l,
+    minimalOptions: a
   } = n;
-  return u(() => {
-    l?.();
-  }, []), /* @__PURE__ */ d(x, { scrollboxRef: m, optionsWrapperRef: r, maxHeight: 300, children: [
-    o && /* @__PURE__ */ e(
-      i,
+  return x(() => {
+    r?.();
+  }, []), /* @__PURE__ */ d(O, { scrollboxRef: c, optionsWrapperRef: p, maxHeight: 300, children: [
+    o && /* @__PURE__ */ i(
+      e,
       {
         className: "select-add-option",
-        icon: /* @__PURE__ */ e(k, { icon: v }),
+        icon: /* @__PURE__ */ i(u, { icon: v }),
         title: o.text,
-        onClick: () => {
-          (o.closeOnClick ?? !0) && a(), o.onClick();
-        }
+        onClick: o.onClick
       }
     ),
-    s.map((t, O) => /* @__PURE__ */ e(
-      i,
+    s.map((t, f) => /* @__PURE__ */ i(
+      e,
       {
-        active: c === t.value,
-        onClick: () => p?.(t.value),
-        minimal: f,
+        active: m === t.value,
+        onClick: () => l?.(t.value),
+        minimal: a,
         ...t
       },
-      `select-option-${O}`
+      `select-option-${f}`
     ))
   ] });
 };
 export {
-  b as SelectOptions
+  S as SelectOptions
 };

package/dist/bundle.es6.js

@@ -1,13 +1,13 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import n from "classnames";
-const d = ({ size: r = 40, className: t, width: e = 2, color: i = "inherit" }) => /* @__PURE__ */ o(
+const s = ({ size: r = 40, className: t }) => /* @__PURE__ */ e(
   "div",
   {
-    style: { width: `${r}px`, height: `${r}px`, color: i, borderWidth: `${e}px` },
-    className: n("spinner-border", t),
+    style: { width: `${r}px`, height: `${r}px` },
+    className: n("spinner", t),
     role: "status"
   }
 );
 export {
-  d as Spinner
+  s as Spinner
 };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export type { PopoverProps } from './Popover';
 export { Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { Select } from './Select';
-export type { SelectProps } from './Select';
+export type { SelectProps, SelectParams } from './Select';
 export { Input } from './Input/Input';
 export type { InputProps } from './Input/Input';
 export { OptionItem } from './OptionItem/OptionItem';

package/package.json

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