[Toolbar] Add Toolbar components

docs/reference/generated/toolbar-button.json

@@ -0,0 +1,26 @@
+{
+  "name": "ToolbarButton",
+  "description": "A button that can be used as-is or as a trigger for other components.\nRenders a `<button>` element.",
+  "props": {
+    "focusableWhenDisabled": {
+      "type": "boolean",
+      "default": "true",
+      "description": "When `true` the item remains focuseable when disabled."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `true` the item is disabled."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toolbar-group.json

@@ -0,0 +1,21 @@
+{
+  "name": "ToolbarGroup",
+  "description": "Groups several toolbar items or toggles.\nRenders a `<div>` element.",
+  "props": {
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `true` all toolbar items in the group are disabled."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toolbar-link.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToolbarLink",
+  "description": "A link component.\nRenders a `<a>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toolbar-root.json

@@ -0,0 +1,31 @@
+{
+  "name": "ToolbarRoot",
+  "description": "A container for grouping a set of controls, such as buttons, toggle groups, or menus.\nRenders a `<div>` element.",
+  "props": {
+    "cols": {
+      "type": "number",
+      "default": "1",
+      "description": "The number of columns. When greater than 1, the toolbar is arranged into\na grid."
+    },
+    "loop": {
+      "type": "boolean",
+      "default": "true",
+      "description": "If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached."
+    },
+    "orientation": {
+      "type": "'horizontal' | 'vertical'",
+      "default": "'horizontal'",
+      "description": "The orientation of the toolbar."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toolbar-separator.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToolbarSeparator",
+  "description": "A separator element accessible to screen readers.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/src/app/(private)/experiments/toolbar/_icons.tsx

@@ -0,0 +1,173 @@
+'use client';
+import * as React from 'react';
+
+export default function Nothing() {
+  return <div>This is just a dummy file to hold icons</div>;
+}
+
+export function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="17" y1="10" x2="3" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="17" y1="18" x2="3" y2="18" />
+    </svg>
+  );
+}
+
+export function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="18" y1="10" x2="6" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="18" y1="18" x2="6" y2="18" />
+    </svg>
+  );
+}
+
+export function AlignRightIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="21" y1="10" x2="7" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="21" y1="18" x2="7" y2="18" />
+    </svg>
+  );
+}
+
+export function BoldIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+      <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+    </svg>
+  );
+}
+
+export function ItalicsIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="19" y1="4" x2="10" y2="4" />
+      <line x1="14" y1="20" x2="5" y2="20" />
+      <line x1="15" y1="4" x2="9" y2="20" />
+    </svg>
+  );
+}
+
+export function UnderlineIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+      <line x1="4" y1="21" x2="20" y2="21" />
+    </svg>
+  );
+}
+
+export function ArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        fill={props.fill ?? 'canvas'}
+      />
+      <path d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z" />
+      <path d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z" />
+    </svg>
+  );
+}
+
+export function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      {...props}
+    >
+      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
+      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+    </svg>
+  );
+}
+
+export function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
+      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    </svg>
+  );
+}
+
+export function MoreHorizontalIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentcolor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentcolor" strokeWidth="1.5" />
+    </svg>
+  );
+}

docs/src/app/(private)/experiments/toolbar/basic.tsx

@@ -0,0 +1,85 @@
+'use client';
+import * as React from 'react';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import s from './toolbar.module.css';
+import selectClasses from '../../../(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css';
+import menuClasses from '../../../(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css';
+import '../../../../demo-theme.css';
+
+const DISABLED = false;
+
+const styles = {
+  toolbar: s,
+  select: selectClasses,
+  menu: menuClasses,
+};
+
+const TEXT = `Shows the basic anatomy:
+- Toolbar.Root
+- Toolbar.Button
+- Toolbar.Link
+- Toolbar.Separator
+- Toolbar.Group
+`;
+
+export default function App() {
+  return (
+    <React.Fragment>
+      <a
+        className={styles.toolbar.a}
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <h3 className={styles.toolbar.h3}>Toolbar pattern</h3>
+      </a>
+      <div className={styles.toolbar.Wrapper}>
+        <Toolbar.Root className={styles.toolbar.Root}>
+          <Toolbar.Button
+            disabled={DISABLED}
+            className={styles.toolbar.Button}
+            onClick={() => console.log('clicked a regular toolbar button')}
+          >
+            Toolbar.Button
+          </Toolbar.Button>
+
+          <Toolbar.Link
+            className={styles.toolbar.Button}
+            href="https://base-ui.com"
+            target="_blank"
+          >
+            Visit base-ui.com
+          </Toolbar.Link>
+
+          <Toolbar.Separator className={styles.toolbar.Separator} />
+
+          <Toolbar.Group className={styles.toolbar.ToggleGroup}>
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={styles.toolbar.Button}
+              onClick={() => console.log('clicked button 1 inside a group')}
+              style={{ marginRight: '0.5rem' }}
+            >
+              Toolbar.Button in a Group
+            </Toolbar.Button>
+
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={styles.toolbar.Button}
+              onClick={() => console.log('clicked button 2 inside a group')}
+            >
+              Toolbar.Button in a Group
+            </Toolbar.Button>
+          </Toolbar.Group>
+        </Toolbar.Root>
+        <textarea
+          className={styles.toolbar.Textarea}
+          name=""
+          id=""
+          rows={8}
+          defaultValue={TEXT}
+        />
+      </div>
+    </React.Fragment>
+  );
+}