highsoft-ui 1.0.136 → 1.0.138

package/dist/lib/components/CodeBlock/index.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Raw code text, also used by the copy button. Lines ending with a
+     * `// [!code ++]` or `// [!code --]` marker render as added (green) / removed
+     * (red). The copy button copies the resulting code (markers stripped, removed
+     * lines dropped).
+     */
+    code: string;
+    /**
+     * Pre-highlighted HTML (e.g. from Shiki). Takes precedence over the built-in
+     * highlighter — use it for SSR or custom themes. Rendered as-is.
+     */
+    html?: string;
+    /** Language key — drives the header icon/badge/label and the highlighter grammar. */
+    lang?: string;
+    /** Show line numbers in a left gutter (default: `true`). */
+    showLines?: boolean;
+    /** Syntax-highlight the code with the built-in Prism highlighter (default: `true`). */
+    syntax?: boolean;
+    /**
+     * Parse `[!code ++]` / `[!code --]` diff markers in `code` (default: `true`).
+     * Set `false` to render code that literally contains those tokens.
+     */
+    diff?: boolean;
+    /** Soft-wrap long lines (default: `true`). Set `false` for horizontal scrolling. */
+    wrap?: boolean;
+    /** Accessible label for the copy button (default: `'Copy code'`). */
+    copyLabel?: string;
+}
+/**
+ * Code viewer — gray outer frame, white inner card, a language badge/icon and an
+ * integrated copy button. Syntax colors, line numbers and diff lines all work
+ * out of the box from plain `code`; all colors come from `--HS-*` / token-driven
+ * CSS vars, so light/dark mode is automatic.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock lang="ts" code={src} />
+ *
+ * <CodeBlock
+ *   lang="ts"
+ *   code={`const a = 1   // [!code --]
+ * const a = 2   // [!code ++]`}
+ * />
+ * ```
+ */
+export declare const CodeBlock: import('react').ForwardRefExoticComponent<CodeBlockProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/lib/main.d.ts

@@ -16,6 +16,8 @@ export type { HeaderProps, HeaderPosition, SubHeaderItem } from './components/He
 export { Box } from './components/Box';
 export { CopyCode } from './components/CopyCode';
 export type { CopyCodeProps } from './components/CopyCode';
+export { CodeBlock } from './components/CodeBlock';
+export type { CodeBlockProps } from './components/CodeBlock';
 export { Icon } from './components/Icon';
 export { Link } from './components/Link';
 export { ProductIcon } from './components/ProductIcon';

package/dist/main.js

@@ -1,32 +1,33 @@
 import { c as e, d as t, r as n, s as r, u as i } from "./utils-K9S_6_Eq.js";
 import { t as a } from "./Box-BZgeSeCV.js";
