webcake-ui-kit 1.0.0 → 1.0.1

package/src/components/input/Input.vue

@@ -0,0 +1,99 @@
+<template>
+  <span
+    :class="[
+      'ui-input',
+      `ui-input--size-${size}`,
+      `ui-input--round-${roundness}`,
+      error && 'ui-input--error',
+      disabled && 'ui-input--disabled'
+    ]"
+  >
+    <span v-if="hasPrefix" class="ui-input__decoration ui-input__prefix" aria-hidden="true">
+      <slot name="prefix"></slot>
+    </span>
+    <input
+      ref="input"
+      class="ui-input__field"
+      :type="type"
+      :value="currentValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :name="name"
+      v-bind="$attrs"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+      @keydown="onKeydown"
+    />
+    <span v-if="hasSuffix" class="ui-input__decoration ui-input__suffix" aria-hidden="true">
+      <slot name="suffix"></slot>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Input',
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
+    },
+    value: { type: [String, Number], default: '' },
+    modelValue: { type: [String, Number], default: undefined },
+    type: { type: String, default: 'text' },
+    placeholder: { type: String, default: '' },
+    name: { type: String, default: '' },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false }
+  },
+  emits: ['input', 'change', 'update:modelValue', 'focus', 'blur', 'pressEnter'],
+  computed: {
+    currentValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value
+    },
+    hasPrefix() {
+      return !!this.$slots['prefix']
+    },
+    hasSuffix() {
+      return !!this.$slots['suffix']
+    }
+  },
+  methods: {
+    focus() {
+      if (this.$refs.input) this.$refs.input.focus()
+    },
+    blur() {
+      if (this.$refs.input) this.$refs.input.blur()
+    },
+    onInput(e) {
+      const next = e.target.value
+      this.$emit('input', next)
+      this.$emit('update:modelValue', next)
+      this.$emit('change', next, e)
+    },
+    onFocus(e) {
+      this.$emit('focus', e.target.value, e)
+    },
+    onBlur(e) {
+      this.$emit('blur', e.target.value, e)
+    },
+    onKeydown(e) {
+      if (e.key === 'Enter') {
+        this.$emit('pressEnter', e.target.value, e)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./input.css" scoped></style>

package/src/components/input/input.css

@@ -0,0 +1,123 @@
+.ui-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  max-width: 320px;
+  background: var(--input);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+  overflow: hidden;
+  transition:
+    border-color 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+/* Size — paddings, gaps, heights, typography. Inner field inherits typography. */
+.ui-input--size-md {
+  min-height: 36px;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-7p5) var(--spacing-sm);
+  font-size: var(--paragraph-small-font-size);
+  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);
+  padding: var(--spacing-9p5) var(--spacing-md);
+  font-size: var(--paragraph-small-font-size);
+  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);
+  padding: var(--spacing-5p5) var(--spacing-xs);
+  font-size: var(--paragraph-small-font-size);
+  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);
+  padding: var(--spacing-6);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  letter-spacing: var(--paragraph-mini-letter-spacing);
+}
+
+/* Roundness — Mini uses smaller default radius per Figma. */
+.ui-input--round-default {
+  border-radius: var(--rounded-xl);
+}
+.ui-input--size-xs.ui-input--round-default {
+  border-radius: var(--rounded-lg);
+}
+.ui-input--round-round {
+  border-radius: var(--rounded-full);
+}
+
+/* Focus (interactive) — wrapper highlights when inner field is focused. */
+.ui-input:focus-within {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+/* Error (logical) — red border, no base shadow. */
+.ui-input--error {
+  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);
+}
+
+/* Disabled — visual only; cursor handled by inner field. */
+.ui-input--disabled {
+  opacity: 0.5;
+}
+.ui-input--disabled:focus-within {
+  border-color: var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* The native input — strips browser chrome and inherits typography from wrapper. */
+.ui-input__field {
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+}
+.ui-input__field::placeholder {
+  color: var(--muted-fg);
+  opacity: 1;
+}
+.ui-input__field:disabled {
+  cursor: not-allowed;
+}
+
+/* Decoration slot wrappers — fixed-size icon containers. */
+.ui-input__decoration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--muted-fg);
+}
+.ui-input--size-xs .ui-input__decoration {
+  width: 16px;
+  height: 16px;
+}

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,211 @@
+<template>
+  <nav class="ui-pagination" role="navigation" :aria-label="ariaLabel" :class="{ 'ui-pagination--disabled': disabled }">
+    <Button variant="ghost" :disabled="isPrevDisabled" @click="goPrev" :label="prevLabel || ''">
+      <template v-if="showIcon" #icon-left>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M10 4L6 8L10 12"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </Button>
+
+    <template v-for="(item, idx) in items">
+      <Button
+        v-if="typeof item === 'number'"
+        :key="'page-' + item"
+        :variant="currentPage === item ? 'outline' : 'ghost'"
+        :disabled="disabled"
+        @click="select(item)"
+      >
+        {{ item }}
+      </Button>
+      <Button
+        v-else
+        :key="`ellipsis-${idx}-${item}`"
+        variant="ghost"
+        :disabled="disabled"
+        @click="onEllipsisClick(item)"
+      >
+        <template #icon>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-ellipsis-icon lucide-ellipsis"
+          >
+            <circle cx="12" cy="12" r="1" />
+            <circle cx="19" cy="12" r="1" />
+            <circle cx="5" cy="12" r="1" />
+          </svg>
+        </template>
+      </Button>
+    </template>
+
+    <Button variant="ghost" :disabled="isNextDisabled" @click="goNext" :label="nextLabel || ''">
+      <template v-if="showIcon" #icon-right>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M6 4L10 8L6 12"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </template>
+    </Button>
+  </nav>
+</template>
+
+<script>
+import Button from '../button/Button.vue'
+
+function range(start, end) {
+  if (end < start) return []
+  var r = []
+  for (var i = start; i <= end; i++) r.push(i)
+  return r
+}
+
+export default {
+  name: 'Pagination',
+  components: { Button },
+
+  model: {
+    prop: 'current',
+    event: 'change'
+  },
+
+  props: {
+    current: { type: Number, default: 1 },
+    total: { type: Number, required: true, validator: v => v >= 0 },
+    pageSize: { type: Number, default: 10, validator: v => v >= 1 },
+    siblings: { type: Number, default: 1, validator: v => v >= 0 },
+    boundary: { type: Number, default: 1, validator: v => v >= 0 },
+    showIcon: { type: Boolean, default: false },
+    prevLabel: { type: String, default: 'Previous' },
+    nextLabel: { type: String, default: 'Next' },
+    ariaLabel: { type: String, default: 'Pagination' },
+    pageAriaLabel: { type: Function, default: null },
+    disabled: { type: Boolean, default: false },
+    jumpStep: { type: Number, default: 4 }
+  },
+
+  emits: ['change', 'update:modelValue'],
+
+  computed: {
+    totalPages: function () {
+      if (this.total <= 0) return 0
+      return Math.max(1, Math.ceil(this.total / this.pageSize))
+    },
+    currentPage: function () {
+      if (this.totalPages <= 0) return 1
+      return Math.max(1, Math.min(this.current, this.totalPages))
+    },
+    items: function () {
+      return this.computeItems(this.currentPage, this.totalPages, this.siblings, this.boundary)
+    },
+    isPrevDisabled: function () {
+      return this.disabled || this.currentPage <= 1 || this.totalPages <= 0
+    },
+    isNextDisabled: function () {
+      return this.disabled || this.currentPage >= this.totalPages || this.totalPages <= 0
+    },
+    effectiveJumpStep: function () {
+      return Math.max(0, Math.floor(this.jumpStep))
+    }
+  },
+
+  methods: {
+    // Smart pagination range — only inserts ellipses when an actual gap > 1 exists,
+    // and expands the visible range on the non-elided side when current is near a boundary.
+    // Output items are integers (page numbers) or the strings 'ellipsis-start' / 'ellipsis-end'.
+    computeItems: function (current, total, siblings, boundary) {
+      if (!total || total <= 0) return []
+      var s = Math.max(0, siblings)
+      var b = Math.max(0, boundary)
+
+      // Max numbers that can render WITHOUT any ellipsis.
+      // Layout: [boundary] [start-ellipsis] [current ± siblings] [end-ellipsis] [boundary]
+      // Without ellipses, the visible run would need at least b + (2s + 1) + b = 2b + 2s + 1.
+      // We also account for the 2 ellipsis slots (which would otherwise be page numbers): 2b + 2s + 3.
+      var noEllipsisThreshold = b * 2 + s * 2 + 3
+      if (total <= noEllipsisThreshold) return range(1, total)
+
+      var leftSibling = Math.max(current - s, b + 1)
+      var rightSibling = Math.min(current + s, total - b)
+
+      // Only emit an ellipsis when the gap it covers is > 1 page (otherwise show that page).
+      var showLeftEllipsis = leftSibling > b + 2
+      var showRightEllipsis = rightSibling < total - b - 1
+
+      var startPages = range(1, b)
+      var endPages = range(total - b + 1, total)
+
+      if (!showLeftEllipsis && showRightEllipsis) {
+        // Current is near the start — extend the left run to fill the slot a left ellipsis would occupy.
+        var leftCount = b + s * 2 + 1
+        return range(1, leftCount).concat(['ellipsis-end']).concat(endPages)
+      }
+
+      if (showLeftEllipsis && !showRightEllipsis) {
+        // Current is near the end — extend the right run.
+        var rightCount = b + s * 2 + 1
+        return startPages.concat(['ellipsis-start']).concat(range(total - rightCount + 1, total))
+      }
+
+      // Both ellipses needed (current is in the middle, and gaps on both sides are > 1)
+      return startPages
+        .concat(['ellipsis-start'])
+        .concat(range(leftSibling, rightSibling))
+        .concat(['ellipsis-end'])
+        .concat(endPages)
+    },
+
+    select: function (page) {
+      if (this.disabled) return
+      if (this.totalPages <= 0) return
+      var clamped = Math.max(1, Math.min(page, this.totalPages))
+      if (clamped === this.currentPage) return
+      this.$emit('change', clamped)
+      this.$emit('update:modelValue', clamped)
+    },
+
+    goPrev: function () {
+      if (this.isPrevDisabled) return
+      this.select(this.currentPage - 1)
+    },
+
+    goNext: function () {
+      if (this.isNextDisabled) return
+      this.select(this.currentPage + 1)
+    },
+
+    onEllipsisClick: function (kind) {
+      if (this.effectiveJumpStep <= 0 || this.disabled) return
+      var delta = kind === 'ellipsis-start' ? -this.effectiveJumpStep : this.effectiveJumpStep
+      this.select(this.currentPage + delta)
+    },
+
+    resolvePageAriaLabel: function (page) {
+      if (typeof this.pageAriaLabel === 'function') {
+        return this.pageAriaLabel(page)
+      }
+      return page === this.currentPage ? 'Page ' + page + ', current page' : 'Go to page ' + page
+    }
+  }
+}
+</script>
+
+<style src="./pagination.css" scoped></style>

