@smwb/ui-solid 0.3.0 → 0.4.1

package/dist/source/components/inputs/fileDrop/previewWrapper.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/fileDrop/previewWrapper.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport { Preview } from \"./preview\";\nimport { CountPreview } from \"./countPreview\";\n\nexport interface PreviewWrapperProps {\n  preview?: boolean | undefined;\n  files: File[];\n  handleRemoveAll: () => void;\n  previewCols?: number | undefined;\n  galleryItemSize?: number | undefined;\n  previewClassName?: string | undefined;\n}\n\nexport function PreviewWrapper(props: PreviewWrapperProps): JSX.Element {\n  return (\n    <Show\n      when={props.preview}\n      fallback={\n        <CountPreview\n          filesLength={props.files.length}\n          handleRemoveAll={props.handleRemoveAll}\n          previewClassName={props.previewClassName}\n        />\n      }\n    >\n      <Preview\n        files={props.files}\n        handleRemoveAll={props.handleRemoveAll}\n        previewCols={props.previewCols}\n        galleryItemSize={props.galleryItemSize}\n        previewClassName={props.previewClassName}\n      />\n    </Show>\n  );\n}\n\nexport default PreviewWrapper;\n"],"mappings":"AAAA,SAAmB,YAAY;AAC/B,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAWtB,SAAS,eAAe,OAAyC;AACtE,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,aAAa,MAAM,MAAM;AAAA,MACzB,iBAAiB,MAAM;AAAA,MACvB,kBAAkB,MAAM;AAAA,IAC1B;AAAA,GAEH;AAAA,MACC,CAAC;AAAA,IACC,OAAO,MAAM;AAAA,IACb,iBAAiB,MAAM;AAAA,IACvB,aAAa,MAAM;AAAA,IACnB,iBAAiB,MAAM;AAAA,IACvB,kBAAkB,MAAM;AAAA,EAC1B,EAAE;AAAA,IACJ,EAjBC;AAmBL;AAEA,IAAO,yBAAQ;","names":[],"file":"previewWrapper.jsx"}

package/dist/source/components/inputs/fileDrop/utils.js

@@ -0,0 +1,7 @@
+function isImageFile(file) {
+  return /^image\/(png|jpeg)$/.test(file.type);
+}
+export {
+  isImageFile
+};
+//# sourceMappingURL=utils.js.map

package/dist/source/components/inputs/fileDrop/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/fileDrop/utils.ts"],
+  "sourcesContent": ["export function isImageFile(file: File): boolean {\n  return /^image\\/(png|jpeg)$/.test(file.type);\n}\n"],
+  "mappings": "AAAO,SAAS,YAAY,MAAqB;AAC/C,SAAO,sBAAsB,KAAK,KAAK,IAAI;AAC7C;",
+  "names": []
+}

package/dist/source/components/inputs/fileInput/fileInput.jsx

@@ -0,0 +1,47 @@
+import "@smwb/ui-styles/less/components/fileInput/fileInput.entry.less";
+import { Show, splitProps } from "solid-js";
+import cn from "clsx";
+import { createDropzone } from "../../../primitives/createDropzone";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function FileInput(props) {
+  const [local, dropzoneOptions] = splitProps(props, [
+    "label",
+    "onClick",
+    "onFilesSelected",
+    "class",
+    "buttonClassName",
+    "disabled",
+    "error",
+    "ref"
+  ]);
+  const dropzone = createDropzone({
+    ...dropzoneOptions,
+    disabled: local.disabled,
+    onDropAccepted: (accepted, event) => {
+      local.onFilesSelected?.(accepted);
+      dropzoneOptions.onDropAccepted?.(accepted, event);
+    }
+  });
+  return <div
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-file-input", { "smwb-disabled": local.disabled }, local.class)}
+    data-testid="file-input"
+    {...dropzone.getRootProps()}
+  >
+      <button type="button" class={cn(local.buttonClassName)} disabled={local.disabled} onClick={(e) => local.onClick?.(e)}>
+        {local.label}
+      </button>
+      <input ref={dropzone.inputRef} {...dropzone.getInputProps()} />
+      <Show when={local.error}>
+        <span class="smwb-file-input__error" role="alert">
+          {local.error}
+        </span>
+      </Show>
+    </div>;
+}
+var fileInput_default = FileInput;
+export {
+  FileInput,
+  fileInput_default as default
+};
+//# sourceMappingURL=fileInput.jsx.map

