@lostgradient/cinder 0.4.1 → 0.5.0

package/dist/server/index.server-gyg8tfq3.js

@@ -0,0 +1,176 @@
+import {
+  TypeaheadBuffer,
+  findTypeaheadMatch,
+  isTypeaheadKey
+} from "./index.server-r84kvx9x.js";
+import {
+  resolveTextDirection
+} from "./index.server-r70ezssy.js";
+import {
+  getLocaleContext
+} from "./index.server-sz8sxsj6.js";
+import {
+  getDropdownContext,
+  getDropdownRegister,
+  getDropdownSetOpen
+} from "./index.server-et3p2cfq.js";
+import {
+  createAnchoredOverlay
+} from "./index.server-94b7tjs5.js";
+import {
+  createPortalAttachment
+} from "./index.server-edr3c033.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/dropdown-menu/dropdown-menu.svelte
+import * as $ from "svelte/internal/server";
+import { tick } from "svelte";
+function Dropdown_menu($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      class: customClassName,
+      children,
+      dir: direction,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const context = getDropdownContext();
+    const registerMenu = getDropdownRegister();
+    const setOpen = getDropdownSetOpen();
+    const localeContext = getLocaleContext();
+    let directionRevision = 0;
+    const resolvedDirection = $.derived(() => {
+      if (direction === "auto") {
+        return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? direction;
+      }
+      return direction ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+    });
+    const fallbackAnchorElement = $.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
+    let menuElement = null;
+    let focusedFallbackOpen = false;
+    const typeaheadBuffer = new TypeaheadBuffer;
+    const preferredPlacement = $.derived(() => context.fallbackPlacement ?? "bottom-start");
+    const anchoredFallback = createAnchoredOverlay({
+      open: () => context.isOpen && !context.supportsPopover && Boolean(fallbackAnchorElement()),
+      anchor: () => fallbackAnchorElement(),
+      panel: () => menuElement,
+      placement: () => preferredPlacement(),
+      offset: () => 4,
+      widthMode: () => context.widthMode ?? "menu"
+    });
+    const fallbackPositionStyle = $.derived(() => context.fallbackPositionStyle ?? (fallbackAnchorElement() ? anchoredFallback.positionStyle : undefined));
+    const fallbackPositionReady = $.derived(() => context.fallbackPositionReady ?? (fallbackAnchorElement() ? anchoredFallback.positionReady : undefined));
+    const fallbackPortalAttachment = createPortalAttachment({
+      target: () => typeof document === "undefined" ? null : document.body,
+      source: () => context.anchorElement,
+      inheritAttributes: true,
+      disabled: () => context.supportsPopover
+    });
+    function getOwnedMenuItems() {
+      if (!menuElement)
+        return [];
+      return Array.from(menuElement.querySelectorAll([
+        '[role="menuitem"]:not([data-disabled])',
+        '[role="menuitemcheckbox"]:not([data-disabled])',
+        '[role="menuitemradio"]:not([data-disabled])'
+      ].join(", "))).filter((item) => item.closest('[role="menu"]') === menuElement);
+    }
+    function focusMenuItem(index) {
+      const items = getOwnedMenuItems();
+      if (!items.length) {
+        menuElement?.focus();
+        return;
+      }
+      const resolvedIndex = index < 0 ? items.length - 1 : index;
+      const item = items.at(resolvedIndex);
+      item?.focus();
+    }
+    function handleKeydown(event) {
+      const target = event.target instanceof HTMLElement ? event.target : null;
+      if (target?.closest('[role="menu"]') !== menuElement)
+        return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        context.focusTrigger();
+        return;
+      }
+      const itemsArray = getOwnedMenuItems();
+      if (!itemsArray.length)
+        return;
+      const currentIndex = itemsArray.findIndex((item) => item === document.activeElement);
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(currentIndex < itemsArray.length - 1 ? currentIndex + 1 : 0);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(currentIndex > 0 ? currentIndex - 1 : itemsArray.length - 1);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(0);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        event.stopPropagation();
+        focusMenuItem(itemsArray.length - 1);
+      } else if (isTypeaheadKey(event)) {
+        event.preventDefault();
+        event.stopPropagation();
+        const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+          value: index,
+          label: item.textContent?.trim() ?? "",
+          disabled: item.hasAttribute("data-disabled")
+        })), typeaheadBuffer.push(event.key), currentIndex);
+        if (match !== undefined)
+          focusMenuItem(match);
+      }
+    }
+    function handleToggle(event) {
+      const isOpenNow = event.newState === "open";
+      setOpen(isOpenNow);
+      if (isOpenNow) {
+        if (context.initialFocus === "none")
+          return;
+        tick().then(() => focusMenuItem(context.initialFocus === "last" ? -1 : 0));
+      }
+    }
+    if (context.supportsPopover || context.isOpen) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${$.attributes({
+        id: context.menuId,
+        popover: context.supportsPopover ? "auto" : undefined,
+        class: $.clsx(classNames("cinder-_floating-surface", "cinder-dropdown-menu", customClassName)),
+        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : fallbackPositionStyle(),
+        role: "menu",
+        "aria-orientation": "vertical",
+        "data-cinder-placement": context.supportsPopover ? preferredPlacement() : anchoredFallback.resolvedPlacement,
+        "data-cinder-position-ready": !context.supportsPopover && fallbackPositionReady() !== undefined ? fallbackPositionReady() : undefined,
+        tabindex: -1,
+        ...rest,
+        dir: resolvedDirection(),
+        "data-cinder-explicit-direction": resolvedDirection() ? "true" : undefined
+      })}>`);
+      if (children) {
+        $$renderer2.push("<!--[0-->");
+        children($$renderer2);
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  }, Dropdown_menu);
+}
+
+export { Dropdown_menu };
+
+//# debugId=037ED249AE2298F064756E2164756E21

package/dist/server/index.server-h2hjtvk4.js

@@ -0,0 +1,94 @@
+import {
+  formatNumber
+} from "./index.server-chh0fzxj.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/pagination/pagination.svelte
+import * as $ from "svelte/internal/server";
+function Pagination($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      currentPage = 1,
+      totalPages,
+      totalCount,
+      class: customClassName,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const mergedClassName = $.derived(() => classNames("cinder-pagination", customClassName));
+    const canGoPrevious = $.derived(() => currentPage > 1);
+    const canGoNext = $.derived(() => currentPage < totalPages);
+    const pageItems = $.derived(() => {
+      if (totalPages <= 1)
+        return [];
+      if (totalPages <= 7) {
+        const pages = [];
+        for (let index = 1;index <= totalPages; index++)
+          pages.push(index);
+        return pages;
+      }
+      const items = new Set;
+      items.add(1);
+      items.add(totalPages);
+      for (let index = Math.max(1, currentPage - 1);index <= Math.min(totalPages, currentPage + 1); index++) {
+        items.add(index);
+      }
+      const sorted = Array.from(items).sort((left, right) => left - right);
+      const result = [];
+      for (let index = 0;index < sorted.length; index++) {
+        const current = sorted[index];
+        const previous = sorted[index - 1];
+        if (index > 0 && previous !== undefined) {
+          const gap = current - previous;
+          if (gap === 2) {
+            result.push(previous + 1);
+          } else if (gap > 2) {
+            result.push(index === 1 ? "ellipsis-start" : "ellipsis-end");
+          }
+        }
+        result.push(current);
+      }
+      return result;
+    });
+    function goToPage(page) {
+      if (page < 1 || page > totalPages || page === currentPage)
+        return;
+      currentPage = page;
+    }
+    $$renderer2.push(`<nav${$.attributes({
+      class: $.clsx(mergedClassName()),
+      "aria-label": "Pagination",
+      ...rest
+    })}>`);
+    if (totalCount !== undefined) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="cinder-pagination__count" aria-live="polite">${$.escape(formatNumber(totalCount))} results</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <div class="cinder-pagination__controls"><button type="button" class="cinder-pagination__step" aria-label="Go to previous page"${$.attr("disabled", !canGoPrevious(), true)}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="15 18 9 12 15 6"></polyline></svg></button> <ul class="cinder-pagination__pages" role="list"><!--[-->`);
+    const each_array = $.ensure_array_like(pageItems());
+    for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+      let item = each_array[$$index];
+      if (typeof item === "string") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<li class="cinder-pagination__ellipsis-item" aria-hidden="true"><span class="cinder-pagination__ellipsis">…</span></li>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<li><button type="button" class="cinder-pagination__page"${$.attr("aria-label", item === currentPage ? `Page ${item}, current page` : `Go to page ${item}`)}${$.attr("aria-current", item === currentPage ? "page" : undefined)}${$.attr("data-cinder-current", item === currentPage ? "" : undefined)}>${$.escape(item)}</button></li>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></ul> <button type="button" class="cinder-pagination__step" aria-label="Go to next page"${$.attr("disabled", !canGoNext(), true)}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><polyline points="9 18 15 12 9 6"></polyline></svg></button></div></nav>`);
+    $.bind_props($$props, { currentPage });
+  }, Pagination);
+}
+
+// src/components/pagination/index.ts
+var pagination_default = Pagination;
+export { Pagination, pagination_default };
+
+//# debugId=EDFD0BCE2992362F64756E2164756E21

package/dist/server/index.server-hess6rtb.js

@@ -0,0 +1,45 @@
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/page-header/page-header.svelte
+import * as $ from "svelte/internal/server";
+function Page_header($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      title,
+      meta,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<div${$.attributes({
+      class: $.clsx(classNames("cinder-page-header", className)),
+      ...rest
+    })}><div class="cinder-page-header__heading-group"><h1 class="cinder-page-header__title">${$.escape(title)}</h1> `);
+    if (meta) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="cinder-page-header__meta">${$.escape(meta)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (children) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="cinder-page-header__actions">`);
+      children($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div>`);
+  }, Page_header);
+}
+
+// src/components/page-header/index.ts
+var page_header_default = Page_header;
+export { Page_header, page_header_default };
+
+//# debugId=558764F5F6074D0664756E2164756E21

