@aaas-pro/library 0.0.0-stage → 0.1.0

package/dist/primitives/resizable.js

@@ -0,0 +1,91 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useMergedRef } from "./core.js";
+const Context = React.createContext({ orientation: "horizontal", panels: { current: /* @__PURE__ */ new Map() }, group: { current: null }, changed: (_sizes) => {
+} });
+const percentage = (value, fallback) => typeof value === "number" ? value : value?.endsWith("%") ? Number.parseFloat(value) : fallback;
+function Group({ orientation = "horizontal", onLayoutChange, children, ref, ...props }) {
+  const group = React.useRef(null), panels = React.useRef(/* @__PURE__ */ new Map()), merged = useMergedRef(ref, group);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { orientation, group, panels, changed: (sizes) => onLayoutChange?.(sizes) }, children: /* @__PURE__ */ jsx("div", { ...props, ref: merged, children }) });
+}
+function Panel({ id, defaultSize = "50%", minSize = 0, maxSize = 100, onResize, ref, style, ...props }) {
+  const generated = React.useId(), key = id ?? generated, state = React.useContext(Context), node = React.useRef(null), merged = useMergedRef(ref, node);
+  const [size, setSize] = React.useState(defaultSize), latest = React.useRef(onResize);
+  latest.current = onResize;
+  React.useEffect(() => {
+    if (!node.current) return;
+    state.panels.current.set(key, { node: node.current, size: percentage(defaultSize, NaN), set: (next) => {
+      const panel = state.panels.current.get(key);
+      if (panel) panel.size = next;
+      setSize(next);
+      latest.current?.(next);
+    }, min: Math.max(0, percentage(minSize, 0)), max: Math.min(100, percentage(maxSize, 100)) });
+    return () => {
+      state.panels.current.delete(key);
+    };
+  }, [key, minSize, maxSize, state.panels]);
+  return /* @__PURE__ */ jsx("div", { ...props, id: key, ref: merged, "data-panel-id": key, style: { flex: `0 0 ${typeof size === "number" ? `${size}%` : size}`, minWidth: 0, minHeight: 0, overflow: "auto", ...style } });
+}
+function Separator({ disabled = false, onPointerDown, onKeyDown, style, ref, ...props }) {
+  const state = React.useContext(Context), vertical = state.orientation === "vertical", cleanup = React.useRef(void 0);
+  const [range, setRange] = React.useState({ value: 50, min: 0, max: 100, controls: void 0 });
+  const separator = React.useRef(null);
+  const merged = useMergedRef(ref, separator);
+  React.useEffect(() => {
+    const before = separator.current?.previousElementSibling;
+    const panel = [...state.panels.current.values()].find((item) => item.node === before);
+    if (panel) setRange({ value: Number.isFinite(panel.size) ? panel.size : 50, min: panel.min, max: panel.max, controls: panel.node.id });
+  }, [state.panels]);
+  React.useEffect(() => () => cleanup.current?.(), []);
+  const resize = (handle, delta) => {
+    const entries = [...state.panels.current.entries()], before = entries.find(([, panel]) => panel.node === handle.previousElementSibling), after = entries.find(([, panel]) => panel.node === handle.nextElementSibling), group = state.group.current;
+    if (!before || !after || !group) return;
+    const dimension = vertical ? "height" : "width", total = group.getBoundingClientRect()[dimension];
+    if (!total) return;
+    const a = Number.isFinite(before[1].size) ? before[1].size : before[1].node.getBoundingClientRect()[dimension] / total * 100, b = Number.isFinite(after[1].size) ? after[1].size : after[1].node.getBoundingClientRect()[dimension] / total * 100;
+    const change = Math.max(Math.max(before[1].min - a, b - after[1].max), Math.min(Math.min(before[1].max - a, b - after[1].min), delta));
+    setRange({ value: a + change, min: before[1].min, max: before[1].max, controls: before[1].node.id });
+    before[1].set(a + change);
+    after[1].set(b - change);
+    state.changed(Object.fromEntries(entries.map(([key, panel]) => [key, key === before[0] ? a + change : key === after[0] ? b - change : panel.node.getBoundingClientRect()[dimension] / total * 100])));
+  };
+  return /* @__PURE__ */ jsx("div", { ...props, ref: merged, role: "separator", "aria-valuenow": range.value, "aria-valuemin": range.min, "aria-valuemax": range.max, "aria-controls": range.controls, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, "aria-orientation": vertical ? "horizontal" : "vertical", "data-panel-group-direction": state.orientation, style: { cursor: vertical ? "row-resize" : "col-resize", flexShrink: 0, touchAction: "none", ...style }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || disabled) return;
+    const forward = vertical ? "ArrowDown" : "ArrowRight", backward = vertical ? "ArrowUp" : "ArrowLeft";
+    if ([forward, backward, "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      resize(event.currentTarget, event.key === "Home" ? -100 : event.key === "End" ? 100 : (event.key === forward ? 1 : -1) * (event.shiftKey ? 10 : 5));
+    }
+  }, onPointerDown: (event) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || disabled || event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.focus();
+    const handle = event.currentTarget, group = state.group.current, size = group?.getBoundingClientRect()[vertical ? "height" : "width"] ?? 0;
+    if (!size) return;
+    let previous = vertical ? event.clientY : event.clientX;
+    const move = (next) => {
+      if (next.pointerId !== event.pointerId) return;
+      const current = vertical ? next.clientY : next.clientX;
+      resize(handle, (current - previous) / size * 100);
+      previous = current;
+    };
+    const end = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+      cleanup.current = void 0;
+    };
+    cleanup.current?.();
+    cleanup.current = end;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+  } });
+}
+export {
+  Group,
+  Panel,
+  Separator
+};

