Daily RC

editor/app/(dev)/canvas/tools/ai/_components/preset-save.tsx

@@ -8,8 +8,8 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 
 export function PresetSave({ disabled }: { disabled?: boolean }) {
   return (
@@ -27,16 +27,16 @@ export function PresetSave({ disabled }: { disabled?: boolean }) {
             can access later or share with others.
           </DialogDescription>
         </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
+        <FieldGroup className="py-4 gap-4">
+          <Field>
+            <FieldLabel htmlFor="name">Name</FieldLabel>
             <Input id="name" autoFocus />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="description">Description</Label>
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="description">Description</FieldLabel>
             <Input id="description" />
-          </div>
-        </div>
+          </Field>
+        </FieldGroup>
         <DialogFooter>
           <Button type="submit">Save</Button>
         </DialogFooter>

editor/app/(dev)/canvas/tools/ai/_components/preset-share.tsx

@@ -1,8 +1,8 @@
 import { Copy } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { Field, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Popover,
   PopoverContent,
@@ -27,15 +27,17 @@ export function PresetShare({ disabled }: { disabled?: boolean }) {
         </div>
         <div className="flex items-center space-x-2 pt-4">
           <div className="grid flex-1 gap-2">
-            <Label htmlFor="link" className="sr-only">
-              Link
-            </Label>
+            <Field>
+              <FieldLabel htmlFor="link" className="sr-only">
+                Link
+              </FieldLabel>
             <Input
               id="link"
               defaultValue="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
               readOnly
               className="h-9"
             />
+            </Field>
           </div>
           <Button type="submit" size="sm" className="px-3">
             <span className="sr-only">Copy</span>

editor/app/(insiders)/insiders/auth/basic/page.tsx

@@ -7,8 +7,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { GridaLogo } from "@/components/grida-logo";
 import Link from "next/link";
 
@@ -64,25 +64,30 @@ function Form({ searchParams }: { searchParams: SerachParams }) {
             <input type="hidden" name="next" value={searchParams.next} />
             <div className="grid gap-6">
               <div className="grid gap-6">
-                <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    name="email"
-                    type="email"
-                    placeholder="[email protected]"
-                    required
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Input
-                    id="password"
-                    name="password"
-                    placeholder="password"
-                    type="password"
-                    required
-                  />
-                </div>
+                <FieldGroup className="gap-6">
+                  <Field>
+                    <FieldLabel htmlFor="email">Email</FieldLabel>
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      placeholder="[email protected]"
+                      required
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="password" className="sr-only">
+                      Password
+                    </FieldLabel>
+                    <Input
+                      id="password"
+                      name="password"
+                      placeholder="password"
+                      type="password"
+                      required
+                    />
+                  </Field>
+                </FieldGroup>
                 <Button type="submit" className="w-full">
                   Login
                 </Button>

editor/app/(site)/organizations/[organization_name]/invite/page.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Field, FieldLabel } from "@/components/ui/field";
 import { GridaLogo } from "@/components/grida-logo";
 import {
   Breadcrumb,
@@ -40,10 +40,10 @@ export default async function NewOrganizationSetupInvitePage({
             Learn more about permissions for organizations →
           </Link>
         </section>
-        <div className="grid gap-2">
-          <Label>Search by username, full name or email address</Label>
+        <Field>
+          <FieldLabel>Search by username, full name or email address</FieldLabel>
           <Input placeholder="Organization name" />
-        </div>
+        </Field>
         <footer className="flex flex-col gap-2 w-full py-10 border-t">
           <Button className="w-full">Complete setup</Button>
           <Button variant="link" className="w-full">

editor/app/(tools)/tools/e164/_page.tsx

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Select,
@@ -118,10 +118,11 @@ export default function PhoneNumberTool() {
           </CardHeader>
 
           <CardContent className="space-y-4">
-            <div className="grid gap-2">
-              <Label htmlFor="country">Select Country Code</Label>
+            <FieldGroup className="gap-4">
+              <Field>
+                <FieldLabel htmlFor="country">Select Country Code</FieldLabel>
               <Select value={country} onValueChange={setCountry}>
-                <SelectTrigger>
+                <SelectTrigger id="country">
                   <SelectValue placeholder="Select a country" />
                 </SelectTrigger>
                 <SelectContent>
@@ -132,20 +133,21 @@ export default function PhoneNumberTool() {
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+              </Field>
 
-            <div className="grid gap-2">
-              <Label htmlFor="phoneNumbers">
+              <Field>
+                <FieldLabel htmlFor="phoneNumbers">
                 Enter phone numbers (one per line)
-              </Label>
+                </FieldLabel>
               <Textarea
                 id="phoneNumbers"
                 value={inputText}
                 onChange={(e) => setInputText(e.target.value)}
                 placeholder="Enter phone numbers here..."
                 className="min-h-[200px]"
               />
-            </div>
+              </Field>
+            </FieldGroup>
           </CardContent>
           <CardFooter className="flex gap-2">
             <Button onClick={processPhoneNumbers} className="flex-1">

editor/app/(tools)/tools/fig/inspector.tsx

@@ -17,6 +17,7 @@ import type { GUID, NodeChange } from "@grida/io-figma/fig-kiwi/schema";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Field, FieldLabel } from "@/components/ui/field";
 import { cn } from "@/components/lib/utils";
 import { Button } from "@/components/ui/button";
 import { NodeTypeIcon } from "./node-type-icon";
@@ -228,30 +229,32 @@ function FigmaPasteInfo({ meta, more }: { meta: FigmaMeta; more: PasteMore }) {
         <FigmaLink href={figmaUrl(meta.fileKey, undefined)} />
       </CardHeader>
       <CardContent className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="fileKey">File Key</Label>
+        <Field className="gap-2">
+          <FieldLabel htmlFor="fileKey">File Key</FieldLabel>
           <Input id="fileKey" value={meta.fileKey} readOnly />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="dataType">Data Type</Label>
+        </Field>
+        <Field className="gap-2">
+          <FieldLabel htmlFor="dataType">Data Type</FieldLabel>
           <Input id="dataType" value={meta.dataType} readOnly />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="pasteID">Paste ID</Label>
+        </Field>
+        <Field className="gap-2">
+          <FieldLabel htmlFor="pasteID">Paste ID</FieldLabel>
           <Input id="pasteID" value={meta.pasteID.toString()} readOnly />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="pasteFileKey">Paste File Key</Label>
+        </Field>
+        <Field className="gap-2">
+          <FieldLabel htmlFor="pasteFileKey">Paste File Key</FieldLabel>
           <Input id="pasteFileKey" value={more.pasteFileKey ?? ""} readOnly />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="pasteBranchSourceFileKey">Branch Source File</Label>
+        </Field>
+        <Field className="gap-2">
+          <FieldLabel htmlFor="pasteBranchSourceFileKey">
+            Branch Source File
+          </FieldLabel>
           <Input
             id="pasteBranchSourceFileKey"
             value={more.pasteBranchSourceFileKey ?? ""}
             readOnly
           />
-        </div>
+        </Field>
       </CardContent>
     </Card>
   );

editor/app/(workbench)/[org]/[proj]/[id]/connect/database/supabase/page.tsx

@@ -68,6 +68,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Field, FieldLabel } from "@/components/ui/field";
 import { XSBTableInfo } from "@/scaffolds/x-supabase/xsb-table-info";
 import { useEditorState } from "@/scaffolds/editor";
 import { XSupabasePrivateApiTypes } from "@/types/private/api";
@@ -289,8 +290,8 @@ function ConnectSupabase() {
           <CardContent>
             <div className="flex flex-col gap-10">
               <div className="grid grid-cols-2 gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="url">Project URL</Label>
+                <Field>
+                  <FieldLabel htmlFor="url">Project URL</FieldLabel>
                   <Input
                     className="font-mono"
                     id="url"
@@ -303,9 +304,9 @@ function ConnectSupabase() {
                     value={url}
                     onChange={(e) => setUrl(e.target.value)}
                   />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="anonkey">
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="anonkey">
                     Anon Key
                     <Tooltip>
                       <TooltipTrigger>
@@ -317,7 +318,7 @@ function ConnectSupabase() {
                         policies.
                       </TooltipContent>
                     </Tooltip>
-                  </Label>
+                  </FieldLabel>
                   <Input
                     className="font-mono"
                     id="anonkey"
@@ -330,7 +331,7 @@ function ConnectSupabase() {
                     value={anonKey}
                     onChange={(e) => setAnonKey(e.target.value)}
                   />
-                </div>
+                </Field>
               </div>
             </div>
           </CardContent>
@@ -523,8 +524,8 @@ function ConnectServiceRoleKey({
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="grid gap-2">
-          <Label htmlFor="service_role">
+        <Field>
+          <FieldLabel htmlFor="service_role">
             Service Key
             <Tooltip>
               <TooltipTrigger>
@@ -536,7 +537,7 @@ function ConnectServiceRoleKey({
                 this key to perform the request
               </TooltipContent>
             </Tooltip>
-          </Label>
+          </FieldLabel>
           <div>
             {is_service_key_set ? (
               <>
@@ -564,7 +565,7 @@ function ConnectServiceRoleKey({
               </>
             )}
           </div>
-        </div>
+        </Field>
       </CardContent>
       <CardFooter className="flex justify-end">
         <div hidden={!!sb_service_key_id}>

editor/components/dialogs/rename-dialog.tsx

@@ -13,8 +13,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 
 // Update the interface to allow for Promise<boolean> return type
 interface RenameDialogProps {
@@ -83,11 +83,11 @@ export function RenameDialog({
             <DialogTitle>{title}</DialogTitle>
             <DialogDescription>{description}</DialogDescription>
           </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="name" className="text-left">
+          <FieldGroup className="py-4 gap-4">
+            <Field>
+              <FieldLabel htmlFor="name" className="text-left">
                 Name
-              </Label>
+              </FieldLabel>
               <Input
                 id="name"
                 value={name}
@@ -100,9 +100,9 @@ export function RenameDialog({
                 autoFocus
                 disabled={isLoading}
               />
-              {error && <p className="text-sm text-red-500">{error}</p>}
-            </div>
-          </div>
+              <FieldError>{error}</FieldError>
+            </Field>
+          </FieldGroup>
           <DialogFooter>
             <DialogClose asChild>
               <Button type="button" variant="outline" disabled={isLoading}>