@mekari/pixel3-input 0.0.0

package/dist/chunk-62L6URRB.mjs

@@ -0,0 +1,32 @@
+import {
+  useInputGroup
+} from "./chunk-ME6YL7P6.mjs";
+import {
+  inputGroupProps
+} from "./chunk-ZQ2NFCFA.mjs";
+
+// src/input-group.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, computed, cloneVNode } from "vue";
+import { objectFilterUndefined, getChildren } from "@mekari/pixel3-utils";
+var MpInputGroup = defineComponent({
+  name: "MpInputGroup",
+  props: inputGroupProps,
+  setup(props, {
+    slots
+  }) {
+    const api = useInputGroup(props);
+    const children = computed(() => getChildren(slots));
+    const cloneChildren = computed(() => computed(() => children.value).value.map((vnode) => {
+      const overrideProps = objectFilterUndefined({
+        size: props.size
+      });
+      return cloneVNode(vnode, overrideProps);
+    }));
+    return () => _createVNode("div", api.value.rootProps, [cloneChildren.value]);
+  }
+});
+
+export {
+  MpInputGroup
+};

package/dist/chunk-AH5Q4AP2.mjs

@@ -0,0 +1,81 @@
+import {
+  useInput
+} from "./chunk-ME6YL7P6.mjs";
+import {
+  inputEmits,
+  inputProps
+} from "./chunk-ZQ2NFCFA.mjs";
+
+// src/input.tsx
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent, getCurrentInstance, onMounted, ref } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+var MpInput = defineComponent({
+  name: "MpInput",
+  props: inputProps,
+  emits: inputEmits,
+  setup(props, {
+    emit
+  }) {
+    const {
+      as: Component
+    } = props;
+    const api = useInput(props, emit);
+    const calcSpacing = ref({
+      left: 12,
+      right: 12
+    });
+    const calcPosition = ref({
+      right: 12
+    });
+    onMounted(() => {
+      var _a, _b, _c;
+      const node = (_c = (_b = (_a = getCurrentInstance()) == null ? void 0 : _a.parent) == null ? void 0 : _b.subTree) == null ? void 0 : _c.children[0].children;
+      let isClearable = false;
+      node == null ? void 0 : node.map((vnode) => {
+        var _a2, _b2, _c2, _d, _e, _f;
+        if (((_a2 = vnode.type) == null ? void 0 : _a2.name) === "MpInput") {
+          if ((_b2 = vnode.props) == null ? void 0 : _b2.hasOwnProperty("isClearable")) {
+            calcSpacing.value.right += 30;
+            isClearable = true;
+          }
+        }
+        if (((_c2 = vnode.type) == null ? void 0 : _c2.name) === "MpInputLeftAddon") {
+          calcSpacing.value.left += 30;
+          if ((_d = vnode.props) == null ? void 0 : _d.hasOwnProperty("hasBackground"))
+            calcSpacing.value.left += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
+        }
+        if (((_e = vnode.type) == null ? void 0 : _e.name) === "MpInputRightAddon") {
+          calcSpacing.value.right += 30;
+          if ((_f = vnode.props) == null ? void 0 : _f.hasOwnProperty("hasBackground")) {
+            calcSpacing.value.right += parseInt(getComputedStyle(vnode.el).width, 10) - 30;
+            if (isClearable)
+              calcPosition.value.right += parseInt(getComputedStyle(vnode.el).width, 10);
+          } else {
+            if (isClearable)
+              calcPosition.value.right += 30;
+          }
+        }
+      });
+    });
+    return () => {
+      var _a, _b;
+      return _createVNode("div", api.value.rootProps, [_createVNode(Component, _mergeProps(api.value.controlProps, {
+        "style": {
+          "--mp-input--padding-left": `${calcSpacing.value.left}px`,
+          "--mp-input--padding-right": `${calcSpacing.value.right}px`,
+          ...(_a = api.value.controlProps) == null ? void 0 : _a.style
+        }
+      }), null), !api.value.isReadOnly && !api.value.isDisabled && api.value.isClearable && _createVNode(MpButton, _mergeProps(api.value.clearProps, {
+        "style": {
+          "--mp-input--right": `${calcPosition.value.right}px`,
+          ...(_b = api.value.clearProps) == null ? void 0 : _b.style
+        }
+      }), null)]);
+    };
+  }
+});
+
+export {
+  MpInput
+};

package/dist/chunk-EF6JEV72.mjs

