alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/components/SortableList.js

@@ -0,0 +1,368 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/SortableList.tsx
+import {
+  createContext,
+  useContext,
+  useMemo,
+  useRef
+} from "react";
+import { flushSync } from "react-dom";
+import {
+  IcRoundAdd,
+  IcRoundMoreHoriz,
+  IcRoundUnfoldLess,
+  IcRoundUnfoldMore
+} from "alinea/dashboard/icons";
+import { Button } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { pressSortableItem } from "./internal/sortableDrag.js";
+
+// src/components/SortableList.module.css
+var SortableList_default = {
+  "SortableListItemDescription": "alinea-SortableListItemDescription",
+  "SortableListAdd": "alinea-SortableListAdd",
+  "SortableListItemTrigger-more": "alinea-SortableListItemTrigger-more",
+  "SortableListItemTriggerMore": "alinea-SortableListItemTrigger-more",
+  "SortableListItemHeader": "alinea-SortableListItemHeader",
+  "SortableListItemInsert-button": "alinea-SortableListItemInsert-button",
+  "SortableListItemInsertButton": "alinea-SortableListItemInsert-button",
+  "SortableListItemTrigger": "alinea-SortableListItemTrigger",
+  "SortableListItem": "alinea-SortableListItem",
+  "SortableListItemToggle": "alinea-SortableListItemToggle",
+  "SortableListItemFooter": "alinea-SortableListItemFooter",
+  "SortableListAdd-inner": "alinea-SortableListAdd-inner",
+  "SortableListAddInner": "alinea-SortableListAdd-inner",
+  "SortableListItemInsert": "alinea-SortableListItemInsert",
+  "SortableListItemActions": "alinea-SortableListItemActions",
+  "SortableList": "alinea-SortableList",
+  "SortableListItemTitle": "alinea-SortableListItemTitle",
+  "SortableListItemContent": "alinea-SortableListItemContent",
+  "SortableListItemSettings": "alinea-SortableListItemSettings"
+};
+
+// src/components/SortableList.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(SortableList_default);
+var SortableListContext = createContext(null);
+var SortableListItemContext = createContext(null);
+function SortableList({
+  className,
+  role = "list",
+  onReorder,
+  ...props
+}) {
+  const ref = useRef(null);
+  const keys = useRef(/* @__PURE__ */ new Map());
+  const reorderRef = useRef(onReorder);
+  reorderRef.current = onReorder;
+  const reorderable = Boolean(onReorder);
+  const context = useMemo(() => {
+    if (!reorderable) return null;
+    function items() {
+      const list = ref.current;
+      if (!list) return [];
+      return Array.from(list.children).filter(
+        (child) => child instanceof HTMLElement && keys.current.has(child)
+      );
+    }
+    function element(key) {
+      for (const [element2, current] of keys.current)
+        if (current === key) return element2;
+    }
+    function move(item, target, position) {
+      const key = keys.current.get(item);
+      const targetKey = keys.current.get(target);
+      if (key === void 0 || targetKey === void 0) return;
+      flushSync(
+        () => reorderRef.current?.({
+          keys: /* @__PURE__ */ new Set([key]),
+          target: { key: targetKey, position }
+        })
+      );
+    }
+    return {
+      register(key, element2) {
+        for (const [current, value] of keys.current)
+          if (value === key) keys.current.delete(current);
+        if (element2) keys.current.set(element2, key);
+      },
+      press(key, event) {
+        const list = ref.current;
+        const item = element(key);
+        if (!list || !item) return;
+        pressSortableItem({
+          event: event.nativeEvent,
+          list,
+          item,
+          items,
+          onDrop: move
+        });
+      },
+      step(key, direction) {
+        const item = element(key);
+        if (!item) return false;
+        const elements = items();
+        const from = elements.indexOf(item);
+        const to = from + direction;
+        if (from === -1 || to < 0 || to >= elements.length) return false;
+        const focused = document.activeElement;
+        move(item, elements[to], direction > 0 ? "after" : "before");
+        if (focused instanceof HTMLElement && focused !== document.activeElement)
+          focused.focus();
+        return true;
+      }
+    };
+  }, [reorderable]);
+  return /* @__PURE__ */ jsx(SortableListContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list",
+      ...props,
+      className: styles.SortableList(dist_default.merge({ className })),
+      "data-reorderable": reorderable || void 0,
+      ref,
+      role
+    }
+  ) });
+}
+function SortableListItem({
+  id,
+  className,
+  current,
+  ...props
+}) {
+  const list = useContext(SortableListContext);
+  const key = list && id !== void 0 ? id : null;
+  return /* @__PURE__ */ jsx(SortableListItemContext.Provider, { value: key, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item",
+      role: "listitem",
+      ...props,
+      "aria-current": current || void 0,
+      "aria-keyshortcuts": key === null ? void 0 : "Alt+ArrowUp Alt+ArrowDown",
+      className: styles.SortableListItem(dist_default.merge({ className })),
+      ref: key === null ? void 0 : (element) => list?.register(key, element)
+    }
+  ) });
+}
+function SortableListItemHeader({
+  className,
+  onPointerDownCapture,
+  onKeyDown,
+  onDragStart,
+  ...props
+}) {
+  const list = useContext(SortableListContext);
+  const key = useContext(SortableListItemContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-header",
+      ...props,
+      className: styles.SortableListItemHeader(dist_default.merge({ className })),
+      "data-reorderable": list !== null && key !== null || void 0,
+      onPointerDownCapture: (event) => {
+        onPointerDownCapture?.(event);
+        if (!list || key === null) return;
+        if (event.button !== 0 || event.pointerType === "touch") return;
+        const target = event.target;
+        if (target.closest('[aria-haspopup="menu"], [aria-haspopup="listbox"]'))
+          return;
+        list.press(key, event);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!list || key === null || event.defaultPrevented) return;
+        if (!event.altKey) return;
+        const direction = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+        if (direction && list.step(key, direction)) event.preventDefault();
+      },
+      onDragStart: (event) => {
+        onDragStart?.(event);
+        if (list && key !== null) event.preventDefault();
+      }
+    }
+  );
+}
+function SortableListItemTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-title",
+      ...props,
+      className: styles.SortableListItemTitle(dist_default.merge({ className }))
+    }
+  );
+}
+function SortableListItemTrigger({
+  className,
+  more = true,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "sortable-list-item-trigger",
+      ...props,
+      variant: "ghost",
+      className: styles.SortableListItemTrigger(dist_default.merge({ className })),
+      children: [
+        children,
+        more && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "sortable-list-item-more",
+            className: styles.SortableListItemTrigger.more(),
+            children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, icon: IcRoundMoreHoriz })
+          }
+        )
+      ]
+    }
+  );
+}
+function SortableListItemInsert({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-insert",
+      className: styles.SortableListItemInsert(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "sortable-list-item-insert-button",
+          ...props,
+          className: styles.SortableListItemInsert.button(),
+          children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, icon: IcRoundAdd })
+        }
+      )
+    }
+  );
+}
+function SortableListItemDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "sortable-list-item-description",
+      ...props,
+      className: styles.SortableListItemDescription(dist_default.merge({ className }))
+    }
+  );
+}
+function SortableListItemActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-actions",
+      ...props,
+      className: styles.SortableListItemActions(dist_default.merge({ className }))
+    }
+  );
+}
+function SortableListItemToggle({
+  className,
+  expanded,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-slot": "sortable-list-item-toggle",
+      "aria-expanded": expanded,
+      ...props,
+      variant: "ghost",
+      className: styles.SortableListItemToggle(dist_default.merge({ className })),
+      size: "icon-sm",
+      icon: expanded ? IcRoundUnfoldLess : IcRoundUnfoldMore
+    }
+  );
+}
+function SortableListItemContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-content",
+      ...props,
+      className: styles.SortableListItemContent(dist_default.merge({ className }))
+    }
+  );
+}
+function SortableListItemFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-footer",
+      ...props,
+      className: styles.SortableListItemFooter(dist_default.merge({ className }))
+    }
+  );
+}
+function SortableListItemSettings({
+  variant = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-item-settings",
+      ...props,
+      className: styles.SortableListItemSettings(dist_default.merge({ className })),
+      "data-variant": variant
+    }
+  );
+}
+function SortableListAdd({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sortable-list-add",
+      ...props,
+      className: styles.SortableListAdd(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsx("div", { className: styles.SortableListAdd.inner(), children })
+    }
+  );
+}
+export {
+  SortableList,
+  SortableListAdd,
+  SortableListItem,
+  SortableListItemActions,
+  SortableListItemContent,
+  SortableListItemDescription,
+  SortableListItemFooter,
+  SortableListItemHeader,
+  SortableListItemInsert,
+  SortableListItemSettings,
+  SortableListItemTitle,
+  SortableListItemToggle,
+  SortableListItemTrigger
+};

