feat(ui): add loading/disabled state to TokenField component

[mdiniz97]

Added disabled prop and ARIA attributes to TokenField, TokenFieldItem, and TokenFieldAction components:

• TokenField: disabled prop, aria-disabled, aria-busy attributes
• TokenFieldItem: aria-disabled attribute
• TokenFieldAction: disabled prop passed to Button

Improves UX by allowing disabled states and enhances accessibility for screen readers.

Fixes #220

---

Summary by cubic

Adds disabled and loading states to the TokenField component so forms can indicate when token editing is unavailable or pending.

TokenField now accepts a disabled prop and forwards aria-disabled and aria-busy to the root element. TokenFieldItem and TokenFieldAction also support the disabled state, giving users and screen readers clear feedback. Fixes #220.

^{Written for commit 0deb4da. Summary will update on new commits.}

[vercel]

@mdiniz97 is attempting to deploy a commit to the Comp AI - PoC Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/ui/src/components/token-field.tsx">

<violation number="1" location="packages/ui/src/components/token-field.tsx:20">
P2: When a consumer uses the new `TokenField disabled` prop, the field remains interactive because `aria-disabled` does not disable editing or descendant buttons. Propagate the disabled state to editable descendants and actions, or provide a shared state mechanism that those children consume.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: When a consumer uses the new TokenField disabled prop, the field remains interactive because aria-disabled does not disable editing or descendant buttons. Propagate the disabled state to editable descendants and actions, or provide a shared state mechanism that those children consume.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/ui/src/components/token-field.tsx, line 20:

<comment>When a consumer uses the new `TokenField disabled` prop, the field remains interactive because `aria-disabled` does not disable editing or descendant buttons. Propagate the disabled state to editable descendants and actions, or provide a shared state mechanism that those children consume.</comment>

<file context>
@@ -2,13 +2,25 @@ import { Button } from "@crm/ui/components/button";
 		<div
 			data-slot="token-field"
 			role="group"
+			aria-disabled={ariaDisabled ?? disabled}
+			aria-busy={ariaBusy}
 			className={cn(
</file context>