@opalui/react 0.0.0-stage → 0.0.2

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAqD,MAAM,OAAO,CAAA;AACvI,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,YAAY,MAAM,qBAAqB,CAAA;AAC9C,OAAO,QAAQ,MAAM,gCAAgC,CAAA;AACrD,MAAM,GAAG,GAAG,GAAG,QAAQ,KAAK,YAAY,EAAE,CAAA;AAC1C,MAAM,SAAS,GAAG,cAAc,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAA;AAU/C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CAC7E,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAErH,MAAM,IAAI,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAC1C,MAAM,KAAK,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAC3C,MAAM,KAAK,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAC3C,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAA;IACtG,MAAM,KAAK,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE5C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,YAAY,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IACzE,MAAM,OAAO,GAAG,KAAK,IAAI,QAAQ,CAAA;IACjC,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAChG,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;QAC3B,IAAI,KAAK;YAAE,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;QAC3C,MAAM,IAAI,GAAG,KAAK,EAAE,IAAI,CAAA;QACxB,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,IAAI,KAAK;YAAE,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA,CAAC,CAAC,CAAC,CAAA;QACzF,IAAI,EAAE,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACtC,OAAO,GAAG,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAA;IACpB,MAAM,SAAS,GAAkB,IAAI,IAAI,iCAAiC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5I,OAAO,8BACL,gBAAO,IAAI,EAAE,SAAS,EAAE,UAAU,EAAC,QAAQ,YAAE,GAAG,GAAS,EACxD,KAAK,CAAC,MAAM,EACb,gBAAM,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC9E,KAAK,EAAE,EAAE,wBAAwB,EAAE,GAAG,QAAQ,GAAG,EAAE,wBAAwB,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,EAAmB,aAC/J,mBAAW,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EACjH,SAAS,EAAC,mBAAmB,EAC7B,QAAQ,EAAE,KAAK,CAAC,EAAE;4BAChB,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;4BAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;4BACjB,IAAI,CAAC,KAAK,CAAC,gBAAgB;gCAAE,aAAa,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;wBACjF,CAAC,GAAI,EACL,eAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,2BAA2B,EAAC,KAAK,EAAE,KAAK,CAAC,WAAW,iBAAc,MAAM,YAAC,eAAM,SAAS,EAAC,mBAAmB,GAAG,GAAO,EAClJ,eAAM,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,mBAAmB,iBAAa,MAAM,GAAG,IAChE,IACN,CAAA;AACL,CAAC,CAAC,CAAA","sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties } from 'react'\nimport { useGlassHeld, useGlassLens } from '../../internal/glass/lens.js'\nimport { materials } from '../../internal/glass/material.js'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './slider.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\nconst styleHref = stylesheetHref('slider', css)\nexport type SliderProps = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'children' | 'value' | 'defaultValue' | 'min' | 'max'> & {\n  value?: number\n  defaultValue?: number\n  min?: number\n  max?: number\n  tint?: `#${string}`\n  onValueChange?: (value: number) => void\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  { value, defaultValue, min = 0, max = 100, step = 1, tint, className, style, onChange, onValueChange, ...props }, ref,\n) {\n  const root = useRef<HTMLSpanElement>(null)\n  const thumb = useRef<HTMLSpanElement>(null)\n  const track = useRef<HTMLSpanElement>(null)\n  const held = useGlassHeld(root)\n  const glass = useGlassLens(thumb, materials.thumb, { source: track, active: held && !props.disabled })\n  const input = useRef<HTMLInputElement>(null)\n\n  useImperativeHandle(ref, () => input.current!, [])\n  const [internal, setInternal] = useState(defaultValue ?? (min + max) / 2)\n  const current = value ?? internal\n  const progress = max > min ? Math.max(0, Math.min(100, (current - min) / (max - min) * 100)) : 0\n  useEffect(() => {\n    const field = input.current\n    if (field) setInternal(field.valueAsNumber)\n    const form = field?.form\n    const reset = () => queueMicrotask(() => { if (field) setInternal(field.valueAsNumber) })\n    form?.addEventListener('reset', reset)\n    return () => form?.removeEventListener('reset', reset)\n  }, [min, max, step])\n  const tintStyle: CSSProperties = tint && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(tint) ? { '--opal-slider-tint': tint } as CSSProperties : {}\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    {glass.filter}\n    <span ref={root} className={['opal-slider', className].filter(Boolean).join(' ')}\n      style={{ '--opal-slider-progress': `${progress}%`, '--opal-slider-fraction': progress / 100, ...tintStyle, ...glass.surfaceStyle, ...style } as CSSProperties}>\n    <input {...props} ref={input} type=\"range\" min={min} max={max} step={step} value={value} defaultValue={defaultValue}\n      className=\"opal-slider-input\"\n      onChange={event => {\n        setInternal(event.currentTarget.valueAsNumber)\n        onChange?.(event)\n        if (!event.defaultPrevented) onValueChange?.(event.currentTarget.valueAsNumber)\n      }} />\n      <span ref={track} className=\"opal-slider-optical-track\" style={glass.sourceStyle} aria-hidden=\"true\"><span className=\"opal-slider-track\" /></span>\n      <span ref={thumb} className=\"opal-slider-thumb\" aria-hidden=\"true\" />\n    </span>\n  </>\n})\n"]}

package/dist/components/switch/switch.css

