@diwauhris/ui 1.4.2 → 1.4.4

package/lib/index.cjs

@@ -4762,6 +4762,52 @@ 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", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			fontWeight: 600,
+			fontSize: "0.8125rem",
+			color: "#334155"
+		},
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"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 })]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -5016,6 +5062,7 @@ exports.SkeletonText = SkeletonText;
 exports.Spinner = Spinner;
 exports.Statistic = Statistic;
 exports.StatusBadge = StatusBadge;
+exports.StatusDot = StatusDot;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
 exports.Tab = Tab;

package/lib/index.mjs

@@ -4739,6 +4739,52 @@ 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", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			fontWeight: 600,
+			fontSize: "0.8125rem",
+			color: "#334155"
+		},
+		className,
+		children: [/* @__PURE__ */ jsx("span", {
+			"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 })]
+	});
+}
+//#endregion
 //#region src/ui-library/gallery/status-actions/statusActions.ts
 /**
 * statusActions — Gallery-native lifecycle transition utilities.
@@ -4922,4 +4968,4 @@ var shadow = {
 	overlay: "shadow-xl"
 };
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, Avatar, Badge, BarChart, Breadcrumb, Button, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, Kanban, LineChart, Menu, Modal, OtpInput, PageHeader, Pagination, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, Avatar, Badge, BarChart, Breadcrumb, Button, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, Heatmap, IconButton, Input, Kanban, LineChart, Menu, Modal, OtpInput, PageHeader, Pagination, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, Statistic, StatusBadge, StatusDot, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toaster, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, toast, typography_exports as typography, useFieldContext };

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

@@ -0,0 +1,19 @@
+/**
+ * StatusDot — Design System Component
+ *
+ * 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" />
+ */
+export type StatusDotStatus = 'active' | 'locked' | 'inactive' | 'pending';
+export interface StatusDotProps {
+    status: StatusDotStatus;
+    label?: string;
+    className?: string;
+}
+export declare function StatusDot({ status, label, className }: StatusDotProps): import("react").JSX.Element;

package/lib/types/ui-library/index.d.ts

@@ -122,6 +122,8 @@ export { Heatmap } from './gallery/heatmap/Heatmap';
 export type { HeatmapProps, HeatmapDataPoint, HeatmapScale } from './gallery/heatmap/Heatmap';
 export { Statistic } from './gallery/stat-card/Statistic';
 export type { StatisticProps, StatisticTrend, StatisticVariant } from './gallery/stat-card/Statistic';
+export { StatusDot } from './gallery/status-dot/StatusDot';
+export type { StatusDotProps, StatusDotStatus } from './gallery/status-dot/StatusDot';
 export { Toaster, toast } from 'sonner';
 export { statusMenuItems } from './gallery/status-actions/statusActions';
 export type { ActionMenuItem, Lifecycle, StatusTransitionRequest, StatusMenuOptions } from './gallery/status-actions/statusActions';

package/package.json

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