highsoft-ui 1.0.135 → 1.0.137

package/CLAUDE.md

@@ -248,6 +248,27 @@ Pill-shaped inline code display with integrated copy button and success state.
 - **`children`:** `string` — the code text to display and copy
 - **`duration`:** ms for success state (default: 2000)
 
+### CodeBlock
+Code viewer with syntax colors, a line-number gutter, diff lines and a copy button — all from plain `code`, no setup.
+```tsx
+<CodeBlock lang="ts" code={source} />
+
+// Added / removed lines — mark them with [!code ++] / [!code --]:
+<CodeBlock lang="ts" code={`const a = 1   // [!code --]
+const a = 2   // [!code ++]`} />
+
+// Bring your own highlighter (Shiki etc.) for a custom theme / SSR:
+<CodeBlock lang="ts" code={source} html={preHighlightedHtml} />
+```
+- **`code`:** raw code (required). Lines ending with `// [!code ++]` / `// [!code --]` render as added (green) / removed (red); copy returns the resulting code with markers stripped and removed lines dropped.
+- **`html`:** pre-highlighted HTML (e.g. Shiki) — overrides the built-in Prism highlighter; use for an exact theme or SSR.
+- **`lang`:** `bash`, `js`, `ts`, `json`, `python`, `html`, `css`, `text`, … — drives the header icon/badge and the highlighter grammar.
+- **`showLines`:** line-number gutter (default `true`).
+- **`syntax`:** built-in Prism highlighting (default `true`); set `false` for plain, uncolored code.
+- **`diff`:** parse `[!code ++]` / `[!code --]` markers (default `true`); set `false` to show code that literally contains those tokens.
+- **`copyLabel`:** copy button label (default `'Copy code'`).
+- Colors come from `--code-block-*` design tokens (light/dark automatic). Code renders in IBM Plex Mono — load `@fontsource/ibm-plex-mono` (or it falls back to the system monospace).
+
 ### Layout
 ```tsx
 <Header />

package/dist/{Button-K3WlRB7Q.js → Button-Dc8NFRWQ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { C as t } from "./esm-Co_Guu6S.js";
+import { C as t } from "./esm-CDDjSK4f.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {
@@ -59,5 +59,6 @@ var a = {
 		})]
 	});
 });
+o.displayName = "Button";
 //#endregion
 export { o as t };

package/dist/{ButtonGroup-Di8R8XMS.js → ButtonGroup-CYmrw7gQ.js}

@@ -1,8 +1,9 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { t } from "./Button-K3WlRB7Q.js";
+import { t } from "./Button-Dc8NFRWQ.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 var a = {
+	alt: "qkD_Ga_alt",
 	buttonGroup: "qkD_Ga_buttonGroup",
 	full: "qkD_Ga_full",
 	item: "qkD_Ga_item",
@@ -16,25 +17,29 @@ var a = {
 };
 //#endregion
 //#region lib/components/ButtonGroup/index.tsx
-function o({ items: o, value: s, defaultValue: c, onChange: l, size: u = 200, fullWidth: d = !1, className: f, ...p }) {
-	let m = o.find((e) => !e.disabled)?.value, [h, g] = r(c ?? m);
+function o({ items: o, value: s, defaultValue: c, onChange: l, size: u = 200, variant: d = "default", fullWidth: f = !1, className: p, ...m }) {
+	let h = o.find((e) => !e.disabled)?.value, [g, _] = r(c ?? h);
 	n(() => {
-		s === void 0 && (o.some((e) => e.value === h && !e.disabled) || g(m));
+		s === void 0 && (o.some((e) => e.value === g && !e.disabled) || _(h));
 	}, [
-		m,
 		h,
+		g,
 		o,
 		s
 	]);
-	let _ = s ?? h, v = (e, t) => {
-		t.buttonProps?.onClick?.(e), !(e.defaultPrevented || t.disabled) && (s === void 0 && g(t.value), t.value !== _ && l?.(t.value, t));
+	let v = s ?? g, y = (e, t) => {
+		t.buttonProps?.onClick?.(e), !(e.defaultPrevented || t.disabled) && (s === void 0 && _(t.value), t.value !== v && l?.(t.value, t));
 	};
 	return /* @__PURE__ */ i("div", {
-		className: e("hsui-button-group", a.buttonGroup, a[`size-${u}`], { [a.full]: d }, f),
+		className: e("hsui-button-group", a.buttonGroup, a[`size-${u}`], {
+			[a.full]: f,
+			[a.alt]: d === "alt",
+			"hsui-button-group--alt": d === "alt"
+		}, p),
 		role: "group",
-		...p,
+		...m,
 		children: o.map((n) => {
-			let r = n.value === _;
+			let r = n.value === v;
 			return /* @__PURE__ */ i(t, {
 				...n.buttonProps,
 				className: e(a.item, n.buttonProps?.className, { [a.itemSelected]: r }),
@@ -43,7 +48,7 @@ function o({ items: o, value: s, defaultValue: c, onChange: l, size: u = 200, fu
 				iconLeft: n.iconLeft,
 				disabled: n.disabled,
 				"aria-pressed": r,
-				onClick: (e) => v(e, n),
+				onClick: (e) => y(e, n),
 				children: n.label
 			}, n.value);
 		})

package/dist/{Checkbox-Yg8sUFcu.js → Checkbox-CErz7eBz.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clsx-BWCAbrjV.js";
-import { S as t } from "./esm-Co_Guu6S.js";
+import { S as t } from "./esm-CDDjSK4f.js";
 import { createContext as n, useCallback as r, useContext as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 var d = {