@@ -0,0 +1,130 @@
+/* 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-edge: 0 0 0 .5px rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .16)), -.65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48)), .65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}
+
+/* One light material for resting controls: clear white face, fine contour,
+   a bright inner lip and a broad, low-contrast shadow. */
+:where([data-theme="light"]) {
+  --opal-control-background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 32%, rgb(255 255 255 / 4%) 65%, rgb(255 255 255 / 28%) 100%), rgb(255 255 255 / 32%);
+  --opal-control-active-background: rgb(255 255 255 / 60%);
+  --opal-control-rim-opacity: 1;
+  --opal-button-background: var(--opal-control-background);
+  --opal-button-hover-background: var(--opal-control-active-background);
+  --opal-button-color: #171717;
+  --opal-input-background: var(--opal-control-background);
+  --opal-input-focus-background: var(--opal-control-active-background);
+  --opal-input-color: #171717;
+  --opal-segmented-background: var(--opal-control-background);
+  --opal-glass-shadow: 0 5px 12px -4px rgb(0 0 0 / 4%);
+  --opal-glass-highlight:
+    inset 0 0 0 1px rgb(255 255 255 / 78%),
+    inset 0 1px 0 rgb(255 255 255 / 100%),
+    inset 0 -1px 0 rgb(255 255 255 / 90%);
+}
+
+/* Resolve the contour on each surface, where its material settings live.
+   edge=.5 reproduces the established 8%/24% light contour exactly. */
+:where([data-theme="light"]) :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, var(--_opal-glass-edge), var(--opal-glass-highlight));
+}
+
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:12px; --opal-material-rim:0.22; --opal-material-edge:0.5; }
+:where(.opal-menu-panel) { --opal-material-frost:24px; --opal-material-rim:0.3; --opal-material-edge:0.5; }
+
+
+.opal-switch {
+  --opal-switch-track-color: var(--opal-switch-off-background, #73767c);
+  --opal-switch-offset: 0px;
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 64px;
+  height: 28px;
+  vertical-align: middle;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+}
+.opal-switch:has(.opal-switch-input:checked) {
+  --opal-switch-track-color: var(--opal-switch-on-background, #28cd50);
+  --opal-switch-offset: 22px;
+}
+.opal-switch-input {
+  position: absolute;
+  z-index: 3;
+  inset: -8px 0;
+  width: 100%;
+  height: 44px;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  touch-action: pan-y;
+}
+.opal-switch-track, .opal-switch-thumb { position:absolute; pointer-events:none; box-sizing:border-box; }
+.opal-switch-track {
+  inset: 0;
+  border-radius: 999px;
+  background: var(--opal-switch-track-color);
+  transition: background-color 320ms ease;
+}
+.opal-switch-thumb {
+  left: 3px;
+  top: 3px;
+  width: 36px;
+  height: 22px;
+  border-radius: 999px;
+  translate: var(--opal-switch-offset) 0;
+  background: #fff;
+  box-shadow: 0 2px 5px rgb(0 0 0 / 13%), inset 0 0 0 0.5px rgb(255 255 255 / 70%);
+  transition:
+    translate 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    background-color 300ms ease,
+    box-shadow 400ms ease;
+}
+.opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb {
+  transform: scale(calc(1.45 + var(--opal-switch-stretch, 0) * .12), calc(1.45 - var(--opal-switch-stretch, 0) * .08));
+  background: rgb(255 255 255 / 8%);
+  -webkit-backdrop-filter: blur(var(--opal-material-frost, .25px));
+  backdrop-filter: blur(var(--opal-material-frost, .25px));
+  box-shadow: 0 7px 16px rgb(0 0 0 / 18%), var(--_opal-glass-rim);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb {
+    transition:
+      translate 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
+      transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
+      background-color 140ms ease-out,
+      box-shadow 170ms ease-out;
+  }
+}
+/* Follow the pointer directly; restore the soft settling transition on release. */
+.opal-switch[data-dragging] .opal-switch-thumb { transition: background-color 140ms ease-out, box-shadow 170ms ease-out; }
+.opal-switch-input:focus-visible ~ .opal-switch-optical-track .opal-switch-track {
+  outline: 2px solid var(--opal-focus-color, #2885ff);
+  outline-offset: 5px;
+}
+.opal-switch:has(.opal-switch-input:disabled) { opacity: 0.4; }
+.opal-switch-input:disabled { cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .opal-switch *, .opal-switch *::before, .opal-switch *::after { transition: none; }
+  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { transform: none; }
+  .opal-switch:has(.opal-switch-input:active) .opal-switch-track { mask-image: none; -webkit-mask-image: none; }
+  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { background: #fff; }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
+  .opal-switch:has(.opal-switch-input:active) .opal-switch-track { mask-image: none; -webkit-mask-image: none; }
+}
+@media (forced-colors: active) {
+  .opal-switch { opacity: 1 !important; }
+  .opal-switch-track { background: Canvas; border: 1px solid ButtonText; mask-image: none !important; -webkit-mask-image: none !important; }
+  .opal-switch:has(.opal-switch-input:checked) .opal-switch-track { background: Highlight; }
+  .opal-switch .opal-switch-thumb { background: ButtonText !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; }
+  .opal-switch-input:disabled ~ .opal-switch-thumb { background: GrayText !important; }
+}
+
+.opal-switch-optical-track { position:absolute; inset:-24px; pointer-events:none; }
+.opal-switch-optical-track .opal-switch-track { left:24px; right:24px; width:calc(100% - 48px); top:24px; bottom:24px; }

package/dist/components/switch/switch.css.js

@@ -0,0 +1 @@
+export default ".opal-switch {\n  --opal-switch-track-color: var(--opal-switch-off-background, #73767c);\n  --opal-switch-offset: 0px;\n  position: relative;\n  display: inline-block;\n  flex: 0 0 auto;\n  width: 64px;\n  height: 28px;\n  vertical-align: middle;\n  overflow: visible;\n  -webkit-tap-highlight-color: transparent;\n}\n.opal-switch:has(.opal-switch-input:checked) {\n  --opal-switch-track-color: var(--opal-switch-on-background, #28cd50);\n  --opal-switch-offset: 22px;\n}\n.opal-switch-input {\n  position: absolute;\n  z-index: 3;\n  inset: -8px 0;\n  width: 100%;\n  height: 44px;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n  touch-action: pan-y;\n}\n.opal-switch-track, .opal-switch-thumb { position:absolute; pointer-events:none; box-sizing:border-box; }\n.opal-switch-track {\n  inset: 0;\n  border-radius: 999px;\n  background: var(--opal-switch-track-color);\n  transition: background-color 320ms ease;\n}\n.opal-switch-thumb {\n  left: 3px;\n  top: 3px;\n  width: 36px;\n  height: 22px;\n  border-radius: 999px;\n  translate: var(--opal-switch-offset) 0;\n  background: #fff;\n  box-shadow: 0 2px 5px rgb(0 0 0 / 13%), inset 0 0 0 0.5px rgb(255 255 255 / 70%);\n  transition:\n    translate 480ms cubic-bezier(0.22, 0.61, 0.36, 1),\n    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1),\n    background-color 300ms ease,\n    box-shadow 400ms ease;\n}\n.opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb {\n  transform: scale(calc(1.45 + var(--opal-switch-stretch, 0) * .12), calc(1.45 - var(--opal-switch-stretch, 0) * .08));\n  background: rgb(255 255 255 / 8%);\n  -webkit-backdrop-filter: blur(var(--opal-material-frost, .25px));\n  backdrop-filter: blur(var(--opal-material-frost, .25px));\n  box-shadow: 0 7px 16px rgb(0 0 0 / 18%), var(--_opal-glass-rim);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb {\n    transition:\n      translate 480ms cubic-bezier(0.22, 0.61, 0.36, 1),\n      transform 170ms cubic-bezier(0.16, 1, 0.3, 1),\n      background-color 140ms ease-out,\n      box-shadow 170ms ease-out;\n  }\n}\n/* Follow the pointer directly; restore the soft settling transition on release. */\n.opal-switch[data-dragging] .opal-switch-thumb { transition: background-color 140ms ease-out, box-shadow 170ms ease-out; }\n.opal-switch-input:focus-visible ~ .opal-switch-optical-track .opal-switch-track {\n  outline: 2px solid var(--opal-focus-color, #2885ff);\n  outline-offset: 5px;\n}\n.opal-switch:has(.opal-switch-input:disabled) { opacity: 0.4; }\n.opal-switch-input:disabled { cursor: not-allowed; }\n@media (prefers-reduced-motion: reduce) {\n  .opal-switch *, .opal-switch *::before, .opal-switch *::after { transition: none; }\n  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { transform: none; }\n  .opal-switch:has(.opal-switch-input:active) .opal-switch-track { mask-image: none; -webkit-mask-image: none; }\n  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { background: #fff; }\n}\n@media (prefers-reduced-transparency: reduce) {\n  .opal-switch-input:active:not(:disabled) ~ .opal-switch-thumb { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }\n  .opal-switch:has(.opal-switch-input:active) .opal-switch-track { mask-image: none; -webkit-mask-image: none; }\n}\n@media (forced-colors: active) {\n  .opal-switch { opacity: 1 !important; }\n  .opal-switch-track { background: Canvas; border: 1px solid ButtonText; mask-image: none !important; -webkit-mask-image: none !important; }\n  .opal-switch:has(.opal-switch-input:checked) .opal-switch-track { background: Highlight; }\n  .opal-switch .opal-switch-thumb { background: ButtonText !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none !important; }\n  .opal-switch-input:disabled ~ .opal-switch-thumb { background: GrayText !important; }\n}\n\n.opal-switch-optical-track { position:absolute; inset:-24px; pointer-events:none; }\n.opal-switch-optical-track .opal-switch-track { left:24px; right:24px; width:calc(100% - 48px); top:24px; bottom:24px; }\n";

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'role' | 'size' | 'children'> & {
+    /** Active track color as an opaque #RGB or #RRGGBB hex. Defaults to green. */
+    tint?: `#${string}`;
+    /** Called after the native change handler, unless it prevents default. */
+    onCheckedChange?: (checked: boolean) => void;
+};
+/** A native checkbox with switch semantics, automatic styles, and a glass thumb. */
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "type" | "role" | "children"> & {
+    /** Active track color as an opaque #RGB or #RRGGBB hex. Defaults to green. */
+    tint?: `#${string}`;
+    /** Called after the native change handler, unless it prevents default. */
+    onCheckedChange?: (checked: boolean) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/switch/switch.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { useGlassHeld, useGlassLens } from '../../internal/glass/lens.js';
+import { materials } from '../../internal/glass/material.js';
+import { stylesheetHref } from '../../internal/styles.js';
+import componentCss from './switch.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('switch', css);
+/** A native checkbox with switch semantics, automatic styles, and a glass thumb. */
+export const Switch = forwardRef(function Switch({ className, style, tint, onChange, onCheckedChange, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onClick, ...props }, ref) {
+    const root = useRef(null);
+    const thumb = useRef(null);
+    const track = useRef(null);
+    const held = useGlassHeld(root);
+    const glass = useGlassLens(thumb, materials.switch, { contract: true, source: track, active: held && !props.disabled });
+    const gesture = useRef(null);
+    const releaseValue = useRef(null);
+    const [drag, setDrag] = useState(null);
+    function resetDrag() { gesture.current = null; setDrag(null); }
+    const tintStyle = tint && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(tint)
+        ? { '--opal-switch-on-background': tint }
+        : {};
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), glass.filter, _jsxs("span", { ref: root, className: ['opal-switch', className].filter(Boolean).join(' '), "data-dragging": drag ? '' : undefined, style: { ...tintStyle, ...glass.surfaceStyle, ...style, ...(drag ? { '--opal-switch-offset': `${drag.offset}px`, '--opal-switch-stretch': drag.stretch } : {}) }, children: [_jsx("input", { ...props, ref: ref, type: "checkbox", role: "switch", className: "opal-switch-input", onPointerDown: event => {
+                            onPointerDown?.(event);
+                            releaseValue.current = null;
+                            if (event.defaultPrevented || props.disabled || event.button !== 0 || !event.isPrimary)
+                                return;
+                            gesture.current = { id: event.pointerId, x: event.clientX, offset: event.currentTarget.checked ? 22 : 0, moved: false };
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                        }, onPointerMove: event => {
+                            onPointerMove?.(event);
+                            const current = gesture.current;
+                            if (!current || current.id !== event.pointerId || event.defaultPrevented)
+                                return;
+                            const delta = event.clientX - current.x;
+                            if (!current.moved && Math.abs(delta) < 3)
+                                return;
+                            current.moved = true;
+                            const raw = current.offset + delta;
+                            const clamped = Math.max(0, Math.min(22, raw));
+                            const overshoot = 5 * Math.tanh((raw - clamped) / 30);
+                            setDrag({ offset: clamped + overshoot, stretch: Math.abs(overshoot) / 5 });
+                        }, onPointerUp: event => {
+                            onPointerUp?.(event);
+                            const current = gesture.current;
+                            if (!current || current.id !== event.pointerId)
+                                return;
+                            resetDrag();
+                            if (current.moved && !event.defaultPrevented) {
+                                releaseValue.current = current.offset + event.clientX - current.x >= 11;
+                            }
+                            // Keep capture through release: the browser delivers one native click
+                            // to this input, even when the pointer ends outside the switch.
+                        }, onPointerCancel: event => { onPointerCancel?.(event); releaseValue.current = null; resetDrag(); }, onLostPointerCapture: event => { onLostPointerCapture?.(event); resetDrag(); }, onClick: event => {
+                            const next = releaseValue.current;
+                            releaseValue.current = null;
+                            // Native checkbox activation toggles checked before click handlers run.
+                            // Cancel only when that toggle disagrees with the drag destination.
+                            if (next !== null && event.currentTarget.checked !== next) {
+                                event.preventDefault();
+                                return;
+                            }
+                            onClick?.(event);
+                        }, onChange: (event) => {
+                            if (event.defaultPrevented)
+                                return;
+                            onChange?.(event);
+                            if (!event.defaultPrevented)
+                                onCheckedChange?.(event.currentTarget.checked);
+                        } }), _jsx("span", { ref: track, className: "opal-switch-optical-track", style: glass.sourceStyle, "aria-hidden": "true", children: _jsx("span", { className: "opal-switch-track" }) }), _jsx("span", { ref: thumb, className: "opal-switch-thumb", "aria-hidden": "true" })] })] });
+});
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { forwardRef, useRef, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react'\nimport { useGlassHeld, useGlassLens } from '../../internal/glass/lens.js'\nimport { materials } from '../../internal/glass/material.js'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './switch.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\n\nconst styleHref = stylesheetHref('switch', css)\n\nexport type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'role' | 'size' | 'children'> & {\n  /** Active track color as an opaque #RGB or #RRGGBB hex. Defaults to green. */\n  tint?: `#${string}`\n  /** Called after the native change handler, unless it prevents default. */\n  onCheckedChange?: (checked: boolean) => void\n}\n\n/** A native checkbox with switch semantics, automatic styles, and a glass thumb. */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  { className, style, tint, onChange, onCheckedChange, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onClick, ...props }, ref,\n) {\n  const root = useRef<HTMLSpanElement>(null)\n  const thumb = useRef<HTMLSpanElement>(null)\n  const track = useRef<HTMLSpanElement>(null)\n  const held = useGlassHeld(root)\n  const glass = useGlassLens(thumb, materials.switch, { contract: true, source: track, active: held && !props.disabled })\n  const gesture = useRef<{ id: number; x: number; offset: number; moved: boolean } | null>(null)\n  const releaseValue = useRef<boolean | null>(null)\n  const [drag, setDrag] = useState<{ offset: number; stretch: number } | null>(null)\n  function resetDrag() { gesture.current = null; setDrag(null) }\n  const tintStyle = tint && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(tint)\n    ? { '--opal-switch-on-background': tint }\n    : {}\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    {glass.filter}\n    <span ref={root} className={['opal-switch', className].filter(Boolean).join(' ')} data-dragging={drag ? '' : undefined}\n      style={{ ...tintStyle, ...glass.surfaceStyle, ...style, ...(drag ? { '--opal-switch-offset': `${drag.offset}px`, '--opal-switch-stretch': drag.stretch } : {}) } as CSSProperties}>\n      <input {...props} ref={ref} type=\"checkbox\" role=\"switch\" className=\"opal-switch-input\"\n        onPointerDown={event => {\n          onPointerDown?.(event)\n          releaseValue.current = null\n          if (event.defaultPrevented || props.disabled || event.button !== 0 || !event.isPrimary) return\n          gesture.current = { id: event.pointerId, x: event.clientX, offset: event.currentTarget.checked ? 22 : 0, moved: false }\n          event.currentTarget.setPointerCapture(event.pointerId)\n        }}\n        onPointerMove={event => {\n          onPointerMove?.(event)\n          const current = gesture.current\n          if (!current || current.id !== event.pointerId || event.defaultPrevented) return\n          const delta = event.clientX - current.x\n          if (!current.moved && Math.abs(delta) < 3) return\n          current.moved = true\n          const raw = current.offset + delta\n          const clamped = Math.max(0, Math.min(22, raw))\n          const overshoot = 5 * Math.tanh((raw - clamped) / 30)\n          setDrag({ offset: clamped + overshoot, stretch: Math.abs(overshoot) / 5 })\n        }}\n        onPointerUp={event => {\n          onPointerUp?.(event)\n          const current = gesture.current\n          if (!current || current.id !== event.pointerId) return\n          resetDrag()\n          if (current.moved && !event.defaultPrevented) {\n            releaseValue.current = current.offset + event.clientX - current.x >= 11\n          }\n          // Keep capture through release: the browser delivers one native click\n          // to this input, even when the pointer ends outside the switch.\n        }}\n        onPointerCancel={event => { onPointerCancel?.(event); releaseValue.current = null; resetDrag() }}\n        onLostPointerCapture={event => { onLostPointerCapture?.(event); resetDrag() }}\n        onClick={event => {\n          const next = releaseValue.current\n          releaseValue.current = null\n          // Native checkbox activation toggles checked before click handlers run.\n          // Cancel only when that toggle disagrees with the drag destination.\n          if (next !== null && event.currentTarget.checked !== next) { event.preventDefault(); return }\n          onClick?.(event)\n        }}\n        onChange={(event) => {\n          if (event.defaultPrevented) return\n          onChange?.(event)\n          if (!event.defaultPrevented) onCheckedChange?.(event.currentTarget.checked)\n        }} />\n      <span ref={track} className=\"opal-switch-optical-track\" style={glass.sourceStyle} aria-hidden=\"true\"><span className=\"opal-switch-track\" /></span>\n      <span ref={thumb} className=\"opal-switch-thumb\" aria-hidden=\"true\" />\n    </span>\n  </>\n})\n"]}