package/dist/source/components/inputs/fileInput/fileInput.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/fileInput/fileInput.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/fileInput/fileInput.entry.less\";\nimport { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createDropzone, type DropzoneOptions } from \"../../../primitives/createDropzone\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface FileInputProps extends DropzoneOptions {\n  label?: string;\n  class?: string;\n  buttonClassName?: string;\n  disabled?: boolean;\n  /** Validation message shown below the control. */\n  error?: string;\n  /** Fired with the accepted files when the user picks them. */\n  onFilesSelected?: (files: File[]) => void;\n  onClick?: (e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function FileInput(props: FileInputProps): JSX.Element {\n  const [local, dropzoneOptions] = splitProps(props, [\n    \"label\",\n    \"onClick\",\n    \"onFilesSelected\",\n    \"class\",\n    \"buttonClassName\",\n    \"disabled\",\n    \"error\",\n    \"ref\",\n  ]);\n\n  const dropzone = createDropzone({\n    ...dropzoneOptions,\n    disabled: local.disabled,\n    onDropAccepted: (accepted, event) => {\n      local.onFilesSelected?.(accepted);\n      dropzoneOptions.onDropAccepted?.(accepted, event);\n    },\n  });\n\n  return (\n    <div\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-file-input\", { \"smwb-disabled\": local.disabled }, local.class)}\n      data-testid=\"file-input\"\n      {...dropzone.getRootProps()}\n    >\n      <button type=\"button\" class={cn(local.buttonClassName)} disabled={local.disabled} onClick={(e) => local.onClick?.(e)}>\n        {local.label}\n      </button>\n      <input ref={dropzone.inputRef} {...dropzone.getInputProps()} />\n      <Show when={local.error}>\n        <span class=\"smwb-file-input__error\" role=\"alert\">\n          {local.error}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default FileInput;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,sBAA4C;AACrD,SAAS,iBAA2B;AAe7B,SAAS,UAAU,OAAoC;AAC5D,QAAM,CAAC,OAAO,eAAe,IAAI,WAAW,OAAO;AAAA,IACjD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,eAAe;AAAA,IAC9B,GAAG;AAAA,IACH,UAAU,MAAM;AAAA,IAChB,gBAAgB,CAAC,UAAU,UAAU;AACnC,YAAM,kBAAkB,QAAQ;AAChC,sBAAgB,iBAAiB,UAAU,KAAK;AAAA,IAClD;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,GAAG,MAAM,KAAK;AAAA,IAC7E,YAAY;AAAA,QACR,SAAS,aAAa;AAAA,GAC3B;AAAA,MACC,CAAC,OAAO,KAAK,SAAS,OAAO,GAAG,MAAM,eAAe,GAAG,UAAU,MAAM,UAAU,SAAS,CAAC,MAAM,MAAM,UAAU,CAAC,GAAG;AAAA,SACnH,MAAM,MAAM;AAAA,MACf,EAFC,OAEQ;AAAA,MACT,CAAC,MAAM,KAAK,SAAS,cAAc,SAAS,cAAc,GAAG,EAAE;AAAA,MAC/D,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,QACvB,CAAC,KAAK,MAAM,yBAAyB,KAAK,QAAQ;AAAA,WAC/C,MAAM,MAAM;AAAA,QACf,EAFC,KAEM;AAAA,MACT,EAJC,KAIM;AAAA,IACT,EAfC;AAiBL;AAEA,IAAO,oBAAQ;","names":[],"file":"fileInput.jsx"}

package/dist/source/components/inputs/fileInput/index.js

@@ -0,0 +1,6 @@
+import { FileInput, default as default2 } from "./fileInput";
+export {
+  FileInput,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/fileInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/fileInput/index.ts"],
+  "sourcesContent": ["export { FileInput, default } from \"./fileInput\";\nexport type { FileInputProps } from \"./fileInput\";\n"],
+  "mappings": "AAAA,SAAS,WAAW,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/inputs/floatingButton/floatingButton.jsx

@@ -0,0 +1,31 @@
+import "@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less";
+import { mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Ripple } from "../../base/ripple";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function FloatingButton(props) {
+  const merged = mergeProps(
+    { variant: "default", size: "medium", color: "primary", type: "button" },
+    props
+  );
+  const [local, rest] = splitProps(merged, ["children", "class", "variant", "size", "color", "ref"]);
+  let rippleActions;
+  const onPointerDown = (event) => {
+    rippleActions?.onRipple(event);
+  };
+  return <button
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    class={cn("smwb-fab", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}
+    onPointerDown={onPointerDown}
+  >
+      {local.children}
+      <Ripple actionRef={(actions) => rippleActions = actions} />
+    </button>;
+}
+var floatingButton_default = FloatingButton;
+export {
+  FloatingButton,
+  floatingButton_default as default
+};
+//# sourceMappingURL=floatingButton.jsx.map

package/dist/source/components/inputs/floatingButton/floatingButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function FloatingButton(props: ParentProps<FloatingButtonProps>): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"default\" as const, size: \"medium\" as const, color: \"primary\" as FloatingButtonColor, type: \"button\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\"children\", \"class\", \"variant\", \"size\", \"color\", \"ref\"]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-fab\", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </button>\n  );\n}\n\nexport default FloatingButton;\n"],"mappings":"AAAA,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAY7B,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,WAAoB,MAAM,UAAmB,OAAO,WAAkC,MAAM,SAAkB;AAAA,IACzH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,SAAS,WAAW,QAAQ,SAAS,KAAK,CAAC;AAEjG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,QAAQ,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI,IAAI,kBAAkB,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,IACjH,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EARC;AAUL;AAEA,IAAO,yBAAQ;","names":[],"file":"floatingButton.jsx"}

