@fayz-ai/ui 0.6.6 → 0.7.0

package/src/layout/ContentSplit.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react'
+import { PanelRight, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import {
+  Sheet, SheetContent, SheetHeader, SheetBody, SheetTitle, SheetDescription,
+} from '../primitives/sheet'
+
+// ---------------------------------------------------------------------------
+// ContentSplit — main content with a right-aligned companion panel, mobile
+// first. Below `lg` the aside lives in a right Sheet (opened by a trigger the
+// host places wherever fits — typically SubpageHeader actions, via
+// <ContentSplitTrigger/>). From `lg` up it docks as a sticky right column.
+//
+// Pairs with SubpageHeader/ModulePage: the page keeps its own back-button
+// header; ContentSplit only owns the columns below it. Reuse for any
+// "document + operational panel" page (script + shooting checklist, form +
+// help, detail + activity feed).
+// ---------------------------------------------------------------------------
+
+interface ContentSplitContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const ContentSplitContext = React.createContext<ContentSplitContextValue | null>(null)
+
+export interface ContentSplitProps {
+  /** Main column (the document). */
+  children: React.ReactNode
+  /** Companion panel content (the checklist / help / activity). */
+  aside: React.ReactNode
+  /** Panel title — Sheet header on mobile, card header on desktop. */
+  asideTitle: React.ReactNode
+  /** Optional subtitle under the title. */
+  asideDescription?: React.ReactNode
+  /** Desktop column width (defaults to 20rem). */
+  asideWidth?: string
+  /** Controlled mobile-sheet state; uncontrolled when omitted. */
+  asideOpen?: boolean
+  onAsideOpenChange?: (open: boolean) => void
+  /** Desktop column can collapse into a slim reopen rail. */
+  collapsible?: boolean
+  /** Initial desktop collapsed state (e.g. expand only on the relevant day). */
+  defaultCollapsed?: boolean
+  className?: string
+}
+
+export function ContentSplit({
+  children,
+  aside,
+  asideTitle,
+  asideDescription,
+  asideWidth = '20rem',
+  asideOpen,
+  onAsideOpenChange,
+  collapsible = false,
+  defaultCollapsed = false,
+  className,
+}: ContentSplitProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const open = asideOpen ?? internalOpen
+  const setOpen = onAsideOpenChange ?? setInternalOpen
+  const [collapsed, setCollapsed] = React.useState(collapsible && defaultCollapsed)
+
+  return (
+    <ContentSplitContext.Provider value={{ open, setOpen }}>
+      <div
+        className={cn('lg:grid lg:items-start lg:gap-6', className)}
+        style={{ gridTemplateColumns: `minmax(0, 1fr) ${collapsed ? 'auto' : asideWidth}` }}
+      >
+        <div className="min-w-0">{children}</div>
+
+        {/* Desktop: docked sticky column (or slim reopen rail when collapsed) */}
+        <aside className="hidden lg:block lg:sticky lg:top-4">
+          {collapsed ? (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCollapsed(false)}
+              className="h-9 w-9 p-0"
+              aria-label={typeof asideTitle === 'string' ? asideTitle : undefined}
+              title={typeof asideTitle === 'string' ? asideTitle : undefined}
+            >
+              <PanelRightOpen className="h-4 w-4" />
+            </Button>
+          ) : (
+            <div className="rounded-card border border-border bg-card">
+              <div className="flex items-start justify-between gap-2 border-b border-border px-4 py-3">
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold text-foreground">{asideTitle}</p>
+                  {asideDescription && (
+                    <p className="mt-0.5 text-xs text-muted-foreground">{asideDescription}</p>
+                  )}
+                </div>
+                {collapsible && (
+                  <button
+                    type="button"
+                    onClick={() => setCollapsed(true)}
+                    className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground"
+                    aria-label="collapse"
+                  >
+                    <PanelRightClose className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              <div className="p-4">{aside}</div>
+            </div>
+          )}
+        </aside>
+      </div>
+
+      {/* Mobile: right sheet */}
+      <div className="lg:hidden">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetContent width="max-w-sm">
+            <SheetHeader>
+              <SheetTitle>{asideTitle}</SheetTitle>
+              {asideDescription && <SheetDescription>{asideDescription}</SheetDescription>}
+            </SheetHeader>
+            <SheetBody>{aside}</SheetBody>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </ContentSplitContext.Provider>
+  )
+}
+
+export interface ContentSplitTriggerProps {
+  /** Accessible label; also the visible text unless `iconOnly`. */
+  label: React.ReactNode
+  iconOnly?: boolean
+  className?: string
+}
+
+/** Opens the mobile aside sheet. Renders nothing from `lg` up (the panel is
+ *  already docked). Place inside SubpageHeader `actions` or any toolbar. */
+export function ContentSplitTrigger({ label, iconOnly, className }: ContentSplitTriggerProps) {
+  const ctx = React.useContext(ContentSplitContext)
+  if (!ctx) return null
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => ctx.setOpen(true)}
+      className={cn('lg:hidden', className)}
+      aria-label={typeof label === 'string' ? label : undefined}
+    >
+      <PanelRight className={cn('h-4 w-4', !iconOnly && 'mr-1.5')} />
+      {!iconOnly && label}
+    </Button>
+  )
+}

