@diwauhris/ui 1.4.3 → 1.4.4
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/lib/index.cjs
CHANGED
|
@@ -4763,12 +4763,47 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
|
|
|
4763
4763
|
}
|
|
4764
4764
|
//#endregion
|
|
4765
4765
|
//#region src/ui-library/gallery/status-dot/StatusDot.tsx
|
|
4766
|
+
var DOT_STYLES = {
|
|
4767
|
+
active: {
|
|
4768
|
+
bg: "#10b981",
|
|
4769
|
+
shadow: "0 0 0 3px rgba(16,185,129,0.18)"
|
|
4770
|
+
},
|
|
4771
|
+
locked: {
|
|
4772
|
+
bg: "#ef4444",
|
|
4773
|
+
shadow: "0 0 0 3px rgba(239,68,68,0.18)"
|
|
4774
|
+
},
|
|
4775
|
+
inactive: {
|
|
4776
|
+
bg: "#f59e0b",
|
|
4777
|
+
shadow: "0 0 0 3px rgba(245,158,11,0.18)"
|
|
4778
|
+
},
|
|
4779
|
+
pending: {
|
|
4780
|
+
bg: "#eab308",
|
|
4781
|
+
shadow: "0 0 0 3px rgba(234,179,8,0.18)"
|
|
4782
|
+
}
|
|
4783
|
+
};
|
|
4766
4784
|
function StatusDot({ status, label, className = "" }) {
|
|
4785
|
+
const dot = DOT_STYLES[status];
|
|
4767
4786
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
4768
|
-
|
|
4787
|
+
style: {
|
|
4788
|
+
display: "inline-flex",
|
|
4789
|
+
alignItems: "center",
|
|
4790
|
+
gap: 8,
|
|
4791
|
+
fontWeight: 600,
|
|
4792
|
+
fontSize: "0.8125rem",
|
|
4793
|
+
color: "#334155"
|
|
4794
|
+
},
|
|
4795
|
+
className,
|
|
4769
4796
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
4770
|
-
|
|
4771
|
-
|
|
4797
|
+
"aria-hidden": "true",
|
|
4798
|
+
style: {
|
|
4799
|
+
display: "inline-block",
|
|
4800
|
+
width: 8,
|
|
4801
|
+
height: 8,
|
|
4802
|
+
borderRadius: "50%",
|
|
4803
|
+
flexShrink: 0,
|
|
4804
|
+
backgroundColor: dot.bg,
|
|
4805
|
+
boxShadow: dot.shadow
|
|
4806
|
+
}
|
|
4772
4807
|
}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
|
|
4773
4808
|
});
|
|
4774
4809
|
}
|
package/lib/index.mjs
CHANGED
|
@@ -4740,12 +4740,47 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
|
|
|
4740
4740
|
}
|
|
4741
4741
|
//#endregion
|
|
4742
4742
|
//#region src/ui-library/gallery/status-dot/StatusDot.tsx
|
|
4743
|
+
var DOT_STYLES = {
|
|
4744
|
+
active: {
|
|
4745
|
+
bg: "#10b981",
|
|
4746
|
+
shadow: "0 0 0 3px rgba(16,185,129,0.18)"
|
|
4747
|
+
},
|
|
4748
|
+
locked: {
|
|
4749
|
+
bg: "#ef4444",
|
|
4750
|
+
shadow: "0 0 0 3px rgba(239,68,68,0.18)"
|
|
4751
|
+
},
|
|
4752
|
+
inactive: {
|
|
4753
|
+
bg: "#f59e0b",
|
|
4754
|
+
shadow: "0 0 0 3px rgba(245,158,11,0.18)"
|
|
4755
|
+
},
|
|
4756
|
+
pending: {
|
|
4757
|
+
bg: "#eab308",
|
|
4758
|
+
shadow: "0 0 0 3px rgba(234,179,8,0.18)"
|
|
4759
|
+
}
|
|
4760
|
+
};
|
|
4743
4761
|
function StatusDot({ status, label, className = "" }) {
|
|
4762
|
+
const dot = DOT_STYLES[status];
|
|
4744
4763
|
return /* @__PURE__ */ jsxs("div", {
|
|
4745
|
-
|
|
4764
|
+
style: {
|
|
4765
|
+
display: "inline-flex",
|
|
4766
|
+
alignItems: "center",
|
|
4767
|
+
gap: 8,
|
|
4768
|
+
fontWeight: 600,
|
|
4769
|
+
fontSize: "0.8125rem",
|
|
4770
|
+
color: "#334155"
|
|
4771
|
+
},
|
|
4772
|
+
className,
|
|
4746
4773
|
children: [/* @__PURE__ */ jsx("span", {
|
|
4747
|
-
|
|
4748
|
-
|
|
4774
|
+
"aria-hidden": "true",
|
|
4775
|
+
style: {
|
|
4776
|
+
display: "inline-block",
|
|
4777
|
+
width: 8,
|
|
4778
|
+
height: 8,
|
|
4779
|
+
borderRadius: "50%",
|
|
4780
|
+
flexShrink: 0,
|
|
4781
|
+
backgroundColor: dot.bg,
|
|
4782
|
+
boxShadow: dot.shadow
|
|
4783
|
+
}
|
|
4749
4784
|
}), label && /* @__PURE__ */ jsx("span", { children: label })]
|
|
4750
4785
|
});
|
|
4751
4786
|
}
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
* A coloured glowing dot paired with a label. Used in tables to indicate
|
|
5
5
|
* account or entity status at a glance.
|
|
6
6
|
*
|
|
7
|
+
* Self-contained: uses inline styles so it works without any external CSS.
|
|
8
|
+
*
|
|
7
9
|
* Usage:
|
|
8
10
|
* <StatusDot status="active" label="Active" />
|
|
9
11
|
* <StatusDot status="locked" label="Locked" />
|