package/dist/source/components/inputs/floatingButton/index.js

@@ -0,0 +1,6 @@
+import { FloatingButton, default as default2 } from "./floatingButton";
+export {
+  FloatingButton,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/floatingButton/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/floatingButton/index.ts"],
+  "sourcesContent": ["export { FloatingButton, default } from \"./floatingButton\";\nexport type { FloatingButtonProps, FloatingButtonColor } from \"./floatingButton\";\n"],
+  "mappings": "AAAA,SAAS,gBAAgB,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/inputs/radioButton/index.js

@@ -0,0 +1,6 @@
+import { RadioButton, default as default2 } from "./radioButton";
+export {
+  RadioButton,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/radioButton/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/radioButton/index.ts"],
+  "sourcesContent": ["export { RadioButton, default } from \"./radioButton\";\nexport type { RadioButtonProps } from \"./radioButton\";\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/inputs/radioButton/radioButton.jsx

@@ -0,0 +1,76 @@
+import "@smwb/ui-styles/less/components/radioButton/radioButton.entry.less";
+import { Show, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { TextFieldWrapper } from "../textField/textFieldWrapper";
+import { createId } from "../../../primitives/createId";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function RadioButton(props) {
+  const merged = mergeProps({ size: "medium", color: "primary" }, props);
+  const [local, args] = splitProps(merged, [
+    "label",
+    "disabled",
+    "readOnly",
+    "required",
+    "name",
+    "id",
+    "size",
+    "color",
+    "helperText",
+    "error",
+    "onChange",
+    "class",
+    "ref"
+  ]);
+  const id = createId(local.id);
+  const handleChange = (event) => {
+    if (local.readOnly) {
+      event.preventDefault();
+      return;
+    }
+    const value = props.value !== void 0 ? props.value : event.currentTarget.checked;
+    local.onChange?.(event, value, props);
+  };
+  return <TextFieldWrapper
+    helperText={local.helperText}
+    disabled={local.disabled}
+    error={local.error}
+    class="smwb-text-field-checkbox"
+  >
+      <label
+    for={id}
+    class={cn("smwb-radio", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {
+      "smwb-disabled": local.disabled,
+      "smwb-readonly": local.readOnly
+    })}
+  >
+        <span class="smwb-radio__wrapper">
+          <input
+    id={id}
+    name={local.name}
+    disabled={local.disabled}
+    readonly={local.readOnly}
+    required={local.required}
+    aria-invalid={local.error || void 0}
+    aria-required={local.required || void 0}
+    class={cn("smwb-radio__input", local.class)}
+    type="radio"
+    data-testid="radio"
+    ref={mergeRefs(local.ref)}
+    {...args}
+    onChange={handleChange}
+  />
+          <span class={cn("smwb-radio__btn", { "smwb-disabled": local.disabled })} />
+          <span class={cn("smwb-radio__bg", { "smwb-disabled": local.disabled })} />
+        </span>
+        <Show when={local.label}>
+          <span class="smwb-radio__label">{local.label}</span>
+        </Show>
+      </label>
+    </TextFieldWrapper>;
+}
+var radioButton_default = RadioButton;
+export {
+  RadioButton,
+  radioButton_default as default
+};
+//# sourceMappingURL=radioButton.jsx.map

package/dist/source/components/inputs/radioButton/radioButton.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/radioButton/radioButton.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: JSX.Element;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: SelectionChangeEvent,\n    value: string | number | string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"class\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    const value = props.value !== undefined ? (props.value as string | number | string[]) : event.currentTarget.checked;\n    local.onChange?.(event, value, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n          \"smwb-disabled\": local.disabled,\n          \"smwb-readonly\": local.readOnly,\n        })}\n      >\n        <span class=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={local.name}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            class={cn(\"smwb-radio__input\", local.class)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n          <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-radio__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default RadioButton;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAwB7B,SAAS,YAAY,OAAsC;AAChE,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,UAAU,SAAa,MAAM,QAAuC,MAAM,cAAc;AAC5G,UAAM,WAAW,OAAO,OAAO,KAAK;AAAA,EACtC;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,cAAc,mBAAmB,MAAM,IAAI,IAAI,oBAAoB,MAAM,KAAK,IAAI;AAAA,MAC1F,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,sBAAsB;AAAA,UAChC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,OAAO,GAAG,qBAAqB,MAAM,KAAK;AAAA,IAC1C,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,UAC3E,CAAC,KAAK,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,QAC5E,EAlBC,KAkBM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,qBAAqB,MAAM,MAAM,EAA5C,KAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,MACT,EA7BC,MA6BO;AAAA,IACV,EApCC;AAsCL;AAEA,IAAO,sBAAQ;","names":[],"file":"radioButton.jsx"}

package/dist/source/components/inputs/rating/index.js

@@ -0,0 +1,6 @@
+import { Rating, default as default2 } from "./rating";
+export {
+  Rating,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/rating/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/rating/index.ts"],
+  "sourcesContent": ["export { Rating, default } from \"./rating\";\nexport type { RatingProps, RatingColor } from \"./rating\";\n"],
+  "mappings": "AAAA,SAAS,QAAQ,WAAAA,gBAAe;",
+  "names": ["default"]
+}

package/dist/source/components/inputs/rating/rating.jsx

@@ -0,0 +1,125 @@
+import "@smwb/ui-styles/less/components/rating/rating.entry.less";
+import { For, Show, createSignal, mergeProps, splitProps } from "solid-js";
+import cn from "clsx";
+import { Icon } from "../../base/icon";
+import { createControllableState } from "../../../primitives/createControllableState";
+import { mergeRefs } from "../../../primitives/mergeRefs";
+function Rating(props) {
+  const merged = mergeProps(
+    {
+      defaultValue: 0,
+      max: 5,
+      precision: 1,
+      readOnly: false,
+      disabled: false,
+      size: 28,
+      color: "primary"
+    },
+    props
+  );
+  const [local] = splitProps(merged, [
+    "class",
+    "value",
+    "defaultValue",
+    "max",
+    "precision",
+    "readOnly",
+    "disabled",
+    "size",
+    "icon",
+    "emptyIcon",
+    "name",
+    "color",
+    "error",
+    "helperText",
+    "id",
+    "onChange",
+    "ref"
+  ]);
+  const [current, setCurrent] = createControllableState({
+    value: () => local.value,
+    defaultValue: local.defaultValue,
+    onChange: (next) => local.onChange?.(next)
+  });
+  const [hover, setHover] = createSignal(null);
+  const display = () => hover() ?? current();
+  const interactive = () => !local.readOnly && !local.disabled;
+  const valueFromEvent = (event, starIndex) => {
+    if (local.precision === 1) {
+      return starIndex + 1;
+    }
+    const { left, width } = event.currentTarget.getBoundingClientRect();
+    const isLeftHalf = event.clientX - left < width / 2;
+    return starIndex + (isLeftHalf ? 0.5 : 1);
+  };
+  const handleSelect = (event, starIndex) => {
+    if (!interactive()) return;
+    setCurrent(valueFromEvent(event, starIndex));
+  };
+  const commit = (next) => {
+    setCurrent(Math.max(0, Math.min(local.max, next)));
+  };
+  const handleKeyDown = (event) => {
+    if (!interactive()) return;
+    if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+      event.preventDefault();
+      commit(current() + local.precision);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+      event.preventDefault();
+      commit(current() - local.precision);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      commit(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      commit(local.max);
+    }
+  };
+  const filledIcon = () => local.icon ?? <Icon name="star" fill={1} size={local.size} />;
+  const blankIcon = () => local.emptyIcon ?? <Icon name="star" size={local.size} />;
+  return <span
+    ref={mergeRefs(local.ref)}
+    id={local.id}
+    class={cn(
+      "smwb-rating",
+      { "smwb-rating_readonly": local.readOnly, "smwb-rating_disabled": local.disabled, "smwb-rating_error": local.error },
+      local.color !== "primary" && `smwb-rating_color-${local.color}`,
+      local.class
+    )}
+    data-testid="rating"
+    role="img"
+    aria-label={`${current()} of ${local.max}`}
+    tabindex={interactive() ? 0 : void 0}
+    onKeyDown={interactive() ? handleKeyDown : void 0}
+  >
+      <For each={Array.from({ length: local.max }, (_, index) => index)}>
+        {(index) => {
+    const fillRatio = () => Math.max(0, Math.min(1, display() - index));
+    return <span
+      class="smwb-rating__item"
+      style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? "pointer" : "default" }}
+      onClick={(event) => handleSelect(event, index)}
+      onMouseMove={interactive() ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1) : void 0}
+      onMouseLeave={interactive() ? () => setHover(null) : void 0}
+    >
+              <span class="smwb-rating__icon smwb-rating__icon_empty">{blankIcon()}</span>
+              <span class="smwb-rating__icon smwb-rating__icon_filled" style={{ width: `${fillRatio() * 100}%` }}>
+                {filledIcon()}
+              </span>
+            </span>;
+  }}
+      </For>
+      <Show when={local.name}>
+        <input type="hidden" name={local.name} value={current()} />
+      </Show>
+      <Show when={local.helperText != null && local.helperText !== false}>
+        <span class={cn("smwb-rating__helper", local.error && "smwb-rating__helper_error")}>{local.helperText}</span>
+      </Show>
+    </span>;
+}
+var rating_default = Rating;
+export {
+  Rating,
+  rating_default as default
+};
+//# sourceMappingURL=rating.jsx.map

