webcake-ui-kit 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/button/Button.vue

@@ -53,7 +53,7 @@ export default {
     size: {
       type: String,
       default: 'md',
-      validator: v => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v)
+      validator: v => ['mini', 'xs', 'sm', 'md', 'lg', 'xl'].includes(v)
     },
     roundness: {
       type: String,

package/src/components/button/button.css

@@ -34,7 +34,7 @@
 /* ============================================================
    Sizes
    ============================================================ */
-.ui-btn--xs {
+.ui-btn--mini {
   height: 24px;
   padding: var(--spacing-3) var(--spacing-xs);
   gap: var(--spacing-6);
@@ -42,6 +42,22 @@
   line-height: var(--paragraph-mini-line-height);
   letter-spacing: var(--paragraph-mini-letter-spacing);
 }
+
+.ui-btn--mini .ui-btn__icon,
+.ui-btn--mini ::v-deep svg {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-btn--xs {
+  height: 28px;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  gap: var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
 .ui-btn--xs .ui-btn__icon,
 .ui-btn--xs ::v-deep svg {
   width: 16px;
@@ -56,6 +72,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--sm .ui-btn__icon,
 .ui-btn--sm ::v-deep svg {
   width: 20px;
@@ -70,6 +87,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--md .ui-btn__icon,
 .ui-btn--md ::v-deep svg {
   width: 20px;
@@ -84,6 +102,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-btn--lg .ui-btn__icon,
 .ui-btn--lg ::v-deep svg {
   width: 20px;
@@ -98,6 +117,7 @@
   line-height: var(--paragraph-regular-line-height);
   letter-spacing: var(--paragraph-regular-letter-spacing);
 }
+
 .ui-btn--xl .ui-btn__icon,
 .ui-btn--xl ::v-deep svg {
   width: 20px;
@@ -112,9 +132,15 @@
 .ui-btn--round-default {
   border-radius: var(--radius-10);
 }
-.ui-btn--xs.ui-btn--round-default {
+
+.ui-btn--mini.ui-btn--round-default {
   border-radius: var(--rounded-lg);
 }
+
+.ui-btn--xs.ui-btn--round-default {
+  border-radius: var(--radius);
+}
+
 .ui-btn--round-round {
   border-radius: var(--rounded-full);
 }
@@ -128,6 +154,7 @@
   background: var(--primary-brand-bg);
   color: var(--inverse-fg);
 }
+
 .ui-btn--primary:hover,
 .ui-btn--primary:active {
   background: var(--primary-brand-hover);
@@ -138,6 +165,7 @@
   background: var(--button-black);
   color: var(--button-black-fg);
 }
+
 .ui-btn--neutral:hover,
 .ui-btn--neutral:active {
   background: var(--button-black-hover);
@@ -148,6 +176,7 @@
   background: var(--secondary-bg);
   color: var(--secondary-fg);
 }
+
 .ui-btn--secondary:hover,
 .ui-btn--secondary:active {
   background: var(--secondary-hover);
@@ -160,6 +189,7 @@
   border: 1px solid var(--border-primary);
   box-shadow: var(--shadow-xs);
 }
+
 .ui-btn--outline:hover,
 .ui-btn--outline:active {
   background: var(--outline-hover);
@@ -171,6 +201,7 @@
   background: var(--ghost);
   color: var(--primary-fg);
 }
+
 .ui-btn--ghost:hover,
 .ui-btn--ghost:active {
   background: var(--ghost-hover);
@@ -181,6 +212,7 @@
   background: var(--destructive);
   color: var(--destructive-inverse-fg);
 }
+
 .ui-btn--destructive:hover,
 .ui-btn--destructive:active {
   background: var(--destructive-hover);
@@ -190,7 +222,10 @@
 .ui-btn--link {
   background: var(--ghost);
   color: var(--primary-brand-fg);
+  height: fit-content;
+  padding: 0;
 }
+
 .ui-btn--link:hover,
 .ui-btn--link:active {
   color: var(--primary-brand-hover);
@@ -202,19 +237,24 @@
 .ui-btn:focus {
   outline: none;
 }
+
 .ui-btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px var(--focus-ring);
 }
+
 .ui-btn--secondary:focus-visible {
   background: var(--secondary-hover);
 }
+
 .ui-btn--outline:focus-visible {
   border-color: var(--border-focus);
 }
+
 .ui-btn--destructive:focus-visible {
   box-shadow: 0 0 0 3px var(--focus-ring-error);
 }
+
 /* ============================================================
    Disabled
    ============================================================ */
@@ -234,22 +274,31 @@
   gap: 0;
 }
 
-.ui-btn--icon-only.ui-btn--xs {
+.ui-btn--icon-only.ui-btn--mini {
   width: 24px;
   padding: var(--spacing-3xs);
 }
+
+.ui-btn--icon-only.ui-btn--xs {
+  width: 28px;
+  padding: var(--spacing-6);
+}
+
 .ui-btn--icon-only.ui-btn--sm {
   width: 32px;
   padding: var(--spacing-6);
 }
+
 .ui-btn--icon-only.ui-btn--md {
   width: 36px;
   padding: var(--spacing-xs);
 }
+
 .ui-btn--icon-only.ui-btn--lg {
   width: 40px;
   padding: var(--spacing-10);
 }
+
 .ui-btn--icon-only.ui-btn--xl {
   width: 48px;
   padding: var(--spacing-sm);

package/src/components/dialog/Dialog.vue

@@ -33,35 +33,35 @@
                 </slot>
 
                 <div class="ui-dialog-header__actions">
-                  <button
+                  <Button
                     v-if="minimizable"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
                     :aria-label="minimized ? 'Restore' : 'Minimize'"
+                    size="sm"
+                    variant="ghost"
                     @click="toggleMinimize"
                   >
-                    <WkiMinus v-if="!minimized" />
-                    <WkiUnfoldVertical v-else />
-                  </button>
-                  <button
+                    <template #icon>
+                      <WkiMinus v-if="!minimized" />
+                      <WkiUnfoldVertical v-else />
+                    </template>
+                  </Button>
+                  <Button
                     v-if="fullscreen"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
                     :aria-label="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'"
+                    size="sm"
+                    variant="ghost"
                     @click="toggleFullscreen"
                   >
-                    <WkiExpand v-if="!isFullscreen" />
-                    <WkiShrink v-else />
-                  </button>
-                  <button
-                    v-if="closable"
-                    type="button"
-                    class="ui-dialog-header__icon-btn"
-                    aria-label="Close"
-                    @click="handleCancel"
-                  >
-                    <WkiX />
-                  </button>
+                    <template #icon>
+                      <WkiExpand v-if="!isFullscreen" />
+                      <WkiShrink v-else />
+                    </template>
+                  </Button>
+                  <Button v-if="closable" aria-label="Close" size="sm" variant="ghost" @click="handleCancel">
+                    <template #icon>
+                      <WkiX />
+                    </template>
+                  </Button>
                 </div>
               </div>
             </div>

package/src/components/dialog/dialog.css

@@ -64,7 +64,7 @@
   border-radius: var(--rounded-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
-  max-height: 100%; /* Allow internal scrolling if content is taller than wrapper */
+  max-height: 100%;
 }
 
 .ui-dialog-content {
@@ -157,40 +157,6 @@
   flex-shrink: 0;
 }
 
-.ui-dialog-header__icon-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 32px;
-  min-height: 32px;
-  padding: var(--spacing-6);
-  margin: 0;
-  background: var(--ghost);
-  color: var(--primary-fg);
-  border: 0;
-  border-radius: var(--rounded-xl);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.ui-dialog-header__icon-btn svg {
-  display: block;
-  width: 20px;
-  height: 20px;
-}
-
-.ui-dialog-header__icon-btn:hover {
-  background: var(--ghost-hover);
-}
-
-.ui-dialog-header__icon-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-focus-ring);
-}
-
 /* ── body ─────────────────────────────────────────────────────────────── */
 .ui-dialog-body {
   padding: var(--spacing-md);
@@ -207,7 +173,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
   background: var(--accent-0);
 }
 
@@ -238,6 +204,7 @@
 .ui-dialog-fade-leave-active {
   transition: opacity 0.2s ease;
 }
+
 .ui-dialog-fade-enter,
 .ui-dialog-fade-enter-from,
 .ui-dialog-fade-leave-to {
@@ -250,6 +217,7 @@
     opacity 0.2s ease,
     transform 0.2s ease;
 }
+
 .ui-dialog-zoom-enter,
 .ui-dialog-zoom-enter-from,
 .ui-dialog-zoom-leave-to {

package/src/components/input/input.css

@@ -21,6 +21,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-lg {
   min-height: 40px;
   gap: var(--spacing-sm);
@@ -29,6 +30,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-sm {
   min-height: 32px;
   gap: var(--spacing-6);
@@ -37,6 +39,7 @@
   line-height: var(--paragraph-small-line-height);
   letter-spacing: var(--paragraph-small-letter-spacing);
 }
+
 .ui-input--size-xs {
   min-height: 28px;
   gap: var(--spacing-2xs);
@@ -50,9 +53,11 @@
 .ui-input--round-default {
   border-radius: var(--rounded-xl);
 }
+
 .ui-input--size-xs.ui-input--round-default {
-  border-radius: var(--rounded-lg);
+  border-radius: var(--radius);
 }
+
 .ui-input--round-round {
   border-radius: var(--rounded-full);
 }
@@ -68,6 +73,7 @@
   border-color: var(--destructive-border);
   box-shadow: none;
 }
+
 .ui-input--error:focus-within {
   border-color: var(--destructive-border);
   box-shadow: 0 0 0 3px var(--focus-ring-error);
@@ -77,6 +83,7 @@
 .ui-input--disabled {
   opacity: 0.5;
 }
+
 .ui-input--disabled:focus-within {
   border-color: var(--border-primary);
   box-shadow: var(--shadow-xs);
@@ -96,10 +103,12 @@
   font: inherit;
   letter-spacing: inherit;
 }
+
 .ui-input__field::placeholder {
   color: var(--muted-fg);
   opacity: 1;
 }
+
 .ui-input__field:disabled {
   cursor: not-allowed;
 }
@@ -114,6 +123,7 @@
   height: 20px;
   color: var(--muted-fg);
 }
+
 .ui-input--size-xs .ui-input__decoration {
   width: 16px;
   height: 16px;

package/src/components/select/select.css

@@ -102,7 +102,7 @@
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  color: var(--muted-fg);
+  color: var(--primary-fg);
   transition: transform 0.2s ease;
 }
 
@@ -116,6 +116,7 @@
   padding: var(--spacing-10) var(--spacing-xs) var(--spacing-10) var(--spacing-md);
   gap: var(--spacing-sm);
 }
+
 .ui-select--lg .ui-select__left {
   gap: var(--spacing-sm);
 }
@@ -127,6 +128,7 @@
   padding: var(--spacing-6) var(--spacing-xs);
   gap: var(--spacing-6);
 }
+
 .ui-select--sm .ui-select__left {
   gap: var(--spacing-6);
 }
@@ -137,9 +139,11 @@
   gap: var(--spacing-2xs);
   border-radius: var(--rounded-lg);
 }
+
 .ui-select--xs .ui-select__left {
   gap: var(--spacing-2xs);
 }
+
 .ui-select--xs .ui-select__value,
 .ui-select--xs .ui-select__prepend {
   font-size: var(--paragraph-mini-font-size);
@@ -160,6 +164,7 @@
 .ui-select__list::-webkit-scrollbar {
   width: 6px;
 }
+
 .ui-select__list::-webkit-scrollbar-thumb {
   background: var(--border-primary);
   border-radius: 3px;

package/src/icons/BaseIcon.vue

@@ -44,21 +44,4 @@ export default {
 }
 </script>
 
-<style>
-.wki-base-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  vertical-align: middle;
-  line-height: 0;
-}
-
-.wki-base-icon svg {
-  width: var(--wki-icon-size);
-  height: var(--wki-icon-size);
-  color: var(--wki-icon-color);
-  stroke-width: var(--wki-icon-stroke-width);
-  fill: var(--wki-icon-fill);
-}
-</style>
+<style src="../styles/icons.css"></style>

package/src/icons/GenerateImage.vue

@@ -0,0 +1,36 @@
+<template>
+  <BaseIcon v-bind="$attrs" v-on="listeners">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+      <path
+        d="M21.4838 5.04818L20.0696 4.50868C19.9385 4.45858 19.8383 4.35839 19.7882 4.22737L19.2488 2.81311C19.0908 2.39693 18.5012 2.39693 18.3431 2.81311L17.8036 4.22737C17.7535 4.35839 17.6533 4.45858 17.5224 4.50868L16.108 5.04818C15.6919 5.20617 15.6919 5.79577 16.108 5.95376L17.5224 6.49326C17.6533 6.54336 17.7535 6.64356 17.8036 6.77457L18.3431 8.18884C18.5012 8.60502 19.0908 8.60502 19.2488 8.18884L19.7882 6.77457C19.8383 6.64356 19.9385 6.54336 20.0696 6.49326L21.4838 5.95376C21.9 5.79577 21.9 5.20617 21.4838 5.04818Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.45 9.46744L13.1405 9.73221C13.2437 9.77092 13.3276 9.85489 13.3663 9.95821L13.6309 10.6491C13.76 10.9849 14.2375 10.9849 14.3634 10.6491L14.6279 9.95821C14.6666 9.85489 14.7505 9.77092 14.8538 9.73221L15.5443 9.46744C15.8798 9.33829 15.8798 8.86048 15.5443 8.73453L14.8538 8.46977C14.7505 8.43103 14.6666 8.34708 14.6279 8.24376L14.3634 7.55281C14.2343 7.21703 13.7567 7.21703 13.6309 7.55281L13.3663 8.24376C13.3276 8.34708 13.2437 8.43103 13.1405 8.46977L12.45 8.73453C12.1112 8.86365 12.1112 9.34153 12.45 9.46744Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.45 3.20184C12.8642 3.20184 13.2 3.53763 13.2 3.95184C13.2 4.36605 12.8642 4.70184 12.45 4.70184H3.75001L3.75 15.6039L7.56328 11.7895C7.8445 11.5084 8.22626 11.3512 8.62383 11.3512C9.02143 11.3512 9.40311 11.5084 9.68438 11.7895L13.8094 15.9145L15.6844 14.0395C15.8235 13.9003 15.9889 13.7902 16.1707 13.7148C16.3526 13.6395 16.548 13.6 16.7449 13.6C16.9419 13.6 17.1371 13.6394 17.3191 13.7148C17.501 13.7902 17.6663 13.9003 17.8055 14.0395L20.25 16.4828V13.15C20.25 12.7358 20.5858 12.4 21 12.4C21.4142 12.4 21.75 12.7358 21.75 13.15V20.35C21.75 20.7478 21.5919 21.1293 21.3105 21.4106C21.0292 21.6919 20.6478 21.85 20.25 21.85H3.75C3.35218 21.85 2.97076 21.6919 2.68945 21.4106C2.40815 21.1293 2.25 20.7478 2.25 20.35L2.25001 4.70184C2.25001 4.30402 2.40816 3.9226 2.68947 3.64129C2.97077 3.35999 3.35219 3.20184 3.75001 3.20184H12.45ZM3.75 17.725V20.35H16.125L8.625 12.85L3.75 17.725ZM14.8711 16.975L18.2461 20.35H20.25V18.6039L16.7461 15.1L14.8711 16.975Z"
+        fill="currentColor"
+      />
+    </svg>
+  </BaseIcon>
+</template>
+
+<script>
+import BaseIcon from './BaseIcon.vue'
+
+export default {
+  name: 'GenerateImage',
+  components: { BaseIcon },
+  inheritAttrs: false,
+  emits: [],
+  computed: {
+    listeners() {
+      return this.$listeners || {}
+    }
+  }
+}
+</script>

package/src/icons/index.js

@@ -1730,4 +1730,5 @@ export { default as WkiZoomIn } from './ZoomIn.vue'
 export { default as WkiZoomOut } from './ZoomOut.vue'
 export { default as WkiClickButton } from './ClickButton.vue'
 export { default as WkiSectionBuilder } from './SectionBuilder.vue'
+export { default as WkiGenerateImage } from './GenerateImage.vue'
 // --- AUTO-GENERATED LUCIDE EXPORTS END ---

package/src/styles/icons.css

@@ -0,0 +1,16 @@
+.wki-base-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.wki-base-icon svg {
+  width: var(--wki-icon-size);
+  height: var(--wki-icon-size);
+  color: var(--wki-icon-color);
+  stroke-width: var(--wki-icon-stroke-width);
+  fill: var(--wki-icon-fill);
+}