aravint-ui-navigation 1.0.37 → 1.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/navigation.cjs.js +2 -2
- package/dist/navigation.es.js +19 -27
- package/dist/types/icons/icon.d.ts +1 -1
- package/package.json +3 -2
package/dist/navigation.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react");function E(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,i.get?i:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const k=E(g),L=({tabs:t,defaultValue:a,value:s,onValueChange:i,className:n="",tabListClassName:c="",tabButtonClassName:h="",contentClassName:d="",showTabNumbers:o=!0,showContent:l=!0,animated:m=!0})=>{var N;const p=s!==void 0,[_,w]=g.useState(a||((N=t[0])==null?void 0:N.id)||""),u=p?s:_,y=r=>{p||w(r),i==null||i(r)},v=t.find(r=>r.id===u),j={display:"flex",alignItems:"flex-end",borderBottom:"1px solid #059669",position:"sticky",top:0,zIndex:100,flexShrink:0},S={display:"flex",alignItems:"center",fontFamily:"inherit",background:"transparent",cursor:"pointer",outline:"none",transition:"all .2s ease",position:"relative"},x={background:"#E8F7F1",color:"#059669",fontWeight:700,borderTop:"3px solid #059669",borderLeft:"1px solid #059669",borderRight:"1px solid #059669",borderBottom:"1px solid #E8F7F1",borderTopLeftRadius:8,borderTopRightRadius:8,marginBottom:-1,zIndex:2},f={background:"transparent",color:"#2D3748",borderTop:"3px solid transparent",borderLeft:"1px solid transparent",borderRight:"1px solid transparent",borderBottom:"1px solid transparent",borderTopLeftRadius:8,borderTopRightRadius:8},b={background:"#ECFDF5",color:"#059669",fontWeight:700,border:"1px solid #059669"},R={background:"#FFFFFF",color:"#1F2937",fontWeight:"500",border:"1px solid #1F2937"},B={background:"#FFFFFF",border:"1px solid #D9E1E7",borderTop:"none",borderBottomLeftRadius:12,borderBottomRightRadius:12,boxShadow:"0 2px 6px rgba(0,0,0,.05)",transition:m?"opacity .2s ease":void 0,opacity:1,flex:1,overflowY:"auto",minHeight:0};return e.jsxs("div",{className:n,style:{display:"flex",flexDirection:"column",width:"100%",height:"100%",minHeight:0,overflow:"hidden"},children:[e.jsx("style",{children:`
|
|
2
2
|
.ctabs-list {
|
|
3
3
|
padding: 0 10px;
|
|
4
4
|
gap: 0px;
|
|
@@ -72,4 +72,4 @@
|
|
|
72
72
|
font-size: 10px;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
|
-
`}),e.jsx("div",{style:j,className:`ctabs-list ${
|
|
75
|
+
`}),e.jsx("div",{style:j,className:`ctabs-list ${c}`,children:t.map((r,z)=>{const F=u===r.id;return e.jsxs("button",{role:"tab","aria-selected":F,disabled:r.disabled,onClick:()=>!r.disabled&&y(r.id),style:{...S,...F?x:f,opacity:r.disabled?.5:1,cursor:r.disabled?"not-allowed":"pointer"},className:`ctabs-btn ${h}`,children:[o&&e.jsx("span",{className:"ctabs-badge",style:F?b:R,children:z+1}),r.icon,e.jsx("span",{className:"ctabs-label",children:r.label})]},r.id)})}),l&&v&&e.jsx("div",{style:B,className:d,children:v.content})]})},M=t=>k.createElement("svg",{viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},k.createElement("path",{d:"M2 6.2L4.6 8.8L10 3",stroke:"#ffffff",strokeWidth:1.6,strokeLinecap:"round",strokeLinejoin:"round"})),T=g.memo(({computed:t,showTime:a})=>{const{step:s,index:i,status:n}=t,c=["rs-stepper__circle",n==="completed"?"rs-stepper__circle--completed":"",n==="active"?"rs-stepper__circle--active":""].filter(Boolean).join(" "),h=["rs-stepper__title",n==="pending"?"rs-stepper__title--pending":"",n==="active"?"rs-stepper__title--active":""].filter(Boolean).join(" "),d=i!==0;return e.jsxs("div",{className:"rs-stepper__step",children:[e.jsxs("div",{className:"rs-stepper__circle-wrap",children:[e.jsx("div",{className:c,children:d?i:null}),n==="completed"&&e.jsx("span",{className:"rs-stepper__check","aria-hidden":"true",children:e.jsx(M,{})})]}),e.jsx("div",{className:h,children:s.title}),s.date&&e.jsx("div",{className:"rs-stepper__date",children:s.date}),a&&s.time&&e.jsx("div",{className:"rs-stepper__time",children:s.time})]})});T.displayName="StepCircle";const I=({steps:t,currentStep:a,completedColor:s="#059669",pendingColor:i="#9ca3af",activeColor:n="#059669",lineColor:c="#e5e7eb",showTime:h=!0,orientation:d="responsive"})=>{const o=t.length,l=a>o,m=Math.max(1,Math.min(a,o)),p=l?Math.max(0,o-1):Math.max(0,Math.min(o-1,m-1)),_=g.useMemo(()=>t.map((x,f)=>{let b="pending";return l||f<p?b="completed":f===p&&(b="active"),{step:x,index:f,status:b}}),[t,p,l]),w=o>0?100/o/2:0,u=o>1?l?100:p/(o-1)*100:0,y=l||m>1?s:c,v=l||m>o?s:c,j={"--rs-completed-color":s,"--rs-pending-color":i,"--rs-active-color":n,"--rs-line-color":c,"--rs-half-step":`${w}%`,"--rs-progress":`${u}%`,"--rs-left-side-color":y,"--rs-right-side-color":v};if(o===0)return null;const S=d==="vertical"?"rs-stepper--vertical":d==="horizontal"?"rs-stepper--horizontal":"rs-stepper--responsive";return e.jsxs("div",{className:"border border-[#E5E7EB] py-2 mx-2 rounded-lg bg-[#F9FAFB] shadow-[0px_2px_4px_-1px_#00000008,0px_4px_6px_-1px_#0000000D]",children:[e.jsx("div",{className:"pl-2 pt-2 pb-3 text-[14px] font-bold",children:"Workflow Progresss"}),e.jsx("div",{className:`rs-stepper ${S}`,style:j,children:e.jsx("div",{className:"rs-stepper__scroll",children:e.jsxs("div",{className:"rs-stepper__row",children:[e.jsx("div",{className:"rs-stepper__track",children:e.jsx("div",{className:"rs-stepper__progress"})}),_.map(x=>e.jsx(T,{computed:x,showTime:h},x.step.id))]})})})]})},C=g.memo(I);exports.CustomTabs=L;exports.Stepper=C;
|
package/dist/navigation.es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
|
|
2
|
+
import * as T from "react";
|
|
3
|
+
import { useState as I, memo as B, useMemo as C } from "react";
|
|
4
|
+
const $ = ({
|
|
4
5
|
tabs: i,
|
|
5
6
|
defaultValue: d,
|
|
6
7
|
value: s,
|
|
@@ -13,9 +14,9 @@ const W = ({
|
|
|
13
14
|
showContent: l = !0,
|
|
14
15
|
animated: f = !0
|
|
15
16
|
}) => {
|
|
16
|
-
var
|
|
17
|
-
const p = s !== void 0, [_, w] =
|
|
18
|
-
d || ((
|
|
17
|
+
var k;
|
|
18
|
+
const p = s !== void 0, [_, w] = I(
|
|
19
|
+
d || ((k = i[0]) == null ? void 0 : k.id) || ""
|
|
19
20
|
), v = p ? s : _, y = (t) => {
|
|
20
21
|
p || w(t), a == null || a(t);
|
|
21
22
|
}, u = i.find((t) => t.id === v), F = {
|
|
@@ -26,7 +27,7 @@ const W = ({
|
|
|
26
27
|
top: 0,
|
|
27
28
|
zIndex: 100,
|
|
28
29
|
flexShrink: 0
|
|
29
|
-
},
|
|
30
|
+
}, S = {
|
|
30
31
|
display: "flex",
|
|
31
32
|
alignItems: "center",
|
|
32
33
|
fontFamily: "inherit",
|
|
@@ -67,7 +68,7 @@ const W = ({
|
|
|
67
68
|
color: "#1F2937",
|
|
68
69
|
fontWeight: "500",
|
|
69
70
|
border: "1px solid #1F2937"
|
|
70
|
-
},
|
|
71
|
+
}, E = {
|
|
71
72
|
background: "#FFFFFF",
|
|
72
73
|
border: "1px solid #D9E1E7",
|
|
73
74
|
borderTop: "none",
|
|
@@ -183,7 +184,7 @@ const W = ({
|
|
|
183
184
|
disabled: t.disabled,
|
|
184
185
|
onClick: () => !t.disabled && y(t.id),
|
|
185
186
|
style: {
|
|
186
|
-
...
|
|
187
|
+
...S,
|
|
187
188
|
...N ? c : g,
|
|
188
189
|
opacity: t.disabled ? 0.5 : 1,
|
|
189
190
|
cursor: t.disabled ? "not-allowed" : "pointer"
|
|
@@ -207,20 +208,11 @@ const W = ({
|
|
|
207
208
|
})
|
|
208
209
|
}
|
|
209
210
|
),
|
|
210
|
-
l && u && /* @__PURE__ */ e("div", { style:
|
|
211
|
+
l && u && /* @__PURE__ */ e("div", { style: E, className: m, children: u.content })
|
|
211
212
|
]
|
|
212
213
|
}
|
|
213
214
|
);
|
|
214
|
-
},
|
|
215
|
-
"path",
|
|
216
|
-
{
|
|
217
|
-
d: "M2 6.2L4.6 8.8L10 3",
|
|
218
|
-
stroke: "#ffffff",
|
|
219
|
-
strokeWidth: "1.6",
|
|
220
|
-
strokeLinecap: "round",
|
|
221
|
-
strokeLinejoin: "round"
|
|
222
|
-
}
|
|
223
|
-
) }), B = T(({ computed: i, showTime: d }) => {
|
|
215
|
+
}, M = (i) => /* @__PURE__ */ T.createElement("svg", { viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i }, /* @__PURE__ */ T.createElement("path", { d: "M2 6.2L4.6 8.8L10 3", stroke: "#ffffff", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" })), R = B(({ computed: i, showTime: d }) => {
|
|
224
216
|
const { step: s, index: a, status: o } = i, n = [
|
|
225
217
|
"rs-stepper__circle",
|
|
226
218
|
o === "completed" ? "rs-stepper__circle--completed" : "",
|
|
@@ -233,15 +225,15 @@ const W = ({
|
|
|
233
225
|
return /* @__PURE__ */ h("div", { className: "rs-stepper__step", children: [
|
|
234
226
|
/* @__PURE__ */ h("div", { className: "rs-stepper__circle-wrap", children: [
|
|
235
227
|
/* @__PURE__ */ e("div", { className: n, children: a !== 0 ? a : null }),
|
|
236
|
-
o === "completed" && /* @__PURE__ */ e("span", { className: "rs-stepper__check", "aria-hidden": "true", children: /* @__PURE__ */ e(
|
|
228
|
+
o === "completed" && /* @__PURE__ */ e("span", { className: "rs-stepper__check", "aria-hidden": "true", children: /* @__PURE__ */ e(M, {}) })
|
|
237
229
|
] }),
|
|
238
230
|
/* @__PURE__ */ e("div", { className: b, children: s.title }),
|
|
239
231
|
s.date && /* @__PURE__ */ e("div", { className: "rs-stepper__date", children: s.date }),
|
|
240
232
|
d && s.time && /* @__PURE__ */ e("div", { className: "rs-stepper__time", children: s.time })
|
|
241
233
|
] });
|
|
242
234
|
});
|
|
243
|
-
|
|
244
|
-
const
|
|
235
|
+
R.displayName = "StepCircle";
|
|
236
|
+
const j = ({
|
|
245
237
|
steps: i,
|
|
246
238
|
currentStep: d,
|
|
247
239
|
completedColor: s = "#059669",
|
|
@@ -251,7 +243,7 @@ const M = ({
|
|
|
251
243
|
showTime: b = !0,
|
|
252
244
|
orientation: m = "responsive"
|
|
253
245
|
}) => {
|
|
254
|
-
const r = i.length, l = d > r, f = Math.max(1, Math.min(d, r)), p = l ? Math.max(0, r - 1) : Math.max(0, Math.min(r - 1, f - 1)), _ =
|
|
246
|
+
const r = i.length, l = d > r, f = Math.max(1, Math.min(d, r)), p = l ? Math.max(0, r - 1) : Math.max(0, Math.min(r - 1, f - 1)), _ = C(
|
|
255
247
|
() => i.map((c, g) => {
|
|
256
248
|
let x = "pending";
|
|
257
249
|
return l || g < p ? x = "completed" : g === p && (x = "active"), { step: c, index: g, status: x };
|
|
@@ -272,7 +264,7 @@ const M = ({
|
|
|
272
264
|
/* @__PURE__ */ e("div", { className: `rs-stepper ${m === "vertical" ? "rs-stepper--vertical" : m === "horizontal" ? "rs-stepper--horizontal" : "rs-stepper--responsive"}`, style: F, children: /* @__PURE__ */ e("div", { className: "rs-stepper__scroll", children: /* @__PURE__ */ h("div", { className: "rs-stepper__row", children: [
|
|
273
265
|
/* @__PURE__ */ e("div", { className: "rs-stepper__track", children: /* @__PURE__ */ e("div", { className: "rs-stepper__progress" }) }),
|
|
274
266
|
_.map((c) => /* @__PURE__ */ e(
|
|
275
|
-
|
|
267
|
+
R,
|
|
276
268
|
{
|
|
277
269
|
computed: c,
|
|
278
270
|
showTime: b
|
|
@@ -281,8 +273,8 @@ const M = ({
|
|
|
281
273
|
))
|
|
282
274
|
] }) }) })
|
|
283
275
|
] });
|
|
284
|
-
},
|
|
276
|
+
}, P = B(j);
|
|
285
277
|
export {
|
|
286
|
-
|
|
287
|
-
|
|
278
|
+
$ as CustomTabs,
|
|
279
|
+
P as Stepper
|
|
288
280
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aravint-ui-navigation",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.38",
|
|
4
4
|
"main": "dist/navigation.cjs.js",
|
|
5
5
|
"module": "dist/navigation.es.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -37,7 +37,8 @@
|
|
|
37
37
|
"postcss": "^8.5.15",
|
|
38
38
|
"tailwindcss": "^4.0.15",
|
|
39
39
|
"typescript": "^4.9.5",
|
|
40
|
-
"vite": "^6.0.0"
|
|
40
|
+
"vite": "^6.0.0",
|
|
41
|
+
"vite-plugin-svgr": "^5.2.0"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
44
|
"@base-ui/react": "^1.6.0",
|