@aaas-pro/library 0.0.0-stage → 0.1.0

package/dist/primitives/menu.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { type LayerContentProps, type ModalRootProps } from './layer';
+import { type ButtonProps, type DivProps } from './core';
+export declare function createMenu(contextMenu?: boolean): {
+    Root: (props: ModalRootProps) => React.ReactElement;
+    Sub: (props: ModalRootProps) => React.ReactElement;
+    Trigger: ({ onContextMenu, ref, disabled, ...props }: ButtonProps) => React.JSX.Element;
+    Content: ({ onKeyDown, loop, ...props }: LayerContentProps & {
+        loop?: boolean;
+    }) => React.JSX.Element;
+    Item: ({ onSelect, textValue: _text, onClick, onPointerMove, ...props }: Omit<ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) => React.JSX.Element;
+    CheckboxItem: ({ checked, defaultChecked, onCheckedChange, children, onSelect, ...props }: (Omit<ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) & {
+        checked?: boolean | "indeterminate";
+        defaultChecked?: boolean;
+        onCheckedChange?: (checked: boolean) => void;
+    }) => React.JSX.Element;
+    RadioGroup: ({ value, defaultValue, onValueChange, ...props }: Omit<DivProps, "defaultValue"> & {
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (value: string) => void;
+    }) => React.JSX.Element;
+    RadioItem: ({ value, children, onSelect, ...props }: (Omit<ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) & {
+        value: string;
+    }) => React.JSX.Element;
+    ItemIndicator: ({ forceMount, ...props }: React.ComponentProps<"span"> & {
+        forceMount?: true;
+    }) => React.JSX.Element | null;
+    Group: (props: DivProps) => React.JSX.Element;
+    Label: (props: DivProps) => React.JSX.Element;
+    Separator: (props: DivProps) => React.JSX.Element;
+    SubTrigger: ({ onClick, onPointerEnter, onKeyDown, ref, ...props }: ButtonProps) => React.JSX.Element;
+    SubContent: ({ onKeyDown, ...props }: LayerContentProps) => React.JSX.Element;
+    Provider: ({ children, delayDuration }: {
+        children?: React.ReactNode;
+        delayDuration?: number;
+    }) => React.JSX.Element;
+    Anchor: ({ ref, ...props }: DivProps) => React.JSX.Element;
+    Close: ({ onClick, ...props }: ButtonProps) => React.JSX.Element;
+    Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => React.ReactPortal | null;
+    Overlay: ({ forceMount, ...props }: DivProps & {
+        forceMount?: true;
+    }) => React.JSX.Element | null;
+    Title: (props: React.ComponentProps<"h2">) => React.JSX.Element;
+    Description: (props: React.ComponentProps<"p">) => React.JSX.Element;
+    Arrow: (props: React.ComponentProps<"span">) => React.JSX.Element;
+    useLayer: () => import("./layer").LayerState;
+};

