@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/date-range-picker/presets.js

@@ -0,0 +1,174 @@
+import { endOfDay, endOfMonth, endOfWeek, endOfYear, startOfDay, startOfMonth, startOfWeek, startOfYear, sub } from "date-fns";
+//#region src/components/date-range-picker/presets.ts
+var PRESET_IDS = [
+	"today",
+	"yesterday",
+	"this-week",
+	"last-week",
+	"this-month",
+	"last-month",
+	"this-year",
+	"last-year",
+	"last-1-hour",
+	"last-24-hours",
+	"last-1-day",
+	"past-7-days",
+	"last-7-days",
+	"last-14-days",
+	"last-15-days",
+	"past-30-days",
+	"last-30-days",
+	"last-4-weeks",
+	"last-90-days",
+	"last-3-months",
+	"last-6-months",
+	"last-1-year",
+	"last-5-years"
+];
+var PRESET_LABELS = {
+	"today": "Today",
+	"yesterday": "Yesterday",
+	"this-week": "This week",
+	"last-week": "Last week",
+	"this-month": "This month",
+	"last-month": "Last month",
+	"this-year": "This year",
+	"last-year": "Last year",
+	"last-1-hour": "Last 1 hour",
+	"last-24-hours": "Last 24 hours",
+	"last-1-day": "Last 1 day",
+	"past-7-days": "Past 7 days",
+	"last-7-days": "Last 7 days",
+	"last-14-days": "Last 14 days",
+	"last-15-days": "Last 15 days",
+	"past-30-days": "Past 30 days",
+	"last-30-days": "Last 30 days",
+	"last-4-weeks": "Last 4 weeks",
+	"last-90-days": "Last 90 days",
+	"last-3-months": "Last 3 months",
+	"last-6-months": "Last 6 months",
+	"last-1-year": "Last 1 year",
+	"last-5-years": "Last 5 years"
+};
+/**
+* Presets that end at the current moment instead of snapping to day
+* boundaries. `past-7-days` and `past-30-days` include today, unlike
+* `last-7-days` and `last-30-days`, which end yesterday at 23:59.
+*/
+var ROLLING_PRESET_IDS = [
+	"last-1-hour",
+	"last-24-hours",
+	"past-7-days",
+	"past-30-days"
+];
+function computeDateRange(id) {
+	const now = /* @__PURE__ */ new Date();
+	switch (id) {
+		case "today": return {
+			startDate: startOfDay(now),
+			endDate: endOfDay(now)
+		};
+		case "yesterday": {
+			const yesterday = sub(now, { days: 1 });
+			return {
+				startDate: startOfDay(yesterday),
+				endDate: endOfDay(yesterday)
+			};
+		}
+		case "this-week": return {
+			startDate: startOfWeek(now),
+			endDate: endOfDay(now)
+		};
+		case "last-week": {
+			const prev = sub(now, { weeks: 1 });
+			return {
+				startDate: startOfWeek(prev),
+				endDate: endOfWeek(prev)
+			};
+		}
+		case "this-month": return {
+			startDate: startOfMonth(now),
+			endDate: endOfDay(now)
+		};
+		case "last-month": {
+			const prev = sub(now, { months: 1 });
+			return {
+				startDate: startOfMonth(prev),
+				endDate: endOfMonth(prev)
+			};
+		}
+		case "this-year": return {
+			startDate: startOfYear(now),
+			endDate: endOfDay(now)
+		};
+		case "last-year": {
+			const prev = sub(now, { years: 1 });
+			return {
+				startDate: startOfYear(prev),
+				endDate: endOfYear(prev)
+			};
+		}
+		case "last-1-day": return {
+			startDate: startOfDay(sub(now, { days: 1 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-7-days": return {
+			startDate: startOfDay(sub(now, { days: 7 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-14-days": return {
+			startDate: startOfDay(sub(now, { days: 14 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-15-days": return {
+			startDate: startOfDay(sub(now, { days: 15 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-30-days": return {
+			startDate: startOfDay(sub(now, { days: 30 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-4-weeks": return {
+			startDate: startOfDay(sub(now, { days: 28 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-90-days": return {
+			startDate: startOfDay(sub(now, { days: 90 })),
+			endDate: endOfDay(sub(now, { days: 1 }))
+		};
+		case "last-3-months": return {
+			startDate: startOfMonth(sub(now, { months: 3 })),
+			endDate: endOfMonth(sub(now, { months: 1 }))
+		};
+		case "last-6-months": return {
+			startDate: startOfMonth(sub(now, { months: 6 })),
+			endDate: endOfMonth(sub(now, { months: 1 }))
+		};
+		case "last-1-year": return {
+			startDate: startOfMonth(sub(now, { years: 1 })),
+			endDate: endOfMonth(now)
+		};
+		case "last-5-years": return {
+			startDate: startOfMonth(sub(now, { years: 5 })),
+			endDate: endOfMonth(now)
+		};
+		case "last-1-hour": return {
+			startDate: sub(now, { hours: 1 }),
+			endDate: now
+		};
+		case "last-24-hours": return {
+			startDate: sub(now, { hours: 24 }),
+			endDate: now
+		};
+		case "past-7-days": return {
+			startDate: sub(now, { days: 7 }),
+			endDate: now
+		};
+		case "past-30-days": return {
+			startDate: sub(now, { days: 30 }),
+			endDate: now
+		};
+	}
+}
+//#endregion
+export { PRESET_IDS, PRESET_LABELS, ROLLING_PRESET_IDS, computeDateRange };

package/dist/components/date-time-picker/date-time-picker.js

@@ -0,0 +1,144 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { Input } from "../../core/input/input.js";
+import { Calendar } from "../calendar/calendar.js";
+import { FIELD_ICON_SIZE, FieldEndIcons, fieldEndPaddingClassName } from "../../core/field-end-icons.js";
+import { TimePicker } from "../time-picker/time-picker.js";
+import { DEFAULT_TIME, DEFAULT_TIME_STEP_SECONDS, formatTimeOfDay, isValidTimeString, mergeDateAndTime } from "./date-time-picker.utils.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+//#region src/components/date-time-picker/date-time-picker.tsx
+var OPEN_KEYS = /* @__PURE__ */ new Set([
+	"Enter",
+	" ",
+	"ArrowDown"
+]);
+/**
+* One read-only input that opens a dropdown holding a `Calendar` and a
+* `TimePicker`. Both edit a single `Date`.
+*
+* The time input is driven by a local draft string so a time typed before a
+* day is picked is kept, and so an incomplete time (the browser reports `""`
+* mid-edit) never snaps the committed value. Picking a day keeps the dropdown
+* open so the time can be set in the same interaction.
+*/
+function DateTimePicker(props) {
+	const { value, onChange, defaultValue, defaultTime = DEFAULT_TIME, timeStep = DEFAULT_TIME_STEP_SECONDS, clearable = false, clearLabel = "Clear", timeAriaLabel = "Time", formatDate, placeholder = "Pick date and time", label, size, hideIcon = false, disabled = false, required = false, rounded = false, error, errorContent, hintContent, calendarProps, open: controlledOpen, onOpenChange, name, className } = props;
+	const isControlled = "value" in props;
+	const [uncontrolledValue, setUncontrolledValue] = React$1.useState(defaultValue);
+	const current = isControlled ? value : uncontrolledValue;
+	const isOpenControlled = controlledOpen !== void 0;
+	const [internalOpen, setInternalOpen] = React$1.useState(false);
+	const isOpen = isOpenControlled ? controlledOpen : internalOpen;
+	const setOpen = (nextOpen) => {
+		if (!isOpenControlled) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	};
+	const [draftTime, setDraftTime] = React$1.useState(() => current ? formatTimeOfDay(current, timeStep) : "");
+	const currentMs = current?.getTime();
+	React$1.useEffect(() => {
+		if (currentMs === void 0) return;
+		setDraftTime(formatTimeOfDay(new Date(currentMs), timeStep));
+	}, [currentMs, timeStep]);
+	const commit = (next) => {
+		if (!isControlled) setUncontrolledValue(next);
+		onChange?.(next);
+	};
+	const handleDaySelect = (day) => {
+		if (!day) {
+			commit(void 0);
+			return;
+		}
+		commit(mergeDateAndTime(day, isValidTimeString(draftTime) ? draftTime : defaultTime));
+	};
+	const handleTimeChange = (event) => {
+		const nextTime = event.target.value;
+		setDraftTime(nextTime);
+		if (current && isValidTimeString(nextTime)) commit(mergeDateAndTime(current, nextTime));
+	};
+	const handleTimeBlur = () => {
+		if (current && !isValidTimeString(draftTime)) setDraftTime(formatTimeOfDay(current, timeStep));
+	};
+	const handleClear = (event) => {
+		event.stopPropagation();
+		setDraftTime("");
+		commit(void 0);
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (disabled || !OPEN_KEYS.has(event.key)) return;
+		event.preventDefault();
+		setOpen(true);
+	};
+	const displayValue = current ? (formatDate ?? ((d) => format(d, "PPP, p")))(current) : "";
+	const showClear = clearable && !disabled && current !== void 0;
+	const endIcon = /* @__PURE__ */ jsx(FieldEndIcons, {
+		onClear: showClear ? handleClear : void 0,
+		clearLabel,
+		icon: hideIcon ? void 0 : /* @__PURE__ */ jsx(CalendarIcon, {
+			size: FIELD_ICON_SIZE,
+			className: "text-muted-foreground"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex-1", className),
+		children: [/* @__PURE__ */ jsxs(Popover, {
+			open: isOpen,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				disabled,
+				children: /* @__PURE__ */ jsx(Input, {
+					type: "text",
+					readOnly: true,
+					value: displayValue,
+					placeholder,
+					label,
+					size,
+					disabled,
+					required,
+					rounded,
+					error,
+					errorContent,
+					hintContent,
+					endIcon,
+					onKeyDown: handleTriggerKeyDown,
+					"aria-haspopup": "dialog",
+					className: cn("cursor-pointer read-only:bg-background", fieldEndPaddingClassName(showClear, !hideIcon), !displayValue && "text-muted-foreground")
+				})
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				align: "start",
+				className: "w-auto overflow-hidden rounded-2xl p-1 shadow-lg",
+				children: [/* @__PURE__ */ jsx(Calendar, {
+					mode: "single",
+					selected: current,
+					onSelect: handleDaySelect,
+					defaultMonth: current,
+					showOutsideDays: true,
+					captionLayout: "dropdown",
+					...calendarProps
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border-t border-border px-3 pb-3 pt-3",
+					children: /* @__PURE__ */ jsx(TimePicker, {
+						"aria-label": timeAriaLabel,
+						value: draftTime,
+						onChange: handleTimeChange,
+						onBlur: handleTimeBlur,
+						step: timeStep,
+						size,
+						disabled
+					})
+				})]
+			})]
+		}), name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: current?.toISOString() ?? ""
+		})]
+	});
+}
+DateTimePicker.displayName = "DateTimePicker";
+//#endregion
+export { DateTimePicker };

package/dist/components/date-time-picker/date-time-picker.utils.js

@@ -0,0 +1,32 @@
+import { format, isValid, set, startOfDay } from "date-fns";
+//#region src/components/date-time-picker/date-time-picker.utils.ts
+/** `HH:mm` or `HH:mm:ss`, 24-hour clock — the value shape of a native time input. */
+var TIME_RE = /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d))?$/;
+var DEFAULT_TIME = "00:00";
+var DEFAULT_TIME_STEP_SECONDS = 60;
+function isValidTimeString(time) {
+	return TIME_RE.test(time);
+}
+/**
+* Applies a `HH:mm[:ss]` wall-clock time to the calendar day of `date`.
+* Falls back to midnight when `time` is not a valid time string.
+*/
+function mergeDateAndTime(date, time) {
+	const match = TIME_RE.exec(time);
+	if (!match) return startOfDay(date);
+	return set(startOfDay(date), {
+		hours: Number(match[1]),
+		minutes: Number(match[2]),
+		seconds: match[3] === void 0 ? 0 : Number(match[3])
+	});
+}
+/**
+* Formats the time-of-day of `date` for a native time input. A step below
+* 60 seconds needs the seconds field, otherwise the browser rejects the value.
+*/
+function formatTimeOfDay(date, timeStep) {
+	if (!isValid(date)) return "";
+	return format(date, timeStep < 60 ? "HH:mm:ss" : "HH:mm");
+}
+//#endregion
+export { DEFAULT_TIME, DEFAULT_TIME_STEP_SECONDS, TIME_RE, formatTimeOfDay, isValidTimeString, mergeDateAndTime };

package/dist/components/device-icon/device-icon.config.js

@@ -0,0 +1,194 @@
+import { AirConditionerIcon } from "./icons/air-conditioner.js";
+import { BlindIcon } from "./icons/blind.js";
+import { DimmerIcon } from "./icons/dimmer.js";
+import { ExtensionBoardIcon } from "./icons/extension-board.js";
+import { FanIcon } from "./icons/fan.js";
+import { KnobIcon } from "./icons/knob.js";
+import { LedStripIcon } from "./icons/led-strip.js";
+import { LightIcon } from "./icons/light.js";
+import { RefrigeratorIcon } from "./icons/refrigerator.js";
+import { RetroSwitchIcon } from "./icons/retro-switch.js";
+import { RouterIcon } from "./icons/router.js";
+import { SensorIcon } from "./icons/sensor.js";
+import { SocketIcon } from "./icons/socket.js";
+import { SwitchIcon } from "./icons/switch.js";
+import { ThermostatIcon } from "./icons/thermostat.js";
+import { WashingMachineIcon } from "./icons/washing-machine.js";
+//#region src/components/device-icon/device-icon.config.ts
+/**
+* To add a new device icon:
+* 1. Add the SVG file to src/assets/devices/
+* 2. Create a React component in ./icons/ following the existing pattern
+* 3. Export it from ./icons/index.ts
+* 4. Add an entry here with relevant keywords
+*/
+var deviceIconRegistry = {
+	AirConditioner: {
+		component: AirConditionerIcon,
+		keywords: [
+			"air conditioner",
+			"ac",
+			"aircon",
+			"cooling",
+			"air-conditioner",
+			"airconditioner"
+		]
+	},
+	Blind: {
+		component: BlindIcon,
+		keywords: [
+			"blind",
+			"blinds",
+			"curtain",
+			"shade",
+			"shutter",
+			"roller blind",
+			"window cover"
+		]
+	},
+	Dimmer: {
+		component: DimmerIcon,
+		keywords: [
+			"dimmer",
+			"dim",
+			"brightness",
+			"dimmable"
+		]
+	},
+	ExtensionBoard: {
+		component: ExtensionBoardIcon,
+		keywords: [
+			"extension board",
+			"extension",
+			"power strip",
+			"multi plug",
+			"surge protector",
+			"extension-board"
+		]
+	},
+	Fan: {
+		component: FanIcon,
+		keywords: [
+			"fan",
+			"ceiling fan",
+			"exhaust",
+			"blower",
+			"ventilator"
+		]
+	},
+	Knob: {
+		component: KnobIcon,
+		keywords: [
+			"knob",
+			"dial",
+			"rotary",
+			"regulator"
+		]
+	},
+	LedStrip: {
+		component: LedStripIcon,
+		keywords: [
+			"led strip",
+			"led",
+			"strip light",
+			"rgb",
+			"led-strip",
+			"ledstrip",
+			"light strip"
+		]
+	},
+	Light: {
+		component: LightIcon,
+		keywords: [
+			"light",
+			"lightbulb",
+			"bulb",
+			"lamp",
+			"lite",
+			"tubelight",
+			"tube light"
+		]
+	},
+	Refrigerator: {
+		component: RefrigeratorIcon,
+		keywords: [
+			"refrigerator",
+			"fridge",
+			"freezer",
+			"cooler"
+		]
+	},
+	RetroSwitch: {
+		component: RetroSwitchIcon,
+		keywords: [
+			"retro switch",
+			"retro",
+			"vintage switch",
+			"retro-switch",
+			"retroswitch"
+		]
+	},
+	Router: {
+		component: RouterIcon,
+		keywords: [
+			"router",
+			"wifi",
+			"modem",
+			"gateway",
+			"access point",
+			"wi-fi"
+		]
+	},
+	Sensor: {
+		component: SensorIcon,
+		keywords: [
+			"sensor",
+			"detector",
+			"probe",
+			"motion sensor",
+			"pir"
+		]
+	},
+	Socket: {
+		component: SocketIcon,
+		keywords: [
+			"socket",
+			"outlet",
+			"plug",
+			"power point",
+			"wall socket"
+		]
+	},
+	Switch: {
+		component: SwitchIcon,
+		keywords: [
+			"switch",
+			"toggle",
+			"on off",
+			"swtch",
+			"on/off"
+		]
+	},
+	Thermostat: {
+		component: ThermostatIcon,
+		keywords: [
+			"thermostat",
+			"temperature",
+			"climate",
+			"hvac",
+			"temp control"
+		]
+	},
+	WashingMachine: {
+		component: WashingMachineIcon,
+		keywords: [
+			"washing machine",
+			"washer",
+			"laundry",
+			"washing-machine",
+			"washingmachine"
+		]
+	}
+};
+//#endregion
+export { deviceIconRegistry };

package/dist/components/device-icon/device-icon.js

@@ -0,0 +1,17 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import { matchDevice } from "./match-device.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/device-icon/device-icon.tsx
+function DeviceIcon({ type, size = 18, color, fallback: Fallback, className }) {
+	const Icon = matchDevice(type) ?? Fallback;
+	if (!Icon) return null;
+	const resolved = color ? resolveColor(color, "text") : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex", resolved?.className, className),
+		style: resolved?.style,
+		children: /* @__PURE__ */ jsx(Icon, { size })
+	});
+}
+//#endregion
+export { DeviceIcon };

package/dist/components/device-icon/icons/air-conditioner.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/device-icon/icons/air-conditioner.tsx
+function AirConditionerIcon({ size = 18 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 800 759.42",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m669.22,400.82H129.14C57.8,400.82,0,343.02,0,271.67V33.96C0,15.35,15.35,0,33.96,0h732.08c18.61,0,33.96,15.35,33.96,33.96v237.71c-1.63,71.35-59.43,129.14-130.78,129.14ZM66.29,67.92v203.76c0,33.96,28.9,62.86,62.86,62.86h540.08c33.96,0,62.86-28.9,62.86-62.86V67.92H66.29Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m630.2,256.49H168.16c-18.61,0-33.96-15.35-33.96-33.96s15.18-33.96,33.96-33.96h462.04c18.61,0,33.96,15.35,33.96,33.96s-15.35,33.96-33.96,33.96Z" }),
+			/* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("path", { d: "m195.27,759.18c-18.61-3.43-28.9-22.04-25.47-39.02,8.49-37.39,0-56-10.12-79.84-11.92-28.9-27.1-66.29,0-122.29,8.49-16.98,27.1-23.84,44.08-15.35,16.98,8.49,23.84,27.1,15.35,44.08-13.55,28.9-8.49,42.45,1.63,67.92,10.12,27.1,25.47,62.86,13.55,120.65-3.27,13.71-16.16,25.31-39.02,23.84Z" }),
+				/* @__PURE__ */ jsx("path", { d: "m402.61,759.18c-18.61-3.43-28.9-22.04-25.47-39.02,8.49-37.39,0-56-10.12-79.84-11.92-28.9-27.1-66.29,0-122.29,8.49-16.98,27.1-23.84,44.08-15.35,16.98,8.49,23.84,27.1,15.35,44.08-13.55,28.9-8.49,42.45,1.63,67.92,10.12,27.1,25.47,62.86,13.55,120.65-3.43,13.71-17.63,25.96-39.02,23.84Z" }),
+				/* @__PURE__ */ jsx("path", { d: "m609.8,759.18c-18.61-3.43-28.9-22.04-25.47-39.02,8.49-37.39,0-56-10.12-79.84-11.92-28.9-27.1-66.29,0-122.29,8.49-16.98,27.1-23.84,44.08-15.35s23.84,27.1,15.35,44.08c-13.55,28.9-8.49,42.45,1.63,67.92,10.12,27.1,25.47,62.86,13.55,120.65-3.43,13.71-17.14,25.63-39.02,23.84Z" })
+			] })
+		]
+	});
+}
+//#endregion
+export { AirConditionerIcon };

package/dist/components/device-icon/icons/blind.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/device-icon/icons/blind.tsx
+function BlindIcon({ size = 18 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 488.13 450",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m448.56,64H39.56V0h409v64Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m468.88,51.25H19.25C8.66,51.25,0,42.59,0,32h0C0,21.41,8.66,12.75,19.25,12.75h449.63c10.59,0,19.25,8.66,19.25,19.25h0c0,10.59-8.66,19.25-19.25,19.25Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m408.06,146H80.06v-51.19h328v51.19Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m408.06,228.12H80.06v-51.19h328v51.19Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m408.06,309.12H80.06v-51.19h328v51.19Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m408.06,390.12H80.06v-51.19h328v51.19Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m448.56,450H39.56v-29h409v29Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m458.12,322.5c0,12.43-6.49,22.5-14.5,22.5s-14.5-10.07-14.5-22.5,6.49-22.5,14.5-22.5,14.5,10.07,14.5,22.5Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m448.62,310h-10V94h10v216Z" })
+		]
+	});
+}
+//#endregion
+export { BlindIcon };

