@arthurzakharov/ui-kit 1.0.59 → 1.0.61

package/dist/assets/button-text-B5BDeF9b.css

@@ -0,0 +1 @@
+._ButtonText_1g53u_1{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--rm-ui-padding-xs);border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xxs);color:var(--rm-ui-color-text-primary)}._ButtonTextSizeSm_1g53u_13 ._ButtonTextIcon_1g53u_13{width:20px;height:20px}._ButtonTextSizeMd_1g53u_18 ._ButtonTextIcon_1g53u_13,._ButtonTextSizeLg_1g53u_19 ._ButtonTextIcon_1g53u_13{width:24px;height:24px}._ButtonTextSizeSm_1g53u_13 ._ButtonTextContent_1g53u_24{font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._ButtonTextSizeMd_1g53u_18 ._ButtonTextContent_1g53u_24{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._ButtonTextSizeLg_1g53u_19 ._ButtonTextContent_1g53u_24{font-size:var(--rm-ui-font-size-hl4);line-height:var(--rm-ui-line-height-hl4)}._ButtonTextContent_1g53u_24{font-weight:var(--rm-ui-font-weight-medium);text-decoration:underline}

package/dist/assets/fade-scale-B23oZuuD.css

@@ -0,0 +1 @@
+._Flex_1t96l_1{display:flex}

package/dist/components/animation/fade-scale/fade-scale.component.d.ts

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 export interface FadeScaleProps extends PropsWithChildren {
     name: string;
     condition: boolean;
+    flex?: boolean;
     className?: string;
     type?: AnimationGeneratorType;
     ease?: Easing | Easing[];

package/dist/components/animation/fade-scale/fade-scale.component.js

@@ -1,34 +1,40 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as d, useEffect as p } from "react";
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as p, useEffect as x } from "react";
+import F from "clsx";
 import { m as y } from "../../../proxy-BfgGIllg.js";
-const R = (t) => {
+import '../../../assets/fade-scale-B23oZuuD.css';const _ = "_Flex_1t96l_1", h = {
+  Flex: _
+}, j = (t) => {
   const {
     children: a,
     name: n,
-    condition: r,
-    ease: i = "easeInOut",
-    type: o = "tween",
-    className: s = "",
-    duration: c = 0.125,
+    condition: s,
+    flex: o = !1,
+    ease: r = "easeInOut",
+    type: c = "tween",
+    className: i = "",
+    duration: l = 0.125,
     delay: m = 0,
-    animateOnStart: l = !1
-  } = t, e = d(l);
-  if (p(() => {
+    animateOnStart: f = !1
+  } = t, e = p(f);
+  if (x(() => {
     e.current = !0;
-  }, []), !r) return null;
+  }, []), !s) return null;
   const u = e.current ? { opacity: 0, scale: 0.95 } : !1;
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ d(
     y.div,
     {
       initial: u,
       animate: { opacity: 1, scale: 1 },
-      transition: { ease: i, duration: c, delay: m, type: o },
-      className: s,
+      transition: { ease: r, duration: l, delay: m, type: c },
+      className: F(i, {
+        [h.Flex]: o
+      }),
       children: a
     },
     n
   );
 };
 export {
-  R as FadeScale
+  j as FadeScale
 };

package/dist/components/animation/fade-slide/fade-slide.component.d.ts

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 export interface FadeSlideProps extends PropsWithChildren {
     name: string;
     condition: boolean;
+    flex?: boolean;
     direction?: 'ltr' | 'rtl';
     className?: string;
     type?: AnimationGeneratorType;

package/dist/components/animation/fade-slide/fade-slide.component.js

@@ -1,35 +1,41 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useRef as p, useEffect as y } from "react";
+import F from "clsx";
 import { m as h } from "../../../proxy-BfgGIllg.js";
-const O = (n) => {
+import '../../../assets/fade-scale-B23oZuuD.css';const v = "_Flex_1t96l_1", _ = {
+  Flex: v
+}, S = (n) => {
   const {
     children: r,
     name: i,
     condition: o,
-    direction: a = "ltr",
+    flex: a = !1,
+    direction: l = "ltr",
     ease: s = "easeInOut",
     type: c = "tween",
-    className: d = "",
-    duration: l = 0.125,
-    delay: m = 0,
-    animateOnStart: f = !1
-  } = n, e = p(f);
+    className: m = "",
+    duration: d = 0.125,
+    delay: f = 0,
+    animateOnStart: u = !1
+  } = n, e = p(u);
   if (y(() => {
     e.current = !0;
   }, []), !o) return null;
-  const u = e.current ? { x: a === "ltr" ? "-100%" : "100%", opacity: 0 } : !1;
+  const x = e.current ? { x: l === "ltr" ? "-100%" : "100%", opacity: 0 } : !1;
   return /* @__PURE__ */ t("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ t(
     h.div,
     {
-      initial: u,
+      initial: x,
       animate: { x: 0, opacity: 1 },
-      transition: { ease: s, duration: l, delay: m, type: c },
-      className: d,
+      transition: { ease: s, duration: d, delay: f, type: c },
+      className: F(m, {
+        [_.Flex]: a
+      }),
       children: r
     },
     i
   ) });
 };
 export {
-  O as FadeSlide
+  S as FadeSlide
 };

