sheer-ui 0.4.2 → 0.5.0

package/dist/components/toggle/toggle.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
+export declare const toggleAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root"]>;
+interface ToggleRootStateOpts extends RefOpts {
+    readonly disabled: boolean;
+    pressed: boolean;
+}
+export declare class ToggleRootState {
+    static create(opts: ToggleRootStateOpts): ToggleRootState;
+    readonly opts: ToggleRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToggleRootStateOpts);
+    onclick(_: BitsMouseEvent): void;
+    readonly snippetProps: {
+        pressed: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'aria-pressed': "true" | "false";
+        readonly 'data-state': "off" | "on";
+        readonly disabled: true | undefined;
+        readonly onclick: (_: BitsMouseEvent) => void;
+    };
+}
+export declare const getToggleDataState: (condition: boolean) => "on" | "off";
+export {};

package/dist/components/toggle/toggle.svelte.js

@@ -0,0 +1,37 @@
+import { attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+export const toggleAttrs = createBitsAttrs({
+    component: 'toggle',
+    parts: ['root'],
+});
+export class ToggleRootState {
+    static create(opts) {
+        return new ToggleRootState(opts);
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick(_) {
+        if (this.opts.disabled)
+            return;
+        this.opts.pressed = !this.opts.pressed;
+    }
+    snippetProps = $derived.by(() => ({
+        pressed: this.opts.pressed,
+    }));
+    props = $derived.by(() => ({
+        [toggleAttrs.root]: '',
+        id: this.opts.id,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
+        'aria-pressed': boolToStr(this.opts.pressed),
+        'data-state': getToggleDataState(this.opts.pressed),
+        disabled: boolToTrueOrUndef(this.opts.disabled),
+        onclick: this.onclick,
+        ...this.attachment,
+    }));
+}
+export const getToggleDataState = (condition) => condition ? 'on' : 'off';

package/dist/components/toggle/types.d.ts

@@ -0,0 +1,24 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes } from "../../internal/attribute-types.js";
+export type ToggleRootSnippetProps = {
+    pressed: boolean;
+};
+export type ToggleRootPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the toggle is pressed or not.
+     *
+     * @defaultValue false
+     */
+    pressed?: boolean | undefined;
+    /**
+     * A callback function called when the toggle is pressed.
+     */
+    onPressedChange?: OnChangeFn<boolean>;
+    /**
+     * Whether the toggle is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+}, ToggleRootSnippetProps>;
+export type ToggleRootProps = ToggleRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleRootPropsWithoutHTML>;

package/dist/components/toggle/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toggle/variants.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'overrule';
+export declare const toggleVariants: import("overrule").VariantFn<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}>;
+export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+export type ToggleVariants = VariantProps<typeof toggleVariants>;

package/dist/components/toggle/variants.js

@@ -0,0 +1,20 @@
+import { declareVariants } from 'overrule';
+import { interactiveBase } from '../button/variants';
+export const toggleVariants = declareVariants({
+    base: `${interactiveBase} data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 gap-2 rounded-md text-sm transition-[color,box-shadow] focus-visible:ring-3 [&_svg:not([class*='size-'])]:size-4`,
+    variants: {
+        variant: {
+            default: 'bg-transparent hover:bg-muted hover:text-muted-foreground',
+            outline: 'border-border hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs',
+        },
+        size: {
+            default: 'h-9 min-w-9 px-2',
+            sm: 'h-8 min-w-8 px-1.5',
+            lg: 'h-10 min-w-10 px-2.5',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});

package/dist/components/toggle-group/components/toggle-group-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToggleGroupItemProps } from '../types.js';
+import { type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
+type $$ComponentProps = ToggleGroupItemProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
+export default ToggleGroupItem;

package/dist/components/toggle-group/components/toggle-group.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'overrule';
+import { toggleVariants } from '../../toggle/variants.js';
+type ToggleVariants = VariantProps<typeof toggleVariants>;
+interface ToggleGroupContext extends ToggleVariants {
+    spacing?: number;
+}
+export declare const getToggleGroupCtx: () => Required<ToggleGroupContext>, setToggleGroupCtx: (context: Required<ToggleGroupContext>) => Required<ToggleGroupContext>;
+import type { ToggleGroupRootProps } from '../types.js';
+type $$ComponentProps = ToggleGroupRootProps & ToggleVariants & {
+    spacing?: number;
+};
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './components/toggle-group.svelte';
+export { default as Item } from './components/toggle-group-item.svelte';
+export type { ToggleGroupRootProps as RootProps, ToggleGroupItemProps as ItemProps, } from './types.js';

package/dist/components/toggle-group/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/toggle-group.svelte';
+export { default as Item } from './components/toggle-group-item.svelte';

package/dist/components/toggle-group/toggle-group.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Orientation } from '../../internal/index.js';
+import type { RefAttachment } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
+export declare const toggleGroupAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item"]>;
+/** The root component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+interface ToggleGroupRootStateOpts {
+    readonly id: string;
+    readonly disabled: boolean;
+    readonly rovingFocus: boolean;
+    readonly loop: boolean;
+    readonly orientation: Orientation;
+    ref: HTMLElement | null;
+    selection: SelectionValue;
+}
+export declare class ToggleGroupRootState implements SelectionGroup {
+    static create(opts: ToggleGroupRootStateOpts): ToggleGroupRootState;
+    readonly opts: ToggleGroupRootStateOpts;
+    readonly selection: SelectionValue;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly selectionTakesTabStop = true;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToggleGroupRootStateOpts);
+    get disabled(): boolean;
+    get orientation(): Orientation;
+    get rovingFocus(): boolean;
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly 'data-orientation': Orientation;
+        readonly 'data-disabled': "" | undefined;
+    };
+}
+export declare function createToggleGroupItem(opts: SelectionItemOpts): SelectionItemState;
+export {};

package/dist/components/toggle-group/toggle-group.svelte.js

@@ -0,0 +1,51 @@
+import { createContext } from 'svelte';
+import { attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
+export const toggleGroupAttrs = createBitsAttrs({
+    component: 'toggle-group',
+    parts: ['root', 'item'],
+});
+const [getToggleGroupRoot, setToggleGroupRoot] = createContext();
+export class ToggleGroupRootState {
+    static create(opts) {
+        return setToggleGroupRoot(new ToggleGroupRootState(opts));
+    }
+    opts;
+    selection;
+    rovingFocusGroup;
+    selectionTakesTabStop = true;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.selection = opts.selection;
+        this.attachment = attachRef((v) => (opts.ref = v));
+        this.rovingFocusGroup = new RovingFocusGroup({
+            candidateAttr: toggleGroupAttrs.item,
+            rootNode: () => opts.ref,
+            loop: () => opts.loop,
+            orientation: () => opts.orientation,
+        });
+    }
+    get disabled() {
+        return this.opts.disabled;
+    }
+    get orientation() {
+        return this.opts.orientation;
+    }
+    get rovingFocus() {
+        return this.opts.rovingFocus;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        [toggleGroupAttrs.root]: '',
+        role: 'group',
+        'data-orientation': this.opts.orientation,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
+        ...this.attachment,
+    }));
+}
+export function createToggleGroupItem(opts) {
+    return new SelectionItemState(opts, getToggleGroupRoot());
+}

package/dist/components/toggle-group/types.d.ts

@@ -0,0 +1,61 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+import type { Orientation } from "../../internal/index.js";
+export type BaseToggleGroupRootProps = {
+    /**
+     * Whether the toggle group is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to loop through the items when reaching the end
+     * when using the keyboard.
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the toggle group. Used to handle keyboard
+     * navigation between items.
+     *
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to enable roving focus or not. When enabled, users
+     * navigate between the items using the arrow keys. When disabled,
+     * users navigate between the items using the tab key.
+     */
+    rovingFocus?: boolean;
+};
+export type SingleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps & {
+    type: "single";
+    value?: string;
+    onValueChange?: OnChangeFn<string>;
+}>;
+export type SingleToggleGroupRootProps = SingleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SingleToggleGroupRootPropsWithoutHTML>;
+export type MultipleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps> & {
+    type: "multiple";
+    value?: string[];
+    onValueChange?: OnChangeFn<string[]>;
+};
+export type MultipleToggleGroupRootProps = MultipleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MultipleToggleGroupRootPropsWithoutHTML>;
+export type ToggleGroupRootPropsWithoutHTML = SingleToggleGroupRootPropsWithoutHTML | MultipleToggleGroupRootPropsWithoutHTML;
+export type ToggleGroupRootProps = ToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML>;
+export type ToggleGroupItemSnippetProps = {
+    pressed: boolean;
+};
+export type ToggleGroupItemPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the toggle item is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * The value of the toggle item.
+     */
+    value: string;
+}, ToggleGroupItemSnippetProps>;
+export type ToggleGroupItemProps = ToggleGroupItemPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleGroupItemPropsWithoutHTML>;

