@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/dist/field.d.ts

@@ -0,0 +1,2 @@
+declare function defineFieldElements(): void;
+export { defineFieldElements };

package/dist/field.js

@@ -0,0 +1,101 @@
+// src/field.ts
+import { field, fieldGroup, fieldSet } from "@ui-sdk/core/field";
+import {
+  checkFieldOutside,
+  fieldOutsideAttrs,
+  fieldOutsideErrorShown
+} from "@ui-sdk/core/renderer";
+import { createParts } from "./define-element.js";
+var owner = "ui-field";
+function writeAlone(el, slot) {
+  for (const [name, value] of Object.entries(fieldOutsideAttrs(slot))) {
+    if (el.getAttribute(name) !== value) {
+      el.setAttribute(name, value);
+    }
+  }
+}
+function labelAlone(el, host) {
+  writeAlone(el, "label");
+  if (el === host && host.hasAttribute("as-child")) {
+    return;
+  }
+  checkFieldOutside(
+    el,
+    "label",
+    "Put `as-child` on the <ui-field-label>, around a native <label> that wraps the control."
+  );
+}
+function errorAlone(el, host) {
+  if (el === host && host.hasAttribute("as-child")) {
+    return;
+  }
+  writeAlone(el, "error");
+  const match = host.getAttribute("match");
+  el.hidden = !fieldOutsideErrorShown({
+    match: match === "" || match === "true"
+  });
+}
+function defineFieldElements() {
+  createParts(field, {
+    root: {
+      tag: owner,
+      display: "block",
+      // `invalid` is three-way, so its property writes "false" for false, and
+      // reads undefined without the attribute, which leaves it to the browser.
+      kinds: { invalid: (value) => value !== "false" },
+      // Empty errors show the current message.
+      render(el, instance) {
+        const update = () => {
+          for (const error of Array.from(
+            el.querySelectorAll("ui-field-error")
+          )) {
+            if (error.closest(owner) !== el) {
+              continue;
+            }
+            if (!("message" in error.dataset) && error.childNodes.length) {
+              continue;
+            }
+            error.dataset.message = "";
+            const message = instance.api.internal.message();
+            if (error.textContent !== message) {
+              error.textContent = message;
+            }
+          }
+        };
+        queueMicrotask(update);
+        return instance.subscribe(update);
+      }
+    },
+    // Outside any field, a label is plain. With as-child on a native <label>,
+    // it labels the control inside it, like a card around a whole field.
+    label: { tag: "ui-field-label", display: "block", alone: labelAlone },
+    // Describes the nearest field, or the whole field set when no field is closer.
+    description: {
+      tag: "ui-field-description",
+      owners: ["ui-field-set"],
+      display: "block",
+      alone: (el) => writeAlone(el, "description")
+    },
+    error: { tag: "ui-field-error", display: "block", alone: errorAlone }
+  });
+  createParts(fieldSet, {
+    // Wraps a native <fieldset> and its <legend>, so `disabled` disables every
+    // control inside it the way the browser does.
+    root: {
+      tag: "ui-field-set",
+      display: "contents",
+      children: {
+        set: (el) => el.querySelector(":scope > fieldset"),
+        legend: (el) => el.querySelector(":scope > fieldset > legend")
+      },
+      optionalChildren: ["legend"]
+    },
+    legend: { tag: "ui-field-legend", display: "block" }
+  });
+  createParts(fieldGroup, {
+    root: { tag: "ui-field-group", self: "group", display: "block" }
+  });
+}
+export {
+  defineFieldElements
+};

package/dist/file-input.d.ts

@@ -0,0 +1,2 @@
+declare function defineFileInputElements(): void;
+export { defineFileInputElements };

package/dist/file-input.js