package/dist/components/textarea/textarea.css

@@ -0,0 +1,56 @@
+/* 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-edge: 0 0 0 .5px rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .16)), -.65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48)), .65px 0 0 rgb(40 35 30 / calc(var(--opal-material-edge, .5) * .48));
+  --_opal-glass-shadow: var(--opal-glass-shadow, 0 3px 8px rgb(15 34 47 / 12%));
+}
+
+/* One light material for resting controls: clear white face, fine contour,
+   a bright inner lip and a broad, low-contrast shadow. */
+:where([data-theme="light"]) {
+  --opal-control-background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 8%) 32%, rgb(255 255 255 / 4%) 65%, rgb(255 255 255 / 28%) 100%), rgb(255 255 255 / 32%);
+  --opal-control-active-background: rgb(255 255 255 / 60%);
+  --opal-control-rim-opacity: 1;
+  --opal-button-background: var(--opal-control-background);
+  --opal-button-hover-background: var(--opal-control-active-background);
+  --opal-button-color: #171717;
+  --opal-input-background: var(--opal-control-background);
+  --opal-input-focus-background: var(--opal-control-active-background);
+  --opal-input-color: #171717;
+  --opal-segmented-background: var(--opal-control-background);
+  --opal-glass-shadow: 0 5px 12px -4px rgb(0 0 0 / 4%);
+  --opal-glass-highlight:
+    inset 0 0 0 1px rgb(255 255 255 / 78%),
+    inset 0 1px 0 rgb(255 255 255 / 100%),
+    inset 0 -1px 0 rgb(255 255 255 / 90%);
+}
+
+/* Resolve the contour on each surface, where its material settings live.
+   edge=.5 reproduces the established 8%/24% light contour exactly. */
+:where([data-theme="light"]) :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, var(--_opal-glass-edge), var(--opal-glass-highlight));
+}
+
+:where(.opal-input,.opal-textarea,.opal-select) { --opal-material-frost:12px; --opal-material-rim:0.22; --opal-material-edge:0.5; }
+:where(.opal-menu-panel) { --opal-material-frost:24px; --opal-material-rim:0.3; --opal-material-edge:0.5; }
+
+
+.opal-textarea {
+  position: relative; display: inline-flex; box-sizing: border-box;
+  width: 360px; max-width: 100%; padding: 6px; border-radius: 20px;
+  background: var(--opal-input-background, rgb(255 255 255 / 65%)); color: var(--opal-input-color, #171e22);
+  box-shadow: var(--opal-input-shadow, var(--_opal-glass-shadow));
+  backdrop-filter: blur(var(--opal-material-frost,12px)); -webkit-backdrop-filter: blur(var(--opal-material-frost,12px));
+  transition: background-color 180ms ease;
+}
+.opal-textarea::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--opal-input-rim, var(--_opal-glass-rim)); opacity: var(--opal-control-rim-opacity, .7); }
+.opal-textarea:focus-within { background: var(--opal-input-focus-background, rgb(255 255 255 / 90%)); }
+/* Inset the native resize grip from the outer rounded glass corner. */
+.opal-textarea-field { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 88px; resize: vertical; padding: 8px 10px; border: 0; border-radius: 14px; outline: none; background: transparent; color: inherit; font: inherit; line-height: 1.5; }
+.opal-textarea-field::placeholder { color: inherit; opacity: .5; }
+.opal-textarea:has([aria-invalid="true"]) { outline: 2px solid #e5484d; outline-offset: 2px; }
+.opal-textarea[data-disabled] { opacity: .4; }
+.opal-textarea-field:disabled { cursor: not-allowed; resize: none; }
+@media (prefers-reduced-motion: reduce) { .opal-textarea { transition: none; } }
+@media (prefers-reduced-transparency: reduce) { .opal-textarea { background: var(--opal-input-solid, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; } }
+@media (forced-colors: active) { .opal-textarea { border: 1px solid ButtonText; } .opal-textarea:focus-within { outline: 2px solid Highlight; } }

package/dist/components/textarea/textarea.css.js

@@ -0,0 +1 @@
+export default ".opal-textarea {\n  position: relative; display: inline-flex; box-sizing: border-box;\n  width: 360px; max-width: 100%; padding: 6px; border-radius: 20px;\n  background: var(--opal-input-background, rgb(255 255 255 / 65%)); color: var(--opal-input-color, #171e22);\n  box-shadow: var(--opal-input-shadow, var(--_opal-glass-shadow));\n  backdrop-filter: blur(var(--opal-material-frost,12px)); -webkit-backdrop-filter: blur(var(--opal-material-frost,12px));\n  transition: background-color 180ms ease;\n}\n.opal-textarea::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--opal-input-rim, var(--_opal-glass-rim)); opacity: var(--opal-control-rim-opacity, .7); }\n.opal-textarea:focus-within { background: var(--opal-input-focus-background, rgb(255 255 255 / 90%)); }\n/* Inset the native resize grip from the outer rounded glass corner. */\n.opal-textarea-field { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 88px; resize: vertical; padding: 8px 10px; border: 0; border-radius: 14px; outline: none; background: transparent; color: inherit; font: inherit; line-height: 1.5; }\n.opal-textarea-field::placeholder { color: inherit; opacity: .5; }\n.opal-textarea:has([aria-invalid=\"true\"]) { outline: 2px solid #e5484d; outline-offset: 2px; }\n.opal-textarea[data-disabled] { opacity: .4; }\n.opal-textarea-field:disabled { cursor: not-allowed; resize: none; }\n@media (prefers-reduced-motion: reduce) { .opal-textarea { transition: none; } }\n@media (prefers-reduced-transparency: reduce) { .opal-textarea { background: var(--opal-input-solid, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; } }\n@media (forced-colors: active) { .opal-textarea { border: 1px solid ButtonText; } .opal-textarea:focus-within { outline: 2px solid Highlight; } }\n";

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,8 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
+    onValueChange?: (value: string) => void;
+};
+/** Native multiline input, using the same material as Input. */
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/textarea.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { stylesheetHref } from '../../internal/styles.js';
+import componentCss from './textarea.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('textarea', css);
+/** Native multiline input, using the same material as Input. */
+export const Textarea = forwardRef(function Textarea({ className, style, onChange, onValueChange, rows = 5, disabled, ...props }, ref) {
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), _jsx("span", { className: ['opal-textarea', className].filter(Boolean).join(' '), style: style, "data-disabled": disabled || undefined, children: _jsx("textarea", { ...props, ref: ref, rows: rows, disabled: disabled, className: "opal-textarea-field", onChange: event => {
+                        onChange?.(event);
+                        if (!event.defaultPrevented)
+                            onValueChange?.(event.currentTarget.value);
+                    } }) })] });
+});
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAiC,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,YAAY,MAAM,uBAAuB,CAAA;AAChD,OAAO,QAAQ,MAAM,gCAAgC,CAAA;AACrD,MAAM,GAAG,GAAG,GAAG,QAAQ,KAAK,YAAY,EAAE,CAAA;AAC1C,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;AAGjD,gEAAgE;AAChE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAEhF,OAAO,8BACL,gBAAO,IAAI,EAAE,SAAS,EAAE,UAAU,EAAC,QAAQ,YAAE,GAAG,GAAS,EACzD,eAAM,SAAS,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,mBAAiB,QAAQ,IAAI,SAAS,YACzH,sBAAc,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAC,qBAAqB,EAAC,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAC/G,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAA;wBACjB,IAAI,CAAC,KAAK,CAAC,gBAAgB;4BAAE,aAAa,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBACzE,CAAC,GAAI,GACA,IACN,CAAA;AACL,CAAC,CAAC,CAAA","sourcesContent":["'use client'\n\nimport { forwardRef, type ComponentPropsWithoutRef } from 'react'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './textarea.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\nconst styleHref = stylesheetHref('textarea', css)\nexport type TextareaProps = ComponentPropsWithoutRef<'textarea'> & { onValueChange?: (value: string) => void }\n\n/** Native multiline input, using the same material as Input. */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, style, onChange, onValueChange, rows = 5, disabled, ...props }, ref,\n) {\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    <span className={['opal-textarea', className].filter(Boolean).join(' ')} style={style} data-disabled={disabled || undefined}>\n      <textarea {...props} ref={ref} rows={rows} disabled={disabled} className=\"opal-textarea-field\" onChange={event => {\n        onChange?.(event)\n        if (!event.defaultPrevented) onValueChange?.(event.currentTarget.value)\n      }} />\n    </span>\n  </>\n})\n"]}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Button, type ButtonProps } from './components/button/button.js';
+export { Switch, type SwitchProps } from './components/switch/switch.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './components/segmented-control/segmented-control.js';
+export { Menu, type MenuProps, type MenuItem } from './components/menu/menu.js';
+export { Input, type InputProps } from './components/input/input.js';
+export { Slider, type SliderProps } from './components/slider/slider.js';
+export { Textarea, type TextareaProps } from './components/textarea/textarea.js';
+export { Select, type SelectProps, type SelectItem } from './components/select/select.js';
+export { Glass, type GlassProps } from './components/glass/glass.js';

