mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-08 02:33:02 +00:00
146 lines
5.1 KiB
JavaScript
146 lines
5.1 KiB
JavaScript
"use client";
|
|
|
|
// src/toolbar.tsx
|
|
import * as React from "react";
|
|
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
import { createContextScope } from "@radix-ui/react-context";
|
|
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
|
|
import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
|
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
|
|
import { useDirection } from "@radix-ui/react-direction";
|
|
import { jsx } from "react/jsx-runtime";
|
|
var TOOLBAR_NAME = "Toolbar";
|
|
var [createToolbarContext, createToolbarScope] = createContextScope(TOOLBAR_NAME, [
|
|
createRovingFocusGroupScope,
|
|
createToggleGroupScope
|
|
]);
|
|
var useRovingFocusGroupScope = createRovingFocusGroupScope();
|
|
var useToggleGroupScope = createToggleGroupScope();
|
|
var [ToolbarProvider, useToolbarContext] = createToolbarContext(TOOLBAR_NAME);
|
|
var Toolbar = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, orientation = "horizontal", dir, loop = true, ...toolbarProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
const direction = useDirection(dir);
|
|
return /* @__PURE__ */ jsx(ToolbarProvider, { scope: __scopeToolbar, orientation, dir: direction, children: /* @__PURE__ */ jsx(
|
|
RovingFocusGroup.Root,
|
|
{
|
|
asChild: true,
|
|
...rovingFocusGroupScope,
|
|
orientation,
|
|
dir: direction,
|
|
loop,
|
|
children: /* @__PURE__ */ jsx(
|
|
Primitive.div,
|
|
{
|
|
role: "toolbar",
|
|
"aria-orientation": orientation,
|
|
dir: direction,
|
|
...toolbarProps,
|
|
ref: forwardedRef
|
|
}
|
|
)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
Toolbar.displayName = TOOLBAR_NAME;
|
|
var SEPARATOR_NAME = "ToolbarSeparator";
|
|
var ToolbarSeparator = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...separatorProps } = props;
|
|
const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);
|
|
return /* @__PURE__ */ jsx(
|
|
SeparatorPrimitive.Root,
|
|
{
|
|
orientation: context.orientation === "horizontal" ? "vertical" : "horizontal",
|
|
...separatorProps,
|
|
ref: forwardedRef
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToolbarSeparator.displayName = SEPARATOR_NAME;
|
|
var BUTTON_NAME = "ToolbarButton";
|
|
var ToolbarButton = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...buttonProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
return /* @__PURE__ */ jsx(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: !props.disabled, children: /* @__PURE__ */ jsx(Primitive.button, { type: "button", ...buttonProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToolbarButton.displayName = BUTTON_NAME;
|
|
var LINK_NAME = "ToolbarLink";
|
|
var ToolbarLink = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...linkProps } = props;
|
|
const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
|
|
return /* @__PURE__ */ jsx(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: /* @__PURE__ */ jsx(
|
|
Primitive.a,
|
|
{
|
|
...linkProps,
|
|
ref: forwardedRef,
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (event.key === " ") event.currentTarget.click();
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
ToolbarLink.displayName = LINK_NAME;
|
|
var TOGGLE_GROUP_NAME = "ToolbarToggleGroup";
|
|
var ToolbarToggleGroup = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...toggleGroupProps } = props;
|
|
const context = useToolbarContext(TOGGLE_GROUP_NAME, __scopeToolbar);
|
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
return /* @__PURE__ */ jsx(
|
|
ToggleGroupPrimitive.Root,
|
|
{
|
|
"data-orientation": context.orientation,
|
|
dir: context.dir,
|
|
...toggleGroupScope,
|
|
...toggleGroupProps,
|
|
ref: forwardedRef,
|
|
rovingFocus: false
|
|
}
|
|
);
|
|
}
|
|
);
|
|
ToolbarToggleGroup.displayName = TOGGLE_GROUP_NAME;
|
|
var TOGGLE_ITEM_NAME = "ToolbarToggleItem";
|
|
var ToolbarToggleItem = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeToolbar, ...toggleItemProps } = props;
|
|
const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
|
|
const scope = { __scopeToolbar: props.__scopeToolbar };
|
|
return /* @__PURE__ */ jsx(ToolbarButton, { asChild: true, ...scope, children: /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { ...toggleGroupScope, ...toggleItemProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
ToolbarToggleItem.displayName = TOGGLE_ITEM_NAME;
|
|
var Root4 = Toolbar;
|
|
var Separator = ToolbarSeparator;
|
|
var Button = ToolbarButton;
|
|
var Link = ToolbarLink;
|
|
var ToggleGroup = ToolbarToggleGroup;
|
|
var ToggleItem = ToolbarToggleItem;
|
|
export {
|
|
Button,
|
|
Link,
|
|
Root4 as Root,
|
|
Separator,
|
|
ToggleGroup,
|
|
ToggleItem,
|
|
Toolbar,
|
|
ToolbarButton,
|
|
ToolbarLink,
|
|
ToolbarSeparator,
|
|
ToolbarToggleGroup,
|
|
ToolbarToggleItem,
|
|
createToolbarScope
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|