package/src/components/pagination/pagination.css

@@ -0,0 +1,13 @@
+.ui-pagination {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  font-family: var(--font-family-body);
+  color: var(--primary-fg);
+}
+
+.ui-pagination--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}

package/src/components/radio/Radio.vue

@@ -0,0 +1,74 @@
+<template>
+  <label
+    class="ui-radio"
+    :class="{
+      checked: isChecked,
+      disabled: isDisabled,
+      error: isError
+    }"
+  >
+    <input type="radio" class="ui-radio__input" :checked="isChecked" :disabled="isDisabled" @change="handleChange" />
+
+    <span class="ui-radio__inner"></span>
+
+    <div class="ui-radio__label_wrapper">
+      <span class="ui-radio__label">
+        <slot>
+          {{ label }}
+        </slot>
+      </span>
+      <span class="ui-radio__label_extra">
+        <slot name="extraLabel"></slot>
+      </span>
+    </div>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'Radio',
+  inject: {
+    radioGroup: { default: null }
+  },
+  props: {
+    label: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      required: true
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isChecked() {
+      return this.radioGroup ? this.radioGroup.value === this.value : this.checked
+    },
+    isDisabled() {
+      return this.disabled || (this.radioGroup ? this.radioGroup.disabled : false)
+    },
+    isError() {
+      return this.error || (this.radioGroup ? this.radioGroup.error : false)
+    }
+  },
+  methods: {
+    handleChange() {
+      this.radioGroup.select(this.value)
+    }
+  }
+}
+</script>
+
+<style src="./radio.css" scoped></style>

