@stacksjs/components 0.2.93 → 0.2.94

package/src/ui/auth/Signup.stx

@@ -1,159 +0,0 @@
-<script server>
-export const headingText = $props.headingText || 'Sign up for Stacks'
-export const showSocialSignup = $props.showSocialSignup ?? true
-export const className = $props.className || ''
-
-export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function onSubmit(event) {
-  event.preventDefault()
-  const formData = new FormData(event.target)
-  const name = formData.get('name')
-  const email = formData.get('email')
-  const confirmEmail = formData.get('confirm_email')
-  const password = formData.get('password')
-
-  if (email !== confirmEmail) {
-    emit('error', { message: 'Emails do not match' })
-    return
-  }
-
-  emit('submit', { name, email, password })
-
-  setTimeout(() => {
-    event.target.querySelector('#password')?.setAttribute('value', '')
-    event.target.querySelector('#confirm_email')?.setAttribute('value', '')
-  }, 1000)
-}
-</script>
-
-<div class="{{ containerClasses }}">
-  <div class="sm:mx-auto sm:max-w-md sm:w-full">
-    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
-      {{ headingText }}
-    </h2>
-  </div>
-
-  <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
-    <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
-      <form class="space-y-6" @submit="onSubmit($event)">
-        <div>
-          <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-            Full Name
-          </label>
-          <div class="mt-2">
-            <input
-              id="name"
-              name="name"
-              type="text"
-              autocomplete="name"
-              required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-            Email address
-          </label>
-          <div class="mt-2">
-            <input
-              id="email"
-              name="email"
-              type="email"
-              autocomplete="email"
-              required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label for="confirm_email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-            Confirm Email
-          </label>
-          <div class="mt-2">
-            <input
-              id="confirm_email"
-              name="confirm_email"
-              type="email"
-              autocomplete="email"
-              required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-            Password
-          </label>
-          <div class="mt-2">
-            <input
-              id="password"
-              name="password"
-              type="password"
-              autocomplete="new-password"
-              required
-              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
-            />
-          </div>
-        </div>
-
-        <div>
-          <button
-            type="submit"
-            class="w-full flex justify-center rounded-md bg-teal-600 px-3 py-1.5 text-sm text-white font-semibold leading-6 shadow-sm hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-teal-600 focus-visible:outline-offset-2 focus-visible:outline"
-          >
-            Sign up
-          </button>
-        </div>
-      </form>
-
-      @if(showSocialSignup)
-        <div>
-          <div class="relative mt-10">
-            <div class="absolute inset-0 flex items-center" aria-hidden="true">
-              <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
-            </div>
-            <div class="relative flex justify-center text-sm font-medium leading-6">
-              <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
-                Or signup with
-              </span>
-            </div>
-          </div>
-
-          <div class="grid grid-cols-2 mt-6 gap-4">
-            <a
-              href="#"
-              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
-            >
-              <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
-                <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
-                <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
-                <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
-                <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
-              </svg>
-              <span class="text-sm font-semibold leading-6">Google</span>
-            </a>
-
-            <a
-              href="#"
-              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
-            >
-              <svg class="h-5 w-5 fill-[#24292F] dark:fill-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-                <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
-              </svg>
-              <span class="text-sm font-semibold leading-6">GitHub</span>
-            </a>
-          </div>
-        </div>
-      @endif
-    </div>
-  </div>
-</div>

package/src/ui/auth/TwoFactorChallenge.stx