package/dist/components/Spinner.d.ts

@@ -0,0 +1,8 @@
+import type { AriaProps, DataProps, StyleProps } from './types.js';
+export interface SpinnerProps extends StyleProps, AriaProps, DataProps {
+    size?: 'sm' | 'default' | 'lg';
+    /** Progress from 0 to 100, leave out for an indeterminate spinner */
+    value?: number;
+}
+/** A circular progress indicator */
+export declare function Spinner({ size, value, className, 'aria-label': ariaLabel, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,86 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/Spinner.module.css
+var Spinner_default = {
+  "Spinner-spin": "alinea-Spinner-spin",
+  "SpinnerSpin": "alinea-Spinner-spin",
+  "Spinner-icon": "alinea-Spinner-icon",
+  "SpinnerIcon": "alinea-Spinner-icon",
+  "Spinner": "alinea-Spinner",
+  "Spinner-indicator": "alinea-Spinner-indicator",
+  "SpinnerIndicator": "alinea-Spinner-indicator"
+};
+
+// src/components/Spinner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(Spinner_default);
+function Spinner({
+  size = "default",
+  value,
+  className,
+  "aria-label": ariaLabel = "Loading",
+  ...props
+}) {
+  const indeterminate = value === void 0;
+  const progress = indeterminate ? 30 : Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "progressbar",
+      "aria-label": ariaLabel,
+      "aria-valuemin": indeterminate ? void 0 : 0,
+      "aria-valuemax": indeterminate ? void 0 : 100,
+      "aria-valuenow": indeterminate ? void 0 : progress,
+      "data-slot": "spinner",
+      "data-size": size,
+      "data-indeterminate": indeterminate || void 0,
+      ...props,
+      className: styles.Spinner(dist_default.merge({ className })),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          "aria-hidden": "true",
+          "data-slot": "spinner-icon",
+          className: styles.Spinner.icon(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                strokeWidth: 3,
+                stroke: "currentColor",
+                strokeOpacity: 0.25
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "12",
+                cy: "12",
+                r: "10",
+                strokeWidth: 3,
+                stroke: "currentColor",
+                pathLength: 100,
+                strokeDasharray: "100 200",
+                strokeDashoffset: 100 - progress,
+                strokeLinecap: "round",
+                "data-slot": "spinner-indicator",
+                className: styles.Spinner.indicator()
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  Spinner
+};

package/dist/components/Stack.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode, Ref } from 'react';
+import type { AriaProps, DataProps, StyleProps } from './types.js';
+export interface StackProps extends StyleProps, AriaProps, DataProps {
+    /** Defaults to `column` */
+    direction?: 'row' | 'column';
+    /** Space between the items, a number is in pixels */
+    gap?: number | string;
+    /** Cross axis alignment of the items, they stretch by default */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Main axis distribution of the items */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /** Wrap items onto multiple lines */
+    wrap?: boolean;
+    /** Lay out the single child element instead of rendering a div */
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+}
+/** Lays out its children in a row or column with a gap between them */
+export declare function Stack({ direction, gap, align, justify, wrap, asChild, className, style, ...props }: StackProps): import("react").JSX.Element;

package/dist/components/Stack.js

@@ -0,0 +1,45 @@
+import {
+  dist_default
+} from "../chunks/chunk-I4OYYAX5.js";
+import "../chunks/chunk-CQ52GEHY.js";
+
+// src/components/Stack.tsx
+import { Slot } from "./internal/Slot.js";
+
+// src/components/Stack.module.css
+var Stack_default = {
+  "Stack": "alinea-Stack"
+};
+
+// src/components/Stack.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(Stack_default);
+function Stack({
+  direction = "column",
+  gap,
+  align,
+  justify,
+  wrap,
+  asChild,
+  className,
+  style,
+  ...props
+}) {
+  const Element = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      "data-slot": "stack",
+      ...props,
+      "data-direction": direction,
+      "data-align": align,
+      "data-justify": justify,
+      "data-wrap": wrap || void 0,
+      className: styles.Stack(dist_default.merge({ className })),
+      style: gap === void 0 ? style : { gap, ...style }
+    }
+  );
+}
+export {
+  Stack
+};

