gladvn 0.2.17 → 0.2.18

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

@@ -1,8 +1,9 @@
 "use client";
 
+import * as React from "react";
+
 import { cva } from "class-variance-authority";
 import { CalendarIcon } from "lucide-react";
-import * as React from "react";
 import { type DateRange, type Locale, type Matcher } from "react-day-picker";
 
 import { Button } from "../../components/micro/button";
@@ -10,8 +11,8 @@ import { Calendar } from "../../components/micro/calendar";
 import {
   Popover,
   PopoverContent,
-  PopoverTrigger,
   PopoverPortal,
+  PopoverTrigger,
 } from "../../components/micro/popover";
 import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { type Size } from "../../lib/types";
@@ -106,8 +107,11 @@ const triggerVariants = cva(
 // Helpers
 // ─────────────────────────────────────────────────────────────────────────────
 
-const fmt = (date: Date, opts: Intl.DateTimeFormatOptions, localeCode?: string) =>
-  new Intl.DateTimeFormat(localeCode ?? "en-US", opts).format(date);
+const fmt = (
+  date: Date,
+  opts: Intl.DateTimeFormatOptions,
+  localeCode?: string,
+) => new Intl.DateTimeFormat(localeCode ?? "en-US", opts).format(date);
 
 function formatTriggerLabel(
   mode: "single" | "range",
@@ -118,13 +122,25 @@ function formatTriggerLabel(
 ): string {
   if (mode === "single") {
     return value
-      ? fmt(value, { month: "short", day: "numeric", year: "numeric" }, localeCode)
+      ? fmt(
+          value,
+          { month: "short", day: "numeric", year: "numeric" },
+          localeCode,
+        )
       : placeholder;
   }
   if (!rangeValue?.from) return placeholder;
-  const fromStr = fmt(rangeValue.from, { month: "short", day: "numeric" }, localeCode);
+  const fromStr = fmt(
+    rangeValue.from,
+    { month: "short", day: "numeric" },
+    localeCode,
+  );
   if (!rangeValue.to) return `${fromStr} – ...`;
-  const toStr = fmt(rangeValue.to, { month: "short", day: "numeric", year: "numeric" }, localeCode);
+  const toStr = fmt(
+    rangeValue.to,
+    { month: "short", day: "numeric", year: "numeric" },
+    localeCode,
+  );
   return `${fromStr} – ${toStr}`;
 }
 
@@ -214,7 +230,9 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
             )}
           >
             <CalendarIcon />
-            <span className="flex-1 truncate text-left min-w-0">{triggerLabel}</span>
+            <span className="flex-1 truncate text-left min-w-0">
+              {triggerLabel}
+            </span>
           </PopoverTrigger>
           <PopoverPortal>
             <ThemeWrapper>
@@ -224,57 +242,57 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
                 sideOffset={4}
                 className="p-0 w-auto"
               >