-import { t as o } from "./Button-CTdphXmG.js";
-import { t as s } from "./CopyCode-DS-3fQBn.js";
-import { t as c } from "./Icon-VeXJMj8Q.js";
-import { t as l } from "./Link-CYR92_U0.js";
-import { t as u } from "./ProductIcon-DFLAYWbu.js";
-import { t as d } from "./FrameworkIcon-Ds6WrxO0.js";
-import { t as f } from "./ButtonGroup-D5_sI3QL.js";
-import { t as p } from "./InputSolo-2RPRX0wM.js";
-import { i as m, n as h, r as g, t as _ } from "./InputGrouped-RLCBTqtp.js";
-import { t as v } from "./Container-BDssaLig.js";
-import { t as y } from "./DiscordInvite-CLYxexdH.js";
-import { t as b } from "./Heading-DNDHqYWO.js";
-import { t as x } from "./Typography-AvvBRu-u.js";
-import { t as S } from "./Logo-DTfFHBgU.js";
-import { t as C } from "./NewsletterSignup-BawMuwkc.js";
-import { n as w, r as T, t as E } from "./Dropdown-CgbtoeLA.js";
-import { t as D } from "./PrefPanel-0iwUb8OU.js";
-import { n as O, t as k } from "./Label-gTAMwE0j.js";
-import { t as A } from "./Footer-DSJzETEs.js";
-import { n as j } from "./GPTInput-C0YG1990.js";
-import { t as M } from "./Notification-icY33paf.js";
-import { n as N, t as P } from "./Header-4bkW4MNM.js";
-import { t as F } from "./Tabs-BuDaPqdN.js";
-import { n as I, t as L } from "./RadioBox-o1Ssyj0s.js";
-import { n as R, t as z } from "./Checkbox-Yg8sUFcu.js";
-import { Modal as B } from "./components/Modal/index.js";
-import { t as V } from "./RoadmapDetails-BPt5Ava0.js";
-import { ModalContactFooter as H } from "./components/Modal/ModalContactFooter.js";
-import { ThemeLoader as U, themeLoaderScript as W } from "./components/ThemeLoader/index.js";
-export { a as Box, o as Button, f as ButtonGroup, z as Checkbox, R as CheckboxGroup, v as Container, s as CopyCode, y as DiscordInvite, E as Dropdown, w as DropdownItem, T as DropdownSeparator, A as Footer, _ as FormGroup, h as FormRow, d as FrameworkIcon, j as GPTInput, P as Header, b as Heading, c as Icon, g as InputGrouped, p as InputSolo, k as Label, l as Link, S as Logo, B as Modal, H as ModalContactFooter, O as NewTag, C as NewsletterSignup, M as Notification, D as PrefPanel, u as ProductIcon, L as RadioBox, I as RadioBoxGroup, V as RoadmapDetails, m as SelectGrouped, N as SubHeader, F as Tabs, U as ThemeLoader, i as ThemeProvider, x as Typography, W as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };
+import { t as o } from "./Button-Dc8NFRWQ.js";
+import { t as s } from "./CopyCode-DH9Jh7PD.js";
+import { t as c } from "./CodeBlock-DtYddgyU.js";
+import { t as l } from "./FrameworkIcon-Ds6WrxO0.js";
+import { t as u } from "./Icon-VeXJMj8Q.js";
+import { t as d } from "./Link-CYR92_U0.js";
+import { t as f } from "./ProductIcon-DFLAYWbu.js";
+import { t as p } from "./ButtonGroup-CYmrw7gQ.js";
+import { t as m } from "./InputSolo-2RPRX0wM.js";
+import { i as h, n as g, r as _, t as v } from "./InputGrouped-CIokpRn5.js";
+import { t as y } from "./Container-BDssaLig.js";
+import { t as b } from "./DiscordInvite-CLYxexdH.js";
+import { t as x } from "./Heading-DNDHqYWO.js";
+import { t as S } from "./Typography-AvvBRu-u.js";
+import { t as C } from "./Logo-DTfFHBgU.js";
+import { t as w } from "./NewsletterSignup-Dw9YbhEh.js";
+import { n as T, r as E, t as D } from "./Dropdown-DbXr3sb-.js";
+import { t as O } from "./PrefPanel-BG4jW8wc.js";
+import { n as k, t as A } from "./Label-BM4vL0vA.js";
+import { t as j } from "./Footer-CcrBEAxZ.js";
+import { n as M } from "./GPTInput-C0YG1990.js";
+import { t as N } from "./Notification-BgmhEw6w.js";
+import { n as P, t as F } from "./Header-Ga_hYsOa.js";
+import { t as I } from "./Tabs-BuDaPqdN.js";
+import { n as L, t as R } from "./RadioBox-o1Ssyj0s.js";
+import { n as z, t as B } from "./Checkbox-CErz7eBz.js";
+import { Modal as V } from "./components/Modal/index.js";
+import { t as H } from "./RoadmapDetails-DXxJNZh9.js";
+import { ModalContactFooter as U } from "./components/Modal/ModalContactFooter.js";
+import { ThemeLoader as W, themeLoaderScript as G } from "./components/ThemeLoader/index.js";
+export { a as Box, o as Button, p as ButtonGroup, B as Checkbox, z as CheckboxGroup, c as CodeBlock, y as Container, s as CopyCode, b as DiscordInvite, D as Dropdown, T as DropdownItem, E as DropdownSeparator, j as Footer, v as FormGroup, g as FormRow, l as FrameworkIcon, M as GPTInput, F as Header, x as Heading, u as Icon, _ as InputGrouped, m as InputSolo, A as Label, d as Link, C as Logo, V as Modal, U as ModalContactFooter, k as NewTag, w as NewsletterSignup, N as Notification, O as PrefPanel, f as ProductIcon, R as RadioBox, L as RadioBoxGroup, H as RoadmapDetails, h as SelectGrouped, P as SubHeader, I as Tabs, W as ThemeLoader, i as ThemeProvider, S as Typography, G as themeLoaderScript, n as useClipboard, t as useNextTheme, r as useSuccessFlash, e as useTheme };

