@base-framework/ui 1.0.205 → 1.0.207
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/atoms.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-
|
|
1
|
+
import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-CvlontVf.js";
|
|
2
2
|
import { B as T, I as c, L as x } from "./buttons-Cm9etaEG.js";
|
|
3
3
|
import { C, d as g, D as F, c as b, E as f, F as L, H as P, I as R, M as S, N as h, P as k, R as D, T as V, a as E, b as G, U as H, W as M } from "./inputs-CMjx5-IX.js";
|
|
4
4
|
import { V as U, a as W } from "./veil-D4dRxILB.js";
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { B as e, C as o, b as t, F as r, a as n, L as l, P as i, R as p, S as u, c as m, T as d } from "./tooltip-
|
|
1
|
+
import { B as e, C as o, b as t, F as r, a as n, L as l, P as i, R as p, S as u, c as m, T as d } from "./tooltip-CvlontVf.js";
|
|
2
2
|
import { B as g, I as C, L as T } from "./buttons-Cm9etaEG.js";
|
|
3
3
|
import { C as D, d as I, D as S, c as B, E as P, F, H as M, I as k, M as N, N as f, P as v, R as x, T as y, a as h, b as W, U as H, W as L } from "./inputs-CMjx5-IX.js";
|
|
4
4
|
import { V as w, a as U } from "./veil-D4dRxILB.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Span as g, Div as
|
|
1
|
+
import { Span as g, Div as l, Legend as f, Fieldset as x, H4 as C, P as h, UseParent as u, Input as y } from "@base-framework/atoms";
|
|
2
2
|
import { Atom as s, Html as p } from "@base-framework/base";
|
|
3
3
|
import { a as d } from "./veil-D4dRxILB.js";
|
|
4
4
|
import { f as k, e as w, g as $ } from "./inputs-CMjx5-IX.js";
|
|
@@ -79,18 +79,18 @@ const a = {
|
|
|
79
79
|
ringColor: "ring-background"
|
|
80
80
|
}
|
|
81
81
|
}, v = (t) => a[t] || a.gray, P = (t) => {
|
|
82
|
-
const { backgroundColor: r, textColor: e, ringColor:
|
|
83
|
-
return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${
|
|
82
|
+
const { backgroundColor: r, textColor: e, ringColor: o } = v(t);
|
|
83
|
+
return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${o}`;
|
|
84
84
|
}, G = s((t, r) => {
|
|
85
85
|
const e = P(t == null ? void 0 : t.type);
|
|
86
86
|
return g({ ...t, class: e }, r);
|
|
87
87
|
}), I = s((t, r) => {
|
|
88
|
-
const e = t.margin ?? "my-5 mx-5",
|
|
89
|
-
return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"),
|
|
88
|
+
const e = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
|
|
89
|
+
return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), l({
|
|
90
90
|
...t,
|
|
91
|
-
class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${
|
|
91
|
+
class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${o} ${t.class || ""}`
|
|
92
92
|
}, r);
|
|
93
|
-
}), S = s((t, r) =>
|
|
93
|
+
}), S = s((t, r) => f({
|
|
94
94
|
...t,
|
|
95
95
|
class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
|
|
96
96
|
}, r)), R = s((t, r) => {
|
|
@@ -100,23 +100,24 @@ const a = {
|
|
|
100
100
|
class: `p-6 ${e} ${t.class || ""}`
|
|
101
101
|
}, [
|
|
102
102
|
t.legend && S(t.legend),
|
|
103
|
-
|
|
103
|
+
l({ class: "flex flex-auto flex-col space-y-6" }, r)
|
|
104
104
|
]);
|
|
105
105
|
}), O = s((t, r) => {
|
|
106
|
-
var
|
|
107
|
-
|
|
106
|
+
var o;
|
|
107
|
+
const e = t.border === !0 ? "border-t" : "";
|
|
108
|
+
return l({
|
|
108
109
|
...t,
|
|
109
|
-
class: `flex flex-col sm:flex-row ${t.class || ""}`
|
|
110
|
+
class: `flex flex-col sm:flex-row pt-8 ${e} ${t.class || ""}`
|
|
110
111
|
}, [
|
|
111
|
-
t.label &&
|
|
112
|
+
t.label && l({
|
|
112
113
|
...t.labelProps,
|
|
113
|
-
class: `w-full sm:w-1/3 space-y-2 ${((
|
|
114
|
+
class: `w-full sm:w-1/3 space-y-2 ${((o = t.labelProps) == null ? void 0 : o.class) || ""}`
|
|
114
115
|
}, [
|
|
115
116
|
C({ class: "text-base" }, t.label),
|
|
116
117
|
t.description && h({ class: "text-sm text-muted-foreground" }, t.description)
|
|
117
118
|
]),
|
|
118
119
|
// Controls container: grows to fill remaining space, spacing between items
|
|
119
|
-
|
|
120
|
+
l({ class: "w-full sm:flex-1 flex flex-col space-y-4" }, r)
|
|
120
121
|
]);
|
|
121
122
|
}), V = d(
|
|
122
123
|
{
|
|
@@ -148,17 +149,17 @@ const a = {
|
|
|
148
149
|
* @returns {object}
|
|
149
150
|
*/
|
|
150
151
|
render() {
|
|
151
|
-
return
|
|
152
|
+
return l({ class: "relative w-full h-4 flex items-center" }, [
|
|
152
153
|
// Track
|
|
153
|
-
|
|
154
|
+
l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
|
|
154
155
|
u(({ state: t }) => [
|
|
155
156
|
// Filled Track
|
|
156
|
-
|
|
157
|
+
l({
|
|
157
158
|
class: "absolute h-2 bg-primary rounded-full",
|
|
158
159
|
style: ["width: [[filledPercentage]]%", t]
|
|
159
160
|
}),
|
|
160
161
|
// Thumb
|
|
161
|
-
|
|
162
|
+
l({
|
|
162
163
|
class: `
|
|
163
164
|
absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
|
|
164
165
|
ring-offset-background transition-colors focus-visible:outline-none
|
|
@@ -198,13 +199,13 @@ const a = {
|
|
|
198
199
|
...t,
|
|
199
200
|
class: `${$} ${t.class || ""}`.trim()
|
|
200
201
|
})), E = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
|
|
201
|
-
const e = t,
|
|
202
|
+
const e = t, o = 16, n = 2 * Math.PI * o, m = e / 100 * n, b = `
|
|
202
203
|
<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
|
203
204
|
<!-- Background Circle -->
|
|
204
205
|
<circle
|
|
205
206
|
cx="18"
|
|
206
207
|
cy="18"
|
|
207
|
-
r="${
|
|
208
|
+
r="${o}"
|
|
208
209
|
fill="none"
|
|
209
210
|
stroke="currentColor"
|
|
210
211
|
stroke-width="4"
|
|
@@ -215,7 +216,7 @@ const a = {
|
|
|
215
216
|
<circle
|
|
216
217
|
cx="18"
|
|
217
218
|
cy="18"
|
|
218
|
-
r="${
|
|
219
|
+
r="${o}"
|
|
219
220
|
fill="none"
|
|
220
221
|
stroke="currentColor"
|
|
221
222
|
stroke-width="4"
|
|
@@ -236,20 +237,20 @@ const a = {
|
|
|
236
237
|
</text>
|
|
237
238
|
</svg>
|
|
238
239
|
`;
|
|
239
|
-
return
|
|
240
|
+
return l({
|
|
240
241
|
class: "circle-graph text-inherit",
|
|
241
|
-
html:
|
|
242
|
+
html: b
|
|
242
243
|
});
|
|
243
244
|
}, H = s((t) => {
|
|
244
|
-
const r = t.progress || 0, e = t.class || "",
|
|
245
|
-
return
|
|
245
|
+
const r = t.progress || 0, e = t.class || "", o = i(r, e);
|
|
246
|
+
return l({
|
|
246
247
|
class: "circle-graph-wrap",
|
|
247
248
|
onSet: [
|
|
248
249
|
t.prop,
|
|
249
|
-
(n) => (n = E(n), n ? i(n, e) :
|
|
250
|
+
(n) => (n = E(n), n ? i(n, e) : o)
|
|
250
251
|
]
|
|
251
|
-
}, [
|
|
252
|
-
}), B = () => u(({ state: t }) =>
|
|
252
|
+
}, [o]);
|
|
253
|
+
}), B = () => u(({ state: t }) => l({
|
|
253
254
|
class: "absolute h-full rounded-full bg-primary transition-all duration-300",
|
|
254
255
|
style: ["width: [[progress]]%;", t]
|
|
255
256
|
})), M = d(
|
|
@@ -260,7 +261,7 @@ const a = {
|
|
|
260
261
|
* @returns {object}
|
|
261
262
|
*/
|
|
262
263
|
render() {
|
|
263
|
-
return
|
|
264
|
+
return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
|
|
264
265
|
B()
|
|
265
266
|
]);
|
|
266
267
|
},
|
|
@@ -304,8 +305,8 @@ const a = {
|
|
|
304
305
|
t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
|
|
305
306
|
}
|
|
306
307
|
}
|
|
307
|
-
), _ = ({ class: t, shape: r = "rectangle", width: e = "w-full", height:
|
|
308
|
-
class: `bg-muted animate-pulse ${e} ${
|
|
308
|
+
), _ = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: o = "h-4" }) => l({
|
|
309
|
+
class: `bg-muted animate-pulse ${e} ${o} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
|
|
309
310
|
}), c = {
|
|
310
311
|
top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
|
|
311
312
|
"top-right": "bottom-full left-full transform -translate-x-1 mb-2",
|
|
@@ -316,14 +317,14 @@ const a = {
|
|
|
316
317
|
left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
|
|
317
318
|
right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
|
|
318
319
|
}, F = (t) => c[t] || c.top, z = s(({ position: t = "top", content: r }, e) => {
|
|
319
|
-
const
|
|
320
|
-
return Array.isArray(e) === !1 && (e = [e]),
|
|
320
|
+
const o = F(t);
|
|
321
|
+
return Array.isArray(e) === !1 && (e = [e]), l({ class: "relative group inline-block" }, [
|
|
321
322
|
...e,
|
|
322
323
|
// Tooltip box
|
|
323
324
|
g({
|
|
324
325
|
class: `
|
|
325
326
|
absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
|
|
326
|
-
group-hover:opacity-100 transition-opacity duration-200 ${
|
|
327
|
+
group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
|
|
327
328
|
`
|
|
328
329
|
}, r)
|
|
329
330
|
]);
|
package/package.json
CHANGED