@ambientcss/components 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +7 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +7 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +58 -18
- package/package.json +10 -4
- package/src/controls/AmbientBank.tsx +1 -0
- package/src/core/useBank.ts +3 -1
- package/src/parts/console.tsx +7 -5
- package/src/styles.css +58 -18
package/dist/index.cjs
CHANGED
|
@@ -977,7 +977,9 @@ function useBank(options) {
|
|
|
977
977
|
const keyProps = (option, index) => {
|
|
978
978
|
const on = selected.includes(option.value);
|
|
979
979
|
return {
|
|
980
|
-
key:
|
|
980
|
+
/* No `key` here on purpose: the caller maps the options, so it owns
|
|
981
|
+
the list key. Spreading one into JSX makes React warn and drops
|
|
982
|
+
the key on release builds. */
|
|
981
983
|
type: "button",
|
|
982
984
|
ref: (node) => {
|
|
983
985
|
keyRefs.current[index] = node;
|
|
@@ -1076,7 +1078,8 @@ function AmbientBank({
|
|
|
1076
1078
|
...option.color ? { "--amb-led-color": option.color } : null
|
|
1077
1079
|
},
|
|
1078
1080
|
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ControlStateProvider, { value: ks, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BankKeyProvider, { value: { option, on, index }, children: renderKey ? renderKey(option, on) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Frames, { parts: keyParts }) }) })
|
|
1079
|
-
}
|
|
1081
|
+
},
|
|
1082
|
+
option.value
|
|
1080
1083
|
);
|
|
1081
1084
|
})
|
|
1082
1085
|
]
|
|
@@ -1640,7 +1643,7 @@ function ConsoleMarks({
|
|
|
1640
1643
|
className
|
|
1641
1644
|
}) {
|
|
1642
1645
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: cn("amb-console-marks", className), "aria-hidden": true, children: [
|
|
1643
|
-
mark ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "amb-console-mark" }) : null,
|
|
1646
|
+
mark ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "amb-console-mark amb-surface" }) : null,
|
|
1644
1647
|
legend ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
1645
1648
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "amb-console-legend amb-console-legend-min", children: "\u2212" }),
|
|
1646
1649
|
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "amb-console-legend amb-console-legend-max", children: "+" })
|
|
@@ -1651,7 +1654,7 @@ function ToggleTrack({ className }) {
|
|
|
1651
1654
|
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("amb-console-track amb-groove", className) });
|
|
1652
1655
|
}
|
|
1653
1656
|
function ToggleThumb({ className }) {
|
|
1654
|
-
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("amb-console-thumb ambient amb-thickness-2", className) });
|
|
1657
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("amb-console-thumb ambient amb-surface amb-thickness-2", className) });
|
|
1655
1658
|
}
|
|
1656
1659
|
|
|
1657
1660
|
// src/kits/console.tsx
|