@dazecoop/liquid-glass 0.0.0-stage → 0.1.0

package/lib/react.cjs

@@ -0,0 +1,238 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const index = require("./index.cjs");
+const resolve = (target) => typeof target === "function" ? target() : target?.current ?? target ?? null;
+const cx = (...names) => names.filter(Boolean).join(" ");
+function useForwarded(ref) {
+  const own = react.useRef(null);
+  react.useImperativeHandle(ref, () => own.current, []);
+  return own;
+}
+function useQuiet() {
+  const quiet = react.useRef(false);
+  return [quiet, (fn) => {
+    quiet.current = true;
+    try {
+      fn();
+    } finally {
+      quiet.current = false;
+    }
+  }];
+}
+function useValue(value, initial) {
+  const [own, setOwn] = react.useState(initial);
+  return [value === void 0 ? own : value, setOwn];
+}
+function useLiquidGlass(source, { anchor, container, button = false, throttle = 0, ...params } = {}) {
+  const [glass, setGlass] = react.useState(null);
+  const latest = react.useRef(params);
+  latest.current = params;
+  react.useEffect(() => {
+    const el = resolve(source);
+    if (!el) return;
+    const g = new index.LiquidGlass(el, {
+      anchor: resolve(anchor),
+      container: resolve(container),
+      button,
+      throttle,
+      ...latest.current
+    });
+    setGlass(g);
+    return () => {
+      g.destroy();
+      setGlass(null);
+    };
+  }, [source, anchor, container, button, throttle]);
+  const key = JSON.stringify(params);
+  const applied = react.useRef(null);
+  react.useEffect(() => {
+    if (!glass) return;
+    if (applied.current === glass) glass.set(latest.current);
+    applied.current = glass;
+  }, [glass, key]);
+  return glass;
+}
+const GlassScene = react.forwardRef(function GlassScene2({ as: Tag = "div", glass: params, onPointerMove, onPointerDown, onPointerUp, onPointerLeave, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const lens = useLiquidGlass(el, { container: el, ...params });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref: el,
+      ...rest,
+      onPointerMove: (e) => {
+        lens?.moveTo(e.clientX, e.clientY);
+        onPointerMove?.(e);
+      },
+      onPointerDown: (e) => {
+        lens?.moveTo(e.clientX, e.clientY);
+        lens?.press(true);
+        onPointerDown?.(e);
+      },
+      onPointerUp: (e) => {
+        lens?.press(false);
+        onPointerUp?.(e);
+      },
+      onPointerLeave: (e) => {
+        lens?.press(false);
+        lens?.show(false);
+        onPointerLeave?.(e);
+      },
+      children
+    }
+  );
+});
+const GlassPanel = react.forwardRef(function GlassPanel2({ as: Tag = "div", source, button = false, glass: params, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const from = react.useCallback(() => resolve(source) ?? el.current?.parentElement, [source, el]);
+  useLiquidGlass(from, { anchor: el, button, ...params });
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref: el, ...rest, children });
+});
+const GlassSwitch = react.forwardRef(function GlassSwitch2({ checked, defaultChecked = false, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const [on, setOn] = useValue(checked, defaultChecked);
+  const inst = react.useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = react.useRef(onChange);
+  latest.current = onChange;
+  react.useEffect(() => {
+    const root = el.current;
+    const s = inst.current = new index.GlassSwitch(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      setOn(e.detail.value === 1);
+      latest.current?.(e.detail.value === 1);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      s.destroy();
+      inst.current = null;
+    };
+  }, [JSON.stringify(look)]);
+  react.useEffect(() => {
+    if (inst.current) silently(() => inst.current.select(on ? 1 : 0));
+  }, [on]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: el, type: "button", role: "switch", "aria-checked": on, className: cx("lg-switch", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "refract", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thumb", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-opt": "" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-opt": "" })
+  ] });
+});
+const GlassSegment = react.forwardRef(function GlassSegment2({ options, value, defaultValue, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const items = options.map((o) => typeof o === "object" ? o : { value: o, label: o });
+  const [current, setCurrent] = useValue(value, defaultValue ?? items[0].value);
+  const index$1 = Math.max(0, items.findIndex((o) => o.value === current));
+  const inst = react.useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = react.useRef({ onChange, items });
+  latest.current = { onChange, items };
+  react.useEffect(() => {
+    const root = el.current;
+    const s = inst.current = new index.GlassSwitch(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      const next = latest.current.items[e.detail.value].value;
+      setCurrent(next);
+      latest.current.onChange?.(next);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      s.destroy();
+      inst.current = null;
+    };
+  }, [JSON.stringify(look)]);
+  react.useEffect(() => {
+    if (inst.current) silently(() => inst.current.select(index$1));
+  }, [index$1]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: el, role: "radiogroup", className: cx("lg-segment", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "refract", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "thumb", "aria-hidden": "true" }),
+    items.slice(0, 2).map((o, i) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", role: "radio", "aria-checked": i === index$1, "data-opt": "", children: o.label }, String(o.value)))
+  ] });
+});
+const GlassTabBar = react.forwardRef(function GlassTabBar2({ items, value, defaultValue, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const [current, setCurrent] = useValue(value, defaultValue ?? items[0]?.value);
+  const inst = react.useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = react.useRef({ onChange, items });
+  latest.current = { onChange, items };
+  const keys = items.map((t) => String(t.value)).join("\n");
+  react.useEffect(() => {
+    const root = el.current;
+    const bar = inst.current = new index.GlassTabBar(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      const next = latest.current.items[bar.tabs.indexOf(e.detail.tab)]?.value;
+      setCurrent(next);
+      latest.current.onChange?.(next);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      bar.destroy();
+      inst.current = null;
+    };
+  }, [keys, JSON.stringify(look)]);
+  react.useEffect(() => {
+    const bar = inst.current;
+    const tab = bar?.tabs[items.findIndex((t) => t.value === current)];
+    if (tab) silently(() => bar.choose(tab));
+  }, [current, keys]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { ref: el, className: cx("lg-tabs", className), ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lg-pill", "aria-hidden": "true", hidden: true }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lg-glowbox", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lg-glow" }) }),
+    items.map((t) => {
+      const Tab = t.href ? "a" : "button";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Tab,
+        {
+          ...t.href ? { href: t.href } : { type: "button" },
+          "aria-current": t.value === current ? "page" : void 0,
+          children: [
+            t.icon,
+            t.label
+          ]
+        },
+        String(t.value)
+      );
+    })
+  ] });
+});
+const GlassButton = react.forwardRef(function GlassButton2({ source, tint, grow, press, lit, hang, look, className, style, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const options = { grow, press, lit, hang, look };
+  const key = JSON.stringify(options);
+  react.useEffect(() => {
+    const given = Object.fromEntries(Object.entries(options).filter(([, v]) => v !== void 0));
+    const from = resolve(source);
+    const b = new index.GlassButton(el.current, from ? { ...given, source: from } : given);
+    return () => b.destroy();
+  }, [source, key]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: el,
+      type: "button",
+      className: cx("lg-button", className),
+      style: tint ? { "--tint": tint, ...style } : style,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lg-content", children })
+    }
+  );
+});
+exports.LiquidGlass = index.LiquidGlass;
+exports.GlassButton = GlassButton;
+exports.GlassPanel = GlassPanel;
+exports.GlassScene = GlassScene;
+exports.GlassSegment = GlassSegment;
+exports.GlassSwitch = GlassSwitch;
+exports.GlassTabBar = GlassTabBar;
+exports.useLiquidGlass = useLiquidGlass;

