@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/iconCatalog.js

@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+const url = new URL("../assets/icon-catalog.json", import.meta.url).href;
+let cache;
+let pending;
+function loadCatalog() {
+  return pending ||= fetch(url).then((r) => {
+    if (!r.ok) throw Error("\u56FE\u6807\u52A0\u8F7D\u5931\u8D25");
+    return r.json();
+  }).then((data) => cache = data).catch((e) => {
+    pending = void 0;
+    throw e;
+  });
+}
+function useIconCatalog(enabled = true) {
+  const [items, setItems] = useState(cache), [error, setError] = useState(false), [revision, setRevision] = useState(0);
+  useEffect(() => {
+    if (!enabled) return;
+    let alive = true;
+    setError(false);
+    loadCatalog().then((data) => {
+      if (alive) setItems(data);
+    }).catch(() => {
+      if (alive) setError(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [enabled, revision]);
+  return { items, error, retry: () => setRevision((x) => x + 1) };
+}
+const iconCategories = {
+  accessibility: "\u65E0\u969C\u788D",
+  account: "\u8D26\u6237",
+  animals: "\u52A8\u7269",
+  arrows: "\u7BAD\u5934",
+  buildings: "\u5EFA\u7B51",
+  charts: "\u56FE\u8868",
+  communication: "\u901A\u4FE1",
+  connectivity: "\u8FDE\u63A5",
+  cursors: "\u5149\u6807",
+  design: "\u8BBE\u8BA1",
+  development: "\u5F00\u53D1",
+  devices: "\u8BBE\u5907",
+  emoji: "\u8868\u60C5",
+  files: "\u6587\u4EF6",
+  finance: "\u91D1\u878D",
+  "food-beverage": "\u9910\u996E",
+  gaming: "\u6E38\u620F",
+  home: "\u5BB6\u5C45",
+  layout: "\u5E03\u5C40",
+  mail: "\u90AE\u4EF6",
+  math: "\u6570\u5B66",
+  medical: "\u533B\u7597",
+  multimedia: "\u591A\u5A92\u4F53",
+  nature: "\u81EA\u7136",
+  navigation: "\u5BFC\u822A",
+  notifications: "\u901A\u77E5",
+  people: "\u4EBA\u7269",
+  photography: "\u6444\u5F71",
+  science: "\u79D1\u5B66",
+  seasons: "\u5B63\u8282",
+  security: "\u5B89\u5168",
+  shapes: "\u5F62\u72B6",
+  shopping: "\u8D2D\u7269",
+  social: "\u793E\u4EA4",
+  sports: "\u8FD0\u52A8",
+  sustainability: "\u53EF\u6301\u7EED",
+  text: "\u6587\u672C",
+  time: "\u65F6\u95F4",
+  tools: "\u5DE5\u5177",
+  transportation: "\u4EA4\u901A",
+  travel: "\u65C5\u884C",
+  weather: "\u5929\u6C14",
+  uncategorized: "\u5176\u4ED6"
+};
+export {
+  iconCategories,
+  loadCatalog,
+  useIconCatalog
+};

package/components/index.d.ts

@@ -0,0 +1,150 @@
+export { Badge } from "./Badge";
+export { Button } from "./Button";
+export { Checkbox } from "./Checkbox";
+export { ColorField } from "./ColorField";
+export { DatePicker } from "./DatePicker";
+export { Dialog } from "./Dialog";
+export { EmptyState } from "./EmptyState";
+export { FileDropZone } from "./FileDropZone";
+export { FilePicker } from "./FilePicker";
+export { IconButton } from "./IconButton";
+export { Input } from "./Input";
+export { MultiSelect } from "./MultiSelect";
+export { NumberInput } from "./NumberInput";
+export { Page } from "./Page";
+export { Popover } from "./Popover";
+export { Progress } from "./Progress";
+export { SearchField } from "./SearchField";
+export { Section } from "./Section";
+export { Segmented } from "./Segmented";
+export { Select } from "./Select";
+export { SettingRow } from "./SettingRow";
+export { Skeleton } from "./Skeleton";
+export { SkeletonRows } from "./SkeletonRows";
+export { Switch } from "./Switch";
+export { ToastProvider } from "./ToastProvider";
+export { Tooltip } from "./Tooltip";
+export type { SelectOption } from "./types";
+export { FileDropOverlay } from "./FileDropOverlay";
+export { DisclosureChevron } from "./DisclosureChevron";
+export { ColorPicker } from "./ColorPicker";
+export { Textarea } from "./Textarea";
+export { ThemePicker } from "./ThemePicker";
+export { Toast } from "./Toast";
+export { SplitButton } from "./SplitButton";
+export { Calendar } from "./Calendar";
+export { TimeColumns } from "./TimeColumns";
+export { RadioGroup } from "./RadioGroup";
+export { Slider } from "./Slider";
+export { Accordion } from "./Accordion";
+export type { ToastOptions, ToastAction, ToastTone, ToastMessage, } from "./ToastProvider";
+export { useToast } from "./ToastProvider";
+export type { DatePickerMode } from "./DatePicker";
+export type { SplitButtonItem } from "./SplitButton";
+export { Divider } from "./Divider";
+export { CatalogIcon } from "./CatalogIcon";
+export { CharacterPicker } from "./CharacterPicker";
+export { DataTable } from "./DataTable";
+export { EmojiPicker } from "./EmojiPicker";
+export { FileTree } from "./FileTree";
+export { IconPicker } from "./IconPicker";
+export { LoadingOverlay } from "./LoadingOverlay";
+export { LoadingState } from "./LoadingState";
+export { Pagination } from "./Pagination";
+export { Placeholder } from "./Placeholder";
+export { ShortcutInput } from "./ShortcutInput";
+export { Spinner } from "./Spinner";
+export { SymbolPicker } from "./SymbolPicker";
+export { TableColumnFilter } from "./TableColumnFilter";
+export type { FileTreeNode } from "./FileTree";
+export type { TableColumn } from "./DataTable";
+export type { CharacterGroup } from "./CharacterPicker";
+export { SelectTrigger } from "./SelectTrigger";
+export { BlockedTab } from "./BlockedTab";
+export { UnderlinedTab } from "./UnderlinedTab";
+export { Indicator } from "./Indicator";
+export type { IndicatorItem, IndicatorGroup } from "./Indicator";
+export type { TabOption } from "./useTabIndicator";
+export { VirtualPickerList } from "./VirtualPickerList";
+export { SkinTonePicker } from "./SkinTonePicker";
+export type { PickerCatalogItem, PickerCatalogGroup, } from "./VirtualPickerList";
+export { ContextMenu } from "./ContextMenu";
+export { ContextMenuPanel } from "./ContextMenuPanel";
+export { SelectOptionContent } from "./SelectOptionContent";
+export type { ContextMenuItem, MenuAction } from "./menuTypes";
+export { MenuItem } from "./MenuItem";
+export type { MenuItemProps } from "./MenuItem";
+export { Form } from "./Form";
+export { FormField } from "./FormField";
+export { FieldLabel } from "./FieldLabel";
+export { FormGroup } from "./FormGroup";
+export { FormErrorSummary } from "./FormErrorSummary";
+export { useFormState } from "./useFormState";
+export type { FormController, FormRules, FieldRule } from "./useFormState";
+export { PinInput } from "./PinInput";
+export { ContributionCalendar } from "./ContributionCalendar";
+export type { ContributionDay } from "./contribution";
+export { Combobox } from "./Combobox";
+export { TagInput } from "./TagInput";
+export { PasswordField } from "./PasswordField";
+export { Alert } from "./Alert";
+export { Drawer } from "./Drawer";
+export type { DrawerProps, DrawerPlacement } from "./Drawer";
+export { Steps } from "./Steps";
+export type { StepsProps, StepItem, StepStatus } from "./Steps";
+export { Breadcrumb } from "./Breadcrumb";
+export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb";
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarStatus } from "./Avatar";
+export { AvatarGroup } from "./AvatarGroup";
+export type { AvatarGroupProps, AvatarGroupItem } from "./AvatarGroup";
+export { CommandPalette } from "./CommandPalette";
+export type { CommandPaletteProps, CommandPaletteItem } from "./CommandPalette";
+export { ResizablePanel } from "./ResizablePanel";
+export type { ResizablePanelProps } from "./ResizablePanel";
+export { DateRangePicker } from "./DateRangePicker";
+export type { DateRangePickerProps } from "./DateRangePicker";
+export type { DatePickerProps, SingleDatePickerProps } from "./DatePicker";
+export type { DateRange, DateConstraints } from "./dateConstraints";
+export { validateFiles, formatFileSize } from "./fileSelection";
+export type { FileConstraints, FileRejection, FileSelectionResult, } from "./fileSelection";
+export type { FilePickerProps } from "./FilePicker";
+export type { FileDropZoneProps } from "./FileDropZone";
+export { TableColumnVisibility } from "./TableColumnVisibility";
+export { TreeSelect } from "./TreeSelect";
+export { Upload } from "./Upload";
+export type { UploadProps } from "./Upload";
+export { UploadList } from "./UploadList";
+export type { UploadListProps } from "./UploadList";
+export type { UploadFile, UploadStatus, UploadRequest, UploadResult, } from "./uploadTypes";
+export { Timeline } from "./Timeline";
+export type { TimelineProps, TimelineItem } from "./Timeline";
+export { RangeSlider } from "./RangeSlider";
+export type { RangeSliderProps } from "./RangeSlider";
+export type { RangeValue } from "./rangeMath";
+export type { TreeSelectProps } from "./TreeSelect";
+export { Cascader } from "./Cascader";
+export type { CascaderProps } from "./Cascader";
+export type { HierarchyOption, HierarchyLoader } from "./hierarchy";
+export { Popconfirm } from "./Popconfirm";
+export type { PopconfirmProps } from "./Popconfirm";
+export { Descriptions } from "./Descriptions";
+export type { DescriptionsProps, DescriptionItem } from "./Descriptions";
+export { Statistic } from "./Statistic";
+export type { StatisticProps } from "./Statistic";
+export type { DataTableProps, TableSort, TableFilters, TablePagination, } from "./DataTable";
+export { Card } from "./Card";
+export { Tabs } from "./Tabs";
+export { Table } from "./Table";
+export { Menu } from "./Menu";
+export { UIProvider, useUIConfig } from "./UIProvider";
+export type { UIConfig } from "./UIProvider";
+export { ThemeProvider } from "./ThemeProvider";
+export type { UITheme, ColorMode } from "./ThemeProvider";
+export { ThemeStylePicker } from "./ThemeStylePicker";
+export { AppShell, ShellHeader } from "./AppShell";
+export type { NavigationItem } from "./AppShell";
+export { SettingsLayout, SettingsCard } from "./SettingsLayout";
+export { AppearanceSettings } from "./AppearanceSettings";
+export { appearanceDefaults, normalizeAppearance } from "./appearance";
+export type { AppearancePreferences } from "./appearance";

package/components/index.js

@@ -0,0 +1,219 @@
+import { Badge } from "./Badge.js";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { ColorField } from "./ColorField.js";
+import { DatePicker } from "./DatePicker.js";
+import { Dialog } from "./Dialog.js";
+import { EmptyState } from "./EmptyState.js";
+import { FileDropZone } from "./FileDropZone.js";
+import { FilePicker } from "./FilePicker.js";
+import { IconButton } from "./IconButton.js";
+import { Input } from "./Input.js";
+import { MultiSelect } from "./MultiSelect.js";
+import { NumberInput } from "./NumberInput.js";
+import { Page } from "./Page.js";
+import { Popover } from "./Popover.js";
+import { Progress } from "./Progress.js";
+import { SearchField } from "./SearchField.js";
+import { Section } from "./Section.js";
+import { Segmented } from "./Segmented.js";
+import { Select } from "./Select.js";
+import { SettingRow } from "./SettingRow.js";
+import { Skeleton } from "./Skeleton.js";
+import { SkeletonRows } from "./SkeletonRows.js";
+import { Switch } from "./Switch.js";
+import { ToastProvider } from "./ToastProvider.js";
+import { Tooltip } from "./Tooltip.js";
+import { FileDropOverlay } from "./FileDropOverlay.js";
+import { DisclosureChevron } from "./DisclosureChevron.js";
+import { ColorPicker } from "./ColorPicker.js";
+import { Textarea } from "./Textarea.js";
+import { ThemePicker } from "./ThemePicker.js";
+import { Toast } from "./Toast.js";
+import { SplitButton } from "./SplitButton.js";
+import { Calendar } from "./Calendar.js";
+import { TimeColumns } from "./TimeColumns.js";
+import { RadioGroup } from "./RadioGroup.js";
+import { Slider } from "./Slider.js";
+import { Accordion } from "./Accordion.js";
+import { useToast } from "./ToastProvider.js";
+import { Divider } from "./Divider.js";
+import { CatalogIcon } from "./CatalogIcon.js";
+import { CharacterPicker } from "./CharacterPicker.js";
+import { DataTable } from "./DataTable.js";
+import { EmojiPicker } from "./EmojiPicker.js";
+import { FileTree } from "./FileTree.js";
+import { IconPicker } from "./IconPicker.js";
+import { LoadingOverlay } from "./LoadingOverlay.js";
+import { LoadingState } from "./LoadingState.js";
+import { Pagination } from "./Pagination.js";
+import { Placeholder } from "./Placeholder.js";
+import { ShortcutInput } from "./ShortcutInput.js";
+import { Spinner } from "./Spinner.js";
+import { SymbolPicker } from "./SymbolPicker.js";
+import { TableColumnFilter } from "./TableColumnFilter.js";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { BlockedTab } from "./BlockedTab.js";
+import { UnderlinedTab } from "./UnderlinedTab.js";
+import { Indicator } from "./Indicator.js";
+import { VirtualPickerList } from "./VirtualPickerList.js";
+import { SkinTonePicker } from "./SkinTonePicker.js";
+import { ContextMenu } from "./ContextMenu.js";
+import { ContextMenuPanel } from "./ContextMenuPanel.js";
+import { SelectOptionContent } from "./SelectOptionContent.js";
+import { MenuItem } from "./MenuItem.js";
+import { Form } from "./Form.js";
+import { FormField } from "./FormField.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { FormGroup } from "./FormGroup.js";
+import { FormErrorSummary } from "./FormErrorSummary.js";
+import { useFormState } from "./useFormState.js";
+import { PinInput } from "./PinInput.js";
+import { ContributionCalendar } from "./ContributionCalendar.js";
+import { Combobox } from "./Combobox.js";
+import { TagInput } from "./TagInput.js";
+import { PasswordField } from "./PasswordField.js";
+import { Alert } from "./Alert.js";
+import { Drawer } from "./Drawer.js";
+import { Steps } from "./Steps.js";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { Avatar } from "./Avatar.js";
+import { AvatarGroup } from "./AvatarGroup.js";
+import { CommandPalette } from "./CommandPalette.js";
+import { ResizablePanel } from "./ResizablePanel.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+import { validateFiles, formatFileSize } from "./fileSelection.js";
+import { TableColumnVisibility } from "./TableColumnVisibility.js";
+import { TreeSelect } from "./TreeSelect.js";
+import { Upload } from "./Upload.js";
+import { UploadList } from "./UploadList.js";
+import { Timeline } from "./Timeline.js";
+import { RangeSlider } from "./RangeSlider.js";
+import { Cascader } from "./Cascader.js";
+import { Popconfirm } from "./Popconfirm.js";
+import { Descriptions } from "./Descriptions.js";
+import { Statistic } from "./Statistic.js";
+import { Card } from "./Card.js";
+import { Tabs } from "./Tabs.js";
+import { Table } from "./Table.js";
+import { Menu } from "./Menu.js";
+import { UIProvider, useUIConfig } from "./UIProvider.js";
+import { ThemeProvider } from "./ThemeProvider.js";
+import { ThemeStylePicker } from "./ThemeStylePicker.js";
+import { AppShell, ShellHeader } from "./AppShell.js";
+import { SettingsLayout, SettingsCard } from "./SettingsLayout.js";
+import { AppearanceSettings } from "./AppearanceSettings.js";
+import { appearanceDefaults, normalizeAppearance } from "./appearance.js";
+export {
+  Accordion,
+  Alert,
+  AppShell,
+  AppearanceSettings,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  BlockedTab,
+  Breadcrumb,
+  Button,
+  Calendar,
+  Card,
+  Cascader,
+  CatalogIcon,
+  CharacterPicker,
+  Checkbox,
+  ColorField,
+  ColorPicker,
+  Combobox,
+  CommandPalette,
+  ContextMenu,
+  ContextMenuPanel,
+  ContributionCalendar,
+  DataTable,
+  DatePicker,
+  DateRangePicker,
+  Descriptions,
+  Dialog,
+  DisclosureChevron,
+  Divider,
+  Drawer,
+  EmojiPicker,
+  EmptyState,
+  FieldLabel,
+  FileDropOverlay,
+  FileDropZone,
+  FilePicker,
+  FileTree,
+  Form,
+  FormErrorSummary,
+  FormField,
+  FormGroup,
+  IconButton,
+  IconPicker,
+  Indicator,
+  Input,
+  LoadingOverlay,
+  LoadingState,
+  Menu,
+  MenuItem,
+  MultiSelect,
+  NumberInput,
+  Page,
+  Pagination,
+  PasswordField,
+  PinInput,
+  Placeholder,
+  Popconfirm,
+  Popover,
+  Progress,
+  RadioGroup,
+  RangeSlider,
+  ResizablePanel,
+  SearchField,
+  Section,
+  Segmented,
+  Select,
+  SelectOptionContent,
+  SelectTrigger,
+  SettingRow,
+  SettingsCard,
+  SettingsLayout,
+  ShellHeader,
+  ShortcutInput,
+  Skeleton,
+  SkeletonRows,
+  SkinTonePicker,
+  Slider,
+  Spinner,
+  SplitButton,
+  Statistic,
+  Steps,
+  Switch,
+  SymbolPicker,
+  Table,
+  TableColumnFilter,
+  TableColumnVisibility,
+  Tabs,
+  TagInput,
+  Textarea,
+  ThemePicker,
+  ThemeProvider,
+  ThemeStylePicker,
+  TimeColumns,
+  Timeline,
+  Toast,
+  ToastProvider,
+  Tooltip,
+  TreeSelect,
+  UIProvider,
+  UnderlinedTab,
+  Upload,
+  UploadList,
+  VirtualPickerList,
+  appearanceDefaults,
+  formatFileSize,
+  normalizeAppearance,
+  useFormState,
+  useToast,
+  useUIConfig,
+  validateFiles
+};

package/components/menuFocus.d.ts

@@ -0,0 +1,7 @@
+type MenuKeyEvent = {
+    key: string;
+    defaultPrevented?: boolean;
+    preventDefault(): void;
+};
+export declare function moveMenuFocus(event: MenuKeyEvent, root: HTMLElement | null): boolean;
+export {};

package/components/menuFocus.js

@@ -0,0 +1,21 @@
+function moveMenuFocus(event, root) {
+  if (!root || event.defaultPrevented || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+    return false;
+  if ((event.key === "Home" || event.key === "End") && !root.contains(document.activeElement))
+    return false;
+  const items = [
+    ...root.querySelectorAll(
+      '[data-menu-item],a[role="menuitem"]'
+    )
+  ].filter(
+    (node) => node.matches("button,a[href],[tabindex]") && !node.matches(':disabled,[aria-disabled="true"]')
+  );
+  if (!items.length) return false;
+  const active = items.indexOf(document.activeElement), next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (active + 1) % items.length : active < 0 ? items.length - 1 : (active - 1 + items.length) % items.length;
+  event.preventDefault();
+  items[next].focus();
+  return true;
+}
+export {
+  moveMenuFocus
+};

package/components/menuPointer.d.ts

@@ -0,0 +1,6 @@
+export type MenuPoint = {
+    x: number;
+    y: number;
+    time: number;
+};
+export declare function movingTowardSubmenu(origin: MenuPoint | undefined, point: MenuPoint, rect: DOMRect): boolean;

package/components/menuPointer.js

@@ -0,0 +1,13 @@
+function movingTowardSubmenu(origin, point, rect) {
+  if (!origin || point.time - origin.time > 400) return false;
+  const edge = rect.left >= origin.x ? rect.left : rect.right <= origin.x ? rect.right : void 0;
+  if (edge === void 0 || Math.abs(edge - point.x) >= Math.abs(edge - origin.x))
+    return false;
+  const a = origin, b = { x: edge, y: rect.top - 10 }, c = { x: edge, y: rect.bottom + 10 };
+  const cross = (p, q, r) => (p.x - r.x) * (q.y - r.y) - (q.x - r.x) * (p.y - r.y);
+  const d1 = cross(point, a, b), d2 = cross(point, b, c), d3 = cross(point, c, a);
+  return !([d1, d2, d3].some((d) => d < 0) && [d1, d2, d3].some((d) => d > 0));
+}
+export {
+  movingTowardSubmenu
+};

package/components/menuTypes.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from "react";
+export type ContextMenuItem = {
+    id: string;
+    type: "separator";
+} | {
+    id: string;
+    type?: "item" | "checkbox" | "radio";
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    shortcut?: string;
+    color?: string;
+    tone?: "default" | "danger";
+    style?: CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    children?: ContextMenuItem[];
+    onSelect?(): void | Promise<void>;
+    closeOnSelect?: boolean;
+};
+export type MenuAction = Extract<ContextMenuItem, {
+    label: string;
+}>;

package/components/motion.d.ts

@@ -0,0 +1,9 @@
+type Phase = "enter" | "update" | "exit";
+export declare const reducedMotion: () => boolean;
+export declare function motionDuration(token: string, fallback?: number): number;
+export declare const popupExitDuration: () => number;
+export declare function cancelMotion(node: HTMLElement): void;
+export declare function surfaceMotion(node: HTMLElement, phase: Phase, offset?: string, token?: string): Promise<boolean>;
+export type MenuSide = "top" | "bottom" | "left" | "right";
+export declare function menuSurfaceMotion(node: HTMLElement, phase: "enter" | "exit", side?: MenuSide): Promise<boolean>;
+export {};

package/components/motion.js

@@ -0,0 +1,82 @@
+const runs = /* @__PURE__ */ new WeakMap();
+const reducedMotion = () => ["false", "off"].includes(document.documentElement.dataset.motion || "") || matchMedia("(prefers-reduced-motion: reduce)").matches;
+function motionDuration(token, fallback = 180) {
+  if (reducedMotion()) return 0;
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  const value = parseFloat(raw);
+  return Number.isFinite(value) ? value * (raw.endsWith("ms") ? 1 : 1e3) : fallback;
+}
+const popupExitDuration = () => motionDuration("--popup-exit", 120);
+function cancelMotion(node) {
+  const state = runs.get(node);
+  if (state) {
+    state.revision++;
+    state.animation?.cancel();
+    state.animation = void 0;
+  }
+}
+function surfaceMotion(node, phase, offset = "0 -4px", token) {
+  const state = runs.get(node) || { revision: 0 };
+  runs.set(node, state);
+  const revision = ++state.revision, interrupted = !!state.animation, style = getComputedStyle(node);
+  const from = {
+    opacity: interrupted ? style.opacity : phase === "enter" ? "0" : phase === "update" ? ".78" : "1",
+    translate: interrupted ? style.translate : phase === "enter" ? offset : phase === "update" ? "0 2px" : "0 0"
+  };
+  state.animation?.cancel();
+  const to = {
+    opacity: phase === "exit" ? "0" : "1",
+    translate: phase === "exit" ? offset : "0 0"
+  };
+  node.dataset.motionPhase = phase;
+  const finish = () => {
+    if (revision !== state.revision) return false;
+    Object.assign(node.style, to);
+    state.animation?.cancel();
+    state.animation = void 0;
+    node.dataset.motionPhase = phase === "exit" ? "hidden" : "visible";
+    return true;
+  };
+  const duration = motionDuration(
+    token || (phase === "enter" ? "--popup-enter" : "--popup-exit")
+  );
+  if (!duration || !node.isConnected) return Promise.resolve(finish());
+  const animation = node.animate([from, to], {
+    duration,
+    easing: getComputedStyle(document.documentElement).getPropertyValue("--ease").trim() || "ease-out",
+    fill: "both"
+  });
+  state.animation = animation;
+  const policy = matchMedia("(prefers-reduced-motion: reduce)");
+  const stop = () => {
+    if (reducedMotion() && animation.playState !== "finished")
+      animation.finish();
+  };
+  const observer = new MutationObserver(stop);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-motion"]
+  });
+  policy.addEventListener("change", stop);
+  return animation.finished.then(finish, () => false).finally(() => {
+    observer.disconnect();
+    policy.removeEventListener("change", stop);
+  });
+}
+function menuSurfaceMotion(node, phase, side = "bottom") {
+  const offset = {
+    top: "0 4px",
+    bottom: "0 -4px",
+    left: "4px 0",
+    right: "-4px 0"
+  }[side];
+  return surfaceMotion(node, phase, offset);
+}
+export {
+  cancelMotion,
+  menuSurfaceMotion,
+  motionDuration,
+  popupExitDuration,
+  reducedMotion,
+  surfaceMotion
+};

package/components/rangeMath.d.ts

@@ -0,0 +1,12 @@
+export type RangeValue = [number, number];
+export declare function rangeSettings(minimum?: number, maximum?: number, increment?: number, minDistance?: number): {
+    min: number;
+    max: number;
+    step: number;
+    count: number;
+    gap: number;
+    indexOf: (value: number) => number;
+    toValue: (index: number) => number;
+    normalize: (value: RangeValue) => RangeValue;
+};
+export declare function moveRange(value: RangeValue, index: 0 | 1, target: number, settings: ReturnType<typeof rangeSettings>): RangeValue;

package/components/rangeMath.js

@@ -0,0 +1,30 @@
+const finite = (n, fallback) => typeof n === "number" && Number.isFinite(n) ? n : fallback;
+const round = (n) => Number(n.toFixed(10));
+function rangeSettings(minimum = 0, maximum = 100, increment = 1, minDistance = 0) {
+  const min = finite(minimum, 0), requestedMax = Math.max(min, finite(maximum, min + 100)), span = Number.isFinite(requestedMax - min) ? requestedMax - min : 0, safeStep = finite(increment, 1), step = span ? Math.min(span, Math.max(1e-8, safeStep > 0 ? safeStep : 1)) : 1, count = Math.max(0, Math.floor(span / step + 1e-8)), max = round(min + count * step), gap = Math.min(
+    count,
+    Math.max(0, Math.ceil(finite(minDistance, 0) / step - 1e-8))
+  );
+  const indexOf = (value) => Math.min(
+    count,
+    Math.max(0, Math.round((finite(value, min) - min) / step))
+  ), toValue = (index) => round(min + index * step);
+  const normalize = (value) => {
+    const a = indexOf(value[0]), b = indexOf(value[1]);
+    let low = Math.min(a, b), high = Math.max(a, b);
+    if (high - low < gap) {
+      high = Math.min(count, low + gap);
+      low = Math.min(low, high - gap);
+    }
+    return [toValue(low), toValue(high)];
+  };
+  return { min, max, step, count, gap, indexOf, toValue, normalize };
+}
+function moveRange(value, index, target, settings) {
+  const current = settings.normalize(value), low = settings.indexOf(current[0]), high = settings.indexOf(current[1]), next = settings.indexOf(target);
+  return index === 0 ? [settings.toValue(Math.min(next, high - settings.gap)), current[1]] : [current[0], settings.toValue(Math.max(next, low + settings.gap))];
+}
+export {
+  moveRange,
+  rangeSettings
+};