package/dist/server/index.server-hmqm1t7m.js

@@ -0,0 +1,222 @@
+import {
+  Calendar
+} from "./index.server-nq2r5m1r.js";
+import {
+  Popover
+} from "./index.server-vdpcpdqc.js";
+import {
+  classNames
+} from "./index.server-z7nvkz8v.js";
+
+// src/components/date-picker/date-picker.svelte
+import * as $ from "svelte/internal/server";
+function Date_picker($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      value = undefined,
+      label,
+      placeholder = "YYYY-MM-DD",
+      granularity = "day",
+      min,
+      max,
+      description,
+      error,
+      disabled = false,
+      class: className,
+      "aria-describedby": ariaDescribedBy,
+      "aria-invalid": ariaInvalid,
+      onchange,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let open = false;
+    let inputElement = null;
+    let triggerElement = null;
+    function isLeapYear(year) {
+      return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+    }
+    function daysInMonth(year, month) {
+      if (month === 2)
+        return isLeapYear(year) ? 29 : 28;
+      if ([4, 6, 9, 11].includes(month))
+        return 30;
+      return 31;
+    }
+    function isValidDatePart(datePart) {
+      const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(datePart);
+      if (!match)
+        return false;
+      const [, rawYear, rawMonth, rawDay] = match;
+      const year = Number(rawYear);
+      const monthValue = Number(rawMonth);
+      const day = Number(rawDay);
+      return monthValue >= 1 && monthValue <= 12 && day >= 1 && day <= daysInMonth(year, monthValue);
+    }
+    function isValidTimePart(timePart) {
+      const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(timePart);
+      if (!match)
+        return false;
+      const [, rawHour, rawMinute, rawSecond = "00"] = match;
+      const hour = Number(rawHour);
+      const minute = Number(rawMinute);
+      const second = Number(rawSecond);
+      return hour <= 23 && minute <= 59 && second <= 59;
+    }
+    function normalizeValue(nextValue, nextGranularity) {
+      if (!nextValue)
+        return;
+      const datePart = nextValue.slice(0, 10);
+      if (!isValidDatePart(datePart))
+        return;
+      if (nextGranularity === "day")
+        return datePart;
+      const timePart = nextValue.length === 10 ? "00:00" : nextValue[10] === "T" ? nextValue.slice(11) : undefined;
+      if (!timePart || !isValidTimePart(timePart))
+        return;
+      const [rawHour = "00", rawMinute = "00", rawSecond = "00"] = timePart.split(":");
+      const hour = rawHour.padStart(2, "0").slice(0, 2);
+      const minute = rawMinute.padStart(2, "0").slice(0, 2);
+      const second = rawSecond.padStart(2, "0").slice(0, 2);
+      if (nextGranularity === "hour")
+        return `${datePart}T${hour}:00`;
+      if (nextGranularity === "minute")
+        return `${datePart}T${hour}:${minute}`;
+      return `${datePart}T${hour}:${minute}:${second}`;
+    }
+    const normalizedValue = $.derived(() => normalizeValue(value, granularity));
+    const normalizedMin = $.derived(() => normalizeValue(min, granularity));
+    const normalizedMax = $.derived(() => normalizeValue(max, granularity));
+    const selectedDate = $.derived(() => normalizedValue()?.slice(0, 10));
+    const selectedTime = $.derived(() => granularity === "day" ? undefined : normalizedValue()?.slice(11) ?? (granularity === "second" ? "00:00:00" : granularity === "minute" ? "00:00" : "00:00"));
+    const step = $.derived(() => granularity === "second" ? 1 : granularity === "minute" ? 60 : 3600);
+    const inputType = $.derived(() => granularity === "day" ? "date" : "datetime-local");
+    const invalid = $.derived(() => error ? "true" : ariaInvalid === true || ariaInvalid === "true" ? "true" : undefined);
+    const describedById = $.derived(() => [
+      ariaDescribedBy,
+      description ? `${id}-description` : undefined,
+      error ? `${id}-error` : undefined
+    ].filter(Boolean).join(" ") || undefined);
+    function emit(next) {
+      value = next;
+      onchange?.(next);
+    }
+    function clampToBounds(next) {
+      if (!next)
+        return;
+      if (normalizedMin() && next < normalizedMin())
+        return normalizedMin();
+      if (normalizedMax() && next > normalizedMax())
+        return normalizedMax();
+      return next;
+    }
+    function handleCalendarChange(nextDate) {
+      if (granularity === "day") {
+        emit(clampToBounds(nextDate));
+        open = false;
+        return;
+      }
+      const existingTime = selectedTime() ?? (granularity === "second" ? "00:00:00" : "00:00");
+      emit(clampToBounds(normalizeValue(`${nextDate}T${existingTime}`, granularity)));
+    }
+    function handleTimeChange(event) {
+      const target = event.currentTarget;
+      if (!selectedDate())
+        return;
+      emit(clampToBounds(normalizeValue(`${selectedDate()}T${target.value}`, granularity)));
+    }
+    function handleInputChange(event) {
+      const target = event.currentTarget;
+      emit(clampToBounds(normalizeValue(target.value, granularity)));
+    }
+    const timeMin = $.derived(() => {
+      if (granularity === "day" || !selectedDate() || !normalizedMin())
+        return;
+      if (!normalizedMin().startsWith(`${selectedDate()}T`))
+        return;
+      return normalizedMin().slice(11);
+    });
+    const timeMax = $.derived(() => {
+      if (granularity === "day" || !selectedDate() || !normalizedMax())
+        return;
+      if (!normalizedMax().startsWith(`${selectedDate()}T`))
+        return;
+      return normalizedMax().slice(11);
+    });
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div${$.attributes({
+        ...rest,
+        class: $.clsx(classNames("cinder-date-picker", className))
+      })}>`);
+      if (label) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<label class="cinder-date-picker__label"${$.attr("for", id)}>${$.escape(label)}</label>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> <div class="cinder-date-picker__control"${$.attr("data-invalid", invalid() ? "" : undefined)}><input class="cinder-date-picker__input"${$.attr("id", id)}${$.attr("type", inputType())}${$.attr("value", normalizedValue() ?? "")}${$.attr("min", normalizedMin())}${$.attr("max", normalizedMax())}${$.attr("step", granularity === "day" ? undefined : step())}${$.attr("placeholder", placeholder)}${$.attr("disabled", disabled, true)}${$.attr("aria-invalid", invalid())}${$.attr("aria-describedby", describedById())}/> <button type="button" class="cinder-date-picker__trigger"${$.attr("aria-label", label ? `Open ${label} calendar` : "Open date picker")}${$.attr("disabled", disabled, true)}>Open</button></div> `);
+      Popover($$renderer3, {
+        triggerRef: triggerElement ?? inputElement,
+        role: "dialog",
+        label: label ? `${label} calendar` : "Date picker calendar",
+        focusManagement: "preserve",
+        widthMode: "content",
+        class: "cinder-date-picker__panel",
+        get open() {
+          return open;
+        },
+        set open($$value) {
+          open = $$value;
+          $$settled = false;
+        },
+        children: ($$renderer4) => {
+          Calendar($$renderer4, {
+            value: selectedDate(),
+            min: normalizedMin()?.slice(0, 10),
+            max: normalizedMax()?.slice(0, 10),
+            onchange: handleCalendarChange,
+            disabled
+          });
+          $$renderer4.push(`<!----> `);
+          if (granularity !== "day") {
+            $$renderer4.push("<!--[0-->");
+            $$renderer4.push(`<div class="cinder-date-picker__time"><span class="cinder-date-picker__time-label">Time</span> <input class="cinder-date-picker__time-input" type="time"${$.attr("step", step())}${$.attr("value", selectedTime())}${$.attr("min", timeMin())}${$.attr("max", timeMax())}${$.attr("disabled", disabled || !selectedDate(), true)}/></div>`);
+          } else {
+            $$renderer4.push("<!--[-1-->");
+          }
+          $$renderer4.push(`<!--]-->`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      if (description) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<p${$.attr("id", `${id}-description`)} class="cinder-date-picker__description">${$.escape(description)}</p>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--> `);
+      if (error) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<p${$.attr("id", `${id}-error`)} class="cinder-date-picker__error" aria-live="polite">${$.escape(error)}</p>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    $.bind_props($$props, { value });
+  }, Date_picker);
+}
+
+export { Date_picker };
+
+//# debugId=B927D1364895048F64756E2164756E21