npm - @mlola-ui/registry - Versions diffs - 1.0.0 - Mend

@mlola-ui/registry 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (177) hide show

package/LICENSE +21 -0
package/README.md +38 -0
package/components/accordion.json +54 -0
package/components/activity-heatmap.json +54 -0
package/components/alert.json +56 -0
package/components/app-shell.json +53 -0
package/components/avatar.json +54 -0
package/components/badge.json +62 -0
package/components/breadcrumb.json +49 -0
package/components/button.json +62 -0
package/components/calendar.json +55 -0
package/components/card.json +53 -0
package/components/carousel.json +52 -0
package/components/checkbox.json +50 -0
package/components/color-picker.json +60 -0
package/components/combobox.json +64 -0
package/components/command-menu.json +64 -0
package/components/context-menu.json +61 -0
package/components/date-picker.json +59 -0
package/components/dropdown-menu.json +51 -0
package/components/dropzone.json +45 -0
package/components/empty-state.json +45 -0
package/components/hover-card.json +59 -0
package/components/input.json +56 -0
package/components/kbd.json +45 -0
package/components/modal.json +63 -0
package/components/number-input.json +58 -0
package/components/otp-input.json +49 -0
package/components/pagination.json +50 -0
package/components/popover.json +58 -0
package/components/priority-icon.json +53 -0
package/components/progress.json +57 -0
package/components/radio-group.json +48 -0
package/components/rating.json +48 -0
package/components/resizable.json +46 -0
package/components/segmented-control.json +51 -0
package/components/select.json +67 -0
package/components/sheet.json +66 -0
package/components/skeleton.json +48 -0
package/components/slider.json +53 -0
package/components/status-icon.json +53 -0
package/components/stepper.json +50 -0
package/components/table.json +53 -0
package/components/tabs.json +54 -0
package/components/tag-input.json +53 -0
package/components/textarea.json +48 -0
package/components/time-picker.json +58 -0
package/components/timeline.json +54 -0
package/components/toast.json +56 -0
package/components/toggle.json +52 -0
package/components/tooltip.json +54 -0
package/components/tour.json +62 -0
package/components/virtual-list.json +54 -0
package/generated/catalog.ts +2037 -0
package/index.json +413 -0
package/package.json +47 -0
package/schema/mlola.config.schema.json +51 -0
package/schema/registry-index.schema.json +116 -0
package/schema/registry-item.schema.json +80 -0
package/snapshot/index.json +2938 -0
package/snapshot/items/components/accordion.json +54 -0
package/snapshot/items/components/activity-heatmap.json +54 -0
package/snapshot/items/components/alert.json +56 -0
package/snapshot/items/components/app-shell.json +53 -0
package/snapshot/items/components/avatar.json +54 -0
package/snapshot/items/components/badge.json +62 -0
package/snapshot/items/components/breadcrumb.json +49 -0
package/snapshot/items/components/button.json +62 -0
package/snapshot/items/components/calendar.json +55 -0
package/snapshot/items/components/card.json +53 -0
package/snapshot/items/components/carousel.json +52 -0
package/snapshot/items/components/checkbox.json +50 -0
package/snapshot/items/components/color-picker.json +60 -0
package/snapshot/items/components/combobox.json +64 -0
package/snapshot/items/components/command-menu.json +64 -0
package/snapshot/items/components/context-menu.json +61 -0
package/snapshot/items/components/date-picker.json +59 -0
package/snapshot/items/components/dropdown-menu.json +51 -0
package/snapshot/items/components/dropzone.json +45 -0
package/snapshot/items/components/empty-state.json +45 -0
package/snapshot/items/components/hover-card.json +59 -0
package/snapshot/items/components/input.json +56 -0
package/snapshot/items/components/kbd.json +45 -0
package/snapshot/items/components/modal.json +63 -0
package/snapshot/items/components/number-input.json +58 -0
package/snapshot/items/components/otp-input.json +49 -0
package/snapshot/items/components/pagination.json +50 -0
package/snapshot/items/components/popover.json +58 -0
package/snapshot/items/components/priority-icon.json +53 -0
package/snapshot/items/components/progress.json +57 -0
package/snapshot/items/components/radio-group.json +48 -0
package/snapshot/items/components/rating.json +48 -0
package/snapshot/items/components/resizable.json +46 -0
package/snapshot/items/components/segmented-control.json +51 -0
package/snapshot/items/components/select.json +67 -0
package/snapshot/items/components/sheet.json +66 -0
package/snapshot/items/components/skeleton.json +48 -0
package/snapshot/items/components/slider.json +53 -0
package/snapshot/items/components/status-icon.json +53 -0
package/snapshot/items/components/stepper.json +50 -0
package/snapshot/items/components/table.json +53 -0
package/snapshot/items/components/tabs.json +54 -0
package/snapshot/items/components/tag-input.json +53 -0
package/snapshot/items/components/textarea.json +48 -0
package/snapshot/items/components/time-picker.json +58 -0
package/snapshot/items/components/timeline.json +54 -0
package/snapshot/items/components/toast.json +56 -0
package/snapshot/items/components/toggle.json +52 -0
package/snapshot/items/components/tooltip.json +54 -0
package/snapshot/items/components/tour.json +62 -0
package/snapshot/items/components/virtual-list.json +54 -0
package/snapshot/source/packages/components/_internal/anchor.ts +54 -0
package/snapshot/source/packages/components/_internal/dialog.ts +142 -0
package/snapshot/source/packages/components/_internal/floating.ts +73 -0
package/snapshot/source/packages/components/_internal/match.ts +39 -0
package/snapshot/source/packages/components/_internal/react.ts +40 -0
package/snapshot/source/packages/components/_internal/scroll.ts +15 -0
package/snapshot/source/packages/components/accordion/accordion.tsx +164 -0
package/snapshot/source/packages/components/activity-heatmap/activity-heatmap.tsx +204 -0
package/snapshot/source/packages/components/activity-heatmap/calendar.ts +92 -0
package/snapshot/source/packages/components/alert/alert.tsx +83 -0
package/snapshot/source/packages/components/app-shell/app-shell.tsx +186 -0
package/snapshot/source/packages/components/avatar/avatar.tsx +56 -0
package/snapshot/source/packages/components/badge/badge.tsx +39 -0
package/snapshot/source/packages/components/breadcrumb/breadcrumb.tsx +61 -0
package/snapshot/source/packages/components/button/button.tsx +42 -0
package/snapshot/source/packages/components/calendar/calendar.tsx +309 -0
package/snapshot/source/packages/components/calendar/dates.ts +163 -0
package/snapshot/source/packages/components/card/card.tsx +39 -0
package/snapshot/source/packages/components/carousel/carousel.tsx +248 -0
package/snapshot/source/packages/components/checkbox/checkbox.tsx +66 -0
package/snapshot/source/packages/components/color-picker/color-picker.tsx +261 -0
package/snapshot/source/packages/components/color-picker/color.ts +124 -0
package/snapshot/source/packages/components/combobox/combobox.tsx +320 -0
package/snapshot/source/packages/components/command-menu/command-menu.tsx +199 -0
package/snapshot/source/packages/components/context-menu/context-menu.tsx +192 -0
package/snapshot/source/packages/components/date-picker/date-picker.tsx +185 -0
package/snapshot/source/packages/components/dropdown-menu/dropdown-menu.tsx +157 -0
package/snapshot/source/packages/components/dropzone/dropzone.tsx +185 -0
package/snapshot/source/packages/components/empty-state/empty-state.tsx +32 -0
package/snapshot/source/packages/components/hover-card/hover-card.tsx +103 -0
package/snapshot/source/packages/components/input/input.tsx +101 -0
package/snapshot/source/packages/components/kbd/kbd.tsx +54 -0
package/snapshot/source/packages/components/modal/modal.tsx +100 -0
package/snapshot/source/packages/components/number-input/number-input.tsx +184 -0
package/snapshot/source/packages/components/number-input/number.ts +50 -0
package/snapshot/source/packages/components/otp-input/otp-input.tsx +116 -0
package/snapshot/source/packages/components/pagination/pagination.tsx +65 -0
package/snapshot/source/packages/components/popover/popover.tsx +107 -0
package/snapshot/source/packages/components/priority-icon/labels.ts +13 -0
package/snapshot/source/packages/components/priority-icon/priority-icon.tsx +60 -0
package/snapshot/source/packages/components/progress/progress.tsx +110 -0
package/snapshot/source/packages/components/radio-group/radio-group.tsx +106 -0
package/snapshot/source/packages/components/rating/rating.tsx +94 -0
package/snapshot/source/packages/components/resizable/resizable.tsx +171 -0
package/snapshot/source/packages/components/segmented-control/segmented-control.tsx +78 -0
package/snapshot/source/packages/components/select/select.tsx +332 -0
package/snapshot/source/packages/components/sheet/sheet.tsx +109 -0
package/snapshot/source/packages/components/skeleton/skeleton.tsx +84 -0
package/snapshot/source/packages/components/slider/slider.tsx +99 -0
package/snapshot/source/packages/components/status-icon/labels.ts +14 -0
package/snapshot/source/packages/components/status-icon/status-icon.tsx +76 -0
package/snapshot/source/packages/components/stepper/stepper.tsx +87 -0
package/snapshot/source/packages/components/table/table.tsx +66 -0
package/snapshot/source/packages/components/tabs/tabs.tsx +163 -0
package/snapshot/source/packages/components/tag-input/tag-input.tsx +273 -0
package/snapshot/source/packages/components/textarea/textarea.tsx +70 -0
package/snapshot/source/packages/components/time-picker/time-picker.tsx +286 -0
package/snapshot/source/packages/components/time-picker/times.ts +76 -0
package/snapshot/source/packages/components/timeline/timeline.tsx +115 -0
package/snapshot/source/packages/components/toast/toast.tsx +317 -0
package/snapshot/source/packages/components/toggle/toggle.tsx +80 -0
package/snapshot/source/packages/components/tooltip/tooltip.tsx +70 -0
package/snapshot/source/packages/components/tour/tour.tsx +193 -0
package/snapshot/source/packages/components/virtual-list/virtual-list.tsx +121 -0
package/snapshot/source/packages/components/virtual-list/virtual.ts +33 -0
package/snapshot/source-manifest.json +67 -0