package/dist/index.js

@@ -0,0 +1,10 @@
+export { Button } from './components/button/button.js';
+export { Switch } from './components/switch/switch.js';
+export { SegmentedControl } from './components/segmented-control/segmented-control.js';
+export { Menu } from './components/menu/menu.js';
+export { Input } from './components/input/input.js';
+export { Slider } from './components/slider/slider.js';
+export { Textarea } from './components/textarea/textarea.js';
+export { Select } from './components/select/select.js';
+export { Glass } from './components/glass/glass.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,+BAA+B,CAAA;AACxE,OAAO,EAAE,MAAM,EAAoB,MAAM,+BAA+B,CAAA;AACxE,OAAO,EAAE,gBAAgB,EAAyD,MAAM,qDAAqD,CAAA;AAC7I,OAAO,EAAE,IAAI,EAAiC,MAAM,2BAA2B,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAmB,MAAM,6BAA6B,CAAA;AACpE,OAAO,EAAE,MAAM,EAAoB,MAAM,+BAA+B,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAsB,MAAM,mCAAmC,CAAA;AAChF,OAAO,EAAE,MAAM,EAAqC,MAAM,+BAA+B,CAAA;AACzF,OAAO,EAAE,KAAK,EAAmB,MAAM,6BAA6B,CAAA","sourcesContent":["export { Button, type ButtonProps } from './components/button/button.js'\nexport { Switch, type SwitchProps } from './components/switch/switch.js'\nexport { SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './components/segmented-control/segmented-control.js'\nexport { Menu, type MenuProps, type MenuItem } from './components/menu/menu.js'\nexport { Input, type InputProps } from './components/input/input.js'\nexport { Slider, type SliderProps } from './components/slider/slider.js'\nexport { Textarea, type TextareaProps } from './components/textarea/textarea.js'\nexport { Select, type SelectProps, type SelectItem } from './components/select/select.js'\nexport { Glass, type GlassProps } from './components/glass/glass.js'\n"]}

