@stacksjs/components 0.2.27 → 0.2.53

package/dist/ui/popover/PopoverButton.stx

@@ -1,6 +1,4 @@
-export declare function handleClick(e: unknown): void;
 export declare const className: unknown;
 export declare const as: unknown;
 export declare const disabled: unknown;
-export declare const onClick: unknown;
-declare class AnonymousClass {}
+export declare const buttonClasses: unknown;

package/dist/ui/popover/PopoverPanel.stx

@@ -1,4 +1,4 @@
 export declare const className: unknown;
 export declare const as: unknown;
-export declare const static_: unknown;
 export declare const position: unknown;
+export declare const panelClasses: unknown;

package/dist/ui/portal/Portal.stx

@@ -1,2 +1,3 @@
 export declare const target: unknown;
 export declare const disabled: unknown;
+export declare const portalId: () => unknown;

package/dist/ui/progress/Progress.stx

@@ -6,9 +6,14 @@ export declare const color: unknown;
 export declare const showLabel: unknown;
 export declare const indeterminate: unknown;
 export declare const className: unknown;
+export declare const circularSize: unknown;
+export declare const strokeWidth: unknown;
+export declare const radius: unknown;
+export declare const circumference: unknown;
 export declare const containerClasses: unknown;
 export declare const linearTrackClasses: unknown;
 export declare const linearBarClasses: unknown;
+export declare const circularSizeClass: unknown;
 export declare const labelClasses: unknown;
 export declare const circularTrackColor: 'stroke-gray-200 dark:stroke-gray-700';
-export declare const circularBarColor: unknown;
+export declare const circularBarColor: (...args: any[]) => any;

package/dist/ui/radio/Radio.stx

@@ -1,5 +1,4 @@
 export declare const checked: unknown;
-export declare const onChange: () => unknown;
 export declare const disabled: unknown;
 export declare const size: unknown;
 export declare const label: unknown;
@@ -12,3 +11,4 @@ export declare const className: unknown;
 export declare const radioClasses: unknown;
 export declare const labelClasses: unknown;
 export declare const descriptionClasses: unknown;
+export declare const inputId: unknown;

package/dist/ui/radio-group/RadioGroup.stx

@@ -1,4 +1,5 @@
 export declare const value: unknown;
-export declare const onChange: unknown;
 export declare const className: unknown;
 export declare const as: unknown;
+export declare const groupClasses: unknown;
+export declare const radioGroupInstanceId: () => unknown;

package/dist/ui/radio-group/RadioGroupOption.stx

@@ -1,13 +1,6 @@
-export declare function handleClick(): void;
-export declare function handleFocus(): void;
-export declare function handleBlur(): void;
 export declare const value: unknown;
 export declare const disabled: unknown;
 export declare const className: unknown;
 export declare const as: unknown;
-export declare const currentValue: unknown;
-export declare const onChange: unknown;
-/** @defaultValue false */
-export declare let active: boolean;
-export declare const checked: unknown;
-declare class AnonymousClass {}
+export declare const optionClasses: unknown;
+export declare const valueJson: unknown;

package/dist/ui/select/Select.stx

@@ -1,5 +1,4 @@
 export declare const value: unknown;
-export declare const onChange: () => unknown;
 export declare const options: unknown;
 export declare const placeholder: unknown;
 export declare const disabled: unknown;
@@ -12,3 +11,4 @@ export declare const className: unknown;
 export declare const selectClasses: unknown;
 export declare const labelClasses: unknown;
 export declare const helperClasses: unknown;
+export declare const selectId: unknown;

package/dist/ui/sidebar/Sidebar.stx

@@ -1,33 +1,16 @@
-/**
- * Sidebar Component - macOS Native Style
- *
- * A native-feeling sidebar component that integrates with Craft for true native rendering
- * when running in a Craft desktop environment, with beautiful macOS Tahoe-style fallback
- * for web environments.
- *
- * @example
- * <Sidebar
- *   :sections="sections"
- *   :collapsed="false"
- *   :width="240"
- *   variant="tahoe"
- * >
- *   <template #header>
- *     <SidebarHeader title="My App" />
- *   </template>
- *   <template #footer>
- *     <SidebarFooter />
- *   </template>
- * </Sidebar>
- */
-// Props
 export declare const sections: unknown;
 export declare const collapsed: unknown;
 export declare const collapsible: unknown;
 export declare const width: unknown;
 export declare const minWidth: unknown;
 export declare const variant: unknown;
