@companix/uikit 0.1.5 → 0.1.7

package/dist/Button/Button.scss

@@ -12,11 +12,13 @@
 
   &:hover {
     @include mixins.use-styles(button, $appearance, $mode, hovered);
+    z-index: 1;
   }
 
   &[data-active],
   &:active {
     @include mixins.use-styles(button, $appearance, $mode, pressed);
+    z-index: 2;
   }
 
   &[data-loading] {
@@ -28,7 +30,7 @@
   }
 
   &[disabled] {
-    @include mixins.use-styles(button, $appearance, $mode, disabled);
+    @include mixins.use-styles(button, $appearance, $mode, disable);
   }
 }
 

package/dist/Checkbox/Checkbox.scss

@@ -10,13 +10,13 @@
 
   &:not([data-disabled]):not([data-required]):hover {
     .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, hover);
+      @include mixins.use-styles(checkbox, box, hovered);
     }
   }
 
   &:not([data-disabled]):not([data-required]):active {
     .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, active);
+      @include mixins.use-styles(checkbox, box, pressed);
     }
   }
 

package/dist/OptionItem/Option.scss

@@ -64,11 +64,11 @@
     cursor: pointer;
 
     &:hover {
-      @include mixins.use-styles(option, hover);
+      @include mixins.use-styles(option, hovered);
     }
 
     &:active {
-      @include mixins.use-styles(option, active);
+      @include mixins.use-styles(option, pressed);
     }
   }
 

package/dist/Popover/Popover.scss

@@ -49,8 +49,9 @@
       height: 20px;
       margin: 5px;
       width: 20px;
-      box-shadow: 1px 1px 6px rgba(17, 20, 24, 0.2);
       margin-top: -14px;
+
+      @include mixins.use-styles(popover, arrow);
     }
   }
 

package/dist/Radio/Radio.scss

@@ -15,13 +15,13 @@
 
   &:not([data-required]):not([data-disabled]):hover {
     .radio-box[data-state='unchecked'] {
-      @include mixins.use-styles(radio, box, hover);
+      @include mixins.use-styles(radio, box, hovered);
     }
   }
 
   &:not([data-required]):not([data-disabled]):active {
     .radio-box[data-state='unchecked'] {
-      @include mixins.use-styles(radio, box, active);
+      @include mixins.use-styles(radio, box, pressed);
     }
   }
 

package/dist/Radio/index.d.ts

@@ -8,6 +8,7 @@ export interface RadioGroupProps<T> {
     value: T | null;
     disabled?: boolean;
     required?: boolean;
+    className?: string;
     size?: 'sm' | 'md';
 }
 export declare const RadioGroup: <T extends string>(props: RadioGroupProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/Segments/Segments.scss

@@ -42,11 +42,11 @@
 
     &:not([data-selected]) {
       &:hover {
-        @include mixins.use-styles(segment-control, option, hover);
+        @include mixins.use-styles(segment-control, option, hovered);
       }
 
       &:active {
-        @include mixins.use-styles(segment-control, option, active);
+        @include mixins.use-styles(segment-control, option, pressed);
       }
     }
 

package/dist/Select/Select.scss

@@ -73,10 +73,11 @@
     padding: 0px var(--form_space, 0);
     height: 100%;
     outline: none;
-    color: var(--select_clean_color);
+
+    @include mixins.use-styles(select, tools);
 
     &:hover {
-      color: var(--select_clean_hover_color);
+      @include mixins.use-styles(select, tools, hovered);
     }
   }
 
@@ -93,7 +94,7 @@
 
 .expand-icon {
   transition: transform 0.2s;
-  @include mixins.use-styles(select, expand);
+  @include mixins.use-styles(select, tools);
 }
 
 .form {

package/dist/SelectTags/SelectTags.scss

@@ -9,8 +9,8 @@
     padding-left: var(--form_space, 0);
   }
 
-  &-empty {
-    @include mixins.use-styles(tag, empty);
+  &-noneresults {
+    @include mixins.use-styles(tag, noneresults);
   }
 
   &-container {

package/dist/Tabs/Tabs.scss

@@ -49,10 +49,10 @@
   }
 
   &:not([data-disabled]):not([data-state='active']):hover {
-    @include mixins.use-styles(tab, hover);
+    @include mixins.use-styles(tab, hovered);
   }
 
   &[data-state='active'] {
-    @include mixins.use-styles(tab, active);
+    @include mixins.use-styles(tab, pressed);
   }
 }

package/dist/bundle.es21.js

@@ -1,39 +1,40 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import { useId as p } from "react";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import h from "classnames";
+import { useId as N } from "react";
 import * as l from "@radix-ui/react-radio-group";
 import { attr as s } from "@companix/utils-browser";
