@selvajs/selva 3.0.0 → 4.0.0

package/build/server/chunks/textarea-A5IYPwqe.js

@@ -0,0 +1,685 @@
+import { q as bind_props, aA as spread_props, an as props_id, p as attributes, I as derived, v as clsx, T as escape_html } from './renderer-x4cX3Aau.js';
+import { c as cn } from './utils3-B05Dmz_H.js';
+import { l as createId, h as boxWith, a as attachRef, v as mergeProps, k as createBitsAttrs, u as isWritableSymbol, B as BoxSymbol, g as boxFrom, f as boxFlatten, y as toReadonlyBox, r as isBox, t as isWritableBox, b as boolToEmptyStrOrUndef, e as boolToTrueOrUndef, c as boolToStr } from './create-id-B-AKukLt.js';
+import { n as noop, C as Context, E as END, j as isHTMLElement, H as HOME, A as ARROW_DOWN, b as ARROW_RIGHT, c as ARROW_UP, a as ARROW_LEFT, w as watch, S as SPACE, d as ENTER } from './noop-iPXixleG.js';
+import { S as SvelteMap } from './index-server-DMc-UvjC.js';
+import 'clsx';
+
+function box(initialValue) {
+  let current = initialValue;
+  return {
+    [BoxSymbol]: true,
+    [isWritableSymbol]: true,
+    get current() {
+      return current;
+    },
+    set current(v) {
+      current = v;
+    }
+  };
+}
+box.from = boxFrom;
+box.with = boxWith;
+box.flatten = boxFlatten;
+box.readonly = toReadonlyBox;
+box.isBox = isBox;
+box.isWritableBox = isWritableBox;
+function getElemDirection(elem) {
+  const style = window.getComputedStyle(elem);
+  const direction = style.getPropertyValue("direction");
+  return direction;
+}
+function getNextKey(dir = "ltr", orientation = "horizontal") {
+  return {
+    horizontal: dir === "rtl" ? ARROW_LEFT : ARROW_RIGHT,
+    vertical: ARROW_DOWN
+  }[orientation];
+}
+function getPrevKey(dir = "ltr", orientation = "horizontal") {
+  return {
+    horizontal: dir === "rtl" ? ARROW_RIGHT : ARROW_LEFT,
+    vertical: ARROW_UP
+  }[orientation];
+}
+function getDirectionalKeys(dir = "ltr", orientation = "horizontal") {
+  if (!["ltr", "rtl"].includes(dir))
+    dir = "ltr";
+  if (!["horizontal", "vertical"].includes(orientation))
+    orientation = "horizontal";
+  return {
+    nextKey: getNextKey(dir, orientation),
+    prevKey: getPrevKey(dir, orientation)
+  };
+}
+class RovingFocusGroup {
+  #opts;
+  #currentTabStopId = box(null);
+  constructor(opts) {
+    this.#opts = opts;
+  }
+  getCandidateNodes() {
+    return [];
+  }
+  focusFirstCandidate() {
+    const items = this.getCandidateNodes();
+    if (!items.length)
+      return;
+    items[0]?.focus();
+  }
+  handleKeydown(node, e, both = false) {
+    const rootNode = this.#opts.rootNode.current;
+    if (!rootNode || !node)
+      return;
+    const items = this.getCandidateNodes();
+    if (!items.length)
+      return;
+    const currentIndex = items.indexOf(node);
+    const dir = getElemDirection(rootNode);
+    const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation.current);
+    const loop = this.#opts.loop.current;
+    const keyToIndex = {
+      [nextKey]: currentIndex + 1,
+      [prevKey]: currentIndex - 1,
+      [HOME]: 0,
+      [END]: items.length - 1
+    };
+    if (both) {
+      const altNextKey = nextKey === ARROW_DOWN ? ARROW_RIGHT : ARROW_DOWN;
+      const altPrevKey = prevKey === ARROW_UP ? ARROW_LEFT : ARROW_UP;
+      keyToIndex[altNextKey] = currentIndex + 1;
+      keyToIndex[altPrevKey] = currentIndex - 1;
+    }
+    let itemIndex = keyToIndex[e.key];
+    if (itemIndex === void 0)
+      return;
+    e.preventDefault();
+    if (itemIndex < 0 && loop) {
+      itemIndex = items.length - 1;
+    } else if (itemIndex === items.length && loop) {
+      itemIndex = 0;
+    }
+    const itemToFocus = items[itemIndex];
+    if (!itemToFocus)
+      return;
+    itemToFocus.focus();
+    this.#currentTabStopId.current = itemToFocus.id;
+    this.#opts.onCandidateFocus?.(itemToFocus);
+    return itemToFocus;
+  }
+  getTabIndex(node) {
+    const items = this.getCandidateNodes();
+    const anyActive = this.#currentTabStopId.current !== null;
+    if (node && !anyActive && items[0] === node) {
+      this.#currentTabStopId.current = node.id;
+      return 0;
+    } else if (node?.id === this.#currentTabStopId.current) {
+      return 0;
+    }
+    return -1;
+  }
+  setCurrentTabStopId(id) {
+    this.#currentTabStopId.current = id;
+  }
+  focusCurrentTabStop() {
+    const currentTabStopId = this.#currentTabStopId.current;
+    if (!currentTabStopId)
+      return;
+    const currentTabStop = this.#opts.rootNode.current?.querySelector(`#${currentTabStopId}`);
+    if (!currentTabStop || !isHTMLElement(currentTabStop))
+      return;
+    currentTabStop.focus();
+  }
+}
+const tabsAttrs = createBitsAttrs({
+  component: "tabs",
+  parts: ["root", "list", "trigger", "content"]
+});
+const TabsRootContext = new Context("Tabs.Root");
+class TabsRootState {
+  static create(opts) {
+    return TabsRootContext.set(new TabsRootState(opts));
+  }
+  opts;
+  attachment;
+  rovingFocusGroup;
+  triggerIds = [];
+  // holds the trigger ID for each value to associate it with the content
+  valueToTriggerId = new SvelteMap();
+  // holds the content ID for each value to associate it with the trigger
+  valueToContentId = new SvelteMap();
+  constructor(opts) {
+    this.opts = opts;
+    this.attachment = attachRef(opts.ref);
+    this.rovingFocusGroup = new RovingFocusGroup({
+      candidateAttr: tabsAttrs.trigger,
+      rootNode: this.opts.ref,
+      loop: this.opts.loop,
+      orientation: this.opts.orientation
+    });
+  }
+  registerTrigger(id, value) {
+    this.triggerIds.push(id);
+    this.valueToTriggerId.set(value, id);
+    return () => {
+      this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+      this.valueToTriggerId.delete(value);
+    };
+  }
+  registerContent(id, value) {
+    this.valueToContentId.set(value, id);
+    return () => {
+      this.valueToContentId.delete(value);
+    };
+  }
+  setValue(v) {
+    this.opts.value.current = v;
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    "data-orientation": this.opts.orientation.current,
+    [tabsAttrs.root]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class TabsListState {
+  static create(opts) {
+    return new TabsListState(opts, TabsRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #isDisabled = derived(() => this.root.opts.disabled.current);
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(opts.ref);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    role: "tablist",
+    "aria-orientation": this.root.opts.orientation.current,
+    "data-orientation": this.root.opts.orientation.current,
+    [tabsAttrs.list]: "",
+    "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled()),
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class TabsTriggerState {
+  static create(opts) {
+    return new TabsTriggerState(opts, TabsRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #tabIndex = 0;
+  #isActive = derived(() => this.root.opts.value.current === this.opts.value.current);
+  #isDisabled = derived(() => this.opts.disabled.current || this.root.opts.disabled.current);
+  #ariaControls = derived(() => this.root.valueToContentId.get(this.opts.value.current));
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(opts.ref);
+    watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
+      return this.root.registerTrigger(id, value);
+    });
+    this.onfocus = this.onfocus.bind(this);
+    this.onclick = this.onclick.bind(this);
+    this.onkeydown = this.onkeydown.bind(this);
+  }
+  #activate() {
+    if (this.root.opts.value.current === this.opts.value.current) return;
+    this.root.setValue(this.opts.value.current);
+  }
+  onfocus(_) {
+    if (this.root.opts.activationMode.current !== "automatic" || this.#isDisabled()) return;
+    this.#activate();
+  }
+  onclick(_) {
+    if (this.#isDisabled()) return;
+    this.#activate();
+  }
+  onkeydown(e) {
+    if (this.#isDisabled()) return;
+    if (e.key === SPACE || e.key === ENTER) {
+      e.preventDefault();
+      this.#activate();
+      return;
+    }
+    this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    role: "tab",
+    "data-state": getTabDataState(this.#isActive()),
+    "data-value": this.opts.value.current,
+    "data-orientation": this.root.opts.orientation.current,
+    "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled()),
+    "aria-selected": boolToStr(this.#isActive()),
+    "aria-controls": this.#ariaControls(),
+    [tabsAttrs.trigger]: "",
+    disabled: boolToTrueOrUndef(this.#isDisabled()),
+    tabindex: this.#tabIndex,
+    //
+    onclick: this.onclick,
+    onfocus: this.onfocus,
+    onkeydown: this.onkeydown,
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+class TabsContentState {
+  static create(opts) {
+    return new TabsContentState(opts, TabsRootContext.get());
+  }
+  opts;
+  root;
+  attachment;
+  #isActive = derived(() => this.root.opts.value.current === this.opts.value.current);
+  #ariaLabelledBy = derived(() => this.root.valueToTriggerId.get(this.opts.value.current));
+  constructor(opts, root) {
+    this.opts = opts;
+    this.root = root;
+    this.attachment = attachRef(opts.ref);
+    watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
+      return this.root.registerContent(id, value);
+    });
+  }
+  #props = derived(() => ({
+    id: this.opts.id.current,
+    role: "tabpanel",
+    hidden: boolToTrueOrUndef(!this.#isActive()),
+    tabindex: 0,
+    "data-value": this.opts.value.current,
+    "data-state": getTabDataState(this.#isActive()),
+    "aria-labelledby": this.#ariaLabelledBy(),
+    "data-orientation": this.root.opts.orientation.current,
+    [tabsAttrs.content]: "",
+    ...this.attachment
+  }));
+  get props() {
+    return this.#props();
+  }
+  set props($$value) {
+    return this.#props($$value);
+  }
+}
+function getTabDataState(condition) {
+  return condition ? "active" : "inactive";
+}
+function Tabs$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      id = createId(uid),
+      ref = null,
+      value = "",
+      onValueChange = noop,
+      orientation = "horizontal",
+      loop = true,
+      activationMode = "automatic",
+      disabled = false,
+      children,
+      child,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const rootState = TabsRootState.create({
+      id: boxWith(() => id),
+      value: boxWith(() => value, (v) => {
+        value = v;
+        onValueChange(v);
+      }),
+      orientation: boxWith(() => orientation),
+      loop: boxWith(() => loop),
+      activationMode: boxWith(() => activationMode),
+      disabled: boxWith(() => disabled),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, rootState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref, value });
+  });
+}
+function Tabs_content$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      children,
+      child,
+      id = createId(uid),
+      ref = null,
+      value,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const contentState = TabsContentState.create({
+      value: boxWith(() => value),
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, contentState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Tabs_list$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      child,
+      children,
+      id = createId(uid),
+      ref = null,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const listState = TabsListState.create({
+      id: boxWith(() => id),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, listState.props));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Tabs_trigger$1($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const uid = props_id($$renderer2);
+    let {
+      child,
+      children,
+      disabled = false,
+      id = createId(uid),
+      type = "button",
+      value,
+      ref = null,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    const triggerState = TabsTriggerState.create({
+      id: boxWith(() => id),
+      disabled: boxWith(() => disabled ?? false),
+      value: boxWith(() => value),
+      ref: boxWith(() => ref, (v) => ref = v)
+    });
+    const mergedProps = derived(() => mergeProps(restProps, triggerState.props, { type }));
+    if (child) {
+      $$renderer2.push("<!--[0-->");
+      child($$renderer2, { props: mergedProps() });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<button${attributes({ ...mergedProps() })}>`);
+      children?.($$renderer2);
+      $$renderer2.push(`<!----></button>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { ref });
+  });
+}
+function Tabs($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      value = "",
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tabs$1) {
+        $$renderer3.push("<!--[-->");
+        Tabs$1($$renderer3, spread_props([
+          {
+            "data-slot": "tabs",
+            class: cn("gap-2 flex flex-col", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            },
+            get value() {
+              return value;
+            },
+            set value($$value) {
+              value = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref, value });
+  });
+}
+function Tabs_content($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tabs_content$1) {
+        $$renderer3.push("<!--[-->");
+        Tabs_content$1($$renderer3, spread_props([
+          {
+            "data-slot": "tabs-content",
+            class: cn("flex-1 outline-none", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Tabs_list($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tabs_list$1) {
+        $$renderer3.push("<!--[-->");
+        Tabs_list$1($$renderer3, spread_props([
+          {
+            "data-slot": "tabs-list",
+            class: cn("h-9 inline-flex w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Tabs_trigger($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      class: className,
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      if (Tabs_trigger$1) {
+        $$renderer3.push("<!--[-->");
+        Tabs_trigger$1($$renderer3, spread_props([
+          {
+            "data-slot": "tabs-trigger",
+            class: cn("gap-1.5 px-2 py-1 text-sm font-medium data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center rounded-md border border-transparent whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", className)
+          },
+          restProps,
+          {
+            get ref() {
+              return ref;
+            },
+            set ref($$value) {
+              ref = $$value;
+              $$settled = false;
+            }
+          }
+        ]));
+        $$renderer3.push("<!--]-->");
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push("<!--]-->");
+      }
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { ref });
+  });
+}
+function Textarea($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      ref = null,
+      value = void 0,
+      class: className,
+      "data-slot": dataSlot = "textarea",
+      $$slots,
+      $$events,
+      ...restProps
+    } = $$props;
+    $$renderer2.push(`<textarea${attributes({
+      "data-slot": dataSlot,
+      class: clsx(cn("min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className)),
+      ...restProps
+    })}>`);
+    const $$body = escape_html(value);
+    if ($$body) {
+      $$renderer2.push(`${$$body}`);
+    }
+    $$renderer2.push(`</textarea>`);
+    bind_props($$props, { ref, value });
+  });
+}
+
+export { Tabs as T, Tabs_content as a, Tabs_list as b, Tabs_trigger as c, Textarea as d };
+//# sourceMappingURL=textarea-A5IYPwqe.js.map