package/dist/components/control/components/button/button.component.js

@@ -3,16 +3,16 @@ import i from "clsx";
 import { Animation as S } from "../../../animation/animation.component.js";
 import { Loader as p } from "../../../loader/loader.component.js";
 import { containsHtml as y } from "../../utils/utils.js";
-import '../../../../assets/button-4MJZ7yPE.css';const g = "_Button_1utzs_1", h = "_ButtonSizeSm_1utzs_11", W = "_ButtonSizeLg_1utzs_16", I = "_ButtonColorTertiary_1utzs_16", T = "_ButtonText_1utzs_20", x = "_ButtonSizeMd_1utzs_26", F = "_ButtonColorPrimary_1utzs_54", N = "_ButtonColorSecondary_1utzs_62", b = "_ButtonLoading_1utzs_79", A = "_ButtonFullWidth_1utzs_87", M = "_ButtonInfo_1utzs_95", v = "_ButtonContent_1utzs_102", P = "_ButtonContentLoading_1utzs_106", k = "_ButtonContentIdle_1utzs_110", j = "_ButtonLoaderWrap_1utzs_114", D = "_ButtonLoaderAnimationWrap_1utzs_121", t = {
+import '../../../../assets/button-4MJZ7yPE.css';const g = "_Button_1utzs_1", h = "_ButtonSizeSm_1utzs_11", W = "_ButtonSizeLg_1utzs_16", I = "_ButtonColorTertiary_1utzs_16", T = "_ButtonText_1utzs_20", x = "_ButtonSizeMd_1utzs_26", b = "_ButtonColorPrimary_1utzs_54", F = "_ButtonColorSecondary_1utzs_62", N = "_ButtonLoading_1utzs_79", A = "_ButtonFullWidth_1utzs_87", M = "_ButtonInfo_1utzs_95", v = "_ButtonContent_1utzs_102", P = "_ButtonContentLoading_1utzs_106", k = "_ButtonContentIdle_1utzs_110", j = "_ButtonLoaderWrap_1utzs_114", D = "_ButtonLoaderAnimationWrap_1utzs_121", t = {
   Button: g,
   ButtonSizeSm: h,
   ButtonSizeLg: W,
   ButtonColorTertiary: I,
   ButtonText: T,
   ButtonSizeMd: x,
-  ButtonColorPrimary: F,
-  ButtonColorSecondary: N,
-  ButtonLoading: b,
+  ButtonColorPrimary: b,
+  ButtonColorSecondary: F,
+  ButtonLoading: N,
   ButtonFullWidth: A,
   ButtonInfo: M,
   ButtonContent: v,
@@ -25,7 +25,7 @@ import '../../../../assets/button-4MJZ7yPE.css';const g = "_Button_1utzs_1", h =
     children: B,
     color: e,
     size: r,
-    type: d,
+    type: d = "button",
     disabled: c = !1,
     info: n = "",
     fullWidth: _ = !1,

package/dist/components/control/components/button-text/button-text.component.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactElement } from 'react';
+export interface ButtonTextProps extends PropsWithChildren {
+    size: 'sm' | 'md' | 'lg';
+    type: 'submit' | 'reset' | 'button';
+    icon?: ReactElement<SVGElement>;
+    disabled?: boolean;
+    preventDefault?: boolean;
+    blurAfterCLick?: boolean;
+    onClick?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare const ButtonText: (props: ButtonTextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/components/button-text/button-text.component.js

@@ -0,0 +1,50 @@
+import { jsxs as a, jsx as m } from "react/jsx-runtime";
+import _ from "clsx";
+import { cloneElement as S, isValidElement as z } from "react";
+import '../../../../assets/button-text-B5BDeF9b.css';const g = "_ButtonText_1g53u_1", d = "_ButtonTextSizeSm_1g53u_13", f = "_ButtonTextIcon_1g53u_13", p = "_ButtonTextSizeMd_1g53u_18", C = "_ButtonTextSizeLg_1g53u_19", b = "_ButtonTextContent_1g53u_24", t = {
+  ButtonText: g,
+  ButtonTextSizeSm: d,
+  ButtonTextIcon: f,
+  ButtonTextSizeMd: p,
+  ButtonTextSizeLg: C,
+  ButtonTextContent: b
+}, k = (u) => {
+  const {
+    children: l,
+    size: n = "md",
+    type: c = "button",
+    icon: e = null,
+    disabled: s = !1,
+    preventDefault: x = !1,
+    blurAfterCLick: i = !1,
+    onClick: B,
+    onFocus: T,
+    onBlur: r
+  } = u;
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: c,
+      disabled: s,
+      className: _(t.ButtonText, {
+        [t.ButtonTextSizeSm]: n === "sm",
+        [t.ButtonTextSizeMd]: n === "md",
+        [t.ButtonTextSizeLg]: n === "lg"
+      }),
+      onClick: (o) => {
+        x && o.preventDefault(), i && o.currentTarget.blur(), B?.call(null);
+      },
+      onFocus: () => T?.call(null),
+      onBlur: () => r?.call(null),
+      children: [
+        z(e) ? S(e, {
+          className: t.ButtonTextIcon
+        }) : e,
+        /* @__PURE__ */ m("span", { className: t.ButtonTextContent, children: l })
+      ]
+    }
+  );
+};
+export {
+  k as ButtonText
+};

package/dist/components/control/control.component.d.ts

@@ -1,6 +1,7 @@
 export declare const Control: {
     Box: import('react').ForwardRefExoticComponent<import('./components/box/box.component').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
     Button: (props: import('./components/button/button.component').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    ButtonText: (props: import('./components/button-text/button-text.component').ButtonTextProps) => import("react/jsx-runtime").JSX.Element;
     CardImage: (props: import('./components/card-image/card-image.component').CardImageProps) => import("react/jsx-runtime").JSX.Element;
     CardText: (props: import('./components/card-text/card-text.component').CardTextProps) => import("react/jsx-runtime").JSX.Element;
     Checkbox: (props: import('./components/checkbox/checkbox.component').CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/control/control.component.js

@@ -1,35 +1,37 @@
 import { Box as o } from "./components/box/box.component.js";
 import { Button as r } from "./components/button/button.component.js";
-import { CardImage as m } from "./components/card-image/card-image.component.js";
-import { CardText as t } from "./components/card-text/card-text.component.js";
-import { Checkbox as i } from "./components/checkbox/checkbox.component.js";
-import { Choice as p } from "./components/choice/choice.component.js";
-import { Dropdown as f } from "./components/dropdown/dropdown.component.js";
-import { HiddenInput as e } from "./components/hidden-input/hidden-input.component.js";
-import { Input as a } from "./components/input/input.component.js";
-import { Label as d } from "./components/label/label.component.js";
-import { Radio as n } from "./components/radio/radio.component.js";
-import { RadioLabel as x } from "./components/radio-label/radio-label.component.js";
-import { RadioText as C } from "./components/radio-text/radio-text.component.js";
-import { Text as T } from "./components/text/text.component.js";
+import { ButtonText as m } from "./components/button-text/button-text.component.js";
+import { CardImage as t } from "./components/card-image/card-image.component.js";
+import { CardText as i } from "./components/card-text/card-text.component.js";
+import { Checkbox as p } from "./components/checkbox/checkbox.component.js";
+import { Choice as f } from "./components/choice/choice.component.js";
+import { Dropdown as e } from "./components/dropdown/dropdown.component.js";
+import { HiddenInput as a } from "./components/hidden-input/hidden-input.component.js";
+import { Input as d } from "./components/input/input.component.js";
+import { Label as n } from "./components/label/label.component.js";
+import { Radio as x } from "./components/radio/radio.component.js";
+import { RadioLabel as C } from "./components/radio-label/radio-label.component.js";
+import { RadioText as T } from "./components/radio-text/radio-text.component.js";
+import { Text as u } from "./components/text/text.component.js";
 import { Textarea as b } from "./components/textarea/textarea.component.js";
-const q = {
+const y = {
   Box: o,
   Button: r,
-  CardImage: m,
-  CardText: t,
-  Checkbox: i,
-  Choice: p,
-  Dropdown: f,
-  HiddenInput: e,
-  Input: a,
-  Label: d,
-  Radio: n,
-  RadioLabel: x,
-  RadioText: C,
-  Text: T,
+  ButtonText: m,
+  CardImage: t,
+  CardText: i,
+  Checkbox: p,
+  Choice: f,
+  Dropdown: e,
+  HiddenInput: a,
+  Input: d,
+  Label: n,
+  Radio: x,
+  RadioLabel: C,
+  RadioText: T,
+  Text: u,
   Textarea: b
 };
 export {
-  q as Control
+  y as Control
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.0.59",
+  "version": "1.0.61",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",