@vezham/react 26.0.0-alpha.4 → 26.0.0-alpha.6

package/dist/lib/components/panel/footer/control-center/editor.js

@@ -0,0 +1,72 @@
+import { useSyncExternalStore } from "react";
+//#region src/lib/components/panel/footer/control-center/editor.tsx
+var subscribe = (onChange) => {
+	window.addEventListener("storage", onChange);
+	window.addEventListener("vx:tile-preferences", onChange);
+	return () => {
+		window.removeEventListener("storage", onChange);
+		window.removeEventListener("vx:tile-preferences", onChange);
+	};
+};
+var useTileEditor = (tiles, storageKey = "vx:control-center") => {
+	const snapshot = useSyncExternalStore(subscribe, () => localStorage.getItem(storageKey) ?? "", () => "");
+	let order = [];
+	let hidden = [];
+	try {
+		const value = JSON.parse(snapshot || "{}");
+		if (Array.isArray(value.order)) order = [...new Set(value.order.filter((id) => typeof id === "string"))];
+		if (Array.isArray(value.hidden)) hidden = value.hidden.filter((id) => typeof id === "string");
+	} catch {}
+	const tilesById = new Map(tiles.map((tile) => [tile.id, tile]));
+	const orderedIds = new Set(order);
+	const hiddenIds = new Set(hidden);
+	const orderedTiles = [...order.flatMap((id) => {
+		const tile = tilesById.get(id);
+		return tile ? [tile] : [];
+	}), ...tiles.filter((tile) => !orderedIds.has(tile.id))];
+	const save = (nextOrder, nextHidden) => {
+		localStorage.setItem(storageKey, JSON.stringify({
+			order: nextOrder,
+			hidden: nextHidden
+		}));
+		window.dispatchEvent(new Event("vx:tile-preferences"));
+	};
+	return {
+		editor: {
+			items: orderedTiles.map((tile) => ({
+				id: tile.id,
+				label: tile.label ?? tile.title ?? tile.id.replaceAll("-", " "),
+				visible: !hiddenIds.has(tile.id),
+				editable: tile.editable !== false
+			})),
+			onVisibilityChange: (id, visible) => {
+				if (tilesById.get(id)?.editable === false) return;
+				save(order, visible ? hidden.filter((value) => value !== id) : [...hidden.filter((value) => value !== id), id]);
+			},
+			onMove: (id, offset) => {
+				const ids = orderedTiles.map((tile) => tile.id);
+				const index = ids.indexOf(id), target = index + offset;
+				if (index < 0 || target < 0 || target >= ids.length) return;
+				ids.splice(index, 1);
+				ids.splice(target, 0, id);
+				save(ids, hidden);
+			},
+			onPlace: (id, target) => {
+				if (!tilesById.has(id) || tilesById.get(id)?.editable === false) return;
+				const ids = orderedTiles.map((tile) => tile.id);
+				const from = ids.indexOf(id);
+				const to = target ? ids.indexOf(target) : ids.length - 1;
+				if (from >= 0 && to >= 0 && from !== to) {
+					ids.splice(from, 1);
+					ids.splice(to, 0, id);
+				}
+				save(ids, hidden.filter((value) => value !== id));
+			},
+			onReset: () => save(tiles.map((tile) => tile.id), [])
+		},
+		orderedTiles,
+		visibleTiles: orderedTiles.filter((tile) => !hiddenIds.has(tile.id))
+	};
+};
+//#endregion
+export { useTileEditor };

package/dist/lib/components/panel/footer/control-center/footer-context.d.ts

@@ -0,0 +1,6 @@
+export declare const FooterControlCenterContext: import("react").Context<{
+    compact: boolean;
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+} | null>;
+//# sourceMappingURL=footer-context.d.ts.map

package/dist/lib/components/panel/footer/control-center/footer-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer-context.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/footer-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,0BAA0B;aAC5B,OAAO;YACR,OAAO;kBACD,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;SACxB,CAAA"}

package/dist/lib/components/panel/footer/control-center/footer-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/lib/components/panel/footer/control-center/footer-context.ts
+var FooterControlCenterContext = createContext(null);
+//#endregion
+export { FooterControlCenterContext };

package/dist/lib/components/panel/footer/control-center/index.d.ts