package/dist/primitives/scroll-area.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare function Root({ type, style, ...props }: React.ComponentProps<'div'> & {
+    type?: 'auto' | 'always';
+}): React.JSX.Element;
+export declare function Viewport({ style, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+/** Native scrollbars supply pointer dragging, wheel, touch and keyboard behavior. */
+export declare function ScrollAreaScrollbar({ orientation: _orientation, forceMount: _force, ...props }: React.ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical';
+    forceMount?: true;
+}): React.JSX.Element;
+export declare function ScrollAreaThumb(props: React.ComponentProps<'div'>): React.JSX.Element;
+export declare function Corner(): null;

package/dist/primitives/scroll-area.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Context = React.createContext("auto");
+function Root({ type = "auto", style, ...props }) {
+  return /* @__PURE__ */ jsx(Context.Provider, { value: type, children: /* @__PURE__ */ jsx("div", { ...props, style: { overflow: "hidden", ...style } }) });
+}
+function Viewport({ style, ...props }) {
+  const type = React.useContext(Context);
+  return /* @__PURE__ */ jsx("div", { ...props, tabIndex: 0, "data-aaas-scroll-viewport": "", style: { overflow: type === "always" ? "scroll" : "auto", scrollbarWidth: "thin", scrollbarColor: "var(--border) transparent", ...style } });
+}
+function ScrollAreaScrollbar({ orientation: _orientation = "vertical", forceMount: _force, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, hidden: true, "aria-hidden": "true" });
+}
+function ScrollAreaThumb(props) {
+  return /* @__PURE__ */ jsx("div", { ...props });
+}
+function Corner() {
+  return null;
+}
+export {
+  Corner,
+  Root,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  Viewport
+};

