alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/components/Sheet.d.ts

@@ -0,0 +1,52 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import type { AriaProps, DataProps, IconType, StyleProps } from './types.js';
+export interface SheetContentProps extends StyleProps, AriaProps, DataProps {
+    /** Called on Escape while focus is inside the sheet, and by `SheetClose` */
+    onClose?: () => void;
+    /** Accessible label of the back button in the header, defaults to "Back" */
+    backLabel?: string;
+    children: ReactNode;
+}
+/**
+ * A non-modal panel that fills its positioned container. Mount it to open
+ * the sheet: focus moves to its first field, and returns to the previously
+ * focused element when it unmounts. Labelled by its `SheetTitle` unless
+ * given an `aria-label`.
+ */
+export declare function SheetContent({ onClose, backLabel, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }: SheetContentProps): import("react").JSX.Element;
+export interface SheetPartProps extends StyleProps, AriaProps, DataProps {
+    children?: ReactNode;
+}
+export interface SheetHeaderProps extends SheetPartProps {
+}
+/**
+ * Top bar of the sheet, eg. a badge, the title, a key hint and SheetClose.
+ * Starts with a back button when the sheet has an `onClose`.
+ */
+export declare function SheetHeader({ className, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+export interface SheetTitleProps extends SheetPartProps {
+}
+export declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react").JSX.Element;
+export interface SheetBodyProps extends SheetPartProps {
+}
+/** Scrolling content of the sheet, holds SheetSection elements */
+export declare function SheetBody({ className, ...props }: SheetBodyProps): import("react").JSX.Element;
+export interface SheetSectionProps extends SheetPartProps {
+    title?: ReactNode;
+    /** Shown before the title */
+    icon?: IconType;
+}
+export declare function SheetSection({ title, icon, className, children, ...props }: SheetSectionProps): import("react").JSX.Element;
+export interface SheetFooterProps extends SheetPartProps {
+}
+/**
+ * Bottom bar of the sheet, holds small ghost buttons. Destructive buttons
+ * are pushed to the end.
+ */
+export declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react").JSX.Element;
+export interface SheetCloseProps extends StyleProps, DataProps {
+    'aria-label': string;
+    /** Defaults to the `onClose` of the surrounding SheetContent */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export declare function SheetClose({ onClick, ...props }: SheetCloseProps): import("react").JSX.Element;

package/dist/components/Sheet.js

@@ -0,0 +1,216 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/Sheet.tsx
+import {
+  createContext,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+import { IcRoundArrowBack, IcRoundClose } from "alinea/dashboard/icons";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+
+// src/components/Sheet.module.css
+var Sheet_default = {
+  "SheetBody": "alinea-SheetBody",
+  "SheetHeader-back": "alinea-SheetHeader-back",
+  "SheetHeaderBack": "alinea-SheetHeader-back",
+  "SheetSection-title-icon": "alinea-SheetSection-title-icon",
+  "SheetSectionTitleIcon": "alinea-SheetSection-title-icon",
+  "SheetContent": "alinea-SheetContent",
+  "SheetFooter": "alinea-SheetFooter",
+  "SheetSection-title": "alinea-SheetSection-title",
+  "SheetSectionTitle": "alinea-SheetSection-title",
+  "SheetHeader": "alinea-SheetHeader",
+  "SheetSection": "alinea-SheetSection",
+  "SheetTitle": "alinea-SheetTitle"
+};
+
+// src/components/Sheet.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(Sheet_default);
+var fields = 'input:not([type="hidden"]), textarea, select, [contenteditable="true"]';
+var focusables = 'button, [href], input, textarea, select, [contenteditable="true"], [tabindex]';
+var SheetContext = createContext(null);
+function focusable(element) {
+  return element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest('[aria-hidden="true"], [inert]');
+}
+function first(root, selector) {
+  return Array.from(root.querySelectorAll(selector)).find(
+    focusable
+  );
+}
+function SheetContent({
+  onClose,
+  backLabel = "Back",
+  className,
+  children,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const ref = useRef(null);
+  const titleId = useId();
+  const context = useMemo(
+    () => ({ titleId, backLabel, onClose }),
+    [titleId, backLabel, onClose]
+  );
+  useLayoutEffect(() => {
+    const root = ref.current;
+    if (!root) return;
+    const previous = document.activeElement;
+    const body = root.querySelector('[data-slot="sheet-body"]') ?? root;
+    const target = first(body, fields) ?? first(body, focusables) ?? root;
+    target.focus();
+    return () => {
+      const active = document.activeElement;
+      const lost = !active || active === document.body || root.contains(active);
+      if (lost && previous instanceof HTMLElement && previous.isConnected)
+        previous.focus();
+    };
+  }, []);
+  function onKeyDown(event) {
+    if (event.key !== "Escape" || event.defaultPrevented || !onClose) return;
+    event.preventDefault();
+    onClose();
+  }
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-content",
+      role: "dialog",
+      tabIndex: -1,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby ?? (ariaLabel ? void 0 : titleId),
+      ...props,
+      ref,
+      className: styles.SheetContent(dist_default.merge({ className })),
+      onKeyDown,
+      children
+    }
+  ) });
+}
+function SheetHeader({ className, children, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      ...props,
+      className: styles.SheetHeader(dist_default.merge({ className })),
+      children: [
+        context?.onClose && /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-slot": "sheet-back",
+            variant: "ghost",
+            size: "icon-sm",
+            icon: IcRoundArrowBack,
+            "aria-label": context.backLabel,
+            className: styles.SheetHeader.back(),
+            onClick: context.onClose
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      "data-slot": "sheet-title",
+      id: context?.titleId,
+      ...props,
+      className: styles.SheetTitle(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      ...props,
+      className: styles.SheetBody(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetSection({
+  title,
+  icon,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "sheet-section",
+      ...props,
+      className: styles.SheetSection(dist_default.merge({ className })),
+      children: [
+        title && /* @__PURE__ */ jsxs(
+          "h3",
+          {
+            "data-slot": "sheet-section-title",
+            className: styles.SheetSection.title(),
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon,
+                  "data-slot": "sheet-section-icon",
+                  className: styles.SheetSection.title.icon()
+                }
+              ),
+              title
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      ...props,
+      className: styles.SheetFooter(dist_default.merge({ className }))
+    }
+  );
+}
+function SheetClose({ onClick, ...props }) {
+  const context = useContext(SheetContext);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "sheet-close",
+      ...props,
+      variant: "ghost",
+      size: "icon-sm",
+      icon: IcRoundClose,
+      onClick: onClick ?? (() => context?.onClose?.())
+    }
+  );
+}
+export {
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetSection,
+  SheetTitle
+};

package/dist/components/Sidebar.d.ts

@@ -0,0 +1,56 @@
+import { type ReactNode, type Ref } from 'react';
+import type { AriaProps, DataProps, StyleProps } from './types.js';
+export interface SidebarProps extends StyleProps, AriaProps, DataProps {
+    /**
+     * The edge of the layout the sidebar is placed on, defaults to left.
+     * Exposed as `data-side` for styling.
+     */
+    side?: 'left' | 'right';
+    children: ReactNode;
+}
+/**
+ * A column next to the SidebarInset, eg. the content tree or entry details.
+ * Place it in a ResizablePanel to make it resizable. On small screens it
+ * covers the layout.
+ */
+export declare function Sidebar({ side, className, ...props }: SidebarProps): import("react").JSX.Element;
+export interface SidebarHeaderProps extends StyleProps, AriaProps, DataProps {
+    children: ReactNode;
+}
+export declare function SidebarHeader({ className, ...props }: SidebarHeaderProps): import("react").JSX.Element;
+export interface SidebarContentProps extends StyleProps, AriaProps, DataProps {
+    /** Scroll the content when it overflows, leave off when children scroll */
+    scroll?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children: ReactNode;
+}
+/** Fills the space between the header and footer */
+export declare function SidebarContent({ scroll, className, ...props }: SidebarContentProps): import("react").JSX.Element;
+export interface SidebarFooterProps extends StyleProps, AriaProps, DataProps {
+    children: ReactNode;
+}
+export declare function SidebarFooter({ className, ...props }: SidebarFooterProps): import("react").JSX.Element;
+export interface SidebarGroupProps extends StyleProps, AriaProps, DataProps {
+    children: ReactNode;
+}
+/** A section of the sidebar, optionally titled with a SidebarGroupLabel */
+export declare function SidebarGroup({ className, children, ...props }: SidebarGroupProps): import("react").JSX.Element;
+export interface SidebarGroupLabelProps extends StyleProps, DataProps {
+    /** Defaults to an id that labels the surrounding SidebarGroup */
+    id?: string;
+    children: ReactNode;
+}
+export declare function SidebarGroupLabel({ className, ...props }: SidebarGroupLabelProps): import("react").JSX.Element;
+export interface SidebarGroupActionProps extends StyleProps, DataProps {
+    children: ReactNode;
+}
+/**
+ * Places a small control, eg. a Button or DropdownMenuTrigger with
+ * `size="sm"`, at the end of the group label.
+ */
+export declare function SidebarGroupAction({ className, ...props }: SidebarGroupActionProps): import("react").JSX.Element;
+export interface SidebarInsetProps extends StyleProps, AriaProps, DataProps {
+    children: ReactNode;
+}
+/** The main content column next to the sidebars */
+export declare function SidebarInset({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;

package/dist/components/Sidebar.js

@@ -0,0 +1,136 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/Sidebar.tsx
+import { createContext, useContext, useId } from "react";
+
+// src/components/Sidebar.module.css
+var Sidebar_default = {
+  "SidebarGroup": "alinea-SidebarGroup",
+  "SidebarGroupAction": "alinea-SidebarGroupAction",
+  "Sidebar": "alinea-Sidebar",
+  "SidebarGroupLabel": "alinea-SidebarGroupLabel",
+  "SidebarHeader": "alinea-SidebarHeader",
+  "SidebarInset": "alinea-SidebarInset",
+  "SidebarContent": "alinea-SidebarContent",
+  "SidebarFooter": "alinea-SidebarFooter"
+};
+
+// src/components/Sidebar.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(Sidebar_default);
+function Sidebar({ side = "left", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar",
+      ...props,
+      "data-side": side,
+      className: styles.Sidebar(dist_default.merge({ className }))
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      "data-slot": "sidebar-header",
+      ...props,
+      className: styles.SidebarHeader(dist_default.merge({ className }))
+    }
+  );
+}
+function SidebarContent({
+  scroll,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      ...props,
+      "data-scroll": scroll || void 0,
+      className: styles.SidebarContent(dist_default.merge({ className }))
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      "data-slot": "sidebar-footer",
+      ...props,
+      className: styles.SidebarFooter(dist_default.merge({ className }))
+    }
+  );
+}
+var SidebarGroupLabelId = createContext(void 0);
+function SidebarGroup({
+  className,
+  children,
+  ...props
+}) {
+  const labelId = useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      role: "group",
+      "aria-labelledby": labelId,
+      ...props,
+      className: styles.SidebarGroup(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsx(SidebarGroupLabelId.Provider, { value: labelId, children })
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  ...props
+}) {
+  const id = useContext(SidebarGroupLabelId);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-label",
+      id,
+      ...props,
+      className: styles.SidebarGroupLabel(dist_default.merge({ className }))
+    }
+  );
+}
+function SidebarGroupAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-group-action",
+      ...props,
+      className: styles.SidebarGroupAction(dist_default.merge({ className }))
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-inset",
+      ...props,
+      className: styles.SidebarInset(dist_default.merge({ className }))
+    }
+  );
+}
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInset
+};