-const q = (t) => {
-  const { options: m, value: a, onChange: r, disabled: d, required: e, size: n } = t;
+const R = (t) => {
+  const { options: m, value: a, onChange: r, disabled: i, required: e, size: n, className: c } = t;
   return /* @__PURE__ */ o(
     l.Root,
     {
-      className: "radio-group",
-      disabled: d,
+      className: h("radio-group", c),
+      disabled: i,
       "data-required": s(e && !a),
       "data-v": a,
       value: a,
-      onValueChange: (i) => r(i),
-      children: m.map((i, c) => /* @__PURE__ */ o(
-        h,
+      onValueChange: (d) => r(d),
+      children: m.map((d, u) => /* @__PURE__ */ o(
+        f,
         {
-          ...i,
+          ...d,
           size: n,
-          disabled: d,
+          disabled: i,
           required: e && !a
         },
-        `radio-${i.value}-${c}`
+        `radio-${d.value}-${u}`
       ))
     }
   );
-}, h = ({ value: t, label: m, size: a = "md", disabled: r, required: d }) => {
-  const e = p();
-  return /* @__PURE__ */ u(
+}, f = ({ value: t, label: m, size: a = "md", disabled: r, required: i }) => {
+  const e = N();
+  return /* @__PURE__ */ p(
     "span",
     {
       className: "radio",
       "data-disabled": s(r),
       "data-size": a,
-      "data-required": s(d),
+      "data-required": s(i),
       children: [
         /* @__PURE__ */ o(l.Item, { className: "radio-box", value: t, disabled: r, id: e, children: /* @__PURE__ */ o(l.Indicator, { className: "radio-mark" }) }),
         /* @__PURE__ */ o("label", { className: "radio-label", htmlFor: e, "data-disabled": s(r), children: m })
@@ -42,6 +43,6 @@ const q = (t) => {
   );
 };
 export {
-  h as Radio,
-  q as RadioGroup
+  f as Radio,
+  R as RadioGroup
 };

package/dist/bundle.es62.js

@@ -1,18 +1,18 @@
-import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import { useMemo as k, useEffect as C } from "react";
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+import { useMemo as y, useEffect as C } from "react";
 import { Spinner as P } from "./bundle.es7.js";
 import { OptionItem as L } from "./bundle.es16.js";
 import { OptionsList as T } from "./bundle.es18.js";
 import { Icon as R } from "./bundle.es35.js";
 import { faPlus as S } from "@companix/icons-solid";
-const b = () => ({ isLoading: !1, options: [] }), I = (n) => {
-  const { onOptionsLoaded: e, useOptions: s = b, options: o } = n, t = s();
+const b = () => ({ isLoading: !1, options: [] }), I = (e) => {
+  const { onOptionsLoaded: n, useOptions: s = b, options: o } = e, t = s();
   return C(() => {
-    t.options.length > 0 && e?.(t.options);
+    t.options.length > 0 && n?.(t.options);
   }, [t.options]), o ? { options: o, isLoading: !1 } : t;
-}, H = (n) => {
+}, H = (e) => {
   const {
-    isActive: e,
+    isActive: n,
     emptyText: s,
     isLoading: o,
     scrollboxRef: t,
@@ -24,13 +24,13 @@ const b = () => ({ isLoading: !1, options: [] }), I = (n) => {
     filterOptions: r,
     disableFiltering: l,
     close: c,
-    ...a
-  } = n, { emptyText: x, options: m, isLoading: g } = I(a), v = k(() => r && !l ? m.filter(r) : m, [m, r, l]);
+    ...m
+  } = e, { emptyText: x, options: a, isLoading: g } = I(m), v = y(() => r && !l ? a.filter(r) : a, [a, r, l]);
   return g ?? o ? /* @__PURE__ */ i("div", { className: "select-popover-loading", children: /* @__PURE__ */ i(P, { size: 24 }) }) : /* @__PURE__ */ i(
     N,
     {
       options: v,
-      isActive: e,
+      isActive: n,
       emptyText: x ?? s,
       scrollboxRef: t,
       optionsWrapperRef: d,
@@ -41,9 +41,9 @@ const b = () => ({ isLoading: !1, options: [] }), I = (n) => {
       close: c
     }
   );
-}, N = (n) => {
+}, N = (e) => {
   const {
-    isActive: e,
+    isActive: n,
     onOpened: s,
     addOption: o,
     scrollboxRef: t,
@@ -53,9 +53,9 @@ const b = () => ({ isLoading: !1, options: [] }), I = (n) => {
     minimalOptions: O,
     emptyText: u = "Ничего не найдено",
     close: r
-  } = n;
+  } = e;
   C(() => {
-    s?.(p.findIndex(({ value: c }) => e(c)));
+    s?.(p.findIndex(({ value: c }) => n(c)));
   }, []);
   const l = o ? /* @__PURE__ */ i(
     L,
@@ -69,20 +69,20 @@ const b = () => ({ isLoading: !1, options: [] }), I = (n) => {
       }
     }
   ) : void 0;
-  return /* @__PURE__ */ y(T, { scrollboxRef: t, optionsWrapperRef: d, maxHeight: 300, children: [
+  return /* @__PURE__ */ k(T, { scrollboxRef: t, optionsWrapperRef: d, maxHeight: 300, children: [
     (o?.position === void 0 || o?.position === "first") && l,
-    p.length === 0 && !o && /* @__PURE__ */ i("div", { className: "select-tags-empty", children: u }),
-    p.map(({ title: c, value: a, className: x, icon: m, disabled: g, label: v }, h) => /* @__PURE__ */ i(
+    p.length === 0 && !o && /* @__PURE__ */ i("div", { className: "select-tags-noneresults", children: u }),
+    p.map(({ title: c, value: m, className: x, icon: a, disabled: g, label: v }, h) => /* @__PURE__ */ i(
       L,
       {
-        active: e(a),
-        onClick: () => f?.(a),
+        active: n(m),
+        onClick: () => f?.(m),
         minimal: O,
         disabled: g,
         className: x,
         title: c,
         label: v,
-        icon: m
+        icon: a
       },
       `select-option-${h}`
     )),

package/package.json

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