@bigbot-community/bigbot-ui 1.0.1

package/src/components/atoms/BrRadio/BrRadio.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RadioProps } from './types'
+
+const props = withDefaults(defineProps<RadioProps>(), {
+  size: 'md',
+  disabled: false,
+  error: false,
+})
+
+const model = defineModel<string | number | boolean>()
+
+const classes = computed(() => [
+  'br-radio',
+  `br-radio--${props.size}`,
+  {
+    'br-radio--disabled': props.disabled,
+    'br-radio--error': props.error,
+    'br-radio--checked': model.value === props.value,
+  },
+])
+
+const inputId = computed(() => `radio-${props.name}-${props.value}`)
+
+function handleChange() {
+  if (!props.disabled) {
+    model.value = props.value
+  }
+}
+</script>
+
+<template>
+  <label :class="classes" :for="inputId">
+    <input
+      :id="inputId"
+      type="radio"
+      :name="name"
+      :value="value"
+      :checked="model === value"
+      :disabled="disabled"
+      class="br-radio__input"
+      @change="handleChange"
+    />
+    <span class="br-radio__control">
+      <span class="br-radio__dot" />
+    </span>
+    <span v-if="label || $slots.default" class="br-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <span v-if="helperText" class="br-radio__helper">{{ helperText }}</span>
+  </label>
+</template>
+
+<style lang="scss" scoped>
+.br-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--br-space-2);
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: 2px solid var(--br-dark-300);
+    border-radius: 50%;
+    background: var(--br-white);
+    transition: all var(--br-transition-fast);
+  }
+
+  &__dot {
+    border-radius: 50%;
+    background: transparent;
+    transition: all var(--br-transition-fast);
+  }
+
+  &__label {
+    color: var(--br-dark-700);
+    line-height: 1.4;
+  }
+
+  &__helper {
+    display: block;
+    width: 100%;
+    margin-top: var(--br-space-1);
+    font-size: var(--br-text-sm);
+    color: var(--br-dark-500);
+  }
+
+  // Sizes
+  &--sm {
+    .br-radio__control {
+      width: 16px;
+      height: 16px;
+    }
+    .br-radio__dot {
+      width: 8px;
+      height: 8px;
+    }
+    .br-radio__label {
+      font-size: var(--br-text-sm);
+    }
+  }
+
+  &--md {
+    .br-radio__control {
+      width: 20px;
+      height: 20px;
+    }
+    .br-radio__dot {
+      width: 10px;
+      height: 10px;
+    }
+    .br-radio__label {
+      font-size: var(--br-text-md);
+    }
+  }
+
+  &--lg {
+    .br-radio__control {
+      width: 24px;
+      height: 24px;
+    }
+    .br-radio__dot {
+      width: 12px;
+      height: 12px;
+    }
+    .br-radio__label {
+      font-size: var(--br-text-lg);
+    }
+  }
+
+  // States
+  &:hover:not(&--disabled) {
+    .br-radio__control {
+      border-color: var(--br-primary-500);
+    }
+  }
+
+  &--checked {
+    .br-radio__control {
+      border-color: var(--br-primary-500);
+    }
+    .br-radio__dot {
+      background: var(--br-primary-500);
+    }
+  }
+
+  &--error {
+    .br-radio__control {
+      border-color: var(--br-danger-500);
+    }
+    &.br-radio--checked .br-radio__dot {
+      background: var(--br-danger-500);
+    }
+    .br-radio__helper {
+      color: var(--br-danger-500);
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+</style>

package/src/components/atoms/BrRadio/BrRadioGroup.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RadioGroupProps } from './types'
+import BrRadio from './BrRadio.vue'
+
+const props = withDefaults(defineProps<RadioGroupProps>(), {
+  direction: 'vertical',
+  size: 'md',
+  disabled: false,
+  error: false,
+})
+
+const model = defineModel<string | number | boolean>()
+
+const classes = computed(() => [
+  'br-radio-group',
+  `br-radio-group--${props.direction}`,
+  {
+    'br-radio-group--error': props.error,
+  },
+])
+</script>
+
+<template>
+  <div :class="classes" role="radiogroup" :aria-label="label">
+    <span v-if="label" class="br-radio-group__label">{{ label }}</span>
+    <div class="br-radio-group__options">
+      <BrRadio
+        v-for="option in options"
+        :key="String(option.value)"
+        v-model="model"
+        :value="option.value"
+        :label="option.label"
+        :name="name"
+        :size="size"
+        :disabled="disabled || option.disabled"
+        :error="error"
+      />
+    </div>
+    <span v-if="error && errorMessage" class="br-radio-group__error">
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--br-space-2);
+
+  &__label {
+    font-size: var(--br-text-sm);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-700);
+  }
+
+  &__options {
+    display: flex;
+    gap: var(--br-space-3);
+  }
+
+  &--vertical &__options {
+    flex-direction: column;
+  }
+
+  &--horizontal &__options {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &__error {
+    font-size: var(--br-text-sm);
+    color: var(--br-danger-500);
+  }
+}
+</style>

