Add ToolbarSeparator

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": {}
+}

packages/react/src/separator/Separator.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { BaseUIComponentProps } from '../utils/types';
+import type { BaseUIComponentProps, Orientation } from '../utils/types';
 import { mergeReactProps } from '../utils/mergeReactProps';
 import { useComponentRenderer } from '../utils/useComponentRenderer';
 
@@ -39,8 +39,6 @@ const Separator = React.forwardRef(function SeparatorComponent(
   return renderElement();
 });
 
-type Orientation = 'horizontal' | 'vertical';
-
 namespace Separator {
   export interface Props extends BaseUIComponentProps<'div', State> {
     /**

packages/react/src/toolbar/index.parts.ts

@@ -1,4 +1,4 @@
-export { Separator } from '../separator/Separator';
+export { ToolbarSeparator as Separator } from './separator/ToolbarSeparator';
 export { ToolbarRoot as Root } from './root/ToolbarRoot';
 export { ToolbarGroup as Group } from './group/ToolbarGroup';
 export { ToolbarButton as Button } from './button/ToolbarButton';

packages/react/src/toolbar/link/ToolbarLink.tsx

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { BaseUIComponentProps } from '../../utils/types';
+import { BaseUIComponentProps, Orientation } from '../../utils/types';
 import { useButton } from '../../use-button';
 import { CompositeItem } from '../../composite/item/CompositeItem';
-import type { ToolbarOrientation, ToolbarItemMetadata } from '../root/ToolbarRoot';
+import type { ToolbarItemMetadata } from '../root/ToolbarRoot';
 import { useToolbarRootContext } from '../root/ToolbarRootContext';
 
 const TOOLBAR_LINK_METADATA = {
@@ -52,7 +52,7 @@ const ToolbarLink = React.forwardRef(function ToolbarLink(
 
 export namespace ToolbarLink {
   export interface State {
-    orientation: ToolbarOrientation;
+    orientation: Orientation;
   }
 
   export interface Props extends BaseUIComponentProps<'a', State> {}

packages/react/src/toolbar/root/ToolbarRoot.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { BaseUIComponentProps } from '../../utils/types';
+import { BaseUIComponentProps, Orientation } from '../../utils/types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { CompositeRoot } from '../../composite/root/CompositeRoot';
 import { ToolbarRootContext } from './ToolbarRootContext';
@@ -32,7 +32,7 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot(
     orientation,
   });
 
-  const toolbarRootContext = React.useMemo(
+  const toolbarRootContext: ToolbarRootContext = React.useMemo(
     () => ({
       disabled,
       orientation,
@@ -65,16 +65,14 @@ const ToolbarRoot = React.forwardRef(function ToolbarRoot(
   );
 });
 
-export type ToolbarOrientation = 'horizontal' | 'vertical';
-
 export interface ToolbarItemMetadata {
   focusableWhenDisabled: boolean;
 }
 
 namespace ToolbarRoot {
   export type State = {
     disabled: boolean;
-    orientation: ToolbarOrientation;
+    orientation: Orientation;
   };
 
   export interface Props extends BaseUIComponentProps<'div', State> {
@@ -89,7 +87,7 @@ namespace ToolbarRoot {
      * The orientation of the toolbar.
      * @default 'horizontal'
      */
-    orientation?: ToolbarOrientation;
+    orientation?: Orientation;
     /**
      * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
      *

packages/react/src/toolbar/root/ToolbarRootContext.tsx

@@ -1,11 +1,12 @@
 'use client';
 import * as React from 'react';
+import type { Orientation } from '../../utils/types';
 import type { CompositeMetadata } from '../../composite/list/CompositeList';
-import type { ToolbarOrientation, ToolbarItemMetadata } from './ToolbarRoot';
+import type { ToolbarItemMetadata } from './ToolbarRoot';
 
 export interface ToolbarRootContext {
   disabled: boolean;
-  orientation: ToolbarOrientation;
+  orientation: Orientation;
   setItemMap: React.Dispatch<
     React.SetStateAction<Map<Node, CompositeMetadata<ToolbarItemMetadata> | null>>
   >;

packages/react/src/toolbar/separator/ToolbarSeparator.tsx

@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { BaseUIComponentProps, Orientation } from '../../utils/types';
+import { Separator } from '../../separator';
+import { useToolbarRootContext } from '../root/ToolbarRootContext';
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
+  props: ToolbarSeparator.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const context = useToolbarRootContext();
+
+  const orientation = (
+    {
+      vertical: 'horizontal',
+      horizontal: 'vertical',
+    } as Record<Orientation, Orientation>
+  )[context.orientation];
+
+  return <Separator orientation={orientation} {...props} ref={forwardedRef} />;
+});
+
+ToolbarSeparator.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+namespace ToolbarSeparator {
+  export interface Props extends BaseUIComponentProps<'div', Separator.State>, Separator.Props {}
+}
+
+export { ToolbarSeparator };

packages/react/src/utils/types.ts

@@ -64,3 +64,5 @@ export type BaseUIComponentProps<
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
 
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+export type Orientation = 'horizontal' | 'vertical';