@opalui/react 0.0.0-stage → 0.0.2

package/dist/components/button/button.css

@@ -0,0 +1,186 @@
+/* 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; }
+
+
+/* The complete CSS material is server-rendered; lensing is optional. */
+.opal-button-filter { position: absolute; pointer-events: none; }
+.opal-button {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  min-height: 2.875rem;
+  padding: 0.75rem 1.125rem;
+  border: 0;
+  border-radius: var(--opal-button-radius, 999px);
+  background: transparent;
+  color: var(--opal-button-text-color, var(--opal-button-tint, var(--opal-button-color, #171e22)));
+  box-shadow: var(--opal-button-shadow, 0 2px 6px rgb(15 34 47 / 10%));
+  font: inherit;
+  font-weight: 400;
+  line-height: 1.25;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transform: scale(1);
+  transition:
+    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
+    box-shadow 450ms ease;
+}
+
+.opal-button[data-icon="leading"] { padding-inline-start: 0.875rem; }
+.opal-button[data-icon="only"] {
+  width: 2.875rem;
+  height: 2.875rem;
+  padding: 0;
+  flex-shrink: 0;
+}
+.opal-button-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 1.25em;
+  height: 1.25em;
+  line-height: 1;
+  pointer-events: none;
+}
+.opal-button-icon > svg,
+.opal-button-icon > img { display: block; width: 100%; height: 100%; }
+
+.opal-button::before,
+.opal-button::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.opal-button::before {
+  z-index: -1;
+  background: var(--opal-button-background, rgb(236 247 255 / 46%));
+  -webkit-backdrop-filter: blur(12px) saturate(115%);
+  backdrop-filter: var(--opal-material-filter, blur(var(--opal-material-frost, 12px))) saturate(115%);
+  transition: background-color 240ms ease;
+}
+
+.opal-button::after {
+  /* Diffuse light only along the edge; leave the center uniformly tinted. */
+  box-shadow: var(--opal-button-rim,
+    inset 0 0 0.6px 0.5px rgb(255 255 255 / 12%),
+    inset 0 0.75px 1.3px rgb(255 255 255 / 24%),
+    inset 0 -0.75px 1.3px rgb(255 255 255 / 14%));
+  opacity: 0.7;
+  transition: opacity 450ms ease;
+}
+
+.opal-button:active:not(:disabled)::after { opacity: 1; }
+
+/* A crisp upper-left reflection gives glass a curved edge without adding
+   another gradient across the face. Theme-specific rims can override it. */
+.opal-button[data-variant="glass"]::after {
+  opacity: var(--opal-control-rim-opacity, .7);
+  box-shadow: var(--opal-button-rim, var(--_opal-glass-rim));
+}
+.opal-button[data-variant="glass"]:not(:active) {
+  box-shadow: var(--opal-button-shadow, var(--_opal-glass-shadow));
+}
+
+@media (hover: hover) {
+  .opal-button:not([data-variant="filled"]):hover:not(:disabled)::before {
+    background-color: var(--opal-button-hover-background, rgb(236 247 255 / 56%));
+  }
+}
+
+.opal-button:active:not(:disabled) {
+  transform: scale(var(--opal-button-press-scale, 1.045));
+  transition-duration: 360ms, 450ms;
+  box-shadow: var(--opal-button-pressed-shadow, 0 4px 10px rgb(15 34 47 / 14%));
+}
+
+/* Filled is opaque in every state and does not sample the backdrop. */
+.opal-button[data-variant="filled"] {
+  /* Glass theme colors must not override contrast selected for a solid fill. */
+  color: var(--opal-button-text-color, var(--opal-button-filled-foreground, #fff));
+}
+.opal-button[data-variant="filled"]::before {
+  background: var(--opal-button-tint, var(--opal-button-filled-background, #007aff));
+  box-shadow:
+    inset 0 1px 2px rgb(255 255 255 / 24%),
+    inset 0 -1px 2px rgb(255 255 255 / 10%);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  transition: filter 240ms ease;
+}
+@media (hover: hover) {
+  .opal-button[data-variant="filled"]:hover:not(:disabled)::before { filter: brightness(1.08); }
+}
+
+.opal-button:focus-visible {
+  outline: 2px solid var(--opal-focus-color, currentColor);
+  outline-offset: 4px;
+}
+
+.opal-button:disabled { opacity: 0.4; cursor: not-allowed; }
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .opal-button:not([data-variant="filled"])::before, .opal-button:not([data-variant="filled"]):hover:not(:disabled)::before {
+    background-color: var(--opal-button-fallback-background, #ededed);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .opal-button, .opal-button::before, .opal-button::after { transition: none; }
+  .opal-button:active:not(:disabled) { transform: none; }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .opal-button:not([data-variant="filled"])::before, .opal-button:not([data-variant="filled"]):hover:not(:disabled)::before {
+    background: var(--opal-button-fallback-background, #ededed);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .opal-button[data-variant] { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
+  .opal-button::before, .opal-button::after { display: none; }
+  .opal-button:disabled { color: GrayText; border-color: GrayText; opacity: 1; }
+}

package/dist/components/button/button.css.js

@@ -0,0 +1 @@
+export default "/* The complete CSS material is server-rendered; lensing is optional. */\n.opal-button-filter { position: absolute; pointer-events: none; }\n.opal-button {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  min-height: 2.875rem;\n  padding: 0.75rem 1.125rem;\n  border: 0;\n  border-radius: var(--opal-button-radius, 999px);\n  background: transparent;\n  color: var(--opal-button-text-color, var(--opal-button-tint, var(--opal-button-color, #171e22)));\n  box-shadow: var(--opal-button-shadow, 0 2px 6px rgb(15 34 47 / 10%));\n  font: inherit;\n  font-weight: 400;\n  line-height: 1.25;\n  cursor: pointer;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  transform: scale(1);\n  transition:\n    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1),\n    box-shadow 450ms ease;\n}\n\n.opal-button[data-icon=\"leading\"] { padding-inline-start: 0.875rem; }\n.opal-button[data-icon=\"only\"] {\n  width: 2.875rem;\n  height: 2.875rem;\n  padding: 0;\n  flex-shrink: 0;\n}\n.opal-button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  width: 1.25em;\n  height: 1.25em;\n  line-height: 1;\n  pointer-events: none;\n}\n.opal-button-icon > svg,\n.opal-button-icon > img { display: block; width: 100%; height: 100%; }\n\n.opal-button::before,\n.opal-button::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.opal-button::before {\n  z-index: -1;\n  background: var(--opal-button-background, rgb(236 247 255 / 46%));\n  -webkit-backdrop-filter: blur(12px) saturate(115%);\n  backdrop-filter: var(--opal-material-filter, blur(var(--opal-material-frost, 12px))) saturate(115%);\n  transition: background-color 240ms ease;\n}\n\n.opal-button::after {\n  /* Diffuse light only along the edge; leave the center uniformly tinted. */\n  box-shadow: var(--opal-button-rim,\n    inset 0 0 0.6px 0.5px rgb(255 255 255 / 12%),\n    inset 0 0.75px 1.3px rgb(255 255 255 / 24%),\n    inset 0 -0.75px 1.3px rgb(255 255 255 / 14%));\n  opacity: 0.7;\n  transition: opacity 450ms ease;\n}\n\n.opal-button:active:not(:disabled)::after { opacity: 1; }\n\n/* A crisp upper-left reflection gives glass a curved edge without adding\n   another gradient across the face. Theme-specific rims can override it. */\n.opal-button[data-variant=\"glass\"]::after {\n  opacity: var(--opal-control-rim-opacity, .7);\n  box-shadow: var(--opal-button-rim, var(--_opal-glass-rim));\n}\n.opal-button[data-variant=\"glass\"]:not(:active) {\n  box-shadow: var(--opal-button-shadow, var(--_opal-glass-shadow));\n}\n\n@media (hover: hover) {\n  .opal-button:not([data-variant=\"filled\"]):hover:not(:disabled)::before {\n    background-color: var(--opal-button-hover-background, rgb(236 247 255 / 56%));\n  }\n}\n\n.opal-button:active:not(:disabled) {\n  transform: scale(var(--opal-button-press-scale, 1.045));\n  transition-duration: 360ms, 450ms;\n  box-shadow: var(--opal-button-pressed-shadow, 0 4px 10px rgb(15 34 47 / 14%));\n}\n\n/* Filled is opaque in every state and does not sample the backdrop. */\n.opal-button[data-variant=\"filled\"] {\n  /* Glass theme colors must not override contrast selected for a solid fill. */\n  color: var(--opal-button-text-color, var(--opal-button-filled-foreground, #fff));\n}\n.opal-button[data-variant=\"filled\"]::before {\n  background: var(--opal-button-tint, var(--opal-button-filled-background, #007aff));\n  box-shadow:\n    inset 0 1px 2px rgb(255 255 255 / 24%),\n    inset 0 -1px 2px rgb(255 255 255 / 10%);\n  -webkit-backdrop-filter: none;\n  backdrop-filter: none;\n  transition: filter 240ms ease;\n}\n@media (hover: hover) {\n  .opal-button[data-variant=\"filled\"]:hover:not(:disabled)::before { filter: brightness(1.08); }\n}\n\n.opal-button:focus-visible {\n  outline: 2px solid var(--opal-focus-color, currentColor);\n  outline-offset: 4px;\n}\n\n.opal-button:disabled { opacity: 0.4; cursor: not-allowed; }\n\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .opal-button:not([data-variant=\"filled\"])::before, .opal-button:not([data-variant=\"filled\"]):hover:not(:disabled)::before {\n    background-color: var(--opal-button-fallback-background, #ededed);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .opal-button, .opal-button::before, .opal-button::after { transition: none; }\n  .opal-button:active:not(:disabled) { transform: none; }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  .opal-button:not([data-variant=\"filled\"])::before, .opal-button:not([data-variant=\"filled\"]):hover:not(:disabled)::before {\n    background: var(--opal-button-fallback-background, #ededed);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .opal-button[data-variant] { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }\n  .opal-button::before, .opal-button::after { display: none; }\n  .opal-button:disabled { color: GrayText; border-color: GrayText; opacity: 1; }\n}\n";

package/dist/components/button/button.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode, type ComponentPropsWithoutRef } from 'react';
+export type ButtonProps = ComponentPropsWithoutRef<'button'> & {
+    /** Glass is the default; filled uses an opaque background. */
+    variant?: 'glass' | 'filled';
+    /** Leading icon. Without a label, renders a circular button; supply aria-label. */
+    icon?: ReactNode;
+    /** An opaque #RGB or #RRGGBB color. Glass: text. Filled: background. */
+    tint?: `#${string}`;
+    /** Explicit #RGB or #RRGGBB text color; overrides tint and automatic text-color selection. */
+    textColor?: `#${string}`;
+    /** Glass color separation: 0 disables it, 0.6 is subtle, 4 exaggerates it. */
+    chromaticAberration?: number;
+};
+/** A native button with OpalUI styling. Styles are included automatically. */
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /** Glass is the default; filled uses an opaque background. */
+    variant?: "glass" | "filled";
+    /** Leading icon. Without a label, renders a circular button; supply aria-label. */
+    icon?: ReactNode;
+    /** An opaque #RGB or #RRGGBB color. Glass: text. Filled: background. */
+    tint?: `#${string}`;
+    /** Explicit #RGB or #RRGGBB text color; overrides tint and automatic text-color selection. */
+    textColor?: `#${string}`;
+    /** Glass color separation: 0 disables it, 0.6 is subtle, 4 exaggerates it. */
+    chromaticAberration?: number;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/button/button.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, forwardRef, useImperativeHandle, useRef } 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 './button.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('button', css);
+function isHexColor(value) {
+    return !!value && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+}
+function tintStyles(tint) {
+    if (!isHexColor(tint))
+        return {};
+    const hex = tint.length === 4 ? tint.slice(1).split('').map(char => char + char).join('') : tint.slice(1);
+    const channels = [0, 2, 4].map(offset => {
+        const value = parseInt(hex.slice(offset, offset + 2), 16) / 255;
+        return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+    });
+    const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
+    return {
+        '--opal-button-tint': tint,
+        // Appearance-first: keep white on saturated midtone fills (including
+        // orange/red), switching to black for light fills. Not a WCAG guarantee.
+        '--opal-button-filled-foreground': luminance > 0.55 ? '#000' : '#fff',
+    };
+}
+/** A native button with OpalUI styling. Styles are included automatically. */
+export const Button = forwardRef(function Button({ className, style, icon, children, variant = 'glass', tint, textColor, chromaticAberration = 0.6, type = 'button', ...props }, ref) {
+    const hasIcon = Children.toArray(icon).length > 0;
+    const hasLabel = Children.toArray(children).some(child => typeof child !== 'string' || child.trim().length > 0);
+    const element = useRef(null);
+    useImperativeHandle(ref, () => element.current, []);
+    const glass = useGlassLens(element, { ...materials.surface, dispersion: Math.max(0, Math.min(4, Number.isFinite(chromaticAberration) ? chromaticAberration : .6)) / 5 }, { enabled: variant === 'glass' });
+    return (_jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), glass.filter, _jsxs("button", { ...props, ref: element, "data-variant": variant, "data-icon": hasIcon ? (hasLabel ? "leading" : "only") : undefined, style: { ...tintStyles(tint), ...(isHexColor(textColor) ? { '--opal-button-text-color': textColor } : {}), ...glass.surfaceStyle, ...style }, type: type, className: ['opal-button', className].filter(Boolean).join(' '), children: [hasIcon && _jsx("span", { className: "opal-button-icon", "aria-hidden": "true", children: icon }), children] })] }));
+});
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { Children, forwardRef, useImperativeHandle, useRef, type CSSProperties, type ReactNode, type ComponentPropsWithoutRef } 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 './button.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\n\nconst styleHref = stylesheetHref('button', css)\n\nexport type ButtonProps = ComponentPropsWithoutRef<'button'> & {\n  /** Glass is the default; filled uses an opaque background. */\n  variant?: 'glass' | 'filled'\n  /** Leading icon. Without a label, renders a circular button; supply aria-label. */\n  icon?: ReactNode\n  /** An opaque #RGB or #RRGGBB color. Glass: text. Filled: background. */\n  tint?: `#${string}`\n  /** Explicit #RGB or #RRGGBB text color; overrides tint and automatic text-color selection. */\n  textColor?: `#${string}`\n  /** Glass color separation: 0 disables it, 0.6 is subtle, 4 exaggerates it. */\n  chromaticAberration?: number\n}\n\nfunction isHexColor(value: string | undefined): value is string {\n  return !!value && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)\n}\n\nfunction tintStyles(tint: ButtonProps['tint']): CSSProperties {\n  if (!isHexColor(tint)) return {}\n  const hex = tint.length === 4 ? tint.slice(1).split('').map(char => char + char).join('') : tint.slice(1)\n  const channels = [0, 2, 4].map(offset => {\n    const value = parseInt(hex.slice(offset, offset + 2), 16) / 255\n    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4\n  })\n  const luminance = channels[0]! * 0.2126 + channels[1]! * 0.7152 + channels[2]! * 0.0722\n  return {\n    '--opal-button-tint': tint,\n    // Appearance-first: keep white on saturated midtone fills (including\n    // orange/red), switching to black for light fills. Not a WCAG guarantee.\n    '--opal-button-filled-foreground': luminance > 0.55 ? '#000' : '#fff',\n  } as CSSProperties\n}\n\n/** A native button with OpalUI styling. Styles are included automatically. */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button({ className, style, icon, children, variant = 'glass', tint, textColor, chromaticAberration = 0.6, type = 'button', ...props }, ref) {\n    const hasIcon = Children.toArray(icon).length > 0\n    const hasLabel = Children.toArray(children).some(child => typeof child !== 'string' || child.trim().length > 0)\n    const element = useRef<HTMLButtonElement>(null)\n    useImperativeHandle(ref, () => element.current!, [])\n    const glass = useGlassLens(element, { ...materials.surface, dispersion: Math.max(0, Math.min(4, Number.isFinite(chromaticAberration) ? chromaticAberration : .6)) / 5 }, { enabled: variant === 'glass' })\n    return (\n      <>\n        <style href={styleHref} precedence=\"opalui\">{css}</style>\n        {glass.filter}\n        <button\n          {...props}\n          ref={element}\n          data-variant={variant}\n          data-icon={hasIcon ? (hasLabel ? \"leading\" : \"only\") : undefined}\n          style={{ ...tintStyles(tint), ...(isHexColor(textColor) ? { '--opal-button-text-color': textColor } : {}), ...glass.surfaceStyle, ...style } as CSSProperties}\n          type={type}\n          className={['opal-button', className].filter(Boolean).join(' ')}\n        >\n          {hasIcon && <span className=\"opal-button-icon\" aria-hidden=\"true\">{icon}</span>}\n          {children}\n        </button>\n      </>\n    )\n  },\n)\n"]}

package/dist/components/glass/glass.css

@@ -0,0 +1,43 @@
+/* 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-glass { position:relative; isolation:isolate; border-radius:28px; padding:28px; color:var(--opal-glass-color,inherit); }
+.opal-glass::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--opal-glass-background,rgb(255 255 255 / 22%)); -webkit-backdrop-filter:blur(var(--opal-material-frost,2px)); backdrop-filter:var(--opal-material-filter,blur(var(--opal-material-frost,2px))); box-shadow:var(--_opal-glass-edge),var(--_opal-glass-shadow); }
+@media(prefers-reduced-transparency:reduce) { .opal-glass::before { background:var(--opal-glass-solid,#f5f5f5); backdrop-filter:none; -webkit-backdrop-filter:none; } .opal-glass { color:var(--opal-glass-solid-color,#202020); } }
+@media(forced-colors:active) { .opal-glass { border:1px solid CanvasText; color:CanvasText; } .opal-glass::before { background:Canvas; backdrop-filter:none; box-shadow:none; } }
+
+.opal-glass::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:var(--opal-glass-rim,var(--opal-glass-highlight,inset 0 0 0 .5px rgb(255 255 255 / 30%),inset .65px 1px .65px rgb(255 255 255 / 90%),inset -.4px -.65px .8px rgb(255 255 255 / 45%))); opacity:var(--opal-material-rim,.3); }

package/dist/components/glass/glass.css.js

@@ -0,0 +1 @@
+export default ".opal-glass { position:relative; isolation:isolate; border-radius:28px; padding:28px; color:var(--opal-glass-color,inherit); }\n.opal-glass::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--opal-glass-background,rgb(255 255 255 / 22%)); -webkit-backdrop-filter:blur(var(--opal-material-frost,2px)); backdrop-filter:var(--opal-material-filter,blur(var(--opal-material-frost,2px))); box-shadow:var(--_opal-glass-edge),var(--_opal-glass-shadow); }\n@media(prefers-reduced-transparency:reduce) { .opal-glass::before { background:var(--opal-glass-solid,#f5f5f5); backdrop-filter:none; -webkit-backdrop-filter:none; } .opal-glass { color:var(--opal-glass-solid-color,#202020); } }\n@media(forced-colors:active) { .opal-glass { border:1px solid CanvasText; color:CanvasText; } .opal-glass::before { background:Canvas; backdrop-filter:none; box-shadow:none; } }\n\n.opal-glass::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:var(--opal-glass-rim,var(--opal-glass-highlight,inset 0 0 0 .5px rgb(255 255 255 / 30%),inset .65px 1px .65px rgb(255 255 255 / 90%),inset -.4px -.65px .8px rgb(255 255 255 / 45%))); opacity:var(--opal-material-rim,.3); }\n";

package/dist/components/glass/glass.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type GlassSettings } from '../../internal/glass/material.js';
+export type GlassProps = ComponentPropsWithoutRef<'div'> & Partial<GlassSettings>;
+/** A glass surface. Children remain sharp; only the backdrop is refracted. */
+export declare const Glass: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Partial<GlassSettings> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/glass/glass.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useGlassLens } from '../../internal/glass/lens.js';
+import { materials, resolveMaterial } from '../../internal/glass/material.js';
+import { stylesheetHref } from '../../internal/styles.js';
+import sharedCss from '../../internal/glass/styles.js';
+import componentCss from './glass.css.js';
+const css = `${sharedCss}\n${componentCss}`;
+const href = stylesheetHref('glass', css);
+/** A glass surface. Children remain sharp; only the backdrop is refracted. */
+export const Glass = forwardRef(function Glass({ bend, dispersion, frost, rim, edge, className, style, children, ...props }, ref) {
+    const element = useRef(null);
+    useImperativeHandle(ref, () => element.current, []);
+    const material = resolveMaterial(materials.surface, { bend, dispersion, frost, rim, edge });
+    const glass = useGlassLens(element, material);
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: href, precedence: "opalui", children: css }), glass.filter, _jsx("div", { ...props, ref: element, className: ['opal-glass', className].filter(Boolean).join(' '), style: { ...glass.surfaceStyle, ...style }, children: children })] });
+});
+//# sourceMappingURL=glass.js.map