package/src/layout/Sidebar.tsx

@@ -218,24 +218,45 @@ function NavItem({
   return content
 }
 
+/** How specifically `route` matches `path` (-1 = no match; higher = more specific).
+ *  An exact match beats a prefix match; a longer prefix beats a shorter one. */
+function routeMatchScore(route: string, path: string): number {
+  if (path === route) return route.length + 1
+  if (route !== '/' && path.startsWith(route + '/')) return route.length
+  return -1
+}
+
+/** The single most-specific nav route that matches the current path (longest wins).
+ *  Prevents a parent like `/courses` from staying active on `/courses/sales`. */
+function resolveActiveRoute(navigation: NavigationItem[], path: string): string | null {
+  let best: string | null = null
+  let bestScore = 0
+  const consider = (route?: string) => {
+    if (!route) return
+    const score = routeMatchScore(route, path)
+    if (score > bestScore) { bestScore = score; best = route }
+  }
+  for (const item of navigation) {
+    consider(item.route)
+    for (const child of item.children ?? []) consider(child.route)
+  }
+  return best
+}
+
 function NavGroup({
   item,
   collapsed,
-  currentPath,
+  activeRoute,
   onNavigate,
 }: {
   item: NavigationItem
   collapsed: boolean
-  currentPath: string
+  activeRoute: string | null
   onNavigate: (route: string) => void
 }) {
-  const [open, setOpen] = React.useState(() =>
-    item.children?.some((c) => currentPath === c.route || currentPath.startsWith(c.route + '/')) ?? false
-  )
+  const isChildActive = item.children?.some((c) => c.route === activeRoute)
+  const [open, setOpen] = React.useState(() => isChildActive ?? false)
   const Icon = getIcon(item.icon)
-  const isChildActive = item.children?.some(
-    (c) => currentPath === c.route || currentPath.startsWith(c.route + '/')
-  )
 
   if (collapsed) {
     return (
@@ -280,7 +301,7 @@ function NavGroup({
         <div className="ml-4 mt-0.5 space-y-0.5 border-l border-sidebar-border/50 pl-3">
           {item.children?.map((child) => {
             const ChildIcon = getIcon(child.icon)
-            const isActive = currentPath === child.route || currentPath.startsWith(child.route + '/')
+            const isActive = child.route === activeRoute
             return (
               <button
                 key={child.id}
@@ -322,6 +343,10 @@ export function Sidebar({
   const currentPath = currentPathProp
   const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
 
+  // Most-specific match wins, so sibling routes that share a prefix (e.g.
+  // /courses vs /courses/sales) don't both light up.
+  const activeRoute = resolveActiveRoute(navigation, currentPath)
+
   const mainItems = navigation.filter((item) => item.section === 'main')
   const secondaryItems = navigation.filter((item) => item.section === 'secondary')
   const settingsItems = navigation.filter((item) => item.section === 'settings')
@@ -379,13 +404,13 @@ export function Sidebar({
             <div className="space-y-1">
               {mainItems.map((item) =>
                 item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} currentPath={currentPath} onNavigate={handleNavigate} />
+                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
                 ) : (
                   <NavItem
                     key={item.id}
                     item={item}
                     collapsed={collapsed}
-                    isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                    isActive={item.route === activeRoute}
                     onNavigate={handleNavigate}
                   />
                 )
@@ -397,13 +422,13 @@ export function Sidebar({
             <div className="mt-6 space-y-1">
               {secondaryItems.map((item) =>
                 item.children && item.children.length > 0 ? (
-                  <NavGroup key={item.id} item={item} collapsed={collapsed} currentPath={currentPath} onNavigate={handleNavigate} />
+                  <NavGroup key={item.id} item={item} collapsed={collapsed} activeRoute={activeRoute} onNavigate={handleNavigate} />
                 ) : (
                   <NavItem
                     key={item.id}
                     item={item}
                     collapsed={collapsed}
-                    isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                    isActive={item.route === activeRoute}
                     onNavigate={handleNavigate}
                   />
                 )
@@ -420,7 +445,7 @@ export function Sidebar({
                 key={item.id}
                 item={item}
                 collapsed={collapsed}
-                isActive={currentPath === item.route || currentPath.startsWith(item.route + '/')}
+                isActive={item.route === activeRoute}
                 onNavigate={handleNavigate}
               />
             ))}

package/src/layout/Topbar.tsx

@@ -15,6 +15,7 @@ import {
   Package,
   Activity,
   BarChart3,
+  Clapperboard,
   FileText,
   Mail,
   DollarSign,
@@ -206,7 +207,7 @@ export const ICON_MAP: Record<string, LucideIcon> = {
   Contact, Building2, ChevronDown, Filter, Plus, Shield, List, ListChecks, FolderOpen, Dog, Cat, PawPrint, Heart, LayoutTemplate, LeafyGreen, Apple, Egg, Wheat,
   ArrowDownCircle, ArrowUpCircle, ArrowLeftRight, Plug, SlidersHorizontal, TableProperties, Landmark, Receipt, TrendingUp, CircleDollarSign, Clock, AlertTriangle, Sparkles, Wallet, Warehouse, Ruler, ArrowUpRight, ArrowDownRight, UserPlus, UserX, TreePalm,
   Boxes, Box, FileCheck2, PartyPopper, Radio, CalendarDays, BadgeDollarSign, Banknote, Layers, Music, Eye, ListMusic, Disc3, UsersRound, Mic,
-  CalendarCheck2, CalendarX, ListPlus, Map, Ban, Clock3, Inbox, UserCheck, Star, Zap,
+  CalendarCheck2, CalendarX, ListPlus, Map, Ban, Clock3, Inbox, UserCheck, Star, Zap, Clapperboard,
 }
 
 function getIcon(name: string): LucideIcon {

package/src/layout/index.ts

@@ -31,3 +31,9 @@ export {
   useNavTransition,
   type NavTransition,
 } from './PageTransition'
+export {
+  ContentSplit,
+  ContentSplitTrigger,
+  type ContentSplitProps,
+  type ContentSplitTriggerProps,
+} from './ContentSplit'

package/src/primitives/dropdown.tsx

@@ -25,7 +25,7 @@ const DropdownSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted',
+      'flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none focus:bg-muted data-[state=open]:bg-muted',
       inset && 'pl-8',
       className
     )}
@@ -79,7 +79,7 @@ const DropdownItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -95,7 +95,7 @@ const DropdownCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}

package/src/primitives/index.ts

@@ -81,3 +81,5 @@ export { CurrencyInput } from './currency-input'
 export { ConfirmDialog } from './confirm-dialog'
 export { Popover, PopoverTrigger, PopoverContent } from './popover'
 export { SegmentedControl, type SegmentedControlProps, type SegmentedOption } from './segmented-control'
+export { Markdown, renderMarkdown, type MarkdownProps } from './markdown'
+export { MarkdownEditor, type MarkdownEditorProps } from './markdown-editor'

package/src/primitives/markdown-editor.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+import { SegmentedControl } from './segmented-control'
+import { Markdown } from './markdown'
+
+export interface MarkdownEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  /** Minimum visible rows for the textarea. */
+  minRows?: number
+  defaultMode?: 'edit' | 'preview'
+  /** i18n injection — ui stays locale-agnostic. */
+  editLabel?: string
+  previewLabel?: string
+  /** Custom preview renderer — e.g. a social-post mockup instead of plain
+   *  markdown. Defaults to the built-in Markdown renderer. */
+  renderPreview?: (value: string) => React.ReactNode
+  className?: string
+}
+
+/**
+ * Markdown editor with an edit/preview toggle. Plain textarea + the zero-dep
+ * Markdown renderer — deliberately not a block/WYSIWYG editor (that's a later
+ * milestone); this covers script/brief documents today.
+ */
+export function MarkdownEditor({
+  value,
+  onChange,
+  placeholder,
+  minRows = 16,
+  defaultMode = 'preview',
+  editLabel = 'Edit',
+  previewLabel = 'Preview',
+  renderPreview,
+  className,
+}: MarkdownEditorProps) {
+  const [mode, setMode] = React.useState<'edit' | 'preview'>(
+    defaultMode === 'preview' && value.trim() === '' ? 'edit' : defaultMode,
+  )
+  return (
+    <div className={cn('flex flex-col gap-2', className)}>
+      <div className="flex justify-end">
+        <SegmentedControl
+          aria-label="Markdown mode"
+          options={[
+            { value: 'edit', label: editLabel },
+            { value: 'preview', label: previewLabel },
+          ]}
+          value={mode}
+          onChange={(m) => setMode(m as 'edit' | 'preview')}
+        />
+      </div>
+      {mode === 'edit' ? (
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          rows={Math.max(minRows, value.split('\n').length + 1)}
+          className={cn(
+            'w-full resize-y rounded-md border border-border bg-card p-3',
+            'font-mono text-[13px] leading-relaxed text-foreground',
+            'placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring',
+          )}
+        />
+      ) : renderPreview ? (
+        renderPreview(value)
+      ) : (
+        <div className="rounded-md border border-border bg-card p-4">
+          <Markdown source={value} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/primitives/markdown.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+
+/**
+ * Minimal markdown renderer — builds React elements directly (no HTML string,
+ * no dangerouslySetInnerHTML), so untrusted content is safe by construction.
+ * Supports the subset content docs actually use: h1–h3, ---, blockquote,
+ * ul/ol, paragraphs, and inline **bold** / *italic* / `code`.
+ */
+
+const INLINE_TOKEN = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g
+
+function renderInline(text: string, keyPrefix: string): React.ReactNode[] {
+  return text.split(INLINE_TOKEN).map((part, i) => {
+    const key = `${keyPrefix}-${i}`
+    if (part.startsWith('**') && part.endsWith('**') && part.length > 4) {
+      return <strong key={key}>{part.slice(2, -2)}</strong>
+    }
+    if (part.startsWith('*') && part.endsWith('*') && part.length > 2) {
+      return <em key={key}>{part.slice(1, -1)}</em>
+    }
+    if (part.startsWith('`') && part.endsWith('`') && part.length > 2) {
+      return (
+        <code key={key} className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]">
+          {part.slice(1, -1)}
+        </code>
+      )
+    }
+    return part === '' ? null : <React.Fragment key={key}>{part}</React.Fragment>
+  })
+}
+
+type Block =
+  | { type: 'heading'; level: 1 | 2 | 3; text: string }
+  | { type: 'hr' }
+  | { type: 'blockquote'; lines: string[] }
+  | { type: 'ul'; items: string[] }
+  | { type: 'ol'; items: string[] }
+  | { type: 'p'; lines: string[] }
+
+function parseBlocks(source: string): Block[] {
+  const lines = source.replace(/\r\n/g, '\n').split('\n')
+  const blocks: Block[] = []
+  let i = 0
+  while (i < lines.length) {
+    const line = lines[i]
+    const trimmed = line.trim()
+    if (trimmed === '') { i++; continue }
+    const heading = /^(#{1,3})\s+(.*)$/.exec(trimmed)
+    if (heading) {
+      blocks.push({ type: 'heading', level: heading[1].length as 1 | 2 | 3, text: heading[2] })
+      i++
+      continue
+    }
+    if (/^(-{3,}|\*{3,})$/.test(trimmed)) {
+      blocks.push({ type: 'hr' })
+      i++
+      continue
+    }
+    if (trimmed.startsWith('>')) {
+      const quote: string[] = []
+      while (i < lines.length && lines[i].trim().startsWith('>')) {
+        quote.push(lines[i].trim().replace(/^>\s?/, ''))
+        i++
+      }
+      blocks.push({ type: 'blockquote', lines: quote })
+      continue
+    }
+    if (/^[-*]\s+/.test(trimmed)) {
+      const items: string[] = []
+      while (i < lines.length && /^[-*]\s+/.test(lines[i].trim())) {
+        items.push(lines[i].trim().replace(/^[-*]\s+/, ''))
+        i++
+      }
+      blocks.push({ type: 'ul', items })
+      continue
+    }
+    if (/^\d+[.)]\s+/.test(trimmed)) {
+      const items: string[] = []
+      while (i < lines.length && /^\d+[.)]\s+/.test(lines[i].trim())) {
+        items.push(lines[i].trim().replace(/^\d+[.)]\s+/, ''))
+        i++
+      }
+      blocks.push({ type: 'ol', items })
+      continue
+    }
+    const para: string[] = []
+    while (i < lines.length && lines[i].trim() !== '' && !/^(#{1,3}\s|>|[-*]\s|\d+[.)]\s|-{3,}$|\*{3,}$)/.test(lines[i].trim())) {
+      para.push(lines[i].trim())
+      i++
+    }
+    blocks.push({ type: 'p', lines: para })
+  }
+  return blocks
+}
+
+const HEADING_CLASS: Record<1 | 2 | 3, string> = {
+  1: 'text-xl font-semibold tracking-tight',
+  2: 'text-base font-semibold tracking-tight',
+  3: 'text-sm font-semibold',
+}
+
+export function renderMarkdown(source: string): React.ReactNode {
+  const blocks = parseBlocks(source)
+  return blocks.map((block, bi) => {
+    const key = `md-${bi}`
+    switch (block.type) {
+      case 'heading': {
+        const Tag = (`h${block.level}`) as 'h1' | 'h2' | 'h3'
+        return (
+          <Tag key={key} className={HEADING_CLASS[block.level]}>
+            {renderInline(block.text, key)}
+          </Tag>
+        )
+      }
+      case 'hr':
+        return <hr key={key} className="border-border" />
+      case 'blockquote':
+        return (
+          <blockquote key={key} className="border-l-2 border-border pl-3 text-muted-foreground">
+            {block.lines.map((l, li) => (
+              <p key={`${key}-${li}`}>{renderInline(l, `${key}-${li}`)}</p>
+            ))}
+          </blockquote>
+        )
+      case 'ul':
+        return (
+          <ul key={key} className="list-disc space-y-1 pl-5">
+            {block.items.map((item, li) => (
+              <li key={`${key}-${li}`}>{renderInline(item, `${key}-${li}`)}</li>
+            ))}
+          </ul>
+        )
+      case 'ol':
+        return (
+          <ol key={key} className="list-decimal space-y-1 pl-5">
+            {block.items.map((item, li) => (
+              <li key={`${key}-${li}`}>{renderInline(item, `${key}-${li}`)}</li>
+            ))}
+          </ol>
+        )
+      case 'p':
+        return (
+          <p key={key}>
+            {block.lines.map((l, li) => (
+              <React.Fragment key={`${key}-${li}`}>
+                {li > 0 && <br />}
+                {renderInline(l, `${key}-${li}`)}
+              </React.Fragment>
+            ))}
+          </p>
+        )
+    }
+  })
+}
+
+export interface MarkdownProps {
+  source: string
+  className?: string
+}
+
+/** Rendered markdown block — spacing tuned for script/brief documents. */
+export function Markdown({ source, className }: MarkdownProps) {
+  return (
+    <div className={cn('space-y-3 text-sm leading-relaxed text-foreground', className)}>
+      {renderMarkdown(source)}
+    </div>
+  )
+}

package/src/primitives/select.tsx

@@ -116,7 +116,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-muted focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-button py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-muted focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}