package/src/components/atoms/BrRadio/index.ts

@@ -0,0 +1,3 @@
+export { default as BrRadio } from './BrRadio.vue'
+export { default as BrRadioGroup } from './BrRadioGroup.vue'
+export * from './types'

package/src/components/atoms/BrRadio/types.ts

@@ -0,0 +1,91 @@
+export type RadioSize = 'sm' | 'md' | 'lg'
+
+export interface RadioProps {
+  /**
+   * Radio value
+   */
+  value: string | number | boolean
+
+  /**
+   * Radio label
+   */
+  label?: string
+
+  /**
+   * Radio name (for grouping)
+   */
+  name?: string
+
+  /**
+   * Radio size
+   * @default 'md'
+   */
+  size?: RadioSize
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Helper text
+   */
+  helperText?: string
+}
+
+export interface RadioGroupProps {
+  /**
+   * Radio group name
+   */
+  name: string
+
+  /**
+   * Radio group label
+   */
+  label?: string
+
+  /**
+   * Radio options
+   */
+  options: Array<{
+    value: string | number | boolean
+    label: string
+    disabled?: boolean
+  }>
+
+  /**
+   * Layout direction
+   * @default 'vertical'
+   */
+  direction?: 'horizontal' | 'vertical'
+
+  /**
+   * Radio size
+   * @default 'md'
+   */
+  size?: RadioSize
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Error message
+   */
+  errorMessage?: string
+}