package/dist/components/Surface.js

@@ -5,10 +5,10 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/Surface.module.css
 var Surface_default = {
-  "SurfaceContent": "alinea-SurfaceContent",
   "SurfaceRow": "alinea-SurfaceRow",
+  "Surface": "alinea-Surface",
   "SurfaceHeader": "alinea-SurfaceHeader",
-  "Surface": "alinea-Surface"
+  "SurfaceContent": "alinea-SurfaceContent"
 };
 
 // src/components/Surface.tsx
@@ -18,6 +18,7 @@ function Surface({ className, depth, variant, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "surface",
       ...props,
       className: styles.Surface(dist_default.merge({ className })),
       "data-depth": depth ?? variant
@@ -28,6 +29,7 @@ function SurfaceHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "header",
     {
+      "data-slot": "surface-header",
       ...props,
       className: styles.SurfaceHeader(dist_default.merge({ className }))
     }
@@ -37,13 +39,21 @@ function SurfaceContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "surface-content",
       ...props,
       className: styles.SurfaceContent(dist_default.merge({ className }))
     }
   );
 }
 function SurfaceRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: styles.SurfaceRow(dist_default.merge({ className })) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface-row",
+      ...props,
+      className: styles.SurfaceRow(dist_default.merge({ className }))
+    }
+  );
 }
 export {
   Surface,

package/dist/components/Switch.d.ts

@@ -1,5 +1,16 @@
-import { type SwitchProps as AriaSwitchProps } from 'react-aria-components';
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'> {
-    children: React.ReactNode;
+import type { ReactNode, Ref } from 'react';
+import type { AriaProps, DataProps, StyleProps } from './types.js';
+export interface SwitchProps extends StyleProps, AriaProps, DataProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    value?: string;
+    autoFocus?: boolean;
+    ref?: Ref<HTMLLabelElement>;
+    /** The label */
+    children?: ReactNode;
 }
