gladvn 0.2.36 → 0.2.37

package/src/blocks/settings.tsx

@@ -1,25 +1,24 @@
 import { InfoIcon, TrashIcon } from "lucide-react";
+import { InputPreset } from "../components/macro/input-preset";
+import { RadioGroupPreset } from "../components/macro/radio-group-preset";
+import { SelectPreset } from "../components/macro/select-preset";
+import { SliderPreset } from "../components/macro/slider-preset";
+import { SwitchPreset } from "../components/macro/switch-preset";
+import { TextareaPreset } from "../components/macro/textarea-preset";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/micro/accordion";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../components/micro/alert-dialog";
 import { Button } from "../components/micro/button";
-import { Input } from "../components/micro/input";
-import { Label } from "../components/micro/label";
-import { RadioGroup, RadioGroupItem } from "../components/micro/radio-group";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/micro/select";
 import { Separator } from "../components/micro/separator";
-import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "../components/micro/slider";
-import { Switch, SwitchThumb } from "../components/micro/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/micro/tabs";
-import { Textarea } from "../components/micro/textarea";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../components/micro/tooltip";
 
 export default function SettingsBlock() {
   return (
     <div className="container max-w-4xl py-10 px-4 md:px-6 mx-auto">
       <div className="space-y-0.5 mb-6">
-        <h2 className="text-3xl font-bold tracking-tight">Settings</h2>
+        <h2 className="text-3xl font-bold tracking-tight">Cài đặt</h2>
         <p className="text-muted-foreground">
-          Manage your account settings and set e-mail preferences.
+          Quản lý tài khoản và thiết lập các tuỳ chọn nhận email.
         </p>
       </div>
       <Separator className="my-6" />
@@ -27,120 +26,94 @@ export default function SettingsBlock() {
       <Tabs orientation="vertical" defaultValue="profile" className="flex flex-col md:flex-row gap-8">
         <aside className="w-full md:w-64 shrink-0">
           <TabsList className="flex md:flex-col justify-start h-auto bg-transparent p-0 gap-2 w-full">
-            <TabsTrigger value="profile" className="w-full justify-start">Profile</TabsTrigger>
-            <TabsTrigger value="appearance" className="w-full justify-start">Appearance</TabsTrigger>
-            <TabsTrigger value="notifications" className="w-full justify-start">Notifications</TabsTrigger>
-            <TabsTrigger value="advanced" className="w-full justify-start">Advanced</TabsTrigger>
+            <TabsTrigger value="profile" className="w-full justify-start">Hồ sơ</TabsTrigger>
+            <TabsTrigger value="appearance" className="w-full justify-start">Giao diện</TabsTrigger>
+            <TabsTrigger value="notifications" className="w-full justify-start">Thông báo</TabsTrigger>
+            <TabsTrigger value="advanced" className="w-full justify-start">Nâng cao</TabsTrigger>
           </TabsList>
         </aside>
 
         <div className="flex-1">
-          {/* PROFILE TAB */}
           <TabsContent value="profile" className="mt-0">
             <div className="space-y-4">
-              <h3 className="text-xl font-medium">Profile</h3>
-              <p className="text-sm text-muted-foreground">This is how others will see you on the site.</p>
+              <h3 className="text-xl font-medium">Hồ sơ cá nhân</h3>
+              <p className="text-sm text-muted-foreground">Đây là cách người khác sẽ nhìn thấy bạn trên app.</p>
             </div>
             <Separator className="my-6" />
 
             <div className="flex flex-col gap-8">
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="username">Username</Label>
-                <Input id="username" placeholder="gladvn" defaultValue="johndoe" />
-                <p className="text-[13px] text-muted-foreground">
-                  This is your public display name. It can be your real name or a pseudonym.
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Select defaultValue="m@example.com">
-                  <SelectTrigger id="email">
-                    <SelectValue placeholder="Select a verified email to display" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="m@example.com">m@example.com</SelectItem>
-                    <SelectItem value="m@google.com">m@google.com</SelectItem>
-                    <SelectItem value="m@support.com">m@support.com</SelectItem>
-                  </SelectContent>
-                </Select>
-                <p className="text-[13px] text-muted-foreground">
-                  You can manage verified email addresses in your email settings.
-                </p>
-              </div>
-
-              <div className="flex flex-col gap-2">
-                <Label htmlFor="bio">Bio</Label>
-                <Textarea
-                  id="bio"
-                  placeholder="Tell us a little bit about yourself"
-                  defaultValue="I own a computer."
-                  className="min-h-[100px]"
-                />
-                <p className="text-[13px] text-muted-foreground">
-                  You can @mention other users and organizations to link to them.
-                </p>
-              </div>
-
-              <Button className="w-fit">Update profile</Button>
+              <InputPreset
+                id="username"
+                label="Tên người dùng"
+                placeholder="gladvn"
+                defaultValue="johndoe"
+                description="Tên hiển thị công khai. Tên thật hay biệt danh chém gió gì cũng được."
+              />
+
+              <SelectPreset
+                id="email"
+                label="Email"
+                defaultValue="m@example.com"
+                placeholder="Chọn email đã xác thực để hiển thị"
+                description="Bro có thể quản lý các email này trong phần cài đặt tài khoản."
+                options={[
+                  { value: "m@example.com", label: "m@example.com" },
+                  { value: "m@google.com", label: "m@google.com" },
+                  { value: "m@support.com", label: "m@support.com" },
+                ]}
+              />
+
+              <TextareaPreset
+                id="bio"
+                label="Giới thiệu bản thân"
+                placeholder="Kể một chút về bro đi..."
+                defaultValue="Mình là dev chill chill."
+                className="min-h-[100px]"
+                description="Có thể @mention người dùng hoặc tổ chức để tạo liên kết nha."
+              />
+
+              <Button className="w-fit">Cập nhật hồ sơ</Button>
             </div>
           </TabsContent>
 
-          {/* APPEARANCE TAB */}
           <TabsContent value="appearance" className="mt-0">
             <div className="space-y-4">
-              <h3 className="text-xl font-medium">Appearance</h3>
-              <p className="text-sm text-muted-foreground">Customize the look and feel of the application.</p>
+              <h3 className="text-xl font-medium">Giao diện</h3>
+              <p className="text-sm text-muted-foreground">Tuỳ biến giao diện sáng tối sao cho vừa mắt nhất.</p>
             </div>
             <Separator className="my-6" />
 
             <div className="flex flex-col gap-8">
-              <div className="flex flex-col gap-4">
-                <Label>Theme Preference</Label>
-                <RadioGroup defaultValue="light" className="flex flex-col gap-3">
-                  <div className="flex items-center gap-2">
-                    <RadioGroupItem value="light" id="theme-light" />
-                    <Label htmlFor="theme-light" className="font-normal cursor-pointer">Light Theme</Label>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <RadioGroupItem value="dark" id="theme-dark" />
-                    <Label htmlFor="theme-dark" className="font-normal cursor-pointer">Dark Theme</Label>
-                  </div>
+              <RadioGroupPreset
+                label="Giao diện mặc định"
+                defaultValue="light"
+                options={[
+                  { value: "light", label: "Giao diện sáng" },
+                  { value: "dark", label: "Giao diện tối" },
+                  { value: "system", label: "Theo hệ thống" },
+                ]}
+              />
+
+              <SliderPreset
+                defaultValue={[50]}
+                label={
                   <div className="flex items-center gap-2">
-                    <RadioGroupItem value="system" id="theme-system" />
-                    <Label htmlFor="theme-system" className="font-normal cursor-pointer">System Default</Label>
+                    <span>Kích thước giao diện</span>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger render={<InfoIcon className="size-4 text-muted-foreground" />} />
+                        <TooltipContent>Điều chỉnh độ to nhỏ tổng thể của UI</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   </div>
-                </RadioGroup>
-              </div>
+                }
+                description={<div className="text-right">Vừa phải (100%)</div>}
+              />
 
-              <div className="flex flex-col gap-4">
-                <div className="flex items-center gap-2">
-                  <Label>Interface Scale</Label>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger render={<InfoIcon className="size-4 text-muted-foreground" />} />
-                      <TooltipContent>Adjusts the overall size of UI elements</TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-                <div className="py-2 px-1">
-                  <Slider defaultValue={50}>
-                    <SliderControl>
-                      <SliderTrack>
-                        <SliderIndicator />
-                      </SliderTrack>
-                      <SliderThumb />
-                    </SliderControl>
-                  </Slider>
-                </div>
-                <p className="text-[13px] text-muted-foreground text-right">Medium (100%)</p>
-              </div>
-
-              <Button className="w-fit">Save preferences</Button>
+              <Button className="w-fit">Lưu tuỳ chọn</Button>
             </div>
           </TabsContent>
 
-          {/* NOTIFICATIONS TAB */}
           <TabsContent value="notifications" className="mt-0">
             <div className="space-y-4">
               <h3 className="text-xl font-medium">Notifications</h3>
@@ -149,28 +122,22 @@ export default function SettingsBlock() {
             <Separator className="my-6" />
 
             <div className="flex flex-col gap-4">
-              <div className="flex items-center justify-between rounded-xl border border-border p-4">
-                <div className="flex flex-col gap-0.5">
-                  <Label htmlFor="marketing-emails" className="text-base cursor-pointer">Marketing emails</Label>
-                  <p className="text-[13px] text-muted-foreground">Receive emails about new products, features, and more.</p>
-                </div>
-                <Switch id="marketing-emails">
-                  <SwitchThumb />
-                </Switch>
-              </div>
-              <div className="flex items-center justify-between rounded-xl border border-border p-4">
-                <div className="flex flex-col gap-0.5">
-                  <Label htmlFor="security-emails" className="text-base cursor-pointer">Security emails</Label>
-                  <p className="text-[13px] text-muted-foreground">Receive emails about your account activity and security.</p>
-                </div>
-                <Switch id="security-emails" defaultChecked>
-                  <SwitchThumb />
-                </Switch>
-              </div>
+              <SwitchPreset
+                id="marketing-emails"
+                label={<span className="text-base cursor-pointer">Marketing emails</span>}
+                description="Receive emails about new products, features, and more."
+                className="items-center justify-between rounded-xl border border-border p-4"
+              />
+              <SwitchPreset
+                id="security-emails"
+                defaultChecked
+                label={<span className="text-base cursor-pointer">Security emails</span>}
+                description="Receive emails about your account activity and security."
+                className="items-center justify-between rounded-xl border border-border p-4"
+              />
             </div>
           </TabsContent>
 
-          {/* ADVANCED TAB */}
           <TabsContent value="advanced" className="mt-0">
             <div className="space-y-4">
               <h3 className="text-xl font-medium text-destructive">Advanced</h3>

package/src/components/macro/alert-preset.tsx

@@ -57,7 +57,9 @@ const AlertPreset = React.forwardRef<HTMLDivElement, AlertPresetProps>(
         color={color}
         className={cn(
           "flex w-full flex-col gap-3 @sm/alert:flex-row @sm/alert:items-start",
-          dismissible && "pr-8 data-[size=sm]:pr-7 data-[size=lg]:pr-10",
+          {
+            "pr-8 data-[size=sm]:pr-7 data-[size=lg]:pr-10": dismissible,
+          },
           className,
         )}
         {...props}

package/src/components/macro/carousel-preset.tsx

@@ -23,7 +23,6 @@ export type CarouselPresetProps = Omit<
   itemClassName?: string;
   contentClassName?: string;
 
-  // Controlled & Uncontrolled props
   index?: number;
   defaultIndex?: number;
   onIndexChange?: (index: number) => void;

package/src/components/macro/checkbox-preset.test.tsx

@@ -33,7 +33,7 @@ describe("CheckboxPreset", () => {
 
   it("renders the check indicator", () => {
     const { container } = render(<CheckboxPreset />);
-    // CheckboxIndicator may not render a separate data-slot when unchecked
+    
     const checkbox = container.querySelector("[data-slot='checkbox']");
     expect(checkbox).toBeInTheDocument();
   });
@@ -44,7 +44,7 @@ describe("CheckboxPreset", () => {
     const label = screen.getByText("Agree");
     expect(checkbox).toBeInTheDocument();
     expect(label).toBeInTheDocument();
-    // Label's for attr may point to internal input
+    
     expect(label.getAttribute("for")).toBeTruthy();
   });
 });

package/src/components/macro/checkbox-preset.tsx

@@ -18,7 +18,7 @@ export type CheckboxPresetProps = Omit<
   React.ComponentProps<typeof Checkbox>,
   "className" | "size"
 > & {
-  // Forward className to the outermost wrapper (FieldPreset) instead of the Checkbox primitive
+  
   className?: string;
   label?: React.ReactNode;
   description?: React.ReactNode;
@@ -52,7 +52,6 @@ const CheckboxPreset = React.forwardRef<
         className={cn("flex flex-row items-start gap-3", className)}
         data-size={size}
       >
-        {/* Zero-width space hack to perfectly align the Checkbox with the first line of the Label */}
         <div className="flex items-center text-sm leading-snug group-data-[size=sm]/field:text-xs group-data-[size=lg]/field:text-base">
           &#8203;
           <Checkbox

package/src/components/macro/command-preset.tsx

@@ -61,7 +61,7 @@ function CommandDialog({
 CommandDialog.displayName = "CommandDialog";
 
 export {
-  // Re-export primitives for convenience
+  
   Command,
   CommandDialog,
   CommandEmpty,

package/src/components/macro/date-picker.tsx

@@ -18,10 +18,6 @@ import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
 import { FieldPreset } from "./field-preset";
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
 type DatePickerBaseProps = {
   /** Visual mode. "single" selects one date, "range" selects a start–end span. */
   mode?: "single" | "range";
@@ -43,7 +39,7 @@ type DatePickerBaseProps = {
   id?: string;
   /** className applied to the outermost FieldPreset wrapper. */
   className?: string;
-  // ─── Calendar passthrough ───────────────────────────────────────────────
+  
   /** Number of calendar months to display. */
   numberOfMonths?: number;
   /** Navigation control style. */
@@ -82,10 +78,6 @@ type DatePickerRangeProps = DatePickerBaseProps & {
 
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Trigger styles — native <button>, no micro/button dependency
-// ─────────────────────────────────────────────────────────────────────────────
-
 const triggerVariants = cva(
   "inline-flex w-full items-center justify-start rounded-lg border border-input bg-transparent font-normal whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-3 aria-invalid:focus-visible:ring-destructive/50 dark:bg-input/30 [&>svg:not([class*='size-'])]:size-[1.1em] [&>svg:not([class*='size-'])]:shrink-0",
   {
@@ -98,10 +90,6 @@ const triggerVariants = cva(
       size: "md" } },
 );
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Helpers
-// ─────────────────────────────────────────────────────────────────────────────
-
 const fmt = (
   date: Date,
   opts: Intl.DateTimeFormatOptions,
@@ -188,7 +176,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
     }, [open, value, rangeValue]);
 
     const defaultPlaceholder =
-      placeholder ?? (mode === "range" ? "Pick a date range" : "Pick a date");
+      placeholder ?? (mode === "range" ? "Chọn khoảng thời gian" : "Chọn một ngày");
 
     const triggerLabel = formatTriggerLabel(
       mode,
@@ -218,10 +206,9 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
             id={triggerId}
             disabled={disabled}
             aria-invalid={isInvalid || undefined}
-            className={cn(
-              triggerVariants({ size }),
-              !hasValue && "text-muted-foreground",
-            )}
+            className={cn(triggerVariants({ size }), {
+              "text-muted-foreground": !hasValue,
+            })}
           >
             <CalendarIcon />
             <span className="flex-1 truncate text-left min-w-0">

package/src/components/macro/dialog-preset.tsx

@@ -53,10 +53,12 @@ const DialogPreset = React.forwardRef<HTMLDivElement, DialogPresetProps>(
           <DialogContent
             ref={ref}
             className={cn(
-              size === "sm" && "sm:max-w-md",
-              size === "md" && "sm:max-w-lg",
-              size === "lg" && "sm:max-w-xl",
               "flex flex-col gap-0 p-0 overflow-hidden",
+              {
+                "sm:max-w-md": size === "sm",
+                "sm:max-w-lg": size === "md",
+                "sm:max-w-xl": size === "lg",
+              }
             )}
           >
             {(title || description) && (

package/src/components/macro/input-preset.tsx

@@ -45,7 +45,6 @@ export const InputPreset = React.forwardRef<HTMLInputElement, InputPresetProps>(
     const inputId = id || generatedId;
     const isInvalid = !!errorMessage;
 
-    // Auto password toggle logic
     const isPasswordType = type === "password";
     const [showPassword, setShowPassword] = useState(false);
     const actualType = isPasswordType

package/src/components/macro/select-preset.tsx

@@ -143,7 +143,7 @@ const SelectPreset = React.forwardRef<
                           </SelectGroup>
                         );
                       }
-                      // Items without a group
+                      
                       return opts.map((opt) => (
                         <SelectItem
                           key={opt.value}

package/src/components/macro/switch-preset.test.tsx

@@ -48,7 +48,7 @@ describe("SwitchPreset", () => {
     const label = screen.getByText("Dark mode");
     expect(switchEl).toBeInTheDocument();
     expect(label).toBeInTheDocument();
-    // Label's for attr may point to internal input, not the switch button
+    
     expect(label.getAttribute("for")).toBeTruthy();
   });
 });

package/src/components/micro/accordion.test.tsx

@@ -12,7 +12,7 @@ import {
 
 describe("Accordion", () => {
   it("[3C.13-01] [P1] renders correctly and is closed by default", () => {
-    // Given
+    
     render(
       <Accordion>
         <AccordionItem value="item-1">
@@ -23,11 +23,10 @@ describe("Accordion", () => {
     );
 
     const trigger = screen.getByRole("button", { name: "Section 1" });
-    // Then
+    
     expect(trigger).toBeInTheDocument();
     expect(trigger).toHaveAttribute("aria-expanded", "false");
 
-    // Content is either not in document or hidden based on Base UI implementation
     const content = screen.queryByText("Content 1");
     if (content) {
       expect(content).not.toBeVisible();
@@ -35,7 +34,7 @@ describe("Accordion", () => {
   });
 
   it("[3C.13-02] [P1] expands the content when trigger is clicked", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Accordion>
@@ -47,10 +46,9 @@ describe("Accordion", () => {
     );
 
     const trigger = screen.getByRole("button", { name: "Section 1" });
-    // When
+    
     await user.click(trigger);
 
-    // Then
     await waitFor(() => {
       expect(trigger).toHaveAttribute("aria-expanded", "true");
       expect(screen.getByText("Content 1")).toBeVisible();
@@ -58,7 +56,7 @@ describe("Accordion", () => {
   });
 
   it("[3C.13-03] [P1] supports keyboard navigation", async () => {
-    // Given
+    
     const user = userEvent.setup();
     render(
       <Accordion>
@@ -76,17 +74,13 @@ describe("Accordion", () => {
     const trigger1 = screen.getByRole("button", { name: "Section 1" });
     const trigger2 = screen.getByRole("button", { name: "Section 2" });
 
-    // Focus first
-    // When
     await user.tab();
-    // Then
+    
     expect(trigger1).toHaveFocus();
 
-    // Tab to move to next item
     await user.tab();
     expect(trigger2).toHaveFocus();
 
-    // Enter to expand
     await user.keyboard("[Enter]");
     await waitFor(() => {
       expect(trigger2).toHaveAttribute("aria-expanded", "true");

package/src/components/micro/alert-dialog.tsx

@@ -37,8 +37,6 @@ function AlertDialogClose({ ...props }: AlertDialogPrimitive.Close.Props) {
   );
 }
 
-
-
 function AlertDialogOverlay({
   className,
   ...props

package/src/components/micro/alert.test.tsx

@@ -13,7 +13,7 @@ import {
 
 describe("Alert", () => {
   it("[3C.12-01] [P1] renders all alert parts correctly", () => {
-    // Given
+    
     render(
       <Alert data-testid="alert">
         <AlertIcon render={<InfoIcon />} data-testid="alert-icon" />
@@ -23,7 +23,6 @@ describe("Alert", () => {
       </Alert>,
     );
 
-    // Then
     expect(screen.getByTestId("alert")).toBeInTheDocument();
     expect(screen.getByTestId("alert-icon")).toBeInTheDocument();
     expect(screen.getByText("Alert Title")).toBeInTheDocument();
@@ -32,19 +31,18 @@ describe("Alert", () => {
   });
 
   it("[3C.12-02] [P1] applies the color variants correctly", () => {
-    // Given
+    
     const { rerender } = render(
       <Alert color="destructive" data-testid="alert-destructive">
         Error
       </Alert>,
     );
-    // Then
+    
     expect(screen.getByTestId("alert-destructive")).toHaveAttribute(
       "data-color",
       "destructive",
     );
 
-    // When
     rerender(
       <Alert color="success" data-testid="alert-success">
         Success
@@ -57,16 +55,15 @@ describe("Alert", () => {
   });
 
   it("[3C.12-03] [P1] applies the size variants correctly", () => {
-    // Given
+    
     const { rerender } = render(
       <Alert size="sm" data-testid="alert-sm">
         Small
       </Alert>,
     );
-    // Then
+    
     expect(screen.getByTestId("alert-sm")).toHaveAttribute("data-size", "sm");
 
-    // When
     rerender(
       <Alert size="lg" data-testid="alert-lg">
         Large

package/src/components/micro/alert.tsx

@@ -13,8 +13,6 @@ import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
-// CSS Delegated Logic:
-// - KHÔNG CÒN MAGIC CSS: Mọi logic layout (như khoảng cách icon, padding action) đều được uỷ quyền cho Macro xử lý.
 const alertVariants = cva(
   "group/alert relative rounded-lg border border-border text-left bg-card text-card-foreground",
   {

package/src/components/micro/badge.test.tsx

@@ -6,17 +6,16 @@ import { Badge } from "./badge";
 
 describe("Badge", () => {
   it("[3C.10-01] [P1] renders correctly with default styles", () => {
-    // Given
+    
     render(<Badge data-testid="badge">Hello</Badge>);
     const badge = screen.getByTestId("badge");
 
-    // Then
     expect(badge).toBeInTheDocument();
     expect(badge).toHaveTextContent("Hello");
   });
 
   it("[3C.10-02] [P1] applies variant and color correctly", () => {
-    // Given
+    
     const { rerender } = render(
       <Badge
         variant="outline"
@@ -27,10 +26,9 @@ describe("Badge", () => {
       </Badge>,
     );
     const outlineBadge = screen.getByTestId("badge-outline-destructive");
-    // Then
+    
     expect(outlineBadge).toHaveClass("border-destructive", "text-destructive");
 
-    // When
     rerender(
       <Badge variant="soft" color="success" data-testid="badge-soft-success">
         Success
@@ -41,7 +39,7 @@ describe("Badge", () => {
   });
 
   it("[3C.10-03] [P1] supports polymorphism via render prop", () => {
-    // Given
+    
     render(
       <Badge render={<a href="/test" data-testid="badge-link" />}>
         Link Badge
@@ -49,7 +47,7 @@ describe("Badge", () => {
     );
 
     const link = screen.getByTestId("badge-link");
-    // Then
+    
     expect(link.tagName).toBe("A");
     expect(link).toHaveAttribute("href", "/test");
     expect(link).toHaveTextContent("Link Badge");