@yewdiel21/motion-kit 0.15.0 → 0.17.0

package/dist/elements/index.js

@@ -17,7 +17,7 @@ import {
   createVoiceDots,
   iconSvg,
   toast
-} from "../chunk-JXRS3OEA.js";
+} from "../chunk-VJFPTLAK.js";
 import {
   createActivityFeed,
   createAddToCart,
@@ -40,6 +40,7 @@ import {
   createDateTimePicker,
   createDialog,
   createDrawer,
+  createDrilldownMenu,
   createEditableTable,
   createEmptyState,
   createFileExplorer,
@@ -68,6 +69,7 @@ import {
   createScratchCard,
   createScrollIsland,
   createSelect,
+  createSignaturePad,
   createSkeleton,
   createSlotPicker,
   createSplitView,
@@ -82,8 +84,11 @@ import {
   createTooltip,
   createTrailer,
   createTreeView,
-  createVirtualList
-} from "../chunk-A6QQCF6V.js";
+  createVirtualList,
+  createVoiceMessageBubble,
+  createWaveformPlayer,
+  createWheelPicker
+} from "../chunk-7IQTMF7Y.js";
 import "../chunk-RVSKEBIC.js";
 import "../chunk-DOOMULVV.js";
 import "../chunk-TGV27ZWM.js";
@@ -927,6 +932,11 @@ var MkChartElement = class extends MkElement {
     series: "json",
     points: "json",
     stacked: "boolean",
+    barStyle: "string",
+    barTrack: "boolean",
+    barFill: "string",
+    barWidth: "number",
+    curve: "string",
     label: "string",
     height: "number",
     emptyLabel: "string",
@@ -940,7 +950,7 @@ var MkChartElement = class extends MkElement {
   }
   attributeChangedCallback(_name, previous, next) {
     if (previous === next || !this.instance) return;
-    this.instance.update({ stacked: false, legend: void 0, ...this.options });
+    this.instance.update({ stacked: false, barTrack: false, barStyle: void 0, barFill: void 0, barWidth: void 0, curve: void 0, legend: void 0, ...this.options });
   }
   update(options) {
     this.instance?.update(options);
@@ -1881,7 +1891,7 @@ var MkAddToCartElement = class extends MkElement {
 
 // src/components/scroll-island/element.ts
 var MkScrollIslandElement = class extends MkElement {
-  static options = { sections: "string", reach: "number", idle: "number", page: "boolean" };
+  static options = { sections: "string", reach: "number", idle: "number", persistent: "boolean", page: "boolean" };
   create(options) {
     return createScrollIsland(options.page ? document.documentElement : this, options);
   }
@@ -2026,13 +2036,13 @@ var MkRadarChartElement = class extends MkElement {
 
 // src/components/radial-chart/element.ts
 var MkRadialChartElement = class extends MkElement {
-  static options = { data: "json", max: "number", sweep: "number", size: "number", thickness: "number", label: "string", totalLabel: "string", legend: "boolean", emptyLabel: "string" };
+  static options = { data: "json", max: "number", sweep: "number", size: "number", thickness: "number", segments: "number", center: "string", label: "string", totalLabel: "string", legend: "boolean", emptyLabel: "string" };
   create(options) {
     return createRadialChart(this, options);
   }
   attributeChangedCallback(_name, previous, next) {
     if (previous === next || !this.instance) return;
-    this.instance.update({ legend: void 0, max: void 0, ...this.options });
+    this.instance.update({ legend: void 0, max: void 0, segments: 0, center: void 0, ...this.options });
   }
   update(options) {
     this.instance?.update(options);
@@ -2092,6 +2102,263 @@ var MkOrbitMenuElement = class extends MkElement {
   }
 };
 
+// src/components/signature-pad/element.ts
+var MkSignaturePadElement = class extends MkElement {
+  static options = {
+    data: "json",
+    label: "string",
+    hint: "string",
+    placeholder: "string",
+    color: "string",
+    width: "number",
+    disabled: "boolean",
+    readOnly: "boolean",
+    toolbar: "boolean",
+    name: "string",
+    historyLimit: "number"
+  };
+  saved;
+  create(options) {
+    return createSignaturePad(this, { ...options, data: options.data ?? this.saved });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance || !this.isConnected) return;
+    if (name === "disabled") {
+      this.instance.setDisabled(next !== null && next !== "false");
+      return;
+    }
+    if (name === "read-only") {
+      this.instance.setReadOnly(next !== null && next !== "false");
+      return;
+    }
+    if (name === "data") {
+      try {
+        this.instance.importData(next === null ? { version: 1, strokes: [] } : JSON.parse(next), false);
+      } catch {
+      }
+      return;
+    }
+    this.saved = this.instance.exportData();
+    this.instance.destroy();
+    this.instance = createSignaturePad(this, { ...this.options, data: this.saved });
+  }
+  disconnectedCallback() {
+    this.saved = this.instance?.exportData() ?? this.saved;
+    super.disconnectedCallback();
+  }
+  connectedCallback() {
+    if (!this.instance) this.instance = createSignaturePad(this, { ...this.options, data: this.saved ?? this.options.data });
+  }
+  get data() {
+    if (this.instance) return this.instance.exportData();
+    return this.saved ? { version: 1, strokes: this.saved.strokes.map((stroke) => ({ ...stroke, points: stroke.points.map((point) => ({ ...point })) })) } : { version: 1, strokes: [] };
+  }
+  set data(value) {
+    this.importData(value);
+  }
+  get isEmpty() {
+    return this.instance?.isEmpty ?? !this.saved?.strokes.length;
+  }
+  get canUndo() {
+    return this.instance?.canUndo ?? false;
+  }
+  get canRedo() {
+    return this.instance?.canRedo ?? false;
+  }
+  undo() {
+    this.instance?.undo();
+  }
+  redo() {
+    this.instance?.redo();
+  }
+  clear() {
+    this.instance?.clear();
+  }
+  importData(value, notify = true) {
+    return this.instance?.importData(value, notify) ?? false;
+  }
+  exportData() {
+    return this.instance?.exportData() ?? this.data;
+  }
+  exportSVG(options) {
+    return this.instance?.exportSVG(options) ?? "";
+  }
+  exportPNG(options) {
+    return this.instance?.exportPNG(options) ?? Promise.resolve(null);
+  }
+};
+var defineSignaturePad = () => defineElement("mk-signature-pad", MkSignaturePadElement);
+
+// src/components/waveform-player/element.ts
+var MkWaveformPlayerElement = class _MkWaveformPlayerElement extends MkElement {
+  static options = { src: "string", peaks: "json", label: "string", disabled: "boolean", playbackRates: "json" };
+  create(options) {
+    return createWaveformPlayer(this, options);
+  }
+  play() {
+    return this.instance?.play() ?? Promise.resolve(false);
+  }
+  pause() {
+    this.instance?.pause();
+  }
+  seek(seconds) {
+    this.instance?.seek(seconds);
+  }
+  update(options) {
+    this.instance?.update(options);
+  }
+  get state() {
+    return this.instance?.state;
+  }
+  get audio() {
+    return this.instance?.audio ?? null;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    if (!Object.hasOwn(_MkWaveformPlayerElement.options, option)) return;
+    this.instance.update({ [option]: this.options[option] });
+  }
+};
+var defineWaveformPlayer = () => defineElement("mk-waveform-player", MkWaveformPlayerElement);
+
+// src/components/voice-message-bubble/element.ts
+var MkVoiceMessageBubbleElement = class _MkVoiceMessageBubbleElement extends MkElement {
+  static options = { src: "string", peaks: "json", label: "string", disabled: "boolean", playbackRates: "json", direction: "string", author: "string", timestamp: "string", dateTime: "string", status: "string" };
+  create(options) {
+    return createVoiceMessageBubble(this, options);
+  }
+  play() {
+    return this.instance?.play() ?? Promise.resolve(false);
+  }
+  pause() {
+    this.instance?.pause();
+  }
+  seek(seconds) {
+    this.instance?.seek(seconds);
+  }
+  update(options) {
+    this.instance?.update(options);
+  }
+  get state() {
+    return this.instance?.state;
+  }
+  get audio() {
+    return this.instance?.audio ?? null;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    const option = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    if (!Object.hasOwn(_MkVoiceMessageBubbleElement.options, option)) return;
+    this.instance.update({ [option]: this.options[option] });
+  }
+};
+var defineVoiceMessageBubble = () => defineElement("mk-voice-message-bubble", MkVoiceMessageBubbleElement);
+
+// src/components/drilldown-menu/element.ts
+var MkDrilldownMenuElement = class extends MkElement {
+  static options = { items: "json", path: "json", label: "string", backLabel: "string", emptyText: "string" };
+  pendingItems;
+  pendingPath;
+  create(options) {
+    return createDrilldownMenu(this, {
+      ...options,
+      ...this.pendingItems !== void 0 ? { items: this.pendingItems } : {},
+      ...this.pendingPath !== void 0 ? { path: this.pendingPath } : {}
+    });
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next) return;
+    if (name === "items" || name === "path") {
+      try {
+        const value = JSON.parse(next ?? "[]");
+        if (!Array.isArray(value)) return;
+        if (name === "items") {
+          this.pendingItems = value;
+          this.instance?.setItems(this.pendingItems);
+        } else {
+          this.pendingPath = value;
+          this.instance?.setPath(this.pendingPath);
+        }
+      } catch {
+      }
+    } else if (this.instance) {
+      const { label, backLabel, emptyText } = this.options;
+      this.instance.update({ label, backLabel, emptyText });
+    }
+  }
+  get items() {
+    return this.pendingItems ?? this.options.items ?? [];
+  }
+  set items(items) {
+    this.pendingItems = items;
+    this.instance?.setItems(items);
+  }
+  get path() {
+    return this.instance?.path ?? this.pendingPath ?? this.options.path ?? [];
+  }
+  set path(path) {
+    this.pendingPath = path;
+    this.instance?.setPath(path);
+  }
+  open(id) {
+    return this.instance?.open(id) ?? false;
+  }
+  back() {
+    return this.instance?.back() ?? false;
+  }
+  root() {
+    this.instance?.root();
+  }
+  reset() {
+    this.instance?.reset();
+  }
+  setItems(items) {
+    this.items = items;
+  }
+  setPath(path) {
+    this.path = path;
+  }
+  focusItem(id) {
+    this.instance?.focusItem(id);
+  }
+};
+var defineDrilldownMenu = () => defineElement("mk-drilldown-menu", MkDrilldownMenuElement);
+
+// src/components/wheel-picker/element.ts
+var MkWheelPickerElement = class extends MkElement {
+  static options = { items: "json", value: "string", name: "string", label: "string", disabled: "boolean", visibleItems: "number", itemHeight: "number" };
+  create(options) {
+    return createWheelPicker(this, options);
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.instance) return;
+    if (name === "value" && next !== null) {
+      this.instance.setValue(next);
+      return;
+    }
+    if (name === "items") {
+      this.instance.setItems(this.options.items ?? []);
+      if (this.options.value !== void 0) this.instance.setValue(String(this.options.value));
+      return;
+    }
+    super.attributeChangedCallback(name, previous, next);
+  }
+  get value() {
+    return this.instance?.value ?? "";
+  }
+  set value(next) {
+    this.setAttribute("value", next);
+  }
+  setValue(value, notify = false) {
+    this.instance?.setValue(value, notify);
+  }
+  setItems(items, notify = false) {
+    this.instance?.setItems(items, notify);
+  }
+};
+var defineWheelPicker = () => defineElement("mk-wheel-picker", MkWheelPickerElement);
+
 // src/elements/index.ts
 var ELEMENTS = {
   "mk-theme-picker": MkThemePickerElement,
@@ -2173,7 +2440,12 @@ var ELEMENTS = {
   "mk-radial-chart": MkRadialChartElement,
   "mk-sankey-chart": MkSankeyChartElement,
   "mk-heatmap-chart": MkHeatmapChartElement,
-  "mk-orbit-menu": MkOrbitMenuElement
+  "mk-orbit-menu": MkOrbitMenuElement,
+  "mk-signature-pad": MkSignaturePadElement,
+  "mk-waveform-player": MkWaveformPlayerElement,
+  "mk-voice-message-bubble": MkVoiceMessageBubbleElement,
+  "mk-drilldown-menu": MkDrilldownMenuElement,
+  "mk-wheel-picker": MkWheelPickerElement
   // new-component:entries
 };
 function defineElements(names = Object.keys(ELEMENTS)) {
@@ -2205,6 +2477,7 @@ export {
   MkDateTimePickerElement,
   MkDialogElement,
   MkDrawerElement,
+  MkDrilldownMenuElement,
   MkEditableTableElement,
   MkElement,
   MkEmptyStateElement,
@@ -2243,6 +2516,7 @@ export {
   MkScratchCardElement,
   MkScrollIslandElement,
   MkSelectElement,
+  MkSignaturePadElement,
   MkSkeletonElement,
   MkSlotPickerElement,
   MkSplitViewElement,
@@ -2262,11 +2536,19 @@ export {
   MkTreeViewElement,
   MkVirtualListElement,
   MkVoiceDotsElement,
+  MkVoiceMessageBubbleElement,
+  MkWaveformPlayerElement,
+  MkWheelPickerElement,
   SafeHTMLElement,
+  defineDrilldownMenu,
   defineElement,
   defineElements,
+  defineSignaturePad,
   defineStudioDock,
   defineTrailer,
+  defineVoiceMessageBubble,
+  defineWaveformPlayer,
+  defineWheelPicker,
   toast
 };
 //# sourceMappingURL=index.js.map