@elmethis/core 1.0.0-alpha.18 → 1.0.0-alpha.180

package/dist/components/form/ElmCheckbox.vue2.mjs

@@ -0,0 +1,177 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, createCommentVNode, normalizeStyle } from "vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+const _hoisted_1 = { style: {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem"
+} };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmCheckbox",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    loading: { type: Boolean, default: false },
+    disable: { type: Boolean }
+  }, {
+    "modelValue": { type: Boolean, ...{} },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const isChecked = useModel(__props, "modelValue");
+    function toggleCheck() {
+      if (!props.loading && !props.disable) {
+        isChecked.value = !isChecked.value;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          _ctx.$style.container,
+          {
+            [_ctx.$style["container--disable"]]: props.disable
+          }
+        ]),
+        onClick: toggleCheck
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          (openBlock(), createElementBlock("svg", {
+            width: "24",
+            height: "24",
+            class: normalizeClass(_ctx.$style.checkbox)
+          }, [
+            createElementVNode("circle", {
+              cx: "0",
+              cy: "0",
+              r: "2",
+              class: normalizeClass(_ctx.$style.loading),
+              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
+            }, _cache[0] || (_cache[0] = [
+              createElementVNode("animate", {
+                attributeName: "cx",
+                values: "4; 20; 20; 4; 4",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1),
+              createElementVNode("animate", {
+                attributeName: "cy",
+                values: "4; 4; 20; 20; 4",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1)
+            ]), 6),
+            createElementVNode("circle", {
+              cx: "20",
+              cy: "20",
+              r: "2",
+              class: normalizeClass(_ctx.$style.loading),
+              style: normalizeStyle({ opacity: props.loading ? 1 : 0 })
+            }, _cache[1] || (_cache[1] = [
+              createElementVNode("animate", {
+                attributeName: "cx",
+                values: "20; 4; 4; 20; 20",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1),
+              createElementVNode("animate", {
+                attributeName: "cy",
+                values: "20; 20; 4; 4; 20",
+                dur: "1.2s",
+                repeatCount: "indefinite",
+                keySplines: "0.25 0.1 0.25 1; 0.42 0 0.58 1; 0.25 0.1 0.25 1; 0.42 0 0.58 1",
+                calcMode: "spline"
+              }, null, -1)
+            ]), 6),
+            createElementVNode("rect", {
+              x: "4",
+              y: "4",
+              width: "16",
+              height: "16",
+              class: normalizeClass([
+                _ctx.$style.rect,
+                {
+                  [_ctx.$style["rect--checked"]]: isChecked.value,
+                  [_ctx.$style["rect--loading"]]: props.loading
+                }
+              ]),
+              strokeWidth: "0.8"
+            }, null, 2),
+            isChecked.value ? (openBlock(), createElementBlock("polyline", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["check-line"]),
+              points: "5,12 10,17 19,8",
+              strokeWidth: "1.5",
+              fill: "transparent"
+            }, null, 2)) : createCommentVNode("", true),
+            _cache[2] || (_cache[2] = createElementVNode("line", {
+              x1: "0",
+              y1: "1",
+              x2: "4",
+              y2: "1",
+              strokeWidth: "2",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[3] || (_cache[3] = createElementVNode("line", {
+              x1: "4",
+              y1: "0",
+              x2: "24",
+              y2: "0",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[4] || (_cache[4] = createElementVNode("line", {
+              x1: "0",
+              y1: "4",
+              x2: "0",
+              y2: "16",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[5] || (_cache[5] = createElementVNode("line", {
+              x1: "0",
+              y1: "18",
+              x2: "0",
+              y2: "20",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[6] || (_cache[6] = createElementVNode("line", {
+              x1: "0",
+              y1: "24",
+              x2: "20",
+              y2: "24",
+              strokeWidth: "1",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[7] || (_cache[7] = createElementVNode("line", {
+              x1: "20",
+              y1: "23",
+              x2: "24",
+              y2: "23",
+              strokeWidth: "1.5",
+              fill: "transparent"
+            }, null, -1)),
+            _cache[8] || (_cache[8] = createElementVNode("line", {
+              x1: "24",
+              y1: "4",
+              x2: "24",
+              y2: "20",
+              style: { strokeWidth: 1 },
+              fill: "transparent"
+            }, null, -1))
+          ], 2)),
+          createVNode(ElmInlineText, { text: _ctx.label }, null, 8, ["text"])
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmCheckbox.vue3.mjs

@@ -0,0 +1,34 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._container_101ok_1{width:-moz-fit-content;width:fit-content;font-family:sans-serif;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:opacity .2s}._container_101ok_1:hover{opacity:.8}._container--disable_101ok_11{opacity:.45;cursor:not-allowed}._container--disable_101ok_11:hover{opacity:.45}._checkbox_101ok_19{stroke:#000c;fill:transparent}[data-theme=dark] ._checkbox_101ok_19{stroke:#fffc}._rect_101ok_27{transition:all .2s}._rect--loading_101ok_30{opacity:.3}._rect--checked_101ok_33{fill:#000c}[data-theme=dark] ._rect--checked_101ok_33{fill:#fffc}._loading_101ok_40{transition:opacity .2s;fill:#000000b3}[data-theme=dark] ._loading_101ok_40{fill:#ffffffb3}@keyframes _elmethis-checkbox-check-line_101ok_1{0%{stroke-dashoffset:100%}to{stroke-dashoffset:0%}}._check-line_101ok_56{stroke-dasharray:100%;animation-name:_elmethis-checkbox-check-line_101ok_1;animation-duration:.2s;animation-timing-function:ease-in-out;animation-delay:.1s;animation-fill-mode:both;transform-origin:center;stroke:#ffffffe6}[data-theme=dark] ._check-line_101ok_56{stroke:#000000e6}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_101ok_1";
+const checkbox = "_checkbox_101ok_19";
+const rect = "_rect_101ok_27";
+const loading = "_loading_101ok_40";
+const style0 = {
+  container,
+  "container--disable": "_container--disable_101ok_11",
+  checkbox,
+  rect,
+  "rect--loading": "_rect--loading_101ok_30",
+  "rect--checked": "_rect--checked_101ok_33",
+  loading,
+  "check-line": "_check-line_101ok_56",
+  "elmethis-checkbox-check-line": "_elmethis-checkbox-check-line_101ok_1"
+};
+export {
+  checkbox,
+  container,
+  style0 as default,
+  loading,
+  rect
+};

package/dist/components/form/ElmSwitch.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmSwitch } from './ElmSwitch.vue';
+declare const meta: Meta<typeof ElmSwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/form/ElmSwitch.vue.d.ts

@@ -0,0 +1,32 @@
+import { Property } from 'csstype';
+export interface ElmSwitchProps {
+    /**
+     * The color of the switch when checked.
+     */
+    color: string;
+    /**
+     * The size of the switch.
+     */
+    size: Property.Width;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+}
+type __VLS_Props = ElmSwitchProps;
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    color: string;
+    size: Property.Width;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmSwitch.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmSwitch.vue2.mjs";
+import style0 from "./ElmSwitch.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmSwitch as default
+};

package/dist/components/form/ElmSwitch.vue2.mjs

@@ -0,0 +1,61 @@
+import { defineComponent, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, createElementVNode, normalizeClass } from "vue";
+const _hoisted_1 = ["checked", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    color: { default: "#6987b8" },
+    size: { default: "18px" },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: false },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const checked = useModel(__props, "modelValue");
+    const handleClick = () => {
+      if (!props.disabled) checked.value = !checked.value;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        onClick: handleClick,
+        style: normalizeStyle({
+          "--color": _ctx.color,
+          "--padding": "2px",
+          "--size": _ctx.size,
+          "--width": "calc(var(--size) * 2 + var(--padding) * 2)"
+        })
+      }, [
+        createElementVNode("input", {
+          class: normalizeClass([_ctx.$style.switch]),
+          type: "checkbox",
+          checked: checked.value,
+          disabled: _ctx.disabled
+        }, null, 10, _hoisted_1),
+        createElementVNode("div", {
+          class: normalizeClass([
+            _ctx.$style.bar,
+            {
+              [_ctx.$style["bar--checked"]]: checked.value,
+              [_ctx.$style["bar--disabled"]]: _ctx.disabled
+            }
+          ])
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([
+              _ctx.$style.circle,
+              {
+                [_ctx.$style["circle--checked"]]: checked.value,
+                [_ctx.$style["circle--disabled"]]: _ctx.disabled
+              }
+            ])
+          }, null, 2)
+        ], 2)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmSwitch.vue3.mjs

@@ -0,0 +1,28 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._switch_y5v18_1{display:none}._bar_y5v18_5{z-index:0;padding:var(--padding);width:var(--width);height:var(--size);border-radius:calc((var(--size) + var(--padding)) / 2);position:relative;cursor:pointer;box-shadow:0 0 2px #0000001a;transition:opacity .3s,background-color .3s;background-color:#80808040}._bar--checked_y5v18_17{background-color:var(--color)}._bar--disabled_y5v18_20{cursor:not-allowed}._circle_y5v18_24{z-index:1;width:var(--size);height:var(--size);border-radius:50%;position:absolute;top:var(--padding);left:var(--padding);transition:transform .3s,opacity .3s,background-color .3s;background-color:#ffffffe6}._circle--checked_y5v18_35{transform:translate(calc(var(--width) - var(--size)))}._circle--disabled_y5v18_38{opacity:.5;background-color:gray}._circle_y5v18_24:hover{opacity:.8}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const bar = "_bar_y5v18_5";
+const circle = "_circle_y5v18_24";
+const style0 = {
+  "switch": "_switch_y5v18_1",
+  bar,
+  "bar--checked": "_bar--checked_y5v18_17",
+  "bar--disabled": "_bar--disabled_y5v18_20",
+  circle,
+  "circle--checked": "_circle--checked_y5v18_35",
+  "circle--disabled": "_circle--disabled_y5v18_38"
+};
+export {
+  bar,
+  circle,
+  style0 as default
+};

package/dist/components/form/ElmTextField.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmTextField } from './ElmTextField.vue';
+declare const meta: Meta<typeof ElmTextField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/form/ElmTextField.vue.d.ts

@@ -0,0 +1,30 @@
+import { VNode, FunctionalComponent } from 'vue';
+export interface ElmTextFieldProps {
+    label: string;
+    maxLength?: number;
+    suffix?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: VNode | FunctionalComponent;
+    isPassword?: boolean;
+    required?: boolean;
+}
+type __VLS_Props = ElmTextFieldProps;
+declare const __VLS_defaults: {
+    modelValue: string;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    required: boolean;
+    loading: boolean;
+    disabled: boolean;
+    isPassword: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTextField.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmTextField.vue2.mjs";
+import style0 from "./ElmTextField.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmTextField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmTextField as default
+};

package/dist/components/form/ElmTextField.vue2.mjs

@@ -0,0 +1,124 @@
+import { defineComponent, mergeModels, ref, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, resolveDynamicComponent, vModelDynamic, createVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+import { nanoid } from "nanoid";
+const _hoisted_1 = ["for"];
+const _hoisted_2 = ["id", "type", "placeholder", "disabled", "aria-required"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmTextField",
+  props: /* @__PURE__ */ mergeModels({
+    label: {},
+    maxLength: {},
+    suffix: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: {},
+    isPassword: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
+  }, {
+    "modelValue": { default: "" },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const id = nanoid();
+    const isFocused = ref(false);
+    const props = __props;
+    const input = useModel(__props, "modelValue");
+    const type = ref(props.isPassword ? "password" : "text");
+    const handleDelete = () => {
+      if (!props.loading && !props.disabled) input.value = "";
+    };
+    const handleVisibleSwitch = () => {
+      if (!props.loading && !props.disabled)
+        type.value = type.value === "text" ? "password" : "text";
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper),
+        style: normalizeStyle({
+          "--border-color": isFocused.value ? "#59b57c" : "transparent",
+          backgroundColor: _ctx.disabled || _ctx.loading ? "rgba(0,0,0,0.15)" : void 0
+        })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.header)
+        }, [
+          createElementVNode("label", {
+            for: unref(id),
+            class: normalizeClass(_ctx.$style.label),
+            style: normalizeStyle({ "--color": isFocused.value ? "#59b57c" : void 0 })
+          }, [
+            createElementVNode("span", null, toDisplayString(_ctx.label), 1),
+            _ctx.required ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.requierd)
+            }, "*", 2)) : createCommentVNode("", true)
+          ], 14, _hoisted_1),
+          _ctx.maxLength != null ? (openBlock(), createBlock(ElmInlineText, {
+            key: 0,
+            text: `${input.value.length} / ${_ctx.maxLength}`,
+            color: input.value.length > _ctx.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          }, null, 8, ["text", "color"])) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.body)
+        }, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
+            class: normalizeClass(_ctx.$style["left-icon"])
+          }, null, 8, ["class"])),
+          withDirectives(createElementVNode("input", {
+            id: unref(id),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => input.value = $event),
+            type: type.value,
+            class: normalizeClass(_ctx.$style.input),
+            placeholder: _ctx.placeholder,
+            onFocus: _cache[1] || (_cache[1] = ($event) => isFocused.value = true),
+            onBlur: _cache[2] || (_cache[2] = ($event) => isFocused.value = false),
+            disabled: _ctx.disabled || _ctx.loading,
+            style: normalizeStyle({
+              cursor: _ctx.disabled ? "not-allowed" : _ctx.loading ? "progress" : "auto"
+            }),
+            "aria-required": _ctx.required
+          }, null, 46, _hoisted_2), [
+            [vModelDynamic, input.value]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style["icon-box"])
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.suffix)
+            }, [
+              _ctx.suffix != null ? (openBlock(), createBlock(ElmInlineText, {
+                key: 0,
+                text: _ctx.suffix
+              }, null, 8, ["text"])) : createCommentVNode("", true)
+            ], 2),
+            _ctx.isPassword ? (openBlock(), createBlock(unref(Icon), {
+              key: 0,
+              icon: type.value === "text" ? "heroicons:eye" : "heroicons:eye-slash",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleVisibleSwitch
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
+            createVNode(unref(Icon), {
+              icon: "heroicons:backspace-16-solid",
+              class: normalizeClass(_ctx.$style.icon),
+              onClick: handleDelete
+            }, null, 8, ["class"])
+          ], 2)
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style.loading),
+          style: normalizeStyle({
+            opacity: _ctx.loading ? 0.2 : 0
+          })
+        }, null, 6)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/form/ElmTextField.vue3.mjs

@@ -0,0 +1,46 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("@keyframes _loading_bthl1_19{0%{transform-origin:0%;transform:scaleX(0)}40%{transform-origin:0%;transform:scaleX(1)}60%{transform-origin:100%;transform:scaleX(1)}to{transform-origin:100%;transform:scaleX(0)}}._loading_bthl1_19{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#6987b8;transition:opacity .2s;pointer-events:none;animation-name:_loading_bthl1_19;animation-iteration-count:infinite;animation-duration:1.6s}._wrapper_bthl1_33{overflow:hidden;position:relative;box-sizing:border-box;width:100%;padding:.25rem;border-radius:.25rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s,background-color .2s;border-style:solid;border-width:1px;border-color:var(--border-color);background-color:#fffc;box-shadow:0 0 .25rem #00000026}[data-theme=dark] ._wrapper_bthl1_33{background-color:#ffffff26;box-shadow:0 0 .25rem #000000bf}._header_bthl1_55{box-sizing:border-box;height:.75rem;padding:0 .25rem;display:flex;justify-content:space-between}._label_bthl1_63{display:inline;margin:0;padding:0;font-size:.75rem;line-height:.75rem;height:.75rem;vertical-align:top;transition:color .2s;color:#000000a6;color:var(--color, rgba(0, 0, 0, .65))}[data-theme=dark] ._label_bthl1_63{color:#ffffffa6;color:var(--color, rgba(255, 255, 255, .65))}._requierd_bthl1_78{padding-inline:.25rem;color:#c56565;font-weight:700}._body_bthl1_84{display:flex;justify-content:space-between;align-items:center;padding-right:.5rem}._left-icon_bthl1_91{margin:auto .25rem;width:24px;height:24px;display:flex;justify-content:center;align-items:center;opacity:.7}[data-theme=dark] ._left-icon_bthl1_91{filter:invert(1)}._input_bthl1_104{all:unset;box-sizing:border-box;padding:.5rem;width:100%;color:#000000b3;caret-color:#000000b3}._input_bthl1_104::-moz-placeholder{opacity:.5}._input_bthl1_104::placeholder{opacity:.5}[data-theme=dark] ._input_bthl1_104::-moz-placeholder{opacity:.7}[data-theme=dark] ._input_bthl1_104::placeholder{opacity:.7}._input_bthl1_104::-moz-selection{background-color:#000000b3;color:#ffffffb3}._input_bthl1_104::selection{background-color:#000000b3;color:#ffffffb3}[data-theme=dark] ._input_bthl1_104{color:#ffffffb3;caret-color:#ffffffb3}[data-theme=dark] ._input_bthl1_104::-moz-selection{background-color:#ffffffb3;color:#000000b3}[data-theme=dark] ._input_bthl1_104::selection{background-color:#ffffffb3;color:#000000b3}._icon-box_bthl1_131{display:flex;justify-content:space-between;align-items:center}._icon_bthl1_131{box-sizing:border-box;border-radius:50%;padding:.25rem;width:28px;height:28px;transition:background-color .2s;color:gray;cursor:pointer}._icon_bthl1_131:hover{background-color:#80808033}._suffix_bthl1_151{opacity:.6;padding:0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const loading = "_loading_bthl1_19";
+const wrapper = "_wrapper_bthl1_33";
+const header = "_header_bthl1_55";
+const label = "_label_bthl1_63";
+const requierd = "_requierd_bthl1_78";
+const body = "_body_bthl1_84";
+const input = "_input_bthl1_104";
+const icon = "_icon_bthl1_131";
+const suffix = "_suffix_bthl1_151";
+const style0 = {
+  loading,
+  wrapper,
+  header,
+  label,
+  requierd,
+  body,
+  "left-icon": "_left-icon_bthl1_91",
+  input,
+  "icon-box": "_icon-box_bthl1_131",
+  icon,
+  suffix
+};
+export {
+  body,
+  style0 as default,
+  header,
+  icon,
+  input,
+  label,
+  loading,
+  requierd,
+  suffix,
+  wrapper
+};

package/dist/components/form/ElmTotp.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmTotp } from './ElmTotp.vue';
+declare const meta: Meta<typeof ElmTotp>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;

package/dist/components/form/ElmTotp.vue.d.ts

@@ -0,0 +1,12 @@
+export interface ElmTotpProps {
+    length: number;
+    focusOnMount?: boolean;
+    loading?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ElmTotpProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTotpProps> & Readonly<{}>, {
+    loading: boolean;
+    focusOnMount: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    targetRef: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/form/ElmTotp.vue.mjs

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmTotp.vue2.mjs";
+import style0 from "./ElmTotp.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmTotp = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmTotp as default
+};