@arthurzakharov/ui-kit 3.9.0 → 3.11.0

package/dist/assets/accordion-CBUfe0V-.css

@@ -0,0 +1 @@
+._Accordion_1l7nf_1{display:block;width:100%;background-color:var(--rm-ui-color-background-primary, #fff);border:1px solid var(--rm-ui-grey-100);border-radius:var(--rm-ui-border-radius-md, 8px);overflow:hidden}._Header_1l7nf_10{display:flex;align-items:center;gap:var(--rm-ui-padding-sm);width:100%;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-md);background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit}._Header_1l7nf_10:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:-2px}._Index_1l7nf_31{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:28px;padding:0 var(--rm-ui-padding-xxs);border-radius:50%;background-color:var(--rm-ui-color-theme-primary);color:var(--rm-ui-color-text-on-theme, #fff);font-size:var(--rm-ui-font-size-body-small);font-weight:var(--rm-ui-font-weight-medium);line-height:1}._Title_1l7nf_47{flex:1 1 auto;min-width:0}._Chevron_1l7nf_52{flex:0 0 auto;display:inline-flex;color:var(--rm-ui-color-text-secondary)}._Body_1l7nf_58{position:relative;padding:0 var(--rm-ui-padding-md) var(--rm-ui-padding-md)}._Subtitle_1l7nf_63{margin:0 0 var(--rm-ui-padding-sm)}._Content_1l7nf_67{display:block}._LoaderOverlay_1l7nf_71{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffbf;z-index:1}._Stepped_1l7nf_81{background:transparent;border:0;border-radius:0;overflow:visible}._Stepped_1l7nf_81 ._Header_1l7nf_10{gap:var(--rm-ui-padding-md);padding:0}._Stepped_1l7nf_81 ._Index_1l7nf_31{min-width:24px;width:24px;height:24px;padding:0;background-color:var(--rm-ui-color-action);color:#fff;font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Stepped_1l7nf_81 ._Chevron_1l7nf_52{color:var(--rm-ui-color-text-primary)}._Stepped_1l7nf_81 ._Body_1l7nf_58{padding:var(--rm-ui-padding-xs) 0 var(--rm-ui-padding-md) 28px;margin:var(--rm-ui-padding-sm) 0 0 11px;border-left:2px solid var(--rm-ui-color-action)}._Stepped_1l7nf_81 ._Subtitle_1l7nf_63{margin:0 0 var(--rm-ui-padding-md)}._Stepped_1l7nf_81 ._Content_1l7nf_67{display:flex;flex-direction:column;gap:var(--rm-ui-padding-md)}

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Base } from '../../utils/types';
+export type AccordionVariant = 'default' | 'stepped';
 export interface AccordionProps extends Base {
     title: string;
     isOpen: boolean;
@@ -7,6 +8,7 @@ export interface AccordionProps extends Base {
     index?: number | string;
     subtitle?: ReactNode;
     loading?: boolean;
+    variant?: AccordionVariant;
     children: ReactNode;
 }
-export declare const Accordion: ({ title, isOpen, onTitleClick, index, subtitle, loading, children, ...base }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ title, isOpen, onTitleClick, index, subtitle, loading, variant, children, ...base }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/accordion.component.js

@@ -1,61 +1,75 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { ChevronDown as h } from "lucide-react";
-import { baseProps as i, clsx as s } from "../../utils/functions/functions.util.js";
-import { FadeGrow as v } from "../../animations/fade-grow/fade-grow.component.js";
-import { Rotate as p } from "../../animations/rotate/rotate.component.js";
-import { Loader as z } from "../loader/loader.component.js";
-import '../../assets/accordion-D1OVgv7W.css';const k = "_Accordion_1k5zy_1", C = "_Header_1k5zy_10", N = "_HeaderOpen_1k5zy_32", x = "_Index_1k5zy_36", b = "_Title_1k5zy_52", f = "_Chevron_1k5zy_57", H = "_Body_1k5zy_63", $ = "_Subtitle_1k5zy_68", u = "_Content_1k5zy_75", A = "_LoaderOverlay_1k5zy_79", o = {
-  Accordion: k,
-  Header: C,
-  HeaderOpen: N,
-  Index: x,
-  Title: b,
-  Chevron: f,
-  Body: H,
-  Subtitle: $,
-  Content: u,
-  LoaderOverlay: A
-}, j = ({
-  title: l,
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { ChevronDown as C } from "lucide-react";
+import { baseProps as l, clsx as s } from "../../utils/functions/functions.util.js";
+import { FadeGrow as S } from "../../animations/fade-grow/fade-grow.component.js";
+import { Rotate as N } from "../../animations/rotate/rotate.component.js";
+import { Loader as H } from "../loader/loader.component.js";
+import { Text as m } from "../text/text.component.js";
+import '../../assets/accordion-CBUfe0V-.css';const $ = "_Accordion_1l7nf_1", g = "_Header_1l7nf_10", z = "_HeaderOpen_1l7nf_28", A = "_Index_1l7nf_31", I = "_Title_1l7nf_47", L = "_Chevron_1l7nf_52", T = "_Body_1l7nf_58", w = "_Subtitle_1l7nf_63", B = "_Content_1l7nf_67", O = "_LoaderOverlay_1l7nf_71", j = "_Stepped_1l7nf_81", e = {
+  Accordion: $,
+  Header: g,
+  HeaderOpen: z,
+  Index: A,
+  Title: I,
+  Chevron: L,
+  Body: T,
+  Subtitle: w,
+  Content: B,
+  LoaderOverlay: O,
+  Stepped: j
+}, E = ({
+  title: _,
   isOpen: d,
-  onTitleClick: _,
-  index: r,
-  subtitle: a,
-  loading: m = !1,
+  onTitleClick: p,
+  index: i,
+  subtitle: r,
+  loading: f = !1,
+  variant: h = "default",
   children: y,
   ...c
 }) => {
-  const t = i(c, "data-testid", "accordion");
-  return /* @__PURE__ */ n(
+  const o = l(c, "data-testid", "accordion"), n = h === "stepped", v = n ? "body" : "body-large", b = !n && d ? "theme-primary" : "text-primary", x = n ? "body" : "body-small", u = n ? "text-primary" : "text-secondary";
+  return /* @__PURE__ */ a(
     "div",
     {
-      "data-testid": t,
-      className: s(o.Accordion, i(c, "className")),
+      "data-testid": o,
+      className: s(e.Accordion, { [e.Stepped]: n }, l(c, "className")),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            "data-testid": `${t}-header`,
-            className: s(o.Header, { [o.HeaderOpen]: d }),
-            onClick: _,
+            "data-testid": `${o}-header`,
+            className: s(e.Header, { [e.HeaderOpen]: d }),
+            onClick: p,
             "aria-expanded": d,
             children: [
-              r !== void 0 && /* @__PURE__ */ e("span", { "data-testid": `${t}-index`, className: o.Index, children: r }),
-              /* @__PURE__ */ e("span", { className: o.Title, children: l }),
-              /* @__PURE__ */ e("span", { className: o.Chevron, children: /* @__PURE__ */ e(p, { name: `${t}-chevron`, condition: d, from: "top", to: "bottom", children: /* @__PURE__ */ e(h, { size: 20 }) }) })
+              i !== void 0 && /* @__PURE__ */ t("span", { "data-testid": `${o}-index`, className: e.Index, children: i }),
+              /* @__PURE__ */ t(m, { tag: "span", className: e.Title, weight: "medium", size: v, color: b, children: _ }),
+              /* @__PURE__ */ t("span", { className: e.Chevron, children: /* @__PURE__ */ t(N, { name: `${o}-chevron`, condition: d, from: "top", to: "bottom", children: /* @__PURE__ */ t(C, { size: n ? 24 : 20 }) }) })
             ]
           }
         ),
-        /* @__PURE__ */ e(v, { name: `${t}-body`, condition: d, children: /* @__PURE__ */ n("div", { "data-testid": `${t}-body`, className: o.Body, children: [
-          m && /* @__PURE__ */ e("div", { "data-testid": `${t}-loader`, className: o.LoaderOverlay, children: /* @__PURE__ */ e(z, { color: "accent-primary", size: "md" }) }),
-          a != null && /* @__PURE__ */ e("div", { "data-testid": `${t}-subtitle`, className: o.Subtitle, children: a }),
-          /* @__PURE__ */ e("div", { className: o.Content, children: y })
+        /* @__PURE__ */ t(S, { name: `${o}-body`, condition: d, children: /* @__PURE__ */ a("div", { "data-testid": `${o}-body`, className: e.Body, children: [
+          f && /* @__PURE__ */ t("div", { "data-testid": `${o}-loader`, className: e.LoaderOverlay, children: /* @__PURE__ */ t(H, { color: "accent-primary", size: "md" }) }),
+          r != null && /* @__PURE__ */ t(
+            m,
+            {
+              tag: "div",
+              "data-testid": `${o}-subtitle`,
+              className: e.Subtitle,
+              weight: "regular",
+              size: x,
+              color: u,
+              children: r
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: e.Content, children: y })
         ] }) })
       ]
     }
   );
 };
 export {
-  j as Accordion
+  E as Accordion
 };

package/dist/components/accordion/index.d.ts

@@ -1 +1 @@
-export { Accordion, type AccordionProps } from './accordion.component';
+export { Accordion, type AccordionProps, type AccordionVariant } from './accordion.component';

package/dist/main.d.ts

@@ -23,7 +23,7 @@ export { HiddenInput, type HiddenInputProps } from './controls/primitives/hidden
 export { Label, type LabelProps } from './controls/primitives/label';
 export { RadioLabel, type RadioLabelProps } from './controls/primitives/radio-label';
 export { Status, type StatusProps } from './controls/primitives/status';
-export { Accordion, type AccordionProps } from './components/accordion';
+export { Accordion, type AccordionProps, type AccordionVariant } from './components/accordion';
 export { AccordionTable, type AccordionTableProps } from './components/accordion-table/accordion-table.component';
 export { Dropzone, type DropzoneProps, type DropzoneRejectionReason } from './components/dropzone';
 export { BottomBar } from './components/bottom-bar';

package/package.json

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

package/dist/assets/accordion-D1OVgv7W.css

@@ -1 +0,0 @@
-._Accordion_1k5zy_1{display:block;width:100%;background-color:var(--rm-ui-color-background-primary, #fff);border:1px solid var(--rm-ui-grey-100);border-radius:var(--rm-ui-border-radius-md, 8px);overflow:hidden}._Header_1k5zy_10{display:flex;align-items:center;gap:var(--rm-ui-padding-sm);width:100%;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-md);background:transparent;border:0;cursor:pointer;text-align:left;color:var(--rm-ui-color-text-primary);font-family:inherit;font-size:var(--rm-ui-font-size-body-large);line-height:var(--rm-ui-line-height-body-large);font-weight:var(--rm-ui-font-weight-medium)}._Header_1k5zy_10:focus-visible{outline:2px solid var(--rm-ui-color-focus);outline-offset:-2px}._HeaderOpen_1k5zy_32{color:var(--rm-ui-color-theme-primary)}._Index_1k5zy_36{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:28px;height:28px;padding:0 var(--rm-ui-padding-xxs);border-radius:50%;background-color:var(--rm-ui-color-theme-primary);color:var(--rm-ui-color-text-on-theme, #fff);font-size:var(--rm-ui-font-size-body-small);font-weight:var(--rm-ui-font-weight-medium);line-height:1}._Title_1k5zy_52{flex:1 1 auto;min-width:0}._Chevron_1k5zy_57{flex:0 0 auto;display:inline-flex;color:var(--rm-ui-color-text-secondary)}._Body_1k5zy_63{position:relative;padding:0 var(--rm-ui-padding-md) var(--rm-ui-padding-md)}._Subtitle_1k5zy_68{margin:0 0 var(--rm-ui-padding-sm);color:var(--rm-ui-color-text-secondary);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._Content_1k5zy_75{display:block}._LoaderOverlay_1k5zy_79{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffbf;z-index:1}