@@ -0,0 +1,15 @@
+export { ControlCenter, TileContent } from './control-center';
+export type { ControlCenterProps, TileDefinition } from './types';
+export type { AppearanceAdapter, ThemeMode, LanguageAdapter, Option } from './types';
+export { AppearanceToggle, AppearanceTile, AppearanceSettings } from './appearance';
+export { ThemeTile, ThemeSettings } from './theme';
+export { LanguageTile, LanguageSettings, DocumentLanguageTile, DocumentLanguageSettings } from './language';
+export { DirectionTile, DirectionSettings, DirectionToggle } from './direction';
+export { ActionTile } from './tile';
+export { Options } from './options';
+export { PreviewWiFiTile, PreviewWiFiSettings, PreviewBluetoothTile, PreviewBluetoothSettings, PreviewAirDropTile, PreviewAirDropSettings, PreviewFocusTile, PreviewStageManagerTile, PreviewMirroringTile, PreviewMirroringSettings, PreviewMediaTile, PreviewDisplayTile, PreviewSoundTile } from './preview';
+export { controlCenterTileVariants, controlCenterVariants, optionTileVariants } from './variant';
+export { ConfiguredControlCenter, resolveTiles } from './configured';
+export type { ConfiguredControlCenterProps, ControlCenterActionEvent } from './configured';
+export type { BuiltinTileType, TileConfig, ControlCenterConfig, ControlCenterContext, ControlCenterI18n, TileRegistration } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/panel/footer/control-center/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE7D,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACjE,YAAY,EACV,iBAAiB,EACjB,SAAS,EACT,eAAe,EACf,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,kBAAkB,EACnB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,wBAAwB,EACzB,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,WAAW,CAAA;AAElB,OAAO,EAAE,uBAAuB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AACpE,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,EACzB,MAAM,cAAc,CAAA;AACrB,YAAY,EACV,eAAe,EACf,UAAU,EACV,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,SAAS,CAAA"}

package/dist/lib/components/panel/footer/control-center/index.js

@@ -0,0 +1,11 @@
+import { controlCenterTileVariants, controlCenterVariants, optionTileVariants } from "./variant.js";
+import { Options } from "./options.js";
+import { ActionTile } from "./tile.js";
+import { AppearanceSettings, AppearanceTile, AppearanceToggle } from "./appearance.js";
+import { PreviewAirDropSettings, PreviewAirDropTile, PreviewBluetoothSettings, PreviewBluetoothTile, PreviewDisplayTile, PreviewFocusTile, PreviewMediaTile, PreviewMirroringSettings, PreviewMirroringTile, PreviewSoundTile, PreviewStageManagerTile, PreviewWiFiSettings, PreviewWiFiTile } from "./preview.js";
+import { ControlCenter, TileContent } from "./control-center.js";
+import { DirectionSettings, DirectionTile, DirectionToggle } from "./direction.js";
+import { DocumentLanguageSettings, DocumentLanguageTile, LanguageSettings, LanguageTile } from "./language.js";
+import { ThemeSettings, ThemeTile } from "./theme.js";
+import { ConfiguredControlCenter, resolveTiles } from "./configured.js";
+export { ActionTile, AppearanceSettings, AppearanceTile, AppearanceToggle, ConfiguredControlCenter, ControlCenter, DirectionSettings, DirectionTile, DirectionToggle, DocumentLanguageSettings, DocumentLanguageTile, LanguageSettings, LanguageTile, Options, PreviewAirDropSettings, PreviewAirDropTile, PreviewBluetoothSettings, PreviewBluetoothTile, PreviewDisplayTile, PreviewFocusTile, PreviewMediaTile, PreviewMirroringSettings, PreviewMirroringTile, PreviewSoundTile, PreviewStageManagerTile, PreviewWiFiSettings, PreviewWiFiTile, ThemeSettings, ThemeTile, TileContent, controlCenterTileVariants, controlCenterVariants, optionTileVariants, resolveTiles };

package/dist/lib/components/panel/footer/control-center/language.d.ts

@@ -0,0 +1,19 @@
+import type { ControlCenterI18n, LanguageAdapter } from './types';
+type LanguageContext = {
+    language: LanguageAdapter;
+};
+export declare const LanguageTile: ({ language, onOpen, label }: LanguageContext & {
+    label?: string;
+    onOpen: () => void;
+}) => import("react").JSX.Element;
+export declare const LanguageSettings: ({ language }: LanguageContext) => import("react").JSX.Element;
+type DocumentLanguageContext = {
+    i18n?: ControlCenterI18n;
+};
+export declare const DocumentLanguageTile: ({ i18n, onOpen, label }: DocumentLanguageContext & {
+    label?: string;
+    onOpen: () => void;
+}) => import("react").JSX.Element;
+export declare const DocumentLanguageSettings: ({ i18n }: DocumentLanguageContext) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=language.d.ts.map

