@refraction-ui/astro 0.4.2 → 0.4.5

package/dist/avatar-group/avatar-group.styles.ts

@@ -0,0 +1,63 @@
+import { cva } from '../shared/index.ts'
+
+export const avatarGroupStyles =
+  'flex items-center -space-x-2'
+
+export const avatarVariants = cva({
+  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium overflow-hidden ring-2 ring-background',
+  variants: {
+    size: {
+      xs: 'h-6 w-6 text-[10px]',
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-base',
+      xl: 'h-16 w-16 text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const avatarOverflowBadgeVariants = cva({
+  base: 'relative inline-flex items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground font-medium ring-2 ring-background',
+  variants: {
+    size: {
+      xs: 'h-6 w-6 text-[10px]',
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-base',
+      xl: 'h-16 w-16 text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const avatarImageStyles =
+  'h-full w-full object-cover'
+
+export const avatarPresenceDotVariants = cva({
+  base: 'absolute bottom-0 right-0 rounded-full border-2 border-background',
+  variants: {
+    size: {
+      xs: 'h-2 w-2',
+      sm: 'h-2.5 w-2.5',
+      md: 'h-3 w-3',
+      lg: 'h-3.5 w-3.5',
+      xl: 'h-4 w-4',
+    },
+    status: {
+      online: 'bg-green-500',
+      offline: 'bg-gray-400',
+      away: 'bg-yellow-500',
+      busy: 'bg-red-500',
+      dnd: 'bg-red-500',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    status: 'offline',
+  },
+})

package/dist/avatar-group/avatar-group.ts

@@ -0,0 +1,106 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+import { generateId } from '../shared/index.ts'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'
+
+export interface AvatarUser {
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Avatar image URL */
+  src?: string
+  /** Online presence status */
+  status?: PresenceStatus
+}
+
+export interface AvatarGroupProps {
+  /** Array of users to display */
+  users: AvatarUser[]
+  /** Maximum number of visible avatars */
+  max?: number
+  /** Avatar size */
+  size?: AvatarSize
+}
+
+export interface AvatarGroupAPI {
+  /** Users that are visible (within max limit) */
+  visibleUsers: AvatarUser[]
+  /** Number of overflow users */
+  overflowCount: number
+  /** All overflow users (for tooltip/popup) */
+  overflowUsers: AvatarUser[]
+  /** ARIA props for the group container */
+  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  /** Get ARIA props for an individual avatar */
+  getAvatarAriaProps(user: AvatarUser): Record<string, unknown>
+  /** Get initials from a user's name */
+  getInitials(name: string): string
+  /** Get the overflow badge ARIA props */
+  overflowBadgeProps: Record<string, unknown>
+  /** Generated IDs */
+  ids: {
+    group: string
+    label: string
+  }
+}
+
+export const AVATAR_SIZES: Record<AvatarSize, { width: number; fontSize: number }> = {
+  xs: { width: 24, fontSize: 10 },
+  sm: { width: 32, fontSize: 12 },
+  md: { width: 40, fontSize: 14 },
+  lg: { width: 48, fontSize: 16 },
+  xl: { width: 64, fontSize: 20 },
+}
+
+export function getInitials(name: string): string {
+  const parts = name.trim().split(/\s+/)
+  if (parts.length === 0) return ''
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()
+}
+
+export function createAvatarGroup(props: AvatarGroupProps): AvatarGroupAPI {
+  const { users, max, size = 'md' } = props
+
+  const visibleUsers = max && max > 0 ? users.slice(0, max) : users
+  const overflowUsers = max && max > 0 ? users.slice(max) : []
+  const overflowCount = overflowUsers.length
+
+  const groupId = generateId('rfr-avatar-group')
+  const labelId = generateId('rfr-avatar-group-label')
+
+  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+    role: 'group',
+    'aria-label': `${users.length} users`,
+    id: groupId,
+  }
+
+  function getAvatarAriaProps(user: AvatarUser): Record<string, unknown> {
+    const label = user.status ? `${user.name} (${user.status})` : user.name
+    return {
+      role: 'img',
+      'aria-label': label,
+    }
+  }
+
+  const overflowBadgeProps: Record<string, unknown> = {
+    role: 'button',
+    'aria-label': `${overflowCount} more users`,
+  }
+
+  return {
+    visibleUsers,
+    overflowCount,
+    overflowUsers,
+    ariaProps,
+    getAvatarAriaProps,
+    getInitials,
+    overflowBadgeProps,
+    ids: {
+      group: groupId,
+      label: labelId,
+    },
+  }
+}

package/dist/avatar-group/index.ts

@@ -0,0 +1,18 @@
+export {
+  createAvatarGroup,
+  getInitials,
+  AVATAR_SIZES,
+  type AvatarGroupProps,
+  type AvatarGroupAPI,
+  type AvatarUser,
+  type AvatarSize,
+  type PresenceStatus,
+} from './avatar-group.js'
+
+export {
+  avatarGroupStyles,
+  avatarVariants,
+  avatarOverflowBadgeVariants,
+  avatarImageStyles,
+  avatarPresenceDotVariants,
+} from './avatar-group.styles.js'

package/dist/badge/badge.styles.ts

@@ -0,0 +1,24 @@
+import { cva } from '../shared/index.ts'
+
+export const badgeVariants = cva({
+  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  variants: {
+    variant: {
+      default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+      primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+      secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80 font-semibold',
+      outline: 'text-foreground',
+      success: 'border-transparent bg-green-500 text-white shadow hover:bg-green-500/80 font-semibold',
+      warning: 'border-transparent bg-yellow-500 text-white shadow hover:bg-yellow-500/80 font-semibold',
+    },
+    size: {
+      sm: 'px-2 py-0 text-[10px]',
+      md: 'px-2.5 py-0.5 text-xs',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+})

package/dist/badge/badge.ts

@@ -0,0 +1,48 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'
+export type BadgeSize = 'sm' | 'md'
+
+export interface BadgeProps {
+  variant?: BadgeVariant
+  size?: BadgeSize
+}
+
+export interface BadgeAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+const statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']
+
+/** Icon name for status badge variants — non-color indicator for colorblind safety */
+const BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {
+  success: 'check',
+  warning: 'alert',
+  destructive: 'x',
+}
+
+/** Get the icon name for a badge variant (undefined for non-status variants) */
+export function getBadgeIcon(variant: BadgeVariant): string | undefined {
+  return BADGE_ICONS[variant]
+}
+
+export function createBadge(props: BadgeProps = {}): BadgeAPI {
+  const { variant = 'default' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {}
+
+  if (statusVariants.includes(variant)) {
+    ariaProps.role = 'status'
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  dataAttributes['data-variant'] = variant
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/badge/index.ts

@@ -0,0 +1,10 @@
+export {
+  createBadge,
+  getBadgeIcon,
+  type BadgeVariant,
+  type BadgeSize,
+  type BadgeProps,
+  type BadgeAPI,
+} from './badge.js'
+
+export { badgeVariants } from './badge.styles.js'

package/dist/bottom-nav/bottom-nav.styles.ts

@@ -0,0 +1,18 @@
+import { cva } from '../shared/index.ts'
+
+export const bottomNavVariants = cva({
+  base: 'fixed bottom-0 left-0 right-0 z-40 border-t bg-background md:hidden',
+})
+
+export const bottomNavTabVariants = cva({
+  base: 'flex flex-1 flex-col items-center justify-center gap-1 py-2 text-xs transition-colors',
+  variants: {
+    active: {
+      true: 'text-foreground',
+      false: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})

package/dist/bottom-nav/bottom-nav.ts

@@ -0,0 +1,33 @@
+export interface NavTab {
+  label: string
+  href: string
+  icon?: string
+  activeIcon?: string
+}
+
+export interface BottomNavProps {
+  tabs?: NavTab[]
+  currentPath?: string
+}
+
+export interface BottomNavAPI {
+  ariaProps: Record<string, string>
+  isActive: (href: string) => boolean
+  tabAriaProps: (href: string) => Record<string, string>
+}
+
+export function createBottomNav(props: BottomNavProps = {}): BottomNavAPI {
+  const { currentPath = '/' } = props
+
+  function isActive(href: string): boolean {
+    if (href === '/') return currentPath === '/'
+    return currentPath.startsWith(href)
+  }
+
+  return {
+    ariaProps: { role: 'navigation', 'aria-label': 'Main navigation' },
+    isActive,
+    tabAriaProps: (href: string): Record<string, string> =>
+      isActive(href) ? { 'aria-current': 'page' } : {},
+  }
+}

package/dist/bottom-nav/index.ts

@@ -0,0 +1,2 @@
+export { createBottomNav, type NavTab, type BottomNavProps, type BottomNavAPI } from './bottom-nav.js'
+export { bottomNavVariants, bottomNavTabVariants } from './bottom-nav.styles.js'

package/dist/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,20 @@
+import { cva } from '../shared/index.ts'
+
+export const breadcrumbsVariants = cva({
+  base: 'flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground',
+})
+
+export const breadcrumbItemVariants = cva({
+  base: 'transition-colors',
+  variants: {
+    active: {
+      true: 'font-medium text-foreground',
+      false: 'hover:text-foreground',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
+
+export const breadcrumbSeparatorStyles = 'text-muted-foreground/50 select-none'

package/dist/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,72 @@
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+
+export interface BreadcrumbsProps {
+  /** Current pathname to auto-generate from */
+  pathname?: string
+  /** Manual items (overrides pathname) */
+  items?: BreadcrumbItem[]
+  /** Custom label map for pathname segments */
+  labels?: Record<string, string>
+  /** Separator character */
+  separator?: string
+  /** Max items to show before truncating */
+  maxItems?: number
+}
+
+export interface BreadcrumbsAPI {
+  items: BreadcrumbItem[]
+  ariaProps: Record<string, string>
+  separator: string
+  isLast: (index: number) => boolean
+  itemAriaProps: (index: number) => Record<string, string>
+}
+
+function kebabToTitle(segment: string): string {
+  return segment
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+function pathToItems(
+  pathname: string,
+  labels: Record<string, string> = {},
+): BreadcrumbItem[] {
+  const segments = pathname.split('/').filter(Boolean)
+  const items: BreadcrumbItem[] = [{ label: 'Home', href: '/' }]
+
+  let currentPath = ''
+  for (const segment of segments) {
+    currentPath += `/${segment}`
+    items.push({
+      label: labels[segment] ?? labels[currentPath] ?? kebabToTitle(segment),
+      href: currentPath,
+    })
+  }
+
+  return items
+}
+
+export function createBreadcrumbs(props: BreadcrumbsProps = {}): BreadcrumbsAPI {
+  const { pathname, items: manualItems, labels = {}, separator = '/', maxItems } = props
+
+  let items = manualItems ?? (pathname ? pathToItems(pathname, labels) : [])
+
+  if (maxItems && items.length > maxItems) {
+    const first = items[0]
+    const last = items.slice(-(maxItems - 1))
+    items = [first, { label: '...' }, ...last]
+  }
+
+  return {
+    items,
+    ariaProps: { 'aria-label': 'Breadcrumb' },
+    separator,
+    isLast: (index: number) => index === items.length - 1,
+    itemAriaProps: (index: number): Record<string, string> =>
+      index === items.length - 1 ? { 'aria-current': 'page' } : {},
+  }
+}

package/dist/breadcrumbs/index.ts

@@ -0,0 +1,8 @@
+export {
+  createBreadcrumbs,
+  type BreadcrumbItem,
+  type BreadcrumbsProps,
+  type BreadcrumbsAPI,
+} from './breadcrumbs.js'
+
+export { breadcrumbsVariants, breadcrumbItemVariants, breadcrumbSeparatorStyles } from './breadcrumbs.styles.js'

package/dist/button/button.styles.ts

@@ -0,0 +1,38 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const buttonTokens: TokenContract = {
+  name: 'button',
+  tokens: {
+    bg: { variable: '--rfr-button-bg', fallback: 'hsl(var(--primary))' },
+    fg: { variable: '--rfr-button-fg', fallback: 'hsl(var(--primary-foreground))' },
+    border: { variable: '--rfr-button-border', fallback: 'hsl(var(--border))' },
+    radius: { variable: '--rfr-button-radius', fallback: 'var(--radius)' },
+    ring: { variable: '--rfr-button-ring', fallback: 'hsl(var(--ring))' },
+  },
+}
+
+export const buttonVariants = cva({
+  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+      destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+      outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+      secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline',
+    },
+    size: {
+      xs: 'h-7 rounded px-2 text-xs',
+      sm: 'h-8 rounded-md px-3 text-xs',
+      default: 'h-9 px-4 py-2',
+      lg: 'h-10 rounded-md px-8',
+      icon: 'h-9 w-9',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+})

package/dist/button/button.ts

@@ -0,0 +1,64 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
+
+export interface ButtonProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  asChild?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export interface ButtonAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Keyboard handlers to attach */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+}
+
+export function createButton(props: ButtonProps = {}): ButtonAPI {
+  const { disabled = false, loading = false } = props
+  const isInteractive = !disabled && !loading
+
+  const ariaProps: Partial<AccessibilityProps> = {}
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+  if (loading) {
+    ariaProps['aria-disabled'] = true
+    ariaProps['aria-label'] = ariaProps['aria-label'] ?? undefined
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (loading) {
+    dataAttributes['data-loading'] = ''
+  }
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {}
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Enter] = (e) => e.preventDefault()
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()
+  }
+
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+  }
+}
+
+export function getButtonType(props: ButtonProps): string {
+  return props.type ?? 'button'
+}

package/dist/button/index.ts

@@ -0,0 +1,10 @@
+export {
+  createButton,
+  getButtonType,
+  type ButtonProps,
+  type ButtonAPI,
+  type ButtonVariant,
+  type ButtonSize,
+} from './button.js'
+
+export { buttonVariants, buttonTokens } from './button.styles.js'

package/dist/calendar/calendar.styles.ts

@@ -0,0 +1,21 @@
+import { cva } from '../shared/index.ts'
+
+export const calendarVariants = cva({
+  base: 'p-3 rounded-md border bg-background',
+})
+
+export const dayVariants = cva({
+  base: 'inline-flex items-center justify-center rounded-md text-sm h-9 w-9',
+  variants: {
+    state: {
+      default: 'hover:bg-accent hover:text-accent-foreground',
+      selected: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      today: 'bg-accent text-accent-foreground',
+      disabled: 'text-muted-foreground opacity-50 cursor-not-allowed',
+      outside: 'text-muted-foreground opacity-50',
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+})