@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.7

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

@@ -0,0 +1,150 @@
+import { controlCenterVariants, optionTileVariants } from "./variant.js";
+import { ActionTile } from "./tile.js";
+import { useRootAttribute } from "./document.js";
+import { Button, ColorSwatch, ColorSwatchPicker, parseColor } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Palette } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/control-center/theme.tsx
+var colors = [
+	{
+		id: "blue",
+		label: "Blue",
+		color: "#0067d6",
+		foreground: "#ffffff"
+	},
+	{
+		id: "purple",
+		label: "Purple",
+		color: "#7d3fc8",
+		foreground: "#ffffff"
+	},
+	{
+		id: "pink",
+		label: "Pink",
+		color: "#d63384",
+		foreground: "#ffffff"
+	},
+	{
+		id: "red",
+		label: "Red",
+		color: "#c9373c",
+		foreground: "#ffffff"
+	},
+	{
+		id: "orange",
+		label: "Orange",
+		color: "#b85a00",
+		foreground: "#ffffff"
+	},
+	{
+		id: "yellow",
+		label: "Yellow",
+		color: "#f0bd27",
+		foreground: "#111111"
+	},
+	{
+		id: "green",
+		label: "Green",
+		color: "#24823d",
+		foreground: "#ffffff"
+	},
+	{
+		id: "graphite",
+		label: "Graphite",
+		color: "#62646a",
+		foreground: "#ffffff"
+	}
+];
+var properties = [
+	"--accent",
+	"--accent-foreground",
+	"--heroui-primary",
+	"--heroui-primary-foreground",
+	"--heroui-focus"
+];
+var originalStyles = /* @__PURE__ */ new WeakMap();
+var styles = controlCenterVariants();
+var hslChannels = (color) => {
+	const hsl = parseColor(color).toFormat("hsl");
+	return `${hsl.getChannelValue("hue")} ${hsl.getChannelValue("saturation")}% ${hsl.getChannelValue("lightness")}%`;
+};
+var applyColor = (id) => {
+	const root = document.documentElement;
+	const option = colors.find((color) => color.id === id);
+	if (option) {
+		if (!originalStyles.has(root)) originalStyles.set(root, properties.map((property) => ({
+			value: root.style.getPropertyValue(property),
+			priority: root.style.getPropertyPriority(property)
+		})));
+		root.style.setProperty("--accent", option.color);
+		root.style.setProperty("--accent-foreground", option.foreground);
+		root.style.setProperty("--heroui-primary", hslChannels(option.color));
+		root.style.setProperty("--heroui-primary-foreground", hslChannels(option.foreground));
+		root.style.setProperty("--heroui-focus", hslChannels(option.color));
+	} else {
+		originalStyles.get(root)?.forEach((original, index) => {
+			root.style.setProperty(properties[index], original.value, original.priority);
+		});
+		originalStyles.delete(root);
+	}
+};
+var ThemeTile = ({ onOpen, label = "Theme" }) => {
+	const { value } = useRootAttribute("data-vx-theme-color", "default");
+	const option = colors.find((color) => color.id === value);
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: option?.label ?? "Default",
+		icon: option ? /* @__PURE__ */ jsx(ColorSwatch, {
+			"aria-label": option.label,
+			color: option.color,
+			size: "xs"
+		}) : /* @__PURE__ */ jsx(Palette, { size: 18 }),
+		onPress: onOpen
+	});
+};
+var ThemeSettings = () => {
+	const { value, onChange } = useRootAttribute("data-vx-theme-color", "default");
+	const selected = colors.find((color) => color.id === value);
+	const changeColor = (id) => {
+		applyColor(id);
+		onChange(id);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.colorSettings(),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: styles.colorLabel(),
+				children: "Accent color"
+			}),
+			/* @__PURE__ */ jsx(ColorSwatchPicker, {
+				"aria-label": "Accent color",
+				className: styles.colorPicker(),
+				size: "xl",
+				value: selected?.color ?? "#00000000",
+				onChange: (color) => {
+					const option = colors.find((option) => option.color === color.toString("hex").toLowerCase());
+					if (option) changeColor(option.id);
+				},
+				children: colors.map((option) => /* @__PURE__ */ jsxs(ColorSwatchPicker.Item, {
+					color: option.color,
+					"aria-label": option.label,
+					className: styles.colorOption(),
+					children: [/* @__PURE__ */ jsx(ColorSwatchPicker.Swatch, { colorName: option.label }), /* @__PURE__ */ jsx(ColorSwatchPicker.Indicator, {})]
+				}, option.id))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: styles.colorLabel(),
+				children: selected?.label ?? "Default"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				"aria-pressed": !selected,
+				className: optionTileVariants({ selected: !selected }),
+				onPress: () => changeColor("default"),
+				children: "Default"
+			})
+		]
+	});
+};
+//#endregion
+export { ThemeSettings, ThemeTile };

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export declare const ActionTile: ({ label, description, icon, compact, isSelected, onPress }: {
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    compact?: boolean;
+    isSelected?: boolean;
+    onPress: () => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=tile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,eAAO,MAAM,UAAU,GAAI,4DAOxB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,gCAwBA,CAAA"}

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

@@ -0,0 +1,34 @@
+import { controlCenterTileVariants } from "./variant.js";
+import { Button } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/control-center/tile.tsx
+var styles = controlCenterTileVariants();
+var ActionTile = ({ label, description, icon, compact = false, isSelected, onPress }) => /* @__PURE__ */ jsx(Button, {
+	"aria-label": label,
+	"aria-pressed": isSelected,
+	className: styles.button({
+		compact,
+		selected: isSelected
+	}),
+	isIconOnly: compact,
+	variant: "ghost",
+	onPress,
+	children: compact ? icon ?? label : /* @__PURE__ */ jsxs("span", {
+		className: styles.content(),
+		children: [icon && /* @__PURE__ */ jsx("span", {
+			className: styles.icon({ selected: isSelected }),
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: styles.text(),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: styles.title(),
+				children: label
+			}), description && /* @__PURE__ */ jsx("span", {
+				className: styles.description(),
+				children: description
+			})]
+		})]
+	})
+});
+//#endregion
+export { ActionTile };

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

