mhz-ui 0.0.1

package/dist/UiButton/UiButton.css

@@ -0,0 +1 @@
+._button_1r5cq_1{position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;height:48px;padding:16px 32px;overflow:hidden;font-size:.875rem;line-height:1.5;color:var(--color-white);text-decoration:none;white-space:nowrap;user-select:none;background:var(--color-primary);border:2px solid var(--color-transparent);border-radius:24px;transition:all .2s}._button_1r5cq_1:hover{color:var(--color-white);cursor:pointer;background:var(--color-primary-dark);border-color:var(--color-transparent)}._button_1r5cq_1:disabled{color:var(--color-gray-dark-extra);cursor:default;background:var(--color-gray-light-extra)}._button_1r5cq_1[data-layout=secondary]{color:var(--color-primary);background-color:var(--color-white);border-color:var(--color-primary)}._button_1r5cq_1[data-layout=secondary]:hover{color:var(--color-primary-dark);border-color:var(--color-primary-dark)}._button_1r5cq_1[data-layout=secondary]:disabled{color:var(--color-gray-dark-extra);background:var(--color-white);border-color:var(--color-gray-light-extra)}

package/dist/UiButton/UiButton.d.ts

@@ -0,0 +1,36 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    layout: {
+        type: import("vue").PropType<"primary" | "secondary">;
+        default: string;
+    };
+    type: {
+        type: import("vue").PropType<"submit" | "button">;
+        default: string;
+    };
+    isDisabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    layout: {
+        type: import("vue").PropType<"primary" | "secondary">;
+        default: string;
+    };
+    type: {
+        type: import("vue").PropType<"submit" | "button">;
+        default: string;
+    };
+    isDisabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {
+    layout: "primary" | "secondary";
+    type: "submit" | "button";
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/UiButton/UiButton.js

@@ -0,0 +1,29 @@
+import "./UiButton.css";
+import { defineComponent as s, openBlock as a, createElementBlock as n, normalizeClass as l, renderSlot as u } from "vue";
+import { _ as r } from "../_plugin-vue_export-helper-dad06003.js";
+const c = ["data-layout", "type", "disabled"], d = /* @__PURE__ */ s({
+  __name: "UiButton",
+  props: {
+    layout: { default: "primary" },
+    type: { default: "button" },
+    isDisabled: { type: Boolean }
+  },
+  setup(e) {
+    const t = e;
+    return (o, y) => (a(), n("button", {
+      class: l(o.$style.button),
+      "data-layout": t.layout,
+      type: t.type,
+      disabled: t.isDisabled
+    }, [
+      u(o.$slots, "default")
+    ], 10, c));
+  }
+}), p = "_button_1r5cq_1", i = {
+  button: p
+}, _ = {
+  $style: i
+}, f = /* @__PURE__ */ r(d, [["__cssModules", _]]);
+export {
+  f as default
+};

package/dist/UiField/UiField.css

@@ -0,0 +1 @@
+._field_jh7jr_1{display:flex;flex-direction:column;flex-grow:1;gap:4px;width:100%}._error_jh7jr_9{color:var(--color-error-dark)}

package/dist/UiField/UiField.d.ts

@@ -0,0 +1,29 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    error: {
+        type: import("vue").PropType<string | false>;
+    };
+    isRequired: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    error: {
+        type: import("vue").PropType<string | false>;
+    };
+    isRequired: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/UiField/UiField.js

@@ -0,0 +1,39 @@
+import "./UiField.css";
+import { defineComponent as i, openBlock as l, createElementBlock as t, normalizeClass as o, createElementVNode as s, toDisplayString as n, createCommentVNode as c, renderSlot as d, withDirectives as p, vShow as _ } from "vue";
+import { _ as m } from "../_plugin-vue_export-helper-dad06003.js";
+const u = /* @__PURE__ */ i({
+  __name: "UiField",
+  props: {
+    label: {},
+    error: { type: [String, Boolean] },
+    isRequired: { type: Boolean }
+  },
+  setup(a) {
+    const e = a;
+    return (r, j) => (l(), t("label", {
+      class: o(r.$style.field)
+    }, [
+      s("span", null, [
+        s("span", null, n(e.label), 1),
+        e.isRequired ? (l(), t("span", {
+          key: 0,
+          class: o(r.$style.error)
+        }, "*", 2)) : c("", !0)
+      ]),
+      d(r.$slots, "default"),
+      p(s("div", {
+        class: o(r.$style.error)
+      }, n(e.error), 3), [
+        [_, !!e.error]
+      ])
+    ], 2));
+  }
+}), f = "_field_jh7jr_1", y = "_error_jh7jr_9", h = {
+  field: f,
+  error: y
+}, $ = {
+  $style: h
+}, b = /* @__PURE__ */ m(u, [["__cssModules", $]]);
+export {
+  b as default
+};

package/dist/UiInput/UiInput.css

@@ -0,0 +1 @@
+._inputBlock_1dmz1_1{position:relative;width:100%}._input_1dmz1_1{width:100%;height:48px;padding:0 24px;font-size:1rem;border:1px solid var(--color-gray);border-radius:24px;outline:none}._input_1dmz1_1:hover{border:1px solid var(--color-gray-dark-extra)}._input_1dmz1_1:focus{border:1px solid var(--color-primary)}._input_1dmz1_1:disabled{color:var(--color-gray-dark-extra);background:var(--color-gray-light-extra);border-color:var(--color-transparent)}._input_1dmz1_1::placeholder{color:var(--color-gray-dark-extra)}

package/dist/UiInput/UiInput.d.ts

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: import("vue").PropType<string | number | null>;
+        required: true;
+    };
+    isDisabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: import("vue").PropType<string | number | null>;
+        required: true;
+    };
+    isDisabled: {
+        type: import("vue").PropType<boolean>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
+export default _default;

package/dist/UiInput/UiInput.js

@@ -0,0 +1,35 @@
+import "./UiInput.css";
+import { defineComponent as p, openBlock as a, createElementBlock as i, normalizeClass as d, createElementVNode as c, mergeProps as r } from "vue";
+import { _ as m } from "../_plugin-vue_export-helper-dad06003.js";
+const _ = ["value", "disabled"], f = /* @__PURE__ */ p({
+  __name: "UiInput",
+  props: {
+    modelValue: {},
+    isDisabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: l }) {
+    const t = o;
+    function n(e) {
+      l("update:modelValue", e.value);
+    }
+    return (e, s) => (a(), i("div", {
+      class: d(e.$style.inputBlock)
+    }, [
+      c("input", r({
+        value: t.modelValue,
+        onInput: s[0] || (s[0] = (u) => n(u.target)),
+        disabled: t.isDisabled,
+        class: e.$style.input
+      }, e.$attrs), null, 16, _)
+    ], 2));
+  }
+}), B = "_inputBlock_1dmz1_1", k = "_input_1dmz1_1", y = {
+  inputBlock: B,
+  input: k
+}, V = {
+  $style: y
+}, I = /* @__PURE__ */ m(f, [["__cssModules", V]]);
+export {
+  I as default
+};