package/dist/components/SortableList.d.ts

@@ -0,0 +1,84 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
+import { type ButtonProps } from './Button.js';
+import type { DragMoveEvent, Key } from './types.js';
+export interface SortableListProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Enables reordering: items with an `id` follow the pointer when their
+     * `SortableListItemHeader` is dragged, the other items move aside as it
+     * passes them. With focus in the header, Alt+ArrowUp and Alt+ArrowDown
+     * move an item. Called with the key of the moved item and the item it was
+     * dropped before or after. Update the order synchronously: the dropped item
+     * glides into the place it renders in right after this returns.
+     */
+    onReorder?: (event: DragMoveEvent) => void;
+}
+export declare function SortableList({ className, role, onReorder, ...props }: SortableListProps): import("react").JSX.Element;
+export interface SortableListItemProps extends Omit<ComponentPropsWithoutRef<'div'>, 'id'> {
+    /**
+     * Identifies the item within its list. Items with an id can be dragged when
+     * the list has `onReorder`. The id is not rendered as a DOM id.
+     */
+    id?: Key;
+    /** Highlights the item, eg. while its settings are open next to the list */
+    current?: boolean;
+}
+export declare function SortableListItem({ id, className, current, ...props }: SortableListItemProps): import("react").JSX.Element;
+export interface SortableListItemHeaderProps extends ComponentPropsWithoutRef<'div'> {
+}
+/**
+ * Top bar of an item, holds its title and actions. Drags the item when the
+ * list has `onReorder`, a press that does not move still clicks.
+ */
+export declare function SortableListItemHeader({ className, onPointerDownCapture, onKeyDown, onDragStart, ...props }: SortableListItemHeaderProps): import("react").JSX.Element;
+export interface SortableListItemTitleProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Row of the toggle, badges and description of an item, fills the header */
+export declare function SortableListItemTitle({ className, ...props }: SortableListItemTitleProps): import("react").JSX.Element;
+export interface SortableListItemTriggerProps extends Omit<ButtonProps, 'variant' | 'size' | 'icon' | 'asChild'> {
+    /** Ends the button with a "…", defaults to true */
+    more?: boolean;
+}
+/**
+ * The badges and description of an item as one button that ends in a "…",
+ * eg. to open the settings of the item. Fills the title up to the actions.
+ */
+export declare function SortableListItemTrigger({ className, more, children, ...props }: SortableListItemTriggerProps): import("react").JSX.Element;
+export interface SortableListItemInsertProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
+}
+/**
+ * Inserts an item before the one it is placed in: a line with an add button
+ * that shows when the pointer is on the border above the item. Place it first
+ * in the `SortableListItem`.
+ */
+export declare function SortableListItemInsert({ className, ...props }: SortableListItemInsertProps): import("react").JSX.Element;
+export interface SortableListItemDescriptionProps extends ComponentPropsWithoutRef<'span'> {
+}
+/** Muted, truncated text next to the badges of an item, eg. its label */
+export declare function SortableListItemDescription({ className, ...props }: SortableListItemDescriptionProps): import("react").JSX.Element;
+export interface SortableListItemActionsProps extends ComponentPropsWithoutRef<'div'> {
+}
+export declare function SortableListItemActions({ className, ...props }: SortableListItemActionsProps): import("react").JSX.Element;
+export interface SortableListItemToggleProps extends Omit<ButtonProps, 'variant' | 'children' | 'size'> {
+    /** Whether the item content is shown, picks the unfold icon */
+    expanded: boolean;
+}
+/** Folds the content of an item */
+export declare function SortableListItemToggle({ className, expanded, ...props }: SortableListItemToggleProps): import("react").JSX.Element;
+export interface SortableListItemContentProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** The fields of an expanded item */
+export declare function SortableListItemContent({ className, ...props }: SortableListItemContentProps): import("react").JSX.Element;
+export interface SortableListItemFooterProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** A summary under the header, eg. of a folded item */
+export declare function SortableListItemFooter({ className, ...props }: SortableListItemFooterProps): import("react").JSX.Element;
+export interface SortableListItemSettingsProps extends ComponentPropsWithoutRef<'div'> {
+    /** `actions` removes the padding around a group of ghost buttons */
+    variant?: 'default' | 'actions';
+}
+/** A group of settings or actions in the popover of an item */
+export declare function SortableListItemSettings({ variant, className, ...props }: SortableListItemSettingsProps): import("react").JSX.Element;
+export interface SortableListAddProps extends ComponentPropsWithoutRef<'div'> {
+}
+/** Last row of the list holding the buttons that add items */
+export declare function SortableListAdd({ children, className, ...props }: SortableListAddProps): import("react").JSX.Element;