package/dist/primitives/menu.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createLayer } from "./layer.js";
+import { useMergedRef, ButtonPart, DivPart, useControllable, selectionEvent, moveFocus } from "./core.js";
+import { useThemePortalContainer } from "../theme/index.js";
+function createMenu(contextMenu = false) {
+  const family = createLayer({ role: "menu", contextMenu });
+  const Selected = React.createContext(false);
+  const Radio = React.createContext({ value: "", set: (_value) => {
+  } });
+  function closeAll(state) {
+    state.setOpen(false);
+    if (state.sub && state.parent)
+      closeAll(state.parent);
+  }
+  function Trigger({ onContextMenu, ref, disabled, ...props }) {
+    const state = family.useLayer();
+    const merged = useMergedRef(ref, state.trigger);
+    return contextMenu ? /* @__PURE__ */ jsx(DivPart, { ...props, ref: merged, tabIndex: disabled ? -1 : props.tabIndex ?? 0, "aria-disabled": disabled || void 0, "aria-haspopup": "menu", "aria-expanded": state.open, "data-state": state.open ? "open" : "closed", onContextMenu: (event) => {
+      onContextMenu?.(event);
+      if (!disabled && !event.defaultPrevented) {
+        event.preventDefault();
+        state.point.current = { x: event.clientX, y: event.clientY };
+        state.setOpen(true);
+      }
+    }, onKeyDown: (event) => {
+      props.onKeyDown?.(event);
+      if (!event.defaultPrevented && !disabled && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
+        event.preventDefault();
+        state.point.current = null;
+        state.setOpen(true);
+      }
+    } }) : /* @__PURE__ */ jsx(family.Trigger, { ...props, ref: merged, disabled });
+  }
+  function Content({ onKeyDown, loop = true, ...props }) {
+    return /* @__PURE__ */ jsx(family.Content, { ...props, onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented)
+        return;
+      moveFocus(event, '[role^="menuitem"]', { vertical: true, loop });
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && event.key !== " ") {
+        const items = [...event.currentTarget.querySelectorAll('[role^="menuitem"]')].filter((n) => !n.matches(":disabled,[aria-disabled=true]"));
+        const from = items.indexOf(document.activeElement);
+        const ordered = [...items.slice(from + 1), ...items.slice(0, from + 1)];
+        ordered.find((n) => n.textContent?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
+      }
+    } });
+  }
+  function Item({ onSelect, textValue: _text, onClick, onPointerMove, ...props }) {
+    const state = family.useLayer();
+    return /* @__PURE__ */ jsx(ButtonPart, { ...props, role: props.role ?? "menuitem", tabIndex: -1, "aria-disabled": props.disabled || void 0, "data-disabled": props.disabled ? "" : void 0, onPointerMove: (event) => {
+      onPointerMove?.(event);
+      if (!props.disabled && event.pointerType !== "touch")
+        event.currentTarget.focus();
+    }, onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented && !selectionEvent(onSelect))
+        closeAll(state);
+    } });
+  }
+  function CheckboxItem({ checked, defaultChecked = false, onCheckedChange, children, onSelect, ...props }) {
+    const [current, set] = useControllable(checked, defaultChecked, (next) => onCheckedChange?.(next === true));
+    return /* @__PURE__ */ jsx(Selected.Provider, { value: current !== false, children: /* @__PURE__ */ jsx(Item, { ...props, role: "menuitemcheckbox", "aria-checked": current === "indeterminate" ? "mixed" : current, "data-state": current ? "checked" : "unchecked", onSelect: (event) => {
+      onSelect?.(event);
+      set(current !== true);
+    }, children }) });
+  }
+  function RadioGroup({ value, defaultValue = "", onValueChange, ...props }) {
+    const [current, set] = useControllable(value, defaultValue, onValueChange);
+    return /* @__PURE__ */ jsx(Radio.Provider, { value: { value: current, set }, children: /* @__PURE__ */ jsx(DivPart, { ...props, role: "group" }) });
+  }
+  function RadioItem({ value, children, onSelect, ...props }) {
+    const state = React.useContext(Radio), checked = state.value === value;
+    return /* @__PURE__ */ jsx(Selected.Provider, { value: checked, children: /* @__PURE__ */ jsx(Item, { ...props, role: "menuitemradio", "aria-checked": checked, "data-state": checked ? "checked" : "unchecked", onSelect: (event) => {
+      onSelect?.(event);
+      state.set(value);
+    }, children }) });
+  }
+  function ItemIndicator({ forceMount, ...props }) {
+    const selected = React.useContext(Selected);
+    return selected || forceMount ? /* @__PURE__ */ jsx("span", { ...props, hidden: !selected }) : null;
+  }
+  function Group(props) {
+    return /* @__PURE__ */ jsx(DivPart, { ...props, role: "group" });
+  }
+  function Label(props) {
+    return /* @__PURE__ */ jsx(DivPart, { ...props });
+  }
+  function Separator(props) {
+    return /* @__PURE__ */ jsx(DivPart, { ...props, role: "separator" });
+  }
+  function SubTrigger({ onClick, onPointerEnter, onKeyDown, ref, ...props }) {
+    const state = family.useLayer();
+    const merged = useMergedRef(ref, state.trigger);
+    return /* @__PURE__ */ jsx(ButtonPart, { ...props, ref: merged, role: "menuitem", tabIndex: -1, "aria-haspopup": "menu", "aria-expanded": state.open, "data-state": state.open ? "open" : "closed", onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        state.setOpen(!state.open);
+    }, onPointerEnter: (event) => {
+      onPointerEnter?.(event);
+      if (!props.disabled)
+        state.setOpen(true);
+    }, onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented && event.key === "ArrowRight") {
+        event.preventDefault();
+        state.setOpen(true);
+      }
+    } });
+  }
+  function SubContent({ onKeyDown, ...props }) {
+    const state = family.useLayer();
+    const container = useThemePortalContainer();
+    return /* @__PURE__ */ jsx(family.Portal, { container, children: /* @__PURE__ */ jsx(Content, { ...props, side: "right", align: "start", onKeyDown: (event) => {
+      onKeyDown?.(event);
+      if (!event.defaultPrevented && event.key === "ArrowLeft") {
+        event.preventDefault();
+        state.setOpen(false);
+      }
+    } }) });
+  }
+  return { ...family, Root: family.Root, Sub: family.Sub, Trigger, Content, Item, CheckboxItem, RadioGroup, RadioItem, ItemIndicator, Group, Label, Separator, SubTrigger, SubContent };
+}
+export {
+  createMenu
+};

