@openway/ui 1.0.2 → 1.0.3

package/dist/styles.css

@@ -0,0 +1,424 @@
+@import "tailwindcss";
+
+@theme {
+  --color-primary-50: #f4f8fb;
+  --color-primary-100: #e9f0f5;
+  --color-primary-200: #cedfe9;
+  --color-primary-300: #a2c4d7;
+  --color-primary-400: #6ba1bd;
+  --color-primary-500: #4e8aa9;
+  --color-primary-600: #3c6f8d;
+  --color-primary-700: #325972;
+  --color-primary-800: #2c4c60;
+  --color-primary-900: #294151;
+  --color-primary-950: #1b2a36;
+
+  --color-secondary-50: #faf6ec;
+  --color-secondary-100: #f4e8cd;
+  --color-secondary-200: #ead09e;
+  --color-secondary-300: #deb066;
+  --color-secondary-400: #d4943e;
+  --color-secondary-500: #c47e2e;
+  --color-secondary-600: #a96125;
+  --color-secondary-700: #874621;
+  --color-secondary-800: #713a22;
+  --color-secondary-900: #613222;
+  --color-secondary-950: #381810;
+
+  --color-neutral-white: #fcfdfd;
+  --color-neutral-50: #f9fbfb;
+  --color-neutral-100: #f3f5f6;
+  --color-neutral-200: #e5e9eb;
+  --color-neutral-300: #d2d8da;
+  --color-neutral-400: #9daaae;
+  --color-neutral-500: #7d8b90;
+  --color-neutral-600: #4c5e62;
+  --color-neutral-700: #394a4f;
+  --color-neutral-800: #203236;
+  --color-neutral-900: #122026;
+  --color-neutral-950: #040d11;
+  --color-neutral-black: #020709;
+
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+  --color-error-950: #450a0a;
+
+  --color-success-50: #ecfdf6;
+  --color-success-100: #d2f9e6;
+  --color-success-200: #a9f1d2;
+  --color-success-300: #71e4ba;
+  --color-success-400: #38cf9d;
+  --color-success-500: #12a176;
+  --color-success-600: #09926c;
+  --color-success-700: #077559;
+  --color-success-800: #085d48;
+  --color-success-900: #084c3c;
+  --color-success-950: #032b23;
+
+  --color-warning-50: #fefce8;
+  --color-warning-100: #fef9c3;
+  --color-warning-200: #fef08a;
+  --color-warning-300: #fde047;
+  --color-warning-400: #facc15;
+  --color-warning-500: #eab308;
+  --color-warning-600: #ca8a04;
+  --color-warning-700: #a16207;
+  --color-warning-800: #854d0e;
+  --color-warning-900: #713f12;
+  --color-warning-950: #422006;
+
+  --color-info-50: #f0fafb;
+  --color-info-100: #d9f1f4;
+  --color-info-200: #b7e3ea;
+  --color-info-300: #85cedb;
+  --color-info-400: #4cafc4;
+  --color-info-500: #349eb6;
+  --color-info-600: #2b788f;
+  --color-info-700: #296275;
+  --color-info-800: #295161;
+  --color-info-900: #264553;
+  --color-info-950: #142c38;
+}
+
+@keyframes errorSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes errorSlideOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+.animate-error-in {
+  animation: errorSlideIn 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+.animate-error-out {
+  animation: errorSlideOut 0.25s cubic-bezier(0.7, 0, 0.84, 0) forwards;
+}
+
+@keyframes alertSlideInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-16px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes alertSlideInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(16px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes alertSlideOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes alertSlideOutTop {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    max-height: 200px;
+    margin-bottom: 8px;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-16px) scale(0.96);
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@keyframes alertSlideOutBottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    max-height: 200px;
+    margin-bottom: 8px;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(16px) scale(0.96);
+    max-height: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.animate-alert-in-top {
+  animation: alertSlideInDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-alert-in-bottom {
+  animation: alertSlideInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-alert-out-top {
+  animation: alertSlideOutTop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-alert-out-bottom {
+  animation: alertSlideOutBottom 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-alert-out {
+  animation: alertSlideOutTop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Confirm Dialog Animations */
+@keyframes confirmBackdropFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes confirmBackdropFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes confirmZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.94) translateY(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes confirmZoomOut {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.94) translateY(6px);
+  }
+}
+
+.animate-confirm-backdrop-in {
+  animation: confirmBackdropFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-confirm-backdrop-out {
+  animation: confirmBackdropFadeOut 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-confirm-in {
+  animation: confirmZoomIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-confirm-out {
+  animation: confirmZoomOut 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Modal Dialog Animations */
+@keyframes modalBackdropFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes modalBackdropFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes modalZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.95) translateY(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes modalZoomOut {
+  0% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.95) translateY(6px);
+  }
+}
+
+.animate-modal-backdrop-in {
+  animation: modalBackdropFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-modal-backdrop-out {
+  animation: modalBackdropFadeOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-modal-in {
+  animation: modalZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-modal-out {
+  animation: modalZoomOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Reset native HTML dialog backdrop to prevent browser grey flash */
+dialog::backdrop {
+  background: transparent;
+}
+
+/* Custom Thin Modern Scrollbars for UI components */
+.ui-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
+}
+
+.ui-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.ui-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ui-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.4);
+  border-radius: 9999px;
+}
+
+.ui-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(107, 114, 128, 0.7);
+}
+
+/* ==================== Skeleton Wave Animation ==================== */
+@keyframes skeleton-shimmer {
+  0% {
+    background-position: -200% -200%;
+  }
+  100% {
+    background-position: 200% 200%;
+  }
+}
+
+.skeleton-wave {
+  background: linear-gradient(
+    135deg,
+    var(--color-neutral-200) 25%,
+    var(--color-neutral-100) 50%,
+    var(--color-neutral-200) 75%
+  );
+  background-size: 200% 200%;
+  animation: skeleton-shimmer 2.2s ease-in-out infinite;
+}
+
+/* ==================== Table Expanding Animations ==================== */
+@keyframes tableRowExpand {
+  0% {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  100% {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+
+@keyframes tableRowContentSlideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-table-expand-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  animation: tableRowExpand 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-table-expand-content {
+  overflow: hidden;
+  animation: tableRowContentSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes tableSubrowFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px);
+    background-color: var(--color-primary-50);
+  }
+  50% {
+    opacity: 1;
+    background-color: var(--color-primary-50);
+  }
+  100% {
+    transform: translateY(0);
+    background-color: transparent;
+  }
+}
+
+.animate-table-subrow-in {
+  animation: tableSubrowFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}

package/dist/{useInfiniteScroll-D9AW6cQV.d.cts → useInfiniteScroll-C5t7bvLu.d.cts}

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
-import { ToastT, ToasterProps as ToasterProps$1 } from 'sonner';
+import { ToasterProps as ToasterProps$1, ToastT } from 'sonner';
 import { Placement } from '@floating-ui/react';
 
 /**
@@ -394,9 +394,43 @@ interface SelectFilterField<TValue = unknown> {
         onChange: (val: TValue) => void;
     }) => ReactNode;
 }
+interface SelectConfig {
+    /**
+     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * đỏ cạnh label)
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trạng thái báo lỗi (viền đỏ)
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải dữ liệu
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Hiển thị nút xóa nhanh nội dung khi select có giá trị
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Mở rộng chiều rộng 100% của container chứa
+     * @default true
+     */
+    isFullWidth?: boolean;
+}
 interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> {
     /** Ref chuyển tiếp tới root wrapper element */
     ref?: Ref<HTMLDivElement>;
+    /** Cấu hình tập trung các cờ trạng thái / tính năng */
+    config?: SelectConfig;
     /** Kích thước: xs, sm, md, lg, xl. Mặc định 'md' */
     size?: SelectSize;
     /** Biến thể giao diện: outline, filled, ghost, other. Mặc định 'outline' */
@@ -411,7 +445,7 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     id?: string;
     /** Nhãn tiêu đề của Select */
     label?: ReactNode;
-    /** Vị trí nhãn: top, left, floating. Mặc định 'top' */
+    /** Vị trí nhãn: top, left, floating. Mặc định 'floating' */
     labelPlacement?: LabelPlacement;
     /** ClassName tùy biến cho nhãn */
     labelClassName?: string;
@@ -421,10 +455,6 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     helperText?: ReactNode;
     /** Thông báo lỗi khi không hợp lệ */
     errorMessage?: ReactNode;
-    /** Trạng thái không hợp lệ */
-    isInvalid?: boolean;
-    /** Bắt buộc chọn */
-    isRequired?: boolean;
     /** Vô hiệu hóa Select */
     isDisabled?: boolean;
     /** Chỉ đọc, không cho phép thay đổi */
@@ -471,16 +501,14 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     debounceMs?: number;
     /** Hàm custom predicate lọc options ở chế độ client */
     filterFn?: (option: SelectOptionItem<TData>, query: string, filters: TFilters) => boolean;
-    /** Trạng thái đang tải dữ liệu */
-    isLoading?: boolean;
     /** Văn bản hiển thị khi không có dữ liệu */
     emptyText?: ReactNode;
     /** Props tùy biến chuyển tiếp đến component Empty */
     emptyProps?: Partial<EmptyProps>;
-    /** Hiển thị nút xoá nhanh toàn bộ giá trị đã chọn */
-    clearable?: boolean;
     /** Render menu qua Portal để tránh bị che bởi overflow hidden. Mặc định true */
     portal?: boolean;
+    /** Container để gắn portal menu vào (mặc định document.body, tự động nhận diện `<dialog>` nếu Select nằm trong Modal/Confirm) */
+    portalRoot?: HTMLElement | null | React.RefObject<HTMLElement | null>;
     /** Vị trí hiển thị của popup dropdown. Mặc định 'bottom-start' */
     placement?: Placement;
     /** Chiều cao tối đa của vùng cuộn menu. Mặc định 280px */
@@ -504,6 +532,8 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     triggerClassName?: string;
     /** ClassName cho popup dropdown menu */
     menuClassName?: string;
+    /** ClassName cho phần thông báo helper/error text */
+    helperClassName?: string;
 }
 /** Props cho component Select (Single Select) */
 interface SelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {

package/dist/{useInfiniteScroll-D9AW6cQV.d.ts → useInfiniteScroll-C5t7bvLu.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Ref, ReactNode, RefObject } from 'react';
-import { ToastT, ToasterProps as ToasterProps$1 } from 'sonner';
+import { ToasterProps as ToasterProps$1, ToastT } from 'sonner';
 import { Placement } from '@floating-ui/react';
 
 /**
@@ -394,9 +394,43 @@ interface SelectFilterField<TValue = unknown> {
         onChange: (val: TValue) => void;
     }) => ReactNode;
 }
+interface SelectConfig {
+    /**
+     * Đánh dấu trường bắt buộc nhập (hiển thị dấu * đỏ cạnh label)
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Trạng thái báo lỗi (viền đỏ)
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Trạng thái đang tải dữ liệu
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading
+     * @default false
+     */
+    showSpinner?: boolean;
+    /**
+     * Hiển thị nút xóa nhanh nội dung khi select có giá trị
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Mở rộng chiều rộng 100% của container chứa
+     * @default true
+     */
+    isFullWidth?: boolean;
+}
 interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> {
     /** Ref chuyển tiếp tới root wrapper element */
     ref?: Ref<HTMLDivElement>;
+    /** Cấu hình tập trung các cờ trạng thái / tính năng */
+    config?: SelectConfig;
     /** Kích thước: xs, sm, md, lg, xl. Mặc định 'md' */
     size?: SelectSize;
     /** Biến thể giao diện: outline, filled, ghost, other. Mặc định 'outline' */
@@ -411,7 +445,7 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     id?: string;
     /** Nhãn tiêu đề của Select */
     label?: ReactNode;
-    /** Vị trí nhãn: top, left, floating. Mặc định 'top' */
+    /** Vị trí nhãn: top, left, floating. Mặc định 'floating' */
     labelPlacement?: LabelPlacement;
     /** ClassName tùy biến cho nhãn */
     labelClassName?: string;
@@ -421,10 +455,6 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     helperText?: ReactNode;
     /** Thông báo lỗi khi không hợp lệ */
     errorMessage?: ReactNode;
-    /** Trạng thái không hợp lệ */
-    isInvalid?: boolean;
-    /** Bắt buộc chọn */
-    isRequired?: boolean;
     /** Vô hiệu hóa Select */
     isDisabled?: boolean;
     /** Chỉ đọc, không cho phép thay đổi */
@@ -471,16 +501,14 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     debounceMs?: number;
     /** Hàm custom predicate lọc options ở chế độ client */
     filterFn?: (option: SelectOptionItem<TData>, query: string, filters: TFilters) => boolean;
-    /** Trạng thái đang tải dữ liệu */
-    isLoading?: boolean;
     /** Văn bản hiển thị khi không có dữ liệu */
     emptyText?: ReactNode;
     /** Props tùy biến chuyển tiếp đến component Empty */
     emptyProps?: Partial<EmptyProps>;
-    /** Hiển thị nút xoá nhanh toàn bộ giá trị đã chọn */
-    clearable?: boolean;
     /** Render menu qua Portal để tránh bị che bởi overflow hidden. Mặc định true */
     portal?: boolean;
+    /** Container để gắn portal menu vào (mặc định document.body, tự động nhận diện `<dialog>` nếu Select nằm trong Modal/Confirm) */
+    portalRoot?: HTMLElement | null | React.RefObject<HTMLElement | null>;
     /** Vị trí hiển thị của popup dropdown. Mặc định 'bottom-start' */
     placement?: Placement;
     /** Chiều cao tối đa của vùng cuộn menu. Mặc định 280px */
@@ -504,6 +532,8 @@ interface BaseSelectProps<TData = unknown, TFilters extends Record<string, unkno
     triggerClassName?: string;
     /** ClassName cho popup dropdown menu */
     menuClassName?: string;
+    /** ClassName cho phần thông báo helper/error text */
+    helperClassName?: string;
 }
 /** Props cho component Select (Single Select) */
 interface SelectProps<TData = unknown, TFilters extends Record<string, unknown> = Record<string, unknown>> extends BaseSelectProps<TData, TFilters> {

package/docs/AGENTS.md

@@ -131,8 +131,6 @@ Tất cả tài liệu chi tiết của từng component được lưu trữ t
    - `xs` (24px), `sm` (32px), `md` (40px - chuẩn cho form input/nút), `lg` (48px), `xl` (56px).
 3. **Bo góc (`radius`)**:
    - `none` (0px), `sm` (4px), `md` (6px), `lg` (8px - chuẩn mặc định), `xl` (12px), `full` (tròn).
-4. **Hỗ trợ chế độ Tối (Dark Mode)**:
-   - Tất cả component tự động thích ứng qua class Tailwind `dark:`.
 
 ---
 

package/docs/README.md

@@ -147,4 +147,3 @@ Tài liệu chi tiết của các hooks được lưu trữ tại thư mục [`h
 1. **Zero `any`**: 100% các component và hook đều được khai báo TypeScript chặt chẽ, type-safe.
 2. **5 Kích thước Chuẩn (`size`)**: `xs` (24px), `sm` (32px), `md` (40px - chuẩn form), `lg` (48px), `xl` (56px).
 3. **Độ Bo Góc Chuẩn (`radius`)**: `none` (0px), `sm` (4px), `md` (6px), `lg` (8px - chuẩn mặc định), `xl` (12px), `full` (tròn).
-4. **Dark Mode**: Toàn bộ component hỗ trợ tự động thích ứng qua selector `dark:`.

package/docs/components/carousel.md

@@ -1,4 +1,4 @@
-# 🎠 Carousel Component (`@owa/ui`)
+# 🎠 Carousel Component (`@owa/ui`)
 
 Component **Carousel** (băng chuyền / slider) hiện đại, hiệu năng cao, thiết kế chuẩn **Compound Components Pattern** (`<Carousel>`, `<CarouselContent>`, `<CarouselSlide>`, `<CarouselPrevious>`, `<CarouselNext>`, `<CarouselPagination>`), hỗ trợ **Pointer Drag/Touch Gestures**, **Autoplay thông minh**, **Infinite Looping**, **Glassmorphism Design**, **Dynamic Slide Registration**, **Safe Config Fallback** (`getSafeConfig`) và tuân thủ đầy đủ tiêu chuẩn **WAI-ARIA Accessibility**.
 
@@ -12,7 +12,7 @@ Component **Carousel** (băng chuyền / slider) hiện đại, hiệu năng cao
 - **Autoplay thông minh**: Tự động chuyển slide theo chu kỳ `interval`, tự động tạm dừng khi rê chuột (`pauseOnHover`), khi focus (`pauseOnFocus`), hoặc khi đang kéo chuột/vuốt màn hình.
 - **Vòng lặp vô hạn (Infinite Loop)**: Tự động tính toán chuyển động vòng tròn liền mạch giữa slide đầu và slide cuối.
 - **Hiển thị nhiều slide cùng lúc (Multi-slides)**: Hỗ trợ `slidesToShow`, `slidesToScroll`, và khoảng cách gap `spacing` linh hoạt (nhận `number` theo px hoặc chuỗi CSS).
-- **Thiết kế Kính Mờ (Frosted Glass / Glassmorphism)**: Phong cách nút và thanh phân trang kính mờ hiện đại với `backdrop-blur-md`, tự động thích ứng hoàn hảo cho cả Light Mode và Dark Mode.
+- **Thiết kế Kính Mờ (Frosted Glass / Glassmorphism)**: Phong cách nút và thanh phân trang kính mờ hiện đại với `backdrop-blur-md`.
 - **Định vị mặc định thông minh**:
   - `CarouselPrevious`: Nút lùi kính mờ đặt sát mép trái (`absolute left-2 top-1/2 -translate-y-1/2`).
   - `CarouselNext`: Nút tiến kính mờ đặt sát mép phải (`absolute right-2 top-1/2 -translate-y-1/2`).
@@ -151,9 +151,9 @@ export function BasicCarousel() {
   <CarouselContent>
     {products.map((product) => (
       <CarouselSlide key={product.id}>
-        <div className="p-4 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-white dark:bg-neutral-900 shadow-sm">
+        <div className="p-4 border border-neutral-200 rounded-xl bg-white shadow-sm">
           <img src={product.image} alt={product.name} className="h-40 w-full object-cover rounded-lg" />
-          <h3 className="mt-2 font-semibold text-neutral-900 dark:text-white">{product.name}</h3>
+          <h3 className="mt-2 font-semibold text-neutral-900">{product.name}</h3>
           <p className="text-primary-600 font-bold">{product.price}</p>
         </div>
       </CarouselSlide>
@@ -205,7 +205,7 @@ Hỗ trợ 4 biến thể giao diện: `glass` (*mặc định*), `filled`, `out
 Bạn có thể dễ dàng đặt nút điều hướng và phân trang vào trong một thanh công cụ tùy biến dưới đáy bằng cách thêm `className="static"` hoặc class định vị mong muốn:
 
 ```tsx
-<Carousel defaultIndex={1} className="w-full max-w-md border border-neutral-200 dark:border-neutral-700 p-2 rounded-xl">
+<Carousel defaultIndex={1} className="w-full max-w-md border border-neutral-200 p-2 rounded-xl">
   <CarouselContent>
     <CarouselSlide><div className="h-36 bg-linear-to-r from-primary-600 to-primary-800 text-white rounded-lg flex items-center justify-center font-semibold">Slide 1</div></CarouselSlide>
     <CarouselSlide><div className="h-36 bg-linear-to-r from-primary-700 to-primary-900 text-white rounded-lg flex items-center justify-center font-semibold">Slide 2</div></CarouselSlide>

package/docs/components/input.md

@@ -162,19 +162,13 @@ export function BasicInputExample() {
 | `label` | `ReactNode` | — | Nhãn tiêu đề hiển thị cho ô nhập liệu. |
 | `labelPlacement` | `'floating' \| 'top' \| 'left'` | `'floating'` | Vị trí hiển thị của nhãn. |
 | `config` | `InputConfig` | — | Cấu hình tập trung các cờ trạng thái / tính năng (`isRequired`, `isInvalid`, `isLoading`, `showSpinner`, `isClearable`, `isFullWidth`). |
-| `isRequired` | `boolean` | `false` | Hiển thị dấu sao đỏ `*` và đánh dấu `aria-required="true"`. |
 | `helperText` | `ReactNode` | — | Đoạn văn bản hướng dẫn/trợ giúp bên dưới ô. |
 | `errorMessage` | `ReactNode` | — | Thông báo lỗi khi nhập sai (tự kích hoạt trạng thái báo lỗi). |
-| `isInvalid` | `boolean` | `false` | Bật trạng thái viền đỏ báo lỗi và `aria-invalid="true"`. |
-| `isLoading` | `boolean` | `false` | Khóa tương tác, bật `aria-busy="true"` và `aria-disabled="true"`. |
-| `showSpinner` | `boolean` | `false` | Hiển thị biểu tượng xoay spinner khi `isLoading={true}`. |
 | `leftIcon` | `ReactNode` | — | Icon hiển thị ở đầu ô input. |
 | `rightIcon` | `ReactNode` | — | Icon hiển thị ở cuối ô input. |
 | `leftAddon` | `ReactNode` | — | Addon / prefix cố định ở đầu ô input (vd: `'https://'`). |
 | `rightAddon` | `ReactNode` | — | Addon / suffix cố định ở cuối ô input (vd: `'.com'`). |
-| `isClearable` | `boolean` | `false` | Hiển thị nút xóa nhanh nội dung khi có văn bản. |
 | `onClear` | `() => void` | — | Callback được gọi khi bấm nút xóa nhanh. |
-| `isFullWidth` | `boolean` | `false` | Mở rộng chiếm toàn bộ 100% chiều ngang container cha. |
 | `ref` | `Ref<HTMLInputElement>` | — | Ref chuyển tiếp đến thẻ `<input>` HTML bên dưới. |
 
 ---