@@ -0,0 +1,140 @@
+// src/file-input.ts
+import {
+  fileInput,
+  formatFileSize,
+  relativePath
+} from "@ui-sdk/core/file-input";
+import { fileKey } from "@ui-sdk/core/renderer";
+import { createParts } from "./define-element.js";
+import { element } from "./list.js";
+var owner = "ui-file-input";
+function defineFileInputElements() {
+  createParts(fileInput, {
+    root: {
+      tag: owner,
+      display: "block",
+      formAssociated: true,
+      // `value` is live, and `defaultValue` is the files a form reset returns to.
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, files) => api.setValue(files ?? [])
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "addFiles",
+        "removeFile",
+        "clear",
+        "open",
+        "focus",
+        "isDragging"
+      ],
+      // The picker's input is generated inside, once.
+      children: {
+        input: (el) => {
+          const existing = el.querySelector(
+            ':scope > input[type="file"]'
+          );
+          if (existing) {
+            return existing;
+          }
+          const input = el.ownerDocument.createElement("input");
+          input.type = "file";
+          el.append(input);
+          return input;
+        }
+      },
+      // Lists follow the value.
+      render(el, { api, subscribe }) {
+        renderLists(el, api);
+        return subscribe(() => renderLists(el, api));
+      }
+    },
+    // Wraps your own <button>, so it keeps its native behavior.
+    trigger: {
+      tag: "ui-file-input-trigger",
+      display: "contents",
+      target: (el) => el.querySelector("button") ?? el.firstElementChild
+    },
+    // `paste-target` is "document" or a CSS selector.
+    dropzone: { tag: "ui-file-input-dropzone", display: "block" },
+    list: { tag: "ui-file-input-list", display: "block" },
+    item: {
+      tag: "ui-file-input-item",
+      display: "block",
+      // Its value is its file's key.
+      kinds: { value: null },
+      context: (el) => {
+        const file = el.file;
+        return file ? { value: fileKey(file) } : {};
+      }
+    },
+    "item-remove": {
+      tag: "ui-file-input-item-remove",
+      display: "contents",
+      target: (el) => el.querySelector("button") ?? el.firstElementChild
+    }
+  });
+}
+var renderedValue = /* @__PURE__ */ new WeakMap();
+var fileFields = {
+  name: (file) => file.name,
+  size: (file) => formatFileSize(file.size),
+  type: (file) => file.type,
+  path: (file) => relativePath(file)
+};
+function createItem(list, file) {
+  const template = list.querySelector(":scope > template");
+  const copy = template?.content.firstElementChild?.cloneNode(true);
+  const item = copy?.localName === "ui-file-input-item" ? copy : element("ui-file-input-item");
+  if (item !== copy) {
+    item.append(element("span", { "data-file": "name" }));
+    const remove = element("ui-file-input-item-remove");
+    remove.append(element("button", { type: "button" }, "\xD7"));
+    item.append(remove);
+  }
+  item.file = file;
+  for (const field of item.querySelectorAll("[data-file]")) {
+    field.textContent = fileFields[field.dataset.file ?? ""]?.(file) ?? "";
+  }
+  return item;
+}
+function renderLists(el, api) {
+  const value = api.getValue();
+  for (const list of el.querySelectorAll("ui-file-input-list")) {
+    if (list.closest(owner) !== el || renderedValue.get(list) === value) {
+      continue;
+    }
+    renderedValue.set(list, value);
+    const existing = /* @__PURE__ */ new Map();
+    for (const item of list.querySelectorAll(
+      ":scope > ui-file-input-item"
+    )) {
+      if (item.file) {
+        existing.set(item.file, item);
+      }
+    }
+    for (const [file, item] of existing) {
+      if (!value.includes(file)) {
+        item.remove();
+      }
+    }
+    let previous = list.querySelector(":scope > template");
+    for (const file of value) {
+      const item = existing.get(file) ?? createItem(list, file);
+      if (item.parentElement !== list || item.previousElementSibling !== previous) {
+        if (previous) {
+          previous.after(item);
+        } else {
+          list.prepend(item);
+        }
+      }
+      previous = item;
+    }
+  }
+}
+export {
+  defineFileInputElements
+};