package/dist/primitives/select.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { type LayerContentProps, type ModalRootProps } from './layer';
+import { type ButtonProps, type DivProps } from './core';
+/** Internal styling adapter; selection remains owned by Root. */
+export declare function useSelectState(): {
+    value: string;
+    disabled: boolean;
+};
+export interface SelectProps extends ModalRootProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    autoComplete?: string;
+    dir?: 'ltr' | 'rtl';
+}
+export declare function Root({ value, defaultValue, onValueChange, disabled, required, name, autoComplete, dir, children, ...props }: SelectProps): React.JSX.Element;
+export declare function Trigger(props: ButtonProps): React.JSX.Element;
+export declare function Value({ placeholder, children, ...props }: React.ComponentProps<'span'> & {
+    placeholder?: React.ReactNode;
+}): React.JSX.Element;
+export declare function Content({ position: _position, onOpenAutoFocus, onKeyDown, style, ref, ...props }: LayerContentProps & {
+    position?: 'popper';
+}): React.JSX.Element;
+export declare function Viewport({ ref, style, ...props }: DivProps): React.JSX.Element;
+export declare function Group(props: DivProps): React.JSX.Element;
+export declare function Label(props: DivProps): React.JSX.Element;
+export declare function Item({ value, textValue, disabled, onClick, children, ...props }: ButtonProps & {
+    value: string;
+    textValue?: string;
+}): React.JSX.Element;
+export declare function ItemText(props: React.ComponentProps<'span'>): React.JSX.Element;
+export declare function ItemIndicator(props: React.ComponentProps<'span'>): React.JSX.Element | null;
+export declare function Icon({ asChild, ...props }: React.ComponentProps<'span'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export declare function Separator(props: DivProps): React.JSX.Element;
+export declare function ScrollUpButton(props: ButtonProps): React.JSX.Element;
+export declare function ScrollDownButton(props: ButtonProps): React.JSX.Element;
+export declare const Portal: ({ children, container, forceMount }: import("./layer").PortalProps) => React.ReactPortal | null;

package/dist/primitives/select.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createLayer } from "./layer.js";
+import { useMergedRef, moveFocus, DivPart, Slot, ButtonPart, useControllable } from "./core.js";
+const family = createLayer({ role: "listbox" });
+const Context = React.createContext({ value: "", set: (_value) => {
+}, disabled: false, dir: "ltr", labels: /* @__PURE__ */ new Map(), viewport: null, setViewport: (_node) => {
+} });
+const Selected = React.createContext(false);
+function useSelectState() {
+  const { value, disabled } = React.useContext(Context);
+  return { value, disabled };
+}
+function collect(children, labels) {
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child))
+      return;
+    const props = child.props;
+    if (typeof props.value === "string")
+      labels.set(props.value, props.children);
+    else if (props.children)
+      collect(props.children, labels);
+  });
+}
+function Root({ value, defaultValue = "", onValueChange, disabled = false, required, name, autoComplete, dir = "ltr", children, ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onValueChange);
+  const labels = /* @__PURE__ */ new Map();
+  collect(children, labels);
+  const [viewport, setViewport] = React.useState(null);
+  return /* @__PURE__ */ jsx(family.Root, { ...props, children: /* @__PURE__ */ jsxs(Context.Provider, { value: { value: current, set, disabled, dir, labels, viewport, setViewport }, children: [
+    children,
+    name && /* @__PURE__ */ jsxs("select", { name, required, disabled, autoComplete, tabIndex: -1, "aria-hidden": "true", value: current, onChange: (event) => set(event.target.value), style: { position: "absolute", opacity: 0, width: 1, height: 1, pointerEvents: "none" }, children: [
+      /* @__PURE__ */ jsx("option", { value: "" }),
+      [...labels].map(([key]) => /* @__PURE__ */ jsx("option", { value: key, children: key }, key))
+    ] })
+  ] }) });
+}
+function Trigger(props) {
+  const state = React.useContext(Context);
+  return /* @__PURE__ */ jsx(family.Trigger, { ...props, role: "combobox", dir: state.dir, disabled: props.disabled || state.disabled, "data-placeholder": !state.value ? "" : void 0 });
+}
+function Value({ placeholder, children, ...props }) {
+  const state = React.useContext(Context);
+  return /* @__PURE__ */ jsx("span", { ...props, "data-placeholder": !state.value ? "" : void 0, children: children ?? (state.value ? state.labels.get(state.value) ?? state.value : placeholder) });
+}
+function Content({ position: _position = "popper", onOpenAutoFocus, onKeyDown, style, ref, ...props }) {
+  const local = React.useRef(null), merged = useMergedRef(ref, local);
+  return /* @__PURE__ */ jsx(family.Content, { ...props, ref: merged, style: { minWidth: "var(--aaas-trigger-width)", ...style }, onOpenAutoFocus: (event) => {
+    onOpenAutoFocus?.(event);
+    if (!event.defaultPrevented) {
+      const chosen = local.current?.querySelector('[role="option"][aria-selected="true"]:not(:disabled)');
+      if (chosen) {
+        chosen.focus();
+        event.preventDefault();
+      }
+    }
+  }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented)
+      return;
+    moveFocus(event, '[role="option"]', { vertical: true });
+    if (event.key.length === 1 && event.key !== " ") {
+      const options = [...event.currentTarget.querySelectorAll('[role="option"]:not(:disabled)')];
+      options.find((n) => (n.getAttribute("data-text-value") ?? n.textContent)?.trim().toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()))?.focus();
+    }
+  } });
+}
+function Viewport({ ref, style, ...props }) {
+  const state = React.useContext(Context);
+  const merged = useMergedRef(ref, state.setViewport);
+  return /* @__PURE__ */ jsx(DivPart, { ...props, ref: merged, style: { overflowY: "auto", maxHeight: "var(--aaas-content-available-height)", ...style } });
+}
+function Group(props) {
+  return /* @__PURE__ */ jsx(DivPart, { ...props, role: "group" });
+}
+function Label(props) {
+  return /* @__PURE__ */ jsx(DivPart, { ...props });
+}
+function Item({ value, textValue, disabled, onClick, children, ...props }) {
+  const state = React.useContext(Context), layer = family.useLayer(), checked = state.value === value;
+  return /* @__PURE__ */ jsx(Selected.Provider, { value: checked, children: /* @__PURE__ */ jsx(ButtonPart, { ...props, role: "option", "data-text-value": textValue, tabIndex: -1, "aria-selected": checked, disabled: disabled || state.disabled, "data-disabled": disabled ? "" : void 0, "data-state": checked ? "checked" : "unchecked", onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      state.set(value);
+      layer.setOpen(false);
+    }
+  }, children }) });
+}
+function ItemText(props) {
+  return /* @__PURE__ */ jsx("span", { ...props });
+}
+function ItemIndicator(props) {
+  return React.useContext(Selected) ? /* @__PURE__ */ jsx("span", { ...props }) : null;
+}
+function Icon({ asChild, ...props }) {
+  return asChild ? /* @__PURE__ */ jsx(Slot, { ...props, ref: props.ref }) : /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": "true" });
+}
+function Separator(props) {
+  return /* @__PURE__ */ jsx(DivPart, { ...props, role: "separator" });
+}
+function ScrollButton({ up, onClick, onMouseDown, ...props }) {
+  const state = React.useContext(Context), layer = family.useLayer();
+  const [visible, setVisible] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const viewport = state.viewport;
+    if (!layer.open || !viewport) {
+      setVisible(false);
+      return;
+    }
+    const measure = () => {
+      const maximum = viewport.scrollHeight - viewport.clientHeight;
+      const actions = [...viewport.parentElement?.querySelectorAll("[data-aaas-select-scroll]") ?? []];
+      const actionHeight = actions.reduce((height, node) => height + node.getBoundingClientRect().height, 0);
+      setVisible(maximum > actionHeight + 1 && (up ? viewport.scrollTop > 1 : viewport.scrollTop < maximum - 1));
+    };
+    measure();
+    viewport.addEventListener("scroll", measure, { passive: true });
+    window.addEventListener("resize", measure);
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    resize?.observe(viewport);
+    for (const child of viewport.children) resize?.observe(child);
+    const mutation = new MutationObserver(() => {
+      for (const child of viewport.children) resize?.observe(child);
+      measure();
+    });
+    mutation.observe(viewport, { childList: true, subtree: true, characterData: true });
+    return () => {
+      viewport.removeEventListener("scroll", measure);
+      window.removeEventListener("resize", measure);
+      resize?.disconnect();
+      mutation.disconnect();
+    };
+  }, [layer.open, state.viewport, up]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, "data-aaas-select-scroll": "", tabIndex: -1, "aria-label": up ? "向上滚动选项" : "向下滚动选项", onMouseDown: (event) => {
+    onMouseDown?.(event);
+    event.preventDefault();
+  }, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) state.viewport?.scrollBy({ top: up ? -120 : 120 });
+  } });
+}
+function ScrollUpButton(props) {
+  return /* @__PURE__ */ jsx(ScrollButton, { ...props, up: true });
+}
+function ScrollDownButton(props) {
+  return /* @__PURE__ */ jsx(ScrollButton, { ...props, up: false });
+}
+const Portal = family.Portal;
+export {
+  Content,
+  Group,
+  Icon,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Label,
+  Portal,
+  Root,
+  ScrollDownButton,
+  ScrollUpButton,
+  Separator,
+  Trigger,
+  Value,
+  Viewport,
+  useSelectState
+};