package/dist/lib/components/panel/footer/control-center/language.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"language.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/language.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEjE,KAAK,eAAe,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAA;CAAE,CAAA;AAEpD,eAAO,MAAM,YAAY,GAAI,6BAI1B,eAAe,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,gCAS1D,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,cAAc,eAAe,gCAE7D,CAAA;AAOD,KAAK,uBAAuB,GAAG;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAAA;AAgB3D,eAAO,MAAM,oBAAoB,GAAI,yBAIlC,uBAAuB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,gCAGlE,CAAA;AAED,eAAO,MAAM,wBAAwB,GAAI,UAAU,uBAAuB,gCAGzE,CAAA"}

package/dist/lib/components/panel/footer/control-center/language.js

@@ -0,0 +1,44 @@
+import { Options } from "./options.js";
+import { ActionTile } from "./tile.js";
+import { useRootAttribute } from "./document.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Translation } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/control-center/language.tsx
+var LanguageTile = ({ language, onOpen, label = "Language" }) => /* @__PURE__ */ jsx(ActionTile, {
+	label,
+	description: language.options.find((option) => option.value === language.value)?.label,
+	icon: /* @__PURE__ */ jsx(Translation, { size: 18 }),
+	onPress: onOpen
+});
+var LanguageSettings = ({ language }) => /* @__PURE__ */ jsx(Options, { ...language });
+var defaultI18n = {
+	defaultLanguage: "en",
+	languages: ["en"]
+};
+var useDocumentLanguage = (i18n = defaultI18n) => {
+	const language = useRootAttribute("lang", i18n.defaultLanguage);
+	const options = useMemo(() => {
+		const names = new Intl.DisplayNames([i18n.defaultLanguage], { type: "language" });
+		return i18n.languages.map((value) => ({
+			value,
+			label: names.of(value) ?? value
+		}));
+	}, [i18n.defaultLanguage, i18n.languages]);
+	return {
+		...language,
+		options
+	};
+};
+var DocumentLanguageTile = ({ i18n, onOpen, label = "Language" }) => {
+	return /* @__PURE__ */ jsx(LanguageTile, {
+		language: useDocumentLanguage(i18n),
+		label,
+		onOpen
+	});
+};
+var DocumentLanguageSettings = ({ i18n }) => {
+	return /* @__PURE__ */ jsx(LanguageSettings, { language: useDocumentLanguage(i18n) });
+};
+//#endregion
+export { DocumentLanguageSettings, DocumentLanguageTile, LanguageSettings, LanguageTile };

package/dist/lib/components/panel/footer/control-center/options.d.ts

