webcake-ui-kit 1.0.0 → 1.0.1

package/src/components/tabs/tabs.css

@@ -0,0 +1,118 @@
+.ui-tabs {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px;
+  background: var(--secondary-bg);
+  border-radius: var(--radius-10);
+  box-sizing: border-box;
+}
+
+.ui-tabs--mini {
+  padding: 2px;
+}
+.ui-tabs--md {
+  padding: 4px;
+}
+.ui-tabs--lg {
+  padding: 4px;
+}
+
+/* — tab item — */
+.ui-tabs__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 var(--spacing-xs);
+  border: none;
+  background: none;
+  border-radius: var(--radius);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  font-weight: 500;
+  color: var(--secondary-fg);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  transition: color 0.1s;
+}
+
+.ui-tabs__item:hover:not(.ui-tabs__item--active):not(.ui-tabs__item--disabled) {
+  color: var(--primary-fg);
+}
+
+.ui-tabs__item:focus-visible {
+  box-shadow: var(--shadow-focus-ring);
+}
+
+.ui-tabs__item--active {
+  background: var(--primary-bg);
+  color: var(--primary-fg);
+  box-shadow: var(--shadow-sm);
+  cursor: default;
+}
+
+.ui-tabs__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* — sizes — */
+.ui-tabs--mini .ui-tabs__item {
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+}
+
+.ui-tabs--md .ui-tabs__item {
+  height: 28px;
+}
+
+.ui-tabs--lg .ui-tabs__item {
+  height: 32px;
+  padding: 0 var(--spacing-10);
+}
+
+/* — icon + label elements — */
+.ui-tabs__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.ui-tabs--mini .ui-tabs__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.ui-tabs__label {
+  flex-shrink: 0;
+}
+
+/* — counter badge — */
+.ui-tabs__counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--rounded-full);
+  background: var(--tertiary-bg);
+  color: var(--primary-fg);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  font-weight: 600;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}

package/src/components/tag/Tag.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="ui-tag" :class="[`ui-tag--type-${type}`, `ui-tag--${size}`, { 'ui-tag--with-icon': hasIcon }]">
+    <span v-if="hasIcon" class="ui-tag__icon"><slot name="icon" /></span>
+    <span class="ui-tag__label"
+      ><slot>{{ label }}</slot></span
+    >
+    <span v-if="counter > 0" class="ui-tag__counter">{{ counter }}</span>
+    <button v-if="closable" class="ui-tag__close" type="button" @click.stop="$emit('close')">
+      <svg class="ui-tag__close-icon" viewBox="0 0 12 12" fill="none">
+        <path d="M2.5 2.5L9.5 9.5M9.5 2.5L2.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+      </svg>
+    </button>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Tag',
+  props: {
+    type: {
+      type: String,
+      default: 'outline',
+      validator: function (v) {
+        return ['default', 'outline'].includes(v)
+      }
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: function (v) {
+        return ['sm', 'md', 'lg'].includes(v)
+      }
+    },
+    counter: { type: Number, default: 0 },
+    closable: { type: Boolean, default: false },
+    label: { type: String, default: '' }
+  },
+  emits: ['close'],
+  computed: {
+    hasIcon: function () {
+      return !!((this.$scopedSlots && this.$scopedSlots['icon']) || this.$slots['icon'])
+    }
+  }
+}
+</script>
+
+<style src="./tag.css" scoped></style>

package/src/components/tag/tag.css