package/lib/react.d.cts

@@ -0,0 +1,91 @@
+import type { ComponentPropsWithoutRef, ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from "react";
+import type { GlassOptions, GlassParams, LiquidGlass } from "./index.js";
+
+export { LiquidGlass } from "./index.js";
+export type { GlassOptions, GlassParams, PresetName } from "./index.js";
+
+/** A ref, an element, or a function returning one */
+export type ElementTarget = RefObject<HTMLElement | null> | HTMLElement | null | (() => HTMLElement | null | undefined);
+
+export interface UseLiquidGlassOptions extends GlassParams {
+  anchor?: ElementTarget;
+  container?: ElementTarget;
+  button?: boolean;
+  throttle?: number;
+}
+
+/**
+ * Builds a LiquidGlass over `source` once mounted and destroys it on unmount. Parameter
+ * changes are applied with set(). Returns the instance, or null until it exists.
+ * Pass a stable `source` (a ref, or a memoised function), or it rebuilds every render.
+ */
+export function useLiquidGlass(source: ElementTarget, options?: UseLiquidGlassOptions): LiquidGlass | null;
+
+type Polymorphic<P> = P & { as?: ElementType } & Omit<ComponentPropsWithoutRef<"div">, keyof P>;
+
+export interface GlassSceneProps {
+  /** The lens's parameters, e.g. LiquidGlass.presets.frosted */
+  glass?: GlassParams;
+  children?: ReactNode;
+}
+/** A lens that follows the pointer over its children */
+export const GlassScene: ForwardRefExoticComponent<Polymorphic<GlassSceneProps> & RefAttributes<HTMLElement>>;
+
+export interface GlassPanelProps {
+  /** What the glass refracts: something behind the panel. Default its parent */
+  source?: ElementTarget;
+  /** Brighten on hover and flatten on press */
+  button?: boolean;
+  glass?: GlassParams;
+  children?: ReactNode;
+}
+/** An element with glass as its background */
+export const GlassPanel: ForwardRefExoticComponent<Polymorphic<GlassPanelProps> & RefAttributes<HTMLElement>>;
+
+export interface GlassSwitchProps extends Omit<ComponentPropsWithoutRef<"button">, "onChange" | "role"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  look?: GlassParams;
+}
+export const GlassSwitch: ForwardRefExoticComponent<GlassSwitchProps & RefAttributes<HTMLButtonElement>>;
+
+export type SegmentOption<V> = V | { value: V; label: ReactNode };
+export interface GlassSegmentProps<V = string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+  /** Exactly two options */
+  options: [SegmentOption<V>, SegmentOption<V>];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  look?: GlassParams;
+}
+export const GlassSegment: <V = string>(props: GlassSegmentProps<V> & RefAttributes<HTMLDivElement>) => ReactNode;
+
+export interface TabItem<V = string> {
+  value: V;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Renders the tab as a link */
+  href?: string;
+}
+export interface GlassTabBarProps<V = string> extends Omit<ComponentPropsWithoutRef<"nav">, "onChange" | "defaultValue"> {
+  items: TabItem<V>[];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  look?: GlassParams;
+}
+export const GlassTabBar: <V = string>(props: GlassTabBarProps<V> & RefAttributes<HTMLElement>) => ReactNode;
+
+export interface GlassButtonProps extends ComponentPropsWithoutRef<"button"> {
+  /** What the lens refracts. Default the parent's [data-glass-source] child */
+  source?: ElementTarget;
+  /** The colour it lights up in. Default var(--lg-accent) */
+  tint?: string;
+  grow?: number;
+  press?: number;
+  lit?: number;
+  hang?: number;
+  look?: GlassParams;
+}
+export const GlassButton: ForwardRefExoticComponent<GlassButtonProps & RefAttributes<HTMLButtonElement>>;