+export declare const position: unknown;
+export declare const placement: unknown;
+export declare const bordered: unknown;
 export declare const className: unknown;
-export declare const onCollapse: unknown;
-export declare const onSectionToggle: unknown;
-export declare const onItemClick: unknown;
+export declare const variantTint: unknown;
+export declare const variantShimmer: unknown;
+export declare const containerClasses: unknown;
+export declare const collapseBtnPosition: unknown;
+export declare const navClasses: unknown;
+export declare const slotClasses: (...args: any[]) => any;

package/dist/ui/sidebar/SidebarFooter.stx

@@ -1,27 +1,12 @@
-/**
- * SidebarFooter Component
- *
- * A footer component for the sidebar with quick actions and settings.
- *
- * @example
- * <SidebarFooter
- *   :showSettings="true"
- *   :showThemeToggle="true"
- *   settingsHref="/settings"
- * />
- */
-// Props
 export declare const showSettings: unknown;
 export declare const showThemeToggle: unknown;
 export declare const settingsHref: unknown;
 export declare const settingsLabel: unknown;
 export declare const collapsed: unknown;
-export declare const onThemeToggle: unknown;
-// Quick action items
 export declare const actions: unknown;
-declare type  = "button";
-declare type  = "button";
-declare class AnonymousClass {}
-declare class AnonymousClass {}
-declare class AnonymousClass {}
-declare class AnonymousClass {}
+export declare const variant: unknown;
+export declare const footerClasses: unknown;
+export declare const actionClasses: unknown;
+export declare const footerIconClasses: unknown;
+export declare const settingsIconClasses: `i-hugeicons-settings-02 ${footerStyle.icon}`;
+export declare const themeButtonClasses: unknown;

package/dist/ui/sidebar/SidebarHeader.stx

@@ -1,16 +1,3 @@
-/**
- * SidebarHeader Component
- *
- * A header component for the sidebar with logo, title, and optional search.
- *
- * @example
- * <SidebarHeader
- *   title="My App"
- *   subtitle="Professional"
- *   :showSearch="true"
- * />
- */
-// Props
 export declare const title: unknown;
 export declare const subtitle: unknown;
 export declare const logo: unknown;
@@ -19,8 +6,10 @@ export declare const showSearch: unknown;
 export declare const searchPlaceholder: unknown;
 export declare const searchValue: unknown;
 export declare const collapsed: unknown;
-export declare const onSearch: unknown;
-declare type  = "text"
-          placeholder="{{ searchPlaceholder }}"
-          value="{{ searchValue }}";
-declare class AnonymousClass {}
+export declare const variant: unknown;
+export declare const titlebarClasses: unknown;
+export declare const logoClasses: unknown;
+export declare const titleClasses: unknown;
+export declare const subtitleClasses: unknown;
+export declare const searchWrapClasses: unknown;
+export declare const searchInputClasses: unknown;

package/dist/ui/sidebar/SidebarItem.stx

@@ -1,19 +1,3 @@
-/**
- * SidebarItem Component
- *
- * An individual navigation item within a sidebar section.
- * Supports icons, badges, active states, and keyboard navigation.
- *
- * @example
- * <SidebarItem
- *   id="home"
- *   label="Home"
- *   icon="i-hugeicons-home-02"
- *   href="/"
- *   :active="true"
- * />
- */
-// Props
 export declare const id: unknown;
 export declare const label: unknown;
 export declare const icon: unknown;
@@ -22,7 +6,7 @@ export declare const badge: unknown;
 export declare const active: unknown;
 export declare const disabled: unknown;
 export declare const indent: unknown;
-export declare const onClick: unknown;
-declare type  = "button";
-declare class AnonymousClass {}
-declare class AnonymousClass {}
+export declare const variant: unknown;
+export declare const itemClasses: unknown;
+export declare const iconClasses: `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`;
+export declare const badgeClasses: unknown;

package/dist/ui/sidebar/SidebarSection.stx