@@ -0,0 +1,115 @@
+.ui-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  border-radius: var(--rounded-lg);
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+/* — type — */
+.ui-tag--type-default {
+  background: var(--secondary-bg);
+  color: var(--primary-fg);
+}
+.ui-tag--type-default:hover {
+  background: #f0f0f0;
+}
+
+.ui-tag--type-outline {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border-primary);
+  color: var(--secondary-fg);
+}
+.ui-tag--type-outline:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--primary-fg);
+}
+
+/* — sizes — */
+/* sm: mini font, 6px radius, 2px 8px padding — same as base */
+
+.ui-tag--md {
+  border-radius: var(--radius);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+}
+
+.ui-tag--lg {
+  padding: var(--spacing-2xs) 10px;
+  border-radius: var(--radius-10);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+}
+
+/* reduce left padding when icon slot is present */
+.ui-tag--with-icon.ui-tag--sm,
+.ui-tag--with-icon.ui-tag--md {
+  padding-left: var(--spacing-2xs);
+}
+.ui-tag--with-icon.ui-tag--lg {
+  padding-left: 6px;
+}
+
+/* — elements — */
+.ui-tag__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border-radius: var(--rounded-full);
+  overflow: hidden;
+}
+
+.ui-tag__counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: var(--rounded-full);
+  background: var(--tertiary-bg);
+  color: var(--primary-fg);
+  font-size: var(--paragraph-mini-font-size);
+  line-height: var(--paragraph-mini-line-height);
+  font-weight: 600;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.ui-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 2px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: inherit;
+  border-radius: var(--rounded-md);
+  flex-shrink: 0;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.ui-tag__close:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.ui-tag__close-icon {
+  width: 12px;
+  height: 12px;
+  display: block;
+  flex-shrink: 0;
+}

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,112 @@
+<template>
+  <button
+    type="button"
+    :class="[
+      'ui-toggle',
+      'ui-toggle--variant-' + variant,
+      'ui-toggle--' + computedSize,
+      'ui-toggle--round-' + roundness,
+      isActive && 'ui-toggle--active',
+      isIconOnly && 'ui-toggle--icon-only',
+      isInGroup && 'ui-toggle--in-group'
+    ]"
+    :disabled="disabled"
+    :aria-pressed="isActive ? 'true' : 'false'"
+    @click="handleClick"
+  >
+    <span v-if="hasIconLeft" class="ui-toggle__icon">
+      <slot name="icon-left" />
+    </span>
+    <span v-if="hasIcon" class="ui-toggle__icon">
+      <slot name="icon" />
+    </span>
+    <span v-if="!isIconOnly && (hasDefaultSlot || label)" class="ui-toggle__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span v-if="hasIconRight" class="ui-toggle__icon">
+      <slot name="icon-right" />
+    </span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Toggle',
+  inject: {
+    toggleGroupCtx: { default: null },
+    groupSize: { default: 'md' }
+  },
+  model: { prop: 'active', event: 'change' },
+  props: {
+    variant: {
+      type: String,
+      default: 'outlined',
+      validator: v => ['outlined', 'ghost'].includes(v)
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+    },
+    roundness: {
+      type: String,
+      default: 'default',
+      validator: v => ['default', 'round'].includes(v)
+    },
+    active: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    value: { type: [String, Number], default: null },
+    label: { type: String, default: '' },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['change', 'update:modelValue'],
+  computed: {
+    computedSize() {
+      return this.toggleGroupCtx ? this.groupSize : this.size
+    },
+    isInGroup() {
+      return !!this.toggleGroupCtx
+    },
+    standaloneActive() {
+      return this.modelValue !== undefined ? this.modelValue : this.active
+    },
+    isActive() {
+      if (this.isInGroup) {
+        return this.toggleGroupCtx.isSelected(this.value)
+      }
+      return this.standaloneActive
+    },
+    hasIconLeft() {
+      return !!this.$slots['icon-left']
+    },
+    hasIconRight() {
+      return !!this.$slots['icon-right']
+    },
+    hasIcon() {
+      return !!this.$slots['icon']
+    },
+    hasDefaultSlot() {
+      return !!this.$slots['default']
+    },
+    isIconOnly() {
+      return !this.label && !this.hasDefaultSlot && this.hasIcon && !this.hasIconLeft && !this.hasIconRight
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.disabled) return
+      if (this.isInGroup) {
+        if (this.value !== null) {
+          this.toggleGroupCtx.select(this.value)
+        }
+        return
+      }
+      const next = !this.standaloneActive
+      this.$emit('change', next)
+      this.$emit('update:modelValue', next)
+    }
+  }
+}
+</script>
+
+<style src="./toggle.css" scoped></style>