package/lib/react.d.ts

@@ -0,0 +1,91 @@
+import type { ComponentPropsWithoutRef, ElementType, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from "react";
+import type { GlassOptions, GlassParams, LiquidGlass } from "./index.js";
+
+export { LiquidGlass } from "./index.js";
+export type { GlassOptions, GlassParams, PresetName } from "./index.js";
+
+/** A ref, an element, or a function returning one */
+export type ElementTarget = RefObject<HTMLElement | null> | HTMLElement | null | (() => HTMLElement | null | undefined);
+
+export interface UseLiquidGlassOptions extends GlassParams {
+  anchor?: ElementTarget;
+  container?: ElementTarget;
+  button?: boolean;
+  throttle?: number;
+}
+
+/**
+ * Builds a LiquidGlass over `source` once mounted and destroys it on unmount. Parameter
+ * changes are applied with set(). Returns the instance, or null until it exists.
+ * Pass a stable `source` (a ref, or a memoised function), or it rebuilds every render.
+ */
+export function useLiquidGlass(source: ElementTarget, options?: UseLiquidGlassOptions): LiquidGlass | null;
+
+type Polymorphic<P> = P & { as?: ElementType } & Omit<ComponentPropsWithoutRef<"div">, keyof P>;
+
+export interface GlassSceneProps {
+  /** The lens's parameters, e.g. LiquidGlass.presets.frosted */
+  glass?: GlassParams;
+  children?: ReactNode;
+}
+/** A lens that follows the pointer over its children */
+export const GlassScene: ForwardRefExoticComponent<Polymorphic<GlassSceneProps> & RefAttributes<HTMLElement>>;
+
+export interface GlassPanelProps {
+  /** What the glass refracts: something behind the panel. Default its parent */
+  source?: ElementTarget;
+  /** Brighten on hover and flatten on press */
+  button?: boolean;
+  glass?: GlassParams;
+  children?: ReactNode;
+}
+/** An element with glass as its background */
+export const GlassPanel: ForwardRefExoticComponent<Polymorphic<GlassPanelProps> & RefAttributes<HTMLElement>>;
+
+export interface GlassSwitchProps extends Omit<ComponentPropsWithoutRef<"button">, "onChange" | "role"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  look?: GlassParams;
+}
+export const GlassSwitch: ForwardRefExoticComponent<GlassSwitchProps & RefAttributes<HTMLButtonElement>>;
+
+export type SegmentOption<V> = V | { value: V; label: ReactNode };
+export interface GlassSegmentProps<V = string> extends Omit<ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+  /** Exactly two options */
+  options: [SegmentOption<V>, SegmentOption<V>];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  look?: GlassParams;
+}
+export const GlassSegment: <V = string>(props: GlassSegmentProps<V> & RefAttributes<HTMLDivElement>) => ReactNode;
+
+export interface TabItem<V = string> {
+  value: V;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Renders the tab as a link */
+  href?: string;
+}
+export interface GlassTabBarProps<V = string> extends Omit<ComponentPropsWithoutRef<"nav">, "onChange" | "defaultValue"> {
+  items: TabItem<V>[];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  look?: GlassParams;
+}
+export const GlassTabBar: <V = string>(props: GlassTabBarProps<V> & RefAttributes<HTMLElement>) => ReactNode;
+
+export interface GlassButtonProps extends ComponentPropsWithoutRef<"button"> {
+  /** What the lens refracts. Default the parent's [data-glass-source] child */
+  source?: ElementTarget;
+  /** The colour it lights up in. Default var(--lg-accent) */
+  tint?: string;
+  grow?: number;
+  press?: number;
+  lit?: number;
+  hang?: number;
+  look?: GlassParams;
+}
+export const GlassButton: ForwardRefExoticComponent<GlassButtonProps & RefAttributes<HTMLButtonElement>>;