@@ -1,19 +1,3 @@
-/**
- * SidebarSection Component
- *
- * A collapsible section within the sidebar containing navigation items.
- * Follows macOS Finder sidebar conventions.
- *
- * @example
- * <SidebarSection
- *   id="favorites"
- *   label="Favorites"
- *   icon="i-hugeicons-star"
- *   :items="favoriteItems"
- *   :expanded="true"
- * />
- */
-// Props
 export declare const id: unknown;
 export declare const label: unknown;
 export declare const icon: unknown;
@@ -21,5 +5,8 @@ export declare const items: unknown;
 export declare const expanded: unknown;
 export declare const collapsible: unknown;
 export declare const showLabel: unknown;
-export declare const onToggle: unknown;
-export declare const onItemClick: unknown;
+export declare const variant: unknown;
+export declare const headerClassesValue: unknown;
+export declare const sectionClasses: unknown;
+export declare const groupClasses: unknown;
+export declare const labelClasses: () => unknown;

package/dist/ui/sidebar/index.d.ts

@@ -22,7 +22,8 @@ export declare interface SidebarProps {
   collapsible?: boolean
   width?: number
   minWidth?: number
-  variant?: 'tahoe' | 'vibrancy' | 'solid' | 'transparent'
+  variant?: SidebarVariant
+  placement?: 'fixed' | 'sticky' | 'static'
   position?: 'left' | 'right'
   bordered?: boolean
   className?: string
@@ -38,6 +39,7 @@ export declare interface SidebarSectionProps {
   expanded?: boolean
   collapsible?: boolean
   showLabel?: boolean
+  variant?: SidebarVariant
   onToggle?: (id: string) => void
   onItemClick?: (item: SidebarItemData, event: Event) => void
 }
@@ -50,6 +52,7 @@ export declare interface SidebarItemProps {
   active?: boolean
   disabled?: boolean
   indent?: boolean
+  variant?: SidebarVariant
   onClick?: (event: Event) => void
 }
 export declare interface SidebarHeaderProps {
@@ -61,6 +64,7 @@ export declare interface SidebarHeaderProps {
   searchPlaceholder?: string
   searchValue?: string
   collapsed?: boolean
+  variant?: SidebarVariant
   onSearch?: (value: string) => void
 }
 export declare interface SidebarFooterProps {
@@ -69,6 +73,7 @@ export declare interface SidebarFooterProps {
   settingsHref?: string
   settingsLabel?: string
   collapsed?: boolean
+  variant?: SidebarVariant
   actions?: Array<{
     label: string
     icon?: string
@@ -84,6 +89,10 @@ export declare interface SidebarFooterProps {
  * The sidebar uses NSOutlineView with vibrancy for a true Tahoe-style appearance.
  */
 export declare interface NativeSidebarConfig {
+  variant?: SidebarVariant
+  material?: SidebarMaterial
+  backgroundEffect?: SidebarBackgroundEffect
+  allowsVibrancy?: boolean
   header?: {
     title?: string
     subtitle?: string
@@ -122,6 +131,9 @@ export declare interface SidebarSelectEvent {
   item: NativeSidebarItem
   sectionId?: string
 }
+export type SidebarVariant = 'tahoe' | 'vibrancy' | 'solid' | 'transparent' | 'workspace' | 'desktop';
+export type SidebarMaterial = 'auto' | 'sidebar' | 'hud' | 'popover' | 'content';
+export type SidebarBackgroundEffect = 'none' | 'vibrancy' | 'shimmer';
 export { default as Sidebar } from './Sidebar.stx';
 export { default as SidebarSection } from './SidebarSection.stx';
 export { default as SidebarItem } from './SidebarItem.stx';

package/dist/ui/stepper/StepperStep.stx

@@ -1,12 +1,8 @@
-export declare function handleClick(): void;
 export declare const stepNumber: unknown;
 export declare const currentStep: unknown;
 export declare const label: unknown;
 export declare const description: unknown;
 export declare const className: unknown;
 export declare const as: unknown;
-export declare const onClick: unknown;
 export declare const isComplete: unknown;
-declare type  = "button"
-    @click="handleClick";
-declare class AnonymousClass {}
+export declare const stepClasses: unknown;

package/dist/ui/switch/Switch.stx

@@ -1,15 +1,9 @@
-// Toggle function
-export declare function toggle(): void;
 export declare const checked: unknown;
 export declare const disabled: unknown;
 export declare const size: unknown;
 export declare const className: unknown;
-export declare const onChange: unknown;
 export declare const label: unknown;
-export declare const trackClasses: unknown;
-export declare const thumbClasses: unknown;
-declare type  = "button"
-    role="switch"
-    aria-checked="{{ checked ? 'true' : 'false' }}";
-declare class AnonymousClass {}
-declare class AnonymousClass {}
+export declare const config: unknown;
+export declare const trackBaseClasses: 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700';
+export declare const trackDisabledClasses: unknown;
+export declare const thumbBaseClasses: unknown;

package/dist/ui/table/TableHeader.stx

@@ -1,3 +1,3 @@
 export declare const className: unknown;
 export declare const sortable: unknown;
-export declare const onClick: unknown;
+export declare const headerClasses: unknown;

package/dist/ui/tabs/Tabs.stx

@@ -3,7 +3,6 @@ export declare const defaultTab: unknown;
 export declare const orientation: unknown;
 export declare const variant: unknown;
 export declare const className: unknown;
-export declare const onChange: unknown;
 export declare const containerClasses: unknown;
 export declare const tabListClasses: unknown;
 export declare const tabPanelClasses: unknown;

package/dist/ui/teleport/Teleport.stx

@@ -1,3 +1,4 @@
 export declare const to: unknown;
 export declare const disabled: unknown;
 export declare const defer: unknown;
+export declare const teleportId: () => unknown;

package/dist/ui/textarea/Textarea.stx

@@ -1,5 +1,4 @@
 export declare const value: unknown;
-export declare const onChange: () => unknown;
 export declare const placeholder: unknown;
 export declare const disabled: unknown;
 export declare const readonly: unknown;
@@ -13,6 +12,7 @@ export declare const required: unknown;
 export declare const maxLength: unknown;
 export declare const showCount: unknown;
 export declare const resize: unknown;
+export declare const className: unknown;
 export declare const textareaClasses: unknown;
 export declare const labelClasses: unknown;
 export declare const helperClasses: () => unknown;

package/dist/ui/tooltip/Tooltip.stx

@@ -5,5 +5,4 @@ export declare const className: unknown;
 export declare const show: unknown;
 export declare const disabled: unknown;
 export declare const tooltipClasses: unknown;
-export declare const arrowClass: unknown;
-declare class AnonymousClass {}
+export declare const arrowClass: () => unknown;

package/dist/ui/transition/Transition.stx

@@ -6,22 +6,15 @@ export declare const leave: unknown;
 export declare const leaveFrom: unknown;
 export declare const leaveTo: unknown;
 export declare const appear: unknown;
-export declare const appearFrom: unknown;
-export declare const appearTo: unknown;
-export declare const mode: unknown;
+export declare const duration: unknown;
 export declare const delay: unknown;
 export declare const preset: unknown;
-export declare const onBeforeEnter: unknown;
-export declare const onEnter: unknown;
-export declare const onAfterEnter: unknown;
-export declare const onBeforeLeave: unknown;
-export declare const onLeave: unknown;
-export declare const onAfterLeave: unknown;
 export declare const className: unknown;
-/** @defaultValue false */
-export declare let isEntering: boolean;
-/** @defaultValue false */
-export declare let isLeaving: boolean;
-export declare let shouldRender: unknown;
-/** @defaultValue false */
-export declare let hasAppeared: boolean;
+export declare const enterClass: unknown;
+export declare const enterFromClass: unknown;
+export declare const enterToClass: unknown;
+export declare const leaveClass: unknown;
+export declare const leaveFromClass: unknown;
+export declare const leaveToClass: unknown;
+export declare const durationStyle: `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`;
+export declare const extraClass: (...args: any[]) => any;

package/dist/ui/virtual-list/VirtualList.stx

@@ -2,8 +2,6 @@ export declare const items: unknown;
 export declare const itemHeight: unknown;
 export declare const height: unknown;
 export declare const overscan: unknown;
-export declare const renderItem: unknown;
 export declare const className: unknown;
-export declare const containerClasses: unknown;
-export declare const innerClasses: unknown;
-export declare const itemClasses: () => unknown;
+export declare const totalHeight: unknown;
+export declare const containerClasses: (...args: any[]) => any;

package/dist/ui/virtual-table/VirtualTable.stx

@@ -7,10 +7,10 @@ export declare const overscan: unknown;
 export declare const striped: unknown;
 export declare const hoverable: unknown;
 export declare const className: unknown;
+export declare const totalHeight: unknown;
 export declare const containerClasses: unknown;
 export declare const headerClasses: unknown;
 export declare const headerCellClasses: unknown;
 export declare const bodyClasses: unknown;
-export declare const innerClasses: unknown;
 export declare const rowClasses: unknown;
 export declare const cellClasses: () => unknown;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.27",
+  "version": "0.2.53",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "@cwcss/crosswind": "^0.2.0",
-    "@stacksjs/stx": "0.2.28",
-    "bun-plugin-stx": "0.2.27",
+    "@stacksjs/stx": "0.2.53",
+    "bun-plugin-stx": "0.2.51",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/components/CodeBlock.stx

@@ -1,5 +1,5 @@
-<script>
-import { highlight, applyHeadwindClasses } from '../utils/highlighter'
+<script server>
+import { applyHeadwindClasses, highlight } from '../utils/highlighter'
 
 export const code = $props.code || ''
 export const language = $props.language || 'typescript'
@@ -8,21 +8,21 @@ export const lineNumbers = $props.lineNumbers !== false
 export const copyable = $props.copyable !== false
 export const className = $props.className || ''
 
-export let highlightedCode = ''
-export let copied = false
-
-// Highlight the code
 const result = await highlight(code, { language, theme, lineNumbers })
-highlightedCode = applyHeadwindClasses(result.html, className)
+export const highlightedCode = applyHeadwindClasses(result.html, className)
+</script>
 
-export async function copyToClipboard() {
+<script client>
+const code = {{ code }}
+const copied = state(false)
+
+async function copyToClipboard() {
   try {
     await navigator.clipboard.writeText(code)
-    copied = true
-    setTimeout(() => {
-      copied = false
-    }, 2000)
-  } catch (err) {
+    copied.set(true)
+    setTimeout(() => copied.set(false), 2000)
+  }
+  catch (err) {
     console.error('Failed to copy code:', err)
   }
 }
@@ -33,25 +33,22 @@ export async function copyToClipboard() {
 
   @if(copyable)
     <button
-      @click="copyToClipboard"
+      @click="copyToClipboard()"
       class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-white text-xs rounded-md font-medium"
       aria-label="Copy code"
     >
-      @if(copied)
-        <span class="flex items-center gap-1.5">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-          </svg>
-          Copied!
-        </span>
-      @else
-        <span class="flex items-center gap-1.5">
-          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-          </svg>
-          Copy
-        </span>
-      @endif
+      <span :show="copied()" class="flex items-center gap-1.5">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+        Copied!
+      </span>
+      <span :show="!copied()" class="flex items-center gap-1.5">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+        Copy
+      </span>
     </button>
   @endif
 </div>

package/src/components/Footer.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const author = $props.author || '@chrisbbreuer'
 export const authorUrl = $props.authorUrl || 'https://github.com/chrisbbreuer'
 export const project = $props.project || '@stacksjs'

package/src/components/Hero.stx

@@ -1,4 +1,4 @@
-<script>
+<script server>
 export const title = $props.title || 'Component'
 export const description = $props.description || 'A modern component built with STX'
 export const githubUrl = $props.githubUrl || '#'

package/src/components/Installation.stx

@@ -1,6 +1,4 @@
-<script>
-import { CodeBlock } from './CodeBlock.stx'
-
+<script server>
 export const packageName = $props.packageName || '@stacksjs/component'
 export const installCode = `bun add ${packageName}`
 export const npmCode = `npm install ${packageName}`
@@ -18,22 +16,22 @@ export const yarnCode = `yarn add ${packageName}`
   <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' })
+      <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' })
+      <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' })
+      <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' })
+      <CodeBlock :code="yarnCode" language="bash" />
     </div>
   </div>
 </div>