-                  {mode === "single" ? (
-                    <Calendar
-                      mode="single"
-                      size={size}
-                      locale={locale}
-                      numberOfMonths={numberOfMonths}
-                      captionLayout={captionLayout}
-                      disabled={disabledDates}
-                      startMonth={startMonth}
-                      endMonth={endMonth}
-                      defaultMonth={defaultMonth ?? value}
-                      selected={tempValue}
-                      onSelect={setTempValue}
-                    />
-                  ) : (
-                    <Calendar
-                      mode="range"
-                      size={size}
-                      locale={locale}
-                      numberOfMonths={numberOfMonths ?? 1}
-                      captionLayout={captionLayout}
-                      disabled={disabledDates}
-                      startMonth={startMonth}
-                      endMonth={endMonth}
-                      defaultMonth={defaultMonth ?? rangeValue?.from}
-                      selected={tempRangeValue}
-                      onSelect={setTempRangeValue}
-                    />
-                  )}
-                  <div className="flex items-center justify-end gap-2 px-3 pb-3 pt-1">
-                    <Button
-                      variant="outline"
-                      size={size}
-                      onClick={() => setOpen(false)}
-                    >
-                      Huỷ
-                    </Button>
-                    <Button
-                      size={size}
-                      onClick={() => {
-                        if (mode === "single") {
-                          onValueChange?.(tempValue);
-                        } else {
-                          onRangeChange?.(tempRangeValue);
-                        }
-                        setOpen(false);
-                      }}
-                    >
-                      Xác nhận
-                    </Button>
-                  </div>
+                {mode === "single" ? (
+                  <Calendar
+                    mode="single"
+                    size={size}
+                    locale={locale}
+                    numberOfMonths={numberOfMonths}
+                    captionLayout={captionLayout}
+                    disabled={disabledDates}
+                    startMonth={startMonth}
+                    endMonth={endMonth}
+                    defaultMonth={defaultMonth ?? value}
+                    selected={tempValue}
+                    onSelect={setTempValue}
+                  />
+                ) : (
+                  <Calendar
+                    mode="range"
+                    size={size}
+                    locale={locale}
+                    numberOfMonths={numberOfMonths ?? 1}
+                    captionLayout={captionLayout}
+                    disabled={disabledDates}
+                    startMonth={startMonth}
+                    endMonth={endMonth}
+                    defaultMonth={defaultMonth ?? rangeValue?.from}
+                    selected={tempRangeValue}
+                    onSelect={setTempRangeValue}
+                  />
+                )}
+                <div className="flex items-center justify-end gap-2 px-3 pb-3 pt-1">
+                  <Button
+                    variant="outline"
+                    size={size}
+                    onClick={() => setOpen(false)}
+                  >
+                    Huỷ
+                  </Button>
+                  <Button
+                    size={size}
+                    onClick={() => {
+                      if (mode === "single") {
+                        onValueChange?.(tempValue);
+                      } else {
+                        onRangeChange?.(tempRangeValue);
+                      }
+                      setOpen(false);
+                    }}
+                  >
+                    Xác nhận
+                  </Button>
+                </div>
               </PopoverContent>
             </ThemeWrapper>
           </PopoverPortal>

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

@@ -1,5 +1,9 @@
 "use client";
 
+import * as React from "react";
+
+import { XIcon } from "lucide-react";
+
 import { Button } from "../../components/micro/button";
 import {
   Dialog,
@@ -8,15 +12,13 @@ import {
   DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogPortal,
   DialogTitle,
   DialogTrigger,
-  DialogPortal,
 } from "../../components/micro/dialog";
 import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import { XIcon } from "lucide-react";
-import * as React from "react";
 
 type DialogPresetProps = Omit<
   React.ComponentProps<typeof Dialog>,
@@ -52,45 +54,47 @@ const DialogPreset = React.forwardRef<HTMLDivElement, DialogPresetProps>(
           <ThemeWrapper>
             <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",
-          )}
-        >
-          {(title || description) && (
-            <DialogHeader className="shrink-0 p-4 pb-0">
-              {title && <DialogTitle>{title}</DialogTitle>}
-              {description && (
-                <DialogDescription>{description}</DialogDescription>
+              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",
+              )}
+            >
+              {(title || description) && (
+                <DialogHeader className="shrink-0 p-4 pb-0">
+                  {title && <DialogTitle>{title}</DialogTitle>}
+                  {description && (
+                    <DialogDescription>{description}</DialogDescription>
+                  )}
+                </DialogHeader>
               )}
-            </DialogHeader>
-          )}
 
-          <div className="flex-1 min-h-0 overflow-y-auto p-4">{children}</div>
+              <div className="flex-1 min-h-0 overflow-y-auto p-4">
+                {children}
+              </div>
 
-          {footer && (
-            <DialogFooter className="shrink-0 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
-              {footer}
-            </DialogFooter>
-          )}
+              {footer && (
+                <DialogFooter className="shrink-0 rounded-b-xl border-t border-t-border bg-muted/50 p-4">
+                  {footer}
+                </DialogFooter>
+              )}
 