package/dist/source/components/inputs/rating/rating.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/rating/rating.entry.less\";\nimport { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  class?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon. */\n  icon?: JSX.Element;\n  /** Empty icon. */\n  emptyIcon?: JSX.Element;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: JSX.Element;\n  id?: string;\n  onChange?: (value: number) => void;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      defaultValue: 0,\n      max: 5,\n      precision: 1 as 1 | 0.5,\n      readOnly: false,\n      disabled: false,\n      size: 28,\n      color: \"primary\" as RatingColor,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"max\",\n    \"precision\",\n    \"readOnly\",\n    \"disabled\",\n    \"size\",\n    \"icon\",\n    \"emptyIcon\",\n    \"name\",\n    \"color\",\n    \"error\",\n    \"helperText\",\n    \"id\",\n    \"onChange\",\n    \"ref\",\n  ]);\n\n  const [current, setCurrent] = createControllableState<number>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (next) => local.onChange?.(next),\n  });\n  const [hover, setHover] = createSignal<number | null>(null);\n\n  const display = (): number => hover() ?? current();\n  const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n  const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n    if (local.precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setCurrent(valueFromEvent(event, starIndex));\n  };\n\n  const commit = (next: number): void => {\n    setCurrent(Math.max(0, Math.min(local.max, next)));\n  };\n\n  const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!interactive()) return;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current() + local.precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current() - local.precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(local.max);\n    }\n  };\n\n  const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n  const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n  return (\n    <span\n      ref={mergeRefs(local.ref)}\n      id={local.id}\n      class={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n        local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n        local.class\n      )}\n      data-testid=\"rating\"\n      role=\"img\"\n      aria-label={`${current()} of ${local.max}`}\n      tabindex={interactive() ? 0 : undefined}\n      onKeyDown={interactive() ? handleKeyDown : undefined}\n    >\n      <For each={Array.from({ length: local.max }, (_, index) => index)}>\n        {(index) => {\n          const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n          return (\n            <span\n              class=\"smwb-rating__item\"\n              style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? \"pointer\" : \"default\" }}\n              onClick={(event) => handleSelect(event, index)}\n              onMouseMove={\n                interactive()\n                  ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1)\n                  : undefined\n              }\n              onMouseLeave={interactive() ? () => setHover(null) : undefined}\n            >\n              <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n              <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() * 100}%` }}>\n                {filledIcon()}\n              </span>\n            </span>\n          );\n        }}\n      </For>\n      <Show when={local.name}>\n        <input type=\"hidden\" name={local.name} value={current()} />\n      </Show>\n      <Show when={local.helperText != null && (local.helperText as unknown) !== false}>\n        <span class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>{local.helperText}</span>\n      </Show>\n    </span>\n  );\n}\n\nexport default Rating;\n"],"mappings":"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","names":[],"file":"rating.jsx"}