package/dist/components/device-icon/icons/dimmer.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/device-icon/icons/dimmer.tsx
+function DimmerIcon({ size = 18 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 753.17 753.17",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("path", { d: "m376.58,753.17c-50.83,0-100.15-9.96-146.59-29.61-44.85-18.97-85.12-46.12-119.69-80.69-34.58-34.58-61.72-74.85-80.69-119.69C9.96,476.73,0,427.41,0,376.58s9.96-100.15,29.61-146.59c18.97-44.85,46.12-85.12,80.69-119.69s74.85-61.72,119.69-80.69C276.44,9.96,325.76,0,376.58,0s100.15,9.96,146.59,29.61c44.85,18.97,85.12,46.12,119.69,80.69,34.57,34.58,61.72,74.85,80.69,119.69,19.64,46.45,29.61,95.77,29.61,146.59s-9.96,100.15-29.61,146.59c-18.97,44.85-46.12,85.12-80.69,119.69-34.58,34.57-74.85,61.72-119.69,80.69-46.45,19.64-95.77,29.61-146.59,29.61Zm0-693.17c-84.56,0-164.06,32.93-223.86,92.73-59.79,59.79-92.73,139.3-92.73,223.86s32.93,164.06,92.73,223.86c59.79,59.79,139.3,92.72,223.86,92.72s164.06-32.93,223.86-92.72,92.72-139.3,92.72-223.86-32.93-164.06-92.72-223.86c-59.79-59.79-139.3-92.73-223.86-92.73Z" }), /* @__PURE__ */ jsx("path", { d: "m244.11,569.94c-6.79,0-13.42-2.3-18.76-6.59-50.75-40.68-82.62-98.68-89.75-163.33-7.12-64.65,11.35-128.2,52.03-178.96,40.68-50.75,98.68-82.62,163.33-89.75,64.65-7.12,128.2,11.36,178.96,52.03,12.93,10.36,15.01,29.24,4.65,42.17l-267.05,333.19c-4.98,6.21-12.21,10.19-20.12,11.06-1.1.12-2.19.18-3.29.18Zm133.88-380.12c-6.79,0-13.61.37-20.45,1.13-48.72,5.37-92.43,29.39-123.09,67.63-56.89,70.98-52.33,171.68,6.55,237.27l226.48-282.57c-27.31-15.41-57.96-23.47-89.48-23.47Z" })]
+	});
+}
+//#endregion
+export { DimmerIcon };

