@shmidko61/lc-ui-kit 0.13.0 → 0.16.0

package/dist/progress-bar-D4CL9r42.js

@@ -0,0 +1,236 @@
+import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { a as O } from "./responsive-style.config-DFuATrIM.js";
+import { Flex as p } from "./flex.js";
+import { Box as c } from "./box.js";
+function z(e, i = 0, l = 100) {
+  let r = Number.isFinite(i) ? i : 0, t = Number.isFinite(l) && l > r ? l : r + 100;
+  (!Number.isFinite(t) || t <= r) && (r = 0, t = 100);
+  const d = Number.isFinite(e) ? Math.min(t, Math.max(r, e)) : r;
+  return {
+    min: r,
+    max: t,
+    value: d,
+    percent: (Number.isFinite(t - r) ? (d - r) / (t - r) : (d / 2 - r / 2) / (t / 2 - r / 2)) * 100
+  };
+}
+function W({
+  range: e,
+  variant: i,
+  valuePlacement: l,
+  marks: r,
+  valueLabel: t,
+  trackProps: d,
+  fillProps: P,
+  markerProps: f,
+  renderMark: x
+}) {
+  const v = i === "steps", n = i === "checkpoints", g = v || n, h = t === void 0 ? Math.round(e.percent) + "%" : t, k = r ?? [
+    { value: e.min },
+    { value: e.min / 2 + e.max / 2 },
+    { value: e.max }
+  ], N = i === "marker" && t === void 0 ? e.value : h;
+  return /* @__PURE__ */ F(p, { gap: 12, align: "center", width: "100%", children: [
+    i === "marker" && /* @__PURE__ */ o(c, { color: "--color-text-secondary", children: e.min }),
+    l === "start" && /* @__PURE__ */ o(p, { shrink: 0, children: h }),
+    /* @__PURE__ */ o(
+      p,
+      {
+        flexDirection: "column",
+        position: { type: "relative" },
+        grow: 1,
+        minWidth: 0,
+        p: g ? {
+          px: n ? 20 : 10,
+          pt: v || k.some((a) => a.label != null) ? 40 : n ? 14 : 0,
+          pb: n ? 14 : 4
+        } : l === "marker" ? { py: 6 } : 0,
+        children: /* @__PURE__ */ F(
+          c,
+          {
+            position: { type: "relative" },
+            height: 12,
+            bg: "--color-background-subtle",
+            border: { radius: "999px" },
+            ...d,
+            children: [
+              /* @__PURE__ */ o(
+                c,
+                {
+                  height: "100%",
+                  width: e.percent + "%",
+                  bg: "currentColor",
+                  border: { radius: "inherit" },
+                  ...P
+                }
+              ),
+              l === "marker" && /* @__PURE__ */ o(
+                p,
+                {
+                  position: { type: "absolute", top: "50%", left: e.percent + "%" },
+                  transform: "translate(-50%, -50%)",
+                  align: "center",
+                  justify: "center",
+                  minWidth: 40,
+                  height: 24,
+                  p: { px: 8 },
+                  bg: "currentColor",
+                  border: { radius: "999px", width: "2px", color: "--color-background-default" },
+                  ...f,
+                  children: /* @__PURE__ */ o(c, { color: "--color-background-default", children: N })
+                }
+              ),
+              g && k.map((a, y) => {
+                const u = z(a.value, e.min, e.max), b = u.value === e.value ? "current" : u.value < e.value ? "completed" : "pending";
+                return /* @__PURE__ */ F(
+                  p,
+                  {
+                    position: { type: "absolute", top: "50%", left: u.percent + "%" },
+                    transform: "translate(-50%, -50%)",
+                    align: "center",
+                    justify: "center",
+                    children: [
+                      a.label != null && /* @__PURE__ */ o(
+                        c,
+                        {
+                          position: { type: "absolute", bottom: "calc(100% + 10px)", left: "50%" },
+                          transform: "translateX(-50%)",
+                          bg: "--color-background-default",
+                          color: "--color-text-primary",
+                          p: { px: 8, py: 4 },
+                          border: { radius: "4px" },
+                          style: { whiteSpace: "nowrap", fontSize: 14 },
+                          children: a.label
+                        }
+                      ),
+                      /* @__PURE__ */ o(
+                        p,
+                        {
+                          align: "center",
+                          justify: "center",
+                          width: n ? 40 : 20,
+                          height: n ? 40 : 20,
+                          bg: b === "pending" && n ? "--color-background-subtle" : "currentColor",
+                          border: { radius: "50%", width: "2px", color: "--color-background-default" },
+                          ...f,
+                          children: /* @__PURE__ */ o(
+                            c,
+                            {
+                              color: b === "pending" && n ? "--color-text-secondary" : "--color-background-default",
+                              children: x ? x({ mark: a, index: y, state: b }) : a.content ?? (n ? a.value : /* @__PURE__ */ o(
+                                c,
+                                {
+                                  width: 12,
+                                  height: 12,
+                                  border: {
+                                    radius: "50%",
+                                    width: "1px",
+                                    color: "--color-background-default"
+                                  }
+                                }
+                              ))
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  y
+                );
+              })
+            ]
+          }
+        )
+      }
+    ),
+    l === "end" && /* @__PURE__ */ o(p, { shrink: 0, children: h }),
+    i === "marker" && /* @__PURE__ */ o(c, { color: "--color-text-secondary", children: e.max })
+  ] });
+}
+function q({
+  value: e,
+  min: i,
+  max: l,
+  variant: r = "line",
+  valuePlacement: t,
+  label: d,
+  ariaLabel: P = "Прогресс",
+  marks: f,
+  valueLabel: x,
+  trackProps: v,
+  fillProps: n,
+  markerProps: g,
+  renderMark: h,
+  md: k,
+  lg: N,
+  xl: a,
+  ...y
+}) {
+  const u = z(e, i, l), b = ["line", "steps", "marker", "checkpoints"], D = ["start", "end", "marker", "none"], C = { md: k, lg: N, xl: a }, w = [{ variant: r, valuePlacement: t }];
+  for (const s of O)
+    w.push({
+      variant: C[s]?.variant ?? w.at(-1)?.variant ?? r,
+      valuePlacement: C[s]?.valuePlacement ?? w.at(-1)?.valuePlacement
+    });
+  const E = Object.fromEntries(
+    O.map((s) => {
+      const { variant: j, valuePlacement: B, ...M } = C[s] ?? {};
+      return [s, M];
+    })
+  );
+  return /* @__PURE__ */ F(
+    p,
+    {
+      flexDirection: "column",
+      gap: 12,
+      width: "100%",
+      color: "--color-primary-accent",
+      role: "progressbar",
+      "aria-label": P,
+      "aria-valuemin": u.min,
+      "aria-valuemax": u.max,
+      "aria-valuenow": u.value,
+      ...E,
+      ...y,
+      children: [
+        d != null && /* @__PURE__ */ o(c, { children: d }),
+        b.flatMap(
+          (s) => D.map((j) => {
+            const B = w.map(
+              (m) => m.variant === s && (m.valuePlacement ?? (m.variant === "line" ? "start" : m.variant === "marker" ? "marker" : "none")) === j
+            );
+            if (!B.some(Boolean)) return null;
+            const M = Object.fromEntries(
+              O.map((m, S) => [
+                m,
+                { display: B[S + 1] ? "flex" : "hidden" }
+              ])
+            );
+            return /* @__PURE__ */ o(
+              c,
+              {
+                width: "100%",
+                display: B[0] ? "flex" : "hidden",
+                ...M,
+                children: W({
+                  range: u,
+                  variant: s,
+                  valuePlacement: j,
+                  marks: f,
+                  valueLabel: x,
+                  trackProps: v,
+                  fillProps: n,
+                  markerProps: g,
+                  renderMark: h
+                })
+              },
+              s + j
+            );
+          })
+        )
+      ]
+    }
+  );
+}
+export {
+  q as P
+};

package/dist/progress-bar-XIJDb_UM.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("react/jsx-runtime"),C=require("./responsive-style.config-B2m9jVlX.cjs"),p=require("./flex.cjs"),c=require("./box.cjs");function M(e,i=0,s=100){let t=Number.isFinite(i)?i:0,o=Number.isFinite(s)&&s>t?s:t+100;(!Number.isFinite(o)||o<=t)&&(t=0,o=100);const u=Number.isFinite(e)?Math.min(o,Math.max(t,e)):t;return{min:t,max:o,value:u,percent:(Number.isFinite(o-t)?(u-t)/(o-t):(u/2-t/2)/(o/2-t/2))*100}}function z({range:e,variant:i,valuePlacement:s,marks:t,valueLabel:o,trackProps:u,fillProps:w,markerProps:b,renderMark:f}){const v=i==="steps",n=i==="checkpoints",j=v||n,h=o===void 0?Math.round(e.percent)+"%":o,g=t??[{value:e.min},{value:e.min/2+e.max/2},{value:e.max}],P=i==="marker"&&o===void 0?e.value:h;return r.jsxs(p.Flex,{gap:12,align:"center",width:"100%",children:[i==="marker"&&r.jsx(c.Box,{color:"--color-text-secondary",children:e.min}),s==="start"&&r.jsx(p.Flex,{shrink:0,children:h}),r.jsx(p.Flex,{flexDirection:"column",position:{type:"relative"},grow:1,minWidth:0,p:j?{px:n?20:10,pt:v||g.some(l=>l.label!=null)?40:n?14:0,pb:n?14:4}:s==="marker"?{py:6}:0,children:r.jsxs(c.Box,{position:{type:"relative"},height:12,bg:"--color-background-subtle",border:{radius:"999px"},...u,children:[r.jsx(c.Box,{height:"100%",width:e.percent+"%",bg:"currentColor",border:{radius:"inherit"},...w}),s==="marker"&&r.jsx(p.Flex,{position:{type:"absolute",top:"50%",left:e.percent+"%"},transform:"translate(-50%, -50%)",align:"center",justify:"center",minWidth:40,height:24,p:{px:8},bg:"currentColor",border:{radius:"999px",width:"2px",color:"--color-background-default"},...b,children:r.jsx(c.Box,{color:"--color-background-default",children:P})}),j&&g.map((l,k)=>{const d=M(l.value,e.min,e.max),m=d.value===e.value?"current":d.value<e.value?"completed":"pending";return r.jsxs(p.Flex,{position:{type:"absolute",top:"50%",left:d.percent+"%"},transform:"translate(-50%, -50%)",align:"center",justify:"center",children:[l.label!=null&&r.jsx(c.Box,{position:{type:"absolute",bottom:"calc(100% + 10px)",left:"50%"},transform:"translateX(-50%)",bg:"--color-background-default",color:"--color-text-primary",p:{px:8,py:4},border:{radius:"4px"},style:{whiteSpace:"nowrap",fontSize:14},children:l.label}),r.jsx(p.Flex,{align:"center",justify:"center",width:n?40:20,height:n?40:20,bg:m==="pending"&&n?"--color-background-subtle":"currentColor",border:{radius:"50%",width:"2px",color:"--color-background-default"},...b,children:r.jsx(c.Box,{color:m==="pending"&&n?"--color-text-secondary":"--color-background-default",children:f?f({mark:l,index:k,state:m}):l.content??(n?l.value:r.jsx(c.Box,{width:12,height:12,border:{radius:"50%",width:"1px",color:"--color-background-default"}}))})})]},k)})]})}),s==="end"&&r.jsx(p.Flex,{shrink:0,children:h}),i==="marker"&&r.jsx(c.Box,{color:"--color-text-secondary",children:e.max})]})}function D({value:e,min:i,max:s,variant:t="line",valuePlacement:o,label:u,ariaLabel:w="Прогресс",marks:b,valueLabel:f,trackProps:v,fillProps:n,markerProps:j,renderMark:h,md:g,lg:P,xl:l,...k}){const d=M(e,i,s),m=["line","steps","marker","checkpoints"],O=["start","end","marker","none"],N={md:g,lg:P,xl:l},B=[{variant:t,valuePlacement:o}];for(const a of C.responsiveBreakpoints)B.push({variant:N[a]?.variant??B.at(-1)?.variant??t,valuePlacement:N[a]?.valuePlacement??B.at(-1)?.valuePlacement});const S=Object.fromEntries(C.responsiveBreakpoints.map(a=>{const{variant:y,valuePlacement:F,...q}=N[a]??{};return[a,q]}));return r.jsxs(p.Flex,{flexDirection:"column",gap:12,width:"100%",color:"--color-primary-accent",role:"progressbar","aria-label":w,"aria-valuemin":d.min,"aria-valuemax":d.max,"aria-valuenow":d.value,...S,...k,children:[u!=null&&r.jsx(c.Box,{children:u}),m.flatMap(a=>O.map(y=>{const F=B.map(x=>x.variant===a&&(x.valuePlacement??(x.variant==="line"?"start":x.variant==="marker"?"marker":"none"))===y);if(!F.some(Boolean))return null;const q=Object.fromEntries(C.responsiveBreakpoints.map((x,_)=>[x,{display:F[_+1]?"flex":"hidden"}]));return r.jsx(c.Box,{width:"100%",display:F[0]?"flex":"hidden",...q,children:z({range:d,variant:a,valuePlacement:y,marks:b,valueLabel:f,trackProps:v,fillProps:n,markerProps:j,renderMark:h})},a+y)}))]})}exports.ProgressBar=D;

package/dist/progress-bar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./progress-bar-XIJDb_UM.cjs");exports.ProgressBar=r.ProgressBar;

package/dist/progress-bar.js

@@ -0,0 +1,4 @@
+import { P as s } from "./progress-bar-D4CL9r42.js";
+export {
+  s as ProgressBar
+};

package/dist/shared/responsive-style/index.d.ts

@@ -1 +1,2 @@
 export { responsiveBreakpointMinWidth, responsiveBreakpoints } from './responsive-style.config';
+export { normalizeCssTokenValue } from './responsive-style.utils';