package/dist/scss/variables.scss

@@ -840,6 +840,17 @@ $body-1000: var(--typography-size-1000);
   --icon-multicolor-multicolor-brand-key-50: var(--primitives-neutral-50);
   --icon-multicolor-multicolor-brand-key-500: var(--primitives-neutral-500);
   --icon-single-line-color: var(--primitives-neutral-1000);
+
+  /* Code Block & Boxes - Light Mode */
+  --boxes-stroke: var(--primitives-neutral-100);
+  --code-block-background-inner: var(--primitives-neutral-0);
+  --code-block-background-outer: var(--primitives-neutral-75);
+  --code-block-markdown-code-background: var(--primitives-success-100);
+  --code-block-markdown-code-stroke: var(--primitives-success-200);
+  --code-block-markdown-code-text: var(--primitives-success-800);
+  --code-block-stroke-inner: var(--primitives-neutral-100);
+  --code-block-text-line-numbers: var(--primitives-neutral-300);
+  --code-block-text-primary: var(--primitives-neutral-1000);
 }
 
 /* Semantics - Dark */
@@ -950,4 +961,15 @@ $body-1000: var(--typography-size-1000);
   --icon-multicolor-multicolor-brand-key-50: var(--primitives-neutral-850);
   --icon-multicolor-multicolor-brand-key-500: var(--primitives-neutral-400);
   --icon-single-line-color: var(--primitives-neutral-0);
+
+  /* Code Block & Boxes - Dark Mode */
+  --boxes-stroke: var(--primitives-neutral-900);
+  --code-block-background-inner: var(--primitives-neutral-950);
+  --code-block-background-outer: var(--primitives-neutral-1000);
+  --code-block-markdown-code-background: var(--primitives-success-300);
+  --code-block-markdown-code-stroke: var(--primitives-success-400);
+  --code-block-markdown-code-text: var(--primitives-success-800);
+  --code-block-stroke-inner: var(--primitives-neutral-800);
+  --code-block-text-line-numbers: var(--primitives-neutral-400);
+  --code-block-text-primary: var(--primitives-neutral-200);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.136",
+  "version": "1.0.138",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {
@@ -70,12 +70,14 @@
     "modern-normalize": "^3.0.1",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.1",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-syntax-highlighter": "^16.1.1"
   },
   "devDependencies": {
     "@babel/runtime": "^7.27.0",
     "@eslint/js": "^9.2.0",
     "@fontsource-variable/ibm-plex-sans": "^5.2.5",
+    "@fontsource/ibm-plex-mono": "^5.2.7",
     "@storybook/react": "^10.2.19",
     "@storybook/react-vite": "^10.2.19",
     "@types/node": "^20.12.7",
@@ -98,7 +100,6 @@
     "prettier": "^3.5.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-syntax-highlighter": "^16.1.1",
     "sass": "^1.75.0",
     "storybook": "^10.2.19",
     "stylelint": "^17.0.0",