package/dist/forward-attributes.d.ts

@@ -0,0 +1,2 @@
+declare function forwardAttributes(host: HTMLElement, input: HTMLElement, names: readonly string[]): void;
+export { forwardAttributes };

package/dist/forward-attributes.js

@@ -0,0 +1,22 @@
+// src/forward-attributes.ts
+function forwardAttributes(host, input, names) {
+  const move = (keep) => {
+    for (const name of names) {
+      const value = host.getAttribute(name);
+      if (value === null) {
+        continue;
+      }
+      if (!keep || !input.hasAttribute(name)) {
+        input.setAttribute(name, value);
+      }
+      host.removeAttribute(name);
+    }
+  };
+  move(true);
+  new MutationObserver(() => move(false)).observe(host, {
+    attributeFilter: [...names]
+  });
+}
+export {
+  forwardAttributes
+};

package/dist/history.d.ts

@@ -0,0 +1,2 @@
+export { createHistory, describeEntry, stageChanges, } from "@ui-sdk/core/history";
+export type { HistoryEntry, HistoryOptions, StagedChange, } from "@ui-sdk/core/history";

package/dist/history.js

@@ -0,0 +1,11 @@
+// src/history.ts
+import {
+  createHistory,
+  describeEntry,
+  stageChanges
+} from "@ui-sdk/core/history";
+export {
+  createHistory,
+  describeEntry,
+  stageChanges
+};

package/dist/hover-card.d.ts

@@ -0,0 +1,2 @@
+declare function defineHoverCardElements(): void;
+export { defineHoverCardElements };

package/dist/hover-card.js

@@ -0,0 +1,31 @@
+// src/hover-card.ts
+import { hoverCard } from "@ui-sdk/core/hover-card";
+import { createParts } from "./define-element.js";
+import { popupApi, popupKinds, popupPortal, popupState } from "./popup.js";
+var owner = "ui-hover-card";
+function defineHoverCardElements() {
+  createParts(hoverCard, {
+    root: {
+      tag: owner,
+      kinds: popupKinds,
+      // `portal` handles the `container` attribute, so core never gets it.
+      options: () => ({ container: void 0 }),
+      state: popupState,
+      api: popupApi,
+      // container="#id" renders the popup there.
+      portal: popupPortal
+    },
+    // The trigger wraps the user's own link, so it stays one.
+    // With `for="card-id"`, it opens that card from anywhere on the page.
+    trigger: {
+      tag: "ui-hover-card-trigger",
+      display: "contents",
+      target: (el) => el.querySelector("a[href], button") ?? el.firstElementChild
+    },
+    content: { tag: "ui-hover-card-content", kinds: popupKinds },
+    arrow: { tag: "ui-hover-card-arrow", display: "block" }
+  });
+}
+export {
+  defineHoverCardElements
+};

package/dist/image-cropper.d.ts

@@ -0,0 +1,2 @@
+declare function defineImageCropperElements(): void;
+export { defineImageCropperElements };

package/dist/image-cropper.js

