gladvn 0.2.14

package/src/dev/showcase/tooltip.tsx

@@ -0,0 +1,372 @@
+import { useDevContext } from "../../dev/components/dev-context";
+import {
+  DocsCode,
+  DocsH3,
+  DocsP,
+  ExampleGrid,
+  ExampleSection,
+  Showcase,
+  ShowcaseDocs,
+} from "../../dev/components/showcase";
+import { InfoIcon, ShieldAlertIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "../../components/micro/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipPortal,
+} from "../../components/micro/tooltip";
+import { type Size } from "../../lib/types";
+
+// ──────────────────────────────────────────────────────────
+// SECTION 1: Micro Content (Only Micro exists)
+// ──────────────────────────────────────────────────────────
+function TooltipMicroShowcase({ globalSize }: { globalSize: Size }) {
+  return (
+    <div className="space-y-10 mt-6">
+      <ExampleSection
+        label="Vị trí (Placements)"
+        description="Tooltip có thể được đặt ở bất kỳ cạnh nào của trigger bằng thuộc tính side."
+        codeString={`<div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline">Trên (Top)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent side="top">Tooltip nằm trên</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline">Dưới (Bottom)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent side="bottom">Tooltip nằm dưới</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline">Trái (Left)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent side="left">Tooltip nằm trái</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline">Phải (Right)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent side="right">Tooltip nằm phải</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+</div>
+`}
+      >
+        <div className="grid grid-cols-2 gap-4 max-w-md w-full place-items-center">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" size={globalSize}>
+                    Trên (Top)
+                  </Button>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent side="top">Tooltip nằm trên</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" size={globalSize}>
+                    Dưới (Bottom)
+                  </Button>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent side="bottom">Tooltip nằm dưới</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" size={globalSize}>
+                    Trái (Left)
+                  </Button>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent side="left">Tooltip nằm trái</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" size={globalSize}>
+                    Phải (Right)
+                  </Button>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent side="right">Tooltip nằm phải</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </ExampleSection>
+
+      <ExampleGrid>
+        <ExampleSection
+          label="Nội dung dài (Long Content)"
+          description="Tooltip tự động giới hạn chiều rộng và xuống dòng khi nội dung quá dài."
+          codeString={`<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger
+      render={
+        <Button variant="outline" iconOnly>
+          <InfoIcon />
+        </Button>
+      }
+    />
+    <TooltipPortal>
+      <TooltipContent>
+        <p>
+          Đây là một đoạn nội dung tooltip khá dài nhằm mục đích trình diễn cách mà Tooltip tự động cắt và xuống dòng khi vượt quá chiều rộng tối đa (max-width) cho phép.
+        </p>
+      </TooltipContent>
+    </TooltipPortal>
+  </Tooltip>
+</TooltipProvider>
+`}
+        >
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button variant="outline" size={globalSize} iconOnly>
+                    <InfoIcon />
+                  </Button>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent>
+                  <p>
+                    Đây là một đoạn nội dung tooltip khá dài nhằm mục đích trình
+                    diễn cách mà Tooltip tự động cắt và xuống dòng khi vượt quá
+                    chiều rộng tối đa (max-width) cho phép.
+                  </p>
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+        </ExampleSection>
+
+        <ExampleSection
+          label="Trigger bị vô hiệu (Disabled Trigger)"
+          description="Để bắt sự kiện hover trên nút disabled, cần bọc nó trong một thẻ span có tabIndex."
+          codeString={`<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger
+      render={
+        <span tabIndex={0} className="inline-block cursor-not-allowed">
+          <Button
+            variant="outline"
+            disabled
+            className="pointer-events-none w-full h-full"
+            iconOnly
+          >
+            <ShieldAlertIcon />
+          </Button>
+        </span>
+      }
+    />
+    <TooltipPortal>
+      <TooltipContent side="right">
+        <p>Bạn không có quyền thực hiện hành động này.</p>
+      </TooltipContent>
+    </TooltipPortal>
+  </Tooltip>
+</TooltipProvider>
+`}
+        >
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span
+                    tabIndex={0}
+                    className="inline-block cursor-not-allowed"
+                  >
+                    <Button
+                      variant="outline"
+                      size={globalSize}
+                      disabled
+                      className="pointer-events-none w-full h-full"
+                      iconOnly
+                    >
+                      <ShieldAlertIcon />
+                    </Button>
+                  </span>
+                }
+              />
+
+              <TooltipPortal>
+                <TooltipContent side="right">
+                  <p>Bạn không có quyền thực hiện hành động này.</p>
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+        </ExampleSection>
+      </ExampleGrid>
+
+      <ExampleSection
+        label="Độ trễ tuỳ chỉnh (Custom Delay)"
+        description="Thay đổi thời gian trễ trước khi tooltip xuất hiện thông qua thuộc tính delay của TooltipProvider."
+        fullWidth
+        codeString={`<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+  <TooltipProvider delay={0}>
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline" className="w-full">Tức thì (0ms)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent>Xuất hiện ngay lập tức</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+
+  <TooltipProvider delay={500}>
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline" className="w-full">Mặc định (500ms)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent>Xuất hiện sau nửa giây</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+
+  <TooltipProvider delay={2000}>
+    <Tooltip>
+      <TooltipTrigger
+        render={<Button variant="outline" className="w-full">Chậm (2000ms)</Button>}
+      />
+      <TooltipPortal>
+        <TooltipContent>Xuất hiện sau 2 giây chờ đợi</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  </TooltipProvider>
+</div>
+`}
+      >
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <TooltipProvider delay={0}>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size={globalSize}
+                    className="w-full"
+                  >
+                    Tức thì (0ms)
+                  </Button>
+                }
+              />
+              <TooltipPortal>
+                <TooltipContent>Xuất hiện ngay lập tức</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider delay={500}>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size={globalSize}
+                    className="w-full"
+                  >
+                    Mặc định (500ms)
+                  </Button>
+                }
+              />
+              <TooltipPortal>
+                <TooltipContent>Xuất hiện sau nửa giây</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider delay={2000}>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size={globalSize}
+                    className="w-full"
+                  >
+                    Chậm (2000ms)
+                  </Button>
+                }
+              />
+              <TooltipPortal>
+                <TooltipContent>Xuất hiện sau 2 giây chờ đợi</TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </ExampleSection>
+    </div>
+  );
+}
+
+// ──────────────────────────────────────────────────────────
+// SECTION 3: Entry point
+// ──────────────────────────────────────────────────────────
+export default function TooltipShowcase() {
+  const { size: globalSize } = useDevContext();
+  return (
+    <Showcase
+      title="Tooltip"
+      description="Một popup nhỏ hiển thị thông tin bổ sung khi người dùng di chuột hoặc trỏ tiêu điểm vào một phần tử."
+      generalConcept={
+        <ShowcaseDocs>
+          <DocsH3>Tooltip (Gợi ý)</DocsH3>
+          <DocsP>
+            <DocsCode>Tooltip</DocsCode> không có phiên bản Macro vì bản chất nó
+            chỉ là một popup hiển thị chữ. Bạn cần bọc toàn bộ ứng dụng hoặc
+            nhóm các tooltip lại bằng <DocsCode>TooltipProvider</DocsCode> để
+            quản lý delay xuất hiện đồng bộ.
+          </DocsP>
+        </ShowcaseDocs>
+      }
+      tabs={[
+        {
+          label: "Micro (Primitive)",
+          content: <TooltipMicroShowcase globalSize={globalSize} />,
+        },
+      ]}
+    />
+  );
+}

