sinwan-ui-core 0.0.0 → 1.0.0

package/dist/chunks/chunk-ejwby1pn.js

@@ -0,0 +1,107 @@
+// src/core.tsx
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import { cc, onMounted, onUnmounted } from "sinwan/component";
+import { Portal as SinwanPortal2, Show as Show3 } from "sinwan/control-flow";
+import { effect, signal as signal2, untrack } from "sinwan/reactivity";
+import { jsx } from "sinwan/jsx-runtime";
+var DEFAULT_EXIT_MS = 200;
+var Presence2 = cc((props) => {
+  const mounted = signal2(untrack(() => Boolean(props.present)));
+  let exitTimer;
+  function clearExitTimer() {
+    if (exitTimer !== undefined) {
+      window.clearTimeout(exitTimer);
+      exitTimer = undefined;
+    }
+  }
+  effect(() => {
+    const next = Boolean(props.present);
+    untrack(() => {
+      if (next) {
+        clearExitTimer();
+        mounted.value = true;
+        return;
+      }
+      if (!mounted.value)
+        return;
+      clearExitTimer();
+      const delay = props.exitMs ?? DEFAULT_EXIT_MS;
+      if (delay <= 0) {
+        mounted.value = false;
+        return;
+      }
+      exitTimer = window.setTimeout(() => {
+        exitTimer = undefined;
+        mounted.value = false;
+      }, delay);
+    });
+  });
+  onUnmounted(clearExitTimer);
+  return /* @__PURE__ */ jsx(Show3, {
+    when: () => mounted.value,
+    fallback: null,
+    children: () => _$unwrap(props).children
+  });
+});
+var UiPortal2 = cc((props) => {
+  return /* @__PURE__ */ jsx(SinwanPortal2, {
+    mount: () => {
+      if (typeof props.container === "function")
+        return props.container();
+      return props.container ?? document.body;
+    },
+    children: () => _$unwrap(props).children
+  });
+});
+function readOptionValue(value) {
+  if (typeof value === "function" && value.length === 0) {
+    return value();
+  }
+  return value;
+}
+function useControllableState2(options) {
+  const isControlled = "value" in options;
+  const read = () => isControlled ? readOptionValue(options.value) : options.defaultValue;
+  const state = signal2(isControlled ? read() : options.defaultValue);
+  const setState = (value) => {
+    const current = isControlled ? read() : state.value;
+    const next = typeof value === "function" ? value(current) : value;
+    if (!isControlled)
+      state.value = next;
+    options.onChange?.(next);
+  };
+  onMounted(() => {
+    const sync = () => {
+      if (!isControlled)
+        return;
+      const v = read();
+      if (v !== undefined && v !== state.value)
+        state.value = v;
+    };
+    sync();
+    const id = window.setInterval(sync, 16);
+    onUnmounted(() => window.clearInterval(id));
+  });
+  return [state, setState];
+}
+function getFocusableElements2(root) {
+  const selector = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+  return Array.from(root.querySelectorAll(selector)).filter((el) => !el.hasAttribute("disabled") && el.tabIndex !== -1);
+}
+function trapFocus2(event, root) {
+  if (event.key !== "Tab")
+    return;
+  const focusables = getFocusableElements2(root);
+  if (focusables.length === 0)
+    return;
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first.focus();
+  }
+}
+export { SinwanPortal2, Show3, signal2, Presence2, UiPortal2, useControllableState2, getFocusableElements2, trapFocus2 };

package/dist/chunks/chunk-f6hw8ash.js

@@ -0,0 +1,29 @@
+// src/direction.tsx
+import { _$createTemplate } from "sinwan/renderer/web";
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import { cc, inject, provide } from "sinwan/component";
+import { computed, signal } from "sinwan/reactivity";
+var _$tmpl_0 = {
+  html: '<div dir="" data-slot="direction-provider"></div>',
+  slots: [
+    { path: [], type: "attr", name: "dir" },
+    { path: [], type: "child" }
+  ]
+};
+var DirectionKey2 = Symbol("sinwan-ui.direction");
+var DirectionProvider2 = cc((props) => {
+  const dirLocal = signal("ltr");
+  const dir = "dir" in props ? computed(() => props.dir ?? "ltr") : dirLocal;
+  const setDir = (next) => {
+    if (!("dir" in props))
+      dirLocal.value = next;
+  };
+  provide(DirectionKey2, { dir, setDir });
+  return _$createTemplate(_$tmpl_0, [() => dir.value, () => _$unwrap(props).children]);
+});
+function useDirection2() {
+  const api = inject(DirectionKey2);
+  return api?.dir.value ?? "ltr";
+}
+
+export { DirectionKey2, DirectionProvider2, useDirection2 };

package/dist/chunks/chunk-te52bwb8.js