package/dist/primitives/menubar.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { type DivProps } from './core';
+import type { ModalRootProps } from './layer';
+declare const menu: {
+    Root: (props: ModalRootProps) => React.ReactElement;
+    Sub: (props: ModalRootProps) => React.ReactElement;
+    Trigger: ({ onContextMenu, ref, disabled, ...props }: import("./core").ButtonProps) => React.JSX.Element;
+    Content: ({ onKeyDown, loop, ...props }: import("./layer").LayerContentProps & {
+        loop?: boolean;
+    }) => React.JSX.Element;
+    Item: ({ onSelect, textValue: _text, onClick, onPointerMove, ...props }: Omit<import("./core").ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) => React.JSX.Element;
+    CheckboxItem: ({ checked, defaultChecked, onCheckedChange, children, onSelect, ...props }: (Omit<import("./core").ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) & {
+        checked?: boolean | "indeterminate";
+        defaultChecked?: boolean;
+        onCheckedChange?: (checked: boolean) => void;
+    }) => React.JSX.Element;
+    RadioGroup: ({ value, defaultValue, onValueChange, ...props }: Omit<DivProps, "defaultValue"> & {
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (value: string) => void;
+    }) => React.JSX.Element;
+    RadioItem: ({ value, children, onSelect, ...props }: (Omit<import("./core").ButtonProps, "onSelect"> & {
+        onSelect?: (event: Event) => void;
+        textValue?: string;
+    }) & {
+        value: string;
+    }) => React.JSX.Element;
+    ItemIndicator: ({ forceMount, ...props }: React.ComponentProps<"span"> & {
+        forceMount?: true;
+    }) => React.JSX.Element | null;
+    Group: (props: DivProps) => React.JSX.Element;
+    Label: (props: DivProps) => React.JSX.Element;
+    Separator: (props: DivProps) => React.JSX.Element;
+    SubTrigger: ({ onClick, onPointerEnter, onKeyDown, ref, ...props }: import("./core").ButtonProps) => React.JSX.Element;
+    SubContent: ({ onKeyDown, ...props }: import("./layer").LayerContentProps) => React.JSX.Element;
+    Provider: ({ children, delayDuration }: {
+        children?: React.ReactNode;
+        delayDuration?: number;
+    }) => React.JSX.Element;
+    Anchor: ({ ref, ...props }: DivProps) => React.JSX.Element;
+    Close: ({ onClick, ...props }: import("./core").ButtonProps) => React.JSX.Element;
+    Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => React.ReactPortal | null;
+    Overlay: ({ forceMount, ...props }: DivProps & {
+        forceMount?: true;
+    }) => React.JSX.Element | null;
+    Title: (props: React.ComponentProps<"h2">) => React.JSX.Element;
+    Description: (props: React.ComponentProps<"p">) => React.JSX.Element;
+    Arrow: (props: React.ComponentProps<"span">) => React.JSX.Element;
+    useLayer: () => import("./layer").LayerState;
+};
+export declare function Root({ value, defaultValue, onValueChange, onKeyDown, loop, ...props }: Omit<DivProps, 'defaultValue'> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+}): React.JSX.Element;
+export declare function Menu({ value, open, defaultOpen, onOpenChange, ...props }: ModalRootProps & {
+    value?: string;
+}): React.JSX.Element;
+export declare function Trigger(props: React.ComponentProps<typeof menu.Trigger>): React.JSX.Element;
+export declare const Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => React.ReactPortal | null, Content: ({ onKeyDown, loop, ...props }: import("./layer").LayerContentProps & {
+    loop?: boolean;
+}) => React.JSX.Element, Group: (props: DivProps) => React.JSX.Element, Label: (props: DivProps) => React.JSX.Element, Item: ({ onSelect, textValue: _text, onClick, onPointerMove, ...props }: Omit<import("./core").ButtonProps, "onSelect"> & {
+    onSelect?: (event: Event) => void;
+    textValue?: string;
+}) => React.JSX.Element, CheckboxItem: ({ checked, defaultChecked, onCheckedChange, children, onSelect, ...props }: (Omit<import("./core").ButtonProps, "onSelect"> & {
+    onSelect?: (event: Event) => void;
+    textValue?: string;
+}) & {
+    checked?: boolean | "indeterminate";
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}) => React.JSX.Element, RadioGroup: ({ value, defaultValue, onValueChange, ...props }: Omit<DivProps, "defaultValue"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}) => React.JSX.Element, RadioItem: ({ value, children, onSelect, ...props }: (Omit<import("./core").ButtonProps, "onSelect"> & {
+    onSelect?: (event: Event) => void;
+    textValue?: string;
+}) & {
+    value: string;
+}) => React.JSX.Element, Separator: (props: DivProps) => React.JSX.Element, ItemIndicator: ({ forceMount, ...props }: React.ComponentProps<"span"> & {
+    forceMount?: true;
+}) => React.JSX.Element | null, Sub: (props: ModalRootProps) => React.ReactElement, SubTrigger: ({ onClick, onPointerEnter, onKeyDown, ref, ...props }: import("./core").ButtonProps) => React.JSX.Element, SubContent: ({ onKeyDown, ...props }: import("./layer").LayerContentProps) => React.JSX.Element;
+export {};