package/src/hooks/use-controllable-state.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or used within a `useEffect` dependency array.
+ */
+function useCallbackRef<T extends (...args: any[]) => any>(
+  callback: T | undefined,
+): T {
+  const callbackRef = React.useRef(callback);
+
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  return React.useMemo(
+    () => ((...args) => callbackRef.current?.(...args)) as T,
+    [],
+  );
+}
+
+type UseControllableStateParams<T> = {
+  prop?: T | undefined;
+  defaultProp?: T | undefined;
+  onChange?: (state: T) => void;
+};
+
+type SetStateFn<T> = (prevState?: T) => T;
+
+function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange,
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+
+  const propRef = React.useRef(prop);
+  const handleChangeRef = React.useRef(handleChange);
+
+  React.useEffect(() => {
+    propRef.current = prop;
+    handleChangeRef.current = handleChange;
+  });
+
+  const setValue = React.useCallback(
+    (nextValue: React.SetStateAction<T | undefined>) => {
+      if (isControlled) {
+        const setter = nextValue as (prevState?: T) => T;
+        const value =
+          typeof nextValue === "function" ? setter(propRef.current) : nextValue;
+        if (value !== propRef.current) handleChangeRef.current(value as T);
+      } else {
+        setUncontrolledProp(nextValue);
+      }
+    },
+    [isControlled, setUncontrolledProp],
+  );
+
+  return [value, setValue] as const;
+}
+
+function useUncontrolledState<T>({
+  defaultProp,
+  onChange,
+}: Omit<UseControllableStateParams<T>, "prop">) {
+  const uncontrolledState = React.useState<T | undefined>(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value as T);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+
+  return uncontrolledState;
+}
+
+export { useCallbackRef, useControllableState };