package/lib/react.js

@@ -0,0 +1,238 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useEffect, useImperativeHandle, useState } from "react";
+import { GlassSwitch as GlassSwitch$1, GlassTabBar as GlassTabBar$1, GlassButton as GlassButton$1, LiquidGlass } from "./index.js";
+const resolve = (target) => typeof target === "function" ? target() : target?.current ?? target ?? null;
+const cx = (...names) => names.filter(Boolean).join(" ");
+function useForwarded(ref) {
+  const own = useRef(null);
+  useImperativeHandle(ref, () => own.current, []);
+  return own;
+}
+function useQuiet() {
+  const quiet = useRef(false);
+  return [quiet, (fn) => {
+    quiet.current = true;
+    try {
+      fn();
+    } finally {
+      quiet.current = false;
+    }
+  }];
+}
+function useValue(value, initial) {
+  const [own, setOwn] = useState(initial);
+  return [value === void 0 ? own : value, setOwn];
+}
+function useLiquidGlass(source, { anchor, container, button = false, throttle = 0, ...params } = {}) {
+  const [glass, setGlass] = useState(null);
+  const latest = useRef(params);
+  latest.current = params;
+  useEffect(() => {
+    const el = resolve(source);
+    if (!el) return;
+    const g = new LiquidGlass(el, {
+      anchor: resolve(anchor),
+      container: resolve(container),
+      button,
+      throttle,
+      ...latest.current
+    });
+    setGlass(g);
+    return () => {
+      g.destroy();
+      setGlass(null);
+    };
+  }, [source, anchor, container, button, throttle]);
+  const key = JSON.stringify(params);
+  const applied = useRef(null);
+  useEffect(() => {
+    if (!glass) return;
+    if (applied.current === glass) glass.set(latest.current);
+    applied.current = glass;
+  }, [glass, key]);
+  return glass;
+}
+const GlassScene = forwardRef(function GlassScene2({ as: Tag = "div", glass: params, onPointerMove, onPointerDown, onPointerUp, onPointerLeave, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const lens = useLiquidGlass(el, { container: el, ...params });
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: el,
+      ...rest,
+      onPointerMove: (e) => {
+        lens?.moveTo(e.clientX, e.clientY);
+        onPointerMove?.(e);
+      },
+      onPointerDown: (e) => {
+        lens?.moveTo(e.clientX, e.clientY);
+        lens?.press(true);
+        onPointerDown?.(e);
+      },
+      onPointerUp: (e) => {
+        lens?.press(false);
+        onPointerUp?.(e);
+      },
+      onPointerLeave: (e) => {
+        lens?.press(false);
+        lens?.show(false);
+        onPointerLeave?.(e);
+      },
+      children
+    }
+  );
+});
+const GlassPanel = forwardRef(function GlassPanel2({ as: Tag = "div", source, button = false, glass: params, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const from = useCallback(() => resolve(source) ?? el.current?.parentElement, [source, el]);
+  useLiquidGlass(from, { anchor: el, button, ...params });
+  return /* @__PURE__ */ jsx(Tag, { ref: el, ...rest, children });
+});
+const GlassSwitch = forwardRef(function GlassSwitch2({ checked, defaultChecked = false, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const [on, setOn] = useValue(checked, defaultChecked);
+  const inst = useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = useRef(onChange);
+  latest.current = onChange;
+  useEffect(() => {
+    const root = el.current;
+    const s = inst.current = new GlassSwitch$1(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      setOn(e.detail.value === 1);
+      latest.current?.(e.detail.value === 1);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      s.destroy();
+      inst.current = null;
+    };
+  }, [JSON.stringify(look)]);
+  useEffect(() => {
+    if (inst.current) silently(() => inst.current.select(on ? 1 : 0));
+  }, [on]);
+  return /* @__PURE__ */ jsxs("button", { ref: el, type: "button", role: "switch", "aria-checked": on, className: cx("lg-switch", className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "refract", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "thumb", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { "data-opt": "" }),
+    /* @__PURE__ */ jsx("span", { "data-opt": "" })
+  ] });
+});
+const GlassSegment = forwardRef(function GlassSegment2({ options, value, defaultValue, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const items = options.map((o) => typeof o === "object" ? o : { value: o, label: o });
+  const [current, setCurrent] = useValue(value, defaultValue ?? items[0].value);
+  const index = Math.max(0, items.findIndex((o) => o.value === current));
+  const inst = useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = useRef({ onChange, items });
+  latest.current = { onChange, items };
+  useEffect(() => {
+    const root = el.current;
+    const s = inst.current = new GlassSwitch$1(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      const next = latest.current.items[e.detail.value].value;
+      setCurrent(next);
+      latest.current.onChange?.(next);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      s.destroy();
+      inst.current = null;
+    };
+  }, [JSON.stringify(look)]);
+  useEffect(() => {
+    if (inst.current) silently(() => inst.current.select(index));
+  }, [index]);
+  return /* @__PURE__ */ jsxs("div", { ref: el, role: "radiogroup", className: cx("lg-segment", className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "refract", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "thumb", "aria-hidden": "true" }),
+    items.slice(0, 2).map((o, i) => /* @__PURE__ */ jsx("button", { type: "button", role: "radio", "aria-checked": i === index, "data-opt": "", children: o.label }, String(o.value)))
+  ] });
+});
+const GlassTabBar = forwardRef(function GlassTabBar2({ items, value, defaultValue, onChange, look, className, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const [current, setCurrent] = useValue(value, defaultValue ?? items[0]?.value);
+  const inst = useRef(null);
+  const [quiet, silently] = useQuiet();
+  const latest = useRef({ onChange, items });
+  latest.current = { onChange, items };
+  const keys = items.map((t) => String(t.value)).join("\n");
+  useEffect(() => {
+    const root = el.current;
+    const bar = inst.current = new GlassTabBar$1(root, look && { look });
+    const changed = (e) => {
+      if (e.target !== root || quiet.current) return;
+      const next = latest.current.items[bar.tabs.indexOf(e.detail.tab)]?.value;
+      setCurrent(next);
+      latest.current.onChange?.(next);
+    };
+    root.addEventListener("change", changed);
+    return () => {
+      root.removeEventListener("change", changed);
+      bar.destroy();
+      inst.current = null;
+    };
+  }, [keys, JSON.stringify(look)]);
+  useEffect(() => {
+    const bar = inst.current;
+    const tab = bar?.tabs[items.findIndex((t) => t.value === current)];
+    if (tab) silently(() => bar.choose(tab));
+  }, [current, keys]);
+  return /* @__PURE__ */ jsxs("nav", { ref: el, className: cx("lg-tabs", className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "lg-pill", "aria-hidden": "true", hidden: true }),
+    /* @__PURE__ */ jsx("span", { className: "lg-glowbox", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "lg-glow" }) }),
+    items.map((t) => {
+      const Tab = t.href ? "a" : "button";
+      return /* @__PURE__ */ jsxs(
+        Tab,
+        {
+          ...t.href ? { href: t.href } : { type: "button" },
+          "aria-current": t.value === current ? "page" : void 0,
+          children: [
+            t.icon,
+            t.label
+          ]
+        },
+        String(t.value)
+      );
+    })
+  ] });
+});
+const GlassButton = forwardRef(function GlassButton2({ source, tint, grow, press, lit, hang, look, className, style, children, ...rest }, ref) {
+  const el = useForwarded(ref);
+  const options = { grow, press, lit, hang, look };
+  const key = JSON.stringify(options);
+  useEffect(() => {
+    const given = Object.fromEntries(Object.entries(options).filter(([, v]) => v !== void 0));
+    const from = resolve(source);
+    const b = new GlassButton$1(el.current, from ? { ...given, source: from } : given);
+    return () => b.destroy();
+  }, [source, key]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: el,
+      type: "button",
+      className: cx("lg-button", className),
+      style: tint ? { "--tint": tint, ...style } : style,
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { className: "lg-content", children })
+    }
+  );
+});
+export {
+  GlassButton,
+  GlassPanel,
+  GlassScene,
+  GlassSegment,
+  GlassSwitch,
+  GlassTabBar,
+  LiquidGlass,
+  useLiquidGlass
+};