-          {showCloseButton && (
-            <DialogClose
-              render={
-                <Button
-                  variant="ghost"
-                  className="absolute top-2 right-2"
-                  size="sm"
-                  iconOnly
-                />
-              }
-            >
-              <XIcon />
-              <span className="sr-only">Close</span>
-            </DialogClose>
-          )}
+              {showCloseButton && (
+                <DialogClose
+                  render={
+                    <Button
+                      variant="ghost"
+                      className="absolute top-2 right-2"
+                      size="sm"
+                      iconOnly
+                    />
+                  }
+                >
+                  <XIcon />
+                  <span className="sr-only">Close</span>
+                </DialogClose>
+              )}
             </DialogContent>
           </ThemeWrapper>
         </DialogPortal>

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

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import {
   Empty,
   EmptyAction,
@@ -8,7 +10,6 @@ import {
   EmptyTitle,
 } from "../../components/micro/empty";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 
 type EmptyPresetProps = {
   icon?: React.ReactNode;

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { FieldPreset } from "./field-preset";
 
 describe("FieldPreset", () => {

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

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import {
   Field,
   FieldContent,
@@ -6,7 +8,6 @@ import {
   FieldLabel,
 } from "../../components/micro/field";
 import { type Size } from "../../lib/types";
-import * as React from "react";
 
 export type FieldPresetProps = Omit<
   React.ComponentProps<typeof Field>,

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

@@ -1,17 +1,21 @@
+"use client";
+
 /**
  * ✅ STABLE
  * - Full Utilization of Micro Components
  * - Custom Layout & Groups
  * - Form Control Integration
  */
+import * as React from "react";
+
+import { MinusIcon } from "lucide-react";
+
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
 } from "../../components/micro/input-otp";
-import { MinusIcon } from "lucide-react";
-import * as React from "react";
 import { FieldPreset } from "./field-preset";
 
 export type InputOTPPresetProps = Omit<

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { InputPreset } from "./input-preset";
 
 describe("InputPreset", () => {

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

@@ -1,5 +1,9 @@
 "use client";
 
+import React, { useState } from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+
 import { Input, InputProps } from "../../components/micro/input";
 import {
   InputGroup,
@@ -8,8 +12,6 @@ import {
   InputGroupInput,
   InputGroupText,
 } from "../../components/micro/input-group";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
-import React, { useState } from "react";
 import { FieldPreset } from "./field-preset";
 
 export type InputPresetProps = Omit<InputProps, "className"> & {

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

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import {
@@ -9,8 +11,8 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "../../components/micro/pagination";
-import { cn } from "../../lib/utils";
 import type { Size } from "../../lib/types";
+import { cn } from "../../lib/utils";
 
 export type PaginationPresetProps = React.ComponentProps<typeof Pagination> & {
   currentPage: number;

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

@@ -1,5 +1,6 @@
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { ProgressPreset } from "./progress-preset";
 
 describe("ProgressPreset", () => {

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

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import {
   Progress,
   ProgressIndicator,
@@ -5,7 +7,6 @@ import {
   ProgressTrack,
   ProgressValue,
 } from "../../components/micro/progress";
-import * as React from "react";
 
 export type ProgressPresetProps = Omit<
   React.ComponentProps<typeof Progress>,

package/src/components/macro/radio-group-preset.tsx

@@ -1,8 +1,11 @@
+"use client";
+
+import * as React from "react";
+
 import { Label } from "../../components/micro/label";
 import { RadioGroup, RadioGroupItem } from "../../components/micro/radio-group";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 import { FieldPreset } from "./field-preset";
 
 export interface RadioGroupOption {

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

@@ -1,16 +1,19 @@
+"use client";
+
+import * as React from "react";
+
 import {
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectPortal,
   SelectTrigger,
   SelectValue,
-  SelectPortal,
 } from "../../components/micro/select";
 import { ThemeWrapper } from "../../components/micro/theme-provider";
 import { type Size } from "../../lib/types";
-import * as React from "react";
 import { FieldPreset } from "./field-preset";
 
 interface SelectPresetOption {
@@ -125,34 +128,36 @@ const SelectPreset = React.forwardRef<
                     groups.get(key)!.push(opt);
                   });
 
-                  return Array.from(groups.entries()).map(([groupLabel, opts]) => {
-                    if (groupLabel) {
-                      return (
-                        <SelectGroup key={groupLabel}>
-                          <SelectLabel>{groupLabel}</SelectLabel>
-                          {opts.map((opt) => (
-                            <SelectItem
-                              key={opt.value}
-                              value={opt.value}
-                              disabled={opt.disabled}
-                            >
-                              {opt.dropdownLabel || opt.label}
-                            </SelectItem>
-                          ))}
-                        </SelectGroup>
-                      );
-                    }
-                    // Items without a group
-                    return opts.map((opt) => (
-                      <SelectItem
-                        key={opt.value}
-                        value={opt.value}
-                        disabled={opt.disabled}
-                      >
-                        {opt.dropdownLabel || opt.label}
-                      </SelectItem>
-                    ));
-                  });
+                  return Array.from(groups.entries()).map(
+                    ([groupLabel, opts]) => {
+                      if (groupLabel) {
+                        return (
+                          <SelectGroup key={groupLabel}>
+                            <SelectLabel>{groupLabel}</SelectLabel>
+                            {opts.map((opt) => (
+                              <SelectItem
+                                key={opt.value}
+                                value={opt.value}
+                                disabled={opt.disabled}
+                              >
+                                {opt.dropdownLabel || opt.label}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        );
+                      }
+                      // Items without a group
+                      return opts.map((opt) => (
+                        <SelectItem
+                          key={opt.value}
+                          value={opt.value}
+                          disabled={opt.disabled}
+                        >
+                          {opt.dropdownLabel || opt.label}
+                        </SelectItem>
+                      ));
+                    },
+                  );
                 })()}
               </SelectContent>
             </ThemeWrapper>

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { SliderPreset } from "./slider-preset";
 
 describe("SliderPreset", () => {

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

@@ -1,3 +1,7 @@
+"use client";
+
+import * as React from "react";
+
 import {
   Slider,
   SliderControl,
@@ -5,7 +9,6 @@ import {
   SliderThumb,
   SliderTrack,
 } from "../../components/micro/slider";
-import * as React from "react";
 import { FieldPreset } from "./field-preset";
 
 export type SliderPresetProps = Omit<

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { SwitchPreset } from "./switch-preset";
 
 describe("SwitchPreset", () => {

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

@@ -1,3 +1,7 @@
+"use client";
+
+import * as React from "react";
+
 import {
   Field,
   FieldDescription,
@@ -6,7 +10,6 @@ import {
 } from "../../components/micro/field";
 import { Switch, SwitchThumb } from "../../components/micro/switch";
 import { cn } from "../../lib/utils";
-import * as React from "react";
 
 export type SwitchPresetProps = Omit<
   React.ComponentProps<typeof Switch>,

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { TabsPreset } from "./tabs-preset";
 
 const items = [

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

@@ -1,3 +1,7 @@
+import * as React from "react";
+
+import { type VariantProps } from "class-variance-authority";
+
 import {
   Tabs,
   TabsContent,
@@ -5,8 +9,6 @@ import {
   TabsTrigger,
   type tabsListVariants,
 } from "../../components/micro/tabs";
-import { type VariantProps } from "class-variance-authority";
-import * as React from "react";
 
 export interface TabsPresetItem {
   value: string;

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

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
+
 import { TextareaPreset } from "./textarea-preset";
 
 describe("TextareaPreset", () => {

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

@@ -1,5 +1,8 @@
-import { Textarea, TextareaProps } from "../../components/micro/textarea";
+"use client";
+
 import React from "react";
+
+import { Textarea, TextareaProps } from "../../components/micro/textarea";
 import { FieldPreset } from "./field-preset";
 
 export type TextareaPresetProps = Omit<TextareaProps, "className"> & {

package/src/components/micro/accordion.tsx

@@ -5,12 +5,13 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import * as React from "react";
 
-import { cn } from "../../lib/utils";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { ChevronDownIcon } from "lucide-react";
 
+import { cn } from "../../lib/utils";
+
 const Accordion = React.forwardRef<
   React.ComponentRef<typeof AccordionPrimitive.Root>,
   AccordionPrimitive.Root.Props

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

@@ -1,8 +1,9 @@
 "use client";
 
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
 import * as React from "react";
 
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
 import { Button } from "../../components/micro/button";
 import { type Size } from "../../lib/types";
 import { cn } from "../../lib/utils";

package/src/components/micro/alert.tsx

@@ -5,10 +5,11 @@
  * - Form Control Parity
  * - CSS Delegated Logic
  */
+import * as React from "react";
+
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";