package/dist/components/device-icon/icons/extension-board.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/device-icon/icons/extension-board.tsx
+function ExtensionBoardIcon({ size = 18 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 795.86 797.25",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m377.63,0v711.25h184.71v37.29H154.88v-220.2h99.05v-117.95h-20.46l27.49-107.29h-46.3v-67.05h-48.8v67.05h-70.76v-67.05h-48.8v67.05H0l27.49,107.29H7.03v117.95h99.05v268.91h505.07v-86.01h184.71V0h-418.23Zm-179.53,351.81l-15.01,58.58h-105.24l-15.01-58.58h135.25Zm-142.28,127.81v-20.52h149.3v20.52H55.83Zm691.23,182.91h-320.63V48.72h320.63v613.82h0Z" }),
+			/* @__PURE__ */ jsx("path", { d: "m586.74,377.26c-70.28,0-127.46,57.08-127.46,127.24s57.18,127.24,127.46,127.24,127.46-57.08,127.46-127.24-57.18-127.24-127.46-127.24Zm0,205.76c-43.37,0-78.66-35.22-78.66-78.52s35.29-78.52,78.66-78.52,78.66,35.22,78.66,78.52-35.28,78.52-78.66,78.52Z" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "603.83",
+				y: "488.14",
+				width: "31.72",
+				height: "31.66"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "537.95",
+				y: "488.14",
+				width: "31.72",
+				height: "31.66"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m586.74,86.15c-70.28,0-127.46,57.08-127.46,127.24s57.18,127.24,127.46,127.24,127.46-57.08,127.46-127.24-57.18-127.24-127.46-127.24Zm0,205.76c-43.37,0-78.66-35.22-78.66-78.52s35.29-78.52,78.66-78.52,78.66,35.22,78.66,78.52-35.28,78.52-78.66,78.52Z" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "603.83",
+				y: "197.04",
+				width: "31.72",
+				height: "31.66"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "537.95",
+				y: "197.04",
+				width: "31.72",
+				height: "31.66"
+			})
+		]
+	});
+}
+//#endregion
+export { ExtensionBoardIcon };