package/dist/primitives/menubar.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createMenu } from "./menu.js";
+import { useControllable, DivPart, moveFocus } from "./core.js";
+const menu = createMenu();
+const Context = React.createContext({ value: "", set: (_value) => {
+} });
+function Root({ value, defaultValue = "", onValueChange, onKeyDown, loop = true, ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onValueChange);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { value: current, set }, children: /* @__PURE__ */ jsx(DivPart, { ...props, role: "menubar", onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented)
+      moveFocus(event, "[data-menubar-trigger]", { select: !!current, loop });
+  } }) });
+}
+function Menu({ value, open, defaultOpen, onOpenChange, ...props }) {
+  const state = React.useContext(Context), generated = React.useId(), key = value ?? generated;
+  return /* @__PURE__ */ jsx(menu.Root, { ...props, open: open ?? state.value === key, defaultOpen, onOpenChange: (next) => {
+    state.set(next ? key : "");
+    onOpenChange?.(next);
+  } });
+}
+function Trigger(props) {
+  return /* @__PURE__ */ jsx(menu.Trigger, { ...props, role: "menuitem", "data-menubar-trigger": "" });
+}
+const { Portal, Content, Group, Label, Item, CheckboxItem, RadioGroup, RadioItem, Separator, ItemIndicator, Sub, SubTrigger, SubContent } = menu;
+export {
+  CheckboxItem,
+  Content,
+  Group,
+  Item,
+  ItemIndicator,
+  Label,
+  Menu,
+  Portal,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger
+};

package/dist/primitives/navigation-menu.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { type ButtonProps, type DivProps } from './core';
+import type { OutsideEvent } from './layer';
+interface RootProps extends Omit<React.ComponentProps<'nav'>, 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function Root({ value, defaultValue, onValueChange, orientation, onKeyDown, ...props }: RootProps): React.JSX.Element;
+export declare function List(props: React.ComponentProps<'ul'>): React.JSX.Element;
+export declare function Item({ value, ...props }: React.ComponentProps<'li'> & {
+    value?: string;
+}): React.JSX.Element;
+export declare function Trigger({ onClick, onKeyDown, ...props }: ButtonProps): React.JSX.Element;
+export declare function Content({ forceMount, style, ref, onKeyDown, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ...props }: DivProps & {
+    forceMount?: true;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: OutsideEvent) => void;
+    onFocusOutside?: (event: OutsideEvent) => void;
+    onInteractOutside?: (event: OutsideEvent) => void;
+}): React.JSX.Element | null;
+export declare function Viewport({ ref, style, ...props }: DivProps): React.JSX.Element;
+export declare function Link({ asChild, active, onSelect, onClick, ...props }: Omit<React.ComponentProps<'a'>, 'onSelect'> & {
+    asChild?: boolean;
+    active?: boolean;
+    onSelect?: (event: Event) => void;
+}): React.JSX.Element;
+export declare function Indicator({ forceMount, ...props }: DivProps & {
+    forceMount?: true;
+}): React.JSX.Element | null;
+export {};

package/dist/primitives/navigation-menu.js

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useMergedRef, DivPart, Slot, useControllable, moveFocus, ButtonPart, selectionEvent } from "./core.js";
+const Context = React.createContext({ value: "", set: (_value) => {
+}, viewport: null, setViewport: (_node) => {
+} });
+const ItemContext = React.createContext("");
+function Root({ value, defaultValue = "", onValueChange, orientation = "horizontal", onKeyDown, ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onValueChange), [viewport, setViewport] = React.useState(null);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { value: current, set, viewport, setViewport }, children: /* @__PURE__ */ jsx("nav", { ...props, "aria-label": props["aria-label"] ?? "导航菜单", onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented) {
+      if (event.key === "Escape") {
+        set("");
+        event.preventDefault();
+      } else if (event.target.closest("[data-navigation-trigger]"))
+        moveFocus(event, "[data-navigation-trigger]", { vertical: orientation === "vertical" });
+    }
+  } }) });
+}
+function List(props) {
+  return /* @__PURE__ */ jsx("ul", { ...props });
+}
+function Item({ value, ...props }) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: value ?? id, children: /* @__PURE__ */ jsx("li", { ...props }) });
+}
+function Trigger({ onClick, onKeyDown, ...props }) {
+  const state = React.useContext(Context), value = React.useContext(ItemContext), open = state.value === value;
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, "data-navigation-trigger": "", "aria-expanded": open, "aria-controls": `${value}-navigation-content`, "data-state": open ? "open" : "closed", onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented)
+      state.set(open ? "" : value);
+  }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented && event.key === "ArrowDown") {
+      event.preventDefault();
+      state.set(value);
+      queueMicrotask(() => document.getElementById(`${value}-navigation-content`)?.querySelector("a,button")?.focus());
+    }
+  } });
+}
+function Content({ forceMount, style, ref, onKeyDown, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ...props }) {
+  const state = React.useContext(Context), value = React.useContext(ItemContext), open = state.value === value;
+  const local = React.useRef(null), merged = useMergedRef(ref, local);
+  const latest = React.useRef({ onPointerDownOutside, onFocusOutside, onInteractOutside });
+  latest.current = { onPointerDownOutside, onFocusOutside, onInteractOutside };
+  React.useEffect(() => {
+    if (!open)
+      return;
+    const outside = (originalEvent) => {
+      const node = local.current, target = originalEvent.target;
+      if (!node || node.contains(target) || node.closest("nav")?.contains(target))
+        return;
+      const event = new CustomEvent("interactOutside", { cancelable: true, detail: { originalEvent } });
+      if (originalEvent.type === "pointerdown")
+        latest.current.onPointerDownOutside?.(event);
+      else
+        latest.current.onFocusOutside?.(event);
+      latest.current.onInteractOutside?.(event);
+      if (!event.defaultPrevented)
+        state.set("");
+    };
+    document.addEventListener("pointerdown", outside);
+    document.addEventListener("focusin", outside);
+    return () => {
+      document.removeEventListener("pointerdown", outside);
+      document.removeEventListener("focusin", outside);
+    };
+  }, [open, state.set]);
+  if (!open && !forceMount)
+    return null;
+  const content = /* @__PURE__ */ jsx(DivPart, { ...props, ref: merged, id: `${value}-navigation-content`, hidden: !open, "data-state": open ? "open" : "closed", onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.key === "Escape" && !event.defaultPrevented) {
+      event.stopPropagation();
+      onEscapeKeyDown?.(event.nativeEvent);
+      if (!event.nativeEvent.defaultPrevented) {
+        const nav = local.current?.closest("nav");
+        const trigger = [...nav?.querySelectorAll("[data-navigation-trigger]") ?? []].find((node) => node.getAttribute("aria-controls") === `${value}-navigation-content`);
+        state.set("");
+        trigger?.focus();
+        event.preventDefault();
+      }
+    }
+  }, style: { position: state.viewport ? "relative" : "absolute", top: state.viewport ? void 0 : "100%", zIndex: 80, ...style } });
+  return state.viewport ? createPortal(content, state.viewport) : content;
+}
+function Viewport({ ref, style, ...props }) {
+  const state = React.useContext(Context);
+  return /* @__PURE__ */ jsx(DivPart, { ...props, ref: React.useCallback((node) => {
+    state.setViewport(node);
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  }, [state.setViewport, ref]), hidden: !state.value, "data-state": state.value ? "open" : "closed", style: { width: "max-content", height: "auto", ...style } });
+}
+function Link({ asChild, active, onSelect, onClick, ...props }) {
+  const state = React.useContext(Context), attrs = { ...props, "data-active": active, "aria-current": active ? "page" : void 0, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented && !selectionEvent(onSelect))
+      state.set("");
+  } };
+  return asChild ? /* @__PURE__ */ jsx(Slot, { ...attrs, ref: props.ref }) : /* @__PURE__ */ jsx("a", { ...attrs });
+}
+function Indicator({ forceMount, ...props }) {
+  const state = React.useContext(Context);
+  return state.value || forceMount ? /* @__PURE__ */ jsx(DivPart, { ...props, hidden: !state.value, "data-state": state.value ? "visible" : "hidden" }) : null;
+}
+export {
+  Content,
+  Indicator,
+  Item,
+  Link,
+  List,
+  Root,
+  Trigger,
+  Viewport
+};

package/dist/primitives/popover.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { type ModalRootProps } from './layer';
+export declare const Trigger: ({ onClick, onKeyDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onContextMenu, ref, disabled, ...props }: import("./core").ButtonProps) => React.JSX.Element, Anchor: ({ ref, ...props }: import("./core").DivProps) => React.JSX.Element, Close: ({ onClick, ...props }: import("./core").ButtonProps) => React.JSX.Element, Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => React.ReactPortal | null, Content: ({ forceMount, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ref, style, onKeyDown, onPointerEnter, onPointerLeave, ...props }: import("./layer").LayerContentProps) => React.JSX.Element | null;
+export declare const Root: (props: ModalRootProps) => React.ReactElement;

package/dist/primitives/popover.js

@@ -0,0 +1,12 @@
+import { createLayer } from "./layer.js";
+const family = createLayer();
+const { Trigger, Anchor, Close, Portal, Content } = family;
+const Root = family.Root;
+export {
+  Anchor,
+  Close,
+  Content,
+  Portal,
+  Root,
+  Trigger
+};

package/dist/primitives/progress.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare function Root({ value, max, getValueLabel, ...props }: React.ComponentProps<'div'> & {
+    value?: number | null;
+    max?: number;
+    getValueLabel?: (value: number, max: number) => string;
+}): React.JSX.Element;
+export declare function Indicator(props: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/primitives/progress.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+function Root({ value = null, max = 100, getValueLabel, ...props }) {
+  const limit = max > 0 ? max : 100;
+  const current = value === null ? null : Math.max(0, Math.min(limit, value));
+  return /* @__PURE__ */ jsx("div", { ...props, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": limit, "aria-valuenow": current ?? void 0, "aria-valuetext": current === null ? void 0 : getValueLabel?.(current, limit), "data-state": current === null ? "indeterminate" : current === limit ? "complete" : "loading" });
+}
+function Indicator(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
+}
+export {
+  Indicator,
+  Root
+};

package/dist/primitives/radio-group.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type ButtonProps, type DivProps } from './core';
+export interface RadioGroupProps extends Omit<DivProps, 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    loop?: boolean;
+}
+export declare function Root({ value, defaultValue, onValueChange, disabled, required, name, orientation, loop, onKeyDown, children, ...props }: RadioGroupProps): React.JSX.Element;
+export declare function Item({ value, required, onClick, ...props }: ButtonProps & {
+    value: string;
+    required?: boolean;
+}): React.JSX.Element;
+export declare function Indicator(props: React.ComponentProps<'span'>): React.JSX.Element | null;

package/dist/primitives/radio-group.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ButtonPart, useControllable, DivPart, moveFocus } from "./core.js";
+const Context = React.createContext({ value: "", set: (_value) => {
+}, disabled: false, name: void 0, required: false });
+const Checked = React.createContext(false);
+function Root({ value, defaultValue = "", onValueChange, disabled = false, required = false, name, orientation = "vertical", loop = true, onKeyDown, children, ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onValueChange);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { value: current, set, disabled, name, required }, children: /* @__PURE__ */ jsx(DivPart, { ...props, role: "radiogroup", "aria-required": required, "aria-orientation": orientation, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented)
+      moveFocus(event, '[role="radio"]', { vertical: orientation === "vertical", loop, select: true });
+  }, children }) });
+}
+function Item({ value, required = false, onClick, ...props }) {
+  const state = React.useContext(Context);
+  const checked = state.value === value;
+  return /* @__PURE__ */ jsxs(Checked.Provider, { value: checked, children: [
+    /* @__PURE__ */ jsx(ButtonPart, { ...props, role: "radio", "aria-checked": checked, disabled: state.disabled || props.disabled, "data-state": checked ? "checked" : "unchecked", tabIndex: checked || !state.value ? 0 : -1, onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        state.set(value);
+    } }),
+    state.name && /* @__PURE__ */ jsx("input", { type: "radio", name: state.name, value, required: state.required || required, form: props.form, disabled: state.disabled || props.disabled, checked, onChange: (event) => {
+      if (event.target.checked) state.set(value);
+    }, tabIndex: -1, "aria-hidden": "true", style: { position: "absolute", opacity: 0, width: 1, height: 1, pointerEvents: "none" } })
+  ] });
+}
+function Indicator(props) {
+  return React.useContext(Checked) ? /* @__PURE__ */ jsx("span", { ...props }) : null;
+}
+export {
+  Indicator,
+  Item,
+  Root
+};

package/dist/primitives/resizable.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type Orientation = 'horizontal' | 'vertical';
+export interface GroupProps extends React.ComponentProps<'div'> {
+    orientation?: Orientation;
+    onLayoutChange?: (sizes: Record<string, number>) => void;
+}
+export interface PanelProps extends Omit<React.ComponentProps<'div'>, 'onResize'> {
+    defaultSize?: number | string;
+    minSize?: number | string;
+    maxSize?: number | string;
+    onResize?: (size: number) => void;
+}
+export interface SeparatorProps extends React.ComponentProps<'div'> {
+    disabled?: boolean;
+}
+export declare function Group({ orientation, onLayoutChange, children, ref, ...props }: GroupProps): React.JSX.Element;
+export declare function Panel({ id, defaultSize, minSize, maxSize, onResize, ref, style, ...props }: PanelProps): React.JSX.Element;
+export declare function Separator({ disabled, onPointerDown, onKeyDown, style, ref, ...props }: SeparatorProps): React.JSX.Element;
+export {};