package/dist/components/glass/glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass.js","sourceRoot":"","sources":["../../../src/components/glass/glass.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAiC,MAAM,OAAO,CAAA;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,eAAe,EAAsB,MAAM,kCAAkC,CAAA;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,SAAS,MAAM,gCAAgC,CAAA;AACtD,OAAO,YAAY,MAAM,oBAAoB,CAAA;AAC7C,MAAM,GAAG,GAAG,GAAG,SAAS,KAAK,YAAY,EAAE,CAAA;AAC3C,MAAM,IAAI,GAAG,cAAc,CAAC,OAAO,EAAE,GAAG,CAAC,CAAA;AAEzC,8EAA8E;AAC9E,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAC1J,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IACpD,MAAM,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAA;IAC3F,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC7C,OAAO,8BACL,gBAAO,IAAI,EAAE,IAAI,EAAE,UAAU,EAAC,QAAQ,YAAE,GAAG,GAAS,EACnD,KAAK,CAAC,MAAM,EACb,iBAAS,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,EAAE,YAAG,QAAQ,GAAO,IACzJ,CAAA;AACL,CAAC,CAAC,CAAA","sourcesContent":["'use client'\n\nimport { forwardRef, useImperativeHandle, useRef, type ComponentPropsWithoutRef } from 'react'\nimport { useGlassLens } from '../../internal/glass/lens.js'\nimport { materials, resolveMaterial, type GlassSettings } from '../../internal/glass/material.js'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport sharedCss from '../../internal/glass/styles.js'\nimport componentCss from './glass.css?inline'\nconst css = `${sharedCss}\\n${componentCss}`\nconst href = stylesheetHref('glass', css)\nexport type GlassProps = ComponentPropsWithoutRef<'div'> & Partial<GlassSettings>\n/** A glass surface. Children remain sharp; only the backdrop is refracted. */\nexport const Glass = forwardRef<HTMLDivElement, GlassProps>(function Glass({ bend, dispersion, frost, rim, edge, className, style, children, ...props }, ref) {\n  const element = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => element.current!, [])\n  const material = resolveMaterial(materials.surface, { bend, dispersion, frost, rim, edge })\n  const glass = useGlassLens(element, material)\n  return <>\n    <style href={href} precedence=\"opalui\">{css}</style>\n    {glass.filter}\n    <div {...props} ref={element} className={['opal-glass', className].filter(Boolean).join(' ')} style={{ ...glass.surfaceStyle, ...style }}>{children}</div>\n  </>\n})\n"]}