package/src/components/toggle/toggle.css

@@ -0,0 +1,174 @@
+/* ============================================================
+   Base
+   ============================================================ */
+.ui-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  margin: 0;
+  cursor: pointer;
+  font-family: var(--font-family-body);
+  font-weight: var(--paragraph-medium-font-weight);
+  text-align: center;
+  white-space: nowrap;
+  background: transparent;
+  color: var(--primary-fg);
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.ui-toggle__label {
+  display: inline-flex;
+}
+
+.ui-toggle__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+/* ============================================================
+   Sizes  (Mini → xs, Small → sm, Default → md, Large → lg)
+   ============================================================ */
+.ui-toggle--xs {
+  height: 24px;
+  padding: var(--spacing-3) var(--spacing-2xs);
+  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-toggle--xs .ui-toggle__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-toggle--sm {
+  height: 32px;
+  padding: var(--spacing-5p5) var(--spacing-6);
+  gap: var(--spacing-6);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+}
+.ui-toggle--sm .ui-toggle__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-toggle--md {
+  height: 36px;
+  padding: var(--spacing-7p5) var(--spacing-xs);
+  gap: 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-toggle--md .ui-toggle__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-toggle--lg {
+  height: 40px;
+  padding: var(--spacing-9p5) var(--spacing-sm);
+  gap: 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-toggle--lg .ui-toggle__icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* ============================================================
+   Roundness
+   ============================================================ */
+.ui-toggle--round-default {
+  border-radius: var(--radius-10);
+}
+.ui-toggle--xs.ui-toggle--round-default {
+  border-radius: var(--rounded-lg);
+}
+.ui-toggle--lg.ui-toggle--round-default {
+  border-radius: var(--rounded-2xl);
+}
+.ui-toggle--round-round {
+  border-radius: var(--rounded-full);
+}
+
+/* ============================================================
+   Variant — Outlined
+   ============================================================ */
+.ui-toggle--variant-outlined {
+  background: var(--primary-bg);
+  color: var(--primary-fg);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
+}
+.ui-toggle--variant-outlined.ui-toggle--active {
+  background: var(--outline-active);
+  color: var(--primary-fg);
+}
+
+/* ============================================================
+   Variant — Ghost
+   ============================================================ */
+.ui-toggle--variant-ghost {
+  background: var(--ghost);
+  color: var(--primary-fg);
+  border: 1px solid transparent;
+}
+.ui-toggle--variant-ghost.ui-toggle--active {
+  background: var(--secondary-bg);
+  color: var(--primary-fg);
+}
+
+/* ============================================================
+   Focus
+   ============================================================ */
+.ui-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus-ring);
+}
+
+/* ============================================================
+   Disabled
+   ============================================================ */
+.ui-toggle:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================================
+   Icon-only — square button per size
+   ============================================================ */
+.ui-toggle--icon-only {
+  gap: 0;
+}
+.ui-toggle--icon-only.ui-toggle--xs {
+  min-height: 28px;
+  min-width: 24px;
+  padding: var(--spacing-3xs);
+}
+.ui-toggle--icon-only.ui-toggle--sm {
+  min-width: 32px;
+  padding: var(--spacing-6);
+}
+.ui-toggle--icon-only.ui-toggle--md {
+  min-width: 36px;
+  padding: var(--spacing-xs);
+}
+.ui-toggle--icon-only.ui-toggle--lg {
+  min-width: 40px;
+  padding: var(--spacing-10);
+}

package/src/components/toggle-group/ToggleGroup.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ui-toggle-group" role="group" :aria-label="label || undefined">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToggleGroup',
+  model: { prop: 'value', event: 'change' },
+  props: {
+    value: { type: [String, Number, Array], default: null },
+    modelValue: { type: [String, Number, Array], default: undefined },
+    multiple: { type: Boolean, default: false },
+    label: { type: String, default: '' },
+    size: {
+      type: String,
+      default: 'md',
+      validator: v => ['xs', 'sm', 'md', 'lg'].includes(v)
+    }
+  },
+  emits: ['change', 'update:modelValue'],
+  provide() {
+    return { toggleGroupCtx: this, groupSize: this.size }
+  },
+  computed: {
+    computedValue() {
+      return this.modelValue !== undefined ? this.modelValue : this.value
+    }
+  },
+  methods: {
+    select(val) {
+      if (val === null || val === undefined) return
+      let next
+      if (this.multiple) {
+        const arr = Array.isArray(this.computedValue) ? [...this.computedValue] : []
+        const idx = arr.indexOf(val)
+        if (idx >= 0) arr.splice(idx, 1)
+        else arr.push(val)
+        next = arr
+      } else {
+        next = this.computedValue === val ? null : val
+      }
+      this.$emit('change', next)
+      this.$emit('update:modelValue', next)
+    },
+    isSelected(val) {
+      if (val === null || val === undefined) return false
+      const v = this.computedValue
+      if (this.multiple) return Array.isArray(v) && v.includes(val)
+      return v === val
+    }
+  }
+}
+</script>
+
+<style src="./toggle-group.css"></style>

