@opalui/react 0.0.0-stage → 0.0.1

package/dist/components/menu/menu.js

@@ -0,0 +1,125 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { Button } from '../button/button.js';
+import { stylesheetHref } from '../../internal/styles.js';
+import componentCss from './menu.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('menu', css);
+/** A compact action menu. Styles are included automatically. */
+export function Menu({ items, icon, children, disabled, className, 'aria-label': label }) {
+    const id = useId();
+    const trigger = useRef(null);
+    const panel = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [highlight, setHighlight] = useState(null);
+    function highlightItem(item) {
+        setHighlight({ top: item.offsetTop, height: item.offsetHeight });
+    }
+    const search = useRef({ text: '', time: 0 });
+    const options = () => Array.from(panel.current?.querySelectorAll('[role="menuitem"]:not(:disabled)') ?? []);
+    function close(restoreFocus = true) {
+        panel.current?.hidePopover?.();
+        setOpen(false);
+        setHighlight(null);
+        if (restoreFocus)
+            trigger.current?.focus({ preventScroll: true });
+    }
+    function position() {
+        if (!trigger.current || !panel.current)
+            return;
+        const anchor = trigger.current.getBoundingClientRect();
+        const menu = panel.current;
+        const width = menu.offsetWidth;
+        const height = menu.offsetHeight;
+        menu.style.left = `${Math.max(8, Math.min(anchor.left, window.innerWidth - width - 8))}px`;
+        menu.style.top = `${Math.max(8, Math.min(anchor.top, window.innerHeight - height - 8))}px`;
+        menu.style.transformOrigin = `${Math.max(0, anchor.left - parseFloat(menu.style.left) + anchor.width / 2)}px ${Math.max(0, anchor.top - parseFloat(menu.style.top) + anchor.height / 2)}px`;
+    }
+    function show(last = false) {
+        if (disabled)
+            return;
+        const menu = panel.current;
+        if (!menu)
+            return;
+        menu.dataset.open = 'true';
+        menu.showPopover?.();
+        position();
+        setOpen(true);
+        search.current = { text: '', time: 0 };
+        const enabled = options();
+        (last ? enabled.at(-1) : enabled[0])?.focus({ preventScroll: true });
+        if (!enabled.length)
+            menu.focus({ preventScroll: true });
+    }
+    useEffect(() => {
+        if (!open)
+            return;
+        const outside = (event) => {
+            if (!panel.current?.contains(event.target) && !trigger.current?.contains(event.target))
+                close(false);
+        };
+        const blur = () => close(false);
+        document.addEventListener('pointerdown', outside);
+        window.addEventListener('resize', position);
+        window.addEventListener('scroll', position, true);
+        window.addEventListener('blur', blur);
+        return () => {
+            document.removeEventListener('pointerdown', outside);
+            window.removeEventListener('resize', position);
+            window.removeEventListener('scroll', position, true);
+            window.removeEventListener('blur', blur);
+        };
+    }, [open]);
+    useEffect(() => { if (disabled)
+        close(false); }, [disabled]);
+    useEffect(() => {
+        if (!open || !panel.current)
+            return;
+        const observer = new ResizeObserver(() => {
+            const active = document.activeElement;
+            if (active instanceof HTMLButtonElement && panel.current?.contains(active))
+                highlightItem(active);
+        });
+        observer.observe(panel.current);
+        options().forEach(item => observer.observe(item));
+        return () => observer.disconnect();
+    }, [open, items]);
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), _jsxs("span", { className: ['opal-menu', className].filter(Boolean).join(' '), children: [_jsx(Button, { ref: trigger, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": id, disabled: disabled, icon: icon ?? (children ? undefined : _jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [_jsx("circle", { cx: "5", cy: "12", r: "1.6" }), _jsx("circle", { cx: "12", cy: "12", r: "1.6" }), _jsx("circle", { cx: "19", cy: "12", r: "1.6" })] })), onClick: () => open ? close() : show(), onKeyDown: event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            show(event.key === 'ArrowUp');
+                        } }, children: children }), _jsxs("div", { ref: panel, id: id, role: "menu", "aria-label": label, tabIndex: -1, popover: "manual", className: "opal-menu-panel", "data-open": open || undefined, onKeyDown: event => {
+                            const enabled = options();
+                            const current = enabled.indexOf(document.activeElement);
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                close();
+                                return;
+                            }
+                            if (event.key === 'Tab') {
+                                close();
+                                return;
+                            }
+                            if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                                event.preventDefault();
+                                const index = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+                                    : (current + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length;
+                                enabled[index]?.focus();
+                                return;
+                            }
+                            if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && !event.ctrlKey && !event.altKey) {
+                                event.preventDefault();
+                                const now = Date.now();
+                                search.current.text = (now - search.current.time < 600 ? search.current.text : '') + event.key.toLowerCase();
+                                search.current.time = now;
+                                const query = new Set(search.current.text).size === 1 ? event.key.toLowerCase() : search.current.text;
+                                const ordered = [...enabled.slice(current + 1), ...enabled.slice(0, current + 1)];
+                                ordered.find(item => item.textContent?.trim().toLowerCase().startsWith(query))?.focus();
+                            }
+                        }, children: [highlight && _jsx("span", { className: "opal-menu-highlight", "aria-hidden": "true", style: { transform: `translateY(${highlight.top}px)`, height: highlight.height } }), items.map((item, index) => item === 'separator' ? _jsx("div", { role: "separator", className: "opal-menu-separator" }, index)
+                                : _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, disabled: item.disabled, className: "opal-menu-item", "data-destructive": item.destructive || undefined, onFocus: event => highlightItem(event.currentTarget), onPointerMove: event => { if (event.pointerType === 'mouse' && !item.disabled && document.activeElement !== event.currentTarget)
+                                        event.currentTarget.focus({ preventScroll: true }); }, onClick: () => { close(); item.onSelect?.(); }, children: [item.icon && _jsx("span", { className: "opal-menu-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { children: item.label })] }, index))] })] })] });
+}
+//# sourceMappingURL=menu.js.map

package/dist/components/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { useEffect, useId, useRef, useState, type ReactNode } from 'react'\nimport { Button } from '../button/button.js'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './menu.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\n\nconst styleHref = stylesheetHref('menu', css)\nexport type MenuItem = { label: string; icon?: ReactNode; onSelect?: () => void; disabled?: boolean; destructive?: boolean } | 'separator'\nexport type MenuProps = {\n  'aria-label': string\n  items: readonly MenuItem[]\n  icon?: ReactNode\n  children?: ReactNode\n  disabled?: boolean\n  className?: string\n}\n\n/** A compact action menu. Styles are included automatically. */\nexport function Menu({ items, icon, children, disabled, className, 'aria-label': label }: MenuProps) {\n  const id = useId()\n  const trigger = useRef<HTMLButtonElement>(null)\n  const panel = useRef<HTMLDivElement>(null)\n  const [open, setOpen] = useState(false)\n  const [highlight, setHighlight] = useState<{ top: number; height: number } | null>(null)\n  function highlightItem(item: HTMLButtonElement) {\n    setHighlight({ top: item.offsetTop, height: item.offsetHeight })\n  }\n  const search = useRef({ text: '', time: 0 })\n  const options = () => Array.from(panel.current?.querySelectorAll<HTMLButtonElement>('[role=\"menuitem\"]:not(:disabled)') ?? [])\n  function close(restoreFocus = true) {\n    panel.current?.hidePopover?.()\n    setOpen(false)\n    setHighlight(null)\n    if (restoreFocus) trigger.current?.focus({ preventScroll: true })\n  }\n  function position() {\n    if (!trigger.current || !panel.current) return\n    const anchor = trigger.current.getBoundingClientRect()\n    const menu = panel.current\n    const width = menu.offsetWidth\n    const height = menu.offsetHeight\n    menu.style.left = `${Math.max(8, Math.min(anchor.left, window.innerWidth - width - 8))}px`\n    menu.style.top = `${Math.max(8, Math.min(anchor.top, window.innerHeight - height - 8))}px`\n    menu.style.transformOrigin = `${Math.max(0, anchor.left - parseFloat(menu.style.left) + anchor.width / 2)}px ${Math.max(0, anchor.top - parseFloat(menu.style.top) + anchor.height / 2)}px`\n  }\n  function show(last = false) {\n    if (disabled) return\n    const menu = panel.current\n    if (!menu) return\n    menu.dataset.open = 'true'\n    menu.showPopover?.()\n    position()\n    setOpen(true)\n    search.current = { text: '', time: 0 }\n    const enabled = options()\n    ;(last ? enabled.at(-1) : enabled[0])?.focus({ preventScroll: true })\n    if (!enabled.length) menu.focus({ preventScroll: true })\n  }\n  useEffect(() => {\n    if (!open) return\n    const outside = (event: PointerEvent) => {\n      if (!panel.current?.contains(event.target as Node) && !trigger.current?.contains(event.target as Node)) close(false)\n    }\n    const blur = () => close(false)\n    document.addEventListener('pointerdown', outside)\n    window.addEventListener('resize', position)\n    window.addEventListener('scroll', position, true)\n    window.addEventListener('blur', blur)\n    return () => {\n      document.removeEventListener('pointerdown', outside)\n      window.removeEventListener('resize', position)\n      window.removeEventListener('scroll', position, true)\n      window.removeEventListener('blur', blur)\n    }\n  }, [open])\n  useEffect(() => { if (disabled) close(false) }, [disabled])\n  useEffect(() => {\n    if (!open || !panel.current) return\n    const observer = new ResizeObserver(() => {\n      const active = document.activeElement\n      if (active instanceof HTMLButtonElement && panel.current?.contains(active)) highlightItem(active)\n    })\n    observer.observe(panel.current)\n    options().forEach(item => observer.observe(item))\n    return () => observer.disconnect()\n  }, [open, items])\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    <span className={['opal-menu', className].filter(Boolean).join(' ')}>\n      <Button ref={trigger} aria-label={label} aria-haspopup=\"menu\" aria-expanded={open} aria-controls={id}\n        disabled={disabled} icon={icon ?? (children ? undefined : <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><circle cx=\"5\" cy=\"12\" r=\"1.6\" /><circle cx=\"12\" cy=\"12\" r=\"1.6\" /><circle cx=\"19\" cy=\"12\" r=\"1.6\" /></svg>)}\n        onClick={() => open ? close() : show()}\n        onKeyDown={event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); show(event.key === 'ArrowUp') } }}>\n        {children}\n      </Button>\n      <div ref={panel} id={id} role=\"menu\" aria-label={label} tabIndex={-1} popover=\"manual\"\n        className=\"opal-menu-panel\" data-open={open || undefined}\n        onKeyDown={event => {\n          const enabled = options()\n          const current = enabled.indexOf(document.activeElement as HTMLButtonElement)\n          if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close(); return }\n          if (event.key === 'Tab') { close(); return }\n          if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n            event.preventDefault()\n            const index = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1\n              : (current + (event.key === 'ArrowDown' ? 1 : -1) + enabled.length) % enabled.length\n            enabled[index]?.focus(); return\n          }\n          if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && !event.ctrlKey && !event.altKey) {\n            event.preventDefault()\n            const now = Date.now()\n            search.current.text = (now - search.current.time < 600 ? search.current.text : '') + event.key.toLowerCase()\n            search.current.time = now\n            const query = new Set(search.current.text).size === 1 ? event.key.toLowerCase() : search.current.text\n            const ordered = [...enabled.slice(current + 1), ...enabled.slice(0, current + 1)]\n            ordered.find(item => item.textContent?.trim().toLowerCase().startsWith(query))?.focus()\n          }\n        }}>\n        {highlight && <span className=\"opal-menu-highlight\" aria-hidden=\"true\"\n          style={{ transform: `translateY(${highlight.top}px)`, height: highlight.height }} />}\n        {items.map((item, index) => item === 'separator' ? <div key={index} role=\"separator\" className=\"opal-menu-separator\" />\n          : <button key={index} type=\"button\" role=\"menuitem\" tabIndex={-1} disabled={item.disabled}\n            className=\"opal-menu-item\" data-destructive={item.destructive || undefined}\n            onFocus={event => highlightItem(event.currentTarget)}\n            onPointerMove={event => { if (event.pointerType === 'mouse' && !item.disabled && document.activeElement !== event.currentTarget) event.currentTarget.focus({ preventScroll: true }) }}\n            onClick={() => { close(); item.onSelect?.() }}>\n            {item.icon && <span className=\"opal-menu-icon\" aria-hidden=\"true\">{item.icon}</span>}\n            <span>{item.label}</span>\n          </button>)}\n      </div>\n    </span>\n  </>\n}\n"]}

package/dist/components/segmented-control/segmented-control.css

@@ -0,0 +1,109 @@
+/* Shared material. Public variables can be set once on a theme container. */
+:where(.opal-glass, .opal-button, .opal-input, .opal-menu-panel, .opal-switch, .opal-slider, .opal-segmented, .opal-textarea, .opal-select) {
+  --_opal-glass-rim: var(--opal-glass-rim, inset 0 0 0 .5px rgb(255 255 255 / 7%), inset .65px 1px .65px rgb(255 255 255 / var(--opal-material-rim, .28)), inset -.4px -.65px .8px rgb(255 255 255 / calc(var(--opal-material-rim, .28) * .43)));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}
+
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:12px; --opal-material-rim:0.22; }
+:where(.opal-menu-panel) { --opal-material-frost:24px; --opal-material-rim:0.3; }
+
+
+.opal-segmented-filter { position: absolute; pointer-events: none; }
+.opal-segmented {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: repeat(var(--opal-segment-count), minmax(0, 1fr));
+  box-sizing: border-box;
+  padding: 3px;
+  border-radius: 999px;
+  background: var(--opal-segmented-background, rgb(0 0 0 / 5%));
+  color: var(--opal-segmented-color, #202020);
+  box-shadow: var(--opal-segmented-shadow, var(--_opal-glass-shadow));
+  vertical-align: middle;
+  max-width: 100%;
+  isolation: isolate;
+}
+.opal-segmented::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--opal-segmented-rim, var(--_opal-glass-rim));
+  opacity: .7;
+}
+.opal-segmented-indicator {
+  position: absolute;
+  inset-block: 3px;
+  inset-inline-start: calc(3px + (100% - 6px) / var(--opal-segment-count) * var(--opal-segment-index));
+  width: calc((100% - 6px) / var(--opal-segment-count));
+  border-radius: 999px;
+  pointer-events: none;
+  background: var(--opal-segmented-thumb, #fff);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), inset 0 0 0 0.5px rgb(255 255 255 / 18%);
+  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;
+}
+.opal-segmented-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 36px;
+  padding: 7px 24px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.opal-segmented-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 170ms ease; }
+.opal-segmented-item[aria-checked="true"] { color: var(--opal-segmented-selected-color, inherit); }
+.opal-segmented-item:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 3px; }
+.opal-segmented:is([data-dragging], :has(.opal-segmented-item:active:not(:disabled))) .opal-segmented-indicator {
+  transform: translateX(var(--opal-segment-pull, 0px)) scale(calc(1.14 + var(--opal-segment-stretch, 0)), calc(1.45 - var(--opal-segment-stretch, 0) * 0.75));
+  background: var(--opal-segmented-lifted, rgb(255 255 255 / 30%));
+  z-index: 0;
+  -webkit-backdrop-filter: blur(.25px) saturate(110%);
+  backdrop-filter: blur(.25px) saturate(110%);
+  box-shadow: 0 5px 12px rgb(0 0 0 / 13%), var(--_opal-glass-rim);
+  transition-duration: 170ms, 170ms, 140ms, 170ms;
+}
+/* Pointer movement is direct; restoring the normal transition on release
+   lets the pill settle onto the nearest enabled segment. */
+.opal-segmented[data-tracking] .opal-segmented-indicator {
+  transition-property: transform, background-color, box-shadow;
+  transition-duration: 170ms, 140ms, 170ms;
+}
+/* A small overshoot on release gives the resisted pull a soft rebound. */
+.opal-segmented[data-rebounding]:not([data-dragging]) .opal-segmented-indicator {
+  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 1.5, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;
+}
+.opal-segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.opal-segmented[data-disabled] { opacity: 0.4; }
+.opal-segmented[data-disabled] .opal-segmented-item { opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .opal-segmented .opal-segmented-indicator, .opal-segmented .opal-segmented-label { transition: none !important; transform: none !important; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .opal-segmented { background: var(--opal-segmented-solid-background, #ededed); }
+  .opal-segmented .opal-segmented-indicator { z-index: 0; background: var(--opal-segmented-thumb, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
+}
+@media (forced-colors: active) {
+  .opal-segmented::after { display: none; }
+  .opal-segmented { background: Canvas; color: ButtonText; outline: 1px solid ButtonText; }
+  .opal-segmented .opal-segmented-indicator { z-index: 0; background: Highlight !important; box-shadow: none !important; transform: none !important; }
+  .opal-segmented-item[aria-checked="true"] { color: HighlightText; }
+  .opal-segmented-item:disabled { color: GrayText; }
+}
+
+/* An inert visual layer owns the ink; native buttons retain all semantics. */
+.opal-segmented-optical-labels { position:absolute; inset:-24px; padding:27px; display:grid; grid-template-columns:repeat(var(--opal-segment-count),minmax(0,1fr)); pointer-events:none; visibility:hidden; z-index:1; }
+.opal-segmented-optical-label { display:flex; align-items:center; justify-content:center; min-width:0; white-space:nowrap; }
+.opal-segmented-optical-label[data-selected] { color:var(--opal-segmented-selected-color,inherit); }
+.opal-segmented-optical-label[data-disabled] { opacity:.4; }
+.opal-segmented[data-lensing] .opal-segmented-optical-labels { visibility:visible; }
+.opal-segmented[data-lensing] .opal-segmented-label { opacity:0; }

package/dist/components/segmented-control/segmented-control.css.js

@@ -0,0 +1 @@
+export default ".opal-segmented-filter { position: absolute; pointer-events: none; }\n.opal-segmented {\n  position: relative;\n  display: inline-grid;\n  grid-template-columns: repeat(var(--opal-segment-count), minmax(0, 1fr));\n  box-sizing: border-box;\n  padding: 3px;\n  border-radius: 999px;\n  background: var(--opal-segmented-background, rgb(0 0 0 / 5%));\n  color: var(--opal-segmented-color, #202020);\n  box-shadow: var(--opal-segmented-shadow, var(--_opal-glass-shadow));\n  vertical-align: middle;\n  max-width: 100%;\n  isolation: isolate;\n}\n.opal-segmented::after {\n  content: ''; position: absolute; inset: 0; border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--opal-segmented-rim, var(--_opal-glass-rim));\n  opacity: .7;\n}\n.opal-segmented-indicator {\n  position: absolute;\n  inset-block: 3px;\n  inset-inline-start: calc(3px + (100% - 6px) / var(--opal-segment-count) * var(--opal-segment-index));\n  width: calc((100% - 6px) / var(--opal-segment-count));\n  border-radius: 999px;\n  pointer-events: none;\n  background: var(--opal-segmented-thumb, #fff);\n  box-shadow: 0 1px 3px rgb(0 0 0 / 10%), inset 0 0 0 0.5px rgb(255 255 255 / 18%);\n  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;\n}\n.opal-segmented-item {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  min-height: 36px;\n  padding: 7px 24px;\n  border: 0;\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1.25;\n  cursor: pointer;\n  touch-action: none;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.opal-segmented-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 170ms ease; }\n.opal-segmented-item[aria-checked=\"true\"] { color: var(--opal-segmented-selected-color, inherit); }\n.opal-segmented-item:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 3px; }\n.opal-segmented:is([data-dragging], :has(.opal-segmented-item:active:not(:disabled))) .opal-segmented-indicator {\n  transform: translateX(var(--opal-segment-pull, 0px)) scale(calc(1.14 + var(--opal-segment-stretch, 0)), calc(1.45 - var(--opal-segment-stretch, 0) * 0.75));\n  background: var(--opal-segmented-lifted, rgb(255 255 255 / 30%));\n  z-index: 0;\n  -webkit-backdrop-filter: blur(.25px) saturate(110%);\n  backdrop-filter: blur(.25px) saturate(110%);\n  box-shadow: 0 5px 12px rgb(0 0 0 / 13%), var(--_opal-glass-rim);\n  transition-duration: 170ms, 170ms, 140ms, 170ms;\n}\n/* Pointer movement is direct; restoring the normal transition on release\n   lets the pill settle onto the nearest enabled segment. */\n.opal-segmented[data-tracking] .opal-segmented-indicator {\n  transition-property: transform, background-color, box-shadow;\n  transition-duration: 170ms, 140ms, 170ms;\n}\n/* A small overshoot on release gives the resisted pull a soft rebound. */\n.opal-segmented[data-rebounding]:not([data-dragging]) .opal-segmented-indicator {\n  transition: inset-inline-start 400ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.22, 1.5, 0.36, 1), background-color 180ms ease, box-shadow 250ms ease;\n}\n.opal-segmented-item:disabled { opacity: 0.4; cursor: not-allowed; }\n.opal-segmented[data-disabled] { opacity: 0.4; }\n.opal-segmented[data-disabled] .opal-segmented-item { opacity: 1; }\n@media (prefers-reduced-motion: reduce) {\n  .opal-segmented .opal-segmented-indicator, .opal-segmented .opal-segmented-label { transition: none !important; transform: none !important; }\n}\n@media (prefers-reduced-transparency: reduce) {\n  .opal-segmented { background: var(--opal-segmented-solid-background, #ededed); }\n  .opal-segmented .opal-segmented-indicator { z-index: 0; background: var(--opal-segmented-thumb, #fff) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }\n}\n@media (forced-colors: active) {\n  .opal-segmented::after { display: none; }\n  .opal-segmented { background: Canvas; color: ButtonText; outline: 1px solid ButtonText; }\n  .opal-segmented .opal-segmented-indicator { z-index: 0; background: Highlight !important; box-shadow: none !important; transform: none !important; }\n  .opal-segmented-item[aria-checked=\"true\"] { color: HighlightText; }\n  .opal-segmented-item:disabled { color: GrayText; }\n}\n\n/* An inert visual layer owns the ink; native buttons retain all semantics. */\n.opal-segmented-optical-labels { position:absolute; inset:-24px; padding:27px; display:grid; grid-template-columns:repeat(var(--opal-segment-count),minmax(0,1fr)); pointer-events:none; visibility:hidden; z-index:1; }\n.opal-segmented-optical-label { display:flex; align-items:center; justify-content:center; min-width:0; white-space:nowrap; }\n.opal-segmented-optical-label[data-selected] { color:var(--opal-segmented-selected-color,inherit); }\n.opal-segmented-optical-label[data-disabled] { opacity:.4; }\n.opal-segmented[data-lensing] .opal-segmented-optical-labels { visibility:visible; }\n.opal-segmented[data-lensing] .opal-segmented-label { opacity:0; }\n";

package/dist/components/segmented-control/segmented-control.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type SegmentedControlItem = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type SegmentedControlProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role'> & {
+    items: readonly SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+};
+/** A single-choice control. Supply aria-label or aria-labelledby for its group. */
+export declare const SegmentedControl: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "role" | "children" | "onChange"> & {
+    items: readonly SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/segmented-control/segmented-control.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { stylesheetHref } from '../../internal/styles.js';
+import { useGlassLens } from '../../internal/glass/lens.js';
+import { materials } from '../../internal/glass/material.js';
+import componentCss from './segmented-control.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('segmented-control', css);
+/** A single-choice control. Supply aria-label or aria-labelledby for its group. */
+export const SegmentedControl = forwardRef(function SegmentedControl({ items, value, defaultValue, onValueChange, disabled = false, className, style, ...props }, ref) {
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? items.find(item => !item.disabled)?.value);
+    const [pressed, setPressed] = useState();
+    const [dragPosition, setDragPosition] = useState();
+    const [overdrag, setOverdrag] = useState({ stretch: 0, offset: 0 });
+    const [rebounding, setRebounding] = useState(false);
+    const indicator = useRef(null);
+    const labelSource = useRef(null);
+    const glass = useGlassLens(indicator, materials.selection, { source: labelSource, active: pressed !== undefined && !disabled, ink: true });
+    const pointerClick = useRef(null);
+    const drag = useRef(null);
+    function nearestEnabled(position) {
+        return items.reduce((best, item, i) => item.disabled ? best
+            : best < 0 || Math.abs(i - position) < Math.abs(best - position) ? i : best, -1);
+    }
+    function movePill(clientX) {
+        const active = drag.current;
+        if (!active || disabled)
+            return;
+        const group = active.target.parentElement;
+        if (!group)
+            return;
+        const width = active.target.getBoundingClientRect().width;
+        if (!width)
+            return;
+        const direction = getComputedStyle(group).direction === 'rtl' ? -1 : 1;
+        const rawPosition = active.startIndex + direction * (clientX - active.startX) / width;
+        const position = Math.max(0, Math.min(items.length - 1, rawPosition));
+        const excess = rawPosition - position;
+        // Increasing resistance caps the stretch at 14% of a segment's width.
+        // Shift slightly beyond half the extension so the whole pill drifts with the pull.
+        const stretch = 0.14 * (1 - Math.exp(-Math.abs(excess) / 0.9));
+        setOverdrag({ stretch, offset: direction * Math.sign(excess) * stretch * width * 0.85 });
+        active.position = position;
+        active.stretch = stretch;
+        setDragPosition(position);
+        const nearest = nearestEnabled(position);
+        setPressed(items[nearest]?.value);
+        return stretch;
+    }
+    function endDrag() {
+        const active = drag.current;
+        drag.current = null;
+        setPressed(undefined);
+        setDragPosition(undefined);
+        setOverdrag({ stretch: 0, offset: 0 });
+        setRebounding(false);
+        if (active?.target.hasPointerCapture(active.pointerId))
+            active.target.releasePointerCapture(active.pointerId);
+    }
+    useEffect(() => {
+        window.addEventListener('blur', endDrag);
+        return () => window.removeEventListener('blur', endDrag);
+    }, []);
+    useEffect(() => { if (disabled)
+        endDrag(); }, [disabled]);
+    const selected = value === undefined ? internalValue : value;
+    const selectedIndex = items.findIndex(item => item.value === selected);
+    const pressedIndex = items.findIndex(item => item.value === pressed && !item.disabled);
+    const index = dragPosition ?? (pressedIndex >= 0 ? pressedIndex : selectedIndex);
+    const firstEnabled = items.findIndex(item => !item.disabled);
+    const focusIndex = selectedIndex >= 0 && !items[selectedIndex]?.disabled ? selectedIndex : firstEnabled;
+    function select(next) {
+        if (disabled || items.find(item => item.value === next)?.disabled || next === selected)
+            return;
+        if (value === undefined)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }
+    function finishDrag(pointerId, clientX) {
+        const active = drag.current;
+        if (!active || active.pointerId !== pointerId)
+            return;
+        // Cancellation/capture loss may carry empty coordinates; keep the last
+        // tracked position in those cases instead of reverting to the press origin.
+        if (clientX !== undefined)
+            movePill(clientX);
+        const nextIndex = nearestEnabled(active.position);
+        const next = items[nextIndex];
+        const button = active.target.parentElement?.querySelectorAll('.opal-segmented-item')[nextIndex];
+        pointerClick.current = { target: active.target, until: Date.now() + 500 };
+        endDrag();
+        if (next)
+            select(next.value);
+        setRebounding(active.stretch > 0.005);
+        button?.focus({ preventScroll: true });
+    }
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), glass.filter, _jsxs("div", { ...props, ref: ref, role: "radiogroup", "aria-disabled": disabled || undefined, className: ['opal-segmented', className].filter(Boolean).join(' '), "data-lensing": glass.lensing || undefined, "data-disabled": disabled || undefined, "data-dragging": pressed !== undefined && !disabled || undefined, "data-tracking": dragPosition !== undefined && !disabled || undefined, "data-rebounding": rebounding || undefined, style: { '--opal-segment-count': Math.max(1, items.length), '--opal-segment-index': Math.max(0, index),
+                    '--opal-segment-stretch': overdrag.stretch, '--opal-segment-pull': `${overdrag.offset}px`, ...glass.surfaceStyle, ...style }, children: [index >= 0 && _jsx("span", { ref: indicator, className: "opal-segmented-indicator", "aria-hidden": "true", onTransitionEnd: event => { if (event.propertyName === 'transform')
+                            setRebounding(false); } }), _jsx("span", { ref: labelSource, className: "opal-segmented-optical-labels", "aria-hidden": "true", style: glass.sourceStyle, children: items.map(item => _jsx("span", { className: "opal-segmented-optical-label", "data-selected": item.value === selected || undefined, "data-disabled": item.disabled || undefined, children: item.label }, item.value)) }), items.map((item, itemIndex) => _jsx("button", { type: "button", role: "radio", "aria-checked": item.value === selected, disabled: disabled || item.disabled, tabIndex: !disabled && itemIndex === focusIndex ? 0 : -1, className: "opal-segmented-item", "data-pressed": pressed === item.value || undefined, onPointerDown: event => {
+                            if (event.button !== 0 || !event.isPrimary || drag.current || disabled)
+                                return;
+                            setRebounding(false);
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            drag.current = { pointerId: event.pointerId, startX: event.clientX, startIndex: itemIndex, position: itemIndex, stretch: 0, target: event.currentTarget };
+                            setPressed(item.value);
+                            select(item.value);
+                        }, onPointerMove: event => {
+                            const active = drag.current;
+                            if (!active || active.pointerId !== event.pointerId || disabled)
+                                return;
+                            // Fractional segment positions follow the pointer without selecting
+                            // intermediate values. The initial grab offset is preserved.
+                            movePill(event.clientX);
+                        }, onPointerUp: event => {
+                            // A fast release can arrive without a final pointermove.
+                            finishDrag(event.pointerId, event.clientX);
+                        }, onPointerCancel: event => finishDrag(event.pointerId), onLostPointerCapture: event => finishDrag(event.pointerId), onDragStart: event => event.preventDefault(), onClick: event => {
+                            setPressed(undefined);
+                            const pending = pointerClick.current;
+                            pointerClick.current = null;
+                            if (pending?.target === event.currentTarget && Date.now() < pending.until)
+                                return;
+                            // Pointer selection already happened on press. Keep keyboard and
+                            // assistive-technology clicks working without a second callback.
+                            if (event.detail === 0)
+                                select(item.value);
+                        }, onKeyDown: event => {
+                            pointerClick.current = null;
+                            if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key))
+                                return;
+                            event.preventDefault();
+                            const group = event.currentTarget.parentElement;
+                            const rtl = getComputedStyle(group).direction === 'rtl';
+                            const enabled = items.map((entry, i) => entry.disabled ? -1 : i).filter(i => i >= 0);
+                            const position = enabled.indexOf(itemIndex);
+                            const backward = event.key === 'ArrowUp' || event.key === (rtl ? 'ArrowRight' : 'ArrowLeft');
+                            const next = event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1)
+                                : enabled[(position + (backward ? -1 : 1) + enabled.length) % enabled.length];
+                            if (next === undefined)
+                                return;
+                            select(items[next].value);
+                            group.querySelectorAll('.opal-segmented-item')[next]?.focus();
+                        }, children: _jsx("span", { className: "opal-segmented-label", children: item.label }) }, item.value))] })] });
+});
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport { useGlassLens } from '../../internal/glass/lens.js'\nimport { materials } from '../../internal/glass/material.js'\nimport componentCss from './segmented-control.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\n\nconst styleHref = stylesheetHref('segmented-control', css)\n\nexport type SegmentedControlItem = { value: string; label: ReactNode; disabled?: boolean }\nexport type SegmentedControlProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role'> & {\n  items: readonly SegmentedControlItem[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  disabled?: boolean\n}\n\n/** A single-choice control. Supply aria-label or aria-labelledby for its group. */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(function SegmentedControl(\n  { items, value, defaultValue, onValueChange, disabled = false, className, style, ...props }, ref,\n) {\n  const [internalValue, setInternalValue] = useState(() => defaultValue ?? items.find(item => !item.disabled)?.value)\n  const [pressed, setPressed] = useState<string>()\n  const [dragPosition, setDragPosition] = useState<number>()\n  const [overdrag, setOverdrag] = useState({ stretch: 0, offset: 0 })\n  const [rebounding, setRebounding] = useState(false)\n  const indicator = useRef<HTMLSpanElement>(null)\n  const labelSource = useRef<HTMLSpanElement>(null)\n  const glass = useGlassLens(indicator, materials.selection, { source: labelSource, active: pressed !== undefined && !disabled, ink: true })\n  const pointerClick = useRef<{ target: HTMLButtonElement; until: number } | null>(null)\n  const drag = useRef<{ pointerId: number; startX: number; startIndex: number; position: number; stretch: number; target: HTMLButtonElement } | null>(null)\n\n  function nearestEnabled(position: number) {\n    return items.reduce((best, item, i) => item.disabled ? best\n      : best < 0 || Math.abs(i - position) < Math.abs(best - position) ? i : best, -1)\n  }\n\n  function movePill(clientX: number) {\n    const active = drag.current\n    if (!active || disabled) return\n    const group = active.target.parentElement\n    if (!group) return\n    const width = active.target.getBoundingClientRect().width\n    if (!width) return\n    const direction = getComputedStyle(group).direction === 'rtl' ? -1 : 1\n    const rawPosition = active.startIndex + direction * (clientX - active.startX) / width\n    const position = Math.max(0, Math.min(items.length - 1, rawPosition))\n    const excess = rawPosition - position\n    // Increasing resistance caps the stretch at 14% of a segment's width.\n    // Shift slightly beyond half the extension so the whole pill drifts with the pull.\n    const stretch = 0.14 * (1 - Math.exp(-Math.abs(excess) / 0.9))\n    setOverdrag({ stretch, offset: direction * Math.sign(excess) * stretch * width * 0.85 })\n    active.position = position\n    active.stretch = stretch\n    setDragPosition(position)\n    const nearest = nearestEnabled(position)\n    setPressed(items[nearest]?.value)\n    return stretch\n  }\n  function endDrag() {\n    const active = drag.current\n    drag.current = null\n    setPressed(undefined)\n    setDragPosition(undefined)\n    setOverdrag({ stretch: 0, offset: 0 })\n    setRebounding(false)\n    if (active?.target.hasPointerCapture(active.pointerId)) active.target.releasePointerCapture(active.pointerId)\n  }\n  useEffect(() => {\n    window.addEventListener('blur', endDrag)\n    return () => window.removeEventListener('blur', endDrag)\n  }, [])\n  useEffect(() => { if (disabled) endDrag() }, [disabled])\n  const selected = value === undefined ? internalValue : value\n  const selectedIndex = items.findIndex(item => item.value === selected)\n  const pressedIndex = items.findIndex(item => item.value === pressed && !item.disabled)\n  const index = dragPosition ?? (pressedIndex >= 0 ? pressedIndex : selectedIndex)\n  const firstEnabled = items.findIndex(item => !item.disabled)\n  const focusIndex = selectedIndex >= 0 && !items[selectedIndex]?.disabled ? selectedIndex : firstEnabled\n\n  function select(next: string) {\n    if (disabled || items.find(item => item.value === next)?.disabled || next === selected) return\n    if (value === undefined) setInternalValue(next)\n    onValueChange?.(next)\n  }\n\n  function finishDrag(pointerId: number, clientX?: number) {\n    const active = drag.current\n    if (!active || active.pointerId !== pointerId) return\n    // Cancellation/capture loss may carry empty coordinates; keep the last\n    // tracked position in those cases instead of reverting to the press origin.\n    if (clientX !== undefined) movePill(clientX)\n    const nextIndex = nearestEnabled(active.position)\n    const next = items[nextIndex]\n    const button = active.target.parentElement?.querySelectorAll<HTMLButtonElement>('.opal-segmented-item')[nextIndex]\n    pointerClick.current = { target: active.target, until: Date.now() + 500 }\n    endDrag()\n    if (next) select(next.value)\n    setRebounding(active.stretch > 0.005)\n    button?.focus({ preventScroll: true })\n  }\n\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    {glass.filter}\n    <div {...props} ref={ref} role=\"radiogroup\" aria-disabled={disabled || undefined}\n      className={['opal-segmented', className].filter(Boolean).join(' ')}\n      data-lensing={glass.lensing || undefined}\n      data-disabled={disabled || undefined}\n      data-dragging={pressed !== undefined && !disabled || undefined}\n      data-tracking={dragPosition !== undefined && !disabled || undefined}\n      data-rebounding={rebounding || undefined}\n      style={{ '--opal-segment-count': Math.max(1, items.length), '--opal-segment-index': Math.max(0, index),\n        '--opal-segment-stretch': overdrag.stretch, '--opal-segment-pull': `${overdrag.offset}px`, ...glass.surfaceStyle, ...style } as CSSProperties}>\n      {index >= 0 && <span ref={indicator} className=\"opal-segmented-indicator\" aria-hidden=\"true\"\n        onTransitionEnd={event => { if (event.propertyName === 'transform') setRebounding(false) }} />}\n      <span ref={labelSource} className=\"opal-segmented-optical-labels\" aria-hidden=\"true\" style={glass.sourceStyle}>\n        {items.map(item => <span key={item.value} className=\"opal-segmented-optical-label\" data-selected={item.value === selected || undefined} data-disabled={item.disabled || undefined}>{item.label}</span>)}\n      </span>\n      {items.map((item, itemIndex) => <button key={item.value} type=\"button\" role=\"radio\"\n        aria-checked={item.value === selected} disabled={disabled || item.disabled}\n        tabIndex={!disabled && itemIndex === focusIndex ? 0 : -1}\n        className=\"opal-segmented-item\"\n        data-pressed={pressed === item.value || undefined}\n        onPointerDown={event => {\n          if (event.button !== 0 || !event.isPrimary || drag.current || disabled) return\n          setRebounding(false)\n          event.currentTarget.setPointerCapture(event.pointerId)\n          drag.current = { pointerId: event.pointerId, startX: event.clientX, startIndex: itemIndex, position: itemIndex, stretch: 0, target: event.currentTarget }\n          setPressed(item.value)\n          select(item.value)\n        }}\n        onPointerMove={event => {\n          const active = drag.current\n          if (!active || active.pointerId !== event.pointerId || disabled) return\n          // Fractional segment positions follow the pointer without selecting\n          // intermediate values. The initial grab offset is preserved.\n          movePill(event.clientX)\n        }}\n        onPointerUp={event => {\n          // A fast release can arrive without a final pointermove.\n          finishDrag(event.pointerId, event.clientX)\n        }}\n        onPointerCancel={event => finishDrag(event.pointerId)}\n        onLostPointerCapture={event => finishDrag(event.pointerId)}\n        onDragStart={event => event.preventDefault()}\n        onClick={event => {\n          setPressed(undefined)\n          const pending = pointerClick.current\n          pointerClick.current = null\n          if (pending?.target === event.currentTarget && Date.now() < pending.until) return\n          // Pointer selection already happened on press. Keep keyboard and\n          // assistive-technology clicks working without a second callback.\n          if (event.detail === 0) select(item.value)\n        }}\n        onKeyDown={event => {\n          pointerClick.current = null\n          if (!['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return\n          event.preventDefault()\n          const group = event.currentTarget.parentElement!\n          const rtl = getComputedStyle(group).direction === 'rtl'\n          const enabled = items.map((entry, i) => entry.disabled ? -1 : i).filter(i => i >= 0)\n          const position = enabled.indexOf(itemIndex)\n          const backward = event.key === 'ArrowUp' || event.key === (rtl ? 'ArrowRight' : 'ArrowLeft')\n          const next = event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1)\n            : enabled[(position + (backward ? -1 : 1) + enabled.length) % enabled.length]\n          if (next === undefined) return\n          select(items[next]!.value)\n          group.querySelectorAll<HTMLButtonElement>('.opal-segmented-item')[next]?.focus()\n        }}>\n        <span className=\"opal-segmented-label\">{item.label}</span>\n      </button>)}\n    </div>\n  </>\n})\n"]}