package/dist/primitives/separator.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function Root({ orientation, decorative, ...props }: React.ComponentProps<'div'> & {
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+}): React.JSX.Element;

package/dist/primitives/separator.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+function Root({ orientation = "horizontal", decorative = true, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, role: decorative ? "none" : "separator", "aria-orientation": decorative ? void 0 : orientation, "data-orientation": orientation });
+}
+export {
+  Root
+};

package/dist/primitives/slider.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type DivProps } from './core';
+export interface SliderProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    disabled?: boolean;
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    dir?: 'ltr' | 'rtl';
+    inverted?: boolean;
+}
+export declare function Root({ value, defaultValue, onValueChange, onValueCommit, min, max, step, minStepsBetweenThumbs, disabled, name, orientation, dir, inverted, children, style, onPointerDown, ...props }: SliderProps): React.JSX.Element;
+export declare function Track(props: React.ComponentProps<'div'>): React.JSX.Element;
+export declare function Range({ style, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+interface ThumbProps extends React.ComponentProps<'span'> {
+    index?: number;
+}
+export declare function Thumb({ index, style, onKeyDown, ...props }: ThumbProps): React.JSX.Element;
+export {};

package/dist/primitives/slider.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllable } from "./core.js";
+const Context = React.createContext({ values: [], min: 0, max: 100, disabled: false, vertical: false, reversed: false, change: () => {
+}, step: 1, spacing: 0 });
+function Root({ value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, disabled = false, name, orientation = "horizontal", dir = "ltr", inverted = false, children, style, onPointerDown, ...props }) {
+  const limit = Math.max(min, max), increment = step > 0 ? step : 1, vertical = orientation === "vertical", reversed = inverted !== (dir === "rtl" && !vertical);
+  const [values, set] = useControllable(value, defaultValue ?? [min, limit], onValueChange);
+  const latest = React.useRef(values);
+  latest.current = values;
+  const change = (index2, number, commit = false) => {
+    const current = latest.current, spacing = Math.max(0, minStepsBetweenThumbs) * increment;
+    const lower = index2 ? current[index2 - 1] + spacing : min, upper = index2 < current.length - 1 ? current[index2 + 1] - spacing : limit;
+    if (lower > upper)
+      return;
+    const snapped = Math.round((number - min) / increment) * increment + min;
+    const rounded = Number(Math.max(lower, Math.min(upper, snapped)).toFixed(10));
+    const next = current.map((v, i) => i === index2 ? rounded : v);
+    latest.current = next;
+    set(next);
+    if (commit)
+      onValueCommit?.(next);
+  };
+  const dragging = React.useRef(null);
+  React.useEffect(() => () => dragging.current?.(), []);
+  let index = 0;
+  const parts = React.Children.map(children, (child) => React.isValidElement(child) && child.type === Thumb ? React.cloneElement(child, { index: index++ }) : child);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { values, min, max: limit, step: increment, disabled, vertical, reversed, change, spacing: Math.max(0, minStepsBetweenThumbs) * increment, label: props["aria-label"], labelledBy: props["aria-labelledby"] }, children: /* @__PURE__ */ jsxs("div", { ...props, "data-orientation": orientation, "data-disabled": disabled ? "" : void 0, style: { minHeight: vertical ? void 0 : 18, ...style }, onPointerDown: (event) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || disabled || event.button !== 0)
+      return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const calculate = (x, y) => {
+      let ratio = vertical ? 1 - (y - rect.top) / (rect.height || 1) : (x - rect.left) / (rect.width || 1);
+      if (reversed)
+        ratio = 1 - ratio;
+      return min + Math.max(0, Math.min(1, ratio)) * (limit - min);
+    };
+    const number = calculate(event.clientX, event.clientY), targetIndex = values.reduce((best, v, i) => Math.abs(v - number) < Math.abs(values[best] - number) ? i : best, 0);
+    event.preventDefault();
+    event.currentTarget.querySelectorAll('[role="slider"]')[targetIndex]?.focus();
+    change(targetIndex, number);
+    const move = (e) => {
+      if (e.pointerId === event.pointerId)
+        change(targetIndex, calculate(e.clientX, e.clientY));
+    };
+    const cleanup = () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", end);
+      dragging.current = null;
+    };
+    const end = (e) => {
+      if (e.pointerId !== event.pointerId)
+        return;
+      cleanup();
+      onValueCommit?.(latest.current);
+    };
+    dragging.current?.();
+    dragging.current = cleanup;
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", end);
+  }, children: [
+    parts,
+    name && values.map((number, i) => /* @__PURE__ */ jsx("input", { type: "hidden", name: values.length > 1 ? `${name}[]` : name, value: number, disabled }, i))
+  ] }) });
+}
+function Track(props) {
+  const state = React.useContext(Context);
+  return /* @__PURE__ */ jsx("div", { ...props, "data-orientation": state.vertical ? "vertical" : "horizontal" });
+}
+const percent = (v, state) => state.max === state.min ? 0 : Math.max(0, Math.min(100, (v - state.min) / (state.max - state.min) * 100));
+function Range({ style, ...props }) {
+  const state = React.useContext(Context), start = state.values.length > 1 ? percent(state.values[0], state) : 0, end = percent(state.values.at(-1) ?? 0, state);
+  return /* @__PURE__ */ jsx("div", { ...props, "data-orientation": state.vertical ? "vertical" : "horizontal", style: { ...state.vertical ? { bottom: `${state.reversed ? 100 - end : start}%`, height: `${end - start}%` } : { left: `${state.reversed ? 100 - end : start}%`, width: `${end - start}%` }, ...style } });
+}
+function Thumb({ index = 0, style, onKeyDown, ...props }) {
+  const state = React.useContext(Context), value = state.values[index] ?? state.min, position = percent(value, state), lower = index ? state.values[index - 1] + state.spacing : state.min, upper = index < state.values.length - 1 ? state.values[index + 1] - state.spacing : state.max;
+  return /* @__PURE__ */ jsx("span", { ...props, role: "slider", "aria-label": props["aria-label"] ?? (state.label ? `${state.label}${state.values.length > 1 ? ` ${index + 1}` : ""}` : void 0), "aria-labelledby": props["aria-labelledby"] ?? state.labelledBy, tabIndex: state.disabled ? -1 : 0, "aria-disabled": state.disabled, "aria-valuemin": lower, "aria-valuemax": upper, "aria-valuenow": value, "aria-orientation": state.vertical ? "vertical" : "horizontal", "data-orientation": state.vertical ? "vertical" : "horizontal", "data-disabled": state.disabled ? "" : void 0, style: { position: "absolute", ...state.vertical ? { bottom: `${state.reversed ? 100 - position : position}%`, transform: "translateY(50%)" } : { left: `${state.reversed ? 100 - position : position}%`, transform: "translateX(-50%)" }, ...style }, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || state.disabled)
+      return;
+    const positive = event.key === "ArrowUp" || event.key === "ArrowRight" || event.key === "PageUp";
+    const negative = event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "PageDown";
+    if (positive || negative || event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const next = event.key === "Home" ? lower : event.key === "End" ? upper : value + (positive !== state.reversed ? 1 : -1) * state.step * (event.key.startsWith("Page") || event.shiftKey ? 10 : 1);
+      state.change(index, next, true);
+    }
+  } });
+}
+export {
+  Range,
+  Root,
+  Thumb,
+  Track
+};