package/dist/internal/glass/lens.d.ts

@@ -0,0 +1,44 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type GlassSettings } from './material.js';
+type Box = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    radius: number;
+    map: string;
+    mask: string;
+};
+type Frame = Box & {
+    amount: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    light: boolean;
+};
+/** A single filter graph serves live backgrounds and content owned by a control.
+ * Content is composited back outside the lens, so neighbors stay untouched. */
+export declare function LensFilter({ id, frame: f, material: m, ink, contract }: {
+    id: string;
+    frame: Frame;
+    material: GlassSettings;
+    ink?: boolean;
+    contract?: boolean;
+}): import("react").JSX.Element;
+/** Lifecycle, measurements, preferences and progressive enhancement live here.
+ * Owned content uses ordinary SVG filters; arbitrary backdrops use Chromium's
+ * reference-filter support. No DOM or canvas work happens during SSR. */
+export declare function useGlassLens(surface: RefObject<HTMLElement | null>, material: GlassSettings, options?: {
+    source?: RefObject<HTMLElement | null>;
+    active?: boolean;
+    ink?: boolean;
+    contract?: boolean;
+    enabled?: boolean;
+}): {
+    filter: import("react").JSX.Element | null;
+    sourceStyle: CSSProperties | undefined;
+    surfaceStyle: CSSProperties;
+    lensing: boolean;
+};
+/** Observe native presses without replacing the control's input handlers. */
+export declare function useGlassHeld(root: RefObject<HTMLElement | null>): boolean;
+export {};

