@stacksjs/components 0.2.3

package/dist/Installation-33bj4rm7.stx

@@ -0,0 +1,39 @@
+<script>
+import { CodeBlock } from './CodeBlock.stx'
+
+export const packageName = $props.packageName || '@stacksjs/component'
+export const installCode = `bun add ${packageName}`
+export const npmCode = `npm install ${packageName}`
+export const pnpmCode = `pnpm add ${packageName}`
+export const yarnCode = `yarn add ${packageName}`
+</script>
+
+<div class="installation">
+  <h2 class="my-2 text-lg font-semibold">Installation</h2>
+
+  <p class="my-3 text-base">
+    Install the component using your preferred package manager:
+  </p>
+
+  <div class="space-y-4">
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">Bun (recommended)</h3>
+      @component('CodeBlock', { code: installCode, language: 'bash' })
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">npm</h3>
+      @component('CodeBlock', { code: npmCode, language: 'bash' })
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">pnpm</h3>
+      @component('CodeBlock', { code: pnpmCode, language: 'bash' })
+    </div>
+
+    <div>
+      <h3 class="text-sm font-medium mb-2 text-neutral-700 dark:text-neutral-300">Yarn</h3>
+      @component('CodeBlock', { code: yarnCode, language: 'bash' })
+    </div>
+  </div>
+</div>

package/dist/Listbox-xcejcmyc.stx

@@ -0,0 +1,14 @@
+<script>
+export const value = $props.value
+export const onChange = $props.onChange
+export const multiple = $props.multiple || false
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+const listboxClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ listboxClasses }}">
+  <slot :value="value" :onChange="onChange" :multiple="multiple" />
+</component>

package/dist/ListboxButton-nx5kmw19.stx

@@ -0,0 +1,17 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+export const disabled = $props.disabled || false
+
+const baseClasses = 'relative w-full cursor-pointer rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+const buttonClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ buttonClasses }}"
+  @if(disabled)disabled aria-disabled="true"@endif
+>
+  <slot />
+</component>

package/dist/ListboxLabel-aky8a73n.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'label'
+
+const baseClasses = 'block text-sm font-medium text-neutral-900 dark:text-white'
+const labelClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ labelClasses }}">
+  <slot />
+</component>

package/dist/ListboxOption-6h4hsdz5.stx

@@ -0,0 +1,57 @@
+<script>
+export const value = $props.value
+export const disabled = $props.disabled || false
+export const className = $props.className || ''
+export const as = $props.as || 'li'
+export const currentValue = $props.currentValue
+export const onChange = $props.onChange
+
+export let active = false
+export const selected = Array.isArray(currentValue)
+  ? currentValue.includes(value)
+  : currentValue === value
+
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
+const stateClasses = active
+  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
+  : 'text-neutral-900 dark:text-neutral-100'
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed'
+  : ''
+
+const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleClick() {
+  if (disabled) return
+  onChange?.(value)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  role="option"
+  aria-selected="{{ selected ? 'true' : 'false' }}"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  @if(selected)
+    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+      </svg>
+    </span>
+  @endif
+
+  <slot :active="active" :selected="selected" :disabled="disabled" />
+</component>

package/dist/ListboxOptions-2sacdtm5.stx

@@ -0,0 +1,16 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'ul'
+export const static_ = $props.static || false
+
+const baseClasses = 'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+const optionsClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionsClasses }}"
+  role="listbox"
+>
+  <slot />
+</component>

package/dist/Login-s2jkvd9y.stx

@@ -0,0 +1,163 @@
+<script>
+export const showLogo = $props.showLogo ?? true
+export const headingText = $props.headingText || 'Sign in to your account'
+export const showSocialLogin = $props.showSocialLogin ?? true
+export const showRememberMe = $props.showRememberMe ?? true
+export const showForgotPassword = $props.showForgotPassword ?? true
+export const showSignup = $props.showSignup ?? true
+export const signupText = $props.signupText || 'Start a 14 day free trial'
+export const onSubmit = $props.onSubmit || (() => {})
+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>
+
+<div class="{{ containerClasses }}">
+  <div class="sm:mx-auto sm:max-w-md sm:w-full">
+    @if(showLogo)
+      <img src="/logo.svg" alt="Logo" class="mx-auto h-11 w-auto" />
+    @endif
+    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+      {{ headingText }}
+    </h2>
+  </div>
+
+  <form onsubmit="event.preventDefault(); handleSubmit(event)">
+    <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">
+        <div class="space-y-6">
+          <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 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-indigo-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="current-password"
+                required
+                class="block w-full border-0 rounded-md 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-indigo-600 focus:ring-inset dark:bg-blue-gray-700"
+              />
+            </div>
+          </div>
+
+          <div class="flex items-center justify-between">
+            @if(showRememberMe)
+              <div class="flex items-center">
+                <input
+                  id="remember-me"
+                  name="remember-me"
+                  type="checkbox"
+                  class="h-4 w-4 border-gray-300 dark:border-gray-600 rounded text-indigo-600 focus:ring-indigo-600 dark:bg-blue-gray-700"
+                />
+                <label for="remember-me" class="ml-3 block text-sm text-gray-900 dark:text-gray-100 leading-6">
+                  Remember me
+                </label>
+              </div>
+            @endif
+
+            @if(showForgotPassword)
+              <div class="text-sm leading-6">
+                <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold hover:text-indigo-500 dark:hover:text-indigo-300">
+                  Forgot password?
+                </a>
+              </div>
+            @endif
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              class="w-full flex justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm text-white font-semibold leading-6 shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-indigo-600 focus-visible:outline-offset-2 focus-visible:outline"
+            >
+              Sign in
+            </button>
+          </div>
+        </div>
+
+        @if(showSocialLogin)
+          <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 continue 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]" 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>
+
+      @if(showSignup)
+        <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
+          Not a member?
+          <a href="#" class="text-indigo-600 dark:text-indigo-400 font-semibold leading-6 hover:text-indigo-500 dark:hover:text-indigo-300">
+            {{ signupText }}
+          </a>
+        </p>
+      @endif
+    </div>
+  </form>
+</div>
+
+<script>
+function handleSubmit(event) {
+  const formData = new FormData(event.target)
+  const email = formData.get('email')
+  const password = formData.get('password')
+
+  if (onSubmit) {
+    onSubmit({ email, password })
+  }
+
+  // Clear password after submission
+  setTimeout(() => {
+    event.target.querySelector('#password').value = ''
+  }, 1000)
+}
+</script>