@@ -0,0 +1,7 @@
+import type { Option } from './types';
+export declare const Options: ({ value, options, onChange }: {
+    value: string;
+    options: readonly Option[];
+    onChange: (value: string) => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=options.d.ts.map

package/dist/lib/components/panel/footer/control-center/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/options.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAKrC,eAAO,MAAM,OAAO,GAAI,8BAIrB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,gCAqCA,CAAA"}

package/dist/lib/components/panel/footer/control-center/options.js

@@ -0,0 +1,27 @@
+import { controlCenterVariants, optionTileVariants } from "./variant.js";
+import { Button } from "@vezham/react-v3";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/control-center/options.tsx
+var styles = controlCenterVariants();
+var Options = ({ value, options, onChange }) => /* @__PURE__ */ jsx("div", {
+	className: styles.optionsList(),
+	children: options.map((option) => option.href ? /* @__PURE__ */ jsx("a", {
+		href: option.href,
+		"aria-current": option.value === value ? "true" : void 0,
+		className: optionTileVariants({ selected: option.value === value }),
+		onClick: (event) => {
+			if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+			event.preventDefault();
+			onChange(option.value);
+		},
+		children: option.label
+	}, option.value) : /* @__PURE__ */ jsx(Button, {
+		"aria-pressed": option.value === value,
+		className: optionTileVariants({ selected: option.value === value }),
+		variant: "ghost",
+		onPress: () => onChange(option.value),
+		children: option.label
+	}, option.value))
+});
+//#endregion
+export { Options };

package/dist/lib/components/panel/footer/control-center/preview.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+export declare const PreviewProvider: ({ enabled, children }: {
+    enabled: boolean;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+type Props = {
+    label?: string;
+    onOpen: () => void;
+};
+export declare const PreviewWiFiTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
+export declare const PreviewWiFiSettings: () => import("react").JSX.Element;
+export declare const PreviewBluetoothTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
+export declare const PreviewBluetoothSettings: () => import("react").JSX.Element;
+export declare const PreviewAirDropTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
+export declare const PreviewAirDropSettings: () => import("react").JSX.Element;
+export declare const PreviewFocusTile: ({ label }: {
+    label?: string;
+}) => import("react").JSX.Element;
+export declare const PreviewStageManagerTile: ({ label }: {
+    label?: string;
+}) => import("react").JSX.Element;
+export declare const PreviewMirroringTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
+export declare const PreviewMirroringSettings: () => import("react").JSX.Element;
+export declare const PreviewDisplayTile: ({ label }: {
+    label?: string;
+}) => import("react").JSX.Element;
+export declare const PreviewSoundTile: ({ label }: {
+    label?: string;
+}) => import("react").JSX.Element;
+export declare const PreviewMediaTile: ({ label }: {
+    label?: string;
+}) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=preview.d.ts.map

package/dist/lib/components/panel/footer/control-center/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AA8Dd,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAcA,CAAA;AASD,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AAoEnD,eAAO,MAAM,eAAe,GAAI,mBAA6B,KAAK,gCAmBjE,CAAA;AACD,eAAO,MAAM,mBAAmB,mCAY/B,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAmBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCAYpC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,mBAA+B,KAAK,gCAiBtE,CAAA;AACD,eAAO,MAAM,sBAAsB,mCASlC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAE9B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAWA,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,WAErC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAWA,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAiBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCASpC,CAAA;AAiCD,eAAO,MAAM,kBAAkB,GAAI,WAEhC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAeA,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAyBvE,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCA4CvE,CAAA"}

package/dist/lib/components/panel/footer/control-center/preview.js

@@ -0,0 +1,366 @@
+import { controlCenterVariants } from "./variant.js";
+import { Options } from "./options.js";
+import { ActionTile } from "./tile.js";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { Button, Label, Slider, Switch } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Airbuds, Bluetooth, Copy, Moon, MusicNote, Pause, Play, SkipNext, SkipPrevious, Sun, VolumeCross, VolumeLoud, WiFi, Widget2 } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/control-center/preview.tsx
+var initialState = {
+	wifi: true,
+	network: "office",
+	bluetooth: true,
+	device: "headphones",
+	airdrop: "contacts",
+	focus: false,
+	stageManager: false,
+	mirror: "off",
+	brightness: 50,
+	volume: 75,
+	muted: false,
+	playing: false,
+	started: false,
+	track: 0
+};
+var PreviewContext = createContext(null);
+var PreviewProvider = ({ enabled, children }) => {
+	const [state, setState] = useState(initialState);
+	const update = useCallback((values) => setState((previous) => ({
+		...previous,
+		...values
+	})), []);
+	const value = useMemo(() => enabled ? {
+		state,
+		update
+	} : null, [
+		enabled,
+		state,
+		update
+	]);
+	return /* @__PURE__ */ jsx(PreviewContext.Provider, {
+		value,
+		children
+	});
+};
+var usePreview = () => {
+	const preview = useContext(PreviewContext);
+	if (!preview) throw new Error("Preview tiles require ControlCenter preview mode");
+	return preview;
+};
+var styles = controlCenterVariants();
+var networks = [
+	{
+		value: "office",
+		label: "Office Wi-Fi"
+	},
+	{
+		value: "iphone",
+		label: "iPhone"
+	},
+	{
+		value: "home",
+		label: "Home"
+	}
+];
+var devices = [
+	{
+		value: "headphones",
+		label: "Headphones"
+	},
+	{
+		value: "keyboard",
+		label: "Keyboard"
+	},
+	{
+		value: "mouse",
+		label: "Mouse"
+	}
+];
+var airdropOptions = [
+	{
+		value: "off",
+		label: "Off"
+	},
+	{
+		value: "contacts",
+		label: "Contacts Only"
+	},
+	{
+		value: "everyone",
+		label: "Everyone"
+	}
+];
+var mirrorOptions = [
+	{
+		value: "off",
+		label: "Off"
+	},
+	{
+		value: "studio",
+		label: "Studio Display"
+	},
+	{
+		value: "tv",
+		label: "Living Room TV"
+	}
+];
+var PreviewToggle = ({ label, value, onChange }) => /* @__PURE__ */ jsx(Switch, {
+	"aria-label": label,
+	isSelected: value,
+	onChange,
+	children: /* @__PURE__ */ jsxs(Switch.Content, {
+		className: styles.previewToggle(),
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) })]
+	})
+});
+var ConnectionSettings = ({ label, enabled, value, options, onEnabledChange, onChange }) => /* @__PURE__ */ jsxs("div", {
+	className: styles.previewSettings(),
+	children: [/* @__PURE__ */ jsx(PreviewToggle, {
+		label,
+		value: enabled,
+		onChange: onEnabledChange
+	}), enabled ? /* @__PURE__ */ jsx(Options, {
+		value,
+		options,
+		onChange
+	}) : /* @__PURE__ */ jsxs("p", {
+		className: styles.previewHint(),
+		children: [
+			"Turn on ",
+			label,
+			" to see preview connections."
+		]
+	})]
+});
+var PreviewWiFiTile = ({ onOpen, label = "Wi-Fi" }) => {
+	const { state } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: state.wifi ? networks.find((option) => option.value === state.network)?.label : "Off",
+		icon: /* @__PURE__ */ jsx(WiFi, {
+			size: 18,
+			className: styles.connectionIcon({ active: state.wifi })
+		}),
+		onPress: onOpen
+	});
+};
+var PreviewWiFiSettings = () => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(ConnectionSettings, {
+		label: "Wi-Fi",
+		enabled: state.wifi,
+		value: state.network,
+		options: networks,
+		onEnabledChange: (wifi) => update({ wifi }),
+		onChange: (network) => update({ network })
+	});
+};
+var PreviewBluetoothTile = ({ onOpen, label = "Bluetooth" }) => {
+	const { state } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: state.bluetooth ? devices.find((option) => option.value === state.device)?.label : "Off",
+		icon: /* @__PURE__ */ jsx(Bluetooth, {
+			size: 18,
+			className: styles.connectionIcon({ active: state.bluetooth })
+		}),
+		onPress: onOpen
+	});
+};
+var PreviewBluetoothSettings = () => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(ConnectionSettings, {
+		label: "Bluetooth",
+		enabled: state.bluetooth,
+		value: state.device,
+		options: devices,
+		onEnabledChange: (bluetooth) => update({ bluetooth }),
+		onChange: (device) => update({ device })
+	});
+};
+var PreviewAirDropTile = ({ onOpen, label = "AirDrop" }) => {
+	const { state } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: airdropOptions.find((option) => option.value === state.airdrop)?.label,
+		icon: /* @__PURE__ */ jsx(Airbuds, {
+			size: 18,
+			className: styles.connectionIcon({ active: state.airdrop !== "off" })
+		}),
+		onPress: onOpen
+	});
+};
+var PreviewAirDropSettings = () => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(Options, {
+		value: state.airdrop,
+		options: airdropOptions,
+		onChange: (airdrop) => update({ airdrop })
+	});
+};
+var PreviewFocusTile = ({ label = "Do Not Disturb" }) => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: state.focus ? "On" : "Off",
+		icon: /* @__PURE__ */ jsx(Moon, { size: 18 }),
+		isSelected: state.focus,
+		onPress: () => update({ focus: !state.focus })
+	});
+};
+var PreviewStageManagerTile = ({ label = "Stage Manager" }) => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: state.stageManager ? "On" : "Off",
+		icon: /* @__PURE__ */ jsx(Widget2, { size: 18 }),
+		isSelected: state.stageManager,
+		onPress: () => update({ stageManager: !state.stageManager })
+	});
+};
+var PreviewMirroringTile = ({ onOpen, label = "Screen Mirroring" }) => {
+	const { state } = usePreview();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: mirrorOptions.find((option) => option.value === state.mirror)?.label,
+		icon: /* @__PURE__ */ jsx(Copy, {
+			size: 18,
+			className: styles.connectionIcon({ active: state.mirror !== "off" })
+		}),
+		onPress: onOpen
+	});
+};
+var PreviewMirroringSettings = () => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsx(Options, {
+		value: state.mirror,
+		options: mirrorOptions,
+		onChange: (mirror) => update({ mirror })
+	});
+};
+var PreviewSlider = ({ label, value, onChange, disabled = false }) => /* @__PURE__ */ jsxs(Slider, {
+	"aria-label": label,
+	value,
+	minValue: 0,
+	maxValue: 100,
+	isDisabled: disabled,
+	onChange: (next) => {
+		if (typeof next === "number") onChange(next);
+	},
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: styles.previewHeader(),
+		children: [/* @__PURE__ */ jsx(Label, {
+			className: styles.previewHint(),
+			children: label
+		}), /* @__PURE__ */ jsxs(Slider.Output, {
+			className: styles.previewHint(),
+			children: [value, "%"]
+		})]
+	}), /* @__PURE__ */ jsxs(Slider.Track, { children: [/* @__PURE__ */ jsx(Slider.Fill, {}), /* @__PURE__ */ jsx(Slider.Thumb, {})] })]
+});
+var PreviewDisplayTile = ({ label = "Display" }) => {
+	const { state, update } = usePreview();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: styles.previewTile(),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.previewHeader(),
+			children: [/* @__PURE__ */ jsx(Sun, { size: 18 }), /* @__PURE__ */ jsx("span", {
+				className: styles.previewTitle(),
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx(PreviewSlider, {
+			label: "Brightness",
+			value: state.brightness,
+			onChange: (brightness) => update({ brightness })
+		})]
+	});
+};
+var PreviewSoundTile = ({ label = "Sound" }) => {
+	const { state, update } = usePreview();
+	const Icon = state.muted ? VolumeCross : VolumeLoud;
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: styles.previewTile(),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.previewHeader(),
+			children: [
+				/* @__PURE__ */ jsx(Icon, { size: 18 }),
+				/* @__PURE__ */ jsx("span", {
+					className: styles.previewTitle(),
+					children: label
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					"aria-label": state.muted ? "Unmute sound" : "Mute sound",
+					"aria-pressed": state.muted,
+					size: "sm",
+					variant: "ghost",
+					onPress: () => update({ muted: !state.muted }),
+					children: state.muted ? "Unmute" : "Mute"
+				})
+			]
+		}), /* @__PURE__ */ jsx(PreviewSlider, {
+			label: "Volume",
+			value: state.volume,
+			disabled: state.muted,
+			onChange: (volume) => update({ volume })
+		})]
+	});
+};
+var tracks = [
+	"Morning Light",
+	"Quiet Hours",
+	"Afterglow"
+];
+var PreviewMediaTile = ({ label = "Media" }) => {
+	const { state, update } = usePreview();
+	const Icon = state.playing ? Pause : Play;
+	const skip = (offset) => update({
+		track: (state.track + offset + tracks.length) % tracks.length,
+		started: true
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": label,
+		className: styles.previewTile(),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.previewHeader(),
+			children: [/* @__PURE__ */ jsx(MusicNote, { size: 18 }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: styles.previewTitle(),
+				children: state.started ? tracks[state.track] : "Not Playing"
+			}), /* @__PURE__ */ jsx("p", {
+				className: styles.previewHint(),
+				children: "Demo playlist"
+			})] })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.mediaControls(),
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					"aria-label": "Previous track",
+					isIconOnly: true,
+					variant: "ghost",
+					onPress: () => skip(-1),
+					children: /* @__PURE__ */ jsx(SkipPrevious, { size: 18 })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					"aria-label": state.playing ? "Pause media" : "Play media",
+					isIconOnly: true,
+					variant: "ghost",
+					onPress: () => update({
+						playing: !state.playing,
+						started: true
+					}),
+					children: /* @__PURE__ */ jsx(Icon, { size: 24 })
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					"aria-label": "Next track",
+					isIconOnly: true,
+					variant: "ghost",
+					onPress: () => skip(1),
+					children: /* @__PURE__ */ jsx(SkipNext, { size: 18 })
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { PreviewAirDropSettings, PreviewAirDropTile, PreviewBluetoothSettings, PreviewBluetoothTile, PreviewDisplayTile, PreviewFocusTile, PreviewMediaTile, PreviewMirroringSettings, PreviewMirroringTile, PreviewProvider, PreviewSoundTile, PreviewStageManagerTile, PreviewWiFiSettings, PreviewWiFiTile };

package/dist/lib/components/panel/footer/control-center/theme.d.ts

@@ -0,0 +1,6 @@
+export declare const ThemeTile: ({ onOpen, label }: {
+    label?: string;
+    onOpen: () => void;
+}) => import("react").JSX.Element;
+export declare const ThemeSettings: () => import("react").JSX.Element;
+//# sourceMappingURL=theme.d.ts.map

package/dist/lib/components/panel/footer/control-center/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/theme.tsx"],"names":[],"mappings":"AA4EA,eAAO,MAAM,SAAS,GAAI,mBAGvB;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAqBA,CAAA;AAED,eAAO,MAAM,aAAa,mCA4CzB,CAAA"}