package/dist/internal/glass/lens.js

@@ -0,0 +1,116 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { glassLensMap } from './map.js';
+import { resolveMaterial } from './material.js';
+import { supportsOwnedGlassLens } from './support.js';
+/** A single filter graph serves live backgrounds and content owned by a control.
+ * Content is composited back outside the lens, so neighbors stay untouched. */
+export function LensFilter({ id, frame: f, material: m, ink = false, contract = false }) {
+    // Reversing the sampling direction compresses owned content inside the lens.
+    const strength = Math.min(f.width, f.height) * m.bend * f.amount * (contract ? -1 : 1);
+    const invert = ink && f.light;
+    return _jsx("svg", { width: "0", height: "0", style: { position: 'absolute', pointerEvents: 'none' }, "aria-hidden": "true", focusable: "false", children: _jsx("defs", { children: _jsxs("filter", { id: id, filterUnits: "userSpaceOnUse", primitiveUnits: "userSpaceOnUse", x: -f.sourceWidth * .5, y: -f.sourceHeight * .5, width: f.sourceWidth * 2, height: f.sourceHeight * 2, colorInterpolationFilters: "sRGB", children: [_jsx("feColorMatrix", { in: "SourceGraphic", type: "matrix", values: invert ? '-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0' : '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0', result: "ink" }), _jsx("feGaussianBlur", { in: "ink", stdDeviation: m.frost * f.amount, result: "soft" }), _jsx("feImage", { href: f.map, x: f.x, y: f.y, width: f.width, height: f.height, preserveAspectRatio: "none", result: "map" }), _jsx("feImage", { href: f.mask, x: f.x, y: f.y, width: f.width, height: f.height, preserveAspectRatio: "none", result: "shape" }), _jsx("feDisplacementMap", { in: "soft", in2: "map", scale: strength * (1 - m.dispersion), xChannelSelector: "R", yChannelSelector: "G", result: "rays-r" }), _jsx("feDisplacementMap", { in: "soft", in2: "map", scale: strength, xChannelSelector: "R", yChannelSelector: "G", result: "rays-g" }), _jsx("feDisplacementMap", { in: "soft", in2: "map", scale: strength * (1 + m.dispersion), xChannelSelector: "R", yChannelSelector: "G", result: "rays-b" }), _jsx("feColorMatrix", { in: "rays-r", values: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "r" }), _jsx("feColorMatrix", { in: "rays-g", values: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0", result: "g" }), _jsx("feColorMatrix", { in: "rays-b", values: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0", result: "b" }), _jsx("feBlend", { in: "r", in2: "g", mode: "screen", result: "rg" }), _jsx("feBlend", { in: "rg", in2: "b", mode: "screen", result: "rgb" }), _jsx("feColorMatrix", { in: "rgb", values: invert ? '-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0' : '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0', result: "colored" }), _jsx("feComposite", { in: "colored", in2: "shape", operator: "in", result: "inside" }), _jsx("feComposite", { in: "SourceGraphic", in2: "shape", operator: "out", result: "outside" }), _jsx("feComposite", { in: "inside", in2: "outside", operator: "arithmetic", k2: "1", k3: "1" })] }) }) });
+}
+/** Lifecycle, measurements, preferences and progressive enhancement live here.
+ * Owned content uses ordinary SVG filters; arbitrary backdrops use Chromium's
+ * reference-filter support. No DOM or canvas work happens during SSR. */
+export function useGlassLens(surface, material, options = {}) {
+    const { source, active = true, ink = false, contract = false, enabled = true } = options;
+    const id = `opal-glass-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
+    const [frame, setFrame] = useState();
+    const amount = useRef(0);
+    const m = resolveMaterial(material);
+    useEffect(() => {
+        const glass = surface.current;
+        if (!glass || !enabled) {
+            setFrame(undefined);
+            return;
+        }
+        if (source && !supportsOwnedGlassLens(navigator.userAgent)) {
+            amount.current = 0;
+            setFrame(undefined);
+            return;
+        }
+        if (!source && (!/(?:Chrome|Chromium|Edg)\//.test(navigator.userAgent) || !CSS.supports('backdrop-filter', 'url("#lens")')))
+            return;
+        const transparency = matchMedia('(prefers-reduced-transparency: reduce)');
+        const motion = matchMedia('(prefers-reduced-motion: reduce)');
+        const contrast = matchMedia('(forced-colors: active)');
+        let raf = 0, previous = 0, stopped = false;
+        const measure = (now) => {
+            if (stopped)
+                return;
+            const dt = previous ? Math.min(64, now - previous) : 16;
+            previous = now;
+            const target = active && !transparency.matches && !contrast.matches ? 1 : 0;
+            amount.current = motion.matches || !source ? target : amount.current + (target - amount.current) * (1 - Math.exp(-dt / 65));
+            if (Math.abs(amount.current - target) < .002)
+                amount.current = target;
+            if (!amount.current)
+                setFrame(undefined);
+            else {
+                const rect = glass.getBoundingClientRect();
+                const content = source?.current;
+                const parent = content?.getBoundingClientRect();
+                const width = content ? rect.width : glass.offsetWidth;
+                const height = content ? rect.height : glass.offsetHeight;
+                const scale = glass.offsetWidth ? width / glass.offsetWidth : 1;
+                const radius = Math.min(width / 2, height / 2, (parseFloat(getComputedStyle(glass).borderTopLeftRadius) || 0) * scale);
+                try {
+                    const map = width && height ? glassLensMap(Math.round(width), Math.round(height), Math.round(radius)) : undefined;
+                    if (map) {
+                        const mask = `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" rx="${radius}" fill="white"/></svg>`)}`;
+                        const next = { x: parent ? rect.left - parent.left : 0, y: parent ? rect.top - parent.top : 0, width, height, radius, map, mask, amount: amount.current, sourceWidth: content?.offsetWidth ?? width, sourceHeight: content?.offsetHeight ?? height, light: glass.closest('[data-theme]')?.getAttribute('data-theme') !== 'dark' && getComputedStyle(glass).colorScheme !== 'dark' };
+                        setFrame(old => old && old.x === next.x && old.y === next.y && old.width === next.width && old.height === next.height && old.amount === next.amount && old.light === next.light && old.sourceWidth === next.sourceWidth && old.sourceHeight === next.sourceHeight ? old : next);
+                    }
+                }
+                catch {
+                    setFrame(undefined);
+                }
+            }
+            if (source && ((active && !transparency.matches && !contrast.matches) || amount.current > 0))
+                raf = requestAnimationFrame(measure);
+        };
+        const refresh = () => { cancelAnimationFrame(raf); previous = 0; raf = requestAnimationFrame(measure); };
+        const resize = new ResizeObserver(refresh);
+        resize.observe(glass);
+        if (source?.current)
+            resize.observe(source.current);
+        const theme = new MutationObserver(refresh);
+        theme.observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ['data-theme'] });
+        transparency.addEventListener('change', refresh);
+        motion.addEventListener('change', refresh);
+        contrast.addEventListener('change', refresh);
+        refresh();
+        return () => { stopped = true; cancelAnimationFrame(raf); resize.disconnect(); theme.disconnect(); transparency.removeEventListener('change', refresh); motion.removeEventListener('change', refresh); contrast.removeEventListener('change', refresh); };
+    }, [surface, source, active, enabled, m.bend, m.dispersion, m.frost, m.rim]);
+    const filterId = source && frame ? `${id}-${Math.round(frame.x * 10)}-${Math.round(frame.y * 10)}-${Math.round(frame.width * 10)}-${Math.round(frame.amount * 100)}` : id;
+    return {
+        filter: frame ? _jsx(LensFilter, { id: filterId, frame: frame, material: m, ink: ink, contract: contract }) : null,
+        sourceStyle: frame && source ? { filter: `url("#${filterId}")` } : undefined,
+        surfaceStyle: { '--opal-material-frost': `${m.frost}px`, '--opal-material-rim': m.rim, '--opal-material-edge': m.edge, ...(frame && !source ? { '--opal-material-filter': `url("#${id}")` } : {}) },
+        lensing: !!frame,
+    };
+}
+/** Observe native presses without replacing the control's input handlers. */
+export function useGlassHeld(root) {
+    const [held, setHeld] = useState(false);
+    useEffect(() => {
+        const element = root.current;
+        if (!element)
+            return;
+        const down = (event) => {
+            if (event.isPrimary && event.button === 0 && !event.target.disabled)
+                setHeld(true);
+        };
+        const up = () => setHeld(false);
+        element.addEventListener('pointerdown', down);
+        window.addEventListener('pointerup', up);
+        window.addEventListener('pointercancel', up);
+        window.addEventListener('blur', up);
+        return () => { element.removeEventListener('pointerdown', down); window.removeEventListener('pointerup', up); window.removeEventListener('pointercancel', up); window.removeEventListener('blur', up); };
+    }, [root]);
+    return held;
+}
+//# sourceMappingURL=lens.js.map