package/dist/primitives/slot.d.ts

@@ -0,0 +1 @@
+export { Slot } from './core';

package/dist/primitives/slot.js

@@ -0,0 +1,4 @@
+import { Slot } from "./core.js";
+export {
+  Slot
+};

package/dist/primitives/switch.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type ButtonProps } from './core';
+interface SwitchProps extends ButtonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    required?: boolean;
+}
+export declare function Root({ checked, defaultChecked, onCheckedChange, children, onClick, name, value, required, ...props }: SwitchProps): React.JSX.Element;
+export declare function Thumb(props: React.ComponentProps<'span'>): React.JSX.Element;
+export {};

package/dist/primitives/switch.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useControllable, ButtonPart } from "./core.js";
+const Context = React.createContext(false);
+function Root({ checked, defaultChecked = false, onCheckedChange, children, onClick, name, value = "on", required, ...props }) {
+  const [current, set] = useControllable(checked, defaultChecked, onCheckedChange);
+  return /* @__PURE__ */ jsxs(Context.Provider, { value: current, children: [
+    /* @__PURE__ */ jsx(ButtonPart, { ...props, role: "switch", "aria-checked": current, "aria-required": required, "data-state": current ? "checked" : "unchecked", "data-disabled": props.disabled ? "" : void 0, onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented)
+        set(!current);
+    }, children }),
+    name && /* @__PURE__ */ jsx("input", { type: "checkbox", name, value, checked: current, required, form: props.form, disabled: props.disabled, onChange: (event) => set(event.target.checked), tabIndex: -1, "aria-hidden": "true", style: { position: "absolute", opacity: 0, width: 1, height: 1, pointerEvents: "none" } })
+  ] });
+}
+function Thumb(props) {
+  return /* @__PURE__ */ jsx("span", { ...props, "data-state": React.useContext(Context) ? "checked" : "unchecked" });
+}
+export {
+  Root,
+  Thumb
+};

