gladvn 0.2.14

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

@@ -0,0 +1,171 @@
+import {
+  Combobox,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  useComboboxContext,
+  ComboboxPortal,
+} from "../../components/micro/combobox";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../../components/micro/input-group";
+import { type Size } from "../../lib/types";
+import * as React from "react";
+import { FieldPreset } from "./field-preset";
+
+export interface ComboboxOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxPresetProps {
+  options: ComboboxOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string | null) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  errorMessage?: React.ReactNode;
+  showError?: boolean;
+  id?: string;
+  size?: Size;
+}
+
+const ComboboxPreset = React.forwardRef<HTMLInputElement, ComboboxPresetProps>(
+  (
+    {
+      options,
+      value,
+      defaultValue,
+      onValueChange,
+      placeholder = "Select an option",
+      searchPlaceholder,
+      emptyText = "No results found.",
+      className,
+      disabled,
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      id,
+      size = "md",
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+
+    const itemValues = React.useMemo(
+      () => options.map((o) => o.value),
+      [options],
+    );
+    const hasValue = value !== undefined ? !!value : !!defaultValue;
+
+    return (
+      <FieldPreset
+        size={size}
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        orientation="vertical"
+        htmlFor={inputId}
+      >
+        <Combobox
+          items={itemValues}
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={onValueChange}
+          disabled={disabled}
+        >
+          <ComboboxPresetInner
+            ref={ref}
+            inputId={inputId}
+            size={size}
+            placeholder={placeholder || searchPlaceholder}
+            aria-invalid={!!errorMessage || undefined}
+            disabled={disabled}
+          />
+          <ComboboxPortal>
+            <ThemeWrapper>
+              <ComboboxContent>
+                <ComboboxEmpty>{emptyText}</ComboboxEmpty>
+                <ComboboxList>
+                  <ComboboxGroup>
+                    {options.map((option) => (
+                      <ComboboxItem
+                        key={option.value}
+                        value={option.value}
+                        disabled={option.disabled}
+                      >
+                        {option.label}
+                      </ComboboxItem>
+                    ))}
+                  </ComboboxGroup>
+                </ComboboxList>
+              </ComboboxContent>
+            </ThemeWrapper>
+          </ComboboxPortal>
+        </Combobox>
+      </FieldPreset>
+    );
+  },
+);
+ComboboxPreset.displayName = "ComboboxPreset";
+
+export { ComboboxPreset };
+
+const ComboboxPresetInner = React.forwardRef<
+  HTMLInputElement,
+  {
+    inputId: string;
+    size: "sm" | "md" | "lg";
+    placeholder?: string;
+    "aria-invalid"?: boolean;
+    disabled?: boolean;
+  }
+>(
+  (
+    { inputId, size, placeholder, "aria-invalid": ariaInvalid, disabled },
+    ref,
+  ) => {
+    const { setAnchor } = useComboboxContext();
+
+    return (
+      <div className="@container/input-group w-full">
+        <InputGroup ref={setAnchor} size={size} className="w-full">
+          <ComboboxInput
+            ref={ref}
+            id={inputId}
+            placeholder={placeholder}
+            aria-invalid={ariaInvalid}
+            render={<InputGroupInput disabled={disabled} />}
+          />
+          <InputGroupAddon align="end">
+            <ComboboxTrigger
+              className="flex h-full cursor-default items-center justify-center px-2.5 outline-none group-has-data-[slot=combobox-clear]/input-group:hidden disabled:cursor-not-allowed disabled:opacity-50"
+              disabled={disabled}
+            />
+            <ComboboxClear disabled={disabled} />
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
+    );
+  },
+);
+ComboboxPresetInner.displayName = "ComboboxPresetInner";

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

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "../../components/micro/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogPortal,
+  DialogTitle,
+} from "../../components/micro/dialog";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+type CommandDialogProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  ...props
+}: CommandDialogProps) {
+  return (
+    <Dialog {...props}>
+      <DialogPortal>
+        <ThemeWrapper>
+          <DialogContent
+            className={cn(
+              "top-1/3 translate-y-0 overflow-hidden rounded-xl p-0 sm:max-w-lg",
+              className,
+            )}
+          >
+            <DialogHeader className="sr-only">
+              <DialogTitle>{title}</DialogTitle>
+              <DialogDescription>{description}</DialogDescription>
+            </DialogHeader>
+            {children}
+          </DialogContent>
+        </ThemeWrapper>
+      </DialogPortal>
+    </Dialog>
+  );
+}
+CommandDialog.displayName = "CommandDialog";
+
+export {
+  CommandDialog,
+  // Re-export primitives for convenience
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};
+export type { CommandDialogProps };

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