package/snapshot/source/packages/components/select/select.tsx ADDED Viewed

@@ -0,0 +1,332 @@
+"use client";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { useFloating, usePortalNode } from "../_internal/floating";
+import { cx, useControllableState } from "../_internal/react";
+import { IconCheck, IconChevronDown, IconX } from "@mlola-ui/icons";
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  group?: string;
+  /** A second line under the label, announced as the option's description. */
+  description?: React.ReactNode;
+  /** Decoration before the label (a mark or icon). Shown on the trigger too. */
+  leading?: React.ReactNode;
+  /** Decoration after the label, such as badges. Decorative: put anything a
+      screen reader needs into `description`. */
+  trailing?: React.ReactNode;
+}
+export type SelectSize = "sm" | "md" | "lg";
+interface SelectBaseProps {
+  options: SelectOption[];
+  /** Cap the chips rendered before collapsing into a counter. */
+  maxVisibleChips?: number;
+  placeholder?: string;
+  searchable?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  size?: SelectSize;
+  error?: string;
+  label?: string;
+  /** Keep the label for assistive technology but do not show it (toolbars). */
+  hideLabel?: boolean;
+  className?: string;
+}
+interface SelectSingleProps {
+  multiple?: false;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+/** Select more than one option. Chips replace the single-value label. */
+interface SelectMultipleProps {
+  multiple: true;
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+export type SelectProps = SelectBaseProps & (SelectSingleProps | SelectMultipleProps);
+export function Select(props: SelectProps) {
+  const {
+    options,
+    maxVisibleChips = 3,
+    placeholder = "Select…",
+    searchable = false,
+    clearable = false,
+    disabled = false,
+    size = "md",
+    error,
+    label,
+    hideLabel = false,
+    className,
+  } = props;
+  const multiple = props.multiple === true;
+  const [selectedValue, setSelectedValue] = useControllableState<string>({
+    value: props.multiple ? undefined : props.value,
+    defaultValue: props.multiple ? "" : (props.defaultValue ?? ""),
+    onChange: props.multiple ? undefined : props.onValueChange,
+  });
+  const [selectedValues, setSelectedValues] = useControllableState<string[]>({
+    value: props.multiple ? props.value : undefined,
+    defaultValue: props.multiple ? (props.defaultValue ?? []) : [],
+    onChange: props.multiple ? props.onValueChange : undefined,
+  });
+  const [open, setOpenState] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+  const searchRef = React.useRef<HTMLInputElement>(null);
+  const controlRef = React.useRef<HTMLDivElement>(null);
+  const popoverRef = React.useRef<HTMLDivElement>(null);
+  const portal = usePortalNode();
+  // The list lives on <body>, fixed beside the control: no scrolling panel or
+  // clipped card can cut it off, and it opens upward when there is no room below.
+  useFloating(controlRef, popoverRef, open && Boolean(portal), { side: "bottom", align: "start", offset: 6 });
+  React.useLayoutEffect(() => {
+    if (open && popoverRef.current && controlRef.current) popoverRef.current.style.minWidth = `${controlRef.current.offsetWidth}px`;
+  }, [open, portal]);
+  const setOpen = (next: boolean | ((current: boolean) => boolean)) => setOpenState((current) => (typeof next === "function" ? next(current) : next));
+  const id = React.useId();
+  const labelId = `${id}-label`;
+  const listId = `${id}-listbox`;
+  const errorId = `${id}-error`;
+  const selected = options.find((option) => option.value === selectedValue);
+  const chosen = React.useMemo(
+    () => (multiple ? options.filter((option) => selectedValues.includes(option.value)) : []),
+    [multiple, options, selectedValues],
+  );
+  const isChosen = (option: SelectOption) =>
+    multiple ? selectedValues.includes(option.value) : option.value === selectedValue;
+  const filtered = React.useMemo(() => {
+    const normalized = query.trim().toLocaleLowerCase();
+    return normalized
+      ? options.filter((option) => option.label.toLocaleLowerCase().includes(normalized))
+      : options;
+  }, [options, query]);
+  const active = filtered[activeIndex];
+  const close = React.useCallback((restoreFocus = false) => {
+    setOpenState(false);
+    setQuery("");
+    setActiveIndex(-1);
+    if (restoreFocus) requestAnimationFrame(() => triggerRef.current?.focus());
+  }, []);
+  React.useEffect(() => {
+    if (disabled) close();
+  }, [disabled, close]);
+  React.useEffect(() => {
+    if (!open) return;
+    const selectedIndex = filtered.findIndex(
+      (option) => option.value === selectedValue && !option.disabled
+    );
+    setActiveIndex(
+      selectedIndex >= 0 ? selectedIndex : filtered.findIndex((option) => !option.disabled)
+    );
+    if (searchable) requestAnimationFrame(() => searchRef.current?.focus());
+    const onPointerDown = (event: MouseEvent) => {
+      if (event.target instanceof Node && !rootRef.current?.contains(event.target) && !popoverRef.current?.contains(event.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open, searchable, selectedValue, filtered, close]);
+  // Shared with the framework-free runtime: one definition of how the
+  // highlight moves and which options it steps over.
+  const move = (key: string) => {
+    const target = rovingIndex(filtered.length, activeIndex, key, {
+      horizontal: false,
+      enabled: (at) => !filtered[at].disabled,
+    });
+    if (target >= 0) setActiveIndex(target);
+  };
+  const choose = (option: SelectOption | undefined) => {
+    if (!option || option.disabled || disabled) return;
+    if (multiple) {
+      setSelectedValues(
+        selectedValues.includes(option.value)
+          ? selectedValues.filter((entry) => entry !== option.value)
+          : [...selectedValues, option.value],
+      );
+      return;
+    }
+    setSelectedValue(option.value);
+    close(true);
+  };
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close(true);
+    } else if (event.key === "Tab") {
+      close();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else move(event.key);
+    } else if (event.key === "Enter" || event.key === " ") {
+      if (event.currentTarget === searchRef.current && event.key === " ") return;
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else choose(active);
+    } else if (event.key === "Home" && open) {
+      event.preventDefault();
+      setActiveIndex(filtered.findIndex((option) => !option.disabled));
+    } else if (event.key === "End" && open) {
+      event.preventDefault();
+      for (let index = filtered.length - 1; index >= 0; index -= 1) {
+        if (!filtered[index].disabled) {
+          setActiveIndex(index);
+          break;
+        }
+      }
+    }
+  };
+  return (
+    <div
+      ref={rootRef}
+      className={cx("ml-select-root", className)}
+      data-disabled={disabled ? "" : undefined}
+      data-invalid={error ? "" : undefined}
+    >
+      {label ? <span id={labelId} className={hideLabel ? "ml-visually-hidden" : "ml-select-label"}>{label}</span> : null}
+      <div ref={controlRef} className="ml-select-control">
+        <button
+          ref={triggerRef}
+          type="button"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          aria-controls={open ? listId : undefined}
+          aria-labelledby={label ? labelId : undefined}
+          aria-label={label ? undefined : placeholder}
+          aria-activedescendant={open && active ? `${id}-option-${activeIndex}` : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={error ? errorId : undefined}
+          disabled={disabled}
+          data-size={size}
+          data-state={open ? "open" : "closed"}
+          className="ml-select"
+          onClick={() => setOpen((current) => !current)}
+          onKeyDown={onKeyDown}
+        >
+          {multiple ? (
+            <span className="ml-select-value" data-placeholder={chosen.length ? undefined : ""}>
+              {chosen.length ? (
+                <span className="ml-select-chips">
+                  {chosen.slice(0, maxVisibleChips).map((option) => (
+                    <span key={option.value} className="ml-badge" data-size="sm">
+                      {option.label}
+                    </span>
+                  ))}
+                  {chosen.length > maxVisibleChips ? (
+                    <span className="ml-select-chip-overflow">+{chosen.length - maxVisibleChips}</span>
+                  ) : null}
+                </span>
+              ) : (
+                placeholder
+              )}
+            </span>
+          ) : (
+            <span className="ml-select-value" data-placeholder={selected ? undefined : ""}>
+              {selected?.leading ? <span aria-hidden="true" className="ml-select-option-leading">{selected.leading}</span> : null}
+              {selected?.label ?? placeholder}
+            </span>
+          )}
+          <IconChevronDown aria-hidden="true" className="ml-select-chevron" size="1.125em" />
+        </button>
+        {clearable && (multiple ? chosen.length > 0 : Boolean(selected)) && !disabled ? (
+          <button
+            type="button"
+            aria-label={`Clear ${label ?? "selection"}`}
+            className="ml-select-clear"
+            onClick={() => {
+              if (multiple) setSelectedValues([]);
+              else setSelectedValue("");
+              close(true);
+            }}
+          >
+            <IconX aria-hidden="true" size="0.875em" />
+          </button>
+        ) : null}
+      </div>
+      {open && !disabled && portal ? createPortal(
+        <div ref={popoverRef} className="ml-select-popover" data-state="open" data-side="bottom">
+          {searchable ? (
+            <div className="ml-select-search-wrap">
+              <input
+                ref={searchRef}
+                className="ml-select-search"
+                value={query}
+                onChange={(event) => {
+                  setQuery(event.target.value);
+                  setActiveIndex(-1);
+                }}
+                onKeyDown={onKeyDown}
+                aria-label="Search options"
+                placeholder="Search options…"
+                aria-controls={listId}
+                aria-activedescendant={active ? `${id}-option-${activeIndex}` : undefined}
+              />
+            </div>
+          ) : null}
+          <ul id={listId} role="listbox" aria-multiselectable={multiple || undefined} aria-labelledby={label ? labelId : undefined} className="ml-select-list">
+            {filtered.length ? filtered.map((option, index) => (
+              <React.Fragment key={option.value}>
+                {(index === 0 || filtered[index - 1]?.group !== option.group) && option.group ? (
+                  <li role="presentation" className="ml-select-group">{option.group}</li>
+                ) : null}
+                <li
+                  id={`${id}-option-${index}`}
+                  role="option"
+                  aria-selected={isChosen(option)}
+                  aria-disabled={option.disabled || undefined}
+                  data-state={isChosen(option) ? "checked" : "unchecked"}
+                  data-highlighted={index === activeIndex ? "" : undefined}
+                  data-disabled={option.disabled ? "" : undefined}
+                  aria-label={option.description ? option.label : undefined}
+                  aria-describedby={option.description ? `${id}-option-${index}-description` : undefined}
+                  className="ml-select-option"
+                  onPointerMove={() => !option.disabled && setActiveIndex(index)}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => choose(option)}
+                >
+                  {option.leading ? <span aria-hidden="true" className="ml-select-option-leading">{option.leading}</span> : null}
+                  {option.description ? (
+                    <span className="ml-select-option-text">
+                      <span className="ml-select-option-label">{option.label}</span>
+                      <span id={`${id}-option-${index}-description`} className="ml-select-option-description">{option.description}</span>
+                    </span>
+                  ) : (
+                    <span className="ml-select-option-label">{option.label}</span>
+                  )}
+                  {option.trailing ? <span aria-hidden="true" className="ml-select-option-trailing">{option.trailing}</span> : null}
+                  {isChosen(option) ? <IconCheck aria-hidden="true" className="ml-select-check" size="1em" /> : null}
+                </li>
+              </React.Fragment>
+            )) : <li role="presentation" className="ml-select-empty">No results found</li>}
+          </ul>
+        </div>,
+        portal,
+      ) : null}
+      {error ? <p id={errorId} role="alert" className="ml-select-error">{error}</p> : null}
+    </div>
+  );
+}

package/snapshot/source/packages/components/sheet/sheet.tsx ADDED Viewed

@@ -0,0 +1,109 @@
+"use client";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useDialogLayer } from "../_internal/dialog";
+import { cx } from "../_internal/react";
+import { IconX } from "@mlola-ui/icons";
+export type SheetSide = "left" | "right" | "top" | "bottom";
+export type SheetSize = "sm" | "md" | "lg";
+interface SheetProps {
+  open: boolean;
+  onClose: () => void;
+  side?: SheetSide;
+  size?: SheetSize;
+  title: string;
+  description?: string;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+function Sheet({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  title,
+  description,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  children,
+  className,
+}: SheetProps) {
+  const panelRef = React.useRef<HTMLDivElement>(null);
+  const portal = useDialogLayer({ open, onClose, closeOnEscape, panelRef });
+  const descriptionId = React.useId();
+  if (!portal || !open) return null;
+  return createPortal(
+    <div className="ml-sheet-layer" data-state="open">
+      <div
+        aria-hidden="true"
+        className="ml-sheet-overlay"
+        onMouseDown={() => closeOnBackdrop && onClose()}
+      />
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        aria-describedby={description ? descriptionId : undefined}
+        tabIndex={-1}
+        data-side={side}
+        data-size={size}
+        data-state="open"
+        className={cx("ml-sheet-panel", className)}
+      >
+        {description ? <p id={descriptionId} className="ml-visually-hidden">{description}</p> : null}
+        {children}
+      </div>
+    </div>,
+    portal
+  );
+}
+interface SheetHeaderProps {
+  title: string;
+  description?: string;
+  onClose?: () => void;
+  className?: string;
+}
+function SheetHeader({ title, description, onClose, className }: SheetHeaderProps) {
+  return (
+    <div className={cx("ml-sheet-header", className)}>
+      <div className="ml-sheet-heading">
+        <h2 className="ml-sheet-title">{title}</h2>
+        {description ? <p className="ml-sheet-description">{description}</p> : null}
+      </div>
+      {onClose ? (
+        <button type="button" onClick={onClose} aria-label="Close panel" className="ml-sheet-close">
+          <IconX aria-hidden="true" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+interface SheetBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+function SheetBody({ children, className }: SheetBodyProps) {
+  return <div className={cx("ml-sheet-body", className)}>{children}</div>;
+}
+interface SheetFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+function SheetFooter({ children, className }: SheetFooterProps) {
+  return <div className={cx("ml-sheet-footer", className)}>{children}</div>;
+}
+export { Sheet, SheetHeader, SheetBody, SheetFooter };
+export type { SheetProps, SheetHeaderProps, SheetBodyProps, SheetFooterProps };

package/snapshot/source/packages/components/skeleton/skeleton.tsx ADDED Viewed

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { cx } from "../_internal/react";
+export interface SkeletonProps {
+  width?: string | number;
+  height?: string | number;
+  /** Rounded corners (the default), square with `false`, or any radius. */
+  rounded?: boolean | string;
+  className?: string;
+}
+/** A placeholder shape. Decorative: wrap a loading area in SkeletonRegion to announce it. */
+export function Skeleton({ width, height, rounded = true, className }: SkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      data-rounded={rounded === false ? "none" : typeof rounded === "string" ? undefined : ""}
+      className={cx("ml-skeleton", className)}
+      style={{ width, height, borderRadius: typeof rounded === "string" ? rounded : undefined }}
+    />
+  );
+}
+export interface SkeletonTextProps {
+  lines?: number;
+  className?: string;
+}
+/**
+ * Lines that occupy exactly the space of the text they stand in for: one
+ * line-height each, inheriting the surrounding font size, so the layout does
+ * not move when the real text arrives.
+ */
+export function SkeletonText({ lines = 3, className }: SkeletonTextProps) {
+  const count = Number.isFinite(lines) ? Math.max(1, Math.floor(lines)) : 3;
+  return (
+    <div aria-hidden="true" className={cx("ml-skeleton-text", className)}>
+      {Array.from({ length: count }, (_, index) => (
+        <div key={index} className="ml-skeleton ml-skeleton-line" data-rounded="" />
+      ))}
+    </div>
+  );
+}
+export interface SkeletonAvatarProps {
+  size?: number | string;
+  className?: string;
+}
+export function SkeletonAvatar({ size = 40, className }: SkeletonAvatarProps) {
+  return <Skeleton width={size} height={size} rounded="50%" className={cx("ml-skeleton-avatar", className)} />;
+}
+export interface SkeletonCardProps {
+  className?: string;
+}
+export function SkeletonCard({ className }: SkeletonCardProps) {
+  return (
+    <div aria-hidden="true" className={cx("ml-skeleton-card", className)}>
+      <Skeleton className="ml-skeleton-card-media" />
+      <Skeleton className="ml-skeleton-card-title" />
+      <SkeletonText lines={2} />
+    </div>
+  );
+}
+export interface SkeletonRegionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** What is loading, announced once to assistive technology. */
+  label?: string;
+}
+/**
+ * The accessible wrapper for placeholders: announces that something is
+ * loading while the shapes themselves stay silent.
+ */
+export function SkeletonRegion({ label = "Loading", className, children, ...props }: SkeletonRegionProps) {
+  return (
+    <div role="status" aria-busy="true" className={cx("ml-skeleton-region", className)} {...props}>
+      <span className="ml-visually-hidden">{label}</span>
+      {children}
+    </div>
+  );
+}

package/snapshot/source/packages/components/slider/slider.tsx ADDED Viewed

@@ -0,0 +1,99 @@
+"use client";
+import * as React from "react";
+import { clampToStep, percentOf, sliderValueForKey, valueFromRatio } from "@mlola-ui/behavior/logic";
+import { cx, useControllableState } from "../_internal/react";
+type SliderSize = "sm" | "md";
+interface SliderProps {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  label?: string;
+  showValue?: boolean;
+  size?: SliderSize;
+  className?: string;
+  id?: string;
+}
+const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  ({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, showValue = false, size = "md", className, id }, ref) => {
+    const low = Number.isFinite(min) ? min : 0;
+    const high = Number.isFinite(max) && max > low ? max : low + 100;
+    const increment = Number.isFinite(step) && step > 0 ? step : 1;
+    // Shared with the framework-free runtime, so both round identically.
+    const bounds = React.useMemo(() => ({ min: low, max: high, step: increment }), [low, high, increment]);
+    const normalize = React.useCallback((raw: number) => clampToStep(raw, bounds), [bounds]);
+    const [currentRaw, setCurrent] = useControllableState({ value, defaultValue: normalize(defaultValue), onChange: onValueChange });
+    const current = normalize(currentRaw);
+    const trackRef = React.useRef<HTMLDivElement>(null);
+    const dragging = React.useRef(false);
+    const generated = React.useId();
+    const sliderId = id ?? generated;
+    const labelId = label ? `${sliderId}-label` : undefined;
+    const valueId = showValue ? `${sliderId}-value` : undefined;
+    const percent = percentOf(current, bounds);
+    const fromPointer = (clientX: number) => {
+      const rect = trackRef.current?.getBoundingClientRect();
+      if (!rect?.width) return current;
+      return valueFromRatio((clientX - rect.left) / rect.width, bounds);
+    };
+    return (
+      <div className={cx("ml-slider-field", className)} data-disabled={disabled ? "" : undefined} data-size={size}>
+        {label || showValue ? (
+          <div className="ml-slider-header">
+            {label ? <span id={labelId} className="ml-slider-label">{label}</span> : <span />}
+            {showValue ? <output id={valueId} htmlFor={sliderId} className="ml-slider-output">{current}</output> : null}
+          </div>
+        ) : null}
+        <div
+          ref={ref}
+          id={sliderId}
+          role="slider"
+          tabIndex={disabled ? -1 : 0}
+          aria-valuemin={low}
+          aria-valuemax={high}
+          aria-valuenow={current}
+          aria-valuetext={`${current} of ${high}`}
+          aria-labelledby={labelId}
+          aria-label={label ? undefined : "Value"}
+          aria-describedby={valueId}
+          aria-disabled={disabled || undefined}
+          className="ml-slider"
+          onKeyDown={(event) => {
+            if (disabled) return;
+            const next = sliderValueForKey(event.key, current, bounds);
+            if (next === undefined) return;
+            event.preventDefault();
+            setCurrent(next);
+          }}
+        >
+          <div
+            ref={trackRef}
+            className="ml-slider-track"
+            onPointerDown={(event) => {
+              if (disabled) return;
+              dragging.current = true;
+              event.currentTarget.setPointerCapture(event.pointerId);
+              setCurrent(normalize(fromPointer(event.clientX)));
+            }}
+            onPointerMove={(event) => {
+              if (!disabled && dragging.current) setCurrent(normalize(fromPointer(event.clientX)));
+            }}
+            onPointerUp={() => { dragging.current = false; }}
+            onPointerCancel={() => { dragging.current = false; }}
+          >
+            <span aria-hidden="true" className="ml-slider-range" style={{ width: `${percent}%` }} />
+            <span aria-hidden="true" className="ml-slider-thumb" style={{ left: `${percent}%` }} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+Slider.displayName = "Slider";
+export { Slider };
+export type { SliderProps, SliderSize };

package/snapshot/source/packages/components/status-icon/labels.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/** Work statuses and their names, kept apart from the icon so plain logic can use them. */
+export type WorkStatus = "backlog" | "todo" | "in-progress" | "in-review" | "done" | "canceled";
+/** Every status in workflow order, for menus and grouping. */
+export const WORK_STATUSES: WorkStatus[] = ["backlog", "todo", "in-progress", "in-review", "done", "canceled"];
+export const STATUS_LABELS: Record<WorkStatus, string> = {
+  backlog: "Backlog",
+  todo: "Todo",
+  "in-progress": "In progress",
+  "in-review": "In review",
+  done: "Done",
+  canceled: "Canceled",
+};