package/src/components/toggle-group/toggle-group.css

@@ -0,0 +1,68 @@
+.ui-toggle-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+/* ── In-group: reset radius, then re-apply on first/last for connected look ── */
+.ui-toggle-group .ui-toggle--in-group:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+/* default (sm / md) */
+.ui-toggle-group .ui-toggle--in-group:first-child {
+  border-top-left-radius: var(--rounded-xl);
+  border-bottom-left-radius: var(--rounded-xl);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.ui-toggle-group .ui-toggle--in-group:last-child {
+  border-top-right-radius: var(--rounded-xl);
+  border-bottom-right-radius: var(--rounded-xl);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ui-toggle-group .ui-toggle--in-group:first-child:last-child {
+  border-radius: var(--rounded-xl);
+}
+
+/* xs */
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child {
+  border-top-left-radius: var(--rounded-lg);
+  border-bottom-left-radius: var(--rounded-lg);
+}
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:last-child {
+  border-top-right-radius: var(--rounded-lg);
+  border-bottom-right-radius: var(--rounded-lg);
+}
+.ui-toggle-group .ui-toggle--xs.ui-toggle--in-group:first-child:last-child {
+  border-radius: var(--rounded-lg);
+}
+
+/* lg */
+.ui-toggle-group .ui-toggle--lg.ui-toggle--in-group:first-child {
+  border-top-left-radius: var(--rounded-2xl);
+  border-bottom-left-radius: var(--rounded-2xl);
+}
+.ui-toggle-group .ui-toggle--lg.ui-toggle--in-group:last-child {
+  border-top-right-radius: var(--rounded-2xl);
+  border-bottom-right-radius: var(--rounded-2xl);
+}
+.ui-toggle-group .ui-toggle--lg.ui-toggle--in-group:first-child:last-child {
+  border-radius: var(--rounded-2xl);
+}
+
+/* ── Outlined toggles: collapse shared borders, lift on interaction ── */
+.ui-toggle-group .ui-toggle--variant-outlined.ui-toggle--in-group:not(:first-child) {
+  margin-left: -1px;
+}
+.ui-toggle-group .ui-toggle--variant-outlined.ui-toggle--in-group:hover:not(:disabled),
+.ui-toggle-group .ui-toggle--variant-outlined.ui-toggle--in-group:focus-visible {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Active state lifts above siblings so its borders show ── */
+.ui-toggle-group .ui-toggle--in-group.ui-toggle--active {
+  position: relative;
+  z-index: 1;
+}

package/src/icons/LoaderIcon.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-loader-circle-icon lucide-loader-circle"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LoaderIcon'
+}
+</script>