-export declare function Switch({ children, ...props }: SwitchProps): import("react").JSX.Element;
+export declare function Switch({ checked, defaultChecked, onCheckedChange, disabled, readOnly, className, children, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -1,14 +1,10 @@
 import {
   $24585aa46d6ffdff$export$b5d5cf8927ab7262
-} 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";
@@ -16,6 +12,12 @@ import "../chunks/chunk-CQ52GEHY.js";
 
 // src/components/Switch.module.css
 var Switch_default = {
+  "Switch-label": "alinea-Switch-label",
+  "SwitchLabel": "alinea-Switch-label",
+  "is-focusVisible": "alinea-is-focusVisible",
+  "isFocusVisible": "alinea-is-focusVisible",
+  "Switch-thumb": "alinea-Switch-thumb",
+  "SwitchThumb": "alinea-Switch-thumb",
   "Switch": "alinea-Switch",
   "Switch-track": "alinea-Switch-track",
   "SwitchTrack": "alinea-Switch-track"
@@ -24,20 +26,30 @@ var Switch_default = {
 // src/components/Switch.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var styles = dist_default(Switch_default);
-function Switch({ children, ...props }) {
-  const { className, ...rest } = props;
+function Switch({
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  disabled,
+  readOnly,
+  className,
+  children,
+  ...props
+}) {
   return /* @__PURE__ */ jsxs(
     $24585aa46d6ffdff$export$b5d5cf8927ab7262,
     {
-      ...rest,
-      className: (renderProps) => styles.Switch(
-        dist_default.merge({
-          className: typeof className === "function" ? className(renderProps) : className
-        })
-      ),
+      "data-slot": "switch",
+      ...props,
+      className: ({ isFocusVisible }) => styles.Switch({ focusVisible: isFocusVisible }, dist_default.merge({ className })),
+      isSelected: checked,
+      defaultSelected: defaultChecked,
+      onChange: onCheckedChange,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
       children: [
-        /* @__PURE__ */ jsx("div", { className: styles.Switch.track() }),
-        children
+        /* @__PURE__ */ jsx("span", { "data-slot": "switch-track", className: styles.Switch.track(), children: /* @__PURE__ */ jsx("span", { "data-slot": "switch-thumb", className: styles.Switch.thumb() }) }),
+        children && /* @__PURE__ */ jsx("span", { "data-slot": "switch-label", className: styles.Switch.label(), children })
       ]
     }
   );