package/dist/components/input/input.css

@@ -0,0 +1,70 @@
+/* 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-input {
+  position: relative;
+  display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
+  width: 360px; max-width: 100%; min-height: 44px; padding: 0 15px; border-radius: 999px;
+  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, box-shadow 180ms ease;
+}
+.opal-input::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-input:focus-within {
+  background: var(--opal-input-focus-background, rgb(255 255 255 / 90%));
+}
+.opal-input:has([aria-invalid="true"]) { outline: 2px solid #e5484d; outline-offset: 2px; }
+.opal-input-field { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; line-height: 1.25; }
+.opal-input-field::placeholder { color: inherit; opacity: .5; }
+.opal-input-field::-webkit-search-cancel-button, .opal-input-field::-webkit-search-decoration { -webkit-appearance: none; }
+.opal-input-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; opacity: .55; pointer-events: none; }
+.opal-input-icon > svg { width: 100%; height: 100%; }
+.opal-input-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin-inline-end: -6px; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .55; cursor: pointer; }
+.opal-input-clear svg { width: 20px; height: 20px; }
+.opal-input-clear:hover { opacity: 1; }
+.opal-input-clear:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 1px; }
+.opal-input[data-disabled] { opacity: .4; cursor: not-allowed; }
+.opal-input-field:disabled { cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) { .opal-input { transition: none; } }
+@media (prefers-reduced-transparency: reduce) { .opal-input { background: var(--opal-input-solid, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; } }
+@media (forced-colors: active) { .opal-input { border: 1px solid ButtonText; } }

package/dist/components/input/input.css.js

@@ -0,0 +1 @@
+export default ".opal-input {\n  position: relative;\n  display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;\n  width: 360px; max-width: 100%; min-height: 44px; padding: 0 15px; border-radius: 999px;\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, box-shadow 180ms ease;\n}\n.opal-input::after {\n  content: ''; position: absolute; inset: 0; border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--opal-input-rim, var(--_opal-glass-rim));\n  opacity: var(--opal-control-rim-opacity, .7);\n}\n.opal-input:focus-within {\n  background: var(--opal-input-focus-background, rgb(255 255 255 / 90%));\n}\n.opal-input:has([aria-invalid=\"true\"]) { outline: 2px solid #e5484d; outline-offset: 2px; }\n.opal-input-field { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; line-height: 1.25; }\n.opal-input-field::placeholder { color: inherit; opacity: .5; }\n.opal-input-field::-webkit-search-cancel-button, .opal-input-field::-webkit-search-decoration { -webkit-appearance: none; }\n.opal-input-icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 20px; opacity: .55; pointer-events: none; }\n.opal-input-icon > svg { width: 100%; height: 100%; }\n.opal-input-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; margin-inline-end: -6px; padding: 4px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .55; cursor: pointer; }\n.opal-input-clear svg { width: 20px; height: 20px; }\n.opal-input-clear:hover { opacity: 1; }\n.opal-input-clear:focus-visible { outline: 2px solid var(--opal-focus-color, #2885ff); outline-offset: 1px; }\n.opal-input[data-disabled] { opacity: .4; cursor: not-allowed; }\n.opal-input-field:disabled { cursor: not-allowed; }\n@media (prefers-reduced-motion: reduce) { .opal-input { transition: none; } }\n@media (prefers-reduced-transparency: reduce) { .opal-input { background: var(--opal-input-solid, #fff); backdrop-filter: none; -webkit-backdrop-filter: none; } }\n@media (forced-colors: active) { .opal-input { border: 1px solid ButtonText; } }\n";

package/dist/components/input/input.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'children' | 'type'> & {
+    type?: 'text' | 'search' | 'email' | 'url' | 'tel' | 'password' | 'number';
+    icon?: ReactNode;
+    /** Defaults to true for search inputs. */
+    clearable?: boolean;
+    clearLabel?: string;
+    onValueChange?: (value: string) => void;
+};
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "children"> & {
+    type?: "text" | "search" | "email" | "url" | "tel" | "password" | "number";
+    icon?: ReactNode;
+    /** Defaults to true for search inputs. */
+    clearable?: boolean;
+    clearLabel?: string;
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { stylesheetHref } from '../../internal/styles.js';
+import componentCss from './input.css.js';
+import glassCss from '../../internal/glass/styles.js';
+const css = `${glassCss}\n${componentCss}`;
+const styleHref = stylesheetHref('input', css);
+export const Input = forwardRef(function Input({ icon, className, style, type = 'text', clearable = type === 'search', clearLabel = 'Clear input', onChange, onValueChange, value, defaultValue, disabled, readOnly, ...props }, ref) {
+    const input = useRef(null);
+    useImperativeHandle(ref, () => input.current, []);
+    const [text, setText] = useState(String(value ?? defaultValue ?? ''));
+    const current = value === undefined ? text : String(value);
+    useEffect(() => {
+        const form = input.current?.form;
+        const reset = () => queueMicrotask(() => { if (input.current)
+            setText(input.current.value); });
+        form?.addEventListener('reset', reset);
+        return () => form?.removeEventListener('reset', reset);
+    }, []);
+    return _jsxs(_Fragment, { children: [_jsx("style", { href: styleHref, precedence: "opalui", children: css }), _jsxs("span", { className: ['opal-input', className].filter(Boolean).join(' '), style: style, "data-disabled": disabled || undefined, children: [icon && _jsx("span", { className: "opal-input-icon", "aria-hidden": "true", children: icon }), _jsx("input", { ...props, ref: input, type: type, value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, className: "opal-input-field", onChange: event => {
+                            setText(event.currentTarget.value);
+                            onChange?.(event);
+                            if (!event.defaultPrevented)
+                                onValueChange?.(event.currentTarget.value);
+                        } }), clearable && current.length > 0 && !disabled && !readOnly && _jsx("button", { className: "opal-input-clear", type: "button", "aria-label": clearLabel, onClick: () => {
+                            const field = input.current;
+                            if (!field)
+                                return;
+                            // Use the native setter so React receives the same change as typing.
+                            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(field, '');
+                            field.dispatchEvent(new Event('input', { bubbles: true }));
+                            field.focus({ preventScroll: true });
+                        }, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m7 7 10 10M17 7 7 17" }) }) })] })] });
+});
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { stylesheetHref } from '../../internal/styles.js'\nimport componentCss from './input.css?inline'\nimport glassCss from '../../internal/glass/styles.js'\nconst css = `${glassCss}\\n${componentCss}`\nconst styleHref = stylesheetHref('input', css)\nexport type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'children' | 'type'> & {\n  type?: 'text' | 'search' | 'email' | 'url' | 'tel' | 'password' | 'number'\n  icon?: ReactNode\n  /** Defaults to true for search inputs. */\n  clearable?: boolean\n  clearLabel?: string\n  onValueChange?: (value: string) => void\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { icon, className, style, type = 'text', clearable = type === 'search', clearLabel = 'Clear input', onChange, onValueChange, value, defaultValue, disabled, readOnly, ...props }, ref,\n) {\n  const input = useRef<HTMLInputElement>(null)\n  useImperativeHandle(ref, () => input.current!, [])\n  const [text, setText] = useState(String(value ?? defaultValue ?? ''))\n  const current = value === undefined ? text : String(value)\n  useEffect(() => {\n    const form = input.current?.form\n    const reset = () => queueMicrotask(() => { if (input.current) setText(input.current.value) })\n    form?.addEventListener('reset', reset)\n    return () => form?.removeEventListener('reset', reset)\n  }, [])\n  return <>\n    <style href={styleHref} precedence=\"opalui\">{css}</style>\n    <span className={['opal-input', className].filter(Boolean).join(' ')} style={style} data-disabled={disabled || undefined}>\n      {icon && <span className=\"opal-input-icon\" aria-hidden=\"true\">{icon}</span>}\n      <input {...props} ref={input} type={type} value={value} defaultValue={defaultValue} disabled={disabled} readOnly={readOnly}\n        className=\"opal-input-field\" onChange={event => {\n          setText(event.currentTarget.value)\n          onChange?.(event)\n          if (!event.defaultPrevented) onValueChange?.(event.currentTarget.value)\n        }} />\n      {clearable && current.length > 0 && !disabled && !readOnly && <button className=\"opal-input-clear\" type=\"button\" aria-label={clearLabel}\n        onClick={() => {\n          const field = input.current\n          if (!field) return\n          // Use the native setter so React receives the same change as typing.\n          Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(field, '')\n          field.dispatchEvent(new Event('input', { bubbles: true }))\n          field.focus({ preventScroll: true })\n        }}><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden=\"true\"><path d=\"m7 7 10 10M17 7 7 17\" /></svg></button>}\n    </span>\n  </>\n})\n"]}