webcake-ui-kit 1.0.0 → 1.0.1

package/src/components/button/button.css

@@ -1,42 +1,276 @@
+/* ============================================================
+   Base
+   ============================================================ */
 .ui-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  margin: 0;
   cursor: pointer;
-  font-weight: 500;
+  font-family: var(--font-family-body);
+  font-weight: var(--paragraph-medium-font-weight);
+  text-align: center;
+  white-space: nowrap;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease,
+    color 0.12s ease;
+  -webkit-appearance: none;
 }
 
+.ui-btn__label {
+  display: inline-flex;
+}
+
+.ui-btn__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+/* ============================================================
+   Sizes
+   ============================================================ */
+.ui-btn--xs {
+  height: 24px;
+  padding: var(--spacing-3) 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 :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.ui-btn--sm {
+  height: 32px;
+  padding: var(--spacing-6) var(--spacing-sm);
+  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-btn--sm .ui-btn__icon,
+.ui-btn--sm :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-btn--md {
+  height: 36px;
+  padding: var(--spacing-xs) var(--spacing-md);
+  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-btn--md .ui-btn__icon,
+.ui-btn--md :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-btn--lg {
+  height: 40px;
+  padding: var(--spacing-10) var(--spacing-xl);
+  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-btn--lg .ui-btn__icon,
+.ui-btn--lg :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+.ui-btn--xl {
+  height: 48px;
+  padding: var(--spacing-sm) var(--spacing-2xl);
+  gap: var(--spacing-xs);
+  font-size: var(--paragraph-regular-font-size);
+  line-height: var(--paragraph-regular-line-height);
+  letter-spacing: var(--paragraph-regular-letter-spacing);
+}
+.ui-btn--xl .ui-btn__icon,
+.ui-btn--xl :deep(svg) {
+  width: 20px;
+  height: 20px;
+}
+
+/* ============================================================
+   Roundness
+   - mini (xs) uses rounded-lg by default; other sizes use 10px.
+   - round = full pill across all sizes.
+   ============================================================ */
+.ui-btn--round-default {
+  border-radius: var(--radius-10);
+}
+.ui-btn--xs.ui-btn--round-default {
+  border-radius: var(--rounded-lg);
+}
+.ui-btn--round-round {
+  border-radius: var(--rounded-full);
+}
+
+/* ============================================================
+   Variants
+   ============================================================ */
+
+/* Primary */
 .ui-btn--primary {
-  background: #3b82f6;
-  color: white;
+  background: var(--primary-brand-bg);
+  color: var(--inverse-fg);
+}
+.ui-btn--primary:hover,
+.ui-btn--primary:active {
+  background: var(--primary-brand-hover);
+}
+
+/* Neutral */
+.ui-btn--neutral {
+  background: var(--button-black);
+  color: var(--button-black-fg);
+}
+.ui-btn--neutral:hover,
+.ui-btn--neutral:active {
+  background: var(--button-black-hover);
 }
+
+/* Secondary */
 .ui-btn--secondary {
-  background: #6b7280;
-  color: white;
+  background: var(--secondary-bg);
+  color: var(--secondary-fg);
+}
+.ui-btn--secondary:hover,
+.ui-btn--secondary:active {
+  background: var(--secondary-hover);
 }
-.ui-btn--danger {
-  background: #ef4444;
-  color: white;
+
+/* Outline */
+.ui-btn--outline {
+  background: var(--primary-bg);
+  color: var(--primary-fg);
+  border: 1px solid var(--border-primary);
+  box-shadow: var(--shadow-xs);
 }
-.ui-btn--success {
-  background: #10b981;
-  color: white;
+.ui-btn--outline:hover,
+.ui-btn--outline:active {
+  background: var(--outline-hover);
+  box-shadow: none;
 }
 
-.ui-btn--small {
-  padding: 6px 12px;
-  font-size: 14px;
+/* Ghost */
+.ui-btn--ghost {
+  background: var(--ghost);
+  color: var(--primary-fg);
+}
+.ui-btn--ghost:hover,
+.ui-btn--ghost:active {
+  background: var(--ghost-hover);
+}
+
+/* Destructive */
+.ui-btn--destructive {
+  background: var(--destructive);
+  color: var(--destructive-inverse-fg);
+}
+.ui-btn--destructive:hover,
+.ui-btn--destructive:active {
+  background: var(--destructive-hover);
 }
-.ui-btn--medium {
-  padding: 8px 16px;
-  font-size: 16px;
+
+/* Link — text-only button on transparent ghost bg, brand-colored. */
+.ui-btn--link {
+  background: var(--ghost);
+  color: var(--primary-brand-fg);
 }
-.ui-btn--large {
-  padding: 12px 20px;
-  font-size: 18px;
+.ui-btn--link:hover,
+.ui-btn--link:active {
+  color: var(--primary-brand-hover);
 }
 
+/* ============================================================
+   Focus
+   ============================================================ */
+.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
+   ============================================================ */
 .ui-btn:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================================
+   Icon-only — square button, uniform padding per size.
+   Width = height; default slot content rendered in .ui-btn__icon
+   so the existing per-size icon sizing applies (16 for xs, 20
+   otherwise).
+   ============================================================ */
+.ui-btn--icon-only {
+  gap: 0;
+}
+
+.ui-btn--icon-only.ui-btn--xs {
+  min-width: 24px;
+  padding: var(--spacing-3xs);
+}
+.ui-btn--icon-only.ui-btn--sm {
+  min-width: 32px;
+  padding: var(--spacing-6);
+}
+.ui-btn--icon-only.ui-btn--md {
+  min-width: 36px;
+  padding: var(--spacing-xs);
+}
+.ui-btn--icon-only.ui-btn--lg {
+  min-width: 40px;
+  padding: var(--spacing-10);
+}
+.ui-btn--icon-only.ui-btn--xl {
+  min-width: 48px;
+  padding: var(--spacing-sm);
+}
+
+/* ============================================================
+   Loading — spinner replaces left icon, click suppressed.
+   Spinner inherits currentColor so it matches the variant fg.
+   ============================================================ */
+.ui-btn--loading {
+  cursor: progress;
+}
+
+.ui-btn__spinner {
+  animation: ui-btn-spin 0.7s linear infinite;
+  transform-origin: center center;
+  opacity: 0.85;
+}
+
+@keyframes ui-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/src/components/button-group/ButtonGroup.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="ui-button-group" role="group" :aria-label="label || undefined" @click="onClick">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ButtonGroup',
+  props: {
+    label: { type: String, default: '' }
+  },
+  emits: ['click'],
+  methods: {
+    onClick(e) {
+      const btn = e.target.closest('.ui-btn')
+      if (!btn || !this.$el.contains(btn)) return
+      const value = btn.getAttribute('value') || btn.textContent.trim()
+      this.$emit('click', value, e)
+    }
+  }
+}
+</script>
+
+<style src="./button-group.css"></style>

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

@@ -0,0 +1,30 @@
+.ui-button-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+
+/* Reset radius on all children, re-apply corners to first/last */
+.ui-button-group .ui-btn {
+  border-radius: 0;
+}
+.ui-button-group .ui-btn:first-child {
+  border-top-left-radius: var(--rounded-xl);
+  border-bottom-left-radius: var(--rounded-xl);
+}
+.ui-button-group .ui-btn:last-child {
+  border-top-right-radius: var(--rounded-xl);
+  border-bottom-right-radius: var(--rounded-xl);
+}
+.ui-button-group .ui-btn:first-child:last-child {
+  border-radius: var(--rounded-xl);
+}
+
+/* Outlined buttons: collapse shared borders, lift on interaction */
+.ui-button-group .ui-btn--outline:not(:first-child) {
+  margin-left: -1px;
+}
+.ui-button-group .ui-btn--outline:hover:not(:disabled),
+.ui-button-group .ui-btn--outline:focus-visible {
+  position: relative;
+  z-index: 1;
+}

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,55 @@
+<template>
+  <span :class="['ui-checkbox', error && 'ui-checkbox--error', disabled && 'ui-checkbox--disabled']">
+    <input
+      ref="input"
+      type="checkbox"
+      class="ui-checkbox__input"
+      :checked="isChecked"
+      :disabled="disabled"
+      v-bind="$attrs"
+      @change="onChange"
+    />
+    <span class="ui-checkbox__box" aria-hidden="true">
+      <svg v-if="isChecked" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+        <path
+          d="M11.3055 3.13885C11.5049 2.93952 11.8285 2.93952 12.0279 3.13885C12.2272 3.33818 12.2272 3.66185 12.0279 3.86118L5.61119 10.2778C5.41186 10.4772 5.08819 10.4772 4.88886 10.2778L1.97219 7.36118C1.77286 7.16185 1.77286 6.83818 1.97219 6.63885C2.17152 6.43952 2.49519 6.43952 2.69452 6.63885L5.25002 9.19435L11.3055 3.13885Z"
+          fill="white"
+        />
+      </svg>
+    </span>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Checkbox',
+  inheritAttrs: false,
+  model: { prop: 'checked', event: 'change' },
+  props: {
+    checked: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ['change', 'update:modelValue'],
+  computed: {
+    isChecked() {
+      return this.modelValue !== undefined ? this.modelValue : this.checked
+    }
+  },
+  methods: {
+    onChange(e) {
+      const next = e.target.checked
+      this.$emit('change', next, e)
+      this.$emit('update:modelValue', next, e)
+      this.$nextTick(() => {
+        if (this.$refs.input) {
+          this.$refs.input.checked = this.isChecked
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style src="./checkbox.css" scoped></style>

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,86 @@
+.ui-checkbox {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+}
+
+.ui-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+}
+
+.ui-checkbox__input:disabled {
+  cursor: not-allowed;
+}
+
+.ui-checkbox__box {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--input);
+  border: 1px solid #d1d1d1;
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-xs);
+  color: var(--inverse-fg);
+  pointer-events: none;
+  transition:
+    background-color 0.12s ease,
+    border-color 0.12s ease;
+}
+
+.ui-checkbox__input:checked + .ui-checkbox__box,
+.ui-checkbox__input:indeterminate + .ui-checkbox__box {
+  background: var(--primary-brand-bg);
+  border-color: var(--primary-brand-bg);
+  box-shadow: none;
+}
+
+.ui-checkbox--error .ui-checkbox__box {
+  border-color: var(--destructive-border);
+}
+
+.ui-checkbox--error .ui-checkbox__input:checked + .ui-checkbox__box,
+.ui-checkbox--error .ui-checkbox__input:indeterminate + .ui-checkbox__box {
+  background: var(--destructive);
+  border-color: var(--destructive);
+}
+
+.ui-checkbox__input:focus-visible + .ui-checkbox__box {
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.ui-checkbox--error .ui-checkbox__input:focus-visible + .ui-checkbox__box {
+  box-shadow: 0 0 0 3px var(--focus-ring-error);
+}
+
+.ui-checkbox--disabled {
+  opacity: 0.5;
+}
+
+.ui-checkbox__check {
+  width: 10px;
+  height: 10px;
+}
+
+.ui-checkbox__dash {
+  width: 8px;
+  height: 1.5px;
+  background: currentColor;
+  border-radius: 1px;
+}

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -0,0 +1,50 @@
+<template>
+  <label :class="['ui-checkbox-group', `ui-checkbox-group--${layout}`, disabled && 'ui-checkbox-group--disabled']">
+    <Checkbox
+      class="ui-checkbox-group__box"
+      :checked="isChecked"
+      :error="error"
+      :disabled="disabled"
+      @change="onChange"
+    />
+    <span class="ui-checkbox-group__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
+</template>
+
+<script>
+import Checkbox from '../checkbox/Checkbox.vue'
+
+export default {
+  name: 'CheckboxGroup',
+  components: { Checkbox },
+  model: { prop: 'checked', event: 'change' },
+  props: {
+    layout: {
+      type: String,
+      default: 'inline',
+      validator: v => ['inline', 'block'].includes(v)
+    },
+    checked: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: undefined },
+    error: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    label: { type: String, default: '' }
+  },
+  emits: ['change', 'update:modelValue'],
+  computed: {
+    isChecked() {
+      return this.modelValue !== undefined ? this.modelValue : this.checked
+    }
+  },
+  methods: {
+    onChange(next) {
+      this.$emit('change', next)
+      this.$emit('update:modelValue', next)
+    }
+  }
+}
+</script>
+
+<style src="./checkbox-group.css" scoped></style>

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

@@ -0,0 +1,35 @@
+.ui-checkbox-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  height: 24px;
+  cursor: pointer;
+  font-family: var(--font-family-body);
+  font-size: var(--paragraph-small-font-size);
+  line-height: var(--paragraph-small-line-height);
+  letter-spacing: var(--paragraph-small-letter-spacing);
+  color: var(--secondary-fg);
+}
+
+.ui-checkbox-group--block {
+  display: flex;
+  width: 100%;
+}
+
+.ui-checkbox-group--block .ui-checkbox-group__label {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+.ui-checkbox-group--disabled {
+  cursor: not-allowed;
+}
+
+.ui-checkbox-group__label {
+  text-align: left;
+  white-space: nowrap;
+}
+
+.ui-checkbox-group--block .ui-checkbox-group__label {
+  white-space: normal;
+}