@ambientcss/components 3.0.0 → 3.0.1

package/dist/index.d.cts

@@ -387,7 +387,6 @@ declare function useBank(options: UseBankOptions): {
         "data-disabled": string | undefined;
     };
     keyProps: (option: BankOption, index: number) => {
-        key: string;
         type: "button";
         ref: (node: HTMLButtonElement | null) => void;
         role: "checkbox" | "radio";
@@ -612,7 +611,7 @@ declare function ConsoleWell({ className }: {
 declare function ConsoleBar({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
-/** Panel graphics around the knob: the accent centre mark above it, and the
+/** Panel graphics around the knob: the centre mark above it, and the
  *  −/+ legends at the ends of the travel. Both sit outside the knob's own
  *  box, which is what the `panel` frame is for. */
 declare function ConsoleMarks({ mark, legend, className }: {
@@ -629,13 +628,15 @@ declare function ConsoleMarks({ mark, legend, className }: {
 declare function ToggleTrack({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
-/** The travelling thumb: an accent disc inside a white ring.
+/** The travelling thumb: an albedo disc inside a light ring.
  *
  *  Flat on top and deliberately so — no chamfer, no fillet — but still a
  *  knob-scale body, so it casts. That pairing is why the classes are spelt
  *  out rather than reached through `.amb-fillet-2`: the edge treatments set
  *  a thickness of their own, and here the thickness is wanted without the
- *  cut that usually comes with it. */
+ *  cut that usually comes with it. It wears `amb-surface`, so its colour IS
+ *  the scene's albedo under the current light rather than a fixed paint —
+ *  it re-shades when the lamp moves or the intensities change. */
 declare function ToggleThumb({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -387,7 +387,6 @@ declare function useBank(options: UseBankOptions): {
         "data-disabled": string | undefined;
     };
     keyProps: (option: BankOption, index: number) => {
-        key: string;
         type: "button";
         ref: (node: HTMLButtonElement | null) => void;
         role: "checkbox" | "radio";
@@ -612,7 +611,7 @@ declare function ConsoleWell({ className }: {
 declare function ConsoleBar({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
-/** Panel graphics around the knob: the accent centre mark above it, and the
+/** Panel graphics around the knob: the centre mark above it, and the
  *  −/+ legends at the ends of the travel. Both sit outside the knob's own
  *  box, which is what the `panel` frame is for. */
 declare function ConsoleMarks({ mark, legend, className }: {
@@ -629,13 +628,15 @@ declare function ConsoleMarks({ mark, legend, className }: {
 declare function ToggleTrack({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
-/** The travelling thumb: an accent disc inside a white ring.
+/** The travelling thumb: an albedo disc inside a light ring.
  *
  *  Flat on top and deliberately so — no chamfer, no fillet — but still a
  *  knob-scale body, so it casts. That pairing is why the classes are spelt
  *  out rather than reached through `.amb-fillet-2`: the edge treatments set
  *  a thickness of their own, and here the thickness is wanted without the
- *  cut that usually comes with it. */
+ *  cut that usually comes with it. It wears `amb-surface`, so its colour IS
+ *  the scene's albedo under the current light rather than a fixed paint —
+ *  it re-shades when the lamp moves or the intensities change. */
 declare function ToggleThumb({ className }: {
     className?: string | undefined;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -905,7 +905,9 @@ function useBank(options) {
   const keyProps = (option, index) => {
     const on = selected.includes(option.value);
     return {
-      key: option.value,
+      /* No `key` here on purpose: the caller maps the options, so it owns
+         the list key. Spreading one into JSX makes React warn and drops
+         the key on release builds. */
       type: "button",
       ref: (node) => {
         keyRefs.current[index] = node;
@@ -1004,7 +1006,8 @@ function AmbientBank({
                 ...option.color ? { "--amb-led-color": option.color } : null
               },
               children: /* @__PURE__ */ jsx16(ControlStateProvider, { value: ks, children: /* @__PURE__ */ jsx16(BankKeyProvider, { value: { option, on, index }, children: renderKey ? renderKey(option, on) : /* @__PURE__ */ jsx16(Frames, { parts: keyParts }) }) })
-            }
+            },
+            option.value
           );
         })
       ]
@@ -1568,7 +1571,7 @@ function ConsoleMarks({
   className
 }) {
   return /* @__PURE__ */ jsxs10("span", { className: cn("amb-console-marks", className), "aria-hidden": true, children: [
-    mark ? /* @__PURE__ */ jsx23("span", { className: "amb-console-mark" }) : null,
+    mark ? /* @__PURE__ */ jsx23("span", { className: "amb-console-mark amb-surface" }) : null,
     legend ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
       /* @__PURE__ */ jsx23("span", { className: "amb-console-legend amb-console-legend-min", children: "\u2212" }),
       /* @__PURE__ */ jsx23("span", { className: "amb-console-legend amb-console-legend-max", children: "+" })
@@ -1579,7 +1582,7 @@ function ToggleTrack({ className }) {
   return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-track amb-groove", className) });
 }
 function ToggleThumb({ className }) {
-  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-thumb ambient amb-thickness-2", className) });
+  return /* @__PURE__ */ jsx23("span", { className: cn("amb-console-thumb ambient amb-surface amb-thickness-2", className) });
 }
 
 // src/kits/console.tsx