组件目录
46 个 Blade 组件。仅靠 Tailwind + daisyUI 即可运行的静态组件，以及依托 Alpine.js 提供交互行为的动态组件，按类别分别整理。点击卡片即可进入各组件的独立页面。
pinion-ui
· 静态 — 仅 Tailwind + daisyUI 27Button
颜色 × 外观（实心 / 轮廓 / 柔和 / base-100 / base-200 / base-300 / 幽灵 / 链接）— 共 8 种颜色
/buttonButton Group
分段控制风格，将多个按钮/链接束在一起。包装器自动去除中间子元素的 border-radius 并合并相邻边框。悬停时由包装器统一应用柔和色调，组件不显得厚重（v0.3.3 改进）。方向：水平（默认）/ 垂直。子元素无需添加 `class="join-item"`（v0.3.3 起不再需要）。
/button-groupBadge
颜色 × 外观（实心 / 轮廓 / 柔和 / base-100 / base-200 / base-300 / 圆点）
/badgeCard
外观 = 默认 / 浮起 / 填充 / base-100 / base-200 / base-300 / 轮廓 / 柔和 / 实心 / 顶部边框 / 幽灵 — 支持分隔线开关
/cardAvatar
首字母/图标/图像 + 尺寸 × 形状 × 状态指示器
/avatarAvatar Group
daisyUI 5 avatar-group 类将多个头像堆叠排列（人脸堆积）。用于项目成员、参与者或负责人列表。只需在 slot 中并排多个 <x-avatar> 即可。spacing 控制堆叠密度：3 档（紧密 / 标准 / 宽松）。
/avatar-groupInput
颜色 × 外观（轮廓 / 柔和 / 下划线 / 幽灵）— 支持前缀/后缀、图标、浮动标签、追加 slot
/inputCheckbox
虚拟复选框（peer + sr-only）— 颜色 × 外观（实心 / 柔和 / base-100 / base-200 / base-300）× 尺寸
/checkboxRadio
虚拟单选框（peer + sr-only）— 颜色 × 外观（实心 / 柔和 / base-100 / base-200 / base-300）× 尺寸，支持 radio-group
/radioToggle
开关（peer + sr-only，role="switch"）— 颜色 × 外观（实心 / 柔和）× 尺寸，支持可选的开/关状态标签。实心填充滑轨；柔和反转并填充拇指。
/togglePagination
full（编号）/ simple（上一页-当前/总数-下一页）— 颜色 × 外观 × 尺寸，支持 Laravel paginator
/paginationProgress
daisyUI progress bar 包装器。value=null 为不确定（动画条纹），指定 value 为确定状态。通过 prop 控制颜色 × 尺寸 × showLabel（百分比 / 分数）。a11y 已附加 role=progressbar + aria-valuenow / valuemin / valuemax。
/progressSkeleton
内容加载中的占位符。包装 daisyUI 的 skeleton 类，通过 prop 控制 shape（矩形 / 圆 / 文本）/ width / height / radius / animated。width / height 用 Tailwind 类名传递（如 `w-32`、`h-4`）。
/skeletonSpinner
加载指示器行内显示。包装 daisyUI 5 的 loading 类。variant（旋转/圆点/圆环/条纹/球/无穷）× size（xs〜xl）× color（8 色）组合，表达按钮内、整页或卡片等一切"等待时间"。
/spinnerKbd
键盘快捷键用行内芯片。HTML5 <kbd> 元素由 daisyUI 5 的 kbd 类包装。仅 2 个 prop：size 和 appearance。可嵌入段落或用 + 连接表示组合键。
/kbdTooltip
daisyUI 5 tooltip 类的包装器，无 JS / 纯 CSS 悬停提示。trigger 放入 slot，本文通过 text prop 传递。position（上/右/下/左）、color（浅色默认 + 8 个变体含中性）、open（常显）3 个 prop。
/tooltipIndicator
daisyUI 5 indicator 类的包装器，在另一个元素的角落重叠徽章或圆点。position（上/中/下 × 左/中/右，共 9 种）、dot（bool，true=纯圆点无文字）、color（8 色，默认=错误）、appearance（实心默认 / 柔和 / 轮廓 / 幽灵 / 虚线）4 个 prop。默认实心（浓填充）强调"有通知"。柔和等为可选。$badge slot 放内容，$slot 放被覆盖的元素。
/indicatorBreadcrumb
分层导航。包装 daisyUI 5 的 breadcrumbs 类。双 API：通过 items 数组传递，或自行编写 <ul> 和 <li>。末项（省略 url）显示为当前位置，不生成链接。分隔符 2 种：chevron（默认）/ 斜杠；尺寸 3 档：sm / md / lg。
/breadcrumbStat
KPI / 指标单独显示。包装 daisyUI 的 stats + stat 类，除 label / value / desc 外，还有 valueColor / trend / trendValue 控制着色和方向箭头。多个并排时设 wrapped=false，外层自行 <div class="stats">。
/statDivider
daisyUI 5 divider 类的包装器，用于分隔部分。@verbatim@endverbatim 输出纯线条，slot 中加文本则为带标签的分隔线。direction=vertical 在 flex 中变成垂直线。
/dividerRating
daisyUI 5 rating（遮罩 + 单选框）包装器。星形 / 心形 / 圆形，半星（half=true），只读模式。每个演示 name 属性必须唯一以隔离单选框组。
/ratingRange Slider
daisyUI 5 range 类的包装器，<input type="range"> + 标签/值显示/提示/错误提示。8 种颜色 × 5 种尺寸，min/max/step，showValue（Alpine 实时显示），错误状态。既可作表单输入，也可作纯视觉滑块。
/range-sliderInput Number
数量选择器 — [−] [input] [＋] 3 元素边框连接。min/max/step 同时在 HTML 属性和 Alpine 限制中强制执行，到达边界时 ± 按钮自动禁用。原生微调箭头隐藏。支持小数步长（如 0.5）。
/input-numberInput Group
将任意表单元素水平并排连接。支持 select+input、input+button、input+input 等组合。x-input 的 prefix/suffix/append 适合单输入框自定义，此组件适合多个同级表单元素。`$c['addon']` 辅助类可将文本修饰 span 对齐到 addon 高度。
/input-groupPin Input
OTP / 验证码输入 — N 个单字符框自动推进 / 退格回退 / 方向键导航 / 粘贴填充联动。首框预设 autocomplete="one-time-code"（iOS/Android 可显示短信码候选）。numeric（默认）/ 字母数字，length / size / masked / autofocus 等 prop。组合值通过隐藏 input 随表单提交。
/pin-inputTimeline
daisyUI 5 timeline 类的包装器，时序列表。直接通过 items 数组传递即可。orientation（垂直/水平）、compact（单侧对齐）、snap（图标上端对齐）、appearance（实心默认 / 柔和）4 个修饰符。各项添加 state=done|current|upcoming 时，中间图标和连接线改变颜色。默认实心（浓主色）使完成链突出清晰。需要温和外观时才选 appearance="soft"。
/timelineStepper
多步骤流程可视化 — 注册流 / 结账 / 向导。通过 items 数组传递，各项添加 state=done|current|upcoming。orientation（水平默认 / 垂直）和 variant（编号默认 / 圆点）2 个修饰符。timeline 用于仅追加历史，stepper 用于有界顺序进度。
/stepperpinion-ui
· 动态 — Alpine.js 驱动 Alpine 13Alert
8 种外观 × 语义色彩，支持可关闭
/alertTextarea
颜色 × 外观（轮廓 / 柔和 / 下划线 / 幽灵）— 行数、自动调整大小、字符计数器、标签/提示/错误
/textareaSelect
原生 select — 颜色 × 外观、尺寸、选项组、多选、浮动标签
/selectFile Upload
原生 <input type="file"> + file:* 工具类（行内）和虚线拖放区（大区域）。Alpine 驱动的多文件进度条 — 进度条动画由模拟进度驱动，演示自运行。
/file-uploadNotification
在页面放置一次，任意 Alpine 组件可 $dispatch("notify", { type, content }) 发出 Toast。position / appearance / size / duration / event-name 通过 prop 控制。
/notification-systemTable
常规表格显示 + x-table-scroll 包装器：水平滚动时显示左右按钮和渐变淡出。内容不溢出时包装器透明（无额外内容）。非仅用于表格，也适用于卡片列表、图片条纹等。
/table-scrollDropdown
Alpine.js 驱动的通用下拉菜单。trigger 可通过 slot 自定义，label prop 可快速变为按钮。position（底端右对齐默认 / 底端左 / 顶端右 / 顶端左）、size（sm/md/lg）、width（任意 Tailwind w-* class）3 个 prop。菜单内容自由 — 可放链接、按钮或任何元素。
/dropdownPopover
点击（或悬停）在触发器旁浮起的面板。介于 dropdown 和 tooltip 之间 — 可放任意内容（信息卡 / 迷你表单 / 确认提示）。4 个放置位置（上/右/下/左）CSS 定位（无碰撞检测），可选箭头，trigger="click"（默认）/ "hover"。Alpine 驱动，ESC 或外部点击关闭。
/popoverModal
Alpine x-data 驱动的叠加对话框。点击 trigger slot 中的元素打开，或从其他地方 $dispatch("open-modal-{id}") 打开。size（sm/md/lg/xl/full）、title、showClose、closeOnBackdrop 共 5 个 prop。背景点击 / Escape / × 按钮关闭。x-trap 处理焦点陷阱，x-teleport 渲染到 body 末尾。
/modalTabs
选项卡式内容切换。v0.4.0 采用嵌套语法改进（能安全地传递 Blade slot，无 XSS 风险）。在 <x-tabs> 内并排放置 <x-tab name="..." label="...">content</x-tab>。variant：下划线（默认）/ 盒子 / 胶囊；size：sm / md / lg。用 default 指定初始活跃标签（省略时为第一个）。Alpine x-data 保持客户端活跃状态。
/tabsAccordion
可折叠列表。v0.4.0 采用嵌套语法改进（能安全地传递 Blade slot，无 XSS 风险）。在 <x-accordion> 内并排放置 <x-accordion-item title="...">content</x-accordion-item>。支持 single-open / multiple-open，3 个尺寸等级。内容可以是任意 Blade 标记、组件或链接。Alpine x-collapse 驱动平滑动画。
/accordionCollapse
包装 daisyUI 5 的 collapse 类，单个开/关块（无 JS，内部复选框控制）。通过 title prop 或 slot:title 传递标题，$slot 传递主文本。icon（null=默认 / 箭头 / 加号）、bordered（默认 true）、open（初始打开状态）共 3 个 prop + title。默认是无图标的极简显示，需要时可通过 icon prop 选择图标。多个连接可垂直排列组成常见问题解答。
/collapseSidebar
x-teleport 渲染到 body 末尾的抽屉类组件。点击 trigger slot 打开，Escape / × / 背景点击关闭。side（左/右）、size（sm/md/lg）、backdrop 3 个轴生成变体。x-trap.inert.noscroll 和 role=dialog/aria-modal=true 保障 a11y。backdrop=false 时整个叠加层 pointer-events-none，仅面板 pointer-events-auto，后台页面可操作（适用于永久检查器、工具调色板）。
/sidebar