alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/components/ToggleGroup.js

@@ -0,0 +1,90 @@
+import {
+  $bc25b811ec97a172$export$40258cc1d95ff477
+} from "../chunks/chunk-7DDPSWRY.js";
+import "../chunks/chunk-NUFRM6SI.js";
+import "../chunks/chunk-PMGIIYDD.js";
+import "../chunks/chunk-RKDPDEF7.js";
+import "../chunks/chunk-PSSMQKAH.js";
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/ToggleGroup.tsx
+import {
+  createContext,
+  useContext
+} from "react";
+import { ToggleButton } from "./internal/ToggleButton.js";
+
+// src/components/ToggleGroup.module.css
+var ToggleGroup_default = {
+  "ToggleGroup": "alinea-ToggleGroup"
+};
+
+// src/components/ToggleGroup.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(ToggleGroup_default);
+var ToggleGroupContext = createContext({
+  variant: "default",
+  size: "default"
+});
+function ToggleGroup({
+  type,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "default",
+  size = "default",
+  disabled,
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    $bc25b811ec97a172$export$40258cc1d95ff477,
+    {
+      "data-slot": "toggle-group",
+      ...props,
+      "data-variant": variant,
+      "data-size": size,
+      className: styles.ToggleGroup(dist_default.merge({ className })),
+      selectionMode: type,
+      selectedKeys: value === void 0 ? void 0 : toKeys(value),
+      defaultSelectedKeys: defaultValue === void 0 ? void 0 : toKeys(defaultValue),
+      onSelectionChange: (keys) => {
+        const values = Array.from(keys, String);
+        if (type === "single")
+          onValueChange?.(
+            values[0] ?? ""
+          );
+        else
+          onValueChange?.(values);
+      },
+      isDisabled: disabled,
+      orientation,
+      children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    }
+  );
+}
+function toKeys(value) {
+  if (typeof value === "string") return value ? [value] : [];
+  return value;
+}
+function ToggleGroupItem(props) {
+  const { variant, size } = useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      "data-slot": "toggle-group-item",
+      variant,
+      size,
+      ...props
+    }
+  );
+}
+export {
+  ToggleGroup,
+  ToggleGroupItem
+};

package/dist/components/Toolbar.d.ts

@@ -1,8 +1,27 @@
-import type { GroupProps, SeparatorProps, ToggleButtonProps, ToolbarProps as ToolbarPrimitiveProps } from 'react-aria-components';
-export interface ToolbarProps extends Omit<ToolbarPrimitiveProps, 'children'> {
-    children: React.ReactNode;
-}
-export declare function Toolbar({ className, ...props }: ToolbarProps): import("react").JSX.Element;
-export declare function ToolbarGroup({ isDisabled, className, ...props }: GroupProps): import("react").JSX.Element;
-export declare function ToolbarButton({ ...props }: ToggleButtonProps): import("react").JSX.Element;
-export declare function ToolbarSeparator(props: SeparatorProps): import("react").JSX.Element;
+import { type ReactNode } from 'react';
+import { type ButtonProps } from './Button.js';
+import { type ToggleGroupItemProps, type ToggleGroupProps } from './ToggleGroup.js';
+import type { AriaProps, DataProps, Orientation, StyleProps } from './types.js';
+export interface ToolbarProps extends StyleProps, AriaProps, DataProps {
+    orientation?: Orientation;
+    children: ReactNode;
+}
+/** A container for a set of controls, navigable with the arrow keys */
+export declare function Toolbar({ orientation, className, children, ...props }: ToolbarProps): import("react").JSX.Element;
+export interface ToolbarGroupProps extends StyleProps, AriaProps, DataProps {
+    children?: ReactNode;
+}
+/** Groups related controls within a toolbar */
+export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+export interface ToolbarButtonProps extends ButtonProps {
+}
+/** A button within a toolbar, a ghost Button by default */
+export declare function ToolbarButton(props: ToolbarButtonProps): import("react").JSX.Element;
+export type ToolbarToggleGroupProps = ToggleGroupProps;
+export declare function ToolbarToggleGroup(props: ToolbarToggleGroupProps): import("react").JSX.Element;
+export interface ToolbarToggleItemProps extends ToggleGroupItemProps {
+}
+export declare function ToolbarToggleItem(props: ToolbarToggleItemProps): import("react").JSX.Element;
+export interface ToolbarSeparatorProps extends StyleProps {
+}
+export declare function ToolbarSeparator({ className, style }: ToolbarSeparatorProps): import("react").JSX.Element;

package/dist/components/Toolbar.js

@@ -1,80 +1,91 @@
 import {
-  $3a442827418ebe87$export$eb2fcfdbd7ba97d4,
-  $75afe627ae0cc0fa$export$d2b052e7b4be1756,
   $db7105decd081705$export$4c260019440d418f,
   $e28ab3efe3e87743$export$1ff3c3f08ae963c0
-} from "../chunks/chunk-OFEKTDRF.js";
-import "../chunks/chunk-NIVGVRDS.js";
-import "../chunks/chunk-IYAQC63Y.js";
-import "../chunks/chunk-DNJX6CRV.js";
-import "../chunks/chunk-AC4U3IMS.js";
-import "../chunks/chunk-D6RGFNUW.js";
+} from "../chunks/chunk-7DDPSWRY.js";
+import "../chunks/chunk-NUFRM6SI.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
-import "../chunks/chunk-SJBZFMQ2.js";
-import "../chunks/chunk-S4AU6SRS.js";
+import "../chunks/chunk-PSSMQKAH.js";
 import {
   dist_default
 } from "../chunks/chunk-I4OYYAX5.js";
 import "../chunks/chunk-CQ52GEHY.js";
 
+// src/components/Toolbar.tsx
+import { createContext, useContext } from "react";
+import { Button } from "./Button.js";
+
 // src/components/Toolbar.module.css
 var Toolbar_default = {
-  "ToolbarSeparator": "alinea-ToolbarSeparator",
   "Toolbar": "alinea-Toolbar",
-  "ToolbarButton": "alinea-ToolbarButton",
-  "ToolbarGroup": "alinea-ToolbarGroup"
+  "ToolbarGroup": "alinea-ToolbarGroup",
+  "ToolbarSeparator": "alinea-ToolbarSeparator"
 };
 
 // src/components/Toolbar.tsx
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./ToggleGroup.js";
 import { jsx } from "react/jsx-runtime";
 var styles = dist_default(Toolbar_default);