package/dist/components/toggle-group/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/toolbar/components/toolbar-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToolbarButtonProps } from '../types.js';
+import { type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
+type $$ComponentProps = ToolbarButtonProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const ToolbarButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/components/toolbar/components/toolbar-group-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToolbarGroupItemProps } from '../types.js';
+import { type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
+type $$ComponentProps = ToolbarGroupItemProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const ToolbarGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ToolbarGroupItem = ReturnType<typeof ToolbarGroupItem>;
+export default ToolbarGroupItem;

package/dist/components/toolbar/components/toolbar-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarGroupProps } from '../types.js';
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "ref" | "value">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/components/toolbar/components/toolbar-link.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarLinkProps } from '../types.js';
+declare const ToolbarLink: import("svelte").Component<ToolbarLinkProps, {}, "ref">;
+type ToolbarLink = ReturnType<typeof ToolbarLink>;
+export default ToolbarLink;

package/dist/components/toolbar/components/toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarRootProps } from '../types.js';
+declare const Toolbar: import("svelte").Component<ToolbarRootProps, {}, "ref">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Root } from './components/toolbar.svelte';
+export { default as Button } from './components/toolbar-button.svelte';
+export { default as Link } from './components/toolbar-link.svelte';
+export { default as Group } from './components/toolbar-group.svelte';
+export { default as GroupItem } from './components/toolbar-group-item.svelte';
+export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from './types.js';

