[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/src/app/(private)/experiments/toolbar.module.css

@@ -0,0 +1,192 @@
+.Root {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  padding: 0.125rem 0.5rem;
+  text-wrap: nowrap;
+}
+
+.Grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0.5rem;
+}
+
+/* disabled buttons + focusableWhenDisabled */
+.Root [type='button'][data-disabled],
+.Root button[data-disabled] {
+  color: color-mix(in srgb, currentColor 30%, transparent) !important;
+  cursor: not-allowed !important;
+}
+
+.Separator[data-orientation='vertical'] {
+  width: 1px;
+  align-self: stretch;
+  margin-block: 2px;
+  background-color: var(--color-gray-300);
+}
+
+.Separator[data-orientation='horizontal'] {
+  height: 1px;
+  align-self: stretch;
+  /*  margin-block: 2px;*/
+  background-color: var(--color-gray-300);
+  margin-block: 24px;
+}
+
+.Link {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-900);
+  text-decoration-color: var(--color-gray-400);
+  text-decoration-thickness: 1px;
+  text-decoration-line: none;
+  text-underline-offset: 2px;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  &:focus-visible {
+    border-radius: 0.125rem;
+    outline: 2px solid var(--color-blue);
+    text-decoration-line: none;
+  }
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding-inline: 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-200);
+  }
+}
+
+/* ToggleGroup  */
+.ToggleGroup {
+  display: flex;
+  gap: 1px;
+  border-radius: 0.375rem;
+  padding: 0.125rem;
+}
+
+.Toggle {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: 0;
+  border-radius: 0.25rem;
+  background-color: transparent;
+  color: var(--color-gray-600);
+  user-select: none;
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-200);
+  }
+
+  &[data-pressed] {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Menu  */
+.More {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &[data-popup-open] {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}