@@ -0,0 +1,58 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/input.machines.ts
+import { createMachine } from "xstate";
+function inputMachine(context) {
+  return createMachine({
+    /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AHArgFwMQGUBRAFQH0A1AQQBkBVQgbQAYBdRUdAe1mW2U9TsQAD0QBGAEwA6JrLnz5AdgA0IAJ7iJAXy2q0WPMQCaABUIUa9ZmyQguPPgKGiEEiYqkBWT00UAOADZPRQBmPwAWAE4Av1UNBDExEKlwzxCxTzFw8IDIiT9FAJ1dEFROCDghfRwhe15+QVsXEICpQrFFCXDfMKjcuPEklLSMrJy8gqLioA */
+    id: "input",
+    context: {
+      modelValue: "",
+      ...context
+    },
+    on: {
+      SET_VALUE: {
+        actions: "setValue"
+      }
+    },
+    predictableActionArguments: true
+  }, {
+    actions: {
+      setValue(ctx, evt) {
+        set.value(ctx, evt.value);
+      }
+    }
+  });
+}
+__name(inputMachine, "inputMachine");
+var set = {
+  value(ctx, value) {
+    ctx.modelValue = value;
+  }
+};
+function inputGroupMachine(context) {
+  return createMachine({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
+    id: "input-group",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputGroupMachine, "inputGroupMachine");
+function inputAddonMachine(context) {
+  return createMachine({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
+    id: "input-addon",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputAddonMachine, "inputAddonMachine");
+
+export {
+  inputMachine,
+  inputGroupMachine,
+  inputAddonMachine
+};

package/dist/chunk-JW2SLWRV.mjs

@@ -0,0 +1,59 @@
+import {
+  useInputAddon
+} from "./chunk-ME6YL7P6.mjs";
+import {
+  inputAddonProps
+} from "./chunk-ZQ2NFCFA.mjs";
+
+// src/input-addon.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpInputAddon = defineComponent({
+  name: "MpInputAddon",
+  props: inputAddonProps,
+  setup(props, {
+    slots
+  }) {
+    const api = useInputAddon(props);
+    return () => {
+      var _a;
+      return _createVNode("div", api.value.rootProps, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var MpInputLeftAddon = defineComponent({
+  name: "MpInputLeftAddon",
+  setup(_, {
+    slots
+  }) {
+    return () => _createVNode(MpInputAddon, {
+      "placement": "left"
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+var MpInputRightAddon = defineComponent({
+  name: "MpInputRightAddon",
+  setup(_, {
+    slots
+  }) {
+    return () => _createVNode(MpInputAddon, {
+      "placement": "right"
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+
+export {
+  MpInputAddon,
+  MpInputLeftAddon,
+  MpInputRightAddon
+};

package/dist/chunk-ME6YL7P6.mjs

@@ -0,0 +1,79 @@
+import {
+  inputAddonConnect,
+  inputConnect,
+  inputGroupConnect
+} from "./chunk-T766ACNL.mjs";
+import {
+  inputAddonMachine,
+  inputGroupMachine,
+  inputMachine
+} from "./chunk-EF6JEV72.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/input.hooks.ts
+import { computed, ref } from "vue";
+import { useMachine } from "@xstate/vue";
+import { useId } from "@mekari/pixel3-utils";
+import { inputSlotRecipe, inputGroupSlotRecipe, inputAddonSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var useInput = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(inputMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-${useId()}`,
+    onInput(evt) {
+      var _a2, _b;
+      emit("update:modelValue", (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
+      emit("input", evt, (_b = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _b.value);
+    },
+    onChange(evt) {
+      var _a2;
+      emit("change", evt, (_a2 = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a2.value);
+    },
+    onClear(evt) {
+      emit("clear", evt);
+    }
+  }));
+  const [inputProps] = inputSlotRecipe.splitVariantProps(context.value);
+  const classes = inputSlotRecipe(inputProps);
+  return computed(() => inputConnect(state.value, send, classes));
+}, "useInput");
+var useInputGroup = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(inputGroupMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-group-${useId()}`
+  }));
+  const [inputGroupProps] = inputGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = inputGroupSlotRecipe(inputGroupProps);
+  return computed(() => inputGroupConnect(state.value, send, classes));
+}, "useInputGroup");
+var useInputAddon = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(inputAddonMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-input-addon-${useId()}`
+  }));
+  const [inputAddonProps] = inputAddonSlotRecipe.splitVariantProps(context.value);
+  const classes = inputAddonSlotRecipe(inputAddonProps);
+  return computed(() => inputAddonConnect(state.value, send, classes));
+}, "useInputAddon");
+
+export {
+  useInput,
+  useInputGroup,
+  useInputAddon
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-T766ACNL.mjs

@@ -0,0 +1,127 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/input.connects.ts
+import { cx } from "@mekari/pixel3-styled-system/css";
+function inputConnect(state, send, classes) {
+  const {
+    id,
+    modelValue,
+    placeholder,
+    isReadOnly,
+    isDisabled,
+    isRequired,
+    isInvalid,
+    isFullWidth,
+    isClearable,
+    onInput,
+    onChange,
+    onClear
+  } = state.context;
+  return {
+    modelValue,
+    isReadOnly,
+    isDisabled,
+    isClearable,
+    rootProps: {
+      id,
+      class: cx(classes.root, "group"),
+      "data-is-full-width": isFullWidth,
+      "data-pixel-component": "MpInput"
+    },
+    controlProps: {
+      id: `${id}-control`,
+      value: modelValue,
+      placeholder,
+      readonly: isReadOnly,
+      disabled: isDisabled,
+      required: isRequired,
+      "data-value": modelValue,
+      "data-is-full-width": isFullWidth,
+      "aria-readonly": isReadOnly,
+      "aria-disabled": isDisabled,
+      "aria-invalid": isInvalid,
+      "aria-required": isRequired,
+      onInput(evt) {
+        var _a;
+        send({
+          type: "SET_VALUE",
+          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
+        });
+        if (onInput)
+          onInput(evt);
+      },
+      onChange(evt) {
+        var _a;
+        send({
+          type: "SET_VALUE",
+          value: (_a = evt == null ? void 0 : evt.currentTarget) == null ? void 0 : _a.value
+        });
+        if (onChange)
+          onChange(evt);
+      },
+      class: classes.control,
+      "data-pixel-component": "MpInputControl"
+    },
+    clearProps: {
+      id: `${id}-clear`,
+      variant: "ghost",
+      size: "sm",
+      leftIcon: "reset",
+      onClick(evt) {
+        send({
+          type: "SET_VALUE",
+          value: null
+        });
+        if (onInput)
+          onInput(evt);
+        if (onClear)
+          onClear(evt);
+      },
+      class: classes.clear,
+      style: {
+        "--mp-input--visibility": modelValue ? "visible" : "hidden",
+        "--mp-input--opacity": modelValue ? "1" : "0"
+      },
+      "data-pixel-component": "MpInputClear"
+    }
+  };
+}
+__name(inputConnect, "inputConnect");
+function inputGroupConnect(state, send, classes) {
+  const {
+    id
+  } = state.context;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-pixel-component": "MpInputGroup"
+    }
+  };
+}
+__name(inputGroupConnect, "inputGroupConnect");
+function inputAddonConnect(state, send, classes) {
+  const {
+    id,
+    placement,
+    hasBackground
+  } = state.context;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-placement": placement,
+      "data-has-background": hasBackground,
+      "data-pixel-component": "MpInputAddon"
+    }
+  };
+}
+__name(inputAddonConnect, "inputAddonConnect");
+
+export {
+  inputConnect,
+  inputGroupConnect,
+  inputAddonConnect
+};

package/dist/chunk-ZQ2NFCFA.mjs

@@ -0,0 +1,83 @@
+// src/modules/input.props.ts
+import { declareEmit } from "@mekari/pixel3-utils";
+var inputProps = {
+  as: {
+    type: String,
+    default: "input"
+  },
+  modelValue: {
+    type: [String, Number]
+  },
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "outline"
+  },
+  placeholder: {
+    type: String
+  },
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isRequired: {
+    type: Boolean,
+    default: false
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  isFullWidth: {
+    type: Boolean,
+    default: true
+  },
+  isClearable: {
+    type: Boolean,
+    default: false
+  }
+};
+var inputGroupProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+var inputAddonProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  placement: {
+    type: String,
+    default: "left"
+  },
+  hasBackground: {
+    type: Boolean,
+    default: false
+  }
+};
+var inputEmits = declareEmit(["change", "input", "clear", "update:modelValue"]);
+
+export {
+  inputProps,
+  inputGroupProps,
+  inputAddonProps,
+  inputEmits
+};

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+export { MpInput } from './input.mjs';
+export { MpInputGroup } from './input-group.mjs';
+export { MpInputLeftAddon, MpInputRightAddon } from './input-addon.mjs';
+export { InputAddonPlacement, InputAddonProps, InputGroupProps, InputProps, InputSize, InputVariant } from './modules/input.types.mjs';
+import '@mekari/pixel3-utils';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { MpInput } from './input.js';
+export { MpInputGroup } from './input-group.js';
+export { MpInputLeftAddon, MpInputRightAddon } from './input-addon.js';
+export { InputAddonPlacement, InputAddonProps, InputGroupProps, InputProps, InputSize, InputVariant } from './modules/input.types.js';
+import '@mekari/pixel3-utils';
+import 'vue';