package/src/components/atoms/BrRating/BrRating.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { RatingProps } from './types'
+
+const props = withDefaults(defineProps<RatingProps>(), {
+  max: 5,
+  size: 'md',
+  allowHalf: false,
+  readonly: false,
+  disabled: false,
+  showValue: false,
+  icon: 'star',
+  clearable: false,
+})
+
+const model = defineModel<number>({ default: 0 })
+const hoverValue = ref<number | null>(null)
+
+const displayValue = computed(() => {
+  if (hoverValue.value !== null && !props.readonly && !props.disabled) {
+    return hoverValue.value
+  }
+  return model.value
+})
+
+const classes = computed(() => [
+  'br-rating',
+  `br-rating--${props.size}`,
+  {
+    'br-rating--readonly': props.readonly,
+    'br-rating--disabled': props.disabled,
+  },
+])
+
+const stars = computed(() => {
+  const items = []
+  for (let i = 1; i <= props.max; i++) {
+    const filled = displayValue.value >= i
+    const halfFilled = props.allowHalf && displayValue.value >= i - 0.5 && displayValue.value < i
+    items.push({
+      index: i,
+      filled,
+      halfFilled,
+    })
+  }
+  return items
+})
+
+function handleMouseMove(index: number, event: MouseEvent) {
+  if (props.readonly || props.disabled) return
+
+  if (props.allowHalf) {
+    const target = event.currentTarget as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const isHalf = event.clientX - rect.left < rect.width / 2
+    hoverValue.value = isHalf ? index - 0.5 : index
+  } else {
+    hoverValue.value = index
+  }
+}
+
+function handleMouseLeave() {
+  hoverValue.value = null
+}
+
+function handleClick(index: number, event: MouseEvent) {
+  if (props.readonly || props.disabled) return
+
+  let newValue: number
+  if (props.allowHalf) {
+    const target = event.currentTarget as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const isHalf = event.clientX - rect.left < rect.width / 2
+    newValue = isHalf ? index - 0.5 : index
+  } else {
+    newValue = index
+  }
+
+  if (props.clearable && model.value === newValue) {
+    model.value = 0
+  } else {
+    model.value = newValue
+  }
+}
+
+const iconPaths = {
+  star: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z',
+  heart: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+  circle: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z',
+}
+</script>
+
+<template>
+  <div :class="classes" @mouseleave="handleMouseLeave">
+    <div class="br-rating__stars">
+      <button
+        v-for="star in stars"
+        :key="star.index"
+        type="button"
+        class="br-rating__star"
+        :class="{
+          'br-rating__star--filled': star.filled,
+          'br-rating__star--half': star.halfFilled,
+        }"
+        :style="{
+          '--active-color': activeColor,
+          '--inactive-color': inactiveColor,
+        }"
+        :disabled="disabled"
+        @mousemove="handleMouseMove(star.index, $event)"
+        @click="handleClick(star.index, $event)"
+      >
+        <svg viewBox="0 0 24 24" class="br-rating__icon">
+          <defs v-if="star.halfFilled">
+            <linearGradient :id="`half-${star.index}`">
+              <stop offset="50%" stop-color="currentColor" />
+              <stop offset="50%" stop-color="var(--br-light-400)" />
+            </linearGradient>
+          </defs>
+          <path
+            :d="iconPaths[icon]"
+            :fill="star.halfFilled ? `url(#half-${star.index})` : 'currentColor'"
+          />
+        </svg>
+      </button>
+    </div>
+    <span v-if="showValue" class="br-rating__value">
+      {{ model.toFixed(allowHalf ? 1 : 0) }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--br-space-2);
+
+  &__stars {
+    display: flex;
+    gap: var(--br-space-1);
+  }
+
+  &__star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--inactive-color, var(--br-light-400));
+    transition: transform var(--br-transition-fast), color var(--br-transition-fast);
+
+    &:hover:not(:disabled) {
+      transform: scale(1.1);
+    }
+
+    &--filled,
+    &--half {
+      color: var(--active-color, var(--br-warning-500));
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__value {
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-600);
+  }
+
+  // Sizes
+  &--sm {
+    .br-rating__star {
+      width: 16px;
+      height: 16px;
+    }
+    .br-rating__value {
+      font-size: var(--br-text-sm);
+    }
+  }
+
+  &--md {
+    .br-rating__star {
+      width: 24px;
+      height: 24px;
+    }
+    .br-rating__value {
+      font-size: var(--br-text-md);
+    }
+  }
+
+  &--lg {
+    .br-rating__star {
+      width: 32px;
+      height: 32px;
+    }
+    .br-rating__value {
+      font-size: var(--br-text-lg);
+    }
+  }
+
+  &--xl {
+    .br-rating__star {
+      width: 40px;
+      height: 40px;
+    }
+    .br-rating__value {
+      font-size: var(--br-text-xl);
+    }
+  }
+
+  // States
+  &--readonly {
+    .br-rating__star {
+      cursor: default;
+      &:hover {
+        transform: none;
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+}
+</style>

package/src/components/atoms/BrRating/index.ts

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

package/src/components/atoms/BrRating/types.ts

@@ -0,0 +1,60 @@
+export type RatingSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export interface RatingProps {
+  /**
+   * Maximum rating value
+   * @default 5
+   */
+  max?: number
+
+  /**
+   * Rating size
+   * @default 'md'
+   */
+  size?: RatingSize
+
+  /**
+   * Allow half ratings
+   * @default false
+   */
+  allowHalf?: boolean
+
+  /**
+   * Read-only state
+   * @default false
+   */
+  readonly?: boolean
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Show value label
+   * @default false
+   */
+  showValue?: boolean
+
+  /**
+   * Custom active color
+   */
+  activeColor?: string
+
+  /**
+   * Custom inactive color
+   */
+  inactiveColor?: string
+
+  /**
+   * Custom icon
+   */
+  icon?: 'star' | 'heart' | 'circle'
+
+  /**
+   * Clearable (allow setting to 0)
+   * @default false
+   */
+  clearable?: boolean
+}