package/dist/primitives/tabs.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { type ButtonProps, type DivProps } from './core';
+type Orientation = 'horizontal' | 'vertical';
+export interface TabsProps extends Omit<DivProps, 'defaultValue'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: Orientation;
+    activationMode?: 'automatic' | 'manual';
+    dir?: 'ltr' | 'rtl';
+}
+export declare function Root({ value, defaultValue, onValueChange, orientation, activationMode, dir, ...props }: TabsProps): React.JSX.Element;
+export declare function List({ loop, onKeyDown, ...props }: DivProps & {
+    loop?: boolean;
+}): React.JSX.Element;
+export declare function Trigger({ value, onClick, ...props }: ButtonProps & {
+    value: string;
+}): React.JSX.Element;
+export declare function Content({ value, forceMount, ...props }: DivProps & {
+    value: string;
+    forceMount?: true;
+}): React.JSX.Element | null;
+export {};

package/dist/primitives/tabs.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DivPart, moveFocus, useControllable, ButtonPart } from "./core.js";
+const Context = React.createContext({ value: "", set: (_value) => {
+}, id: "", orientation: "horizontal", activationMode: "automatic", dir: "ltr" });
+function Root({ value, defaultValue = "", onValueChange, orientation = "horizontal", activationMode = "automatic", dir = "ltr", ...props }) {
+  const [current, set] = useControllable(value, defaultValue, onValueChange);
+  const id = React.useId();
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { value: current, set, id, orientation, activationMode, dir }, children: /* @__PURE__ */ jsx(DivPart, { ...props, dir, "data-orientation": orientation }) });
+}
+function List({ loop = true, onKeyDown, ...props }) {
+  const state = React.useContext(Context);
+  return /* @__PURE__ */ jsx(DivPart, { ...props, role: "tablist", "aria-orientation": state.orientation, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (!event.defaultPrevented)
+      moveFocus(event, '[role="tab"]', { vertical: state.orientation === "vertical", loop, select: state.activationMode === "automatic" });
+  } });
+}
+function Trigger({ value, onClick, ...props }) {
+  const state = React.useContext(Context);
+  const active = value === state.value;
+  return /* @__PURE__ */ jsx(ButtonPart, { ...props, role: "tab", id: `${state.id}-tab-${value}`, "aria-selected": active, "aria-controls": `${state.id}-panel-${value}`, tabIndex: active || !state.value ? 0 : -1, "data-state": active ? "active" : "inactive", "data-orientation": state.orientation, onClick: (event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented)
+      state.set(value);
+  } });
+}
+function Content({ value, forceMount, ...props }) {
+  const state = React.useContext(Context);
+  const active = value === state.value;
+  return active || forceMount ? /* @__PURE__ */ jsx(DivPart, { ...props, role: "tabpanel", id: `${state.id}-panel-${value}`, "aria-labelledby": `${state.id}-tab-${value}`, tabIndex: 0, hidden: !active, "data-state": active ? "active" : "inactive", "data-orientation": state.orientation }) : null;
+}
+export {
+  Content,
+  List,
+  Root,
+  Trigger
+};

