@nucleux/md3-toolbar 0.0.0-stage → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,38 @@
-# Temporary Holding Version
+# @nucleux/md3-toolbar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Material 3 docked and floating toolbar — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+
+## Exports
+
+- **`Md3Toolbar`** — `role="toolbar"` with arrow-key roving focus (`type="docked" | "floating"`, `orientation="horizontal" | "vertical"` for floating, `color="standard" | "vibrant"`, `loop`)
+- **`Md3ToolbarIconButton`** — an `Md3IconButton` coloured for the toolbar; `selected` for toggled actions
+- Types: `Md3ToolbarProps`, `Md3ToolbarIconButtonProps`, `Md3ToolbarType`, `Md3ToolbarOrientation`, `Md3ToolbarColor`
+
+## Install
+
+```bash
+pnpm add @nucleux/md3-toolbar @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Md3Toolbar, Md3ToolbarIconButton } from "@nucleux/md3-toolbar";
+
+<Md3Toolbar type="floating" color="vibrant" aria-label="Text formatting">
+  <Md3ToolbarIconButton aria-label="Bold" selected><Bold /></Md3ToolbarIconButton>
+  <Md3ToolbarIconButton aria-label="Italic"><Italic /></Md3ToolbarIconButton>
+</Md3Toolbar>
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,180 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var md3IconButton = require('@nucleux/md3-icon-button');
+var utils = require('@nucleux/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var ToolbarContext = React__namespace.createContext({ color: "standard" });
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var ITEM_SELECTOR = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="switch"]',
+  '[role="combobox"]',
+  "[data-md3-toolbar-item]"
+].join(",");
+var getItems = (root) => Array.from(root.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+  if (el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true") return false;
+  if (el.type === "hidden") return false;
+  const popup = el.parentElement?.closest('[role="menu"], [role="dialog"], [role="listbox"], [role="toolbar"]');
+  return !popup || popup === root;
+});
+var isTextEntry = (el) => el instanceof HTMLElement && (el.isContentEditable || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.tagName === "INPUT" && !["button", "checkbox", "radio", "submit", "reset", "image"].includes(el.type));
+var containers = {
+  standard: "bg-md-surface-container text-md-on-surface-variant",
+  vibrant: "bg-md-primary-container text-md-on-primary-container"
+};
+var Md3Toolbar = React__namespace.forwardRef(
+  ({
+    type = "docked",
+    orientation: orientationProp = "horizontal",
+    color = "standard",
+    loop = true,
+    className,
+    children,
+    onKeyDown,
+    onFocus,
+    ...props
+  }, ref) => {
+    const orientation = type === "docked" ? "horizontal" : orientationProp;
+    const rootRef = React__namespace.useRef(null);
+    const active = React__namespace.useRef(0);
+    const sync = React__namespace.useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const items = getItems(root);
+      if (items.length === 0) return;
+      if (active.current >= items.length) active.current = items.length - 1;
+      items.forEach((el, i) => {
+        el.tabIndex = i === active.current ? 0 : -1;
+      });
+    }, []);
+    useIsomorphicLayoutEffect(sync);
+    React__namespace.useEffect(() => {
+      const root = rootRef.current;
+      if (!root || typeof MutationObserver === "undefined") return;
+      const observer = new MutationObserver(sync);
+      observer.observe(root, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["disabled", "aria-disabled"]
+      });
+      return () => observer.disconnect();
+    }, [sync]);
+    const handleFocus = (e) => {
+      onFocus?.(e);
+      const root = rootRef.current;
+      if (!root) return;
+      const index = getItems(root).indexOf(e.target);
+      if (index >= 0 && index !== active.current) {
+        active.current = index;
+        sync();
+      }
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      const root = rootRef.current;
+      if (e.defaultPrevented || !root) return;
+      const items = getItems(root);
+      const index = items.indexOf(e.target);
+      if (index < 0) return;
+      const rtl = getComputedStyle(root).direction === "rtl";
+      const horizontal = orientation === "horizontal";
+      const nextKey = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+      const prevKey = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+      if (horizontal && isTextEntry(e.target) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) return;
+      let next;
+      if (e.key === nextKey) next = index + 1 >= items.length ? loop ? 0 : index : index + 1;
+      else if (e.key === prevKey) next = index - 1 < 0 ? loop ? items.length - 1 : index : index - 1;
+      else if (e.key === "Home" && !isTextEntry(e.target)) next = 0;
+      else if (e.key === "End" && !isTextEntry(e.target)) next = items.length - 1;
+      else return;
+      e.preventDefault();
+      active.current = next;
+      sync();
+      items[next].focus();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "toolbar",
+        "aria-orientation": orientation,
+        "data-type": type,
+        "data-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        className: utils.cn(
+          "flex items-center",
+          containers[color],
+          type === "docked" && "h-16 w-full justify-evenly gap-2 px-4",
+          type === "floating" && "inline-flex gap-1 rounded-full shadow-md-3",
+          type === "floating" && (orientation === "horizontal" ? "h-16 px-2" : "w-16 flex-col py-2"),
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarContext.Provider, { value: { color }, children })
+      }
+    );
+  }
+);
+Md3Toolbar.displayName = "Md3Toolbar";
+var iconButtonColors = {
+  standard: ["text-md-on-surface-variant", "bg-md-secondary-container text-md-on-secondary-container"],
+  vibrant: ["text-md-on-primary-container", "bg-md-surface-container text-md-on-surface"]
+};
+var Md3ToolbarIconButton = React__namespace.forwardRef(
+  ({ selected = false, className, ...props }, ref) => {
+    const { color } = React__namespace.useContext(ToolbarContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      md3IconButton.Md3IconButton,
+      {
+        ref,
+        variant: "standard",
+        selected,
+        className: utils.cn("h-12 w-12", iconButtonColors[color][selected ? 1 : 0], className),
+        ...props
+      }
+    );
+  }
+);
+Md3ToolbarIconButton.displayName = "Md3ToolbarIconButton";
+
+exports.Md3Toolbar = Md3Toolbar;
+exports.Md3ToolbarIconButton = Md3ToolbarIconButton;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","Md3IconButton"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Md3IconButton, type Md3IconButtonProps } from \"@nucleux/md3-icon-button\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3ToolbarType = \"docked\" | \"floating\";\nexport type Md3ToolbarOrientation = \"horizontal\" | \"vertical\";\nexport type Md3ToolbarColor = \"standard\" | \"vibrant\";\n\ninterface ToolbarContextValue {\n  color: Md3ToolbarColor;\n}\nconst ToolbarContext = React.createContext<ToolbarContextValue>({ color: \"standard\" });\n\nexport interface Md3ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `docked` spans the width of its container (replaces the bottom app bar); `floating` is a pill above content. */\n  type?: Md3ToolbarType;\n  /** Layout of a floating toolbar. Docked toolbars are always horizontal. */\n  orientation?: Md3ToolbarOrientation;\n  /** `standard` uses surface-container; `vibrant` uses primary-container for more emphasis. */\n  color?: Md3ToolbarColor;\n  /** Whether arrow keys wrap from the last control to the first and back. */\n  loop?: boolean;\n}\n\nconst useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nconst ITEM_SELECTOR = [\n  \"button\",\n  \"a[href]\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"radio\"]',\n  '[role=\"switch\"]',\n  '[role=\"combobox\"]',\n  \"[data-md3-toolbar-item]\",\n].join(\",\");\n\n/** Focusable controls of the toolbar, skipping disabled ones and anything inside a popup (menu, dialog, listbox). */\nconst getItems = (root: HTMLElement) =>\n  Array.from(root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)).filter((el) => {\n    if (el.hasAttribute(\"disabled\") || el.getAttribute(\"aria-disabled\") === \"true\") return false;\n    if ((el as HTMLInputElement).type === \"hidden\") return false;\n    const popup = el.parentElement?.closest('[role=\"menu\"], [role=\"dialog\"], [role=\"listbox\"], [role=\"toolbar\"]');\n    return !popup || popup === root;\n  });\n\nconst isTextEntry = (el: EventTarget | null) =>\n  el instanceof HTMLElement &&\n  (el.isContentEditable ||\n    el.tagName === \"TEXTAREA\" ||\n    el.tagName === \"SELECT\" ||\n    (el.tagName === \"INPUT\" &&\n      ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\", \"image\"].includes((el as HTMLInputElement).type)));\n\nconst containers: Record<Md3ToolbarColor, string> = {\n  standard: \"bg-md-surface-container text-md-on-surface-variant\",\n  vibrant: \"bg-md-primary-container text-md-on-primary-container\",\n};\n\n/**\n * A Material 3 Expressive toolbar for actions related to the current page. The\n * `docked` type spans the bottom (or top) of the screen at 64px tall and replaces\n * the bottom app bar; the `floating` type is an elevated, fully rounded container\n * that floats over content in a horizontal or vertical orientation and pairs well\n * with an Md3Fab placed beside it. Both come in standard and vibrant colours. It\n * implements the WAI-ARIA toolbar pattern: one Tab stop, with arrow keys (Left/Right,\n * or Up/Down when vertical), Home and End moving focus between its controls.\n * Give it an `aria-label`, and use Md3ToolbarIconButton for colour-matched icon buttons.\n */\nexport const Md3Toolbar = React.forwardRef<HTMLDivElement, Md3ToolbarProps>(\n  (\n    {\n      type = \"docked\",\n      orientation: orientationProp = \"horizontal\",\n      color = \"standard\",\n      loop = true,\n      className,\n      children,\n      onKeyDown,\n      onFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const orientation = type === \"docked\" ? \"horizontal\" : orientationProp;\n    const rootRef = React.useRef<HTMLDivElement | null>(null);\n    const active = React.useRef(0);\n\n    // Roving tabindex: exactly one control is in the Tab order.\n    const sync = React.useCallback(() => {\n      const root = rootRef.current;\n      if (!root) return;\n      const items = getItems(root);\n      if (items.length === 0) return;\n      if (active.current >= items.length) active.current = items.length - 1;\n      items.forEach((el, i) => {\n        el.tabIndex = i === active.current ? 0 : -1;\n      });\n    }, []);\n\n    useIsomorphicLayoutEffect(sync);\n\n    React.useEffect(() => {\n      const root = rootRef.current;\n      if (!root || typeof MutationObserver === \"undefined\") return;\n      const observer = new MutationObserver(sync);\n      observer.observe(root, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\"],\n      });\n      return () => observer.disconnect();\n    }, [sync]);\n\n    const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      const root = rootRef.current;\n      if (!root) return;\n      const index = getItems(root).indexOf(e.target as HTMLElement);\n      if (index >= 0 && index !== active.current) {\n        active.current = index;\n        sync();\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e);\n      const root = rootRef.current;\n      if (e.defaultPrevented || !root) return;\n      const items = getItems(root);\n      const index = items.indexOf(e.target as HTMLElement);\n      if (index < 0) return;\n\n      const rtl = getComputedStyle(root).direction === \"rtl\";\n      const horizontal = orientation === \"horizontal\";\n      const nextKey = horizontal ? (rtl ? \"ArrowLeft\" : \"ArrowRight\") : \"ArrowDown\";\n      const prevKey = horizontal ? (rtl ? \"ArrowRight\" : \"ArrowLeft\") : \"ArrowUp\";\n      // Leave caret movement to text fields.\n      if (horizontal && isTextEntry(e.target) && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) return;\n\n      let next: number;\n      if (e.key === nextKey) next = index + 1 >= items.length ? (loop ? 0 : index) : index + 1;\n      else if (e.key === prevKey) next = index - 1 < 0 ? (loop ? items.length - 1 : index) : index - 1;\n      else if (e.key === \"Home\" && !isTextEntry(e.target)) next = 0;\n      else if (e.key === \"End\" && !isTextEntry(e.target)) next = items.length - 1;\n      else return;\n\n      e.preventDefault();\n      active.current = next;\n      sync();\n      items[next].focus();\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          rootRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        data-type={type}\n        data-orientation={orientation}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        className={cn(\n          \"flex items-center\",\n          containers[color],\n          type === \"docked\" && \"h-16 w-full justify-evenly gap-2 px-4\",\n          type === \"floating\" && \"inline-flex gap-1 rounded-full shadow-md-3\",\n          type === \"floating\" && (orientation === \"horizontal\" ? \"h-16 px-2\" : \"w-16 flex-col py-2\"),\n          className,\n        )}\n        {...props}\n      >\n        <ToolbarContext.Provider value={{ color }}>{children}</ToolbarContext.Provider>\n      </div>\n    );\n  },\n);\nMd3Toolbar.displayName = \"Md3Toolbar\";\n\nexport type Md3ToolbarIconButtonProps = Omit<Md3IconButtonProps, \"variant\">;\n\nconst iconButtonColors: Record<Md3ToolbarColor, [string, string]> = {\n  standard: [\"text-md-on-surface-variant\", \"bg-md-secondary-container text-md-on-secondary-container\"],\n  vibrant: [\"text-md-on-primary-container\", \"bg-md-surface-container text-md-on-surface\"],\n};\n\n/**\n * An Md3IconButton coloured for the surrounding Md3Toolbar (standard or vibrant).\n * Set `selected` for a toggled action; it then shows a contrasting container and\n * exposes `aria-pressed`.\n */\nexport const Md3ToolbarIconButton = React.forwardRef<HTMLButtonElement, Md3ToolbarIconButtonProps>(\n  ({ selected = false, className, ...props }, ref) => {\n    const { color } = React.useContext(ToolbarContext);\n    return (\n      <Md3IconButton\n        ref={ref}\n        variant=\"standard\"\n        selected={selected}\n        className={cn(\"h-12 w-12\", iconButtonColors[color][selected ? 1 : 0], className)}\n        {...props}\n      />\n    );\n  },\n);\nMd3ToolbarIconButton.displayName = \"Md3ToolbarIconButton\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Md3IconButtonProps } from '@nucleux/md3-icon-button';
+
+type Md3ToolbarType = "docked" | "floating";
+type Md3ToolbarOrientation = "horizontal" | "vertical";
+type Md3ToolbarColor = "standard" | "vibrant";
+interface Md3ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `docked` spans the width of its container (replaces the bottom app bar); `floating` is a pill above content. */
+    type?: Md3ToolbarType;
+    /** Layout of a floating toolbar. Docked toolbars are always horizontal. */
+    orientation?: Md3ToolbarOrientation;
+    /** `standard` uses surface-container; `vibrant` uses primary-container for more emphasis. */
+    color?: Md3ToolbarColor;
+    /** Whether arrow keys wrap from the last control to the first and back. */
+    loop?: boolean;
+}
+/**
+ * A Material 3 Expressive toolbar for actions related to the current page. The
+ * `docked` type spans the bottom (or top) of the screen at 64px tall and replaces
+ * the bottom app bar; the `floating` type is an elevated, fully rounded container
+ * that floats over content in a horizontal or vertical orientation and pairs well
+ * with an Md3Fab placed beside it. Both come in standard and vibrant colours. It
+ * implements the WAI-ARIA toolbar pattern: one Tab stop, with arrow keys (Left/Right,
+ * or Up/Down when vertical), Home and End moving focus between its controls.
+ * Give it an `aria-label`, and use Md3ToolbarIconButton for colour-matched icon buttons.
+ */
+declare const Md3Toolbar: React.ForwardRefExoticComponent<Md3ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+type Md3ToolbarIconButtonProps = Omit<Md3IconButtonProps, "variant">;
+/**
+ * An Md3IconButton coloured for the surrounding Md3Toolbar (standard or vibrant).
+ * Set `selected` for a toggled action; it then shows a contrasting container and
+ * exposes `aria-pressed`.
+ */
+declare const Md3ToolbarIconButton: React.ForwardRefExoticComponent<Md3ToolbarIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3Toolbar, type Md3ToolbarColor, Md3ToolbarIconButton, type Md3ToolbarIconButtonProps, type Md3ToolbarOrientation, type Md3ToolbarProps, type Md3ToolbarType };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Md3IconButtonProps } from '@nucleux/md3-icon-button';
+
+type Md3ToolbarType = "docked" | "floating";
+type Md3ToolbarOrientation = "horizontal" | "vertical";
+type Md3ToolbarColor = "standard" | "vibrant";
+interface Md3ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `docked` spans the width of its container (replaces the bottom app bar); `floating` is a pill above content. */
+    type?: Md3ToolbarType;
+    /** Layout of a floating toolbar. Docked toolbars are always horizontal. */
+    orientation?: Md3ToolbarOrientation;
+    /** `standard` uses surface-container; `vibrant` uses primary-container for more emphasis. */
+    color?: Md3ToolbarColor;
+    /** Whether arrow keys wrap from the last control to the first and back. */
+    loop?: boolean;
+}
+/**
+ * A Material 3 Expressive toolbar for actions related to the current page. The
+ * `docked` type spans the bottom (or top) of the screen at 64px tall and replaces
+ * the bottom app bar; the `floating` type is an elevated, fully rounded container
+ * that floats over content in a horizontal or vertical orientation and pairs well
+ * with an Md3Fab placed beside it. Both come in standard and vibrant colours. It
+ * implements the WAI-ARIA toolbar pattern: one Tab stop, with arrow keys (Left/Right,
+ * or Up/Down when vertical), Home and End moving focus between its controls.
+ * Give it an `aria-label`, and use Md3ToolbarIconButton for colour-matched icon buttons.
+ */
+declare const Md3Toolbar: React.ForwardRefExoticComponent<Md3ToolbarProps & React.RefAttributes<HTMLDivElement>>;
+type Md3ToolbarIconButtonProps = Omit<Md3IconButtonProps, "variant">;
+/**
+ * An Md3IconButton coloured for the surrounding Md3Toolbar (standard or vibrant).
+ * Set `selected` for a toggled action; it then shows a contrasting container and
+ * exposes `aria-pressed`.
+ */
+declare const Md3ToolbarIconButton: React.ForwardRefExoticComponent<Md3ToolbarIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Md3Toolbar, type Md3ToolbarColor, Md3ToolbarIconButton, type Md3ToolbarIconButtonProps, type Md3ToolbarOrientation, type Md3ToolbarProps, type Md3ToolbarType };

package/dist/index.js

@@ -0,0 +1,157 @@
+"use client";
+import * as React from 'react';
+import { Md3IconButton } from '@nucleux/md3-icon-button';
+import { cn } from '@nucleux/utils';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var ToolbarContext = React.createContext({ color: "standard" });
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var ITEM_SELECTOR = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="switch"]',
+  '[role="combobox"]',
+  "[data-md3-toolbar-item]"
+].join(",");
+var getItems = (root) => Array.from(root.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+  if (el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true") return false;
+  if (el.type === "hidden") return false;
+  const popup = el.parentElement?.closest('[role="menu"], [role="dialog"], [role="listbox"], [role="toolbar"]');
+  return !popup || popup === root;
+});
+var isTextEntry = (el) => el instanceof HTMLElement && (el.isContentEditable || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.tagName === "INPUT" && !["button", "checkbox", "radio", "submit", "reset", "image"].includes(el.type));
+var containers = {
+  standard: "bg-md-surface-container text-md-on-surface-variant",
+  vibrant: "bg-md-primary-container text-md-on-primary-container"
+};
+var Md3Toolbar = React.forwardRef(
+  ({
+    type = "docked",
+    orientation: orientationProp = "horizontal",
+    color = "standard",
+    loop = true,
+    className,
+    children,
+    onKeyDown,
+    onFocus,
+    ...props
+  }, ref) => {
+    const orientation = type === "docked" ? "horizontal" : orientationProp;
+    const rootRef = React.useRef(null);
+    const active = React.useRef(0);
+    const sync = React.useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const items = getItems(root);
+      if (items.length === 0) return;
+      if (active.current >= items.length) active.current = items.length - 1;
+      items.forEach((el, i) => {
+        el.tabIndex = i === active.current ? 0 : -1;
+      });
+    }, []);
+    useIsomorphicLayoutEffect(sync);
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (!root || typeof MutationObserver === "undefined") return;
+      const observer = new MutationObserver(sync);
+      observer.observe(root, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["disabled", "aria-disabled"]
+      });
+      return () => observer.disconnect();
+    }, [sync]);
+    const handleFocus = (e) => {
+      onFocus?.(e);
+      const root = rootRef.current;
+      if (!root) return;
+      const index = getItems(root).indexOf(e.target);
+      if (index >= 0 && index !== active.current) {
+        active.current = index;
+        sync();
+      }
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      const root = rootRef.current;
+      if (e.defaultPrevented || !root) return;
+      const items = getItems(root);
+      const index = items.indexOf(e.target);
+      if (index < 0) return;
+      const rtl = getComputedStyle(root).direction === "rtl";
+      const horizontal = orientation === "horizontal";
+      const nextKey = horizontal ? rtl ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+      const prevKey = horizontal ? rtl ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+      if (horizontal && isTextEntry(e.target) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) return;
+      let next;
+      if (e.key === nextKey) next = index + 1 >= items.length ? loop ? 0 : index : index + 1;
+      else if (e.key === prevKey) next = index - 1 < 0 ? loop ? items.length - 1 : index : index - 1;
+      else if (e.key === "Home" && !isTextEntry(e.target)) next = 0;
+      else if (e.key === "End" && !isTextEntry(e.target)) next = items.length - 1;
+      else return;
+      e.preventDefault();
+      active.current = next;
+      sync();
+      items[next].focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          rootRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        role: "toolbar",
+        "aria-orientation": orientation,
+        "data-type": type,
+        "data-orientation": orientation,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        className: cn(
+          "flex items-center",
+          containers[color],
+          type === "docked" && "h-16 w-full justify-evenly gap-2 px-4",
+          type === "floating" && "inline-flex gap-1 rounded-full shadow-md-3",
+          type === "floating" && (orientation === "horizontal" ? "h-16 px-2" : "w-16 flex-col py-2"),
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: { color }, children })
+      }
+    );
+  }
+);
+Md3Toolbar.displayName = "Md3Toolbar";
+var iconButtonColors = {
+  standard: ["text-md-on-surface-variant", "bg-md-secondary-container text-md-on-secondary-container"],
+  vibrant: ["text-md-on-primary-container", "bg-md-surface-container text-md-on-surface"]
+};
+var Md3ToolbarIconButton = React.forwardRef(
+  ({ selected = false, className, ...props }, ref) => {
+    const { color } = React.useContext(ToolbarContext);
+    return /* @__PURE__ */ jsx(
+      Md3IconButton,
+      {
+        ref,
+        variant: "standard",
+        selected,
+        className: cn("h-12 w-12", iconButtonColors[color][selected ? 1 : 0], className),
+        ...props
+      }
+    );
+  }
+);
+Md3ToolbarIconButton.displayName = "Md3ToolbarIconButton";
+
+export { Md3Toolbar, Md3ToolbarIconButton };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { Md3IconButton, type Md3IconButtonProps } from \"@nucleux/md3-icon-button\";\nimport { cn } from \"@nucleux/utils\";\n\nexport type Md3ToolbarType = \"docked\" | \"floating\";\nexport type Md3ToolbarOrientation = \"horizontal\" | \"vertical\";\nexport type Md3ToolbarColor = \"standard\" | \"vibrant\";\n\ninterface ToolbarContextValue {\n  color: Md3ToolbarColor;\n}\nconst ToolbarContext = React.createContext<ToolbarContextValue>({ color: \"standard\" });\n\nexport interface Md3ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `docked` spans the width of its container (replaces the bottom app bar); `floating` is a pill above content. */\n  type?: Md3ToolbarType;\n  /** Layout of a floating toolbar. Docked toolbars are always horizontal. */\n  orientation?: Md3ToolbarOrientation;\n  /** `standard` uses surface-container; `vibrant` uses primary-container for more emphasis. */\n  color?: Md3ToolbarColor;\n  /** Whether arrow keys wrap from the last control to the first and back. */\n  loop?: boolean;\n}\n\nconst useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\nconst ITEM_SELECTOR = [\n  \"button\",\n  \"a[href]\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  '[role=\"button\"]',\n  '[role=\"checkbox\"]',\n  '[role=\"radio\"]',\n  '[role=\"switch\"]',\n  '[role=\"combobox\"]',\n  \"[data-md3-toolbar-item]\",\n].join(\",\");\n\n/** Focusable controls of the toolbar, skipping disabled ones and anything inside a popup (menu, dialog, listbox). */\nconst getItems = (root: HTMLElement) =>\n  Array.from(root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)).filter((el) => {\n    if (el.hasAttribute(\"disabled\") || el.getAttribute(\"aria-disabled\") === \"true\") return false;\n    if ((el as HTMLInputElement).type === \"hidden\") return false;\n    const popup = el.parentElement?.closest('[role=\"menu\"], [role=\"dialog\"], [role=\"listbox\"], [role=\"toolbar\"]');\n    return !popup || popup === root;\n  });\n\nconst isTextEntry = (el: EventTarget | null) =>\n  el instanceof HTMLElement &&\n  (el.isContentEditable ||\n    el.tagName === \"TEXTAREA\" ||\n    el.tagName === \"SELECT\" ||\n    (el.tagName === \"INPUT\" &&\n      ![\"button\", \"checkbox\", \"radio\", \"submit\", \"reset\", \"image\"].includes((el as HTMLInputElement).type)));\n\nconst containers: Record<Md3ToolbarColor, string> = {\n  standard: \"bg-md-surface-container text-md-on-surface-variant\",\n  vibrant: \"bg-md-primary-container text-md-on-primary-container\",\n};\n\n/**\n * A Material 3 Expressive toolbar for actions related to the current page. The\n * `docked` type spans the bottom (or top) of the screen at 64px tall and replaces\n * the bottom app bar; the `floating` type is an elevated, fully rounded container\n * that floats over content in a horizontal or vertical orientation and pairs well\n * with an Md3Fab placed beside it. Both come in standard and vibrant colours. It\n * implements the WAI-ARIA toolbar pattern: one Tab stop, with arrow keys (Left/Right,\n * or Up/Down when vertical), Home and End moving focus between its controls.\n * Give it an `aria-label`, and use Md3ToolbarIconButton for colour-matched icon buttons.\n */\nexport const Md3Toolbar = React.forwardRef<HTMLDivElement, Md3ToolbarProps>(\n  (\n    {\n      type = \"docked\",\n      orientation: orientationProp = \"horizontal\",\n      color = \"standard\",\n      loop = true,\n      className,\n      children,\n      onKeyDown,\n      onFocus,\n      ...props\n    },\n    ref,\n  ) => {\n    const orientation = type === \"docked\" ? \"horizontal\" : orientationProp;\n    const rootRef = React.useRef<HTMLDivElement | null>(null);\n    const active = React.useRef(0);\n\n    // Roving tabindex: exactly one control is in the Tab order.\n    const sync = React.useCallback(() => {\n      const root = rootRef.current;\n      if (!root) return;\n      const items = getItems(root);\n      if (items.length === 0) return;\n      if (active.current >= items.length) active.current = items.length - 1;\n      items.forEach((el, i) => {\n        el.tabIndex = i === active.current ? 0 : -1;\n      });\n    }, []);\n\n    useIsomorphicLayoutEffect(sync);\n\n    React.useEffect(() => {\n      const root = rootRef.current;\n      if (!root || typeof MutationObserver === \"undefined\") return;\n      const observer = new MutationObserver(sync);\n      observer.observe(root, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: [\"disabled\", \"aria-disabled\"],\n      });\n      return () => observer.disconnect();\n    }, [sync]);\n\n    const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {\n      onFocus?.(e);\n      const root = rootRef.current;\n      if (!root) return;\n      const index = getItems(root).indexOf(e.target as HTMLElement);\n      if (index >= 0 && index !== active.current) {\n        active.current = index;\n        sync();\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(e);\n      const root = rootRef.current;\n      if (e.defaultPrevented || !root) return;\n      const items = getItems(root);\n      const index = items.indexOf(e.target as HTMLElement);\n      if (index < 0) return;\n\n      const rtl = getComputedStyle(root).direction === \"rtl\";\n      const horizontal = orientation === \"horizontal\";\n      const nextKey = horizontal ? (rtl ? \"ArrowLeft\" : \"ArrowRight\") : \"ArrowDown\";\n      const prevKey = horizontal ? (rtl ? \"ArrowRight\" : \"ArrowLeft\") : \"ArrowUp\";\n      // Leave caret movement to text fields.\n      if (horizontal && isTextEntry(e.target) && (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\")) return;\n\n      let next: number;\n      if (e.key === nextKey) next = index + 1 >= items.length ? (loop ? 0 : index) : index + 1;\n      else if (e.key === prevKey) next = index - 1 < 0 ? (loop ? items.length - 1 : index) : index - 1;\n      else if (e.key === \"Home\" && !isTextEntry(e.target)) next = 0;\n      else if (e.key === \"End\" && !isTextEntry(e.target)) next = items.length - 1;\n      else return;\n\n      e.preventDefault();\n      active.current = next;\n      sync();\n      items[next].focus();\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          rootRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        data-type={type}\n        data-orientation={orientation}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        className={cn(\n          \"flex items-center\",\n          containers[color],\n          type === \"docked\" && \"h-16 w-full justify-evenly gap-2 px-4\",\n          type === \"floating\" && \"inline-flex gap-1 rounded-full shadow-md-3\",\n          type === \"floating\" && (orientation === \"horizontal\" ? \"h-16 px-2\" : \"w-16 flex-col py-2\"),\n          className,\n        )}\n        {...props}\n      >\n        <ToolbarContext.Provider value={{ color }}>{children}</ToolbarContext.Provider>\n      </div>\n    );\n  },\n);\nMd3Toolbar.displayName = \"Md3Toolbar\";\n\nexport type Md3ToolbarIconButtonProps = Omit<Md3IconButtonProps, \"variant\">;\n\nconst iconButtonColors: Record<Md3ToolbarColor, [string, string]> = {\n  standard: [\"text-md-on-surface-variant\", \"bg-md-secondary-container text-md-on-secondary-container\"],\n  vibrant: [\"text-md-on-primary-container\", \"bg-md-surface-container text-md-on-surface\"],\n};\n\n/**\n * An Md3IconButton coloured for the surrounding Md3Toolbar (standard or vibrant).\n * Set `selected` for a toggled action; it then shows a contrasting container and\n * exposes `aria-pressed`.\n */\nexport const Md3ToolbarIconButton = React.forwardRef<HTMLButtonElement, Md3ToolbarIconButtonProps>(\n  ({ selected = false, className, ...props }, ref) => {\n    const { color } = React.useContext(ToolbarContext);\n    return (\n      <Md3IconButton\n        ref={ref}\n        variant=\"standard\"\n        selected={selected}\n        className={cn(\"h-12 w-12\", iconButtonColors[color][selected ? 1 : 0], className)}\n        {...props}\n      />\n    );\n  },\n);\nMd3ToolbarIconButton.displayName = \"Md3ToolbarIconButton\";\n"]}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@nucleux/md3-toolbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "Material 3 docked and floating toolbar — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "md3",
+    "material",
+    "toolbar",
+    "md3-toolbar"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/md3-icon-button": "0.6.0",
+    "@nucleux/utils": "0.6.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/md3-toolbar"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "scripts": {
+    "build": "tsup"
+  }
 }