@bigbot-community/bigbot-ui 1.0.1

package/src/components/atoms/BrSwitch/BrSwitch.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+/**
+ * BrSwitch - Toggle switch component
+ *
+ * @example
+ * <BrSwitch v-model="isActive" />
+ * <BrSwitch v-model="isEnabled" size="lg" />
+ * <BrSwitch v-model="value" disabled />
+ */
+
+import { computed } from 'vue'
+import type { SwitchProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  size: 'md',
+  disabled: false,
+})
+
+// ---------------------------------------------------------------------------
+// MODEL
+// ---------------------------------------------------------------------------
+
+const model = defineModel<boolean>({ default: false })
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-switch',
+  `br-switch--${props.size}`,
+  {
+    'br-switch--checked': model.value,
+    'br-switch--disabled': props.disabled,
+  },
+])
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function toggle() {
+  if (!props.disabled) {
+    model.value = !model.value
+  }
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    role="switch"
+    :class="classes"
+    :aria-checked="model"
+    :disabled="disabled"
+    @click="toggle"
+  >
+    <span class="br-switch__track">
+      <span class="br-switch__thumb" />
+    </span>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.br-switch {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: all var(--br-transition-fast);
+
+  &__track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--br-dark-1100);
+    border-radius: var(--br-radius-full);
+    transition: background var(--br-transition-fast);
+  }
+
+  &__thumb {
+    position: absolute;
+    background: var(--br-light-0);
+    border-radius: 50%;
+    box-shadow: var(--br-shadow-sm);
+    transition: transform var(--br-transition-fast);
+  }
+
+  // ---------------------------------------------------------------------------
+  // SIZES
+  // ---------------------------------------------------------------------------
+
+  &--sm {
+    .br-switch__track {
+      width: 36px;
+      height: 20px;
+    }
+
+    .br-switch__thumb {
+      width: 16px;
+      height: 16px;
+      left: 2px;
+    }
+
+    &.br-switch--checked .br-switch__thumb {
+      transform: translateX(16px);
+    }
+  }
+
+  &--md {
+    .br-switch__track {
+      width: 44px;
+      height: 24px;
+    }
+
+    .br-switch__thumb {
+      width: 20px;
+      height: 20px;
+      left: 2px;
+    }
+
+    &.br-switch--checked .br-switch__thumb {
+      transform: translateX(20px);
+    }
+  }
+
+  &--lg {
+    .br-switch__track {
+      width: 52px;
+      height: 28px;
+    }
+
+    .br-switch__thumb {
+      width: 24px;
+      height: 24px;
+      left: 2px;
+    }
+
+    &.br-switch--checked .br-switch__thumb {
+      transform: translateX(24px);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // STATES
+  // ---------------------------------------------------------------------------
+
+  &--checked {
+    .br-switch__track {
+      background: var(--br-primary-600);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--br-primary-600);
+    outline-offset: 2px;
+    border-radius: var(--br-radius-full);
+  }
+
+  &:hover:not(&--disabled) {
+    .br-switch__track {
+      background: var(--br-dark-900);
+    }
+
+    &.br-switch--checked .br-switch__track {
+      background: var(--br-primary-700);
+    }
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,15 @@
+export type SwitchSize = 'sm' | 'md' | 'lg'
+
+export interface SwitchProps {
+  /**
+   * Switch size
+   * @default 'md'
+   */
+  size?: SwitchSize
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+}

package/src/components/atoms/BrTextarea/BrTextarea.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+/**
+ * BrTextarea - Multiline text input component
+ *
+ * @example
+ * <BrTextarea v-model="text" placeholder="Digite sua mensagem..." />
+ * <BrTextarea v-model="description" :rows="6" resize="vertical" />
+ */
+
+import { computed, ref } from 'vue'
+import type { TextareaProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  placeholder: '',
+  disabled: false,
+  readonly: false,
+  error: false,
+  rows: 4,
+  resize: 'vertical',
+  maxLength: undefined,
+})
+
+// ---------------------------------------------------------------------------
+// MODEL
+// ---------------------------------------------------------------------------
+
+const model = defineModel<string>({ default: '' })
+
+// ---------------------------------------------------------------------------
+// EMITS
+// ---------------------------------------------------------------------------
+
+const emit = defineEmits<{
+  (e: 'focus', value: string): void
+  (e: 'blur', value: string): void
+}>()
+
+// ---------------------------------------------------------------------------
+// REFS
+// ---------------------------------------------------------------------------
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const isFocused = ref(false)
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-textarea',
+  {
+    'br-textarea--error': props.error,
+    'br-textarea--disabled': props.disabled,
+    'br-textarea--focused': isFocused.value,
+  },
+])
+
+const styles = computed(() => ({
+  resize: props.resize,
+}))
+
+const charCount = computed(() => model.value?.length || 0)
+
+// ---------------------------------------------------------------------------
+// METHODS
+// ---------------------------------------------------------------------------
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  model.value = target.value
+}
+
+function handleFocus() {
+  isFocused.value = true
+  emit('focus', model.value)
+}
+
+function handleBlur() {
+  isFocused.value = false
+  emit('blur', model.value)
+}
+
+function focus() {
+  textareaRef.value?.focus()
+}
+
+function blur() {
+  textareaRef.value?.blur()
+}
+
+// ---------------------------------------------------------------------------
+// EXPOSE
+// ---------------------------------------------------------------------------
+
+defineExpose({ focus, blur, textareaRef })
+</script>
+
+<template>
+  <div class="br-textarea-wrapper">
+    <textarea
+      ref="textareaRef"
+      :class="classes"
+      :style="styles"
+      :value="model"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :rows="rows"
+      :maxlength="maxLength"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+    <div v-if="maxLength" class="br-textarea__counter">
+      {{ charCount }}/{{ maxLength }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-textarea-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.br-textarea {
+  width: 100%;
+  font-family: var(--br-font-primary);
+  font-size: var(--br-text-sm);
+  line-height: 1.5;
+  padding: var(--br-space-3) var(--br-space-4);
+  border: 1px solid var(--br-light-300);
+  border-radius: var(--br-radius-md);
+  background: var(--br-light-0);
+  color: var(--br-dark-700);
+  transition: all var(--br-transition-fast);
+
+  &::placeholder {
+    color: var(--br-dark-1100);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--br-primary-600);
+    box-shadow: 0 0 0 3px rgba(109, 54, 251, 0.1);
+  }
+
+  // ---------------------------------------------------------------------------
+  // STATES
+  // ---------------------------------------------------------------------------
+
+  &--error {
+    border-color: var(--br-danger-600);
+
+    &:focus {
+      border-color: var(--br-danger-600);
+      box-shadow: 0 0 0 3px rgba(255, 46, 46, 0.1);
+    }
+  }
+
+  &--disabled {
+    background: var(--br-light-200);
+    color: var(--br-dark-1100);
+    cursor: not-allowed;
+  }
+
+  &__counter {
+    position: absolute;
+    bottom: var(--br-space-2);
+    right: var(--br-space-3);
+    font-size: var(--br-text-xs);
+    color: var(--br-dark-1100);
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,43 @@
+export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both'
+
+export interface TextareaProps {
+  /**
+   * Placeholder text
+   */
+  placeholder?: string
+
+  /**
+   * Disable the textarea
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Readonly state
+   * @default false
+   */
+  readonly?: boolean
+
+  /**
+   * Error state
+   * @default false
+   */
+  error?: boolean
+
+  /**
+   * Number of visible rows
+   * @default 4
+   */
+  rows?: number
+
+  /**
+   * Resize behavior
+   * @default 'vertical'
+   */
+  resize?: TextareaResize
+
+  /**
+   * Maximum character length
+   */
+  maxLength?: number
+}

package/src/components/atoms/BrTitle/BrTitle.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+/**
+ * BrTitle - Typography heading component
+ *
+ * @example
+ * <BrTitle>Default Title</BrTitle>
+ * <BrTitle tag="h2" level="2">Heading 2</BrTitle>
+ * <BrTitle level="6" weight="semibold">Small Title</BrTitle>
+ */
+
+import { computed } from 'vue'
+import type { TitleProps } from './types'
+
+// ---------------------------------------------------------------------------
+// PROPS
+// ---------------------------------------------------------------------------
+
+const props = withDefaults(defineProps<TitleProps>(), {
+  tag: 'h1',
+  level: '4',
+  weight: 'semibold',
+  color: 'var(--br-dark-0)',
+  align: 'left',
+  truncate: false,
+  maxLines: undefined,
+})
+
+// ---------------------------------------------------------------------------
+// COMPUTED
+// ---------------------------------------------------------------------------
+
+const classes = computed(() => [
+  'br-title',
+  `br-title--level-${props.level}`,
+  `br-title--${props.weight}`,
+  `br-title--${props.align}`,
+  {
+    'br-title--truncate': props.truncate,
+    'br-title--clamp': props.maxLines,
+  },
+])
+
+const styles = computed(() => ({
+  color: props.color,
+  '--max-lines': props.maxLines,
+}))
+</script>
+
+<template>
+  <component :is="tag" :class="classes" :style="styles">
+    <slot />
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.br-title {
+  font-family: var(--br-font-secondary);
+  margin: 0;
+  padding: 0;
+  transition: color var(--br-transition-fast);
+
+  // ---------------------------------------------------------------------------
+  // LEVELS (Based on design system)
+  // ---------------------------------------------------------------------------
+
+  &--level-1 {
+    font-size: var(--br-text-h1);
+    line-height: 1.2;
+  }
+
+  &--level-2 {
+    font-size: var(--br-text-h2);
+    line-height: 1.25;
+  }
+
+  &--level-3 {
+    font-size: var(--br-text-h3);
+    line-height: 1.3;
+  }
+
+  &--level-4 {
+    font-size: var(--br-text-h4);
+    line-height: 1.35;
+  }
+
+  &--level-5 {
+    font-size: var(--br-text-h5);
+    line-height: 1.4;
+  }
+
+  &--level-6 {
+    font-size: var(--br-text-h6);
+    line-height: 1.4;
+  }
+
+  &--level-7 {
+    font-size: var(--br-text-h7);
+    line-height: 1.4;
+  }
+
+  // ---------------------------------------------------------------------------
+  // WEIGHTS
+  // ---------------------------------------------------------------------------
+
+  &--normal {
+    font-weight: var(--br-font-normal);
+  }
+
+  &--medium {
+    font-weight: var(--br-font-medium);
+  }
+
+  &--semibold {
+    font-weight: var(--br-font-semibold);
+  }
+
+  &--bold {
+    font-weight: var(--br-font-bold);
+  }
+
+  // ---------------------------------------------------------------------------
+  // ALIGNMENT
+  // ---------------------------------------------------------------------------
+
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  // ---------------------------------------------------------------------------
+  // TRUNCATION
+  // ---------------------------------------------------------------------------
+
+  &--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &--clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: var(--max-lines);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,47 @@
+export type TitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'
+export type TitleLevel = '1' | '2' | '3' | '4' | '5' | '6' | '7'
+export type TitleWeight = 'normal' | 'medium' | 'semibold' | 'bold'
+export type TitleAlign = 'left' | 'center' | 'right'
+
+export interface TitleProps {
+  /**
+   * HTML tag to render
+   * @default 'h1'
+   */
+  tag?: TitleTag
+
+  /**
+   * Visual level (font size)
+   * @default '4'
+   */
+  level?: TitleLevel
+
+  /**
+   * Font weight
+   * @default 'semibold'
+   */
+  weight?: TitleWeight
+
+  /**
+   * Text color
+   * @default 'var(--br-dark-0)'
+   */
+  color?: string
+
+  /**
+   * Text alignment
+   * @default 'left'
+   */
+  align?: TitleAlign
+
+  /**
+   * Truncate text with ellipsis
+   * @default false
+   */
+  truncate?: boolean
+
+  /**
+   * Max lines before truncation (line clamp)
+   */
+  maxLines?: number
+}