@@ -1,111 +0,0 @@
-<script server>
-export const headingText = $props.headingText || 'Two Factor Authentication'
-export const labelText = $props.labelText || 'Authentication code'
-export const instructionText = $props.instructionText || 'Open your Symantec 2FA app to view your authentication code.'
-export const codeLength = $props.codeLength || 6
-export const showRecoveryCode = $props.showRecoveryCode ?? true
-export const className = $props.className || ''
-
-export const containerClasses = `py-32 dark:bg-blue-gray-900 ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const codeLength = {{ codeLength }}
-
-function onCodeInput(event, index) {
-  const input = event.target
-  const value = input.value
-  if (!/^\d*$/.test(value)) {
-    input.value = ''
-    return
-  }
-  if (value.length === 1 && index < codeLength - 1) {
-    document.getElementById(`code-${index + 1}`)?.focus()
-  }
-}
-
-function onKeyDown(event, index) {
-  if (event.key === 'Backspace' && !event.target.value && index > 0) {
-    document.getElementById(`code-${index - 1}`)?.focus()
-  }
-}
-
-function onSubmit(event) {
-  event.preventDefault()
-  const code = []
-  for (let i = 0; i < codeLength; i++) {
-    const input = document.getElementById(`code-${i}`)
-    if (input?.value) code.push(input.value)
-  }
-  if (code.length === codeLength) {
-    emit('submit', code.join(''))
-  }
-  else {
-    emit('error', { message: 'Please enter all digits' })
-  }
-}
-
-function onRecoveryCode(event) {
-  event.preventDefault()
-  emit('useRecoveryCode')
-}
-</script>
-
-<div class="{{ containerClasses }}">
-  <div class="mx-auto max-w-sm rounded-md px-8 py-4 shadow-md bg-white dark:bg-blue-gray-800">
-    <div class="card-body">
-      <div>
-        <h3 class="text-center text-sm text-gray-900 dark:text-gray-100 font-semibold">
-          {{ headingText }}
-        </h3>
-        <label for="code-0" class="mt-4 block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
-          {{ labelText }}
-        </label>
-        <form @submit="onSubmit($event)">
-          <div class="mt-2 flex rounded-md shadow-sm space-x-2">
-            @for(i in Array(codeLength).keys())
-              <input
-                id="code-{{ i }}"
-                type="text"
-                maxlength="1"
-                name="code-{{ i }}"
-                placeholder="-"
-                class="block w-full border-0 rounded-md px-2 py-2 text-center text-gray-900 dark:text-gray-100 ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
-                @input="onCodeInput($event, {{ i }})"
-                @keydown="onKeyDown($event, {{ i }})"
-              />
-            @endfor
-          </div>
-          <div class="py-4">
-            <button
-              type="submit"
-              class="relative h-8 w-full flex items-center justify-center rounded-full bg-teal-600 px-4 text-white font-semibold hover:bg-teal-500 focus:outline-none focus:ring-2 focus:ring-teal-600 focus:ring-offset-2"
-            >
-              Verify
-            </button>
-          </div>
-        </form>
-        <div>
-          <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
-            {{ instructionText }}
-          </p>
-        </div>
-        @if(showRecoveryCode)
-          <div class="mt-4">
-            <p class="text-xs text-gray-700 dark:text-gray-300 font-semibold">
-              Having Problems?
-            </p>
-            <a
-              href="#"
-              @click="onRecoveryCode($event)"
-              class="text-xs text-blue-500 hover:underline"
-            >
-              Use recovery code instead
-            </a>
-          </div>
-        @endif
-      </div>
-    </div>
-  </div>
-</div>

package/src/ui/auth/index.ts

@@ -1,32 +0,0 @@
-export { default as Login } from './Login.stx'
-export { default as Signup } from './Signup.stx'
-export { default as TwoFactorChallenge } from './TwoFactorChallenge.stx'
-
-export interface LoginProps {
-  showLogo?: boolean
-  headingText?: string
-  showSocialLogin?: boolean
-  showRememberMe?: boolean
-  showForgotPassword?: boolean
-  showSignup?: boolean
-  signupText?: string
-  onSubmit?: (data: { email: string, password: string }) => void
-  className?: string
-}
-
-export interface SignupProps {
-  headingText?: string
-  showSocialSignup?: boolean
-  onSubmit?: (data: { name: string, email: string, password: string }) => void
-  className?: string
-}
-
-export interface TwoFactorChallengeProps {
-  headingText?: string
-  labelText?: string
-  instructionText?: string
-  codeLength?: number
-  onSubmit?: (code: string) => void
-  onUseRecoveryCode?: () => void
-  className?: string
-}

package/src/ui/avatar/Avatar.stx

@@ -1,77 +0,0 @@
-<script server>
-export const src = $props.src || ''
-export const alt = $props.alt || ''
-export const initials = $props.initials || ''
-export const size = $props.size || 'md'
-export const shape = $props.shape || 'circle'
-export const status = $props.status || ''
-export const className = $props.className || ''
-
-const sizeClasses = {
-  xs: 'w-6 h-6 text-xs',
-  sm: 'w-8 h-8 text-sm',
-  md: 'w-10 h-10 text-base',
-  lg: 'w-12 h-12 text-lg',
-  xl: 'w-16 h-16 text-xl',
-  '2xl': 'w-20 h-20 text-2xl',
-}
-
-const shapeClasses = { circle: 'rounded-full', square: 'rounded-md' }
-
-const statusSizeClasses = {
-  xs: 'w-1.5 h-1.5 border',
-  sm: 'w-2 h-2 border',
-  md: 'w-2.5 h-2.5 border-2',
-  lg: 'w-3 h-3 border-2',
-  xl: 'w-3.5 h-3.5 border-2',
-  '2xl': 'w-4 h-4 border-2',
-}
-
-const statusColorClasses = {
-  online: 'bg-green-500 dark:bg-green-400',
-  offline: 'bg-gray-400 dark:bg-gray-600',
-  away: 'bg-yellow-500 dark:bg-yellow-400',
-  busy: 'bg-red-500 dark:bg-red-400',
-}
-
-export const containerClasses = `relative inline-block ${className}`.trim()
-export const avatarClasses = `flex items-center justify-center overflow-hidden bg-gray-200 dark:bg-gray-700 ${sizeClasses[size]} ${shapeClasses[shape]}`.trim()
-export const imageClasses = `w-full h-full object-cover`.trim()
-export const initialsClasses = `font-medium text-gray-600 dark:text-gray-300 uppercase select-none`.trim()
-export const statusClasses = status ? `absolute bottom-0 right-0 ${statusSizeClasses[size]} ${statusColorClasses[status]} ${shapeClasses[shape]} border-white dark:border-gray-900`.trim() : ''
-export const displayInitials = initials || (alt ? alt.split(' ').map(n => n[0]).join('').substring(0, 2) : '?')
-</script>
-
-<script client>
-const emit = defineEmits()
-const imageError = state(false)
-const hasSrc = {{ !!src }}
-
-function onImageError(event) {
-  imageError.set(true)
-  emit('error', event)
-}
-
-const showImage = derived(() => hasSrc && !imageError())
-</script>
-
-<div class="{{ containerClasses }}">
-  <div class="{{ avatarClasses }}">
-    <img
-      :show="showImage()"
-      src="{{ src }}"
-      alt="{{ alt }}"
-      class="{{ imageClasses }}"
-      @error="onImageError($event)"
-    />
-    <span :show="!showImage()" class="{{ initialsClasses }}">{{ displayInitials }}</span>
-  </div>
-
-  @if(status)
-    <span
-      class="{{ statusClasses }}"
-      role="status"
-      aria-label="{{ status }}"
-    ></span>
-  @endif
-</div>

package/src/ui/avatar/index.ts

@@ -1,12 +0,0 @@
-export { default as Avatar } from './Avatar.stx'
-
-export interface AvatarProps {
-  src?: string
-  alt?: string
-  initials?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-  shape?: 'circle' | 'square'
-  status?: 'online' | 'offline' | 'away' | 'busy' | ''
-  onError?: (event: Event) => void
-  className?: string
-}

package/src/ui/badge/Badge.stx

@@ -1,62 +0,0 @@
-<script server>
-export const variant = $props.variant || 'default'
-export const size = $props.size || 'md'
-export const dot = $props.dot || false
-export const removable = $props.removable || false
-export const className = $props.className || ''
-
-const variantClasses = {
-  default: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-  primary: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-  secondary: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
-  success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-  warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-  danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
-  info: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200',
-}
-
-const sizeClasses = { sm: 'px-2 py-0.5 text-xs', md: 'px-2.5 py-0.5 text-sm', lg: 'px-3 py-1 text-base' }
-
-const dotColorClasses = {
-  default: 'bg-gray-500 dark:bg-gray-400',
-  primary: 'bg-blue-500 dark:bg-blue-400',
-  secondary: 'bg-purple-500 dark:bg-purple-400',
-  success: 'bg-green-500 dark:bg-green-400',
-  warning: 'bg-yellow-500 dark:bg-yellow-400',
-  danger: 'bg-red-500 dark:bg-red-400',
-  info: 'bg-cyan-500 dark:bg-cyan-400',
-}
-
-export const badgeClasses = `inline-flex items-center gap-1.5 font-medium rounded-full ${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()
-export const dotClasses = `w-2 h-2 rounded-full ${dotColorClasses[variant]}`.trim()
-export const removeButtonClasses = `ml-0.5 -mr-1 text-current hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10 rounded-full p-0.5 transition-colors duration-150`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function onRemove() {
-  emit('remove')
-}
-</script>
-
-<span class="{{ badgeClasses }}" role="status">
-  @if(dot)
-    <span class="{{ dotClasses }}" aria-hidden="true"></span>
-  @endif
-
-  <slot />
-
-  @if(removable)
-    <button
-      type="button"
-      @click="onRemove()"
-      class="{{ removeButtonClasses }}"
-      aria-label="Remove"
-    >
-      <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-      </svg>
-    </button>
-  @endif
-</span>

package/src/ui/badge/index.ts

@@ -1,10 +0,0 @@
-export { default as Badge } from './Badge.stx'
-
-export interface BadgeProps {
-  variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
-  size?: 'sm' | 'md' | 'lg'
-  dot?: boolean
-  removable?: boolean
-  onRemove?: () => void
-  className?: string
-}

package/src/ui/breadcrumb/Breadcrumb.stx

@@ -1,79 +0,0 @@
-<script server>
-export const items = $props.items || []
-export const separator = $props.separator || '/'
-export const maxItems = $props.maxItems || 0
-export const className = $props.className || ''
-
-// Handle collapse if maxItems is set
-let displayItems = items
-if (maxItems > 0 && items.length > maxItems) {
-  const firstItems = items.slice(0, 1)
-  const lastItems = items.slice(-(maxItems - 1))
-  displayItems = [...firstItems, { label: '...', href: '#', collapsed: true }, ...lastItems]
-}
-
-// Separator element
-const separatorElement = separator === '/' ? '/' :
-  separator === '>' ? '›' :
-  separator === 'arrow' ? `<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>` :
-  separator
-
-export const breadcrumbClasses = `flex items-center flex-wrap gap-2 text-sm ${className}`.trim()
-export const itemClasses = `text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-150`.trim()
-export const activeItemClasses = `text-gray-900 dark:text-gray-100 font-medium`.trim()
-export const separatorClasses = `text-gray-400 dark:text-gray-600 select-none`.trim()
-export const collapsedClasses = `text-gray-400 dark:text-gray-600 cursor-default`.trim()
-</script>
-
-<nav class="{{ breadcrumbClasses }}" aria-label="Breadcrumb">
-  <ol class="flex items-center gap-2">
-    @foreach(item in displayItems)
-      <li class="flex items-center gap-2">
-        @if(item.collapsed)
-          <!-- Collapsed indicator -->
-          <span class="{{ collapsedClasses }}">{{ item.label }}</span>
-        @else
-          @if($loop.last)
-            <!-- Last item (current page) -->
-            <span class="{{ activeItemClasses }}" aria-current="page">
-              @if(item.icon)
-                <span class="inline-flex items-center gap-1.5">
-                  <span innerHTML="{!! item.icon !!}"></span>
-                  <span>{{ item.label }}</span>
-                </span>
-              @else
-                {{ item.label }}
-              @endif
-            </span>
-          @else
-            <!-- Link item -->
-            <a
-              href="{{ item.href }}"
-              class="{{ itemClasses }}"
-            >
-              @if(item.icon)
-                <span class="inline-flex items-center gap-1.5">
-                  <span innerHTML="{!! item.icon !!}"></span>
-                  <span>{{ item.label }}</span>
-                </span>
-              @else
-                {{ item.label }}
-              @endif
-            </a>
-          @endif
-        @endif
-
-        <!-- Separator (not after last item) -->
-        @if(!$loop.last)
-          <span class="{{ separatorClasses }}" aria-hidden="true">
-            @if(separator === 'arrow')
-              {!! separatorElement !!}
-            @else
-              {{ separatorElement }}
-            @endif
-          </span>
-        @endif
-      </li>
-    @endforeach
-  </ol>
-</nav>

package/src/ui/breadcrumb/index.ts

@@ -1,15 +0,0 @@
-export { default as Breadcrumb } from './Breadcrumb.stx'
-
-export interface BreadcrumbItem {
-  label: string
-  href: string
-  icon?: string
-  collapsed?: boolean
-}
-
-export interface BreadcrumbProps {
-  items: BreadcrumbItem[]
-  separator?: '/' | '>' | 'arrow' | string
-  maxItems?: number
-  className?: string
-}

package/src/ui/button/Button.stx

@@ -1,74 +0,0 @@
-<script server>
-export const variant = $props.variant || 'primary'
-export const size = $props.size || 'md'
-export const disabled = $props.disabled || false
-export const loading = $props.loading || false
-export const type = $props.type || 'button'
-export const fullWidth = $props.fullWidth || false
-export const leftIcon = $props.leftIcon || ''
-export const rightIcon = $props.rightIcon || ''
-export const className = $props.className || ''
-
-const variantClasses = {
-  primary: 'bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg dark:bg-blue-600 dark:hover:bg-blue-700',
-  secondary: 'bg-neutral-200 hover:bg-neutral-300 text-neutral-900 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-white',
-  outline: 'border-2 border-blue-500 text-blue-500 hover:bg-blue-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-950',
-  ghost: 'hover:bg-neutral-100 text-neutral-700 dark:hover:bg-neutral-800 dark:text-neutral-300',
-  danger: 'bg-red-500 hover:bg-red-600 text-white shadow-md hover:shadow-lg dark:bg-red-600 dark:hover:bg-red-700',
-}
-
-const sizeClasses = {
-  xs: 'px-2.5 py-1 text-xs h-7 gap-1',
-  sm: 'px-3 py-1.5 text-sm h-8 gap-1.5',
-  md: 'px-4 py-2 text-base h-10 gap-2',
-  lg: 'px-6 py-3 text-lg h-12 gap-2.5',
-  xl: 'px-8 py-4 text-xl h-14 gap-3',
-}
-
-const iconSizeClasses = { xs: 'h-3 w-3', sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', xl: 'h-7 w-7' }
-const baseClasses = 'inline-flex items-center justify-center font-semibold rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none'
-const widthClasses = fullWidth ? 'w-full' : ''
-export const isDisabled = disabled || loading
-
-export const buttonClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${widthClasses} ${className}`.trim()
-export const iconClasses = iconSizeClasses[size]
-export const spinnerClasses = `animate-spin ${iconClasses}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const disabledNow = {{ isDisabled }}
-
-function onClick(event) {
-  if (disabledNow) {
-    event.preventDefault()
-    return
-  }
-  emit('click', event)
-}
-</script>
-
-<button
-  type="{{ type }}"
-  class="{{ buttonClasses }}"
-  @if(isDisabled)disabled@endif
-  @click="onClick($event)"
-  aria-busy="{{ loading ? 'true' : 'false' }}"
->
-  @if(loading)
-    <svg class="{{ spinnerClasses }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-  @else
-    @if(leftIcon)
-      <span class="{{ iconClasses }}">{!! leftIcon !!}</span>
-    @endif
-  @endif
-
-  <slot />
-
-  @if(!loading && rightIcon)
-    <span class="{{ iconClasses }}">{!! rightIcon !!}</span>
-  @endif
-</button>