package/src/components/radio/radio.css

@@ -0,0 +1,89 @@
+.ui-radio {
+  --size: var(--spacing-md);
+  --label-gap: var(--spacing-xs);
+  --label-color: var(--color-neutral-700);
+  --border-color: var(--border-3);
+  --focus-color: var(--border-primary);
+  --error-focus-color: var(--color-red-200);
+  --error-color: var(--color-red-500);
+  --inner-bg: var(--color-brand-shades-600);
+  --disabled-border-color: var(--color-neutral-200);
+  --disabled-checked-border-color: var(--color-neutral-950);
+  --disabled-inner-bg: var(--color-neutral-950);
+
+  position: relative;
+  display: inline-flex;
+  align-items: start;
+  gap: var(--label-gap);
+  cursor: pointer;
+  user-select: none;
+  color: var(--label-color);
+  transition: all 0.2s;
+}
+.ui-radio__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.ui-radio__inner {
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  border: 1px solid var(--border-color);
+  border-radius: 50%;
+  background: #fff;
+  box-sizing: border-box;
+  transition: all 0.2s;
+  box-shadow: var(--shadow-xs);
+  margin-top: 2px;
+}
+.ui-radio__inner::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.2s ease;
+  background: var(--inner-bg);
+}
+.ui-radio:hover .ui-radio__inner {
+  box-shadow: 0 0 0 3px var(--focus-color);
+}
+.ui-radio.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.ui-radio.disabled.checked {
+  opacity: 0.3;
+}
+.ui-radio.disabled .ui-radio__inner {
+  border-color: var(--disabled-border-color);
+}
+.ui-radio.disabled.checked .ui-radio__inner {
+  border-color: var(--disabled-checked-border-color);
+}
+.ui-radio.disabled.checked .ui-radio__inner::after {
+  background: var(--disabled-inner-bg);
+}
+
+.ui-radio.error:hover .ui-radio__inner {
+  box-shadow: 0 0 0 3px var(--error-focus-color);
+}
+.ui-radio.error .ui-radio__inner {
+  border-color: var(--error-color);
+}
+.ui-radio.error .ui-radio__inner::after {
+  background: var(--error-color);
+}
+
+.ui-radio.checked .ui-radio__inner::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.ui-radio__label_wrapper {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/radio-group/RadioGroup.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="ui-radio-group" :class="`ui-radio-group--${direction}`">
+    <slot>
+      <Radio
+        v-for="opt in normalizedOptions"
+        :key="opt.value"
+        :value="opt.value"
+        :label="opt.label"
+        :disabled="opt.disabled"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+import Radio from '../radio/Radio.vue'
+
+export default {
+  name: 'RadioGroup',
+  components: { Radio },
+  provide() {
+    return { radioGroup: this }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  emits: ['change'],
+
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    }
+  },
+  computed: {
+    normalizedOptions() {
+      return this.options.map(opt =>
+        typeof opt === 'string'
+          ? { label: opt, value: opt, disabled: false }
+          : { label: opt.label || opt.value, value: opt.value, disabled: !!opt.disabled }
+      )
+    }
+  },
+  methods: {
+    select(val) {
+      this.$emit('change', val)
+    }
+  }
+}
+</script>
+
+<style src="./radio_group.css" scoped></style>

package/src/components/radio-group/radio_group.css

@@ -0,0 +1,11 @@
+.ui-radio-group {
+  display: flex;
+  gap: var(--spacing-sm, 8px);
+}
+.ui-radio-group--vertical {
+  flex-direction: column;
+}
+.ui-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}