@tcn/ui 0.0.1

package/dist/inputs/mask_input/mask_presenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mask_presenter.js","sources":["../../../src/inputs/mask_input/mask_presenter.ts"],"sourcesContent":["import { Signal } from '@tcn/state';\nimport { Mask } from './mask.js';\nimport { MaskConfig } from './mask_config.js';\n\nfunction areMasksUniqueLengths(masks: Mask[]) {\n  const set = new Set();\n  masks.forEach(m => set.add(m.getCharacterLength()));\n\n  return set.size === masks.length;\n}\n\nfunction maskSort(a: Mask, b: Mask) {\n  if (a.getInsertableSlotLength() > b.getInsertableSlotLength()) {\n    return 1;\n  } else if (a.getInsertableSlotLength() > b.getInsertableSlotLength()) {\n    return -1;\n  } else {\n    return a.getCharacterLength() - b.getCharacterLength();\n  }\n}\n\ninterface SelectionRange {\n  start: number;\n  end: number;\n}\n\nexport class MaskPresenter {\n  private _masks: Mask[];\n  private _currentMaskIndex: number;\n  private _value: Signal<string>;\n  private _filledValue: Signal<string>;\n  private _cursorPosition: Signal<number>;\n  private _selection: Signal<SelectionRange | null>;\n  private _maskConfigs: Signal<MaskConfig[]>;\n\n  get valueBroadcast() {\n    return this._value.broadcast;\n  }\n\n  get filledValueBroadcast() {\n    return this._filledValue.broadcast;\n  }\n\n  get cursorPositionBroadcast() {\n    return this._cursorPosition.broadcast;\n  }\n\n  get selectionBroadcast() {\n    return this._selection.broadcast;\n  }\n\n  get currentMask() {\n    return this._masks[this._currentMaskIndex];\n  }\n\n  get maskConfigsBroadcast() {\n    return this._maskConfigs.broadcast;\n  }\n\n  constructor(maskConfigs: MaskConfig[]) {\n    this._masks = this._createMasks(maskConfigs);\n    this._currentMaskIndex = 0;\n    this._cursorPosition = new Signal(0);\n    this._value = new Signal(this._masks[this._currentMaskIndex].getValue());\n    this._filledValue = new Signal(this._masks[this._currentMaskIndex].getFilledValue());\n    this._selection = new Signal<SelectionRange | null>(null);\n    this._maskConfigs = new Signal(maskConfigs);\n  }\n\n  private _createMasks(maskConfigs: MaskConfig[]) {\n    const masks = maskConfigs.map(c => new Mask(c));\n\n    if (maskConfigs.length < 1) {\n      throw new Error('Have to have at least one mask.');\n    }\n\n    if (!areMasksUniqueLengths(masks)) {\n      throw new Error('Masks need to be different lengths.');\n    }\n\n    masks.sort(maskSort);\n    return masks;\n  }\n\n  initialize() {\n    this.moveCursorTo(0);\n  }\n\n  isComplete() {\n    return this.currentMask.ifFilled();\n  }\n\n  setMaskConfigs(maskConfigs: MaskConfig[]) {\n    const oldValue = this._value.get();\n\n    this._masks = this._createMasks(maskConfigs);\n    this._currentMaskIndex = 0;\n\n    this.moveCursorTo(0);\n    this.insertText(oldValue);\n    this._maskConfigs.set(maskConfigs);\n  }\n\n  setValue(value: string) {\n    if (this._value.get() === value) {\n      return;\n    }\n    this.selectAll();\n    this.backspace();\n    const cursorPosition = this._cursorPosition.get();\n    this.moveCursorTo(0);\n    this.insertText(value);\n    this.moveCursorTo(cursorPosition);\n  }\n\n  insertText(text: string) {\n    const characters = [...text];\n    const selection = this._selection.get();\n\n    if (selection != null) {\n      this._removeCharactersWithinSelection(selection);\n    }\n\n    if (characters.length < 1) {\n      const newValue = this.currentMask.getValue();\n      const newFilledValue = this.currentMask.getFilledValue();\n      this._transitionToPreviousMaskIfNecessary();\n      this._value.set(newValue);\n      this._filledValue.set(newFilledValue);\n      this._cursorPosition.set(this.currentMask.getCursorPosition());\n      return;\n    }\n\n    for (let character of characters) {\n      const needsToTransitionToNextMask =\n        this.currentMask.ifFilled() && this._currentMaskIndex + 1 < this._masks.length;\n      if (needsToTransitionToNextMask) {\n        const isOnLast =\n          this.currentMask.getCursorPosition() >= this.currentMask.getCharacterLength();\n        const insertableSlotIndex = this.currentMask.getInsertableSlotIndexForCharacter(\n          this.currentMask.getCursorPosition()\n        );\n        const insertedText = this.currentMask.getInsertableSlotValues();\n\n        this._currentMaskIndex += 1;\n        this.currentMask.clearAll();\n\n        this.insertText(insertedText);\n\n        const cursorPosition =\n          this.currentMask.getCharacterIndexforInsertableSlotIndex(insertableSlotIndex);\n\n        if (isOnLast) {\n          this.currentMask.moveTo(cursorPosition + 1);\n        } else {\n          this.currentMask.moveTo(cursorPosition);\n        }\n      }\n\n      const inserted = this.currentMask.insert(character);\n      inserted && this.currentMask.moveRight();\n    }\n\n    const newValue = this.currentMask.getValue();\n    const newFilledValue = this.currentMask.getFilledValue();\n    this._value.set(newValue);\n    this._filledValue.set(newFilledValue);\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  delete() {\n    const selection = this._selection.get();\n    if (selection != null) {\n      this._removeCharactersWithinSelection(selection);\n    } else {\n      this.currentMask.deleteCharacter();\n    }\n\n    this._transitionToPreviousMaskIfNecessary();\n    this._value.set(this.currentMask.getValue());\n    this._filledValue.set(this.currentMask.getFilledValue());\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  private _transitionToPreviousMaskIfNecessary() {\n    const prevMask = this._masks[this._currentMaskIndex - 1];\n\n    const needsToTransitionToPrevMask =\n      prevMask &&\n      this.currentMask.getInsertableSlotValues().length <=\n        prevMask.getInsertableSlotLength();\n\n    if (needsToTransitionToPrevMask) {\n      const insertableSlotIndex = this.currentMask.getInsertableSlotIndexForCharacter(\n        this.currentMask.getCursorPosition()\n      );\n      const text = this.currentMask.getInsertableSlotValues();\n\n      this._currentMaskIndex -= 1;\n\n      prevMask.clearAll();\n\n      this.currentMask.moveTo(0);\n      this.insertText(text);\n\n      const cursorPosition =\n        this.currentMask.getCharacterIndexforInsertableSlotIndex(insertableSlotIndex);\n      this.currentMask.moveTo(cursorPosition);\n    }\n  }\n\n  private _removeCharactersWithinSelection(selection: SelectionRange) {\n    this.currentMask.clearRange(selection.start, selection.end);\n    this.currentMask.moveTo(selection.start);\n    this.removeSelection();\n  }\n\n  backspace() {\n    const selection = this._selection.get();\n    if (selection != null) {\n      this._removeCharactersWithinSelection(selection);\n    } else {\n      this.currentMask.moveTo(this.currentMask.getCursorPosition() - 1);\n      this.currentMask.deleteCharacter();\n    }\n\n    this._transitionToPreviousMaskIfNecessary();\n    this._value.set(this.currentMask.getValue());\n    this._filledValue.set(this.currentMask.getFilledValue());\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n\n    if (this.currentMask.getFilledLength() === 0) {\n      this._currentMaskIndex = 0;\n      this.currentMask.clearAll();\n    }\n  }\n\n  moveCursorRight() {\n    this.removeSelection();\n    this.currentMask.moveRight();\n\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  moveCursorLeft() {\n    this.removeSelection();\n    this.currentMask.moveLeft();\n\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  moveCursorTo(position: number) {\n    const finalPosition = Math.min(this.currentMask.getValueLength(), position);\n\n    this.removeSelection();\n    this.currentMask.moveTo(finalPosition);\n\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  forceMoveCursorTo(position: number) {\n    this.currentMask.forceMoveTo(position);\n  }\n\n  clearRange(start: number, end: number) {\n    this.currentMask.clearRange(start, end);\n    this.currentMask.moveTo(start);\n\n    this._value.set(this.currentMask.getValue());\n    this._filledValue.set(this.currentMask.getFilledValue());\n    this._cursorPosition.set(this.currentMask.getCursorPosition());\n  }\n\n  clearAll() {\n    this.selectAll();\n    this.backspace();\n  }\n\n  getLength() {\n    return this.currentMask.getValueLength();\n  }\n\n  selectAll() {\n    this.setSelection(0, this.currentMask.getValueLength());\n  }\n\n  setSelection(start: number, end: number) {\n    this._selection.set({ start: Math.min(start, end), end: Math.max(start, end) });\n    this._cursorPosition.set(start);\n  }\n\n  removeSelection() {\n    this._selection.transform(_ => {\n      return null;\n    });\n  }\n\n  getSelectedValue() {\n    const selection = this._selection.get();\n    if (selection != null) {\n      return this.currentMask.getValueWithinRange(selection.start, selection.end);\n    }\n\n    return '';\n  }\n}\n"],"names":["areMasksUniqueLengths","masks","set","m","maskSort","a","b","MaskPresenter","maskConfigs","Signal","Mask","c","oldValue","value","cursorPosition","text","characters","selection","newValue","newFilledValue","character","isOnLast","insertableSlotIndex","insertedText","prevMask","position","finalPosition","start","end","_"],"mappings":"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"}

package/dist/inputs/mask_input/numeric_character.d.ts

@@ -0,0 +1,10 @@
+import { RegexCharacter } from './regex_character.js';
+export declare class NumericCharacter extends RegexCharacter {
+    /**
+     *
+     * @param character The character supplied to the mask.
+     * @param placeholder The placeholder supplied to the mask.
+     */
+    constructor(character: string, placeholder: string);
+}
+//# sourceMappingURL=numeric_character.d.ts.map

package/dist/inputs/mask_input/numeric_character.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric_character.d.ts","sourceRoot":"","sources":["../../../src/inputs/mask_input/numeric_character.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,qBAAa,gBAAiB,SAAQ,cAAc;IAClD;;;;OAIG;gBACS,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM;CAInD"}

package/dist/inputs/mask_input/numeric_character.js

@@ -0,0 +1,15 @@
+import { RegexCharacter as t } from "./regex_character.js";
+class a extends t {
+  /**
+   *
+   * @param character The character supplied to the mask.
+   * @param placeholder The placeholder supplied to the mask.
+   */
+  constructor(r, e) {
+    super(r, /[0-9]/, e), this.type = "numeric";
+  }
+}
+export {
+  a as NumericCharacter
+};
+//# sourceMappingURL=numeric_character.js.map

package/dist/inputs/mask_input/numeric_character.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric_character.js","sources":["../../../src/inputs/mask_input/numeric_character.ts"],"sourcesContent":["import { RegexCharacter } from './regex_character.js';\n\nexport class NumericCharacter extends RegexCharacter {\n  /**\n   *\n   * @param character The character supplied to the mask.\n   * @param placeholder The placeholder supplied to the mask.\n   */\n  constructor(character: string, placeholder: string) {\n    super(character, /[0-9]/, placeholder);\n    this.type = 'numeric';\n  }\n}\n"],"names":["NumericCharacter","RegexCharacter","character","placeholder"],"mappings":";AAEO,MAAMA,UAAyBC,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnD,YAAYC,GAAmBC,GAAqB;AAClD,UAAMD,GAAW,SAASC,CAAW,GACrC,KAAK,OAAO;AAAA,EACd;AACF;"}

package/dist/inputs/mask_input/regex_character.d.ts

@@ -0,0 +1,13 @@
+import { MaskCursor } from './mask_cursor.js';
+import { Character } from './character.js';
+export declare class RegexCharacter extends Character {
+    private regex;
+    private isValueSet;
+    constructor(character: string, regex: RegExp, placeholderCharacter?: string);
+    enter(cursor: MaskCursor): void;
+    enterFromRight(cursor: MaskCursor): void;
+    insert(value: string, cursor: MaskCursor): boolean;
+    delete(): void;
+    isFilled(): boolean;
+}
+//# sourceMappingURL=regex_character.d.ts.map

package/dist/inputs/mask_input/regex_character.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"regex_character.d.ts","sourceRoot":"","sources":["../../../src/inputs/mask_input/regex_character.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,UAAU,CAAS;gBAEf,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAoB,CAAC,EAAE,MAAM;IAQ3E,KAAK,CAAC,MAAM,EAAE,UAAU;IAMxB,cAAc,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAYxC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,OAAO;IAoBlD,MAAM;IAKN,QAAQ;CAGT"}

package/dist/inputs/mask_input/regex_character.js

@@ -0,0 +1,33 @@
+import { Character as l } from "./character.js";
+class h extends l {
+  regex;
+  isValueSet = !1;
+  constructor(e, t, i) {
+    super(e, i), this.type = "regex", this.regex = t, this.value = i ?? "_", this.placeholder = this.value;
+  }
+  enter(e) {
+    !this.isFilled() && e.isPreviousCharacterEmpty() && e.moveLeft();
+  }
+  enterFromRight(e) {
+    const t = e.getCursorPosition(), i = e.isFilledBeyondIndex(t);
+    !this.isFilled() && !i && e.moveLeft(), this.isFilled() && e.moveRight();
+  }
+  insert(e, t) {
+    const i = this.regex.test(e);
+    if (i && this.isValueSet) {
+      const s = t.getCursorPosition();
+      t.moveRight(), t.insertPush(this.value), t.moveTo(s);
+    }
+    return i ? (this.isValueSet = !0, this.value = e, !0) : !1;
+  }
+  delete() {
+    this.isValueSet = !1, this.value = this.placeholder;
+  }
+  isFilled() {
+    return this.isValueSet;
+  }
+}
+export {
+  h as RegexCharacter
+};
+//# sourceMappingURL=regex_character.js.map

package/dist/inputs/mask_input/regex_character.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"regex_character.js","sources":["../../../src/inputs/mask_input/regex_character.ts"],"sourcesContent":["import { MaskCursor } from './mask_cursor.js';\nimport { Character } from './character.js';\n\nexport class RegexCharacter extends Character {\n  private regex: RegExp;\n  private isValueSet = false;\n\n  constructor(character: string, regex: RegExp, placeholderCharacter?: string) {\n    super(character, placeholderCharacter);\n    this.type = 'regex';\n    this.regex = regex;\n    this.value = placeholderCharacter == null ? '_' : placeholderCharacter;\n    this.placeholder = this.value;\n  }\n\n  enter(cursor: MaskCursor) {\n    if (!this.isFilled() && cursor.isPreviousCharacterEmpty()) {\n      cursor.moveLeft();\n    }\n  }\n\n  enterFromRight(cursor: MaskCursor): void {\n    const position = cursor.getCursorPosition();\n    const isFilledBeyondCurrentPosition = cursor.isFilledBeyondIndex(position);\n    if (!this.isFilled() && !isFilledBeyondCurrentPosition) {\n      cursor.moveLeft();\n    }\n\n    if (this.isFilled()) {\n      cursor.moveRight();\n    }\n  }\n\n  insert(value: string, cursor: MaskCursor): boolean {\n    const passed = this.regex.test(value);\n\n    if (passed && this.isValueSet) {\n      const position = cursor.getCursorPosition();\n      cursor.moveRight();\n      cursor.insertPush(this.value);\n\n      cursor.moveTo(position);\n    }\n\n    if (passed) {\n      this.isValueSet = true;\n      this.value = value;\n      return true;\n    }\n\n    return false;\n  }\n\n  delete() {\n    this.isValueSet = false;\n    this.value = this.placeholder;\n  }\n\n  isFilled() {\n    return this.isValueSet;\n  }\n}\n"],"names":["RegexCharacter","Character","character","regex","placeholderCharacter","cursor","position","isFilledBeyondCurrentPosition","value","passed"],"mappings":";AAGO,MAAMA,UAAuBC,EAAU;AAAA,EACpC;AAAA,EACA,aAAa;AAAA,EAErB,YAAYC,GAAmBC,GAAeC,GAA+B;AAC3E,UAAMF,GAAWE,CAAoB,GACrC,KAAK,OAAO,SACZ,KAAK,QAAQD,GACb,KAAK,QAAQC,KAA+B,KAC5C,KAAK,cAAc,KAAK;AAAA,EAC1B;AAAA,EAEA,MAAMC,GAAoB;AACxB,IAAI,CAAC,KAAK,SAAA,KAAcA,EAAO,8BAC7BA,EAAO,SAAA;AAAA,EAEX;AAAA,EAEA,eAAeA,GAA0B;AACvC,UAAMC,IAAWD,EAAO,kBAAA,GAClBE,IAAgCF,EAAO,oBAAoBC,CAAQ;AACzE,IAAI,CAAC,KAAK,SAAA,KAAc,CAACC,KACvBF,EAAO,SAAA,GAGL,KAAK,cACPA,EAAO,UAAA;AAAA,EAEX;AAAA,EAEA,OAAOG,GAAeH,GAA6B;AACjD,UAAMI,IAAS,KAAK,MAAM,KAAKD,CAAK;AAEpC,QAAIC,KAAU,KAAK,YAAY;AAC7B,YAAMH,IAAWD,EAAO,kBAAA;AACxB,MAAAA,EAAO,UAAA,GACPA,EAAO,WAAW,KAAK,KAAK,GAE5BA,EAAO,OAAOC,CAAQ;AAAA,IACxB;AAEA,WAAIG,KACF,KAAK,aAAa,IAClB,KAAK,QAAQD,GACN,MAGF;AAAA,EACT;AAAA,EAEA,SAAS;AACP,SAAK,aAAa,IAClB,KAAK,QAAQ,KAAK;AAAA,EACpB;AAAA,EAEA,WAAW;AACT,WAAO,KAAK;AAAA,EACd;AACF;"}

package/dist/inputs/multi_combo_box/multi_combo_box.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { InputProps } from '../input/input.js';
+import { OptionProps } from '../options/option.js';
+import { VStackProps } from '../../stacks/v_stack.js';
+export interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {
+    children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
+    onChange?: (values: string[]) => void;
+    value?: string[];
+    disabled?: boolean;
+    inline?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    inputProps?: InputProps;
+    trimCustomInput?: boolean;
+}
+export declare const MultiComboBox: React.ForwardRefExoticComponent<MultiComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=multi_combo_box.d.ts.map

package/dist/inputs/multi_combo_box/multi_combo_box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi_combo_box.d.ts","sourceRoot":"","sources":["../../../src/inputs/multi_combo_box/multi_combo_box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAKnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACvE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,2FA4GxB,CAAC"}

package/dist/inputs/multi_combo_box/multi_combo_box.js

@@ -0,0 +1,101 @@
+import { jsx as t, jsxs as h, Fragment as C } from "react/jsx-runtime";
+import O, { useState as N } from "react";
+import { ComboBox as v } from "../combo_box/combo_box.js";
+import { MultiselectInlineValues as R } from "../multiselect/multiselect_inline_values.js";
+import { MultiselectValues as T } from "../multiselect/multiselect_values.js";
+import { makeAvailableOptions as g } from "../options/utils.js";
+import { Option as j } from "../options/option.js";
+import k from "classnames";
+import { VStack as _ } from "../../stacks/v_stack.js";
+import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3", F = { "multi-combo-box-container": E }, P = O.forwardRef(function({
+  value: e = [],
+  children: M,
+  disabled: n = !1,
+  className: A,
+  onChange: r,
+  inline: V = !1,
+  inputRef: c,
+  trimCustomInput: s = !1,
+  inputProps: m,
+  ...y
+}, S) {
+  const [f, l] = N(""), p = O.Children.toArray(
+    M
+  ), u = g(p, e), d = e.map((o) => {
+    const i = p.find((a) => a.props.value === o);
+    return i ?? /* @__PURE__ */ t(j, { value: o, label: o, children: o });
+  });
+  function x(o) {
+    if (e.indexOf(o.props.value) > -1) {
+      const a = e.filter((B) => B !== o.props.value);
+      r && r(a);
+    }
+  }
+  function b(o) {
+    if (o.trim() === "")
+      return;
+    e.indexOf(o) === -1 && r && r([...e, o]), l("");
+  }
+  return V ? /* @__PURE__ */ h(C, { children: [
+    /* @__PURE__ */ t(
+      v,
+      {
+        ref: c,
+        value: f,
+        onChange: l,
+        onOptionSelect: b,
+        trimCustomInput: s,
+        disabled: n,
+        noOptionMatchedMessage: "Press Enter To Add",
+        placeholder: "Type to Add",
+        ...m,
+        children: u
+      }
+    ),
+    /* @__PURE__ */ t(
+      R,
+      {
+        values: d,
+        disabled: n,
+        onRemove: x
+      }
+    )
+  ] }) : /* @__PURE__ */ h(
+    _,
+    {
+      ref: S,
+      ...y,
+      className: k(F["multi-combo-box-container"], A),
+      children: [
+        /* @__PURE__ */ t(
+          v,
+          {
+            ref: c,
+            value: f,
+            onChange: l,
+            onOptionSelect: b,
+            trimCustomInput: s,
+            disabled: n,
+            noOptionMatchedMessage: "No Options Matched",
+            placeholder: "Type to Search or Add",
+            ...m,
+            children: u
+          }
+        ),
+        /* @__PURE__ */ t(
+          T,
+          {
+            values: d,
+            onRemove: x,
+            disabled: n,
+            className: "multi-combo-box-values-container"
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  P as MultiComboBox
+};
+//# sourceMappingURL=multi_combo_box.js.map

package/dist/inputs/multi_combo_box/multi_combo_box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi_combo_box.js","sources":["../../../src/inputs/multi_combo_box/multi_combo_box.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ComboBox } from '../combo_box/combo_box.js';\nimport { InputProps } from '../input/input.js';\nimport { MultiselectInlineValues } from '../multiselect/multiselect_inline_values.js';\nimport { MultiselectValues } from '../multiselect/multiselect_values.js';\nimport { makeAvailableOptions } from '../options/utils.js';\nimport { OptionProps } from '../options/option.js';\nimport { Option } from '../options/option.js';\n\nimport styles from './multi_combo_box.module.css';\nimport classNames from 'classnames';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {\n  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  inputProps?: InputProps;\n  trimCustomInput?: boolean;\n}\n\nexport const MultiComboBox = React.forwardRef(function MultiComboBox(\n  {\n    value: values = [],\n    children,\n    disabled = false,\n    className,\n    onChange,\n    inline = false,\n    inputRef,\n    trimCustomInput = false,\n    inputProps,\n    ...props\n  }: MultiComboBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [intervalValue, setInternalValue] = useState('');\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = values.map(v => {\n    const option = childrenArray.find(o => o.props.value === v);\n    if (option == null) {\n      return (\n        <Option value={v} label={v}>\n          {v}\n        </Option>\n      );\n    }\n    return option;\n  });\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  function addValue(newValue: string) {\n    if (newValue.trim() === '') {\n      return;\n    }\n\n    const index = values.indexOf(newValue);\n\n    if (index === -1) {\n      onChange && onChange([...values, newValue]);\n    }\n\n    setInternalValue('');\n  }\n\n  if (inline) {\n    return (\n      <>\n        <ComboBox\n          ref={inputRef}\n          value={intervalValue}\n          onChange={setInternalValue}\n          onOptionSelect={addValue}\n          trimCustomInput={trimCustomInput}\n          disabled={disabled}\n          noOptionMatchedMessage=\"Press Enter To Add\"\n          placeholder=\"Type to Add\"\n          {...inputProps}\n        >\n          {availableOptions}\n        </ComboBox>\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          disabled={disabled}\n          onRemove={removeValue}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      ref={ref}\n      {...props}\n      className={classNames(styles['multi-combo-box-container'], className)}\n    >\n      <ComboBox\n        ref={inputRef}\n        value={intervalValue}\n        onChange={setInternalValue}\n        onOptionSelect={addValue}\n        trimCustomInput={trimCustomInput}\n        disabled={disabled}\n        noOptionMatchedMessage=\"No Options Matched\"\n        placeholder=\"Type to Search or Add\"\n        {...inputProps}\n      >\n        {availableOptions}\n      </ComboBox>\n      <MultiselectValues\n        values={valuesAsOptions}\n        onRemove={removeValue}\n        disabled={disabled}\n        className=\"multi-combo-box-values-container\"\n      />\n    </VStack>\n  );\n});\n"],"names":["MultiComboBox","React","values","children","disabled","className","onChange","inline","inputRef","trimCustomInput","inputProps","props","ref","intervalValue","setInternalValue","useState","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","v","option","o","Option","removeValue","newValues","addValue","newValue","jsxs","Fragment","jsx","ComboBox","MultiselectInlineValues","VStack","classNames","styles","MultiselectValues"],"mappings":";;;;;;;;;wFAwBaA,IAAgBC,EAAM,WAAW,SAC5C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAC/CC,IAAgBf,EAAM,SAAS;AAAA,IACnCE;AAAA,EAAA,GAGIc,IAAmBC,EAAqBF,GAAed,CAAM,GAC7DiB,IAAkBjB,EAAO,IAAI,CAAAkB,MAAK;AACtC,UAAMC,IAASL,EAAc,KAAK,OAAKM,EAAE,MAAM,UAAUF,CAAC;AAC1D,WAAIC,uBAECE,GAAA,EAAO,OAAOH,GAAG,OAAOA,GACtB,UAAAA,GACH;AAAA,EAIN,CAAC;AAED,WAASI,EAAYH,GAAyC;AAG5D,QAFcnB,EAAO,QAAQmB,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMI,IAAYvB,EAAO,OAAO,OAAKkB,MAAMC,EAAO,MAAM,KAAK;AAC7D,MAAAf,KAAYA,EAASmB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,WAASC,EAASC,GAAkB;AAClC,QAAIA,EAAS,KAAA,MAAW;AACtB;AAKF,IAFczB,EAAO,QAAQyB,CAAQ,MAEvB,MACZrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAQ,CAAC,GAG5Cb,EAAiB,EAAE;AAAA,EACrB;AAEA,SAAIP,IAEA,gBAAAqB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKvB;AAAA,QACL,OAAOK;AAAA,QACP,UAAUC;AAAA,QACV,gBAAgBY;AAAA,QAChB,iBAAAjB;AAAA,QACA,UAAAL;AAAA,QACA,wBAAuB;AAAA,QACvB,aAAY;AAAA,QACX,GAAGM;AAAA,QAEH,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAa;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb;AAAA,QACR,UAAAf;AAAA,QACA,UAAUoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF,IAKF,gBAAAI;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWuB,EAAWC,EAAO,2BAA2B,GAAG9B,CAAS;AAAA,MAEpE,UAAA;AAAA,QAAA,gBAAAyB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKvB;AAAA,YACL,OAAOK;AAAA,YACP,UAAUC;AAAA,YACV,gBAAgBY;AAAA,YAChB,iBAAAjB;AAAA,YACA,UAAAL;AAAA,YACA,wBAAuB;AAAA,YACvB,aAAY;AAAA,YACX,GAAGM;AAAA,YAEH,UAAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAa;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQjB;AAAA,YACR,UAAUK;AAAA,YACV,UAAApB;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { SelectProps } from '../select/select.js';
+export interface MultiselectProps extends Omit<SelectProps, 'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'> {
+    children: React.ReactElement<HTMLOptionElement> | React.ReactElement<HTMLOptionElement>[];
+    onChange?: (values: string[]) => void;
+    value?: string[];
+    disabled?: boolean;
+    inline?: boolean;
+}
+export declare const Multiselect: React.ForwardRefExoticComponent<Omit<MultiselectProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=multiselect.d.ts.map

package/dist/inputs/multiselect/multiselect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK1D,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,WAAW,EACX,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CACzE;IACD,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,yGA2GtB,CAAC"}

package/dist/inputs/multiselect/multiselect.js

@@ -0,0 +1,105 @@
+import { jsxs as v, Fragment as j, jsx as l } from "react/jsx-runtime";
+import A, { useRef as V, useLayoutEffect as q } from "react";
+import { Spacer as C } from "../../stacks/spacer.js";
+import { VStack as E } from "../../stacks/v_stack.js";
+import { MultiselectInlineValues as N } from "./multiselect_inline_values.js";
+import { MultiselectValues as _ } from "./multiselect_values.js";
+import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
+import { Select as S } from "../select/select.js";
+import "../../utils/focus_redirect.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/scroll_away_listener.js";
+import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
+import "../../utils/hooks/use_resize_observer.js";
+import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = { "multiselect-container": $ }, ee = A.forwardRef(function({
+  value: e = [],
+  disabled: o = !1,
+  children: x,
+  className: D,
+  onChange: n,
+  inline: y = !1,
+  width: s = "100%",
+  minWidth: i,
+  maxWidth: u,
+  ...a
+}, m) {
+  const r = V(null), F = L(m, r), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
+    x
+  ), p = g(f, e), d = I(f, e);
+  q(() => {
+    const t = O.current;
+    c != null && t != null && (t.querySelector(`[data-value='${c}']`)?.focus(), requestAnimationFrame(() => {
+      r.current && r.current.focus();
+    }));
+  }, [c]);
+  function h(t) {
+    e.includes(t) || n && n([...e, t]);
+  }
+  function R(t) {
+    if (e.indexOf(t.props.value) > -1) {
+      const M = e.filter((w) => w !== t.props.value);
+      n && n(M);
+    }
+  }
+  return y ? /* @__PURE__ */ v(j, { children: [
+    /* @__PURE__ */ l(
+      S,
+      {
+        ref: F,
+        disabled: o,
+        onChange: h,
+        width: "auto",
+        value: null,
+        placeholder: "Select to Add",
+        ...a,
+        children: p
+      }
+    ),
+    /* @__PURE__ */ l(C, { width: "8px" }),
+    /* @__PURE__ */ l(
+      N,
+      {
+        values: d,
+        onRemove: R,
+        disabled: o
+      }
+    )
+  ] }) : /* @__PURE__ */ v(
+    E,
+    {
+      width: s,
+      minWidth: i,
+      maxWidth: u,
+      className: z["multiselect-container"],
+      children: [
+        /* @__PURE__ */ l(
+          S,
+          {
+            ref: m,
+            disabled: o,
+            onChange: h,
+            value: null,
+            placeholder: "Select to Add",
+            width: s,
+            minWidth: i,
+            maxWidth: u,
+            ...a,
+            children: p
+          }
+        ),
+        /* @__PURE__ */ l(
+          _,
+          {
+            disabled: o,
+            values: d,
+            onRemove: R
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ee as Multiselect
+};
+//# sourceMappingURL=multiselect.js.map

package/dist/inputs/multiselect/multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\n\nexport interface MultiselectProps\n  extends Omit<\n    SelectProps,\n    'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n  > {\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n  {\n    value: values = [],\n    disabled = false,\n    children,\n    className,\n    onChange,\n    inline = false,\n    width = '100%',\n    minWidth,\n    maxWidth,\n    ...props\n  }: MultiselectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n  const selectRef = useForkRef(ref, internalSelectRef);\n  const lastValue = values[values.length - 1] || null;\n  const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n  useLayoutEffect(() => {\n    const valuesElement = valuesContainerRef.current;\n    const shouldFocus = lastValue != null && valuesElement != null;\n    if (shouldFocus) {\n      (\n        valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n      )?.focus();\n\n      // Safari doesn't respect the first focus if its called too quickly\n      requestAnimationFrame(() => {\n        internalSelectRef.current && internalSelectRef.current.focus();\n      });\n    }\n  }, [lastValue]);\n\n  function addValue(value: string) {\n    if (!values.includes(value)) {\n      onChange && onChange([...values, value]);\n    }\n  }\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  if (inline) {\n    return (\n      <>\n        <Select\n          ref={selectRef}\n          disabled={disabled}\n          onChange={addValue}\n          width=\"auto\"\n          value={null}\n          placeholder=\"Select to Add\"\n          {...props}\n        >\n          {availableOptions}\n        </Select>\n        <Spacer width=\"8px\" />\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          onRemove={removeValue}\n          disabled={disabled}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      className={styles['multiselect-container']}\n    >\n      <Select\n        ref={ref}\n        disabled={disabled}\n        onChange={addValue}\n        value={null}\n        placeholder=\"Select to Add\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        {...props}\n      >\n        {availableOptions}\n      </Select>\n      <MultiselectValues\n        disabled={disabled}\n        values={valuesAsOptions}\n        onRemove={removeValue}\n      />\n    </VStack>\n  );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;gFAyBaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAO,uBAAuB;AAAA,MAEzC,UAAA;AAAA,QAAA,gBAAAL;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAArC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect_inline_values.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { OptionProps } from '../options/option.js';
+export interface MultiselectInlineValuesProps {
+    values: React.ReactElement<OptionProps>[];
+    disabled: boolean;
+    onRemove: (value: React.ReactElement<OptionProps>) => void;
+}
+export declare function MultiselectInlineValues({ values, disabled, onRemove, }: MultiselectInlineValuesProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=multiselect_inline_values.d.ts.map

package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDA+B9B"}

package/dist/inputs/multiselect/multiselect_inline_values.js

@@ -0,0 +1,49 @@
+import { jsxs as p, jsx as r, Fragment as l } from "react/jsx-runtime";
+import { s as o } from "../../multiselect_values.module-BMJOyYHe.js";
+import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
+import "../../actions/button/base_button/base_button.js";
+import "../../actions/button/button_group/button_group.js";
+import { SlimButton as c } from "../../actions/button/slim_button/slim_button.js";
+import "../../actions/button/button/button.js";
+import "../../actions/button/select_group/select_group.js";
+import "../../actions/button/select_group/single_select_group.js";
+import { Chip as h } from "../../tokens/chip/chip.js";
+import "../../tokens/badge/badge.js";
+import "../../tokens/bubble/bubble.js";
+function b({
+  values: e,
+  disabled: m,
+  onRemove: s
+}) {
+  const t = e.map((i, n) => /* @__PURE__ */ p(
+    h,
+    {
+      hAlign: "start",
+      className: o.chip,
+      paddingInlineStart: "8px",
+      width: "auto",
+      children: [
+        /* @__PURE__ */ r("span", { children: i.props.label }),
+        /* @__PURE__ */ r(
+          c,
+          {
+            disabled: m,
+            size: "sm",
+            hierarchy: "tertiary",
+            className: o.remove,
+            onClick: () => {
+              s(i);
+            },
+            children: /* @__PURE__ */ r(a, { size: "xs" })
+          }
+        )
+      ]
+    },
+    n
+  ));
+  return t.length === 0 ? null : /* @__PURE__ */ r(l, { children: t });
+}
+export {
+  b as MultiselectInlineValues
+};
+//# sourceMappingURL=multiselect_inline_values.js.map

package/dist/inputs/multiselect/multiselect_inline_values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={styles.chip}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={styles.remove}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAO;AAAA,MAElB,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAL,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAT;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAO;AAAA,YAClB,SAAS,MAAM;AACb,cAAAN,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAK,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKN;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}

package/dist/inputs/multiselect/multiselect_row.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { MultiselectProps } from './multiselect.js';
+import { OptionsFieldPresenter } from '../../form/field_presenters/options_field_presenter.js';
+export interface MultiselectRowProps<T> extends Omit<MultiselectProps, 'onChange' | 'value' | 'children'> {
+    presenter: OptionsFieldPresenter<T[], T>;
+    children: (value: T, index: number) => React.ReactElement<'option'>;
+    id: string;
+}
+export declare const MultiselectRow: React.ForwardRefExoticComponent<Omit<MultiselectRowProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=multiselect_row.d.ts.map

package/dist/inputs/multiselect/multiselect_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAe,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,wDAAwD,CAAC;AAEpG,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;IACjE,SAAS,EAAE,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,kHA2CzB,CAAC"}

package/dist/inputs/multiselect/multiselect_row.js

@@ -0,0 +1,35 @@
+import { jsx as i } from "react/jsx-runtime";
+import R from "react";
+import { useSignalValue as p } from "@tcn/state";
+import { HField as E } from "../../form/field/h_field/h_field.js";
+import { Multiselect as S } from "./multiselect.js";
+const C = R.forwardRef(function({ presenter: r, children: c, id: u, ...m }, d) {
+  let n = [];
+  const s = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), f = p(r.optionsBroadcast), { value: g, label: M, description: w, error: v } = p(r.stateBroadcast), V = f.map((e, o) => {
+    const t = c(e, o);
+    return s.set(e, t.props.value), a.set(t.props.value, e), t;
+  });
+  function h(e) {
+    const o = e.map((t) => {
+      const l = a.get(t);
+      if (l == null) throw new Error(`Invalid value: ${t}`);
+      return l;
+    });
+    o && r.setValue(o);
+  }
+  return n = g.map((e) => s.get(e) || "") || [], /* @__PURE__ */ i(
+    E,
+    {
+      id: u,
+      ref: d,
+      label: M,
+      description: w,
+      errorMessage: v,
+      children: /* @__PURE__ */ i(S, { ...m, value: n, onChange: h, children: V })
+    }
+  );
+});
+export {
+  C as MultiselectRow
+};
+//# sourceMappingURL=multiselect_row.js.map

package/dist/inputs/multiselect/multiselect_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_row.js","sources":["../../../src/inputs/multiselect/multiselect_row.tsx"],"sourcesContent":["import React from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { HField } from '../../form/field/h_field/h_field.js';\nimport { Multiselect, MultiselectProps } from './multiselect.js';\nimport type { OptionsFieldPresenter } from '../../form/field_presenters/options_field_presenter.js';\n\nexport interface MultiselectRowProps<T>\n  extends Omit<MultiselectProps, 'onChange' | 'value' | 'children'> {\n  presenter: OptionsFieldPresenter<T[], T>;\n  children: (value: T, index: number) => React.ReactElement<'option'>;\n  id: string;\n}\n\nexport const MultiselectRow = React.forwardRef(function MultiselectRow<T = string>(\n  { presenter, children, id, ...props }: MultiselectRowProps<T>,\n  ref: React.Ref<HTMLDivElement>\n) {\n  let stringValues: string[] = [];\n  const typeToStringMap = new Map<T, string>();\n  const stringToTypeMap = new Map<string, T>();\n  const options = useSignalValue(presenter.optionsBroadcast);\n\n  const { value, label, description, error } = useSignalValue(presenter.stateBroadcast);\n\n  const optionElements = options.map((o, index) => {\n    const optionElement = children(o, index);\n    typeToStringMap.set(o, (optionElement.props as any).value);\n    stringToTypeMap.set((optionElement.props as any).value, o);\n    return optionElement;\n  });\n\n  function mapSelectedValues(values: string[]) {\n    const selectedValues = values.map(v => {\n      const value = stringToTypeMap.get(v);\n      if (value == null) throw new Error(`Invalid value: ${v}`);\n      return value;\n    });\n\n    selectedValues && presenter.setValue(selectedValues);\n  }\n\n  stringValues = value.map(v => typeToStringMap.get(v) || '') || [];\n\n  return (\n    <HField\n      id={id}\n      ref={ref}\n      label={label}\n      description={description}\n      errorMessage={error}\n    >\n      <Multiselect {...props} value={stringValues} onChange={mapSelectedValues}>\n        {optionElements as any}\n      </Multiselect>\n    </HField>\n  );\n});\n"],"names":["MultiselectRow","React","presenter","children","id","props","ref","stringValues","typeToStringMap","stringToTypeMap","options","useSignalValue","value","label","description","error","optionElements","o","index","optionElement","mapSelectedValues","values","selectedValues","v","jsx","HField","Multiselect"],"mappings":";;;;;AAaO,MAAMA,IAAiBC,EAAM,WAAW,SAC7C,EAAE,WAAAC,GAAW,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAC9BC,GACA;AACA,MAAIC,IAAyB,CAAA;AAC7B,QAAMC,wBAAsB,IAAA,GACtBC,wBAAsB,IAAA,GACtBC,IAAUC,EAAeT,EAAU,gBAAgB,GAEnD,EAAE,OAAAU,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUJ,EAAeT,EAAU,cAAc,GAE9Ec,IAAiBN,EAAQ,IAAI,CAACO,GAAGC,MAAU;AAC/C,UAAMC,IAAgBhB,EAASc,GAAGC,CAAK;AACvC,WAAAV,EAAgB,IAAIS,GAAIE,EAAc,MAAc,KAAK,GACzDV,EAAgB,IAAKU,EAAc,MAAc,OAAOF,CAAC,GAClDE;AAAA,EACT,CAAC;AAED,WAASC,EAAkBC,GAAkB;AAC3C,UAAMC,IAAiBD,EAAO,IAAI,CAAAE,MAAK;AACrC,YAAMX,IAAQH,EAAgB,IAAIc,CAAC;AACnC,UAAIX,KAAS,KAAM,OAAM,IAAI,MAAM,kBAAkBW,CAAC,EAAE;AACxD,aAAOX;AAAAA,IACT,CAAC;AAED,IAAAU,KAAkBpB,EAAU,SAASoB,CAAc;AAAA,EACrD;AAEA,SAAAf,IAAeK,EAAM,IAAI,CAAAW,MAAKf,EAAgB,IAAIe,CAAC,KAAK,EAAE,KAAK,CAAA,GAG7D,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAArB;AAAA,MACA,KAAAE;AAAA,MACA,OAAAO;AAAA,MACA,aAAAC;AAAA,MACA,cAAcC;AAAA,MAEd,UAAA,gBAAAS,EAACE,KAAa,GAAGrB,GAAO,OAAOE,GAAc,UAAUa,GACpD,UAAAJ,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect_values.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { OptionProps } from '../options/option.js';
+export interface MultiselectValueProps {
+    values: React.ReactElement<OptionProps>[];
+    disabled: boolean;
+    onRemove: (value: React.ReactElement<OptionProps>) => void;
+    className?: string;
+}
+export declare function MultiselectValues({ values, disabled, className, onRemove, }: MultiselectValueProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=multiselect_values.d.ts.map

package/dist/inputs/multiselect/multiselect_values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,qBAAqB,kDA0CvB"}

package/dist/inputs/multiselect/multiselect_values.js

@@ -0,0 +1,62 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import p from "classnames";
+import { s as i } from "../../multiselect_values.module-BMJOyYHe.js";
+import { CrossIcon as c } from "@tcn/icons/cross_icon.js";
+import "../../actions/button/base_button/base_button.js";
+import "../../actions/button/button_group/button_group.js";
+import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
+import "../../actions/button/button/button.js";
+import "../../actions/button/select_group/select_group.js";
+import "../../actions/button/select_group/single_select_group.js";
+import { Chip as u } from "../../tokens/chip/chip.js";
+import "../../tokens/badge/badge.js";
+import "../../tokens/bubble/bubble.js";
+function k({
+  values: s,
+  disabled: t,
+  className: m,
+  onRemove: l
+}) {
+  const e = s.map((o, n) => /* @__PURE__ */ a(
+    u,
+    {
+      hAlign: "start",
+      color: "rgb(57, 85, 120)",
+      className: i.chip,
+      paddingInlineStart: "8px",
+      children: [
+        /* @__PURE__ */ r("span", { children: o.props.label }),
+        /* @__PURE__ */ r(
+          h,
+          {
+            disabled: t,
+            size: "sm",
+            hierarchy: "tertiary",
+            className: i.remove,
+            onClick: () => {
+              l(o);
+            },
+            children: /* @__PURE__ */ r(c, { size: "xs" })
+          }
+        )
+      ]
+    },
+    n
+  ));
+  return e.length === 0 ? null : /* @__PURE__ */ r(
+    "div",
+    {
+      className: p(
+        i["item-container"],
+        m,
+        "multiselect-values-container"
+      ),
+      "data-is-disabled": t,
+      children: e
+    }
+  );
+}
+export {
+  k as MultiselectValues
+};
+//# sourceMappingURL=multiselect_values.js.map

package/dist/inputs/multiselect/multiselect_values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={styles.chip}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={styles.remove}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\n        styles['item-container'],\n        className,\n        'multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","styles","jsx","SlimButton","CrossIcon","classNames"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAO;AAAA,MAElB,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAL,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAO;AAAA,YAClB,SAAS,MAAM;AACb,cAAAN,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAK,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKN;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACTJ,EAAO,gBAAgB;AAAA,QACvBP;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}