@@ -0,0 +1,94 @@
+import { ComponentProps, ComponentType, ReactElement, ReactNode } from 'react';
+import { Popover } from '@vezham/react-v3';
+export type TileDefinition<Context extends object = object> = {
+    id: string;
+    span: 'compact' | 'standard' | 'wide' | 'full';
+    label?: string;
+    editable?: boolean;
+} & ({
+    Tile: ComponentType<Context & {
+        label?: string;
+        onOpen: () => void;
+    }>;
+    title: string;
+    Panel: ComponentType<Context>;
+    onAction?: never;
+} | {
+    Tile: ComponentType<Context & {
+        label?: string;
+    }>;
+    title?: never;
+    Panel?: never;
+    onAction?: never;
+} | {
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    onAction: (context: Context) => void;
+    Tile?: never;
+    title?: never;
+    Panel?: never;
+});
+export type ControlCenterProps<Context extends object> = {
+    context: Context;
+    tiles: readonly TileDefinition<Context>[];
+    trigger?: ReactElement;
+    placement?: ComponentProps<typeof Popover.Content>['placement'];
+    onOpenChange?: (open: boolean) => void;
+    appearance?: AppearanceAdapter;
+    preview?: boolean;
+    editControls?: boolean;
+};
+export type ThemeMode = 'light' | 'dark' | 'auto';
+export type AppearanceAdapter = {
+    isDark: boolean;
+    setDark: (dark: boolean) => void;
+    themeMode?: ThemeMode;
+    setThemeMode?: (mode: ThemeMode) => void;
+};
+export type Option = {
+    value: string;
+    label: string;
+    href?: string;
+};
+export type LanguageAdapter = {
+    value: string;
+    options: readonly Option[];
+    onChange: (value: string) => void;
+};
+export type BuiltinTileType = 'direction-toggle' | 'appearance-toggle' | 'appearance' | 'theme' | 'direction' | 'language' | 'preview-wifi' | 'preview-bluetooth' | 'preview-airdrop' | 'preview-focus' | 'preview-stage-manager' | 'preview-mirroring' | 'preview-media' | 'preview-display' | 'preview-sound';
+export type TileConfig = {
+    id: string;
+    span: TileDefinition['span'];
+    label?: string;
+    description?: string;
+    editable?: boolean;
+} & ({
+    type: BuiltinTileType;
+    action?: never;
+} | {
+    type: 'custom';
+    action: string;
+});
+export type ControlCenterConfig = {
+    tiles: readonly TileConfig[];
+    editControls?: boolean;
+};
+export type ControlCenterI18n = {
+    defaultLanguage: string;
+    languages: readonly string[];
+};
+export type ControlCenterContext = {
+    language?: LanguageAdapter;
+    i18n?: ControlCenterI18n;
+};
+export type TileRegistration<Context extends object> = {
+    Tile: ComponentType<Context & {
+        label?: string;
+        onOpen: () => void;
+        onAction: () => void;
+    }>;
+    Panel?: ComponentType<Context>;
+    label?: string;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,268 @@
+export declare const controlCenterVariants: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: {
+            connectionIcon: string;
+        };
+        false: {};
+    };
+    span: {
+        compact: {
+            tileContainer: string;
+        };
+        standard: {
+            tileContainer: string;
+        };
+        wide: {
+            tileContainer: string;
+        };
+        full: {
+            tileContainer: string;
+        };
+    };
+    presentation: {
+        popover: {
+            surface: string;
+        };
+        sheet: {
+            surface: string;
+            content: string;
+        };
+    };
+}, {
+    surface: string;
+    triggerIcon: string;
+    backdrop: string;
+    sheetContent: string;
+    sheetHeader: string;
+    sheetHeading: string;
+    content: string;
+    edgeHighlight: string;
+    surfaceHighlight: string;
+    panelHeader: string;
+    panelTitle: string;
+    panelBody: string;
+    home: string;
+    tileContainer: string;
+    optionsList: string;
+    colorSettings: string;
+    colorLabel: string;
+    colorPicker: string;
+    colorOption: string;
+    viewport: string;
+    previewNotice: string;
+    previewSettings: string;
+    previewToggle: string;
+    previewHint: string;
+    previewTile: string;
+    previewHeader: string;
+    previewTitle: string;
+    mediaControls: string;
+    connectionIcon: string;
+}, undefined, {
+    active: {
+        true: {
+            connectionIcon: string;
+        };
+        false: {};
+    };
+    span: {
+        compact: {
+            tileContainer: string;
+        };
+        standard: {
+            tileContainer: string;
+        };
+        wide: {
+            tileContainer: string;
+        };
+        full: {
+            tileContainer: string;
+        };
+    };
+    presentation: {
+        popover: {
+            surface: string;
+        };
+        sheet: {
+            surface: string;
+            content: string;
+        };
+    };
+}, {
+    surface: string;
+    triggerIcon: string;
+    backdrop: string;
+    sheetContent: string;
+    sheetHeader: string;
+    sheetHeading: string;
+    content: string;
+    edgeHighlight: string;
+    surfaceHighlight: string;
+    panelHeader: string;
+    panelTitle: string;
+    panelBody: string;
+    home: string;
+    tileContainer: string;
+    optionsList: string;
+    colorSettings: string;
+    colorLabel: string;
+    colorPicker: string;
+    colorOption: string;
+    viewport: string;
+    previewNotice: string;
+    previewSettings: string;
+    previewToggle: string;
+    previewHint: string;
+    previewTile: string;
+    previewHeader: string;
+    previewTitle: string;
+    mediaControls: string;
+    connectionIcon: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    active: {
+        true: {
+            connectionIcon: string;
+        };
+        false: {};
+    };
+    span: {
+        compact: {
+            tileContainer: string;
+        };
+        standard: {
+            tileContainer: string;
+        };
+        wide: {
+            tileContainer: string;
+        };
+        full: {
+            tileContainer: string;
+        };
+    };
+    presentation: {
+        popover: {
+            surface: string;
+        };
+        sheet: {
+            surface: string;
+            content: string;
+        };
+    };
+}, {
+    surface: string;
+    triggerIcon: string;
+    backdrop: string;
+    sheetContent: string;
+    sheetHeader: string;
+    sheetHeading: string;
+    content: string;
+    edgeHighlight: string;
+    surfaceHighlight: string;
+    panelHeader: string;
+    panelTitle: string;
+    panelBody: string;
+    home: string;
+    tileContainer: string;
+    optionsList: string;
+    colorSettings: string;
+    colorLabel: string;
+    colorPicker: string;
+    colorOption: string;
+    viewport: string;
+    previewNotice: string;
+    previewSettings: string;
+    previewToggle: string;
+    previewHint: string;
+    previewTile: string;
+    previewHeader: string;
+    previewTitle: string;
+    mediaControls: string;
+    connectionIcon: string;
+}>>;
+export declare const controlCenterTileVariants: import('tailwind-variants').TVReturnType<{
+    selected: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {};
+    };
+    compact: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    content: string;
+    icon: string;
+    text: string;
+    title: string;
+    description: string;
+}, undefined, {
+    selected: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {};
+    };
+    compact: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    content: string;
+    icon: string;
+    text: string;
+    title: string;
+    description: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    selected: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {};
+    };
+    compact: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string;
+    content: string;
+    icon: string;
+    text: string;
+    title: string;
+    description: string;
+}>>;
+export declare const optionTileVariants: import('tailwind-variants').TVReturnType<{
+    selected: {
+        true: "bg-primary/10 text-primary";
+        false: "hover:bg-surface text-muted hover:text-foreground";
+    };
+}, undefined, "h-auto w-full justify-start rounded-lg px-3 py-2 text-start text-sm font-normal transition-colors", {
+    selected: {
+        true: "bg-primary/10 text-primary";
+        false: "hover:bg-surface text-muted hover:text-foreground";
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    selected: {
+        true: "bg-primary/10 text-primary";
+        false: "hover:bg-surface text-muted hover:text-foreground";
+    };
+}, undefined>>;
+//# sourceMappingURL=variant.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/variant.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DhC,CAAA;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BpC,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAS7B,CAAA"}

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

@@ -0,0 +1,89 @@
+import { tv } from "@vezham/react-v3";
+//#region src/lib/components/panel/footer/control-center/variant.ts
+var controlCenterVariants = tv({
+	slots: {
+		surface: "border-border/70 dark:border-border/80 relative w-72 overflow-hidden rounded-[1.75rem] border p-2 shadow-2xl ring-1 ring-white/15 backdrop-blur-2xl",
+		triggerIcon: "text-muted",
+		backdrop: "bg-overlay/10 z-80 backdrop-blur-xs",
+		sheetContent: "mx-auto max-h-[85dvh] w-full max-w-72",
+		sheetHeader: "px-6 pt-0 pb-2",
+		sheetHeading: "text-base font-semibold",
+		content: "relative flex max-h-[min(40rem,calc(100dvh-8rem))] min-h-0 flex-col overflow-hidden",
+		edgeHighlight: "pointer-events-none absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-white/55 to-transparent dark:via-white/25",
+		surfaceHighlight: "pointer-events-none absolute inset-x-0 top-0 h-20 bg-linear-to-b from-white/15 to-transparent dark:from-white/8",
+		panelHeader: "flex items-center gap-2 px-1 pt-1 pb-2",
+		panelTitle: "text-sm font-semibold capitalize",
+		panelBody: "p-1",
+		home: "grid grid-cols-4 items-center gap-x-2 gap-y-3",
+		tileContainer: "min-w-0",
+		optionsList: "flex flex-col gap-1",
+		colorSettings: "flex flex-col gap-3",
+		colorLabel: "text-muted text-xs",
+		colorPicker: "gap-3",
+		colorOption: "min-h-11 min-w-11",
+		viewport: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+		previewNotice: "text-muted mb-3 px-2 pt-1 text-xs",
+		previewSettings: "flex flex-col gap-4",
+		previewToggle: "flex w-full items-center justify-between gap-3 text-sm",
+		previewHint: "text-muted text-xs",
+		previewTile: "bg-default-hover flex flex-col gap-3 rounded-2xl p-3",
+		previewHeader: "flex items-center gap-2 [&>button]:ms-auto",
+		previewTitle: "text-sm font-medium",
+		mediaControls: "flex items-center justify-center gap-2",
+		connectionIcon: "text-muted"
+	},
+	variants: {
+		active: {
+			true: { connectionIcon: "text-accent" },
+			false: {}
+		},
+		span: {
+			compact: { tileContainer: "col-span-1 aspect-square w-full overflow-hidden [&>button]:size-full [&>button>span>span:last-child]:hidden" },
+			standard: { tileContainer: "col-span-2 min-w-0 [&>button]:w-full" },
+			wide: { tileContainer: "col-span-3 min-w-0 [&>button]:w-full" },
+			full: { tileContainer: "col-span-4 min-w-0 [&>button]:w-full" }
+		},
+		presentation: {
+			popover: { surface: "bg-transparent" },
+			sheet: {
+				surface: "bg-surface/75 dark:bg-surface/65 flex max-h-[85dvh] w-full flex-col rounded-b-none p-0",
+				content: "max-h-[min(40rem,calc(85dvh-7rem))] px-6 pt-1 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+			}
+		}
+	},
+	defaultVariants: { presentation: "popover" }
+});
+var controlCenterTileVariants = tv({
+	slots: {
+		button: "bg-default-hover hover:bg-surface rounded-full",
+		content: "flex min-w-0 items-center gap-2",
+		icon: "bg-surface flex size-10 shrink-0 items-center justify-center rounded-full border shadow-sm",
+		text: "flex min-w-0 flex-col",
+		title: "truncate text-sm font-medium",
+		description: "text-muted truncate text-xs"
+	},
+	variants: {
+		selected: {
+			true: {
+				button: "bg-accent/10",
+				icon: "bg-accent text-accent-foreground"
+			},
+			false: {}
+		},
+		compact: {
+			true: { button: "size-14 shrink-0" },
+			false: { button: "h-auto min-h-14 items-center justify-between px-3 py-2.5 text-start" }
+		}
+	},
+	defaultVariants: { compact: false }
+});
+var optionTileVariants = tv({
+	base: "h-auto w-full justify-start rounded-lg px-3 py-2 text-start text-sm font-normal transition-colors",
+	variants: { selected: {
+		true: "bg-primary/10 text-primary",
+		false: "hover:bg-surface text-muted hover:text-foreground"
+	} },
+	defaultVariants: { selected: false }
+});
+//#endregion
+export { controlCenterTileVariants, controlCenterVariants, optionTileVariants };