package/dist/Navigator-tqqdgdkw.stx

@@ -0,0 +1,138 @@
+<script>
+// Navigator Component Props
+export const items = $props.items || []
+export const active = $props.active || ''
+export const orientation = $props.orientation || 'horizontal' // 'horizontal' | 'vertical'
+export const variant = $props.variant || 'default' // 'default' | 'pills' | 'underline' | 'sidebar'
+export const size = $props.size || 'md' // 'sm' | 'md' | 'lg'
+export const onNavigate = $props.onNavigate
+export const className = $props.className || ''
+
+// Helper function to check if item is active
+function isActive(item) {
+  if (typeof item.href === 'string' && typeof active === 'string') {
+    // Exact match
+    if (item.href === active) return true
+    // Match with query params/hash
+    if (active.startsWith(item.href)) return true
+  }
+  if (item.id && item.id === active) return true
+  return false
+}
+
+// Base classes
+const containerBaseClasses = orientation === 'horizontal'
+  ? 'flex items-center'
+  : 'flex flex-col'
+
+const containerClasses = `${containerBaseClasses} ${className}`.trim()
+
+// Item classes based on variant and size
+function getItemClasses(item) {
+  const active = isActive(item)
+  let classes = ''
+
+  // Size classes
+  const sizeClasses = {
+    sm: 'px-2 py-1 text-sm',
+    md: 'px-3 py-2 text-base',
+    lg: 'px-4 py-3 text-lg',
+  }
+
+  classes += sizeClasses[size] || sizeClasses.md
+
+  // Variant classes
+  if (variant === 'default') {
+    classes += active
+      ? ' text-gray-900 dark:text-gray-100 font-medium'
+      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+  } else if (variant === 'pills') {
+    classes += active
+      ? ' bg-blue-600 text-white font-medium rounded-full'
+      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
+  } else if (variant === 'underline') {
+    classes += active
+      ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
+      : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
+  } else if (variant === 'sidebar') {
+    classes += active
+      ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
+      : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
+  }
+
+  // Common classes
+  classes += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
+
+  if (item.disabled) {
+    classes += ' opacity-50 cursor-not-allowed pointer-events-none'
+  }
+
+  return classes.trim()
+}
+
+// Gap classes between items
+const gapClasses = orientation === 'horizontal'
+  ? 'gap-1'
+  : 'gap-0.5'
+
+function handleClick(item, event) {
+  if (item.disabled) {
+    event.preventDefault()
+    return
+  }
+
+  if (onNavigate) {
+    event.preventDefault()
+    onNavigate(item)
+  }
+}
+</script>
+
+<nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
+  @foreach(item in items)
+    @if(item.href)
+      <a
+        href="{{ item.href }}"
+        class="{{ getItemClasses(item) }}"
+        onclick="handleClick(item, event)"
+        @if(isActive(item))
+          aria-current="page"
+        @endif
+        @if(item.disabled)
+          aria-disabled="true"
+          tabindex="-1"
+        @endif
+      >
+        @if(item.icon)
+          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
+        @endif
+        <span>{{ item.label }}</span>
+        @if(item.badge)
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+            {{ item.badge }}
+          </span>
+        @endif
+      </a>
+    @else
+      <button
+        type="button"
+        class="{{ getItemClasses(item) }}"
+        onclick="handleClick(item, event)"
+        @if(item.disabled)
+          disabled
+          aria-disabled="true"
+        @endif
+      >
+        @if(item.icon)
+          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
+        @endif
+        <span>{{ item.label }}</span>
+        @if(item.badge)
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+            {{ item.badge }}
+          </span>
+        @endif
+      </button>
+    @endif
+  @endforeach
+</nav>

