@ngrok/mantle 0.68.0 → 0.68.1

package/README.md

@@ -85,6 +85,13 @@ SKIP_HOOKS=1 git commit -m "wip"
 > [!NOTE]
 > This is a **local opt-out only**. CI will always run formatting and linting checks against your branch, so any issues will still be caught before merge.
 
+## Related Packages
+
+| Package                                   | Description                                                                            | Links                                                                                                                                                                            |
+| ----------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@ngrok/mantle-vite-plugins`              | Vite + rehype plugins for code block highlighting and Tailwind CSS source optimization | [GitHub](https://github.com/ngrok-oss/mantle/tree/main/packages/mantle-vite-plugins) · [npm](https://www.npmjs.com/package/@ngrok/mantle-vite-plugins)                           |
+| `@ngrok/mantle-server-syntax-highlighter` | Server-side syntax highlighting engine powered by Shiki                                | [GitHub](https://github.com/ngrok-oss/mantle/tree/main/packages/mantle-server-syntax-highlighter) · [npm](https://www.npmjs.com/package/@ngrok/mantle-server-syntax-highlighter) |
+
 ## Contributing
 
 Please read our [contribution guide](https://github.com/ngrok-oss/mantle/blob/main/CONTRIBUTING.md) and [conventions](https://github.com/ngrok-oss/mantle/blob/main/CONVENTIONS.md).

package/dist/command.d.ts

@@ -101,7 +101,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -178,7 +178,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+  }, "key" | "asChild" | keyof _$react.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
@@ -199,7 +199,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
   } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
@@ -218,7 +218,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -239,7 +239,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -262,7 +262,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "onSelect" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -294,7 +294,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof _$react.HTMLAttributes<HTMLDivElement>> & {
+  }, "key" | keyof _$react.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
   } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
 import { n as MarginType, o as useComposedRefs } from "./in-view-DS0PgFGa.js";
-import { RefObject, useLayoutEffect } from "react";
+import { RefObject, useEffect } from "react";
 
 //#region src/hooks/use-breakpoint.d.ts
 /**
@@ -177,7 +177,7 @@ declare function useIsHydrated(): boolean;
 /**
  * useIsomorphicLayoutEffect is a hook that uses useLayoutEffect on the client and useEffect on the server.
  */
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof useEffect;
 //#endregion
 //#region src/hooks/use-matches-media-query.d.ts
 /**

package/dist/mantle.css

@@ -590,25 +590,25 @@ MARK: UTILITIES
 MARK: SHIKI SYNTAX HIGHLIGHT
 */
 :root {
-	--shiki-foreground: var(--text-color-body);
+	--shiki-foreground: var(--text-color-strong);
 	--shiki-background: transparent;
 	--shiki-color-text: var(--shiki-foreground);
 
-	--shiki-token-comment: var(--color-gray-600);
-	--shiki-token-constant: var(--color-amber-600);
-	--shiki-token-string: var(--color-emerald-600);
-	--shiki-token-string-expression: var(--color-emerald-600);
-	--shiki-token-keyword: var(--color-purple-600);
-	--shiki-token-function: var(--color-sky-600);
-	--shiki-token-parameter: var(--color-rose-600);
-	--shiki-token-punctuation: var(--color-sky-600);
+	--shiki-token-comment: var(--text-color-muted);
+	--shiki-token-constant: var(--color-amber-700);
+	--shiki-token-string: var(--color-emerald-700);
+	--shiki-token-string-expression: var(--color-emerald-700);
+	--shiki-token-keyword: var(--color-purple-700);
+	--shiki-token-function: var(--color-sky-700);
+	--shiki-token-parameter: var(--color-rose-700);
+	--shiki-token-punctuation: var(--color-sky-700);
 
-	--shiki-token-type: var(--color-amber-600);
+	--shiki-token-type: var(--color-amber-700);
 	--shiki-token-variable: var(--shiki-foreground);
-	--shiki-token-operator: var(--color-sky-600);
-	--shiki-token-attribute: var(--color-purple-600);
-	--shiki-token-property: var(--color-rose-600);
-	--shiki-token-escape: var(--color-sky-600);
+	--shiki-token-operator: var(--color-sky-700);
+	--shiki-token-attribute: var(--color-purple-700);
+	--shiki-token-property: var(--color-rose-700);
+	--shiki-token-escape: var(--color-sky-700);
 
 	/* Mantle code-line rendering hooks (used by CodeBlock + server highlighter). */
 	--mantle-code-line-highlight-bg: --alpha(var(--color-accent-500) / 12%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.68.0",
+  "version": "0.68.1",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",