package/dist/source/components/inputs/selectField/dropdownMenu.jsx

@@ -0,0 +1,141 @@
+import { For, Show, createEffect, createSignal, onCleanup } from "solid-js";
+import { Portal, isServer } from "solid-js/web";
+import { Menu, MenuDivider, MenuItem } from "../../navigation/menu";
+import { TextField } from "../textField";
+import { ProgressIndicator } from "../../feedBack/progressIndicator";
+import { createVirtualList } from "../../../primitives/createVirtualList";
+function DropdownMenu(props) {
+  const valueArray = () => Array.isArray(props.value) ? props.value : [props.value];
+  const hasGroups = () => props.items.some((i) => !!i.group);
+  const itemHeight = () => props.itemHeight ?? 40;
+  const viewportHeight = () => props.menuMaxHeight || 240;
+  const useVirtual = () => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;
+  const virtual = createVirtualList({
+    itemCount: () => useVirtual() ? props.items.length : 0,
+    itemHeight,
+    viewportHeight
+  });
+  const [menuMinWidth, setMenuMinWidth] = createSignal();
+  createEffect(() => {
+    const anchor = props.anchorElement();
+    if (props.isOpen && anchor) setMenuMinWidth(anchor.clientWidth);
+  });
+  createEffect(() => {
+    if (!props.isOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") props.onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
+  const toRows = (list) => {
+    const out = [];
+    let lastGroup;
+    for (const el of list) {
+      if (hasGroups() && el.group !== lastGroup) {
+        lastGroup = el.group;
+        out.push({ kind: "group", group: el.group });
+      }
+      out.push({ kind: "item", item: el });
+    }
+    return out;
+  };
+  const renderItem = (el) => <MenuItem
+    value={el.value}
+    disabled={el.disabled}
+    selected={!!valueArray().find((v) => v === el.value)}
+    onClick={(e) => {
+      if (!el.disabled) props.onItemClick(e, el);
+    }}
+    optionRenderer={props.optionRenderer}
+  >
+      {el.text}
+      <Show when={el.helperText}>
+        <span class="smwb-select-field__option__helper-text">{el.helperText}</span>
+      </Show>
+    </MenuItem>;
+  const renderRow = (row) => row.kind === "group" ? <li class="smwb-select-field__group-label" role="presentation">
+        {row.group}
+      </li> : renderItem(row.item);
+  const menuStyle = () => ({
+    ...menuMinWidth() ? { "min-width": `${menuMinWidth()}px` } : {},
+    ...props.menuMaxHeight ? { "max-height": `${props.menuMaxHeight}px`, "overflow-y": "auto" } : {}
+  });
+  return <Portal mount={isServer ? void 0 : props.container ?? document.body}>
+      <Menu
+    isOpen={props.isOpen}
+    onClose={() => props.onClose()}
+    anchorElement={props.anchorElement()}
+    middleware={props.menuMiddleware}
+    style={menuStyle()}
+  >
+        <Show when={props.search}>
+          <li class="smwb-select-field__menu-search">
+            <TextField
+    class="smwb-select-field__menu-search-input"
+    type="text"
+    placeholder="Найти..."
+    value={props.searchValue}
+    onChange={(e) => props.onSearchInputChange?.(e)}
+    fullWidth
+  />
+          </li>
+          <MenuDivider />
+        </Show>
+
+        <Show when={props.isLoading}>
+          <div class="smwb-select-field__menu-loading">
+            <ProgressIndicator type="indeterminate" variant="circular" class="smwb-select-field__menu__loader" />
+          </div>
+        </Show>
+
+        <Show when={!props.isLoading}>
+          <Show
+    when={useVirtual()}
+    fallback={<Show
+      when={props.items.length > 0}
+      fallback={<Show when={!props.createOption}>
+                    <li class="smwb-select-field__empty-items">{props.menuNoItemsMessage || "\u041E\u043F\u0446\u0438\u0439 \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E."}</li>
+                  </Show>}
+    >
+                <For each={toRows(props.items)}>{(row) => renderRow(row)}</For>
+              </Show>}
+  >
+            <li role="presentation" class="smwb-select-field__virtual-viewport">
+              <div
+    class="smwb-select-field__virtual-scroller"
+    style={{ "max-height": `${viewportHeight()}px`, "overflow-y": "auto" }}
+    onScroll={virtual.onScroll}
+  >
+                <div style={{ height: `${virtual.totalHeight()}px`, position: "relative" }}>
+                  <ul
+    role="presentation"
+    class="smwb-select-field__virtual-list"
+    style={{ transform: `translateY(${virtual.offsetY()}px)`, "list-style": "none", margin: "0", padding: "0" }}
+  >
+                    <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>{(el) => renderItem(el)}</For>
+                  </ul>
+                </div>
+              </div>
+            </li>
+          </Show>
+        </Show>
+
+        <Show when={props.createOption}>
+          {(createOption) => <MenuItem
+    value="__create__"
+    onClick={(e) => createOption().onCreate(e)}
+    class="smwb-select-field__create-option"
+  >
+              {createOption().text}
+            </MenuItem>}
+        </Show>
+      </Menu>
+    </Portal>;
+}
+var dropdownMenu_default = DropdownMenu;
+export {
+  DropdownMenu,
+  dropdownMenu_default as default
+};
+//# sourceMappingURL=dropdownMenu.jsx.map

package/dist/source/components/inputs/selectField/dropdownMenu.jsx.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/inputs/selectField/dropdownMenu.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createEffect, createSignal, onCleanup } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport type { Middleware } from \"@floating-ui/dom\";\nimport { Menu, MenuDivider, MenuItem } from \"../../navigation/menu\";\nimport { TextField } from \"../textField\";\nimport { ProgressIndicator } from \"../../feedBack/progressIndicator\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface DropdownItem {\n  key?: string | number;\n  text: string;\n  value: string | number | undefined | null;\n  helperText?: string;\n  disabled?: boolean;\n  /** Optional group label; consecutive items sharing it get a group header. */\n  group?: string;\n}\n\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype ItemEvent = Event & { currentTarget: Element; target: Element };\n\nexport interface DropdownItemProps {\n  menuMaxHeight?: number | undefined;\n  menuMiddleware?: Middleware[] | undefined;\n  menuNoItemsMessage?: JSX.Element;\n  search?: boolean | undefined;\n  onSearchInputChange?: ((event: SearchEvent) => void) | undefined;\n  items: DropdownItem[];\n  searchValue?: string | number | undefined;\n  isOpen: boolean;\n  onClose: () => void;\n  anchorElement: Accessor<HTMLElement | null>;\n  value?: undefined | null | string | number | (undefined | null | string | number)[];\n  onItemClick: (event: ItemEvent, item: DropdownItem) => void;\n  isLoading?: boolean | undefined;\n  optionRenderer?: ((args: import(\"../../navigation/menu\").MenuItemProps) => JSX.Element) | undefined;\n  container?: HTMLElement | undefined;\n  createOption?: { text: JSX.Element; onCreate: (event: ItemEvent) => void } | undefined;\n  virtualized?: boolean | undefined;\n  itemHeight?: number | undefined;\n}\n\ntype Row = { kind: \"group\"; group?: string | undefined } | { kind: \"item\"; item: DropdownItem };\n\nexport function DropdownMenu(props: DropdownItemProps): JSX.Element {\n  const valueArray = (): Array<string | number | undefined | null> =>\n    Array.isArray(props.value) ? props.value : [props.value];\n  const hasGroups = (): boolean => props.items.some((i) => !!i.group);\n  const itemHeight = (): number => props.itemHeight ?? 40;\n  const viewportHeight = (): number => props.menuMaxHeight || 240;\n  const useVirtual = (): boolean => !!props.virtualized && !hasGroups() && !props.isLoading && props.items.length > 0;\n\n  const virtual = createVirtualList({\n    itemCount: () => (useVirtual() ? props.items.length : 0),\n    itemHeight,\n    viewportHeight,\n  });\n\n  const [menuMinWidth, setMenuMinWidth] = createSignal<number>();\n\n  createEffect(() => {\n    const anchor = props.anchorElement();\n    if (props.isOpen && anchor) setMenuMinWidth(anchor.clientWidth);\n  });\n\n  createEffect(() => {\n    if (!props.isOpen) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") props.onClose();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const toRows = (list: DropdownItem[]): Row[] => {\n    const out: Row[] = [];\n    let lastGroup: string | undefined;\n    for (const el of list) {\n      if (hasGroups() && el.group !== lastGroup) {\n        lastGroup = el.group;\n        out.push({ kind: \"group\", group: el.group });\n      }\n      out.push({ kind: \"item\", item: el });\n    }\n    return out;\n  };\n\n  const renderItem = (el: DropdownItem): JSX.Element => (\n    <MenuItem\n      value={el.value}\n      disabled={el.disabled}\n      selected={!!valueArray().find((v) => v === el.value)}\n      onClick={(e) => {\n        if (!el.disabled) props.onItemClick(e as ItemEvent, el);\n      }}\n      optionRenderer={props.optionRenderer}\n    >\n      {el.text}\n      <Show when={el.helperText}>\n        <span class=\"smwb-select-field__option__helper-text\">{el.helperText}</span>\n      </Show>\n    </MenuItem>\n  );\n\n  const renderRow = (row: Row): JSX.Element =>\n    row.kind === \"group\" ? (\n      <li class=\"smwb-select-field__group-label\" role=\"presentation\">\n        {row.group}\n      </li>\n    ) : (\n      renderItem(row.item)\n    );\n\n  const menuStyle = (): JSX.CSSProperties => ({\n    ...(menuMinWidth() ? { \"min-width\": `${menuMinWidth()}px` } : {}),\n    ...(props.menuMaxHeight ? { \"max-height\": `${props.menuMaxHeight}px`, \"overflow-y\": \"auto\" } : {}),\n  });\n\n  return (\n    <Portal mount={(isServer ? undefined : (props.container ?? document.body)) as Node}>\n      <Menu\n        isOpen={props.isOpen}\n        onClose={() => props.onClose()}\n        anchorElement={props.anchorElement()}\n        middleware={props.menuMiddleware}\n        style={menuStyle()}\n      >\n        <Show when={props.search}>\n          <li class=\"smwb-select-field__menu-search\">\n            <TextField\n              class=\"smwb-select-field__menu-search-input\"\n              type=\"text\"\n              placeholder=\"Найти...\"\n              value={props.searchValue}\n              onChange={(e) => props.onSearchInputChange?.(e as SearchEvent)}\n              fullWidth\n            />\n          </li>\n          <MenuDivider />\n        </Show>\n\n        <Show when={props.isLoading}>\n          <div class=\"smwb-select-field__menu-loading\">\n            <ProgressIndicator type=\"indeterminate\" variant=\"circular\" class=\"smwb-select-field__menu__loader\" />\n          </div>\n        </Show>\n\n        <Show when={!props.isLoading}>\n          <Show\n            when={useVirtual()}\n            fallback={\n              <Show\n                when={props.items.length > 0}\n                fallback={\n                  <Show when={!props.createOption}>\n                    <li class=\"smwb-select-field__empty-items\">{props.menuNoItemsMessage || \"Опций не найдено.\"}</li>\n                  </Show>\n                }\n              >\n                <For each={toRows(props.items)}>{(row) => renderRow(row)}</For>\n              </Show>\n            }\n          >\n            <li role=\"presentation\" class=\"smwb-select-field__virtual-viewport\">\n              <div\n                class=\"smwb-select-field__virtual-scroller\"\n                style={{ \"max-height\": `${viewportHeight()}px`, \"overflow-y\": \"auto\" }}\n                onScroll={virtual.onScroll}\n              >\n                <div style={{ height: `${virtual.totalHeight()}px`, position: \"relative\" }}>\n                  <ul\n                    role=\"presentation\"\n                    class=\"smwb-select-field__virtual-list\"\n                    style={{ transform: `translateY(${virtual.offsetY()}px)`, \"list-style\": \"none\", margin: \"0\", padding: \"0\" }}\n                  >\n                    <For each={props.items.slice(virtual.startIndex(), virtual.endIndex())}>{(el) => renderItem(el)}</For>\n                  </ul>\n                </div>\n              </div>\n            </li>\n          </Show>\n        </Show>\n\n        <Show when={props.createOption}>\n          {(createOption) => (\n            <MenuItem\n              value=\"__create__\"\n              onClick={(e) => createOption().onCreate(e as ItemEvent)}\n              class=\"smwb-select-field__create-option\"\n            >\n              {createOption().text}\n            </MenuItem>\n          )}\n        </Show>\n      </Menu>\n    </Portal>\n  );\n}\n\nexport default DropdownMenu;\n"],"mappings":"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","names":[],"file":"dropdownMenu.jsx"}

package/dist/source/components/inputs/selectField/index.js

@@ -0,0 +1,8 @@
+import { SelectField, default as default2 } from "./selectField";
+import { DropdownMenu } from "./dropdownMenu";
+export {
+  DropdownMenu,
+  SelectField,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/source/components/inputs/selectField/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/inputs/selectField/index.ts"],
+  "sourcesContent": ["export { SelectField, default } from \"./selectField\";\nexport type { SelectFieldProps, OnSelectChange } from \"./selectField\";\nexport { DropdownMenu } from \"./dropdownMenu\";\nexport type { DropdownItem, DropdownItemProps } from \"./dropdownMenu\";\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAAA,gBAAe;AAErC,SAAS,oBAAoB;",
+  "names": ["default"]
+}