@@ -0,0 +1,448 @@
+import {
+  Presence2
+} from "./chunk-ejwby1pn.js";
+
+// src/controls.tsx
+import { _$createTemplate } from "sinwan/renderer/web";
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import { cc, inject, provide } from "sinwan/component";
+import { For as For2, Show as Show2 } from "sinwan/control-flow";
+import { computed, signal } from "sinwan/reactivity";
+import { jsx } from "sinwan/jsx-runtime";
+var _$tmpl_0 = {
+  html: '<div data-slot="tabs" data-orientation="" data-horizontal="" data-vertical=""></div>',
+  slots: [
+    { path: [], type: "attr", name: "data-orientation" },
+    { path: [], type: "attr", name: "data-horizontal" },
+    { path: [], type: "attr", name: "data-vertical" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_1 = {
+  html: '<div role="tablist" data-slot="tabs-list" data-variant=""></div>',
+  slots: [
+    { path: [], type: "attr", name: "data-variant" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_2 = {
+  html: '<button type="button" role="tab" data-slot="tabs-trigger" data-state="" aria-selected="" disabled=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "aria-selected" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_3 = {
+  html: '<div data-slot="accordion"></div>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_4 = {
+  html: '<div data-slot="accordion-item" data-state=""></div>',
+  slots: [
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_5 = {
+  html: '<button type="button" data-slot="accordion-trigger" aria-expanded=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "aria-expanded" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_6 = {
+  html: '<button type="button" role="checkbox" id="" data-slot="checkbox" data-state="" aria-checked="" aria-label="" disabled="" name="" value=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "id" },
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "aria-checked" },
+    { path: [], type: "attr", name: "aria-label" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "attr", name: "name" },
+    { path: [], type: "attr", name: "value" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_7 = {
+  html: '<button type="button" role="switch" id="" data-slot="switch" data-size="" data-state="" aria-checked="" disabled=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "id" },
+    { path: [], type: "attr", name: "data-size" },
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "aria-checked" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_8 = {
+  html: '<div role="radiogroup" data-slot="radio-group"></div>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_9 = {
+  html: '<button type="button" role="radio" id="" data-slot="radio-group-item" data-state="" aria-checked="" disabled=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "id" },
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "aria-checked" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_10 = {
+  html: '<button type="button" data-slot="toggle" data-state="" aria-pressed="" disabled=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "aria-pressed" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_11 = {
+  html: '<div data-slot="toggle-group" role="group" style="" data-variant="" data-size="" data-spacing="" data-orientation=""></div>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "attr", name: "style" },
+    { path: [], type: "attr", name: "data-variant" },
+    { path: [], type: "attr", name: "data-size" },
+    { path: [], type: "attr", name: "data-spacing" },
+    { path: [], type: "attr", name: "data-orientation" },
+    { path: [], type: "child" }
+  ]
+};
+var _$tmpl_12 = {
+  html: '<button type="button" data-slot="toggle-group-item" data-variant="" data-size="" data-spacing="" data-state="" disabled=""></button>',
+  slots: [
+    { path: [], type: "attr", name: "data-variant" },
+    { path: [], type: "attr", name: "data-size" },
+    { path: [], type: "attr", name: "data-spacing" },
+    { path: [], type: "attr", name: "data-state" },
+    { path: [], type: "attr", name: "disabled" },
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+function toValueList(v) {
+  if (v == null)
+    return [];
+  return Array.isArray(v) ? v : v ? [v] : [];
+}
+var TabsKey2 = Symbol("sinwan-ui.tabs");
+var TabsRoot2 = cc((props) => {
+  const valueLocal = signal(props.defaultValue ?? "");
+  const value = "value" in props ? computed(() => props.value ?? "") : valueLocal;
+  const set = (next) => {
+    if (!("value" in props))
+      valueLocal.value = next;
+  };
+  provide(TabsKey2, {
+    value,
+    setValue: (v) => {
+      set(v);
+      props.onValueChange?.(v);
+    }
+  });
+  return _$createTemplate(_$tmpl_0, [
+    () => _$unwrap(props).orientation ?? "horizontal",
+    () => (_$unwrap(props).orientation ?? "horizontal") === "horizontal" ? "" : undefined,
+    () => _$unwrap(props).orientation === "vertical" ? "" : undefined,
+    () => _$unwrap(props).class,
+    () => _$unwrap(props).children
+  ]);
+});
+var TabsList2 = cc((props) => _$createTemplate(_$tmpl_1, [
+  () => props["data-variant"],
+  () => _$unwrap(props).class,
+  () => _$unwrap(props).children
+]));
+var TabsTrigger2 = cc((props) => {
+  const api = inject(TabsKey2);
+  return _$createTemplate(_$tmpl_2, [
+    () => api.value.value === _$unwrap(props).value ? "active" : "inactive",
+    () => api.value.value === _$unwrap(props).value,
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => {
+      if (!props.disabled)
+        api.setValue(props.value);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+var TabsContent2 = cc((props) => {
+  const api = inject(TabsKey2);
+  return /* @__PURE__ */ jsx(Show2, {
+    when: () => api.value.value === _$unwrap(props).value,
+    children: /* @__PURE__ */ jsx("div", {
+      role: "tabpanel",
+      "data-slot": "tabs-content",
+      "data-state": "active",
+      class: () => _$unwrap(props).class,
+      children: () => _$unwrap(props).children
+    })
+  });
+});
+var AccordionKey2 = Symbol("sinwan-ui.accordion");
+var AccordionItemKey2 = Symbol("sinwan-ui.accordion-item");
+var AccordionRoot2 = cc((props) => {
+  const type = () => props.type ?? "single";
+  const collapsible = () => props.collapsible ?? true;
+  const valueLocal = signal(toValueList(props.defaultValue));
+  const value = "value" in props ? computed(() => toValueList(props.value)) : valueLocal;
+  const set = (next) => {
+    if (!("value" in props))
+      valueLocal.value = next;
+  };
+  provide(AccordionKey2, {
+    type: type(),
+    value,
+    toggle: (item) => {
+      let next;
+      if (type() === "single") {
+        const open = value.value.includes(item);
+        next = open && collapsible() ? [] : [item];
+      } else {
+        next = value.value.includes(item) ? value.value.filter((v) => v !== item) : [...value.value, item];
+      }
+      set(next);
+      props.onValueChange?.(type() === "single" ? next[0] ?? "" : next);
+    }
+  });
+  return _$createTemplate(_$tmpl_3, [() => _$unwrap(props).class, () => _$unwrap(props).children]);
+});
+var AccordionItem2 = cc((props) => {
+  provide(AccordionItemKey2, { value: props.value });
+  const api = inject(AccordionKey2);
+  return _$createTemplate(_$tmpl_4, [
+    () => api.value.value.includes(_$unwrap(props).value) ? "open" : "closed",
+    () => _$unwrap(props).class,
+    () => _$unwrap(props).children
+  ]);
+});
+var AccordionTrigger2 = cc((props) => {
+  const root = inject(AccordionKey2);
+  const item = inject(AccordionItemKey2);
+  return _$createTemplate(_$tmpl_5, [
+    () => root.value.value.includes(item.value) ? "true" : "false",
+    () => _$unwrap(props).class,
+    () => root.toggle(item.value),
+    () => _$unwrap(props).children
+  ]);
+});
+var AccordionContent2 = cc((props) => {
+  const root = inject(AccordionKey2);
+  const item = inject(AccordionItemKey2);
+  function open() {
+    return root.value.value.includes(item.value);
+  }
+  function stateAttr() {
+    return open() ? "open" : "closed";
+  }
+  function bindContent(el) {
+    if (el == null)
+      return;
+    const node = el;
+    function measure() {
+      const inner = node.firstElementChild;
+      const height = inner instanceof HTMLElement ? inner.scrollHeight : node.scrollHeight;
+      node.style.setProperty("--radix-accordion-content-height", `${height}px`);
+    }
+    measure();
+    requestAnimationFrame(measure);
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => open(),
+    children: /* @__PURE__ */ jsx("div", {
+      "data-slot": "accordion-content",
+      "data-state": stateAttr,
+      class: () => _$unwrap(props).class,
+      ref: bindContent,
+      children: () => _$unwrap(props).children
+    })
+  });
+});
+var CheckboxRoot2 = cc((props) => {
+  const checkedLocal = signal(props.defaultChecked ?? false);
+  const checked = "checked" in props ? computed(() => Boolean(props.checked)) : checkedLocal;
+  const setChecked = (next) => {
+    if (!("checked" in props))
+      checkedLocal.value = next;
+  };
+  const mixedLocal = signal(false);
+  const mixed = "indeterminate" in props ? computed(() => Boolean(props.indeterminate)) : mixedLocal;
+  const setMixed = (next) => {
+    if (!("indeterminate" in props))
+      mixedLocal.value = next;
+  };
+  return _$createTemplate(_$tmpl_6, [
+    () => _$unwrap(props).id,
+    () => mixed.value ? "indeterminate" : checked.value ? "checked" : "unchecked",
+    () => mixed.value ? "mixed" : checked.value,
+    () => props["aria-label"],
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => _$unwrap(props).name,
+    () => _$unwrap(props).value,
+    () => {
+      if (props.disabled)
+        return;
+      const next = mixed.value ? true : !checked.value;
+      setChecked(next);
+      setMixed(false);
+      props.onCheckedChange?.(next);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+var SwitchRoot2 = cc((props) => {
+  const checkedLocal = signal(props.defaultChecked ?? false);
+  const checked = "checked" in props ? computed(() => Boolean(props.checked)) : checkedLocal;
+  const set = (next) => {
+    if (!("checked" in props))
+      checkedLocal.value = next;
+  };
+  return _$createTemplate(_$tmpl_7, [
+    () => _$unwrap(props).id,
+    () => props["data-size"],
+    () => checked.value ? "checked" : "unchecked",
+    () => checked.value,
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => {
+      if (props.disabled)
+        return;
+      const next = !checked.value;
+      set(next);
+      props.onCheckedChange?.(next);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+var RadioGroupKey2 = Symbol("sinwan-ui.radio-group");
+var RadioGroupRoot2 = cc((props) => {
+  const valueLocal = signal(props.defaultValue ?? "");
+  const value = "value" in props ? computed(() => props.value ?? "") : valueLocal;
+  const set = (next) => {
+    if (!("value" in props))
+      valueLocal.value = next;
+  };
+  provide(RadioGroupKey2, {
+    value,
+    name: props.name,
+    setValue: (v) => {
+      set(v);
+      props.onValueChange?.(v);
+    }
+  });
+  return _$createTemplate(_$tmpl_8, [() => _$unwrap(props).class, () => _$unwrap(props).children]);
+});
+var RadioGroupItem2 = cc((props) => {
+  const api = inject(RadioGroupKey2);
+  return _$createTemplate(_$tmpl_9, [
+    () => _$unwrap(props).id,
+    () => api.value.value === _$unwrap(props).value ? "checked" : "unchecked",
+    () => api.value.value === _$unwrap(props).value,
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => {
+      if (!props.disabled)
+        api.setValue(props.value);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+var ToggleRoot2 = cc((props) => {
+  const pressedLocal = signal(props.defaultPressed ?? false);
+  const pressed = "pressed" in props ? computed(() => Boolean(props.pressed)) : pressedLocal;
+  const set = (next) => {
+    if (!("pressed" in props))
+      pressedLocal.value = next;
+  };
+  return _$createTemplate(_$tmpl_10, [
+    () => pressed.value ? "on" : "off",
+    () => pressed.value,
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => {
+      if (props.disabled)
+        return;
+      const next = !pressed.value;
+      set(next);
+      props.onPressedChange?.(next);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+var ToggleGroupKey2 = Symbol("sinwan-ui.toggle-group");
+var ToggleGroupRoot2 = cc((props) => {
+  const type = () => props.type ?? "single";
+  const valueLocal = signal(toValueList(props.defaultValue));
+  const value = "value" in props ? computed(() => toValueList(props.value)) : valueLocal;
+  const set = (next) => {
+    if (!("value" in props))
+      valueLocal.value = next;
+  };
+  provide(ToggleGroupKey2, {
+    type: type(),
+    value,
+    toggle: (item) => {
+      let next;
+      if (type() === "single") {
+        next = value.value.includes(item) ? [] : [item];
+      } else {
+        next = value.value.includes(item) ? value.value.filter((x) => x !== item) : [...value.value, item];
+      }
+      set(next);
+      props.onValueChange?.(type() === "single" ? next[0] ?? "" : next);
+    }
+  });
+  return _$createTemplate(_$tmpl_11, [
+    () => _$unwrap(props).class,
+    () => _$unwrap(props).style,
+    () => props["data-variant"],
+    () => props["data-size"],
+    () => props["data-spacing"],
+    () => props["data-orientation"],
+    () => _$unwrap(props).children
+  ]);
+});
+var ToggleGroupItem2 = cc((props) => {
+  const api = inject(ToggleGroupKey2);
+  return _$createTemplate(_$tmpl_12, [
+    () => props["data-variant"],
+    () => props["data-size"],
+    () => props["data-spacing"],
+    () => api.value.value.includes(_$unwrap(props).value) ? "on" : "off",
+    () => _$unwrap(props).disabled,
+    () => _$unwrap(props).class,
+    () => {
+      if (!props.disabled)
+        api.toggle(props.value);
+    },
+    () => _$unwrap(props).children
+  ]);
+});
+export { For2, Show2, TabsKey2, TabsRoot2, TabsList2, TabsTrigger2, TabsContent2, AccordionKey2, AccordionItemKey2, AccordionRoot2, AccordionItem2, AccordionTrigger2, AccordionContent2, CheckboxRoot2, SwitchRoot2, RadioGroupKey2, RadioGroupRoot2, RadioGroupItem2, ToggleRoot2, ToggleGroupKey2, ToggleGroupRoot2, ToggleGroupItem2 };