@mekari/pixel3-input 0.0.0

package/dist/modules/input.machines.js

@@ -0,0 +1,81 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/input.machines.ts
+var input_machines_exports = {};
+__export(input_machines_exports, {
+  inputAddonMachine: () => inputAddonMachine,
+  inputGroupMachine: () => inputGroupMachine,
+  inputMachine: () => inputMachine
+});
+module.exports = __toCommonJS(input_machines_exports);
+var import_xstate = require("xstate");
+function inputMachine(context) {
+  return (0, import_xstate.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 (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
+    id: "input-group",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputGroupMachine, "inputGroupMachine");
+function inputAddonMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEsMAHAVwBcBaAQwgiw3xGK1gPIIaYA9EBGAEzoAnvwHIJyIA */
+    id: "input-addon",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(inputAddonMachine, "inputAddonMachine");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  inputAddonMachine,
+  inputGroupMachine,
+  inputMachine
+});

package/dist/modules/input.machines.mjs

@@ -0,0 +1,11 @@
+import {
+  inputAddonMachine,
+  inputGroupMachine,
+  inputMachine
+} from "../chunk-EF6JEV72.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  inputAddonMachine,
+  inputGroupMachine,
+  inputMachine
+};

package/dist/modules/input.props.d.mts

@@ -0,0 +1,80 @@
+import { InputSize, InputVariant, InputAddonPlacement } from './input.types.mjs';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const inputProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<string | number | undefined>;
+    };
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<InputVariant | undefined>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string | undefined>;
+    };
+    isReadOnly: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClearable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const inputGroupProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+};
+declare const inputAddonProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const inputEmits: ("input" | "change" | "clear" | "update:modelValue")[];
+
+export { inputAddonProps, inputEmits, inputGroupProps, inputProps };

package/dist/modules/input.props.d.ts

@@ -0,0 +1,80 @@
+import { InputSize, InputVariant, InputAddonPlacement } from './input.types.js';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const inputProps: {
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<string | number | undefined>;
+    };
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<InputVariant | undefined>;
+        default: string;
+    };
+    placeholder: {
+        type: PropType<string | undefined>;
+    };
+    isReadOnly: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isDisabled: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isRequired: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isFullWidth: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    isClearable: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const inputGroupProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+};
+declare const inputAddonProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<InputSize | undefined>;
+        default: string;
+    };
+    placement: {
+        type: PropType<InputAddonPlacement | undefined>;
+        default: string;
+    };
+    hasBackground: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+};
+declare const inputEmits: ("input" | "change" | "clear" | "update:modelValue")[];
+
+export { inputAddonProps, inputEmits, inputGroupProps, inputProps };

package/dist/modules/input.props.js

@@ -0,0 +1,110 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/input.props.ts
+var input_props_exports = {};
+__export(input_props_exports, {
+  inputAddonProps: () => inputAddonProps,
+  inputEmits: () => inputEmits,
+  inputGroupProps: () => inputGroupProps,
+  inputProps: () => inputProps
+});
+module.exports = __toCommonJS(input_props_exports);
+var import_pixel3_utils = require("@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 = (0, import_pixel3_utils.declareEmit)(["change", "input", "clear", "update:modelValue"]);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  inputAddonProps,
+  inputEmits,
+  inputGroupProps,
+  inputProps
+});

package/dist/modules/input.props.mjs

@@ -0,0 +1,13 @@
+import {
+  inputAddonProps,
+  inputEmits,
+  inputGroupProps,
+  inputProps
+} from "../chunk-ZQ2NFCFA.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  inputAddonProps,
+  inputEmits,
+  inputGroupProps,
+  inputProps
+};

package/dist/modules/input.types.d.mts