package/dist/primitives/toast.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+export type ToastId = string | number;
+type ToastType = 'message' | 'success' | 'info' | 'warning' | 'error' | 'loading';
+export interface ToastOptions {
+    id?: ToastId;
+    toasterId?: string;
+    description?: React.ReactNode;
+    duration?: number;
+    dismissible?: boolean;
+    action?: {
+        label: React.ReactNode;
+        onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+    cancel?: {
+        label: React.ReactNode;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+    onDismiss?: (toast: ToastRecord) => void;
+    onAutoClose?: (toast: ToastRecord) => void;
+}
+export interface ToastRecord extends ToastOptions {
+    id: ToastId;
+    title: React.ReactNode;
+    type: ToastType;
+}
+declare function dismiss(id?: ToastId, automatic?: boolean): void;
+export declare const toast: ((title: React.ReactNode, options?: ToastOptions) => ToastId) & {
+    message: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    success: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    error: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    warning: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    info: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    loading: (title: React.ReactNode, options?: ToastOptions) => ToastId;
+    dismiss: typeof dismiss;
+    custom: (render: (id: ToastId) => React.ReactNode, options?: ToastOptions) => ToastId;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), options: ToastOptions & {
+        loading?: React.ReactNode;
+        success?: React.ReactNode | ((value: T) => React.ReactNode);
+        error?: React.ReactNode | ((error: unknown) => React.ReactNode);
+    }) => ToastId;
+};
+export interface ToasterProps extends Omit<React.ComponentProps<'div'>, 'id'> {
+    id?: string;
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    duration?: number;
+    visibleToasts?: number;
+    closeButton?: boolean;
+    richColors?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    icons?: Partial<Record<ToastType, React.ReactNode>>;
+    toastOptions?: ToastOptions;
+    offset?: number | string;
+}
+export declare function Toaster({ id, position, duration, visibleToasts, closeButton, richColors, theme, icons, toastOptions, offset, style, className, ...props }: ToasterProps): React.JSX.Element;
+export {};