@adea-ai/ui 0.82.0 → 0.82.2

package/src/components/ui/command/command.tsx

@@ -10,17 +10,20 @@ import {
   CommandSeparator as CmdkSeparator,
   useCommandState,
 } from 'cmdk-solid'
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { Search } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
+import { createDialogFocusRestoration } from '../dialog/dialog'
 import { menuItem } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
-// cmdk emits data-disabled="false" on enabled items; Kobalte omits it.
-// Presence selectors would dim and disable every command in an app palette.
+// cmdk emits data-disabled="false" on enabled items, unlike the presence-only
+// attributes Kobalte menu rows use. Apply those shared disabled styles only when
+// cmdk's value is true.
 const commandItem = menuItem
   .replace('data-[disabled]:pointer-events-none', '')
-  .replace('data-[disabled]:opacity-50', '')
+  .replace('data-[disabled]:text-muted-foreground', '')
 
 /**
  * Command.
@@ -52,26 +55,76 @@ export function Command(props: ComponentProps<typeof CmdkRoot>) {
   )
 }
 
-export function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {
-  // cmdk's Dialog splits `contentClassName` onto the role="dialog" content
-  // element and routes every other prop (including `class`) to the inner
-  // Command. The surface must live on the content: a `class` here styles the
-  // Command (fixed, so visible) while the dialog element itself renders as an
-  // unstyled zero-height wrapper at the end of body — invisible to role
-  // queries and axe.
-  const [local, rest] = splitProps(props, ['class'])
+type CommandDialogProps = ComponentProps<typeof CmdkDialog> &
+  Pick<ComponentProps<typeof KobalteDialog.Content>, 'onCloseAutoFocus' | 'onOpenAutoFocus'>
+
+export function CommandDialog(props: CommandDialogProps) {
+  // cmdk-solid's Dialog does not forward Content autofocus props: unknown
+  // props fall through to its Command root. Compose Kobalte's dialog surface
+  // here so Escape and other close paths can restore focus to the real opener.
+  // Preserve the shared wrapper's `class` contract on the dialog surface;
+  // `contentClassName` adds to it, while the nested Command keeps its own API.
+  const [local, dialogProps, commandProps] = splitProps(
+    props,
+    [
+      'class',
+      'contentClassName',
+      'overlayClassName',
+      'container',
+      'onCloseAutoFocus',
+      'onOpenAutoFocus',
+    ],
+    [
+      'open',
+      'defaultOpen',
+      'onOpenChange',
+      'id',
+      'modal',
+      'preventScroll',
+      'forceMount',
+      'translations',
+    ]
+  )
+  const [isOpen, setIsOpen] = createSignal(dialogProps.open ?? dialogProps.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (dialogProps.open !== undefined) setIsOpen(dialogProps.open)
+  })
+
+  const focus = createDialogFocusRestoration({
+    open: isOpen,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+  })
 
   return (
-    <CmdkDialog
-      contentClassName={cn(
-        'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-xl border border-border shadow-xl',
-        'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
-        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-        local.class
-      )}
-      {...rest}
-    />
+    <KobalteDialog
+      {...dialogProps}
+      onOpenChange={(open) => {
+        setIsOpen(open)
+        dialogProps.onOpenChange?.(open)
+      }}
+    >
+      <KobalteDialog.Portal mount={local.container}>
+        <KobalteDialog.Overlay cmdk-overlay="" class={local.overlayClassName} />
+        <KobalteDialog.Content
+          aria-label={commandProps.label}
+          cmdk-dialog=""
+          class={cn(
+            'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'overflow-hidden rounded-xl border border-border shadow-xl',
+            'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            local.class,
+            local.contentClassName
+          )}
+          onOpenAutoFocus={focus.onOpenAutoFocus}
+          onCloseAutoFocus={focus.onCloseAutoFocus}
+        >
+          <Command {...commandProps} />
+        </KobalteDialog.Content>
+      </KobalteDialog.Portal>
+    </KobalteDialog>
   )
 }
 
@@ -188,8 +241,8 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
     <CmdkItem
       class={cn(
         commandItem,
-        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-muted-foreground',
+        'group/command-item text-popover-foreground data-[selected=true]:bg-card data-[selected=true]:text-popover-foreground',
         local.class
       )}
       {...rest}
@@ -212,18 +265,17 @@ export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
   )
 }
 
-/**
- * The keyboard hint a palette item usually carries.
- * Muted canvas text can fail contrast on a raised or selected command row;
- * hierarchy comes from its size and monospace face, with the row's readable ink.
- */
+/** The keyboard hint a palette item usually carries. */
 export function CommandShortcut(props: {
   class?: string
   children?: ComponentProps<'span'>['children']
 }) {
   return (
     <span
-      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+      class={cn(
+        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        props.class
+      )}
     >
       {props.children}
     </span>

package/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -25,13 +25,17 @@ import { cn } from '#lib/utils'
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  return <KobalteDropdownMenu {...props} />
+  const [local, rest] = splitProps(props, ['modal'])
+  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {

package/src/components/ui/status-chip/status-chip.tsx

@@ -59,6 +59,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone
   label: string
+  /** Visually hide the text while preserving it for assistive technology. */
+  compact?: boolean
   /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
   detail?: string
   /** A trailing slot: a timestamp, a retry affordance, a count. */
@@ -66,7 +68,14 @@ export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
 }
 
 export function StatusChip(props: StatusChipProps) {
-  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+  const [local, rest] = splitProps(props, [
+    'tone',
+    'label',
+    'compact',
+    'detail',
+    'trailing',
+    'class',
+  ])
 
   const chip = (
     <span
@@ -78,7 +87,7 @@ export function StatusChip(props: StatusChipProps) {
       {...rest}
     >
       <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
-      {local.label}
+      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>
       {local.trailing}
     </span>
   )

package/src/lib/overlay.ts

@@ -54,7 +54,7 @@ export const menuItem = [
   'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
   'transition-colors ease-out',
   'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',
-  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',
   '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
   '[&_svg:not([class*=text-])]:text-muted-foreground',
 ].join(' ')

package/src/lint/index.ts

@@ -50,6 +50,99 @@ interface LintContext {
   }) => void
 }
 
+/** Reads a static object-property key without evaluating a computed expression. */
+const staticPropertyKey = (node: any, computed: boolean): string | null => {
+  if (!computed && node?.type === 'Identifier') return node.name
+  if (node?.type === 'Literal' && typeof node.value === 'string') return node.value
+  if (node?.type === 'TemplateLiteral' && node.expressions.length === 0)
+    return node.quasis[0].value.cooked ?? node.quasis[0].value.raw
+  return null
+}
+
+/** Detects named props in a literal JSX spread, including nested literal spreads. */
+const objectHasStaticProperty = (node: any, name: string, seen = new Set<unknown>()): boolean => {
+  if (!node || seen.has(node)) return false
+  seen.add(node)
+  if (
+    node.type === 'TSAsExpression' ||
+    node.type === 'TSSatisfiesExpression' ||
+    node.type === 'TSNonNullExpression'
+  )
+    return objectHasStaticProperty(node.expression, name, seen)
+  if (node.type !== 'ObjectExpression') return false
+  return node.properties.some((property: any) => {
+    if (property.type === 'Property')
+      return staticPropertyKey(property.key, property.computed === true) === name
+    if (property.type === 'SpreadElement')
+      return objectHasStaticProperty(property.argument, name, seen)
+    return false
+  })
+}
+
+const noInlineStyles: RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Consumer components cannot set appearance or layout with JSX style props; use shared variants and token-backed classes.',
+    },
+    schema: [],
+    messages: {
+      inlineStyle:
+        'JSX style attributes are not permitted, including layout values and CSS custom properties. Use shared variants and token-backed classes.',
+      inlineStyleElement:
+        'A JSX style element bypasses the shared design system. Use shared variants and token-backed classes.',
+      inlineStyleSpread:
+        'A JSX spread contains a style prop. Pass named shared component props instead of hiding inline styles in a spread.',
+    },
+  },
+  create(context) {
+    return {
+      JSXAttribute(node: any) {
+        if (node.name?.type === 'JSXIdentifier' && node.name.name === 'style')
+          context.report({ node, messageId: 'inlineStyle' })
+      },
+      JSXOpeningElement(node: any) {
+        if (node.name?.type === 'JSXIdentifier' && node.name.name === 'style')
+          context.report({ node, messageId: 'inlineStyleElement' })
+      },
+      JSXSpreadAttribute(node: any) {
+        if (objectHasStaticProperty(node.argument, 'style'))
+          context.report({ node, messageId: 'inlineStyleSpread' })
+      },
+    }
+  },
+}
+
+const noClassList: RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Solid classList props hide conditional classes from static design-system lint; use cn() with its object-key form.',
+    },
+    schema: [],
+    messages: {
+      classList:
+        'classList hides classes from design-system lint. Use cn() with its object-key form and statically readable class names.',
+      classListSpread:
+        'A JSX spread contains classList. Use cn() with its object-key form instead of hiding classes in a spread.',
+    },
+  },
+  create(context) {
+    return {
+      JSXAttribute(node: any) {
+        if (node.name?.type === 'JSXIdentifier' && node.name.name === 'classList')
+          context.report({ node, messageId: 'classList' })
+      },
+      JSXSpreadAttribute(node: any) {
+        if (objectHasStaticProperty(node.argument, 'classList'))
+          context.report({ node, messageId: 'classListSpread' })
+      },
+    }
+  },
+}
+
 interface RawElementOptions {
   /** Element names this rule should not report (rare; prefer fixing the file). */
   allow?: string[]
@@ -386,6 +479,8 @@ const noPrimitiveLibraryImports: RuleModule = {
 const plugin = {
   meta: { name: 'adea' },
   rules: {
+    'no-inline-styles': noInlineStyles,
+    'no-class-list': noClassList,
     'no-raw-interactive-elements': noRawInteractiveElements,
     'no-primitive-library-imports': noPrimitiveLibraryImports,
     'no-interactive-wrappers': noInteractiveWrappers,