package/dist/_plugin-vue_export-helper-dad06003.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/base.scss

@@ -0,0 +1,52 @@
+* {
+  box-sizing: border-box;
+
+  &::selection {
+    color: var(--color-white);
+    background-color: var(--color-primary-dark);
+  }
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+a {
+  color: var(--color-primary);
+
+  &:hover {
+    color: var(--color-primary-dark);
+  }
+}
+
+h1,
+h2,
+h3 {
+  margin: 24px 0;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+section {
+  margin: 0;
+}
+
+section + section {
+  margin: 64px 0;
+}
+
+p {
+  margin: 0;
+}
+
+p + p {
+  margin: 12px 0;
+}
+
+ul {
+  padding-left: 20px;
+  margin: 0;
+}

package/dist/breakpoints.scss

@@ -0,0 +1,3 @@
+$mobile: 641px;
+$tablet: 980px;
+$notebook: 1220px;

package/dist/colors.scss

@@ -0,0 +1,24 @@
+:root {
+  --color-primary-dark: #0f67a7;
+  --color-primary: #2593e3;
+  --color-primary-light: #9fd7ff;
+  --color-primary-light-extra: #e3f3ff;
+
+  --color-success-dark: #01b028;
+  --color-success: #aeffc0;
+  --color-success-light: #e2ffe9;
+
+  --color-error-dark: #d40019;
+  --color-error: #ffc6cc;
+  --color-error-light: #fdeef0;
+
+  --color-black: #000;
+  --color-white: #fff;
+  --color-transparent: rgba(0, 0, 0, 0);
+
+  --color-gray-dark-extra: #a6a6a6;
+  --color-gray-dark: #bcbcbc;
+  --color-gray: #dfdfdf;
+  --color-gray-light: #f4f4f4;
+  --color-gray-light-extra: #f9f8f8;
+}

package/dist/fonts.scss

@@ -0,0 +1,13 @@
+@font-face {
+  font-family: 'base';
+  font-weight: 400;
+  src: url('/fonts/400.woff2') format('woff2');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'base';
+  font-weight: 700;
+  src: url('/fonts/700.woff2') format('woff2');
+  font-display: swap;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as UiButton } from './UiButton/UiButton';
+export { default as UiField } from './UiField/UiField';
+export { default as UiInput } from './UiInput/UiInput';

package/dist/index.ts

@@ -0,0 +1,3 @@
+export { default as UiButton } from './UiButton/UiButton.js';
+export { default as UiField } from './UiField/UiField.js';
+export { default as UiInput } from './UiInput/UiInput.js';

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "mhz-ui",
+  "version": "0.0.1",
+  "description": "mhz-ui",
+  "author": "dergunov.com",
+  "license": "ISC",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dergunovs/mhz",
+    "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:storybook": "storybook build",
+    "dev": "storybook dev -p 6006 --no-open",
+    "lint": "eslint **/*.{js,ts,vue} && stylelint src/**/*.{scss,vue}",
+    "ts": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "vue": "3.3.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "7.1.0",
+    "@storybook/addon-interactions": "7.1.0",
+    "@storybook/addon-links": "7.1.0",
+    "@storybook/blocks": "7.1.0",
+    "@storybook/core-events": "7.1.0",
+    "@storybook/preview-api": "7.1.0",
+    "@storybook/vue3": "7.1.0",
+    "@storybook/vue3-vite": "7.1.0",
+    "@types/node": "20.4.4",
+    "@typescript-eslint/eslint-plugin": "6.1.0",
+    "@typescript-eslint/parser": "6.1.0",
+    "@vitejs/plugin-vue": "4.2.3",
+    "eslint": "8.45.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-import-resolver-typescript": "3.5.5",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-vue": "9.15.1",
+    "postcss-html": "1.5.0",
+    "postcss-scss": "4.0.6",
+    "prettier": "3.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "1.64.1",
+    "storybook": "7.1.0",
+    "stylelint": "15.10.2",
+    "stylelint-config-recess-order": "4.3.0",
+    "stylelint-config-recommended-scss": "12.0.0",
+    "stylelint-config-recommended-vue": "1.5.0",
+    "stylelint-prettier": "4.0.0",
+    "typescript": "5.1.6",
+    "vite": "4.4.6",
+    "vite-plugin-dts": "3.3.1",
+    "vite-plugin-static-copy": "0.17.0",
+    "vite-svg-loader": "4.0.0",
+    "vue-linters-config": "0.1.6",
+    "vue-tsc": "1.8.6"
+  },
+  "peerDependencies": {
+    "vue": "3.3.4"
+  },
+  "engines": {
+    "node": "18"
+  }
+}