@diwauhris/ui 1.4.3 → 1.5.0

package/lib/assets/ui.css

@@ -290,6 +290,11 @@
   inset: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .inset-x-2 {
   left: 0.5rem;
   right: 0.5rem;
@@ -896,6 +901,14 @@
   min-height: 32px;
 }
 
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
+.min-h-\[44px\] {
+  min-height: 44px;
+}
+
 .min-h-\[48px\] {
   min-height: 48px;
 }
@@ -1779,6 +1792,10 @@
   align-self: stretch;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1872,6 +1889,11 @@
   border-bottom-right-radius: 0.75rem;
 }
 
+.rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -2857,6 +2879,10 @@
   padding: 0.5rem;
 }
 
+.p-2\.5 {
+  padding: 0.625rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -3852,6 +3878,22 @@
   outline-style: solid;
 }
 
+.outline-2 {
+  outline-width: 2px;
+}
+
+.outline-offset-2 {
+  outline-offset: 2px;
+}
+
+.outline-emerald-400 {
+  outline-color: #34d399;
+}
+
+.outline-rose-400 {
+  outline-color: #fb7185;
+}
+
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4511,6 +4553,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-white\/10:hover {
+  background-color: rgb(255 255 255 / 0.1);
+}
 .hover\:bg-white\/20:hover {
   background-color: rgb(255 255 255 / 0.2);
 }
@@ -4920,6 +4965,9 @@ body {
   .sm\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .sm\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .sm\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -4948,15 +4996,34 @@ body {
   }
 }
 @media (min-width: 768px) {
+  .md\:relative {
+    position: relative;
+  }
+  .md\:inset-auto {
+    inset: auto;
+  }
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .md\:block {
+    display: block;
+  }
   .md\:flex {
     display: flex;
   }
+  .md\:hidden {
+    display: none;
+  }
   .md\:w-56 {
     width: 14rem;
   }
   .md\:w-80 {
     width: 20rem;
   }
+  .md\:w-96 {
+    width: 24rem;
+  }
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -4981,6 +5048,9 @@ body {
   .md\:self-auto {
     align-self: auto;
   }
+  .md\:rounded-2xl {
+    border-radius: 1rem;
+  }
   .md\:p-6 {
     padding: 1.5rem;
   }
@@ -4991,6 +5061,14 @@ body {
   .md\:pt-4 {
     padding-top: 1rem;
   }
+  .md\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 @media (min-width: 1024px) {
   .lg\:col-span-2 {
@@ -5024,6 +5102,14 @@ body {
     padding-left: 3rem;
     padding-right: 3rem;
   }
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 @media (min-width: 1280px) {
   .xl\:grid-cols-4 {

package/lib/index.cjs

@@ -4763,12 +4763,47 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
 }
 //#endregion
 //#region src/ui-library/gallery/status-dot/StatusDot.tsx
+var DOT_STYLES = {
+	active: {
+		bg: "#10b981",
+		shadow: "0 0 0 3px rgba(16,185,129,0.18)"
+	},
+	locked: {
+		bg: "#ef4444",
+		shadow: "0 0 0 3px rgba(239,68,68,0.18)"
+	},
+	inactive: {
+		bg: "#f59e0b",
+		shadow: "0 0 0 3px rgba(245,158,11,0.18)"
+	},
+	pending: {
+		bg: "#eab308",
+		shadow: "0 0 0 3px rgba(234,179,8,0.18)"
+	}
+};
 function StatusDot({ status, label, className = "" }) {
+	const dot = DOT_STYLES[status];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: `status-dot-cell ${className}`,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			fontWeight: 600,
+			fontSize: "0.8125rem",
+			color: "#334155"
+		},
+		className,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: `status-dot ${status}`,
-			"aria-hidden": "true"
+			"aria-hidden": "true",
+			style: {
+				display: "inline-block",
+				width: 8,
+				height: 8,
+				borderRadius: "50%",
+				flexShrink: 0,
+				backgroundColor: dot.bg,
+				boxShadow: dot.shadow
+			}
 		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label })]
 	});
 }

package/lib/index.mjs

@@ -4740,12 +4740,47 @@ function Statistic({ label, value, helper, icon: Icon, trend, trendLabel, varian
 }
 //#endregion
 //#region src/ui-library/gallery/status-dot/StatusDot.tsx
+var DOT_STYLES = {
+	active: {
+		bg: "#10b981",
+		shadow: "0 0 0 3px rgba(16,185,129,0.18)"
+	},
+	locked: {
+		bg: "#ef4444",
+		shadow: "0 0 0 3px rgba(239,68,68,0.18)"
+	},
+	inactive: {
+		bg: "#f59e0b",
+		shadow: "0 0 0 3px rgba(245,158,11,0.18)"
+	},
+	pending: {
+		bg: "#eab308",
+		shadow: "0 0 0 3px rgba(234,179,8,0.18)"
+	}
+};
 function StatusDot({ status, label, className = "" }) {
+	const dot = DOT_STYLES[status];
 	return /* @__PURE__ */ jsxs("div", {
-		className: `status-dot-cell ${className}`,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			fontWeight: 600,
+			fontSize: "0.8125rem",
+			color: "#334155"
+		},
+		className,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: `status-dot ${status}`,
-			"aria-hidden": "true"
+			"aria-hidden": "true",
+			style: {
+				display: "inline-block",
+				width: 8,
+				height: 8,
+				borderRadius: "50%",
+				flexShrink: 0,
+				backgroundColor: dot.bg,
+				boxShadow: dot.shadow
+			}
 		}), label && /* @__PURE__ */ jsx("span", { children: label })]
 	});
 }

package/lib/types/ui-library/gallery/status-dot/StatusDot.d.ts

@@ -4,6 +4,8 @@
  * A coloured glowing dot paired with a label. Used in tables to indicate
  * account or entity status at a glance.
  *
+ * Self-contained: uses inline styles so it works without any external CSS.
+ *
  * Usage:
  *   <StatusDot status="active" label="Active" />
  *   <StatusDot status="locked" label="Locked" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.4.3",
+  "version": "1.5.0",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [