@bigbot-community/bigbot-ui 1.0.1

package/src/components/molecules/BrCard/BrCard.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CardProps } from './types'
+
+const props = withDefaults(defineProps<CardProps>(), {
+  variant: 'elevated',
+  size: 'md',
+  clickable: false,
+  imagePosition: 'top',
+  disabled: false,
+  loading: false,
+  rounded: 'md',
+  fullWidth: false,
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+
+const classes = computed(() => [
+  'br-card',
+  `br-card--${props.variant}`,
+  `br-card--${props.size}`,
+  `br-card--rounded-${props.rounded}`,
+  `br-card--image-${props.imagePosition}`,
+  {
+    'br-card--clickable': props.clickable,
+    'br-card--disabled': props.disabled,
+    'br-card--loading': props.loading,
+    'br-card--full-width': props.fullWidth,
+  },
+])
+
+const imageStyle = computed(() => {
+  if (!props.imageHeight) return {}
+  const height = typeof props.imageHeight === 'number' ? `${props.imageHeight}px` : props.imageHeight
+  return { height }
+})
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled || props.loading) return
+  emit('click', event)
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable && !disabled ? 0 : undefined"
+    @click="clickable ? handleClick($event) : undefined"
+    @keydown.enter="clickable ? handleClick($event as unknown as MouseEvent) : undefined"
+  >
+    <div v-if="loading" class="br-card__loader">
+      <div class="br-card__loader-spinner" />
+    </div>
+
+    <div v-if="image && (imagePosition === 'top' || imagePosition === 'left')" class="br-card__image" :style="imageStyle">
+      <slot name="image">
+        <img :src="image" alt="" />
+      </slot>
+    </div>
+
+    <div class="br-card__content">
+      <div v-if="title || subtitle || $slots.header" class="br-card__header">
+        <slot name="header">
+          <h3 v-if="title" class="br-card__title">{{ title }}</h3>
+          <p v-if="subtitle" class="br-card__subtitle">{{ subtitle }}</p>
+        </slot>
+      </div>
+
+      <div class="br-card__body">
+        <slot />
+      </div>
+
+      <div v-if="$slots.footer" class="br-card__footer">
+        <slot name="footer" />
+      </div>
+    </div>
+
+    <div v-if="image && (imagePosition === 'bottom' || imagePosition === 'right')" class="br-card__image" :style="imageStyle">
+      <slot name="image">
+        <img :src="image" alt="" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--br-white);
+  overflow: hidden;
+
+  &--elevated {
+    box-shadow: var(--br-shadow-md);
+  }
+
+  &--outlined {
+    border: 1px solid var(--br-light-300);
+  }
+
+  &--filled {
+    background: var(--br-light-100);
+  }
+
+  // Sizes
+  &--sm {
+    .br-card__content {
+      padding: var(--br-space-3);
+    }
+  }
+
+  &--md {
+    .br-card__content {
+      padding: var(--br-space-4);
+    }
+  }
+
+  &--lg {
+    .br-card__content {
+      padding: var(--br-space-6);
+    }
+  }
+
+  // Border radius
+  &--rounded-none {
+    border-radius: 0;
+  }
+
+  &--rounded-sm {
+    border-radius: var(--br-radius-sm);
+  }
+
+  &--rounded-md {
+    border-radius: var(--br-radius-md);
+  }
+
+  &--rounded-lg {
+    border-radius: var(--br-radius-lg);
+  }
+
+  &--rounded-xl {
+    border-radius: var(--br-radius-xl);
+  }
+
+  // Image positions
+  &--image-left,
+  &--image-right {
+    flex-direction: row;
+  }
+
+  &--image-right {
+    .br-card__image {
+      order: 1;
+    }
+  }
+
+  // States
+  &--clickable {
+    cursor: pointer;
+    transition: transform var(--br-transition-fast), box-shadow var(--br-transition-fast);
+
+    &:hover:not(.br-card--disabled) {
+      transform: translateY(-2px);
+      box-shadow: var(--br-shadow-lg);
+    }
+
+    &:active:not(.br-card--disabled) {
+      transform: translateY(0);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &--loading {
+    pointer-events: none;
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 10;
+  }
+
+  &__loader-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--br-light-300);
+    border-top-color: var(--br-primary-500);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  &__image {
+    flex-shrink: 0;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &__header {
+    margin-bottom: var(--br-space-3);
+  }
+
+  &__title {
+    margin: 0;
+    font-size: var(--br-text-lg);
+    font-weight: var(--br-font-semibold);
+    color: var(--br-dark-800);
+    line-height: 1.3;
+  }
+
+  &__subtitle {
+    margin: var(--br-space-1) 0 0;
+    font-size: var(--br-text-sm);
+    color: var(--br-dark-500);
+  }
+
+  &__body {
+    flex: 1;
+    color: var(--br-dark-600);
+    font-size: var(--br-text-md);
+    line-height: 1.5;
+  }
+
+  &__footer {
+    margin-top: var(--br-space-4);
+    padding-top: var(--br-space-3);
+    border-top: 1px solid var(--br-light-200);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/components/molecules/BrCard/index.ts

@@ -0,0 +1,2 @@
+export { default as BrCard } from './BrCard.vue'
+export * from './types'

package/src/components/molecules/BrCard/types.ts

@@ -0,0 +1,72 @@
+export type CardVariant = 'elevated' | 'outlined' | 'filled'
+export type CardSize = 'sm' | 'md' | 'lg'
+
+export interface CardProps {
+  /**
+   * Card variant
+   * @default 'elevated'
+   */
+  variant?: CardVariant
+
+  /**
+   * Card padding size
+   * @default 'md'
+   */
+  size?: CardSize
+
+  /**
+   * Make card clickable
+   * @default false
+   */
+  clickable?: boolean
+
+  /**
+   * Card title
+   */
+  title?: string
+
+  /**
+   * Card subtitle
+   */
+  subtitle?: string
+
+  /**
+   * Card image URL
+   */
+  image?: string
+
+  /**
+   * Image position
+   * @default 'top'
+   */
+  imagePosition?: 'top' | 'bottom' | 'left' | 'right'
+
+  /**
+   * Image height
+   */
+  imageHeight?: string | number
+
+  /**
+   * Disable card
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Loading state
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * Border radius
+   * @default 'md'
+   */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+
+  /**
+   * Full width
+   * @default false
+   */
+  fullWidth?: boolean
+}

package/src/components/molecules/BrFormField/BrFormField.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import type { FormFieldProps } from './types'
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  labelPosition: 'top',
+  required: false,
+  error: false,
+  success: false,
+  disabled: false,
+})
+
+const slots = useSlots()
+
+const classes = computed(() => [
+  'br-form-field',
+  `br-form-field--label-${props.labelPosition}`,
+  {
+    'br-form-field--error': props.error,
+    'br-form-field--success': props.success,
+    'br-form-field--disabled': props.disabled,
+    'br-form-field--has-prefix': !!slots.prefix,
+    'br-form-field--has-suffix': !!slots.suffix,
+  },
+])
+
+const messageType = computed(() => {
+  if (props.error && props.errorMessage) return 'error'
+  if (props.success && props.successMessage) return 'success'
+  if (props.helperText) return 'helper'
+  return null
+})
+
+const message = computed(() => {
+  if (props.error && props.errorMessage) return props.errorMessage
+  if (props.success && props.successMessage) return props.successMessage
+  return props.helperText
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <label v-if="label" class="br-form-field__label">
+      {{ label }}
+      <span v-if="required" class="br-form-field__required">*</span>
+    </label>
+
+    <div class="br-form-field__control">
+      <span v-if="$slots.prefix" class="br-form-field__prefix">
+        <slot name="prefix" />
+      </span>
+
+      <div class="br-form-field__input">
+        <slot />
+      </div>
+
+      <span v-if="$slots.suffix" class="br-form-field__suffix">
+        <slot name="suffix" />
+      </span>
+    </div>
+
+    <div v-if="message || charCount || hint" class="br-form-field__footer">
+      <span
+        v-if="message"
+        class="br-form-field__message"
+        :class="`br-form-field__message--${messageType}`"
+      >
+        <svg v-if="messageType === 'error'" viewBox="0 0 24 24" class="br-form-field__icon">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor" />
+        </svg>
+        <svg v-else-if="messageType === 'success'" viewBox="0 0 24 24" class="br-form-field__icon">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor" />
+        </svg>
+        {{ message }}
+      </span>
+
+      <span v-if="charCount" class="br-form-field__char-count">
+        {{ charCount.current }}/{{ charCount.max }}
+      </span>
+    </div>
+
+    <span v-if="hint" class="br-form-field__hint">
+      {{ hint }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--br-space-1);
+
+  &--label-left {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--br-space-3);
+
+    .br-form-field__label {
+      min-width: 120px;
+      padding-top: var(--br-space-2);
+    }
+
+    .br-form-field__control {
+      flex: 1;
+    }
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: var(--br-space-1);
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-700);
+  }
+
+  &__required {
+    color: var(--br-danger-500);
+  }
+
+  &__control {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+  }
+
+  &__input {
+    flex: 1;
+    display: flex;
+
+    :deep(input),
+    :deep(select),
+    :deep(textarea) {
+      width: 100%;
+    }
+  }
+
+  &__prefix,
+  &__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--br-space-3);
+    background: var(--br-light-100);
+    border: 1px solid var(--br-light-300);
+    color: var(--br-dark-500);
+    font-size: var(--br-text-sm);
+  }
+
+  &__prefix {
+    border-right: none;
+    border-radius: var(--br-radius-md) 0 0 var(--br-radius-md);
+  }
+
+  &__suffix {
+    border-left: none;
+    border-radius: 0 var(--br-radius-md) var(--br-radius-md) 0;
+  }
+
+  &--has-prefix :deep(input),
+  &--has-prefix :deep(select) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &--has-suffix :deep(input),
+  &--has-suffix :deep(select) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 20px;
+  }
+
+  &__message {
+    display: flex;
+    align-items: center;
+    gap: var(--br-space-1);
+    font-size: var(--br-text-sm);
+
+    &--helper {
+      color: var(--br-dark-500);
+    }
+
+    &--error {
+      color: var(--br-danger-500);
+    }
+
+    &--success {
+      color: var(--br-success-500);
+    }
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+
+  &__char-count {
+    font-size: var(--br-text-xs);
+    color: var(--br-dark-400);
+  }
+
+  &__hint {
+    font-size: var(--br-text-xs);
+    color: var(--br-dark-400);
+    font-style: italic;
+  }
+
+  // States
+  &--error {
+    .br-form-field__label {
+      color: var(--br-danger-600);
+    }
+
+    :deep(input),
+    :deep(select),
+    :deep(textarea) {
+      border-color: var(--br-danger-500);
+    }
+  }
+
+  &--success {
+    :deep(input),
+    :deep(select),
+    :deep(textarea) {
+      border-color: var(--br-success-500);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/molecules/BrFormField/index.ts

@@ -0,0 +1,2 @@
+export { default as BrFormField } from './BrFormField.vue'
+export * from './types'

package/src/components/molecules/BrFormField/types.ts

@@ -0,0 +1,64 @@
+export interface FormFieldProps {
+  /**
+   * Field label
+   */
+  label?: string
+
+  /**
+   * Label position
+   * @default 'top'
+   */
+  labelPosition?: 'top' | 'left' | 'floating'
+
+  /**
+   * Required field indicator
+   * @default false
+   */
+  required?: boolean
+
+  /**
+   * Helper text
+   */
+  helperText?: string
+
+  /**
+   * Error message
+   */
+  errorMessage?: string
+
+  /**
+   * Success message
+   */
+  successMessage?: string
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Success state
+   * @default false
+   */
+  success?: boolean
+
+  /**
+   * Character count
+   */
+  charCount?: {
+    current: number
+    max: number
+  }
+
+  /**
+   * Hint text (shows on focus)
+   */
+  hint?: string
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+}