@@ -0,0 +1,289 @@
+"use client";
+
+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";
+import { Calendar } from "../../components/micro/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverPortal,
+} from "../../components/micro/popover";
+import { ThemeWrapper } from "../../components/micro/theme-provider";
+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";
+  /** Size passed to the trigger button and Calendar. */
+  size?: Size;
+  /** Placeholder shown in the trigger when no date is selected. */
+  placeholder?: string;
+  /** Disable the trigger button and the calendar. */
+  disabled?: boolean;
+  /** Label rendered above the trigger via FieldPreset. */
+  label?: React.ReactNode;
+  /** Helper text rendered below the trigger via FieldPreset. */
+  description?: React.ReactNode;
+  /** When set, the trigger renders with error styling and this message appears below. */
+  errorMessage?: React.ReactNode;
+  /** Whether to render the error message. Defaults to true. */
+  showError?: boolean;
+  /** HTML id forwarded to the trigger button; also used as htmlFor on the FieldLabel. */
+  id?: string;
+  /** className applied to the outermost FieldPreset wrapper. */
+  className?: string;
+  // ─── Calendar passthrough ───────────────────────────────────────────────
+  /** Number of calendar months to display. */
+  numberOfMonths?: number;
+  /** Navigation control style. */
+  captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
+  /** Locale for react-day-picker date formatting. */
+  locale?: Partial<Locale>;
+  /** Dates to disable in the calendar. */
+  disabledDates?: Matcher | Matcher[];
+  /** Earliest month the user can navigate to. */
+  startMonth?: Date;
+  /** Latest month the user can navigate to. */
+  endMonth?: Date;
+  /** Month shown on first render (uncontrolled default). */
+  defaultMonth?: Date;
+};
+
+type DatePickerSingleProps = DatePickerBaseProps & {
+  mode?: "single";
+  /** Controlled selected date (single mode). */
+  value?: Date;
+  /** Called when the user selects or clears a date (single mode). */
+  onValueChange?: (date: Date | undefined) => void;
+  rangeValue?: never;
+  onRangeChange?: never;
+};
+
+type DatePickerRangeProps = DatePickerBaseProps & {
+  mode: "range";
+  /** Controlled selected date range (range mode). */
+  rangeValue?: DateRange;
+  /** Called when the user changes the date range (range mode). */
+  onRangeChange?: (range: DateRange | undefined) => void;
+  value?: never;
+  onValueChange?: never;
+};
+
+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",
+  {
+    variants: {
+      size: {
+        sm: "h-7 gap-1 px-2 py-0.5 text-xs",
+        md: "h-8 gap-1.5 px-2.5 py-1 text-sm",
+        lg: "h-9 gap-2 px-3 py-1.5 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+const fmt = (date: Date, opts: Intl.DateTimeFormatOptions, localeCode?: string) =>
+  new Intl.DateTimeFormat(localeCode ?? "en-US", opts).format(date);
+
+function formatTriggerLabel(
+  mode: "single" | "range",
+  value: Date | undefined,
+  rangeValue: DateRange | undefined,
+  placeholder: string,
+  localeCode?: string,
+): string {
+  if (mode === "single") {
+    return value
+      ? 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);
+  if (!rangeValue.to) return `${fromStr} – ...`;
+  const toStr = fmt(rangeValue.to, { month: "short", day: "numeric", year: "numeric" }, localeCode);
+  return `${fromStr} – ${toStr}`;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  (
+    {
+      mode = "single",
+      value,
+      onValueChange,
+      rangeValue,
+      onRangeChange,
+      size = "md",
+      placeholder,
+      disabled,
+      label,
+      description,
+      errorMessage,
+      showError = true,
+      id,
+      className,
+      numberOfMonths,
+      captionLayout,
+      locale,
+      disabledDates,
+      startMonth,
+      endMonth,
+      defaultMonth,
+    },
+    ref,
+  ) => {
+    const generatedId = React.useId();
+    const triggerId = id ?? generatedId;
+    const isInvalid = !!errorMessage;
+
+    const [open, setOpen] = React.useState(false);
+    const [tempValue, setTempValue] = React.useState<Date | undefined>(value);
+    const [tempRangeValue, setTempRangeValue] = React.useState<
+      DateRange | undefined
+    >(rangeValue);
+
+    // Sync temp state when popover opens
+    React.useEffect(() => {
+      if (open) {
+        setTempValue(value);
+        setTempRangeValue(rangeValue);
+      }
+    }, [open, value, rangeValue]);
+
+    const defaultPlaceholder =
+      placeholder ?? (mode === "range" ? "Pick a date range" : "Pick a date");
+
+    const triggerLabel = formatTriggerLabel(
+      mode,
+      value,
+      rangeValue,
+      defaultPlaceholder,
+      locale?.code,
+    );
+
+    const hasValue =
+      mode === "single" ? !!value : !!(rangeValue?.from ?? rangeValue?.to);
+
+    return (
+      <FieldPreset
+        label={label}
+        description={description}
+        errorMessage={errorMessage}
+        showError={showError}
+        className={className}
+        orientation="vertical"
+        htmlFor={triggerId}
+        size={size}
+      >
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger
+            ref={ref}
+            id={triggerId}
+            disabled={disabled}
+            aria-invalid={isInvalid || undefined}
+            className={cn(
+              triggerVariants({ size }),
+              !hasValue && "text-muted-foreground",
+            )}
+          >
+            <CalendarIcon />
+            <span className="flex-1 truncate text-left min-w-0">{triggerLabel}</span>
+          </PopoverTrigger>
+          <PopoverPortal>
+            <ThemeWrapper>
+              <PopoverContent
+                side="bottom"
+                align="start"
+                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>
+              </PopoverContent>
+            </ThemeWrapper>
+          </PopoverPortal>
+        </Popover>
+      </FieldPreset>
+    );
+  },
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+export type { DatePickerProps };

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { Button } from "../../components/micro/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  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>,
+  "children"
+> & {
+  children?: React.ReactNode;
+  trigger?: React.ReactElement;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  size?: Size;
+  showCloseButton?: boolean;
+};
+
+const DialogPreset = React.forwardRef<HTMLDivElement, DialogPresetProps>(
+  (
+    {
+      trigger,
+      title,
+      description,
+      footer,
+      size = "md",
+      showCloseButton = true,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Dialog {...props}>
+        {trigger && <DialogTrigger render={trigger} />}
+        <DialogPortal>
+          <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>
+              )}
+            </DialogHeader>
+          )}
+
+          <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>
+          )}
+
+          {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>
+      </Dialog>
+    );
+  },
+);
+
+DialogPreset.displayName = "DialogPreset";
+
+export { DialogPreset };
+export type { DialogPresetProps };

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

@@ -0,0 +1,46 @@
+import {
+  Empty,
+  EmptyAction,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "../../components/micro/empty";
+import { cn } from "../../lib/utils";
+import * as React from "react";
+
+type EmptyPresetProps = {
+  icon?: React.ReactNode;
+  title: string;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  className?: string;
+};
+
+function EmptyPreset({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyPresetProps) {
+  return (
+    <Empty className={cn(className)}>
+      <EmptyHeader>
+        {icon && <EmptyMedia variant="icon">{icon}</EmptyMedia>}
+        <EmptyTitle>{title}</EmptyTitle>
+        {description && <EmptyDescription>{description}</EmptyDescription>}
+      </EmptyHeader>
+      {action && (
+        <EmptyContent>
+          <EmptyAction>{action}</EmptyAction>
+        </EmptyContent>
+      )}
+    </Empty>
+  );
+}
+EmptyPreset.displayName = "EmptyPreset";
+
+export { EmptyPreset };
+export type { EmptyPresetProps };