-function Toolbar({ className, ...props }) {
+var ToolbarOrientationContext = createContext("horizontal");
+function Toolbar({
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
     $db7105decd081705$export$4c260019440d418f,
     {
+      "data-slot": "toolbar",
       ...props,
-      className: (renderProps) => styles.Toolbar(
-        dist_default.merge({
-          className: typeof className === "function" ? className(renderProps) : className
-        })
-      )
+      orientation,
+      className: styles.Toolbar(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsx(ToolbarOrientationContext.Provider, { value: orientation, children })
     }
   );
 }
-function ToolbarGroup({ isDisabled, className, ...props }) {
+function ToolbarGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    $3a442827418ebe87$export$eb2fcfdbd7ba97d4,
+    "div",
     {
+      role: "group",
+      "data-slot": "toolbar-group",
       ...props,
-      className: styles.ToolbarGroup(
-        dist_default.merge({
-          className: typeof className === "string" ? className : void 0
-        })
-      ),
-      children: props.children
+      className: styles.ToolbarGroup(dist_default.merge({ className }))
     }
   );
 }
-function ToolbarButton({ ...props }) {
-  const { className, ...rest } = props;
+function ToolbarButton(props) {
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", "data-slot": "toolbar-button", ...props });
+}
+function ToolbarToggleGroup(props) {
+  return /* @__PURE__ */ jsx(ToggleGroup, { "data-slot": "toolbar-toggle-group", ...props });
+}
+function ToolbarToggleItem(props) {
+  return /* @__PURE__ */ jsx(ToggleGroupItem, { "data-slot": "toolbar-toggle-item", ...props });
+}
+function ToolbarSeparator({ className, style }) {
+  const orientation = useContext(ToolbarOrientationContext);
+  const separatorOrientation = orientation === "horizontal" ? "vertical" : "horizontal";
   return /* @__PURE__ */ jsx(
-    $75afe627ae0cc0fa$export$d2b052e7b4be1756,
+    $e28ab3efe3e87743$export$1ff3c3f08ae963c0,
     {
-      ...rest,
-      className: (renderProps) => styles.ToolbarButton(
-        dist_default.merge({
-          className: typeof className === "function" ? className(renderProps) : className
-        })
-      )
+      "data-slot": "toolbar-separator",
+      "data-orientation": separatorOrientation,
+      orientation: separatorOrientation,
+      className: styles.ToolbarSeparator(dist_default.merge({ className })),
+      style
     }
   );
 }
-function ToolbarSeparator(props) {
-  return /* @__PURE__ */ jsx($e28ab3efe3e87743$export$1ff3c3f08ae963c0, { ...props, className: styles.ToolbarSeparator() });
-}
 export {
   Toolbar,
   ToolbarButton,
   ToolbarGroup,
-  ToolbarSeparator
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+  ToolbarToggleItem
 };

package/dist/components/Tooltip.d.ts

@@ -1,7 +1,25 @@
-import { type TooltipProps as TooltipPrimitiveProps, type TooltipTriggerComponentProps } from 'react-aria-components';
 import type { ReactNode } from 'react';
-export interface TooltipProps extends TooltipPrimitiveProps, Omit<TooltipTriggerComponentProps, 'children'> {
+import { type TriggerProps } from './internal/Trigger.js';
+import type { DataProps, OpenStateProps, PositionProps, StyleProps } from './types.js';
+export interface TooltipProps extends OpenStateProps {
+    /** Milliseconds the pointer rests on the trigger before the tooltip opens */
+    delayDuration?: number;
+    /** Milliseconds before the tooltip closes once the pointer leaves */
+    closeDelay?: number;
+    disabled?: boolean;
     children: ReactNode;
-    tooltip: ReactNode;
 }
-export declare function Tooltip({ tooltip, children, ...props }: TooltipProps): import("react").JSX.Element;
+/** Shows a short description when the trigger is hovered or focused */
+export declare function Tooltip({ open, defaultOpen, onOpenChange, delayDuration, closeDelay, disabled, children }: TooltipProps): import("react").JSX.Element;
+export interface TooltipTriggerProps extends TriggerProps {
+}
+/**
+ * The element the tooltip describes. By default this is a Button, with
+ * `asChild` the focusable child is used instead.
+ */
+export declare function TooltipTrigger(props: TooltipTriggerProps): import("react").JSX.Element;
+export interface TooltipContentProps extends StyleProps, DataProps, PositionProps {
+    id?: string;
+    children: ReactNode;
+}
+export declare function TooltipContent({ side, align, sideOffset, alignOffset, className, children, ...props }: TooltipContentProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -2,53 +2,97 @@ import {
   $05a50f7d78b03ad9$export$28c660c63b792dea,
   $05a50f7d78b03ad9$export$8c610744efcf8a1d,
   $4fcfe18fac72dabd$export$746d02f47f4d381
-} from "../chunks/chunk-OFEKTDRF.js";
-import "../chunks/chunk-NIVGVRDS.js";
-import "../chunks/chunk-IYAQC63Y.js";
-import "../chunks/chunk-DNJX6CRV.js";
-import "../chunks/chunk-AC4U3IMS.js";
-import "../chunks/chunk-D6RGFNUW.js";
+} from "../chunks/chunk-7DDPSWRY.js";
+import "../chunks/chunk-NUFRM6SI.js";
+import "../chunks/chunk-PMGIIYDD.js";
 import "../chunks/chunk-RKDPDEF7.js";
-import "../chunks/chunk-SJBZFMQ2.js";
-import "../chunks/chunk-S4AU6SRS.js";
+import "../chunks/chunk-PSSMQKAH.js";
 import {
   dist_default
 } from "../chunks/chunk-I4OYYAX5.js";
 import "../chunks/chunk-CQ52GEHY.js";
 
+// src/components/Tooltip.tsx
+import { placement } from "./internal/Placement.js";
+import { Trigger } from "./internal/Trigger.js";
+
 // src/components/Tooltip.module.css
 var Tooltip_default = {
-  "Tooltip-arrow": "alinea-Tooltip-arrow",
-  "TooltipArrow": "alinea-Tooltip-arrow",
-  "Tooltip": "alinea-Tooltip",
-  "slide-in": "alinea-slide-in",
-  "slideIn": "alinea-slide-in"
+  "TooltipContent-arrow-icon": "alinea-TooltipContent-arrow-icon",
+  "TooltipContentArrowIcon": "alinea-TooltipContent-arrow-icon",
+  "TooltipContent": "alinea-TooltipContent",
+  "TooltipContent-arrow": "alinea-TooltipContent-arrow",
+  "TooltipContentArrow": "alinea-TooltipContent-arrow"
 };
 
 // src/components/Tooltip.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(Tooltip_default);
-function Tooltip({ tooltip, children, ...props }) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsxs($05a50f7d78b03ad9$export$8c610744efcf8a1d, { ...props, children: [
-    children,
-    /* @__PURE__ */ jsxs(
-      $05a50f7d78b03ad9$export$28c660c63b792dea,
-      {
-        ...rest,
-        className: (renderProps) => styles.Tooltip(
-          dist_default.merge({
-            className: typeof className === "function" ? className(renderProps) : className
-          })
-        ),
-        children: [
-          /* @__PURE__ */ jsx($4fcfe18fac72dabd$export$746d02f47f4d381, { className: styles.Tooltip.arrow(), children: /* @__PURE__ */ jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-          tooltip
-        ]
-      }
-    )
-  ] });
+function Tooltip({
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  closeDelay,
+  disabled,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    $05a50f7d78b03ad9$export$8c610744efcf8a1d,
+    {
+      isOpen: open,
+      defaultOpen,
+      onOpenChange,
+      delay: delayDuration,
+      closeDelay,
+      isDisabled: disabled,
+      children
+    }
+  );
+}
+function TooltipTrigger(props) {
+  return /* @__PURE__ */ jsx(Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  side = "top",
+  align,
+  // The 8px arrow plus a gap, so its tip does not touch the trigger
+  sideOffset = 12,
+  alignOffset,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    $05a50f7d78b03ad9$export$28c660c63b792dea,
+    {
+      "data-slot": "tooltip-content",
+      "data-alinea-theme": "",
+      ...props,
+      placement: placement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      className: styles.TooltipContent(dist_default.merge({ className })),
+      children: [
+        /* @__PURE__ */ jsx($4fcfe18fac72dabd$export$746d02f47f4d381, { className: styles.TooltipContent.arrow(), children: ({ placement: placement2 }) => /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-slot": "tooltip-arrow",
+            "data-side": placement2,
+            className: styles.TooltipContent.arrow.icon(),
+            width: 8,
+            height: 8,
+            viewBox: "0 0 8 8",
+            children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" })
+          }
+        ) }),
+        children
+      ]
+    }
+  );
 }
 export {
-  Tooltip
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
 };

package/dist/components/Tree.d.ts

@@ -1,26 +1,53 @@
-import { type ReactNode, type Ref } from 'react';
-import { type TreeItemContentProps as AriaTreeItemContentProps, type TreeItemProps as AriaTreeItemProps, type TreeProps as AriaTreeProps } from 'react-aria-components';
-import { type IconProps } from './Icon.js';
-export interface TreeProps<T extends object> extends Omit<AriaTreeProps<T>, 'className'> {
-    className?: string;
+import { type ReactElement, type ReactNode, type Ref } from 'react';
+import type { AriaProps, DataProps, DragDropProps, IconType, Key, SelectionProps, StyleProps } from './types.js';
+export interface TreeProps<T extends object> extends StyleProps, AriaProps, DataProps, SelectionProps, DragDropProps {
+    /** Items to render with the `children` function */
+    items?: Iterable<T>;
+    children: ReactNode | ((item: T) => ReactNode);
+    expandedKeys?: Iterable<Key>;
+    defaultExpandedKeys?: Iterable<Key>;
+    onExpandedChange?: (keys: Set<Key>) => void;
+    /**
+     * Called when an item is activated with a click or Enter. With single
+     * selection a click selects the item and a double click or Enter activates
+     * it, with multiple selection a click toggles the item once items are
+     * selected.
+     */
+    onAction?: (key: Key) => void;
+    renderEmptyState?: () => ReactNode;
+    /** Only render the rows in view, every row must be `rowHeight` tall */
+    virtualized?: boolean;
+    /** Row height in pixels when virtualized, defaults to 34 */
+    rowHeight?: number;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function Tree<T extends object>(props: TreeProps<T>): import("react").JSX.Element;
-export interface TreeItemContentProps extends Omit<AriaTreeItemContentProps, 'children'> {
-    children?: ReactNode;
-    disableDragging?: boolean;
-    icon?: IconProps['icon'];
-    iconHref?: string;
-    suffix?: ReactNode;
-}
-export declare const TreeItemContent: import("react").MemoExoticComponent<({ disableDragging, icon, iconHref, suffix, children }: TreeItemContentProps) => import("react").JSX.Element>;
-export interface TreeItemProps extends Partial<Omit<AriaTreeItemProps, 'className'>> {
-    className?: string;
-    disableDragging?: boolean;
+export declare function Tree<T extends object>({ className, style, items, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, expandedKeys, defaultExpandedKeys, onExpandedChange, onAction, renderEmptyState, virtualized, rowHeight, getDragData, acceptedDragTypes, canDrop, onReorder, onMove, onDropItems, onDropFiles, renderDragPreview, ref, ...props }: TreeProps<T>): import("react").JSX.Element;
+export interface TreeItemProps<T extends object = object> extends StyleProps, DataProps {
+    id?: Key;
+    /** Plain text title, also used for typeahead */
     title: string;
-    icon?: IconProps['icon'];
-    iconHref?: string;
+    /** Rendered instead of the title */
     label?: ReactNode;
+    icon?: IconType | ReactElement;
+    /** Renders the icon and title as links, pressing the row still selects */
+    href?: string;
+    /**
+     * Marks the link as the current page, or the current location within a
+     * set of pages, such as the folder of an open file that is not listed
+     */
+    current?: 'page' | 'location';
+    /** Trailing content such as status icons */
     suffix?: ReactNode;
+    /** Shows the expand button, set when children load lazily */
+    hasChildItems?: boolean;
+    /**
+     * Hides the drag handle of this item. Its row can still be dragged with a
+     * pointer, reject drops of the item with `canDrop`.
+     */
+    hideDragHandle?: boolean;
+    /** Child items to render with the `children` function */
+    items?: Iterable<T>;
+    /** Nested tree items, or a function rendering each of `items` */
+    children?: ReactNode | ((item: T) => ReactNode);
 }
-export declare function TreeItem({ disableDragging, title, icon, iconHref, label, suffix, children, className, hasChildItems, ...rest }: TreeItemProps): import("react").JSX.Element;
+export declare function TreeItem<T extends object = object>({ id, title, label, icon, href, current, suffix, hasChildItems, hideDragHandle, items, children, className, style, ...props }: TreeItemProps<T>): import("react").JSX.Element;