@ambientcss/components 1.1.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ramakrishnan Veeraragavan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -68,18 +68,32 @@ function cn(...values) {
 
 // src/components/AmbientPanel.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function AmbientPanel({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel", className), ...props });
+function AmbientPanel({ className, material = "matte", ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: cn(
+        "ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 // src/components/AmbientButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function AmbientButton({ className, children, ...props }) {
+function AmbientButton({ className, children, material = "matte", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       type: "button",
-      className: cn("ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3", className),
+      className: cn(
+        "ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      ),
       ...props,
       children
     }
@@ -157,6 +171,7 @@ function AmbientKnob({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -224,7 +239,7 @@ function AmbientKnob({
       "div",
       {
         ref: knobRef,
-        className: "ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob",
+        className: cn("ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob", material && `amb-mat-${material}`),
         role: "slider",
         "aria-label": label,
         "aria-valuemin": min,
@@ -271,6 +286,7 @@ function AmbientFader({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -352,7 +368,7 @@ function AmbientFader({
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
-            className: "amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb",
+            className: cn("amb-fader-thumb ambient amb-fillet amb-elevation-1 ambx-fader-thumb", material !== "glass" && "amb-surface-concave", material && `amb-mat-${material}`),
             style: { top: `${100 - percent}%` },
             children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "amb-fader-grip", children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "amb-fader-dot" }),
@@ -379,6 +395,7 @@ function AmbientSlider({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -460,7 +477,7 @@ function AmbientSlider({
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
-            className: "amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb",
+            className: cn("amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb", material !== "glass" && "amb-surface-concave-h", material && `amb-mat-${material}`),
             style: { left: `${percent}%` },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "amb-slider-grip", children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "amb-fader-dot" }),

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/AmbientProvider.tsx","../src/lib/cn.ts","../src/components/AmbientPanel.tsx","../src/components/AmbientButton.tsx","../src/components/AmbientSwitch.tsx","../src/components/AmbientKnob.tsx","../src/components/AmbientFader.tsx","../src/components/AmbientSlider.tsx"],"sourcesContent":["export { AmbientProvider } from \"./components/AmbientProvider\";\nexport type { AmbientProviderProps, AmbientTheme } from \"./components/AmbientProvider\";\n\nexport { AmbientPanel } from \"./components/AmbientPanel\";\nexport type { AmbientPanelProps } from \"./components/AmbientPanel\";\n\nexport { AmbientButton } from \"./components/AmbientButton\";\nexport type { AmbientButtonProps } from \"./components/AmbientButton\";\n\nexport { AmbientSwitch } from \"./components/AmbientSwitch\";\nexport type { AmbientSwitchProps, AmbientSwitchSize } from \"./components/AmbientSwitch\";\n\nexport { AmbientKnob } from \"./components/AmbientKnob\";\nexport type { AmbientKnobProps } from \"./components/AmbientKnob\";\n\nexport { AmbientFader } from \"./components/AmbientFader\";\nexport type { AmbientFaderProps } from \"./components/AmbientFader\";\n\nexport { AmbientSlider } from \"./components/AmbientSlider\";\nexport type { AmbientSliderProps } from \"./components/AmbientSlider\";\n","import type { CSSProperties, PropsWithChildren } from \"react\";\n\nexport type AmbientTheme = {\n  lightX?: number;\n  lightY?: number;\n  keyLight?: number;\n  fillLight?: number;\n  lightHue?: number;\n  lightSaturation?: number;\n  highlightColor?: string;\n  lumeHue?: number;\n};\n\nexport type AmbientProviderProps = PropsWithChildren<{\n  className?: string;\n  style?: CSSProperties;\n  theme?: AmbientTheme;\n}>;\n\nconst VAR_MAP: Record<string, keyof AmbientTheme> = {\n  \"--amb-light-x\": \"lightX\",\n  \"--amb-light-y\": \"lightY\",\n  \"--amb-key-light-intensity\": \"keyLight\",\n  \"--amb-fill-light-intensity\": \"fillLight\",\n  \"--amb-light-hue\": \"lightHue\",\n  \"--amb-light-saturation\": \"lightSaturation\",\n  \"--amb-highlight-color\": \"highlightColor\",\n  \"--amb-lume-hue\": \"lumeHue\",\n};\n\nexport function AmbientProvider({ children, className, style, theme }: AmbientProviderProps) {\n  const themeVars: Record<string, string> = {};\n  for (const [varName, key] of Object.entries(VAR_MAP)) {\n    const value = theme?.[key];\n    if (value !== undefined) {\n      themeVars[varName] = key === \"lightSaturation\" ? `${value}%` : String(value);\n    }\n  }\n  // Derived variables must be re-declared here so they recompute using the\n  // overridden input variables on this element rather than inheriting the\n  // already-resolved values from :root.\n  themeVars[\"--amb-lume\"] = [\n    \"color-mix(in oklab,\",\n    \"hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (0.5 - var(--amb-key-light-intensity)) / 0.2, 1) * 100%),\",\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation)\",\n    \"calc((1 - sign(var(--amb-key-light-intensity) - 0.5)) * 50% + 25%)))\",\n  ].join(\" \");\n  themeVars[\"--amb-label\"] =\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))\";\n  const mergedStyle = { ...themeVars, ...style } as CSSProperties;\n\n  return (\n    <div className={className} style={mergedStyle}>\n      {children}\n    </div>\n  );\n}\n","export function cn(...values: Array<string | false | null | undefined>): string {\n  return values.filter(Boolean).join(\" \");\n}\n","import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;\n\nexport function AmbientPanel({ className, ...props }: AmbientPanelProps) {\n  return <div className={cn(\"ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel\", className)} {...props} />;\n}\n","import type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport function AmbientButton({ className, children, ...props }: AmbientButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\"ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3\", className)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n","import { useId, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: AmbientSwitchSize;\n  label?: string;\n  /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */\n  led?: boolean | string;\n};\n\nexport function AmbientSwitch({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = \"md\",\n  label,\n  led,\n  children,\n  ...props\n}: AmbientSwitchProps) {\n  const labelId = useId();\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const active = isControlled ? (checked ?? false) : internalChecked;\n\n  const button = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={active}\n      aria-labelledby={label ? labelId : props[\"aria-labelledby\"]}\n      className={cn(\n        \"ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3\",\n        active ? \"amb-surface-convex amb-switch-on\" : \"amb-surface-concave\",\n        \"ambx-switch\",\n        `ambx-switch-${size}`,\n        className\n      )}\n      onClick={(event) => {\n        const next = !active;\n        if (!isControlled) setInternalChecked(next);\n        onCheckedChange?.(next);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {led ? (\n        <span\n          className={cn(\"amb-led\", !active && \"amb-led-off\")}\n          style={typeof led === \"string\" ? { \"--amb-led-color\": led } as React.CSSProperties : undefined}\n        />\n      ) : null}\n      {children}\n    </button>\n  );\n\n  if (!label) return button;\n\n  return (\n    <div className=\"ambx-stack\">\n      {button}\n      <span id={labelId} className=\"ambx-label\">\n        {label}\n      </span>\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientKnob({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientKnobProps) {\n  const id = useId();\n  const draggingRef = useRef(false);\n  const knobRef = useRef<HTMLDivElement>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = (value - min) / (max - min || 1);\n  const rotation = percent * 270 - 135;\n\n  // Convert pointer position to a knob angle in [-180, 180] where 0 = up,\n  // positive = clockwise. The knob's active range is [-135, 135] (270°),\n  // with the dead zone at the bottom (~135° to ~225° i.e. past ±135°).\n  const pointerToValue = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = knobRef.current!.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    // atan2 with screen coords: 0=right, 90=down; add 90 to rotate so 0=up\n    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);\n    let angle = atan2Deg + 90;\n    // Normalize to [-180, 180]\n    if (angle > 180) angle -= 360;\n\n    // Clamp dead zone based on current value position\n    if (angle < -135 || angle > 135) {\n      angle = percent >= 0.5 ? 135 : -135;\n    }\n\n    const range = max - min;\n    const raw = min + ((angle + 135) / 270) * range;\n    const snapped = Math.round(raw / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        ref={knobRef}\n        className=\"ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob\"\n        role=\"slider\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-labelledby={label ? id : undefined}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          draggingRef.current = true;\n          pointerToValue(event);\n        }}\n        onPointerMove={(event) => {\n          if (draggingRef.current) pointerToValue(event);\n        }}\n        onPointerUp={() => {\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          draggingRef.current = false;\n        }}\n        onKeyDown={onKeyDown}\n      >\n        <div className=\"ambx-knob-rotation\" style={{ transform: `rotate(${rotation}deg)` }}>\n          <div className=\"amb-knob-indicator\">\n            <div className=\"amb-knob-grip\">\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientFader({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientFaderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientY = (clientY: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = 1 - (clientY - rect.top) / rect.height;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientY(event.clientY);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-fader ambx-fader\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientY(event.clientY);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className=\"amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb\"\n          style={{ top: `${100 - percent}%` }}\n        >\n          <div className=\"amb-fader-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientSlider({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientSliderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientX = (clientX: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = (clientX - rect.left) / rect.width;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientX(event.clientX);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-slider ambx-slider\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientX(event.clientX);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className=\"amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb\"\n          style={{ left: `${percent}%` }}\n        >\n          <div className=\"amb-slider-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","clamp","import_react","import_jsx_runtime","clamp"]}
+{"version":3,"sources":["../src/index.ts","../src/components/AmbientProvider.tsx","../src/lib/cn.ts","../src/components/AmbientPanel.tsx","../src/components/AmbientButton.tsx","../src/components/AmbientSwitch.tsx","../src/components/AmbientKnob.tsx","../src/components/AmbientFader.tsx","../src/components/AmbientSlider.tsx"],"sourcesContent":["export { AmbientProvider } from \"./components/AmbientProvider\";\nexport type { AmbientProviderProps, AmbientTheme } from \"./components/AmbientProvider\";\n\nexport { AmbientPanel } from \"./components/AmbientPanel\";\nexport type { AmbientPanelProps } from \"./components/AmbientPanel\";\n\nexport { AmbientButton } from \"./components/AmbientButton\";\nexport type { AmbientButtonProps } from \"./components/AmbientButton\";\n\nexport { AmbientSwitch } from \"./components/AmbientSwitch\";\nexport type { AmbientSwitchProps, AmbientSwitchSize } from \"./components/AmbientSwitch\";\n\nexport { AmbientKnob } from \"./components/AmbientKnob\";\nexport type { AmbientKnobProps } from \"./components/AmbientKnob\";\n\nexport { AmbientFader } from \"./components/AmbientFader\";\nexport type { AmbientFaderProps } from \"./components/AmbientFader\";\n\nexport { AmbientSlider } from \"./components/AmbientSlider\";\nexport type { AmbientSliderProps } from \"./components/AmbientSlider\";\n","import type { CSSProperties, PropsWithChildren } from \"react\";\n\nexport type AmbientTheme = {\n  lightX?: number;\n  lightY?: number;\n  keyLight?: number;\n  fillLight?: number;\n  lightHue?: number;\n  lightSaturation?: number;\n  highlightColor?: string;\n  lumeHue?: number;\n};\n\nexport type AmbientProviderProps = PropsWithChildren<{\n  className?: string;\n  style?: CSSProperties;\n  theme?: AmbientTheme;\n}>;\n\nconst VAR_MAP: Record<string, keyof AmbientTheme> = {\n  \"--amb-light-x\": \"lightX\",\n  \"--amb-light-y\": \"lightY\",\n  \"--amb-key-light-intensity\": \"keyLight\",\n  \"--amb-fill-light-intensity\": \"fillLight\",\n  \"--amb-light-hue\": \"lightHue\",\n  \"--amb-light-saturation\": \"lightSaturation\",\n  \"--amb-highlight-color\": \"highlightColor\",\n  \"--amb-lume-hue\": \"lumeHue\",\n};\n\nexport function AmbientProvider({ children, className, style, theme }: AmbientProviderProps) {\n  const themeVars: Record<string, string> = {};\n  for (const [varName, key] of Object.entries(VAR_MAP)) {\n    const value = theme?.[key];\n    if (value !== undefined) {\n      themeVars[varName] = key === \"lightSaturation\" ? `${value}%` : String(value);\n    }\n  }\n  // Derived variables must be re-declared here so they recompute using the\n  // overridden input variables on this element rather than inheriting the\n  // already-resolved values from :root.\n  themeVars[\"--amb-lume\"] = [\n    \"color-mix(in oklab,\",\n    \"hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (0.5 - var(--amb-key-light-intensity)) / 0.2, 1) * 100%),\",\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation)\",\n    \"calc((1 - sign(var(--amb-key-light-intensity) - 0.5)) * 50% + 25%)))\",\n  ].join(\" \");\n  themeVars[\"--amb-label\"] =\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))\";\n  const mergedStyle = { ...themeVars, ...style } as CSSProperties;\n\n  return (\n    <div className={className} style={mergedStyle}>\n      {children}\n    </div>\n  );\n}\n","export function cn(...values: Array<string | false | null | undefined>): string {\n  return values.filter(Boolean).join(\" \");\n}\n","import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface AmbientPanelProps extends HTMLAttributes<HTMLDivElement> {\n  material?: \"matte\" | \"shiny\" | \"glass\";\n}\n\nexport function AmbientPanel({ className, material = \"matte\", ...props }: AmbientPanelProps) {\n  return (\n    <div\n      className={cn(\n        \"ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel\",\n        material === \"matte\" ? \"amb-mat-matte\" : material === \"shiny\" ? \"amb-mat-shiny\" : \"amb-mat-glass\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface AmbientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  material?: \"matte\" | \"shiny\" | \"glass\";\n}\n\nexport function AmbientButton({ className, children, material = \"matte\", ...props }: AmbientButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3\",\n        material === \"matte\" ? \"amb-mat-matte\" : material === \"shiny\" ? \"amb-mat-shiny\" : \"amb-mat-glass\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n","import { useId, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: AmbientSwitchSize;\n  label?: string;\n  /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */\n  led?: boolean | string;\n};\n\nexport function AmbientSwitch({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = \"md\",\n  label,\n  led,\n  children,\n  ...props\n}: AmbientSwitchProps) {\n  const labelId = useId();\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const active = isControlled ? (checked ?? false) : internalChecked;\n\n  const button = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={active}\n      aria-labelledby={label ? labelId : props[\"aria-labelledby\"]}\n      className={cn(\n        \"ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3\",\n        active ? \"amb-surface-convex amb-switch-on\" : \"amb-surface-concave\",\n        \"ambx-switch\",\n        `ambx-switch-${size}`,\n        className\n      )}\n      onClick={(event) => {\n        const next = !active;\n        if (!isControlled) setInternalChecked(next);\n        onCheckedChange?.(next);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {led ? (\n        <span\n          className={cn(\"amb-led\", !active && \"amb-led-off\")}\n          style={typeof led === \"string\" ? { \"--amb-led-color\": led } as React.CSSProperties : undefined}\n        />\n      ) : null}\n      {children}\n    </button>\n  );\n\n  if (!label) return button;\n\n  return (\n    <div className=\"ambx-stack\">\n      {button}\n      <span id={labelId} className=\"ambx-label\">\n        {label}\n      </span>\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientKnob({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientKnobProps) {\n  const id = useId();\n  const draggingRef = useRef(false);\n  const knobRef = useRef<HTMLDivElement>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = (value - min) / (max - min || 1);\n  const rotation = percent * 270 - 135;\n\n  // Convert pointer position to a knob angle in [-180, 180] where 0 = up,\n  // positive = clockwise. The knob's active range is [-135, 135] (270°),\n  // with the dead zone at the bottom (~135° to ~225° i.e. past ±135°).\n  const pointerToValue = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = knobRef.current!.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    // atan2 with screen coords: 0=right, 90=down; add 90 to rotate so 0=up\n    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);\n    let angle = atan2Deg + 90;\n    // Normalize to [-180, 180]\n    if (angle > 180) angle -= 360;\n\n    // Clamp dead zone based on current value position\n    if (angle < -135 || angle > 135) {\n      angle = percent >= 0.5 ? 135 : -135;\n    }\n\n    const range = max - min;\n    const raw = min + ((angle + 135) / 270) * range;\n    const snapped = Math.round(raw / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        ref={knobRef}\n        className={cn(\"ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob\", material && `amb-mat-${material}`)}\n        role=\"slider\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-labelledby={label ? id : undefined}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          draggingRef.current = true;\n          pointerToValue(event);\n        }}\n        onPointerMove={(event) => {\n          if (draggingRef.current) pointerToValue(event);\n        }}\n        onPointerUp={() => {\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          draggingRef.current = false;\n        }}\n        onKeyDown={onKeyDown}\n      >\n        <div className=\"ambx-knob-rotation\" style={{ transform: `rotate(${rotation}deg)` }}>\n          <div className=\"amb-knob-indicator\">\n            <div className=\"amb-knob-grip\">\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientFader({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientFaderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientY = (clientY: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = 1 - (clientY - rect.top) / rect.height;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientY(event.clientY);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-fader ambx-fader\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientY(event.clientY);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className={cn(\"amb-fader-thumb ambient amb-fillet amb-elevation-1 ambx-fader-thumb\", material !== \"glass\" && \"amb-surface-concave\", material && `amb-mat-${material}`)}\n          style={{ top: `${100 - percent}%` }}\n        >\n          <div className=\"amb-fader-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientSlider({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientSliderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientX = (clientX: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = (clientX - rect.left) / rect.width;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientX(event.clientX);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-slider ambx-slider\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientX(event.clientX);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className={cn(\"amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb\", material !== \"glass\" && \"amb-surface-concave-h\", material && `amb-mat-${material}`)}\n          style={{ left: `${percent}%` }}\n        >\n          <div className=\"amb-slider-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","clamp","import_react","import_jsx_runtime","clamp"]}

package/dist/index.d.cts

@@ -18,11 +18,15 @@ type AmbientProviderProps = PropsWithChildren<{
 }>;
 declare function AmbientProvider({ children, className, style, theme }: AmbientProviderProps): react_jsx_runtime.JSX.Element;
 
-type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;
-declare function AmbientPanel({ className, ...props }: AmbientPanelProps): react_jsx_runtime.JSX.Element;
+interface AmbientPanelProps extends HTMLAttributes<HTMLDivElement> {
+    material?: "matte" | "shiny" | "glass";
+}
+declare function AmbientPanel({ className, material, ...props }: AmbientPanelProps): react_jsx_runtime.JSX.Element;
 
-type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-declare function AmbientButton({ className, children, ...props }: AmbientButtonProps): react_jsx_runtime.JSX.Element;
+interface AmbientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    material?: "matte" | "shiny" | "glass";
+}
+declare function AmbientButton({ className, children, material, ...props }: AmbientButtonProps): react_jsx_runtime.JSX.Element;
 
 type AmbientSwitchSize = "sm" | "md" | "lg";
 type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
@@ -42,9 +46,10 @@ type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientKnob({ value, min, max, step, label, onChange, className, ...props }: AmbientKnobProps): react_jsx_runtime.JSX.Element;
+declare function AmbientKnob({ value, min, max, step, label, material, onChange, className, ...props }: AmbientKnobProps): react_jsx_runtime.JSX.Element;
 
 type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     value: number;
@@ -52,9 +57,10 @@ type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientFader({ value, min, max, step, label, onChange, className, ...props }: AmbientFaderProps): react_jsx_runtime.JSX.Element;
+declare function AmbientFader({ value, min, max, step, label, material, onChange, className, ...props }: AmbientFaderProps): react_jsx_runtime.JSX.Element;
 
 type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     value: number;
@@ -62,8 +68,9 @@ type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientSlider({ value, min, max, step, label, onChange, className, ...props }: AmbientSliderProps): react_jsx_runtime.JSX.Element;
+declare function AmbientSlider({ value, min, max, step, label, material, onChange, className, ...props }: AmbientSliderProps): react_jsx_runtime.JSX.Element;
 
 export { AmbientButton, type AmbientButtonProps, AmbientFader, type AmbientFaderProps, AmbientKnob, type AmbientKnobProps, AmbientPanel, type AmbientPanelProps, AmbientProvider, type AmbientProviderProps, AmbientSlider, type AmbientSliderProps, AmbientSwitch, type AmbientSwitchProps, type AmbientSwitchSize, type AmbientTheme };

package/dist/index.d.ts

@@ -18,11 +18,15 @@ type AmbientProviderProps = PropsWithChildren<{
 }>;
 declare function AmbientProvider({ children, className, style, theme }: AmbientProviderProps): react_jsx_runtime.JSX.Element;
 
-type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;
-declare function AmbientPanel({ className, ...props }: AmbientPanelProps): react_jsx_runtime.JSX.Element;
+interface AmbientPanelProps extends HTMLAttributes<HTMLDivElement> {
+    material?: "matte" | "shiny" | "glass";
+}
+declare function AmbientPanel({ className, material, ...props }: AmbientPanelProps): react_jsx_runtime.JSX.Element;
 
-type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-declare function AmbientButton({ className, children, ...props }: AmbientButtonProps): react_jsx_runtime.JSX.Element;
+interface AmbientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    material?: "matte" | "shiny" | "glass";
+}
+declare function AmbientButton({ className, children, material, ...props }: AmbientButtonProps): react_jsx_runtime.JSX.Element;
 
 type AmbientSwitchSize = "sm" | "md" | "lg";
 type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
@@ -42,9 +46,10 @@ type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientKnob({ value, min, max, step, label, onChange, className, ...props }: AmbientKnobProps): react_jsx_runtime.JSX.Element;
+declare function AmbientKnob({ value, min, max, step, label, material, onChange, className, ...props }: AmbientKnobProps): react_jsx_runtime.JSX.Element;
 
 type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     value: number;
@@ -52,9 +57,10 @@ type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientFader({ value, min, max, step, label, onChange, className, ...props }: AmbientFaderProps): react_jsx_runtime.JSX.Element;
+declare function AmbientFader({ value, min, max, step, label, material, onChange, className, ...props }: AmbientFaderProps): react_jsx_runtime.JSX.Element;
 
 type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     value: number;
@@ -62,8 +68,9 @@ type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
     max?: number;
     step?: number;
     label?: string;
+    material?: "matte" | "shiny" | "glass";
     onChange?: (nextValue: number) => void;
 };
-declare function AmbientSlider({ value, min, max, step, label, onChange, className, ...props }: AmbientSliderProps): react_jsx_runtime.JSX.Element;
+declare function AmbientSlider({ value, min, max, step, label, material, onChange, className, ...props }: AmbientSliderProps): react_jsx_runtime.JSX.Element;
 
 export { AmbientButton, type AmbientButtonProps, AmbientFader, type AmbientFaderProps, AmbientKnob, type AmbientKnobProps, AmbientPanel, type AmbientPanelProps, AmbientProvider, type AmbientProviderProps, AmbientSlider, type AmbientSliderProps, AmbientSwitch, type AmbientSwitchProps, type AmbientSwitchSize, type AmbientTheme };

package/dist/index.js

@@ -36,18 +36,32 @@ function cn(...values) {
 
 // src/components/AmbientPanel.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function AmbientPanel({ className, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel", className), ...props });
+function AmbientPanel({ className, material = "matte", ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      ),
+      ...props
+    }
+  );
 }
 
 // src/components/AmbientButton.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-function AmbientButton({ className, children, ...props }) {
+function AmbientButton({ className, children, material = "matte", ...props }) {
   return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
-      className: cn("ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3", className),
+      className: cn(
+        "ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      ),
       ...props,
       children
     }
@@ -125,6 +139,7 @@ function AmbientKnob({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -192,7 +207,7 @@ function AmbientKnob({
       "div",
       {
         ref: knobRef,
-        className: "ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob",
+        className: cn("ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob", material && `amb-mat-${material}`),
         role: "slider",
         "aria-label": label,
         "aria-valuemin": min,
@@ -239,6 +254,7 @@ function AmbientFader({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -320,7 +336,7 @@ function AmbientFader({
         children: /* @__PURE__ */ jsx6(
           "div",
           {
-            className: "amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb",
+            className: cn("amb-fader-thumb ambient amb-fillet amb-elevation-1 ambx-fader-thumb", material !== "glass" && "amb-surface-concave", material && `amb-mat-${material}`),
             style: { top: `${100 - percent}%` },
             children: /* @__PURE__ */ jsxs3("div", { className: "amb-fader-grip", children: [
               /* @__PURE__ */ jsx6("span", { className: "amb-fader-dot" }),
@@ -347,6 +363,7 @@ function AmbientSlider({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -428,7 +445,7 @@ function AmbientSlider({
         children: /* @__PURE__ */ jsx7(
           "div",
           {
-            className: "amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb",
+            className: cn("amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb", material !== "glass" && "amb-surface-concave-h", material && `amb-mat-${material}`),
             style: { left: `${percent}%` },
             children: /* @__PURE__ */ jsxs4("div", { className: "amb-slider-grip", children: [
               /* @__PURE__ */ jsx7("span", { className: "amb-fader-dot" }),

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AmbientProvider.tsx","../src/lib/cn.ts","../src/components/AmbientPanel.tsx","../src/components/AmbientButton.tsx","../src/components/AmbientSwitch.tsx","../src/components/AmbientKnob.tsx","../src/components/AmbientFader.tsx","../src/components/AmbientSlider.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\n\nexport type AmbientTheme = {\n  lightX?: number;\n  lightY?: number;\n  keyLight?: number;\n  fillLight?: number;\n  lightHue?: number;\n  lightSaturation?: number;\n  highlightColor?: string;\n  lumeHue?: number;\n};\n\nexport type AmbientProviderProps = PropsWithChildren<{\n  className?: string;\n  style?: CSSProperties;\n  theme?: AmbientTheme;\n}>;\n\nconst VAR_MAP: Record<string, keyof AmbientTheme> = {\n  \"--amb-light-x\": \"lightX\",\n  \"--amb-light-y\": \"lightY\",\n  \"--amb-key-light-intensity\": \"keyLight\",\n  \"--amb-fill-light-intensity\": \"fillLight\",\n  \"--amb-light-hue\": \"lightHue\",\n  \"--amb-light-saturation\": \"lightSaturation\",\n  \"--amb-highlight-color\": \"highlightColor\",\n  \"--amb-lume-hue\": \"lumeHue\",\n};\n\nexport function AmbientProvider({ children, className, style, theme }: AmbientProviderProps) {\n  const themeVars: Record<string, string> = {};\n  for (const [varName, key] of Object.entries(VAR_MAP)) {\n    const value = theme?.[key];\n    if (value !== undefined) {\n      themeVars[varName] = key === \"lightSaturation\" ? `${value}%` : String(value);\n    }\n  }\n  // Derived variables must be re-declared here so they recompute using the\n  // overridden input variables on this element rather than inheriting the\n  // already-resolved values from :root.\n  themeVars[\"--amb-lume\"] = [\n    \"color-mix(in oklab,\",\n    \"hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (0.5 - var(--amb-key-light-intensity)) / 0.2, 1) * 100%),\",\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation)\",\n    \"calc((1 - sign(var(--amb-key-light-intensity) - 0.5)) * 50% + 25%)))\",\n  ].join(\" \");\n  themeVars[\"--amb-label\"] =\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))\";\n  const mergedStyle = { ...themeVars, ...style } as CSSProperties;\n\n  return (\n    <div className={className} style={mergedStyle}>\n      {children}\n    </div>\n  );\n}\n","export function cn(...values: Array<string | false | null | undefined>): string {\n  return values.filter(Boolean).join(\" \");\n}\n","import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;\n\nexport function AmbientPanel({ className, ...props }: AmbientPanelProps) {\n  return <div className={cn(\"ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel\", className)} {...props} />;\n}\n","import type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport function AmbientButton({ className, children, ...props }: AmbientButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\"ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3\", className)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n","import { useId, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: AmbientSwitchSize;\n  label?: string;\n  /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */\n  led?: boolean | string;\n};\n\nexport function AmbientSwitch({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = \"md\",\n  label,\n  led,\n  children,\n  ...props\n}: AmbientSwitchProps) {\n  const labelId = useId();\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const active = isControlled ? (checked ?? false) : internalChecked;\n\n  const button = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={active}\n      aria-labelledby={label ? labelId : props[\"aria-labelledby\"]}\n      className={cn(\n        \"ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3\",\n        active ? \"amb-surface-convex amb-switch-on\" : \"amb-surface-concave\",\n        \"ambx-switch\",\n        `ambx-switch-${size}`,\n        className\n      )}\n      onClick={(event) => {\n        const next = !active;\n        if (!isControlled) setInternalChecked(next);\n        onCheckedChange?.(next);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {led ? (\n        <span\n          className={cn(\"amb-led\", !active && \"amb-led-off\")}\n          style={typeof led === \"string\" ? { \"--amb-led-color\": led } as React.CSSProperties : undefined}\n        />\n      ) : null}\n      {children}\n    </button>\n  );\n\n  if (!label) return button;\n\n  return (\n    <div className=\"ambx-stack\">\n      {button}\n      <span id={labelId} className=\"ambx-label\">\n        {label}\n      </span>\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientKnob({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientKnobProps) {\n  const id = useId();\n  const draggingRef = useRef(false);\n  const knobRef = useRef<HTMLDivElement>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = (value - min) / (max - min || 1);\n  const rotation = percent * 270 - 135;\n\n  // Convert pointer position to a knob angle in [-180, 180] where 0 = up,\n  // positive = clockwise. The knob's active range is [-135, 135] (270°),\n  // with the dead zone at the bottom (~135° to ~225° i.e. past ±135°).\n  const pointerToValue = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = knobRef.current!.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    // atan2 with screen coords: 0=right, 90=down; add 90 to rotate so 0=up\n    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);\n    let angle = atan2Deg + 90;\n    // Normalize to [-180, 180]\n    if (angle > 180) angle -= 360;\n\n    // Clamp dead zone based on current value position\n    if (angle < -135 || angle > 135) {\n      angle = percent >= 0.5 ? 135 : -135;\n    }\n\n    const range = max - min;\n    const raw = min + ((angle + 135) / 270) * range;\n    const snapped = Math.round(raw / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        ref={knobRef}\n        className=\"ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob\"\n        role=\"slider\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-labelledby={label ? id : undefined}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          draggingRef.current = true;\n          pointerToValue(event);\n        }}\n        onPointerMove={(event) => {\n          if (draggingRef.current) pointerToValue(event);\n        }}\n        onPointerUp={() => {\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          draggingRef.current = false;\n        }}\n        onKeyDown={onKeyDown}\n      >\n        <div className=\"ambx-knob-rotation\" style={{ transform: `rotate(${rotation}deg)` }}>\n          <div className=\"amb-knob-indicator\">\n            <div className=\"amb-knob-grip\">\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientFader({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientFaderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientY = (clientY: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = 1 - (clientY - rect.top) / rect.height;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientY(event.clientY);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-fader ambx-fader\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientY(event.clientY);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className=\"amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb\"\n          style={{ top: `${100 - percent}%` }}\n        >\n          <div className=\"amb-fader-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientSlider({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  onChange,\n  className,\n  ...props\n}: AmbientSliderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientX = (clientX: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = (clientX - rect.left) / rect.width;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientX(event.clientX);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-slider ambx-slider\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientX(event.clientX);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className=\"amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb\"\n          style={{ left: `${percent}%` }}\n        >\n          <div className=\"amb-slider-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","useId","jsx","jsxs","useId","useId","useRef","jsx","jsxs","clamp","useId","useRef","useId","useRef","jsx","jsxs","clamp","useId","useRef"]}
+{"version":3,"sources":["../src/components/AmbientProvider.tsx","../src/lib/cn.ts","../src/components/AmbientPanel.tsx","../src/components/AmbientButton.tsx","../src/components/AmbientSwitch.tsx","../src/components/AmbientKnob.tsx","../src/components/AmbientFader.tsx","../src/components/AmbientSlider.tsx"],"sourcesContent":["import type { CSSProperties, PropsWithChildren } from \"react\";\n\nexport type AmbientTheme = {\n  lightX?: number;\n  lightY?: number;\n  keyLight?: number;\n  fillLight?: number;\n  lightHue?: number;\n  lightSaturation?: number;\n  highlightColor?: string;\n  lumeHue?: number;\n};\n\nexport type AmbientProviderProps = PropsWithChildren<{\n  className?: string;\n  style?: CSSProperties;\n  theme?: AmbientTheme;\n}>;\n\nconst VAR_MAP: Record<string, keyof AmbientTheme> = {\n  \"--amb-light-x\": \"lightX\",\n  \"--amb-light-y\": \"lightY\",\n  \"--amb-key-light-intensity\": \"keyLight\",\n  \"--amb-fill-light-intensity\": \"fillLight\",\n  \"--amb-light-hue\": \"lightHue\",\n  \"--amb-light-saturation\": \"lightSaturation\",\n  \"--amb-highlight-color\": \"highlightColor\",\n  \"--amb-lume-hue\": \"lumeHue\",\n};\n\nexport function AmbientProvider({ children, className, style, theme }: AmbientProviderProps) {\n  const themeVars: Record<string, string> = {};\n  for (const [varName, key] of Object.entries(VAR_MAP)) {\n    const value = theme?.[key];\n    if (value !== undefined) {\n      themeVars[varName] = key === \"lightSaturation\" ? `${value}%` : String(value);\n    }\n  }\n  // Derived variables must be re-declared here so they recompute using the\n  // overridden input variables on this element rather than inheriting the\n  // already-resolved values from :root.\n  themeVars[\"--amb-lume\"] = [\n    \"color-mix(in oklab,\",\n    \"hsl(var(--amb-lume-hue) 100% 74%) calc(clamp(0, (0.5 - var(--amb-key-light-intensity)) / 0.2, 1) * 100%),\",\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation)\",\n    \"calc((1 - sign(var(--amb-key-light-intensity) - 0.5)) * 50% + 25%)))\",\n  ].join(\" \");\n  themeVars[\"--amb-label\"] =\n    \"hsl(var(--amb-light-hue) var(--amb-light-saturation) calc((1 - var(--amb-key-light-intensity)) * 60% + 20%))\";\n  const mergedStyle = { ...themeVars, ...style } as CSSProperties;\n\n  return (\n    <div className={className} style={mergedStyle}>\n      {children}\n    </div>\n  );\n}\n","export function cn(...values: Array<string | false | null | undefined>): string {\n  return values.filter(Boolean).join(\" \");\n}\n","import type { HTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface AmbientPanelProps extends HTMLAttributes<HTMLDivElement> {\n  material?: \"matte\" | \"shiny\" | \"glass\";\n}\n\nexport function AmbientPanel({ className, material = \"matte\", ...props }: AmbientPanelProps) {\n  return (\n    <div\n      className={cn(\n        \"ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel\",\n        material === \"matte\" ? \"amb-mat-matte\" : material === \"shiny\" ? \"amb-mat-shiny\" : \"amb-mat-glass\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n","import type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface AmbientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  material?: \"matte\" | \"shiny\" | \"glass\";\n}\n\nexport function AmbientButton({ className, children, material = \"matte\", ...props }: AmbientButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3\",\n        material === \"matte\" ? \"amb-mat-matte\" : material === \"shiny\" ? \"amb-mat-shiny\" : \"amb-mat-glass\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n","import { useId, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSwitchSize = \"sm\" | \"md\" | \"lg\";\n\nexport type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: AmbientSwitchSize;\n  label?: string;\n  /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */\n  led?: boolean | string;\n};\n\nexport function AmbientSwitch({\n  className,\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  onClick,\n  size = \"md\",\n  label,\n  led,\n  children,\n  ...props\n}: AmbientSwitchProps) {\n  const labelId = useId();\n  const isControlled = checked !== undefined;\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const active = isControlled ? (checked ?? false) : internalChecked;\n\n  const button = (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={active}\n      aria-labelledby={label ? labelId : props[\"aria-labelledby\"]}\n      className={cn(\n        \"ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3\",\n        active ? \"amb-surface-convex amb-switch-on\" : \"amb-surface-concave\",\n        \"ambx-switch\",\n        `ambx-switch-${size}`,\n        className\n      )}\n      onClick={(event) => {\n        const next = !active;\n        if (!isControlled) setInternalChecked(next);\n        onCheckedChange?.(next);\n        onClick?.(event);\n      }}\n      {...props}\n    >\n      {led ? (\n        <span\n          className={cn(\"amb-led\", !active && \"amb-led-off\")}\n          style={typeof led === \"string\" ? { \"--amb-led-color\": led } as React.CSSProperties : undefined}\n        />\n      ) : null}\n      {children}\n    </button>\n  );\n\n  if (!label) return button;\n\n  return (\n    <div className=\"ambx-stack\">\n      {button}\n      <span id={labelId} className=\"ambx-label\">\n        {label}\n      </span>\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientKnob({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientKnobProps) {\n  const id = useId();\n  const draggingRef = useRef(false);\n  const knobRef = useRef<HTMLDivElement>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = (value - min) / (max - min || 1);\n  const rotation = percent * 270 - 135;\n\n  // Convert pointer position to a knob angle in [-180, 180] where 0 = up,\n  // positive = clockwise. The knob's active range is [-135, 135] (270°),\n  // with the dead zone at the bottom (~135° to ~225° i.e. past ±135°).\n  const pointerToValue = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = knobRef.current!.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    // atan2 with screen coords: 0=right, 90=down; add 90 to rotate so 0=up\n    const atan2Deg = Math.atan2(event.clientY - cy, event.clientX - cx) * (180 / Math.PI);\n    let angle = atan2Deg + 90;\n    // Normalize to [-180, 180]\n    if (angle > 180) angle -= 360;\n\n    // Clamp dead zone based on current value position\n    if (angle < -135 || angle > 135) {\n      angle = percent >= 0.5 ? 135 : -135;\n    }\n\n    const range = max - min;\n    const raw = min + ((angle + 135) / 270) * range;\n    const snapped = Math.round(raw / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        ref={knobRef}\n        className={cn(\"ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob\", material && `amb-mat-${material}`)}\n        role=\"slider\"\n        aria-label={label}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-labelledby={label ? id : undefined}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          draggingRef.current = true;\n          pointerToValue(event);\n        }}\n        onPointerMove={(event) => {\n          if (draggingRef.current) pointerToValue(event);\n        }}\n        onPointerUp={() => {\n          draggingRef.current = false;\n        }}\n        onPointerCancel={() => {\n          draggingRef.current = false;\n        }}\n        onKeyDown={onKeyDown}\n      >\n        <div className=\"ambx-knob-rotation\" style={{ transform: `rotate(${rotation}deg)` }}>\n          <div className=\"amb-knob-indicator\">\n            <div className=\"amb-knob-grip\">\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n              <span className=\"amb-fader-dot\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientFader({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientFaderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientY = (clientY: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = 1 - (clientY - rect.top) / rect.height;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientY(event.clientY);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-fader ambx-fader\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"vertical\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientY(event.clientY);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className={cn(\"amb-fader-thumb ambient amb-fillet amb-elevation-1 ambx-fader-thumb\", material !== \"glass\" && \"amb-surface-concave\", material && `amb-mat-${material}`)}\n          style={{ top: `${100 - percent}%` }}\n        >\n          <div className=\"amb-fader-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n","import { useId, useRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, PointerEvent } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  value: number;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  material?: \"matte\" | \"shiny\" | \"glass\";\n  onChange?: (nextValue: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function AmbientSlider({\n  value,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  material,\n  onChange,\n  className,\n  ...props\n}: AmbientSliderProps) {\n  const id = useId();\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const safeStep = step > 0 ? step : 1;\n\n  const percent = ((value - min) / (max - min || 1)) * 100;\n\n  const updateFromClientX = (clientX: number) => {\n    const track = trackRef.current;\n    if (!track) return;\n\n    const rect = track.getBoundingClientRect();\n    const ratio = (clientX - rect.left) / rect.width;\n    const nextValue = min + clamp(ratio, 0, 1) * (max - min);\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const setValue = (nextValue: number) => {\n    const snapped = Math.round(nextValue / safeStep) * safeStep;\n    onChange?.(clamp(snapped, min, max));\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const pageStep = safeStep * 10;\n    switch (event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        event.preventDefault();\n        setValue(value + safeStep);\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        event.preventDefault();\n        setValue(value - safeStep);\n        break;\n      case \"PageUp\":\n        event.preventDefault();\n        setValue(value + pageStep);\n        break;\n      case \"PageDown\":\n        event.preventDefault();\n        setValue(value - pageStep);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        setValue(min);\n        break;\n      case \"End\":\n        event.preventDefault();\n        setValue(max);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    if (event.buttons !== 1) return;\n    updateFromClientX(event.clientX);\n  };\n\n  return (\n    <div className={cn(\"ambx-stack\", className)} {...props}>\n      <div\n        className=\"amb-slider ambx-slider\"\n        ref={trackRef}\n        role=\"slider\"\n        aria-label={label}\n        aria-labelledby={label ? id : undefined}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-orientation=\"horizontal\"\n        tabIndex={0}\n        onPointerDown={(event) => {\n          event.currentTarget.setPointerCapture(event.pointerId);\n          updateFromClientX(event.clientX);\n        }}\n        onPointerMove={onPointerMove}\n        onKeyDown={onKeyDown}\n      >\n        <div\n          className={cn(\"amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb\", material !== \"glass\" && \"amb-surface-concave-h\", material && `amb-mat-${material}`)}\n          style={{ left: `${percent}%` }}\n        >\n          <div className=\"amb-slider-grip\">\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n            <span className=\"amb-fader-dot\" />\n          </div>\n        </div>\n      </div>\n      {label ? (\n        <span id={id} className=\"ambx-label\">\n          {label}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","useId","jsx","jsxs","useId","useId","useRef","jsx","jsxs","clamp","useId","useRef","useId","useRef","jsx","jsxs","clamp","useId","useRef"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ambientcss/components",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React skeuomorphic components powered by Ambient CSS",
   "license": "MIT",
   "repository": {
@@ -39,22 +39,22 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "tsup && cp src/styles.css dist/styles.css",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
-    "@ambientcss/css": "workspace:*"
+    "@ambientcss/css": "1.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "tsup": "^8.3.6",
     "typescript": "^5.8.2"
+  },
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/components/AmbientButton.tsx

@@ -1,13 +1,19 @@
 import type { ButtonHTMLAttributes } from "react";
 import { cn } from "../lib/cn";
 
-export type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export interface AmbientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  material?: "matte" | "shiny" | "glass";
+}
 
-export function AmbientButton({ className, children, ...props }: AmbientButtonProps) {
+export function AmbientButton({ className, children, material = "matte", ...props }: AmbientButtonProps) {
   return (
     <button
       type="button"
-      className={cn("ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3", className)}
+      className={cn(
+        "ambient amb-button amb-chamfer amb-elevation-1 ambx-button amb-heading-3",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      )}
       {...props}
     >
       {children}

package/src/components/AmbientFader.tsx

@@ -8,6 +8,7 @@ export type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange">
   max?: number;
   step?: number;
   label?: string;
+  material?: "matte" | "shiny" | "glass";
   onChange?: (nextValue: number) => void;
 };
 
@@ -21,6 +22,7 @@ export function AmbientFader({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -107,7 +109,7 @@ export function AmbientFader({
         onKeyDown={onKeyDown}
       >
         <div
-          className="amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb"
+          className={cn("amb-fader-thumb ambient amb-fillet amb-elevation-1 ambx-fader-thumb", material !== "glass" && "amb-surface-concave", material && `amb-mat-${material}`)}
           style={{ top: `${100 - percent}%` }}
         >
           <div className="amb-fader-grip">

package/src/components/AmbientKnob.tsx

@@ -8,6 +8,7 @@ export type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange">
   max?: number;
   step?: number;
   label?: string;
+  material?: "matte" | "shiny" | "glass";
   onChange?: (nextValue: number) => void;
 };
 
@@ -21,6 +22,7 @@ export function AmbientKnob({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -100,7 +102,7 @@ export function AmbientKnob({
     <div className={cn("ambx-stack", className)} {...props}>
       <div
         ref={knobRef}
-        className="ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob"
+        className={cn("ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob", material && `amb-mat-${material}`)}
         role="slider"
         aria-label={label}
         aria-valuemin={min}

package/src/components/AmbientPanel.tsx

@@ -1,8 +1,19 @@
 import type { HTMLAttributes } from "react";
 import { cn } from "../lib/cn";
 
-export type AmbientPanelProps = HTMLAttributes<HTMLDivElement>;
+export interface AmbientPanelProps extends HTMLAttributes<HTMLDivElement> {
+  material?: "matte" | "shiny" | "glass";
+}
 
-export function AmbientPanel({ className, ...props }: AmbientPanelProps) {
-  return <div className={cn("ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel", className)} {...props} />;
+export function AmbientPanel({ className, material = "matte", ...props }: AmbientPanelProps) {
+  return (
+    <div
+      className={cn(
+        "ambient amb-surface amb-chamfer amb-elevation-2 ambx-panel",
+        material === "matte" ? "amb-mat-matte" : material === "shiny" ? "amb-mat-shiny" : "amb-mat-glass",
+        className
+      )}
+      {...props}
+    />
+  );
 }

package/src/components/AmbientSlider.tsx

@@ -8,6 +8,7 @@ export type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"
   max?: number;
   step?: number;
   label?: string;
+  material?: "matte" | "shiny" | "glass";
   onChange?: (nextValue: number) => void;
 };
 
@@ -21,6 +22,7 @@ export function AmbientSlider({
   max = 100,
   step = 1,
   label,
+  material,
   onChange,
   className,
   ...props
@@ -107,7 +109,7 @@ export function AmbientSlider({
         onKeyDown={onKeyDown}
       >
         <div
-          className="amb-slider-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave-h ambx-slider-thumb"
+          className={cn("amb-slider-thumb ambient amb-fillet amb-elevation-1 ambx-slider-thumb", material !== "glass" && "amb-surface-concave-h", material && `amb-mat-${material}`)}
           style={{ left: `${percent}%` }}
         >
           <div className="amb-slider-grip">