package/dist/components/toolbar/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './components/toolbar.svelte';
+export { default as Button } from './components/toolbar-button.svelte';
+export { default as Link } from './components/toolbar-link.svelte';
+export { default as Group } from './components/toolbar-group.svelte';
+export { default as GroupItem } from './components/toolbar-group-item.svelte';

package/dist/components/toolbar/toolbar.svelte.d.ts

@@ -0,0 +1,95 @@
+import { type ReadableBoxedValues } from '../../internal/tools/index.js';
+import type { Orientation } from '../../internal/index.js';
+import type { BitsKeyboardEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+import { type SelectionGroup, type SelectionItemOpts, SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
+export declare const toolbarAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item", "group", "group-item", "link", "button"]>;
+interface ToolbarRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    orientation: Orientation;
+    loop: boolean;
+}> {
+}
+export declare class ToolbarRootState {
+    static create(opts: ToolbarRootStateOpts): ToolbarRootState;
+    readonly opts: ToolbarRootStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarRootStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly role: "toolbar";
+        readonly 'data-orientation': Orientation;
+    };
+}
+/** The group component's props as accessors over its `$props()`; `ref` writes back to its bindable. */
+interface ToolbarGroupStateOpts {
+    readonly id: string;
+    readonly disabled: boolean;
+    ref: HTMLElement | null;
+    selection: SelectionValue;
+}
+/** A selection group inside the toolbar: its items rove with the toolbar's other items. */
+export declare class ToolbarGroupState implements SelectionGroup {
+    static create(opts: ToolbarGroupStateOpts): ToolbarGroupState;
+    readonly opts: ToolbarGroupStateOpts;
+    readonly root: ToolbarRootState;
+    readonly selection: SelectionValue;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly selectionTakesTabStop = false;
+    readonly extraItemAttrs: {
+        readonly [x: string]: "";
+    };
+    readonly attachment: RefAttachment;
+    constructor(opts: ToolbarGroupStateOpts, root: ToolbarRootState);
+    get disabled(): boolean;
+    get orientation(): Orientation;
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly 'data-orientation': Orientation;
+        readonly 'data-disabled': "" | undefined;
+    };
+}
+export declare function createToolbarGroupItem(opts: SelectionItemOpts): SelectionItemState;
+interface ToolbarLinkStateOpts extends WithRefOpts {
+}
+export declare class ToolbarLinkState {
+    #private;
+    static create(opts: ToolbarLinkStateOpts): ToolbarLinkState;
+    readonly opts: ToolbarLinkStateOpts;
+    readonly root: ToolbarRootState;
+    readonly rovingItem: RovingFocusItem;
+    constructor(opts: ToolbarLinkStateOpts, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly tabindex: number;
+        readonly id: string;
+        readonly role: "link" | undefined;
+        readonly 'data-orientation': Orientation;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface ToolbarButtonStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+}> {
+}
+export declare class ToolbarButtonState {
+    #private;
+    static create(opts: ToolbarButtonStateOpts): ToolbarButtonState;
+    readonly opts: ToolbarButtonStateOpts;
+    readonly root: ToolbarRootState;
+    readonly rovingItem: RovingFocusItem;
+    constructor(opts: ToolbarButtonStateOpts, root: ToolbarRootState);
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly tabindex: number;
+        readonly id: string;
+        readonly role: "button" | undefined;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-orientation': Orientation;
+        readonly disabled: true | undefined;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export {};

package/dist/components/toolbar/toolbar.svelte.js

@@ -0,0 +1,154 @@
+import { createContext } from 'svelte';
+import { attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
+import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+import { SelectionItemState, SelectionValue } from '../../internal/selection.svelte.js';
+export const toolbarAttrs = createBitsAttrs({
+    component: 'toolbar',
+    parts: ['root', 'item', 'group', 'group-item', 'link', 'button'],
+});
+const [getToolbarRoot, setToolbarRoot] = createContext();
+const [getToolbarGroup, setToolbarGroup] = createContext();
+export class ToolbarRootState {
+    static create(opts) {
+        return setToolbarRoot(new ToolbarRootState(opts));
+    }
+    opts;
+    rovingFocusGroup;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.rovingFocusGroup = new RovingFocusGroup({
+            orientation: () => this.opts.orientation.current,
+            loop: () => this.opts.loop.current,
+            rootNode: () => this.opts.ref.current,
+            candidateAttr: toolbarAttrs.item,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'toolbar',
+        'data-orientation': this.opts.orientation.current,
+        [toolbarAttrs.root]: '',
+        ...this.attachment,
+    }));
+}
+/** A selection group inside the toolbar: its items rove with the toolbar's other items. */
+export class ToolbarGroupState {
+    static create(opts) {
+        return setToolbarGroup(new ToolbarGroupState(opts, getToolbarRoot()));
+    }
+    opts;
+    root;
+    selection;
+    rovingFocusGroup;
+    selectionTakesTabStop = false;
+    extraItemAttrs = { [toolbarAttrs['group-item']]: '' };
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.selection = opts.selection;
+        this.rovingFocusGroup = root.rovingFocusGroup;
+        this.attachment = attachRef((v) => (opts.ref = v));
+    }
+    get disabled() {
+        return this.opts.disabled;
+    }
+    get orientation() {
+        return this.root.opts.orientation.current;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id,
+        [toolbarAttrs.group]: '',
+        role: 'group',
+        'data-orientation': this.root.opts.orientation.current,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled),
+        ...this.attachment,
+    }));
+}
+export function createToolbarGroupItem(opts) {
+    return new SelectionItemState(opts, getToolbarGroup());
+}
+export class ToolbarLinkState {
+    static create(opts) {
+        return new ToolbarLinkState(opts, getToolbarRoot());
+    }
+    opts;
+    root;
+    rovingItem;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.rovingItem = new RovingFocusItem({
+            group: this.root.rovingFocusGroup,
+            ref: () => this.opts.ref.current,
+            setRef: (v) => (this.opts.ref.current = v),
+        });
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onkeydown(e) {
+        this.rovingItem.handleKeydown(e);
+    }
+    #role = $derived.by(() => {
+        if (!this.opts.ref.current)
+            return undefined;
+        const tagName = this.opts.ref.current.tagName;
+        if (tagName !== 'A')
+            return 'link';
+        return undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toolbarAttrs.link]: '',
+        [toolbarAttrs.item]: '',
+        role: this.#role,
+        'data-orientation': this.root.opts.orientation.current,
+        //
+        onkeydown: this.onkeydown,
+        ...this.rovingItem.props,
+    }));
+}
+export class ToolbarButtonState {
+    static create(opts) {
+        return new ToolbarButtonState(opts, getToolbarRoot());
+    }
+    opts;
+    root;
+    rovingItem;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.rovingItem = new RovingFocusItem({
+            group: this.root.rovingFocusGroup,
+            ref: () => this.opts.ref.current,
+            setRef: (v) => (this.opts.ref.current = v),
+        });
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    onkeydown(e) {
+        this.rovingItem.handleKeydown(e);
+    }
+    #role = $derived.by(() => {
+        if (!this.opts.ref.current)
+            return undefined;
+        const tagName = this.opts.ref.current.tagName;
+        if (tagName !== 'BUTTON')
+            return 'button';
+        return undefined;
+    });
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toolbarAttrs.item]: '',
+        [toolbarAttrs.button]: '',
+        role: this.#role,
+        'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
+        'data-orientation': this.root.opts.orientation.current,
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
+        //
+        onkeydown: this.onkeydown,
+        ...this.rovingItem.props,
+    }));
+}