package/dist/components/device-icon/icons/fan.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/device-icon/icons/fan.tsx
+function FanIcon({ size = 18 }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 512 512",
+		fill: "currentColor",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", { d: "m500.49,287.13c-10.14-14.45-26-24.08-43.5-26.4l-133.94-17.77s-.03-.05-.04-.07l51.58-124.88c6.74-16.32,6.34-34.86-1.11-50.88-7.46-16.05-21.42-28.34-38.3-33.72-25.53-8.14-52.16-12.27-79.18-12.27s-53.66,4.12-79.18,12.27c-16.88,5.38-30.84,17.68-38.3,33.72-7.44,16.01-7.85,34.56-1.11,50.88l51.58,124.88s-.03.05-.04.07l-133.94,17.77c-17.5,2.32-33.36,11.94-43.5,26.4-10.17,14.49-13.83,32.72-10.06,50.03,5.72,26.18,15.46,51.31,28.97,74.7,13.51,23.4,30.4,44.41,50.21,62.44,11.72,10.67,27.07,16.56,42.8,16.56,1.85,0,3.7-.08,5.56-.24,17.59-1.56,33.85-10.48,44.61-24.48l82.33-107.08h.14l82.33,107.08c10.76,14,27.02,22.92,44.61,24.48,1.85.16,3.7.24,5.56.24,15.73,0,31.07-5.89,42.8-16.56,19.81-18.03,36.71-39.04,50.21-62.44,13.51-23.4,23.25-48.53,28.97-74.7,3.78-17.31.11-35.55-10.06-50.03h.01-.01ZM176.44,101.88c-2.28-5.51-2.15-11.53.37-16.94,2.53-5.45,7.09-9.46,12.83-11.29,21.37-6.81,43.69-10.27,66.35-10.27s44.98,3.45,66.35,10.27c5.74,1.83,10.3,5.84,12.83,11.29,2.52,5.41,2.65,11.43.37,16.94l-45.51,110.2c-10.28-5.05-21.83-7.9-34.03-7.9s-23.76,2.85-34.03,7.9l-45.52-110.2h0Zm-36.34,338.51c-3.63,4.73-8.91,7.63-14.85,8.15-5.98.53-11.74-1.41-16.19-5.47-16.59-15.1-30.74-32.7-42.07-52.32s-19.49-40.68-24.28-62.6c-1.29-5.89-.09-11.84,3.36-16.76,3.43-4.89,8.57-8,14.48-8.79l118.2-15.68c1.66,24.52,14.78,45.94,34.04,58.94l-72.68,94.52h0Zm122.38-124.17s-.05,0-.07.01c-2.08.38-4.22.59-6.42.59s-4.34-.21-6.42-.6h-.06c-16.32-3.05-28.72-17.4-28.72-34.59,0-19.41,15.79-35.2,35.2-35.2s35.2,15.79,35.2,35.2c0,17.19-12.39,31.54-28.71,34.59h0Zm206.79,11.94c-4.78,21.91-12.95,42.97-24.28,62.59s-25.48,37.23-42.07,52.32c-4.46,4.06-10.22,5.99-16.19,5.47-5.94-.52-11.22-3.42-14.85-8.15l-72.68-94.52c19.26-12.99,32.37-34.42,34.03-58.94l118.2,15.68c5.91.78,11.06,3.91,14.48,8.79,3.45,4.92,4.65,10.87,3.36,16.76h0Z" })
+	});
+}
+//#endregion
+export { FanIcon };