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

package/dist/index.js

@@ -0,0 +1,269 @@
+// src/index.ts
+import {
+  createParts,
+  wrappedButton,
+  wrappedChild
+} from "./define-element.js";
+import { createDrawerController, sheetPhysics } from "@ui-sdk/core/drawer";
+import {
+  createOverlays,
+  overlays
+} from "./overlays.js";
+import { createToaster, toast } from "./toast.js";
+import {
+  confirm,
+  createConfirm,
+  createDialogController
+} from "@ui-sdk/core/dialog";
+import { createMenuController } from "@ui-sdk/core/menu";
+import {
+  createTriggerMenuController,
+  textFieldAdapter
+} from "@ui-sdk/core/trigger-menu";
+import {
+  createResizableController,
+  resizableStorageKey
+} from "@ui-sdk/core/resizable";
+import {
+  createFileInputController,
+  formatFileSize,
+  relativePath
+} from "@ui-sdk/core/file-input";
+import {
+  createPaginationController,
+  paginationRange
+} from "@ui-sdk/core/pagination";
+import { createCarouselController } from "@ui-sdk/core/carousel";
+import { createCalendarController } from "@ui-sdk/core/calendar";
+import { createDatePickerController } from "@ui-sdk/core/date-picker";
+import { createDateInputController } from "@ui-sdk/core/date-input";
+import { createTimeInputController } from "@ui-sdk/core/time-input";
+import { createAccordionController } from "@ui-sdk/core/accordion";
+import { createAlertDialogController } from "@ui-sdk/core/alert-dialog";
+import { createAutocompleteController } from "@ui-sdk/core/autocomplete";
+import {
+  createCheckboxController,
+  createCheckboxGroupController
+} from "@ui-sdk/core/checkbox";
+import { createTimelineController } from "@ui-sdk/core/timeline";
+import { createCollapsibleController } from "@ui-sdk/core/collapsible";
+import { createColorPickerController } from "@ui-sdk/core/color-picker";
+import { createComboboxController } from "@ui-sdk/core/combobox";
+import { createCommandController } from "@ui-sdk/core/command";
+import { createHoverCardController } from "@ui-sdk/core/hover-card";
+import { createImageCropperController } from "@ui-sdk/core/image-cropper";
+import { createInputController } from "@ui-sdk/core/input";
+import { createListboxController } from "@ui-sdk/core/listbox";
+import { createMenubarController } from "@ui-sdk/core/menubar";
+import { createNavigationMenuController } from "@ui-sdk/core/navigation-menu";
+import { createNumberInputController } from "@ui-sdk/core/number-input";
+import { createOTPInputController } from "@ui-sdk/core/otp-input";
+import { createPasswordInputController } from "@ui-sdk/core/password-input";
+import { createPopoverController } from "@ui-sdk/core/popover";
+import { createRadioGroupController } from "@ui-sdk/core/radio";
+import { createRatingController } from "@ui-sdk/core/rating";
+import { createScrollAreaController } from "@ui-sdk/core/scroll-area";
+import { createSegmentedControlController } from "@ui-sdk/core/segmented-control";
+import { createSelectController } from "@ui-sdk/core/select";
+import { createSliderController } from "@ui-sdk/core/slider";
+import { createSwitchController } from "@ui-sdk/core/switch";
+import { createTabsController } from "@ui-sdk/core/tabs";
+import {
+  createToggleController,
+  createToggleGroupController
+} from "@ui-sdk/core/toggle";
+import { createTokenInputController } from "@ui-sdk/core/token-input";
+import { createToolbarController } from "@ui-sdk/core/toolbar";
+import { createTooltipController } from "@ui-sdk/core/tooltip";
+import { createTreeController } from "@ui-sdk/core/tree";
+import { createWaterfallController } from "@ui-sdk/core/waterfall";
+import { fuzzyScore, matchRanges, matchSegments } from "@ui-sdk/core/text-match";
+import {
+  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";
+import {
+  clamp,
+  decimalsOf,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  fractionOf,
+  isPartialNumber,
+  maxOnGrid,
+  numberFormatter,
+  parseNumber,
+  roundTo,
+  scrubTo,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  valueAt,
+  wrap
+} from "@ui-sdk/core/number";
+import {
+  colorDistance,
+  contrastRatio,
+  convertColor,
+  formatColor,
+  isInGamut,
+  mixColor,
+  parseColor,
+  toGamut
+} from "@ui-sdk/core/color";
+import { cropImage } from "@ui-sdk/core/image";
+import {
+  ariaKeyshortcuts,
+  formatShortcut,
+  registerShortcut,
+  shortcuts
+} from "@ui-sdk/core/shortcuts";
+export {
+  addDays,
+  addMonths,
+  addYears,
+  ariaKeyshortcuts,
+  clamp,
+  clampDate,
+  colorDistance,
+  confirm,
+  contrastRatio,
+  convertColor,
+  createAccordionController,
+  createAlertDialogController,
+  createAutocompleteController,
+  createCalendarController,
+  createCarouselController,
+  createCheckboxController,
+  createCheckboxGroupController,
+  createCollapsibleController,
+  createColorPickerController,
+  createComboboxController,
+  createCommandController,
+  createConfirm,
+  createDateInputController,
+  createDatePickerController,
+  createDialogController,
+  createDrawerController,
+  createFileInputController,
+  createHoverCardController,
+  createImageCropperController,
+  createInputController,
+  createListboxController,
+  createMenuController,
+  createMenubarController,
+  createNavigationMenuController,
+  createNumberInputController,
+  createOTPInputController,
+  createOverlays,
+  createPaginationController,
+  createParts,
+  createPasswordInputController,
+  createPopoverController,
+  createRadioGroupController,
+  createRatingController,
+  createResizableController,
+  createScrollAreaController,
+  createSegmentedControlController,
+  createSelectController,
+  createSliderController,
+  createSwitchController,
+  createTabsController,
+  createTimeInputController,
+  createTimelineController,
+  createToaster,
+  createToggleController,
+  createToggleGroupController,
+  createTokenInputController,
+  createToolbarController,
+  createTooltipController,
+  createTreeController,
+  createTriggerMenuController,
+  createWaterfallController,
+  cropImage,
+  dateFormatter,
+  dateParts,
+  datePattern,
+  daysBetween,
+  daysInMonth,
+  decimalsOf,
+  endOfMonth,
+  endOfWeek,
+  firstDayOfWeek,
+  formatColor,
+  formatDate,
+  formatDateRange,
+  formatDateToParts,
+  formatFileSize,
+  formatNumber,
+  formatNumberRange,
+  formatNumberToParts,
+  formatShortcut,
+  fractionOf,
+  fuzzyScore,
+  isISODate,
+  isInGamut,
+  isPartialNumber,
+  isSameMonth,
+  isoDate,
+  matchRanges,
+  matchSegments,
+  maxOnGrid,
+  mixColor,
+  monthGrid,
+  monthNames,
+  numberFormatter,
+  overlays,
+  paginationRange,
+  parseColor,
+  parseDate,
+  parseNumber,
+  registerShortcut,
+  relativePath,
+  resizableStorageKey,
+  roundTo,
+  scrubTo,
+  sheetPhysics,
+  shortcuts,
+  startOfMonth,
+  startOfWeek,
+  stepBy,
+  stepFromKey,
+  stepValue,
+  textFieldAdapter,
+  toGamut,
+  toISODate,
+  toast,
+  todayDate,
+  valueAt,
+  weekday,
+  weekdayNames,
+  wrap,
+  wrappedButton,
+  wrappedChild
+};

package/dist/input.d.ts

@@ -0,0 +1,3 @@
+declare function defineInputElements(): void;
+declare function defineInputGroupElements(): void;
+export { defineInputElements, defineInputGroupElements };

package/dist/input.js

@@ -0,0 +1,69 @@
+// src/input.ts
+import {
+  input,
+  inputGroup,
+  textarea
+} from "@ui-sdk/core/input";
+import { createParts, wrappedChild } from "./define-element.js";
+var textApi = [
+  "getValue",
+  "setValue",
+  "clear",
+  "focus"
+];
+var textState = {
+  value: {
+    get: (api) => api.getValue(),
+    set: (api, value) => api.setValue(value ?? "")
+  }
+};
+var controlProps = {
+  attributes: ["disabled", "readonly", "required"],
+  read: (el) => {
+    const field = el;
+    return {
+      disabled: field.disabled,
+      readOnly: field.readOnly,
+      required: field.required
+    };
+  }
+};
+function defineInputElements() {
+  createParts(input, {
+    root: {
+      tag: "ui-input",
+      display: "contents",
+      children: { root: (el) => el.querySelector(":scope > input") },
+      childProps: controlProps,
+      state: textState,
+      api: textApi
+    }
+  });
+  createParts(textarea, {
+    root: {
+      tag: "ui-textarea",
+      display: "contents",
+      children: { root: (el) => el.querySelector(":scope > textarea") },
+      childProps: controlProps,
+      // The submit shortcut submits the form the textarea is in, so a form's own
+      // submit event hears it. A bubbling "submit" event would reach the form too.
+      silent: ["onSubmit"],
+      state: textState,
+      api: textApi
+    }
+  });
+}
+function defineInputGroupElements() {
+  createParts(inputGroup, {
+    root: { tag: "ui-input-group", self: "group", display: "block" },
+    clear: {
+      tag: "ui-input-clear",
+      display: "contents",
+      target: wrappedChild("button")
+    }
+  });
+}
+export {
+  defineInputElements,
+  defineInputGroupElements
+};

package/dist/label.d.ts

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

package/dist/label.js

@@ -0,0 +1,11 @@
+// src/label.ts
+import { label } from "@ui-sdk/core/label";
+import { createParts } from "./define-element.js";
+function defineLabelElements() {
+  createParts(label, {
+    root: { tag: "ui-label" }
+  });
+}
+export {
+  defineLabelElements
+};

package/dist/list.d.ts

@@ -0,0 +1,40 @@
+import type { ListData } from "@ui-sdk/core/select";
+declare const templateOf: (el: Element | null | undefined) => HTMLTemplateElement | null;
+declare function copy(template: HTMLTemplateElement | null | undefined, tagName: string, deep?: boolean): HTMLElement;
+declare function element(tagName: string, attributes?: Record<string, string | boolean | undefined>, text?: string, template?: HTMLTemplateElement | null): HTMLElement;
+declare function listAttribute(value: string): string[];
+declare const itemText: {
+    context: (el: HTMLElement) => {
+        text: string;
+        write: boolean;
+    };
+    kinds: {
+        text: null;
+        write: null;
+    };
+};
+declare const stashedEmpty: {
+    display: "block";
+    context: () => {
+        stash: boolean;
+    };
+    kinds: {
+        stash: null;
+    };
+};
+declare function renderListItems(prefix: "ui-select" | "ui-combobox" | "ui-trigger-menu" | "ui-autocomplete" | "ui-command" | "ui-listbox", items: ListData<any>, toKey?: (value: unknown) => string, template?: HTMLTemplateElement | null): HTMLElement[];
+declare function valuesOf(keys: string[], items: ListData<unknown> | undefined, itemToValue?: (value: unknown) => string): {}[];
+declare function adoptDefaultValue(el: HTMLElement, items: ListData<unknown> | undefined, api: {
+    getValue: () => unknown;
+    internal: {
+        adoptValue: (value: unknown) => void;
+        options: () => {
+            itemToValue?: (value: any) => string;
+        };
+    };
+} | undefined): void;
+/** Whether a part was rendered from data, rather than written in the markup. */
+declare const isGenerated: (el: Element) => boolean;
+declare function renderData(list: Element, prefix: "ui-select" | "ui-autocomplete" | "ui-command", visible: ListData<any>, template: HTMLTemplateElement | null, toKey?: (value: unknown) => string): void;
+declare function placeItems(list: Element, fresh: Element[], owned: (el: Element) => boolean, selectAll: string): void;
+export { adoptDefaultValue, copy, element, isGenerated, itemText, listAttribute, placeItems, renderData, renderListItems, stashedEmpty, templateOf, valuesOf, };

package/dist/list.js

@@ -0,0 +1,192 @@
+// src/list.ts
+import { flattenData, itemKey } from "@ui-sdk/core/renderer";
+var templateOf = (el) => el?.querySelector(":scope > template") ?? null;
+function copy(template, tagName, deep = true) {
+  const model = template?.content.querySelector(tagName);
+  return model ? model.cloneNode(deep) : document.createElement(tagName);
+}
+function element(tagName, attributes = {}, text, template) {
+  const el = copy(template, tagName);
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === void 0 || value === false) {
+      continue;
+    }
+    el.setAttribute(name, value === true ? "" : value);
+  }
+  if (text) {
+    const slot = el.querySelector(`${tagName}-text`);
+    if (slot) {
+      slot.textContent = text;
+    } else {
+      el.prepend(text);
+    }
+  }
+  return el;
+}
+function listAttribute(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+var itemText = {
+  context: (el) => ({ text: el.textContent ?? "", write: true }),
+  kinds: { text: null, write: null }
+};
+var stashedEmpty = {
+  display: "block",
+  context: () => ({ stash: true }),
+  kinds: { stash: null }
+};
+function renderListItems(prefix, items, toKey = (value) => String(value), template) {
+  return items.map((entry) => {
+    if (typeof entry === "string") {
+      return element(
+        `${prefix}-item`,
+        { value: entry, label: entry },
+        entry,
+        template
+      );
+    }
+    if ("type" in entry && entry.type === "separator") {
+      return element(`${prefix}-separator`, {}, "", template);
+    }
+    if ("type" in entry && entry.type === "group") {
+      const group = copy(template, `${prefix}-group`, false);
+      if (entry.label) {
+        group.append(
+          element(`${prefix}-group-label`, {}, entry.label, template)
+        );
+      }
+      group.append(...renderListItems(prefix, entry.items, toKey, template));
+      return group;
+    }
+    const data = entry;
+    const el = element(
+      `${prefix}-item`,
+      { value: toKey(data.value), label: data.label, disabled: data.disabled },
+      data.label,
+      template
+    );
+    if (data.keywords) {
+      el.setAttribute("keywords", data.keywords.join(","));
+    }
+    if (data.shortcut) {
+      el.setAttribute("shortcut", data.shortcut);
+    }
+    return el;
+  });
+}
+function valuesOf(keys, items, itemToValue) {
+  if (!items) {
+    return keys;
+  }
+  const byKey = new Map(
+    flattenData(items, (value) => itemKey(value, itemToValue)).map((entry) => [
+      entry.key,
+      entry
+    ])
+  );
+  return keys.map((key) => byKey.get(key)?.value ?? key);
+}
+function adoptDefaultValue(el, items, api) {
+  const start = el.getAttribute("default-value") ?? el.getAttribute("value");
+  if (start === null || !items || !api) {
+    return;
+  }
+  const multiple = el.hasAttribute("multiple") && el.getAttribute("multiple") !== "false";
+  const keys = multiple ? listAttribute(start) : [start];
+  const current = api.getValue();
+  const named = multiple ? Array.isArray(current) && current.length === keys.length && current.every((value, index) => value === keys[index]) : current === keys[0];
+  if (!named) {
+    return;
+  }
+  const values = valuesOf(keys, items, api.internal.options().itemToValue);
+  if (values.every((value, index) => value === keys[index])) {
+    return;
+  }
+  api.internal.adoptValue(multiple ? values : values[0]);
+}
+var generatedItems = /* @__PURE__ */ new WeakSet();
+var renderedData = /* @__PURE__ */ new WeakMap();
+var isGenerated = (el) => generatedItems.has(el);
+function renderData(list, prefix, visible, template, toKey) {
+  const own = Array.from(list.querySelectorAll(`${prefix}-item`)).some(
+    (item) => !generatedItems.has(item)
+  );
+  if (!own && renderedData.get(list) === visible) {
+    return;
+  }
+  if (own) {
+    for (const child of Array.from(list.children)) {
+      if (generatedItems.has(child)) {
+        child.remove();
+      }
+    }
+    renderedData.delete(list);
+    return;
+  }
+  renderedData.set(list, visible);
+  const fresh = renderListItems(prefix, visible, toKey, template);
+  for (const el of fresh) {
+    generatedItems.add(el);
+    el.querySelectorAll(`${prefix}-item`).forEach(
+      (item) => generatedItems.add(item)
+    );
+  }
+  placeItems(list, fresh, isGenerated, `${prefix}-select-all`);
+}
+var madeFrom = /* @__PURE__ */ new WeakMap();
+function placeItems(list, fresh, owned, selectAll) {
+  const kept = /* @__PURE__ */ new Map();
+  for (const child of list.children) {
+    const made = madeFrom.get(child);
+    if (made !== void 0 && owned(child) && !kept.has(made)) {
+      kept.set(made, child);
+    }
+  }
+  const items = fresh.map((el) => {
+    const made = el.outerHTML;
+    const old = kept.get(made);
+    if (old) {
+      kept.delete(made);
+      return old;
+    }
+    madeFrom.set(el, made);
+    return el;
+  });
+  const wanted = new Set(items);
+  for (const child of Array.from(list.children)) {
+    if (owned(child) && !wanted.has(child)) {
+      child.remove();
+    }
+  }
+  const current = Array.from(list.children).filter(owned);
+  const end = Array.from(list.children).find(
+    (child) => !owned(child) && child.localName !== selectAll
+  ) ?? null;
+  const placed = /* @__PURE__ */ new Set();
+  let at = 0;
+  for (const el of items) {
+    while (current[at] && placed.has(current[at])) {
+      at++;
+    }
+    if (current[at] === el) {
+      at++;
+    } else {
+      list.insertBefore(el, current[at] ?? end);
+    }
+    placed.add(el);
+  }
+}
+export {
+  adoptDefaultValue,
+  copy,
+  element,
+  isGenerated,
+  itemText,
+  listAttribute,
+  placeItems,
+  renderData,
+  renderListItems,
+  stashedEmpty,
+  templateOf,
+  valuesOf
+};

package/dist/listbox.d.ts

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

package/dist/listbox.js

@@ -0,0 +1,84 @@
+// src/listbox.ts
+import {
+  listbox
+} from "@ui-sdk/core/listbox";
+import { createParts } from "./define-element.js";
+import {
+  adoptDefaultValue,
+  listAttribute,
+  renderListItems,
+  templateOf,
+  valuesOf
+} from "./list.js";
+var owner = "ui-listbox";
+var generated = /* @__PURE__ */ new WeakMap();
+function defineListboxElements() {
+  createParts(listbox, {
+    root: {
+      tag: owner,
+      defaults: { loop: true, keepInView: true },
+      formAssociated: true,
+      display: "block",
+      options: (el) => {
+        const data = el;
+        const multiple = el.hasAttribute("multiple") && el.getAttribute("multiple") !== "false";
+        const start = el.getAttribute("default-value") ?? el.getAttribute("value");
+        const toValues = (keys) => valuesOf(keys, data.items, data.itemToValue);
+        return {
+          items: data.items,
+          itemToValue: data.itemToValue,
+          isItemEqualToValue: data.isItemEqualToValue,
+          ...start !== null && {
+            defaultValue: multiple ? toValues(listAttribute(start)) : toValues([start])[0]
+          }
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          // A string names items by key, comma-separated with multiple.
+          set: (api, value) => {
+            if (typeof value !== "string") {
+              return api.setValue(value);
+            }
+            const multiple = !!api.internal.options().multiple;
+            const keys = multiple ? listAttribute(value) : [value];
+            const found = keys.map(
+              (key) => api.internal.listbox.valueOf(key) ?? key
+            );
+            api.setValue(multiple ? found : found[0] ?? null);
+          }
+        }
+      },
+      api: ["getValue", "setValue", "clear", "selectAll", "focus"],
+      // Runs again whenever `items` is set.
+      render(el, { api }) {
+        const { items } = el;
+        generated.get(el)?.forEach((child) => child.remove());
+        generated.delete(el);
+        if (!items) {
+          return;
+        }
+        adoptDefaultValue(el, items, api);
+        const fresh = renderListItems(
+          "ui-listbox",
+          items,
+          api.internal.keyOf,
+          templateOf(el)
+        );
+        generated.set(el, fresh);
+        el.append(...fresh);
+      }
+    },
+    item: { tag: "ui-listbox-item", display: "block" },
+    "item-indicator": "ui-listbox-item-indicator",
+    // An icon inside an item. Screen readers and typeahead skip it.
+    "item-icon": "ui-listbox-item-icon",
+    group: { tag: "ui-listbox-group", display: "block" },
+    "group-label": { tag: "ui-listbox-group-label", display: "block" },
+    separator: { tag: "ui-listbox-separator", display: "block" }
+  });
+}
+export {
+  defineListboxElements
+};

package/dist/menu.d.ts

@@ -0,0 +1,4 @@
+import { type MenuData } from "@ui-sdk/core/menu";
+declare function defineMenuElements(): void;
+declare function renderMenuItems(items: MenuData, template?: HTMLTemplateElement | null): HTMLElement[];
+export { defineMenuElements, renderMenuItems };