package/dist/components/toolbar/types.d.ts

@@ -0,0 +1,34 @@
+import type { ToggleGroupItemProps, ToggleGroupItemPropsWithoutHTML, ToggleGroupRootPropsWithoutHTML } from "../toggle-group/types.js";
+import type { Orientation } from "../../internal/index.js";
+import type { WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../internal/attribute-types.js";
+export type ToolbarRootPropsWithoutHTML = WithChild<{
+    /**
+     * The orientation of the toolbar. This determines how keyboard navigation
+     * will work within the toolbar.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether or not to loop through the toolbar items when navigating with the
+     * keyboard.
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+}>;
+export type ToolbarRootProps = ToolbarRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarRootPropsWithoutHTML>;
+export type ToolbarGroupPropsWithoutHTML = Omit<ToggleGroupRootPropsWithoutHTML, "orientation" | "loop" | "rovingFocus">;
+export type ToolbarGroupProps = ToolbarGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToolbarGroupPropsWithoutHTML>;
+export type ToolbarGroupItemPropsWithoutHTML = ToggleGroupItemPropsWithoutHTML;
+export type ToolbarGroupItemProps = ToggleGroupItemProps;
+export type ToolbarButtonPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the button is disabled or not.
+     */
+    disabled?: boolean | null | undefined;
+}>;
+export type ToolbarButtonProps = ToolbarButtonPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToolbarButtonPropsWithoutHTML>;
+export type ToolbarLinkPropsWithoutHTML = WithChild;
+export type ToolbarLinkProps = ToolbarLinkPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, ToolbarLinkPropsWithoutHTML>;

package/dist/components/toolbar/types.js

@@ -0,0 +1 @@
+export {};