@@ -0,0 +1,77 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported input types.
+ */
+
+type InputVariant = 'outline' | 'unstyled';
+type InputSize = 'sm' | 'md';
+type InputAddonPlacement = 'left' | 'right';
+interface InputProps {
+    id?: string;
+    modelValue?: string | number;
+    size?: InputSize;
+    variant?: InputVariant;
+    placeholder?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isFullWidth?: boolean;
+    isClearable?: boolean;
+    onInput?: (evt: Event) => void;
+    onChange?: (evt: Event) => void;
+    onClear?: (evt: Event) => void;
+}
+interface InputGroupProps {
+    id?: string;
+    size?: InputSize;
+}
+interface InputAddonProps {
+    id?: string;
+    size?: InputSize;
+    placement?: InputAddonPlacement;
+    hasBackground?: boolean;
+}
+interface InputVNode {
+    el?: any;
+    props?: object;
+    type: {
+        [name: string]: string;
+    };
+}
+type InputDefinedContext = Optional<InputProps, 'id'>;
+type InputGroupDefinedContext = Optional<InputGroupProps, 'id'>;
+type InputAddonDefinedContext = Optional<InputAddonProps, 'id'>;
+interface InputApiMachine<T extends PropTypes = PropTypes> {
+    modelValue?: string | number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    rootProps?: T['element'];
+    controlProps?: T['element'];
+    clearProps?: T['element'];
+}
+interface InputGroupApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+}
+interface InputAddonApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+}
+interface InputState {
+    context: InputProps;
+}
+interface InputGroupState {
+    context: InputGroupProps;
+}
+interface InputAddonState {
+    context: InputAddonProps;
+}
+type InputSend = CallableFunction;
+interface InputClasses {
+    root?: string;
+    control?: string;
+    clear?: string;
+}
+
+export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSend, InputSize, InputState, InputVNode, InputVariant };

package/dist/modules/input.types.d.ts

@@ -0,0 +1,77 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported input types.
+ */
+
+type InputVariant = 'outline' | 'unstyled';
+type InputSize = 'sm' | 'md';
+type InputAddonPlacement = 'left' | 'right';
+interface InputProps {
+    id?: string;
+    modelValue?: string | number;
+    size?: InputSize;
+    variant?: InputVariant;
+    placeholder?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isFullWidth?: boolean;
+    isClearable?: boolean;
+    onInput?: (evt: Event) => void;
+    onChange?: (evt: Event) => void;
+    onClear?: (evt: Event) => void;
+}
+interface InputGroupProps {
+    id?: string;
+    size?: InputSize;
+}
+interface InputAddonProps {
+    id?: string;
+    size?: InputSize;
+    placement?: InputAddonPlacement;
+    hasBackground?: boolean;
+}
+interface InputVNode {
+    el?: any;
+    props?: object;
+    type: {
+        [name: string]: string;
+    };
+}
+type InputDefinedContext = Optional<InputProps, 'id'>;
+type InputGroupDefinedContext = Optional<InputGroupProps, 'id'>;
+type InputAddonDefinedContext = Optional<InputAddonProps, 'id'>;
+interface InputApiMachine<T extends PropTypes = PropTypes> {
+    modelValue?: string | number;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    rootProps?: T['element'];
+    controlProps?: T['element'];
+    clearProps?: T['element'];
+}
+interface InputGroupApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+}
+interface InputAddonApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+}
+interface InputState {
+    context: InputProps;
+}
+interface InputGroupState {
+    context: InputGroupProps;
+}
+interface InputAddonState {
+    context: InputAddonProps;
+}
+type InputSend = CallableFunction;
+interface InputClasses {
+    root?: string;
+    control?: string;
+    clear?: string;
+}
+
+export { InputAddonApiMachine, InputAddonDefinedContext, InputAddonPlacement, InputAddonProps, InputAddonState, InputApiMachine, InputClasses, InputDefinedContext, InputGroupApiMachine, InputGroupDefinedContext, InputGroupProps, InputGroupState, InputProps, InputSend, InputSize, InputState, InputVNode, InputVariant };

package/dist/modules/input.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/input.types.ts
+var input_types_exports = {};
+module.exports = __toCommonJS(input_types_exports);

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mekari/pixel3-input",
+  "description": "Mekari Pixel 3 | Input component is used to get user input in a text field",
+  "version": "0.0.0",
+  "license": "LGPL-3.0",
+  "author": "Dirga Prakesha <dirga.prakesha@mekari.com>",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@xstate/vue": "2.0.0",
+    "xstate": "4.35.0",
+    "@mekari/pixel3-button": "0.0.0",
+    "@mekari/pixel3-styled-system": "0.0.0",
+    "@mekari/pixel3-utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7",
+    "@pandacss/dev": "0.10.0"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:css": "pnpm build && pnpm css:gen",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "css:gen": "panda cssgen --outfile dist/styles.css",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}