@bigbot-community/bigbot-ui 1.0.1

package/src/components/atoms/BrVideo/BrVideo.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { VideoProps } from './types'
+
+const props = withDefaults(defineProps<VideoProps>(), {
+  autoplay: false,
+  loop: false,
+  muted: false,
+  controls: true,
+  preload: 'metadata',
+  rounded: false,
+})
+
+const emit = defineEmits<{
+  (e: 'play'): void
+  (e: 'pause'): void
+  (e: 'ended'): void
+  (e: 'error', error: Event): void
+}>()
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+const isPlaying = ref(false)
+
+const classes = computed(() => [
+  'br-video',
+  {
+    'br-video--rounded': props.rounded === true,
+    [`br-video--rounded-${props.rounded}`]: typeof props.rounded === 'string',
+  },
+])
+
+const videoStyles = computed(() => ({
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
+}))
+
+function play() {
+  videoRef.value?.play()
+}
+
+function pause() {
+  videoRef.value?.pause()
+}
+
+function toggle() {
+  if (isPlaying.value) {
+    pause()
+  } else {
+    play()
+  }
+}
+
+function handlePlay() {
+  isPlaying.value = true
+  emit('play')
+}
+
+function handlePause() {
+  isPlaying.value = false
+  emit('pause')
+}
+
+function handleEnded() {
+  isPlaying.value = false
+  emit('ended')
+}
+
+function handleError(event: Event) {
+  emit('error', event)
+}
+
+defineExpose({
+  play,
+  pause,
+  toggle,
+  videoRef,
+})
+</script>
+
+<template>
+  <div :class="classes" :style="videoStyles">
+    <video
+      ref="videoRef"
+      :src="src"
+      :poster="poster"
+      :autoplay="autoplay"
+      :loop="loop"
+      :muted="muted"
+      :controls="controls"
+      :preload="preload"
+      class="br-video__player"
+      @play="handlePlay"
+      @pause="handlePause"
+      @ended="handleEnded"
+      @error="handleError"
+    >
+      <slot />
+    </video>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-video {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  background: var(--br-dark-0);
+
+  &--rounded {
+    border-radius: var(--br-radius-md);
+  }
+
+  &--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);
+  }
+
+  &__player {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,56 @@
+export interface VideoProps {
+  /**
+   * Video source URL
+   */
+  src: string
+
+  /**
+   * Poster image URL
+   */
+  poster?: string
+
+  /**
+   * Video width
+   */
+  width?: string | number
+
+  /**
+   * Video height
+   */
+  height?: string | number
+
+  /**
+   * Autoplay video
+   * @default false
+   */
+  autoplay?: boolean
+
+  /**
+   * Loop video
+   * @default false
+   */
+  loop?: boolean
+
+  /**
+   * Mute video
+   * @default false
+   */
+  muted?: boolean
+
+  /**
+   * Show controls
+   * @default true
+   */
+  controls?: boolean
+
+  /**
+   * Preload strategy
+   * @default 'metadata'
+   */
+  preload?: 'none' | 'metadata' | 'auto'
+
+  /**
+   * Border radius
+   */
+  rounded?: boolean | 'sm' | 'md' | 'lg' | 'xl'
+}

package/src/components/atoms/index.ts

@@ -0,0 +1,20 @@
+// =============================================================================
+// BRAIP UI - ATOMS INDEX
+// =============================================================================
+
+export * from "./BrButton";
+export * from "./BrInput";
+export * from "./BrSelect";
+export * from "./BrBadge";
+// export * from './BrIcon'
+export * from "./BrTitle";
+export * from "./BrSpinner";
+export * from "./BrSwitch";
+export * from "./BrTextarea";
+export * from "./BrAvatar";
+export * from "./BrImage";
+export * from "./BrVideo";
+export * from "./BrRadio";
+export * from "./BrProgressbar";
+export * from "./BrRating";
+export * from "./BrCheckbox";

package/src/components/index.ts

@@ -0,0 +1,7 @@
+// =============================================================================
+// BRAIP UI - COMPONENTS INDEX
+// =============================================================================
+
+export * from './atoms'
+export * from './molecules'
+export * from './organisms'

package/src/components/molecules/BrAccordion/BrAccordion.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed, provide, ref, reactive } from 'vue'
+import type { AccordionProps } from './types'
+import BrAccordionItem from './BrAccordionItem.vue'
+
+const props = withDefaults(defineProps<AccordionProps>(), {
+  multiple: false,
+  variant: 'default',
+  iconPosition: 'right',
+  disabled: false,
+})
+
+const openItems = ref<Set<string | number>>(new Set())
+
+const classes = computed(() => [
+  'br-accordion',
+  `br-accordion--${props.variant}`,
+  {
+    'br-accordion--disabled': props.disabled,
+  },
+])
+
+function toggleItem(id: string | number) {
+  if (props.disabled) return
+
+  if (openItems.value.has(id)) {
+    openItems.value.delete(id)
+  } else {
+    if (!props.multiple) {
+      openItems.value.clear()
+    }
+    openItems.value.add(id)
+  }
+  openItems.value = new Set(openItems.value)
+}
+
+function isItemOpen(id: string | number) {
+  return openItems.value.has(id)
+}
+
+provide(
+  'accordion',
+  reactive({
+    iconPosition: computed(() => props.iconPosition),
+    disabled: computed(() => props.disabled),
+    toggleItem,
+    isItemOpen,
+  })
+)
+</script>
+
+<template>
+  <div :class="classes">
+    <template v-if="items && items.length">
+      <BrAccordionItem
+        v-for="item in items"
+        :key="item.id"
+        :id="item.id"
+        :title="item.title"
+        :icon="item.icon"
+        :disabled="item.disabled"
+      >
+        <template v-if="item.content">
+          {{ item.content }}
+        </template>
+        <slot v-else :name="`item-${item.id}`" :item="item" />
+      </BrAccordionItem>
+    </template>
+    <slot v-else />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-accordion {
+  width: 100%;
+
+  &--default {
+    border: 1px solid var(--br-light-300);
+    border-radius: var(--br-radius-md);
+    overflow: hidden;
+  }
+
+  &--bordered {
+    :deep(.br-accordion-item) {
+      border: 1px solid var(--br-light-300);
+      border-radius: var(--br-radius-md);
+      margin-bottom: var(--br-space-2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &--separated {
+    :deep(.br-accordion-item) {
+      background: var(--br-light-100);
+      border-radius: var(--br-radius-md);
+      margin-bottom: var(--br-space-2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+</style>

package/src/components/molecules/BrAccordion/BrAccordionItem.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, inject, ref, useId } from 'vue'
+import type { AccordionItemProps } from './types'
+
+const props = withDefaults(defineProps<AccordionItemProps>(), {
+  disabled: false,
+})
+
+const accordion = inject<{
+  iconPosition: { value: 'left' | 'right' }
+  disabled: { value: boolean }
+  toggleItem: (id: string | number) => void
+  isItemOpen: (id: string | number) => boolean
+}>('accordion')
+
+// useId() generates deterministic IDs that match between SSR and client hydration
+const itemId = ref(props.id ?? useId())
+const contentRef = ref<HTMLElement | null>(null)
+
+const isOpen = computed(() => {
+  if (props.open !== undefined) return props.open
+  return accordion?.isItemOpen(itemId.value) ?? false
+})
+
+const isDisabled = computed(() => props.disabled || accordion?.disabled.value)
+const iconPosition = computed(() => accordion?.iconPosition.value ?? 'right')
+
+const classes = computed(() => [
+  'br-accordion-item',
+  {
+    'br-accordion-item--open': isOpen.value,
+    'br-accordion-item--disabled': isDisabled.value,
+    'br-accordion-item--icon-left': iconPosition.value === 'left',
+  },
+])
+
+function toggle() {
+  if (isDisabled.value) return
+  accordion?.toggleItem(itemId.value)
+}
+
+const contentHeight = computed(() => {
+  if (!isOpen.value) return '0px'
+  return contentRef.value ? `${contentRef.value.scrollHeight}px` : 'auto'
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <button
+      type="button"
+      class="br-accordion-item__header"
+      :aria-expanded="isOpen"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <svg
+        v-if="iconPosition === 'left'"
+        class="br-accordion-item__icon"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+      </svg>
+      <span v-if="icon" class="br-accordion-item__custom-icon">
+        <slot name="icon">{{ icon }}</slot>
+      </span>
+      <span class="br-accordion-item__title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <svg
+        v-if="iconPosition === 'right'"
+        class="br-accordion-item__icon"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+      >
+        <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+      </svg>
+    </button>
+    <div
+      class="br-accordion-item__content-wrapper"
+      :style="{ height: contentHeight }"
+    >
+      <div ref="contentRef" class="br-accordion-item__content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.br-accordion-item {
+  &__header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--br-space-4);
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+    font-size: var(--br-text-md);
+    font-weight: var(--br-font-medium);
+    color: var(--br-dark-700);
+    transition: background-color var(--br-transition-fast);
+
+    &:hover:not(:disabled) {
+      background: var(--br-light-100);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--br-dark-500);
+    transition: transform var(--br-transition-fast);
+  }
+
+  &__custom-icon {
+    margin-right: var(--br-space-2);
+  }
+
+  &__title {
+    flex: 1;
+  }
+
+  &__content-wrapper {
+    overflow: hidden;
+    transition: height var(--br-transition-normal);
+  }
+
+  &__content {
+    padding: 0 var(--br-space-4) var(--br-space-4);
+    color: var(--br-dark-600);
+    font-size: var(--br-text-sm);
+    line-height: 1.6;
+  }
+
+  // Open state
+  &--open {
+    .br-accordion-item__icon {
+      transform: rotate(180deg);
+    }
+
+    &.br-accordion-item--icon-left .br-accordion-item__icon {
+      transform: rotate(90deg);
+    }
+  }
+
+  // Icon left
+  &--icon-left {
+    .br-accordion-item__icon {
+      margin-right: var(--br-space-2);
+    }
+  }
+
+  // Borders between items (for default variant)
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--br-light-300);
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,85 @@
+export interface AccordionItem {
+  /**
+   * Unique identifier
+   */
+  id: string | number
+
+  /**
+   * Item title
+   */
+  title: string
+
+  /**
+   * Item content (can be HTML string or used with slot)
+   */
+  content?: string
+
+  /**
+   * Icon to display before title
+   */
+  icon?: string
+
+  /**
+   * Disabled state
+   */
+  disabled?: boolean
+}
+
+export interface AccordionProps {
+  /**
+   * Accordion items
+   */
+  items?: AccordionItem[]
+
+  /**
+   * Allow multiple items to be open
+   * @default false
+   */
+  multiple?: boolean
+
+  /**
+   * Variant style
+   * @default 'default'
+   */
+  variant?: 'default' | 'bordered' | 'separated'
+
+  /**
+   * Icon position
+   * @default 'right'
+   */
+  iconPosition?: 'left' | 'right'
+
+  /**
+   * Disable all items
+   * @default false
+   */
+  disabled?: boolean
+}
+
+export interface AccordionItemProps {
+  /**
+   * Item title
+   */
+  title: string
+
+  /**
+   * Unique identifier
+   */
+  id?: string | number
+
+  /**
+   * Icon to display
+   */
+  icon?: string
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Open state (controlled)
+   */
+  open?: boolean
+}