package/src/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/src/index.ts

@@ -0,0 +1,62 @@
+// Utilities
+export * from "./lib/types";
+export { cn } from "./lib/utils";
+
+// Hooks
+export { useIsMobile } from "./hooks/use-mobile";
+
+// Components
+export * from "./components/micro/accordion";
+export * from "./components/micro/alert";
+export * from "./components/micro/alert-dialog";
+export * from "./components/micro/aspect-ratio";
+export * from "./components/micro/avatar";
+export * from "./components/micro/badge";
+export * from "./components/micro/breadcrumb";
+export * from "./components/micro/button";
+export * from "./components/micro/calendar";
+export * from "./components/micro/card";
+export * from "./components/micro/carousel";
+export * from "./components/micro/chart";
+export * from "./components/micro/checkbox";
+export * from "./components/micro/collapsible";
+export * from "./components/micro/combobox";
+export * from "./components/micro/command";
+export * from "./components/micro/context-menu";
+export * from "./components/micro/dialog";
+export * from "./components/micro/direction";
+export * from "./components/micro/drawer";
+export * from "./components/micro/dropdown-menu";
+export * from "./components/micro/empty";
+export * from "./components/micro/field";
+export * from "./components/micro/hover-card";
+export * from "./components/micro/input";
+export * from "./components/micro/input-group";
+export * from "./components/micro/input-otp";
+export * from "./components/micro/item";
+export * from "./components/micro/kbd";
+export * from "./components/micro/label";
+export * from "./components/micro/menubar";
+export * from "./components/micro/navigation-menu";
+export * from "./components/micro/pagination";
+export * from "./components/micro/popover";
+export * from "./components/micro/progress";
+export * from "./components/micro/radio-group";
+export * from "./components/micro/resizable";
+export * from "./components/micro/scroll-area";
+export * from "./components/micro/select";
+export * from "./components/micro/separator";
+export * from "./components/micro/sheet";
+export * from "./components/micro/sidebar";
+export * from "./components/micro/skeleton";
+export * from "./components/micro/slider";
+export * from "./components/micro/sonner";
+export * from "./components/micro/spinner";
+export * from "./components/micro/switch";
+export * from "./components/micro/table";
+export * from "./components/micro/tabs";
+export * from "./components/micro/textarea";
+export * from "./components/micro/theme-provider";
+export * from "./components/micro/toggle";
+export * from "./components/micro/toggle-group";
+export * from "./components/micro/tooltip";

package/src/lib/types.ts

@@ -0,0 +1,14 @@
+export type Size = "sm" | "md" | "lg";
+
+export type Color =
+  | "primary"
+  | "secondary"
+  | "destructive"
+  | "success"
+  | "warning"
+  | "info"
+  | "tertiary"
+  | "muted"
+  | "accent";
+
+export type Variant = "solid" | "outline" | "ghost" | "soft" | "link";

package/src/lib/utils.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { cn } from "./utils";
+
+describe("utils", () => {
+  describe("cn", () => {
+    it("should merge tailwind classes properly", () => {
+      expect(cn("p-4", "m-4")).toBe("p-4 m-4");
+      expect(cn("px-2 py-1", "p-4")).toBe("p-4");
+      expect(cn("text-red-500", { "text-blue-500": true })).toBe(
+        "text-blue-500",
+      );
+    });
+  });
+});

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/preset.ts

@@ -0,0 +1,17 @@
+export * from "./components/macro/accordion-preset";
+export * from "./components/macro/avatar-preset";
+export * from "./components/macro/breadcrumb-preset";
+export * from "./components/macro/carousel-preset";
+export * from "./components/macro/checkbox-preset";
+export * from "./components/macro/combobox-preset";
+export * from "./components/macro/field-preset";
+export * from "./components/macro/input-otp-preset";
+export * from "./components/macro/input-preset";
+export * from "./components/macro/pagination-preset";
+export * from "./components/macro/progress-preset";
+export * from "./components/macro/radio-group-preset";
+export * from "./components/macro/select-preset";
+export * from "./components/macro/slider-preset";
+export * from "./components/macro/switch-preset";
+export * from "./components/macro/tabs-preset";
+export * from "./components/macro/textarea-preset";