@staskozin/ui-kit 1.1.0 → 1.2.0

package/dist/index.css

@@ -1 +1 @@
-.UiButton{font-family:inherit;display:flex;column-gap:.5em}.UiButton.--size-small{font-size:1rem;line-height:1.5em;padding:.375em .625em .375em .5em}.UiButton.--size-medium,.UiButton.--size-large{font-size:1rem}
+.UiIcon.--size-small{width:1rem;height:1rem}.UiIcon.--size-medium{width:1.25rem;height:1.25rem}.UiButton{font-family:inherit;display:flex;column-gap:.5em;border:none;border-radius:.25em}.UiButton.--size-small{font-size:.875rem;line-height:1.5em;padding:.375em .625em .375em .5em;column-gap:.25em}.UiButton.--size-medium{font-size:1rem;line-height:1.5em;padding:.5em 1.25em}.UiButton.--size-medium.--has-icon{padding:.5em .75em}.UiButton.--size-medium.--has-icon:not(.--has-label){padding:.625em}.UiButton.--size-large{font-size:1rem;line-height:1.25em;padding:.75em 1.5em}

package/dist/index.d.ts

@@ -7,8 +7,8 @@ export declare const UiButton: DefineComponent<UiButtonProps, {}, {}, {}, {}, Co
 
 declare type UiButtonProps = {
     label?: string;
-    icon?: string;
-    size: UiElementSize;
+    icon?: 'calendar';
+    size?: UiElementSize;
 };
 
 declare type UiElementSize = 'small' | 'medium' | 'large';

package/dist/index.js

@@ -1,5 +1,23 @@
-import { defineComponent as n, computed as o, openBlock as s, createElementBlock as i, normalizeClass as a, toDisplayString as l } from "vue";
-const m = /* @__PURE__ */ n({
+import { defineComponent as s, computed as t, openBlock as o, createElementBlock as c, unref as a, normalizeClass as l, createBlock as u, createCommentVNode as m, createTextVNode as d, toDisplayString as h } from "vue";
+const v = {
+  calendar: '<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15.83 3.33H4.17c-.92 0-1.67.75-1.67 1.67v11.67c0 .92.75 1.66 1.67 1.66h11.66c.92 0 1.67-.74 1.67-1.66V5c0-.92-.75-1.67-1.67-1.67m-2.5-1.66V5M6.67 1.67V5M2.5 8.33h15" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  paperclip: '<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m17.8666 9.2084-7.6584 7.6583a5.0026 5.0026 0 0 1-8.5402-3.5375c0-1.3268.527-2.5993 1.4653-3.5375l7.6583-7.6583A3.3352 3.3352 0 1 1 15.5082 6.85l-7.6666 7.6583a1.6674 1.6674 0 0 1-2.8468-1.1791c0-.4423.1757-.8665.4885-1.1792l7.0749-7.0666" stroke="currentColor" stroke-width="1.6667" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+}, k = ["innerHTML"], w = /* @__PURE__ */ s({
+  __name: "UiIcon",
+  props: {
+    name: {},
+    size: { default: "medium" }
+  },
+  setup(e) {
+    const n = t(() => [
+      `--size-${e.size}`
+    ]);
+    return (i, r) => (o(), c("div", {
+      class: l([n.value, "UiIcon"]),
+      innerHTML: a(v)[e.name]
+    }, null, 10, k));
+  }
+}), f = /* @__PURE__ */ s({
   __name: "UiButton",
   props: {
     label: {},
@@ -7,14 +25,23 @@ const m = /* @__PURE__ */ n({
     size: { default: "medium" }
   },
   setup(e) {
-    const t = o(() => [
-      `--size-${e.size}`
-    ]);
-    return (c, r) => (s(), i("button", {
-      class: a([t.value, "UiButton"])
-    }, l(e.label), 3));
+    const n = t(() => [
+      `--size-${e.size}`,
+      ...e.icon ? ["--has-icon"] : [],
+      ...e.label ? ["--has-label"] : []
+    ]), i = t(() => e.size !== "large" ? e.size : "medium");
+    return (r, z) => (o(), c("button", {
+      class: l([n.value, "UiButton"])
+    }, [
+      e.icon ? (o(), u(w, {
+        key: 0,
+        name: e.icon,
+        size: i.value
+      }, null, 8, ["name", "size"])) : m("", !0),
+      d(" " + h(e.label), 1)
+    ], 2));
   }
 });
 export {
-  m as UiButton
+  f as UiButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@staskozin/ui-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -30,7 +30,6 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
     "@commitlint/cli": "^20.4.2",
     "@commitlint/config-conventional": "^20.4.2",
     "@semantic-release/changelog": "^6.0.3",