@@ -0,0 +1,66 @@
+// src/image-cropper.ts
+import { imageCropper } from "@ui-sdk/core/image-cropper";
+import { createParts, ownButton, wrappedChild } from "./define-element.js";
+function ownInput(el) {
+  const written = el.querySelector("input");
+  if (written) {
+    return written;
+  }
+  const made = el.ownerDocument.createElement("input");
+  el.append(made);
+  return made;
+}
+function defineImageCropperElements() {
+  createParts(imageCropper, {
+    root: {
+      tag: "ui-image-cropper",
+      display: "block",
+      state: {
+        crop: {
+          get: (api) => api.getCrop(),
+          set: (api, crop) => {
+            if (crop) {
+              api.setCrop(crop);
+            }
+          }
+        }
+      },
+      api: [
+        "getCrop",
+        "setCrop",
+        "rotate",
+        "flip",
+        "getZoom",
+        "setZoom",
+        "focus"
+      ]
+    },
+    viewport: { tag: "ui-image-cropper-viewport", display: "block" },
+    image: {
+      tag: "ui-image-cropper-image",
+      display: "contents",
+      target: wrappedChild("img")
+    },
+    selection: { tag: "ui-image-cropper-selection", display: "block" },
+    grid: { tag: "ui-image-cropper-grid", display: "block" },
+    handle: { tag: "ui-image-cropper-handle", display: "block" },
+    zoom: {
+      tag: "ui-image-cropper-zoom",
+      display: "contents",
+      target: ownInput
+    },
+    rotate: {
+      tag: "ui-image-cropper-rotate",
+      display: "contents",
+      target: ownButton()
+    },
+    flip: {
+      tag: "ui-image-cropper-flip",
+      display: "contents",
+      target: ownButton()
+    }
+  });
+}
+export {
+  defineImageCropperElements
+};

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+export { createParts, wrappedButton, wrappedChild, type AttributeType, type Kinds, type PartOptions, type Parts, type RootOptions, } from "./define-element.js";
+export { createDrawerController, sheetPhysics } from "@ui-sdk/core/drawer";
+export type { DrawerApi, DrawerBackdropState, DrawerContentProps, DrawerContentState, DrawerController, DrawerDismissAttemptDetails, DrawerDismissReason, DrawerDriver, DrawerHandleState, DrawerKeyframes, DrawerOpenChangeReason, DrawerOptions, DrawerOutletProps, DrawerOutletState, DrawerPayloadChangeReason, DrawerPrimitive, DrawerSide, DrawerSnapPointChangeReason, SheetPhysics, SnapPoint, } from "@ui-sdk/core/drawer";
+export { createOverlays, overlays, type OverlayHostToastOptions, } from "./overlays.js";
+export { createToaster, toast, type ToastContent } from "./toast.js";
+export { confirm, createConfirm, createDialogController, } from "@ui-sdk/core/dialog";
+export type { AlertDialogBackdropState, AlertDialogCloseActionDetails, AlertDialogCloseProps, AlertDialogCloseState, AlertDialogContentProps, AlertDialogContentState, AlertDialogController, AlertDialogOpenChangeReason, AlertDialogOptions, AlertDialogPayloadChangeReason, AlertDialogPrimitive, AlertDialogShortcutProps, AlertDialogShortcutState, AlertDialogTriggerProps, AlertDialogTriggerState, ConfirmEntry, ConfirmOptions, DialogApi, DialogBackdropState, DialogCloseActionDetails, DialogCloseProps, DialogCloseState, DialogContentProps, DialogContentState, DialogController, DialogDismissAttemptDetails, DialogDismissReason, DialogFinalFocus, DialogInitialFocus, DialogOpenChangeDetails, DialogOpenChangeReason, DialogOptions, DialogPayloadChangeReason, DialogPrimitive, DialogSharedOptions, DialogShortcutProps, DialogShortcutState, DialogTriggerProps, DialogTriggerState, } from "@ui-sdk/core/dialog";
+export type { Toast, ToastAction, ToastActionDetails, ToastActionProps, ToastButtonState, ToastCancel, ToastCloseProps, ToastDismissDetails, ToastDismissReason, ToastItem, ToastOptions, ToastPauseReason, ToastRegionOptions, ToastRegionPrimitive, ToastRegionState, ToastState, ToastType, Toaster, } from "@ui-sdk/core/toast";
+export { createMenuController, type MenuData } from "@ui-sdk/core/menu";
+export type { UiActionDetail } from "./action.js";
+export { createTriggerMenuController, textFieldAdapter, type TriggerDefinition, } from "@ui-sdk/core/trigger-menu";
+export { createResizableController, resizableStorageKey, } from "@ui-sdk/core/resizable";
+export type { ResizableApi, ResizableChangeOptions, ResizableController, ResizableHandleProps, ResizableHandleState, ResizableLayoutChangeDetails, ResizableLayoutChangeReason, ResizableLayoutCommitDetails, ResizableOptions, ResizablePanelProps, ResizablePanelState, ResizablePrimitive, ResizableSize, ResizableState, ResizableStorage, } from "@ui-sdk/core/resizable";
+export { createFileInputController, formatFileSize, relativePath, } from "@ui-sdk/core/file-input";
+export { createPaginationController, paginationRange, type PaginationRangeItem, } from "@ui-sdk/core/pagination";
+export { createCarouselController } from "@ui-sdk/core/carousel";
+export { createCalendarController } from "@ui-sdk/core/calendar";
+export { createDatePickerController } from "@ui-sdk/core/date-picker";
+export { createDateInputController } from "@ui-sdk/core/date-input";
+export { createTimeInputController } from "@ui-sdk/core/time-input";
+export { createAccordionController } from "@ui-sdk/core/accordion";
+export { createAlertDialogController } from "@ui-sdk/core/alert-dialog";
+export { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+export { createCheckboxController, createCheckboxGroupController, } from "@ui-sdk/core/checkbox";
+export { createTimelineController } from "@ui-sdk/core/timeline";
+export { createCollapsibleController } from "@ui-sdk/core/collapsible";
+export { createColorPickerController } from "@ui-sdk/core/color-picker";
+export { createComboboxController } from "@ui-sdk/core/combobox";
+export { createCommandController } from "@ui-sdk/core/command";
+export { createHoverCardController } from "@ui-sdk/core/hover-card";
+export { createImageCropperController } from "@ui-sdk/core/image-cropper";
+export { createInputController } from "@ui-sdk/core/input";
+export { createListboxController } from "@ui-sdk/core/listbox";
+export { createMenubarController } from "@ui-sdk/core/menubar";
+export { createNavigationMenuController } from "@ui-sdk/core/navigation-menu";
+export { createNumberInputController } from "@ui-sdk/core/number-input";
+export { createOTPInputController } from "@ui-sdk/core/otp-input";
+export { createPasswordInputController } from "@ui-sdk/core/password-input";
+export { createPopoverController } from "@ui-sdk/core/popover";
+export { createRadioGroupController } from "@ui-sdk/core/radio";
+export { createRatingController } from "@ui-sdk/core/rating";
+export { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+export { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+export { createSelectController } from "@ui-sdk/core/select";
+export { createSliderController } from "@ui-sdk/core/slider";
+export { createSwitchController } from "@ui-sdk/core/switch";
+export { createTabsController } from "@ui-sdk/core/tabs";
+export { createToggleController, createToggleGroupController, } from "@ui-sdk/core/toggle";
+export { createTokenInputController } from "@ui-sdk/core/token-input";
+export { createToolbarController } from "@ui-sdk/core/toolbar";
+export { createTooltipController } from "@ui-sdk/core/tooltip";
+export { createTreeController } from "@ui-sdk/core/tree";
+export { createWaterfallController } from "@ui-sdk/core/waterfall";
+export { fuzzyScore, matchRanges, matchSegments } from "@ui-sdk/core/text-match";
+export type { MatchRange, MatchSegment } from "@ui-sdk/core/text-match";
+export { addDays, addMonths, addYears, clampDate, dateFormatter, dateParts, datePattern, daysBetween, daysInMonth, endOfMonth, endOfWeek, firstDayOfWeek, formatDate, formatDateRange, formatDateToParts, isISODate, isSameMonth, isoDate, monthGrid, monthNames, parseDate, startOfMonth, startOfWeek, toISODate, todayDate, weekday, weekdayNames, } from "@ui-sdk/core/date";
+export type { DateField, DateParts, DatePattern, ISODate, } from "@ui-sdk/core/date";
+export { clamp, decimalsOf, formatNumber, formatNumberRange, formatNumberToParts, fractionOf, isPartialNumber, maxOnGrid, numberFormatter, parseNumber, roundTo, scrubTo, stepBy, stepFromKey, stepValue, valueAt, wrap, } from "@ui-sdk/core/number";
+export type { NumberFormat, NumberKeyOptions, NumberMove, NumberRange, NumberScale, NumberScrub, NumberSnap, StepRange, } from "@ui-sdk/core/number";
+export { colorDistance, contrastRatio, convertColor, formatColor, isInGamut, mixColor, parseColor, toGamut, } from "@ui-sdk/core/color";
+export type { Color, ColorFormat, ColorFormatOptions, ColorGamut, ColorHueInterpolation, ColorMixOptions, ColorSpace, } from "@ui-sdk/core/color";
+export { cropImage } from "@ui-sdk/core/image";
+export type { CropImageOptions, ImageCrop, ImageRotation, ImageSource, } from "@ui-sdk/core/image";
+export { ariaKeyshortcuts, formatShortcut, registerShortcut, shortcuts, } from "@ui-sdk/core/shortcuts";
+export type { ShortcutHandler, ShortcutInfo, ShortcutKeys, ShortcutOptions, Shortcuts, } from "@ui-sdk/core/shortcuts";
+export type { AccordionEvents, AlertDialogEvents, ButtonEvents, CalendarEvents, CheckboxEvents, CheckboxGroupEvents, CollapsibleEvents, AutocompleteEvents, ColorPickerEvents, ComboboxEvents, CommandEvents, DateInputEvents, DatePickerEvents, DialogEvents, DrawerEvents, HoverCardEvents, ImageCropperEvents, InputEvents, ListboxEvents, OTPInputEvents, AvatarEvents, FileInputEvents, MenuEvents, NavigationMenuEvents, NumberInputEvents, PaginationEvents, CarouselEvents, PasswordInputEvents, PopoverEvents, RadioGroupEvents, RatingEvents, ResizableEvents, SegmentedControlEvents, SelectEvents, SliderEvents, SwitchEvents, TabsEvents, TimeInputEvents, TokenInputEvents, ToggleEvents, ToggleGroupEvents, TooltipEvents, TreeEvents, WaterfallEvents, TriggerMenuEvents, UiAccordionElement, UiAlertDialogElement, UiButtonElement, UiCalendarElement, UiChangeDetail, UiChangeEvent, UiCheckboxElement, UiCheckboxGroupElement, UiTimelineElement, UiCollapsibleElement, UiAutocompleteElement, UiColorPickerElement, UiComboboxElement, UiCommandElement, UiDateInputElement, UiDatePickerElement, UiDetailedChangeEvent, UiDialogElement, UiDrawerElement, UiFileInputElement, UiDismissAttemptEvent, UiElement, UiFieldElement, UiFieldGroupElement, UiFieldSetElement, UiHighlightEvent, UiHoverCardElement, UiImageCropperElement, UiInputElement, UiInputGroupElement, UiListboxElement, UiOTPInputElement, UiAvatarElement, UiGaugeElement, UiMeterElement, UiScrollAreaElement, UiMenuElement, UiMenuSubElement, UiNavigationMenuElement, UiNumberInputElement, UiOpenChangeCompleteEvent, UiPaginationElement, UiCarouselElement, UiPasswordInputElement, UiOverlayHostElement, UiPopoverElement, UiRadioElement, UiRadioGroupElement, UiRatingElement, UiResizableElement, UiSegmentedControlElement, UiSegmentedControlItemElement, UiSelectElement, UiSeparatorElement, UiSliderElement, UiSwitchElement, UiTabsElement, UiTextareaElement, UiTimeInputElement, UiToastRegionElement, UiTokenInputElement, UiTreeElement, UiWaterfallElement, UiToggleElement, UiToggleGroupElement, UiTooltipElement, UiTriggerMenuElement, } from "./events.js";