@ambientcss/components 1.0.0

package/README.md

@@ -0,0 +1,27 @@
+# @ambientcss/components
+
+React components built with Ambient CSS.
+
+## Install
+
+```bash
+pnpm add @ambientcss/components @ambientcss/css
+```
+
+## Usage
+
+```tsx
+import "@ambientcss/css/ambient.css";
+import "@ambientcss/components/styles.css";
+
+import { AmbientButton, AmbientKnob, AmbientProvider } from "@ambientcss/components";
+
+export function Example() {
+  return (
+    <AmbientProvider theme={{ keyLight: 0.45, fillLight: 0.18, lightX: -1, lightY: -1 }}>
+      <AmbientButton>Play</AmbientButton>
+      <AmbientKnob value={40} onChange={(next) => console.log(next)} />
+    </AmbientProvider>
+  );
+}
+```

package/dist/index.cjs

@@ -0,0 +1,470 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AmbientButton: () => AmbientButton,
+  AmbientFader: () => AmbientFader,
+  AmbientKnob: () => AmbientKnob,
+  AmbientPanel: () => AmbientPanel,
+  AmbientProvider: () => AmbientProvider,
+  AmbientSlider: () => AmbientSlider,
+  AmbientSwitch: () => AmbientSwitch
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/AmbientProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var VAR_MAP = {
+  "--amb-light-x": "lightX",
+  "--amb-light-y": "lightY",
+  "--amb-key-light-intensity": "keyLight",
+  "--amb-fill-light-intensity": "fillLight",
+  "--amb-light-hue": "lightHue",
+  "--amb-light-saturation": "lightSaturation",
+  "--amb-highlight-color": "highlightColor",
+  "--amb-lume-hue": "lumeHue"
+};
+function AmbientProvider({ children, className, style, theme }) {
+  const themeVars = {};
+  for (const [varName, key] of Object.entries(VAR_MAP)) {
+    const value = theme?.[key];
+    if (value !== void 0) {
+      themeVars[varName] = key === "lightSaturation" ? `${value}%` : String(value);
+    }
+  }
+  const mergedStyle = { ...themeVars, ...style };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: mergedStyle, children });
+}
+
+// src/lib/cn.ts
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+
+// 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 });
+}
+
+// src/components/AmbientButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AmbientButton({ className, children, ...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),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/AmbientSwitch.tsx
+var import_react = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AmbientSwitch({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  onClick,
+  size = "md",
+  label,
+  led,
+  children,
+  ...props
+}) {
+  const labelId = (0, import_react.useId)();
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = (0, import_react.useState)(defaultChecked ?? false);
+  const active = isControlled ? checked ?? false : internalChecked;
+  const button = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": active,
+      "aria-labelledby": label ? labelId : props["aria-labelledby"],
+      className: cn(
+        "ambient amb-switch amb-chamfer amb-elevation-1 amb-heading-3",
+        active ? "amb-surface-convex amb-switch-on" : "amb-surface-concave",
+        "ambx-switch",
+        `ambx-switch-${size}`,
+        className
+      ),
+      onClick: (event) => {
+        const next = !active;
+        if (!isControlled) setInternalChecked(next);
+        onCheckedChange?.(next);
+        onClick?.(event);
+      },
+      ...props,
+      children: [
+        led ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: cn("amb-led", !active && "amb-led-off"),
+            style: typeof led === "string" ? { "--amb-led-color": led } : void 0
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+  if (!label) return button;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "ambx-stack", children: [
+    button,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: labelId, className: "ambx-label", children: label })
+  ] });
+}
+
+// src/components/AmbientKnob.tsx
+var import_react2 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function AmbientKnob({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}) {
+  const id = (0, import_react2.useId)();
+  const dragStateRef = (0, import_react2.useRef)(null);
+  const safeStep = step > 0 ? step : 1;
+  const percent = (value - min) / (max - min || 1);
+  const rotation = percent * 270 - 135;
+  const updateFromPointer = (event) => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    const delta = drag.startY - event.clientY;
+    const range = max - min;
+    const sensitivity = range / 180;
+    const raw = drag.startValue + delta * sensitivity;
+    const snapped = Math.round(raw / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+  const setValue = (nextValue) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp(snapped, min, max));
+  };
+  const onKeyDown = (event) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("ambx-stack", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "ambient amb-knob amb-chamfer amb-elevation-2 amb-surface ambx-knob",
+        role: "slider",
+        "aria-label": label,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-labelledby": label ? id : void 0,
+        "aria-orientation": "vertical",
+        tabIndex: 0,
+        onPointerDown: (event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          dragStateRef.current = { startY: event.clientY, startValue: value };
+        },
+        onPointerMove: updateFromPointer,
+        onPointerUp: () => {
+          dragStateRef.current = null;
+        },
+        onPointerCancel: () => {
+          dragStateRef.current = null;
+        },
+        onKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "ambx-knob-rotation", style: { transform: `rotate(${rotation}deg)` }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "amb-knob-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "amb-knob-grip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "amb-fader-dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "amb-fader-dot" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "amb-fader-dot" })
+        ] }) }) })
+      }
+    ),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id, className: "ambx-label", children: label }) : null
+  ] });
+}
+
+// src/components/AmbientFader.tsx
+var import_react3 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function clamp2(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function AmbientFader({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}) {
+  const id = (0, import_react3.useId)();
+  const trackRef = (0, import_react3.useRef)(null);
+  const safeStep = step > 0 ? step : 1;
+  const percent = (value - min) / (max - min || 1) * 100;
+  const updateFromClientY = (clientY) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const ratio = 1 - (clientY - rect.top) / rect.height;
+    const nextValue = min + clamp2(ratio, 0, 1) * (max - min);
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp2(snapped, min, max));
+  };
+  const setValue = (nextValue) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp2(snapped, min, max));
+  };
+  const onKeyDown = (event) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+  const onPointerMove = (event) => {
+    if (event.buttons !== 1) return;
+    updateFromClientY(event.clientY);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("ambx-stack", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "div",
+      {
+        className: "amb-fader ambx-fader",
+        ref: trackRef,
+        role: "slider",
+        "aria-label": label,
+        "aria-labelledby": label ? id : void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-orientation": "vertical",
+        tabIndex: 0,
+        onPointerDown: (event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromClientY(event.clientY);
+        },
+        onPointerMove,
+        onKeyDown,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            className: "amb-fader-thumb ambient amb-fillet amb-elevation-1 amb-surface-concave ambx-fader-thumb",
+            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" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "amb-fader-dot" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "amb-fader-dot" })
+            ] })
+          }
+        )
+      }
+    ),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id, className: "ambx-label", children: label }) : null
+  ] });
+}
+
+// src/components/AmbientSlider.tsx
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function clamp3(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function AmbientSlider({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  onChange,
+  className,
+  ...props
+}) {
+  const id = (0, import_react4.useId)();
+  const trackRef = (0, import_react4.useRef)(null);
+  const safeStep = step > 0 ? step : 1;
+  const percent = (value - min) / (max - min || 1) * 100;
+  const updateFromClientX = (clientX) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    const nextValue = min + clamp3(ratio, 0, 1) * (max - min);
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp3(snapped, min, max));
+  };
+  const setValue = (nextValue) => {
+    const snapped = Math.round(nextValue / safeStep) * safeStep;
+    onChange?.(clamp3(snapped, min, max));
+  };
+  const onKeyDown = (event) => {
+    const pageStep = safeStep * 10;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        event.preventDefault();
+        setValue(value + safeStep);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        event.preventDefault();
+        setValue(value - safeStep);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        setValue(value + pageStep);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        setValue(value - pageStep);
+        break;
+      case "Home":
+        event.preventDefault();
+        setValue(min);
+        break;
+      case "End":
+        event.preventDefault();
+        setValue(max);
+        break;
+      default:
+        break;
+    }
+  };
+  const onPointerMove = (event) => {
+    if (event.buttons !== 1) return;
+    updateFromClientX(event.clientX);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("ambx-stack", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        className: "amb-slider ambx-slider",
+        ref: trackRef,
+        role: "slider",
+        "aria-label": label,
+        "aria-labelledby": label ? id : void 0,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-orientation": "horizontal",
+        tabIndex: 0,
+        onPointerDown: (event) => {
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromClientX(event.clientX);
+        },
+        onPointerMove,
+        onKeyDown,
+        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",
+            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" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "amb-fader-dot" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "amb-fader-dot" })
+            ] })
+          }
+        )
+      }
+    ),
+    label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id, className: "ambx-label", children: label }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AmbientButton,
+  AmbientFader,
+  AmbientKnob,
+  AmbientPanel,
+  AmbientProvider,
+  AmbientSlider,
+  AmbientSwitch
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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  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 dragStateRef = useRef<{ startY: number; startValue: number } | null>(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  const updateFromPointer = (event: PointerEvent<HTMLDivElement>) => {\n    const drag = dragStateRef.current;\n    if (!drag) return;\n\n    const delta = drag.startY - event.clientY;\n    const range = max - min;\n    const sensitivity = range / 180;\n    const raw = drag.startValue + delta * sensitivity;\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        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          dragStateRef.current = { startY: event.clientY, startValue: value };\n        }}\n        onPointerMove={updateFromPointer}\n        onPointerUp={() => {\n          dragStateRef.current = null;\n        }}\n        onPointerCancel={() => {\n          dragStateRef.current = null;\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"]}

package/dist/index.d.cts

@@ -0,0 +1,69 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren, CSSProperties, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+type AmbientTheme = {
+    lightX?: number;
+    lightY?: number;
+    keyLight?: number;
+    fillLight?: number;
+    lightHue?: number;
+    lightSaturation?: number;
+    highlightColor?: string;
+    lumeHue?: number;
+};
+type AmbientProviderProps = PropsWithChildren<{
+    className?: string;
+    style?: CSSProperties;
+    theme?: AmbientTheme;
+}>;
+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;
+
+type AmbientButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare function AmbientButton({ className, children, ...props }: AmbientButtonProps): react_jsx_runtime.JSX.Element;
+
+type AmbientSwitchSize = "sm" | "md" | "lg";
+type AmbientSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: AmbientSwitchSize;
+    label?: string;
+    /** Show a small LED indicator that lights up when the switch is on. Pass `true` for default green or a CSS color string. */
+    led?: boolean | string;
+};
+declare function AmbientSwitch({ className, checked, defaultChecked, onCheckedChange, onClick, size, label, led, children, ...props }: AmbientSwitchProps): react_jsx_runtime.JSX.Element;
+
+type AmbientKnobProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    onChange?: (nextValue: number) => void;
+};
+declare function AmbientKnob({ value, min, max, step, label, onChange, className, ...props }: AmbientKnobProps): react_jsx_runtime.JSX.Element;
+
+type AmbientFaderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    onChange?: (nextValue: number) => void;
+};
+declare function AmbientFader({ value, min, max, step, label, onChange, className, ...props }: AmbientFaderProps): react_jsx_runtime.JSX.Element;
+
+type AmbientSliderProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    onChange?: (nextValue: number) => void;
+};
+declare function AmbientSlider({ value, min, max, step, label, 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 };