package/dist/Notification-sry8egea.stx

@@ -0,0 +1,71 @@
+<script>
+export const show = $props.show !== false
+export const title = $props.title || ''
+export const message = $props.message || ''
+export const type = $props.type || 'info'
+export const position = $props.position || 'top-right'
+export const duration = $props.duration || 5000
+export const onClose = $props.onClose
+export const className = $props.className || ''
+
+const typeColors = {
+  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
+  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
+  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
+  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
+}
+
+const positions = {
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+}
+
+const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
+const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.()
+}
+</script>
+
+@if(show)
+  <div class="{{ notificationClasses }}" role="alert">
+    <div class="flex items-start">
+      <div class="flex-1">
+        @if(title)
+          <p class="text-sm font-medium">{{ title }}</p>
+        @endif
+        @if(message)
+          <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
+        @endif
+        @if(!title && !message)
+          <slot />
+        @endif
+      </div>
+
+      <button
+        type="button"
+        @click="handleClose"
+        class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+      >
+        <span class="sr-only">Close</span>
+        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <script>
+  // Auto-hide after duration (client-side only)
+  if (typeof window !== 'undefined' && duration > 0) {
+    setTimeout(() => {
+      handleClose()
+    }, duration)
+  }
+  </script>
+@endif

package/dist/NumberInput-zm93ddfw.stx

@@ -0,0 +1,138 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const placeholder = $props.placeholder || '0'
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || false
+export const size = $props.size || 'md'
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const min = $props.min
+export const max = $props.max
+export const step = $props.step || 1
+export const showControls = $props.showControls ?? true
+export const className = $props.className || ''
+export const inputClassName = $props.inputClassName || ''
+
+// Size classes
+const sizeClasses = {
+  sm: 'px-3 py-1.5 text-sm h-8',
+  md: 'px-4 py-2 text-base h-10',
+  lg: 'px-5 py-3 text-lg h-12',
+}
+
+// Base and state classes
+const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100'
+
+const stateClasses = error
+  ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
+  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  : readonly
+    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    : 'bg-white dark:bg-blue-gray-700'
+
+const paddingClasses = showControls ? 'pr-10' : ''
+
+export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="number-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="relative">
+    <input
+      type="number"
+      id="number-input"
+      class="{{ inputClasses }}"
+      value="{{ value }}"
+      placeholder="{{ placeholder }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      required="{{ required }}"
+      @if(min !== undefined)min="{{ min }}"@endif
+      @if(max !== undefined)max="{{ max }}"@endif
+      step="{{ step }}"
+      oninput="handleInput(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(helperText)aria-describedby="helper-text"@endif
+    />
+
+    @if(showControls && !disabled && !readonly)
+      <!-- Increment/Decrement controls -->
+      <div class="absolute inset-y-0 right-0 flex flex-col">
+        <button
+          type="button"
+          onclick="handleIncrement()"
+          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
+          aria-label="Increment"
+        >
+          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          onclick="handleDecrement()"
+          class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+          aria-label="Decrement"
+        >
+          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </div>
+    @endif
+  </div>
+
+  @if(helperText)
+    <p id="helper-text" class="{{ helperClasses }}">
+      {{ helperText }}
+    </p>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const newValue = event.target.value
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+function handleIncrement() {
+  const currentValue = parseFloat(value) || 0
+  const newValue = currentValue + step
+
+  if (max !== undefined && newValue > max) return
+
+  if (onChange) {
+    onChange(String(newValue))
+  }
+}
+
+function handleDecrement() {
+  const currentValue = parseFloat(value) || 0
+  const newValue = currentValue - step
+
+  if (min !== undefined && newValue < min) return
+
+  if (onChange) {
+    onChange(String(newValue))
+  }
+}
+</script>