ikoncomponents 1.6.4 → 1.6.6

package/dist/ikoncomponents/table/DataTablePageSize/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+export function DataTablePageSize() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentSize = searchParams.get("size") || "10";
+    const handleSizeChange = (e) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("size", e.target.value);
+        params.set("page", "1");
+        router.push(`${pathname}?${params.toString()}`);
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }), _jsxs("select", { className: "h-9 rounded-md border border-border bg-background text-foreground px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary", value: currentSize, onChange: handleSizeChange, children: [_jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "20", children: "20" }), _jsx("option", { value: "50", children: "50" }), _jsx("option", { value: "100", children: "100" })] })] }));
+}

package/dist/ikoncomponents/table/DataTablePagination/index.d.ts

@@ -0,0 +1,6 @@
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+}
+export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/table/DataTablePagination/index.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+export function DataTablePagination({ totalPages, currentPage }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const handlePageChange = (newPage) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("page", newPage.toString());
+        router.push(`${pathname}?${params.toString()}`);
+    };
+    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages, 1) })] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
+}

package/dist/ikoncomponents/table/DataTableSearch/index.d.ts

@@ -0,0 +1 @@
+export declare function DataTableSearch(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/DataTableSearch/index.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
+import { useDebounce } from "use-debounce";
+import { Search } from "lucide-react";
+export function DataTableSearch() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
+    const [debouncedSearch] = useDebounce(searchTerm, 500);
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (debouncedSearch) {
+            params.set("search", debouncedSearch);
+        }
+        else {
+            params.delete("search");
+        }
+        if (params.get("search") !== searchParams.get("search")) {
+            params.set("page", "1");
+            router.push(`${pathname}?${params.toString()}`);
+        }
+    }, [debouncedSearch, pathname, router, searchParams]);
+    return (_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
+}

package/dist/ikoncomponents/table/component/DataTable.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ColumnDef<T> {
+    header: string | (() => React.ReactNode);
+    accessorKey?: keyof T;
+    cell?: (row: T) => React.ReactNode;
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    keyExtractor: (row: T) => string | number;
+    onRowClick?: (row: T) => void;
+}
+export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/table/component/DataTable.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/shadcn/table";
+import { Table } from "lucide-react";
+export function DataTable({ data, columns, keyExtractor, onRowClick }) {
+    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => (_jsx(TableHead, { className: "font-semibold text-muted-foreground", children: typeof col.header === "function" ? col.header() : col.header }, index))) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (data.map((row) => (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(row), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", children: col.cell
+                                ? col.cell(row)
+                                : col.accessorKey
+                                    ? String(row[col.accessorKey] || "N/A")
+                                    : null }, colIndex))) }, keyExtractor(onRowClick ? row : row))))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
+}

package/dist/ikoncomponents/table/component/DataTablePageSize.d.ts

@@ -0,0 +1 @@
+export declare function DataTablePageSize(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/component/DataTablePageSize.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+export function DataTablePageSize() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const currentSize = searchParams.get("size") || "10";
+    const handleSizeChange = (e) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("size", e.target.value);
+        params.set("page", "1");
+        router.push(`${pathname}?${params.toString()}`);
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }), _jsxs("select", { className: "h-9 rounded-md border border-border bg-background text-foreground px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary", value: currentSize, onChange: handleSizeChange, children: [_jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "20", children: "20" }), _jsx("option", { value: "50", children: "50" }), _jsx("option", { value: "100", children: "100" })] })] }));
+}

package/dist/ikoncomponents/table/component/DataTablePagination.d.ts

@@ -0,0 +1,6 @@
+interface PaginationProps {
+    totalPages: number;
+    currentPage: number;
+}
+export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ikoncomponents/table/component/DataTablePagination.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+export function DataTablePagination({ totalPages, currentPage }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const handlePageChange = (newPage) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("page", newPage.toString());
+        router.push(`${pathname}?${params.toString()}`);
+    };
+    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages, 1) })] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
+}

package/dist/ikoncomponents/table/component/DataTableSearch.d.ts

@@ -0,0 +1 @@
+export declare function DataTableSearch(): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/component/DataTableSearch.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
+import { useDebounce } from "use-debounce";
+import { Search } from "lucide-react";
+export function DataTableSearch() {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
+    const [debouncedSearch] = useDebounce(searchTerm, 500);
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (debouncedSearch) {
+            params.set("search", debouncedSearch);
+        }
+        else {
+            params.delete("search");
+        }
+        if (params.get("search") !== searchParams.get("search")) {
+            params.set("page", "1");
+            router.push(`${pathname}?${params.toString()}`);
+        }
+    }, [debouncedSearch, pathname, router, searchParams]);
+    return (_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
+}

package/dist/ikoncomponents/table/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableLayoutProps } from "./type";
+export declare function DataTableLayout<T>({ data, columns, keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ikoncomponents/table/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { LayoutGrid, List } from "lucide-react";
+import { Reload } from "../reload-component";
+import { DataTable } from "./DataTable";
+import { DataTableSearch } from "./DataTableSearch";
+import { DataTablePagination } from "./DataTablePagination";
+import { DataTablePageSize } from "./DataTablePageSize";
+export function DataTableLayout({ data, columns, keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading = false, onReload, }) {
+    const [viewMode, setViewMode] = useState("list");
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mb-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DataTableSearch, {}), filterComponent && filterComponent] }), _jsxs("div", { className: "flex items-center gap-2", children: [actionNode && actionNode, _jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] })] })] }), _jsxs("div", { className: "relative min-h-[300px]", children: [_jsx(Reload, { isLoading: isLoading, onReload: onReload || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${isLoading ? 'opacity-50 pointer-events-none' : ''}`, children: viewMode === "list" ? (_jsx(DataTable, { data: data, columns: columns, keyExtractor: keyExtractor, onRowClick: onRowClick })) : ((gridComponent ? gridComponent(data) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })))) })] }), _jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: totalPages, currentPage: currentPage })] })] }));
+}

package/dist/ikoncomponents/table/type.d.ts

@@ -0,0 +1,24 @@
+export interface DataTableLayoutProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    keyExtractor: (row: T) => string | number;
+    totalPages: number;
+    currentPage: number;
+    filterComponent?: React.ReactNode;
+    actionNode?: React.ReactNode;
+    onRowClick?: (row: T) => void;
+    gridComponent?: (data: T[]) => React.ReactNode;
+    isLoading?: boolean;
+    onReload?: () => void;
+}
+export interface ColumnDef<T> {
+    header: string | (() => React.ReactNode);
+    accessorKey?: keyof T;
+    cell?: (row: T) => React.ReactNode;
+}
+export interface DataTableProps<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    keyExtractor: (row: T) => string | number;
+    onRowClick?: (row: T) => void;
+}

package/dist/ikoncomponents/table/type.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -60,6 +60,9 @@ export { DataTableToolbar } from "./ikoncomponents/data-table/datatable-toolbar"
 export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
 export { DataTable } from "./ikoncomponents/data-table";
 export type { DataTableProps, DTColumnsProps, DTExtraParamsProps, DTActionMenuProps, DataTableViewOptionsProps, DTToolBarProps, DataTableFilterProps, DataTableFacetedFilterProps, DataTablePaginationProps, DragDropHeaderProp, } from "./ikoncomponents/data-table/type";
+export { DataTableLayout } from "./ikoncomponents/table";
+export type { DataTableLayoutProps, ColumnDef } from "./ikoncomponents/table/type";
+export { Reload } from "./ikoncomponents/reload-component";
 export { EChart } from "./ikoncomponents/e-chart";
 export { FileInput } from "./ikoncomponents/file-input";
 export { GlowingEffect } from "./ikoncomponents/glowing-effect";
@@ -126,6 +129,7 @@ export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/n
 export type { ImageFormProps } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
 export { WorkInProgress } from "./ikoncomponents/work-in-progress";
 export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
+export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
 export { ThemeProvider } from "./utils/theme-provider";
 export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
 export { FontProvider, useFont } from "./utils/font-provider";
@@ -136,5 +140,3 @@ export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } fr
 export type { TokenResponse } from "./utils/token-management/types";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
-export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
-export type { UserData } from "./utils/userType";

package/dist/index.js

@@ -55,6 +55,8 @@ export { DataTablePagination } from "./ikoncomponents/data-table/datatable-pagin
 export { DataTableToolbar } from "./ikoncomponents/data-table/datatable-toolbar";
 export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
 export { DataTable } from "./ikoncomponents/data-table";
+export { DataTableLayout } from "./ikoncomponents/table";
+export { Reload } from "./ikoncomponents/reload-component";
 export { EChart } from "./ikoncomponents/e-chart";
 export { FileInput } from "./ikoncomponents/file-input";
 export { GlowingEffect } from "./ikoncomponents/glowing-effect";
@@ -106,6 +108,7 @@ export { NewCropperImg } from "./ikoncomponents/image-cropper-upload/components/
 export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
 export { WorkInProgress } from "./ikoncomponents/work-in-progress";
 export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
+export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";
 export { ThemeProvider } from "./utils/theme-provider";
 export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
 export { FontProvider, useFont } from "./utils/font-provider";
@@ -114,4 +117,3 @@ export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieS
 export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } from "./utils/token-management";
 export { useIsMobile } from "./hooks/use-mobile";
 export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
-export { AssistantComponent } from "./ikoncomponents/assistant-ui/Assistant";

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -59,11 +59,14 @@
     --tracking-widest: 0.1em;
     --leading-relaxed: 1.625;
     --radius-xs: 0.125rem;
+    --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --blur-md: 12px;
+    --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-geist-sans);
@@ -330,6 +333,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -767,6 +773,9 @@
   .min-h-\[60px\] {
     min-height: 60px;
   }
+  .min-h-\[300px\] {
+    min-height: 300px;
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -956,6 +965,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
   .min-w-\[var\(--radix-popover-trigger-width\)\] {
     min-width: var(--radix-popover-trigger-width);
   }
@@ -1210,6 +1222,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1274,6 +1293,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
@@ -1435,6 +1457,12 @@
   .border-border {
     border-color: var(--border);
   }
+  .border-border\/50 {
+    border-color: var(--border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--border) 50%, transparent);
+    }
+  }
   .border-destructive {
     border-color: var(--destructive);
   }
@@ -1543,6 +1571,18 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-background\/60 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 60%, transparent);
+    }
+  }
+  .bg-background\/80 {
+    background-color: var(--background);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
+    }
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -1591,6 +1631,12 @@
       background-color: color-mix(in oklab, var(--muted-foreground) 15%, transparent);
     }
   }
+  .bg-muted\/20 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
+    }
+  }
   .bg-muted\/30 {
     background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1678,6 +1724,9 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
   .p-\[3px\] {
     padding: 3px;
   }
@@ -1780,6 +1829,9 @@
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1810,6 +1862,9 @@
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
   .text-center {
     text-align: center;
   }
@@ -2113,6 +2168,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xs {
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2163,6 +2222,16 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2286,6 +2355,9 @@
   .slide-in-from-bottom-1 {
     --tw-enter-translate-y: calc(1*var(--spacing));
   }
+  .zoom-in {
+    --tw-enter-scale: 0;
+  }
   .group-focus-within\/menu-item\:opacity-100 {
     &:is(:where(.group\/menu-item):focus-within *) {
       opacity: 100%;
@@ -2811,6 +2883,16 @@
       display: none;
     }
   }
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
@@ -2930,6 +3012,16 @@
       }
     }
   }
+  .hover\:bg-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary\/75 {
     &:hover {
       @media (hover: hover) {
@@ -3132,6 +3224,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-primary {
+    &:focus {
+      --tw-ring-color: var(--primary);
+    }
+  }
   .focus\:ring-ring {
     &:focus {
       --tw-ring-color: var(--ring);
@@ -3153,6 +3250,12 @@
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .focus-visible\:z-10 {
     &:focus-visible {
       z-index: 10;
@@ -3206,6 +3309,11 @@
       }
     }
   }
+  .focus-visible\:ring-primary {
+    &:focus-visible {
+      --tw-ring-color: var(--primary);
+    }
+  }
   .focus-visible\:ring-ring {
     &:focus-visible {
       --tw-ring-color: var(--ring);
@@ -3246,6 +3354,14 @@
       outline-style: none;
     }
   }
+  .active\:scale-95 {
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .active\:bg-sidebar-accent {
     &:active {
       background-color: var(--sidebar-accent);
@@ -6725,6 +6841,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -6841,6 +6993,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";

package/dist/utils/api/loginService/index.js

@@ -67,6 +67,7 @@ export const updateUserProfile = async ({ userName, userPassword, userPhone, use
         operation: "updateUserProfile",
         arguments_: [userName, userPassword, userPhone, userEmail, userThumbnail],
     });
-    revalidateTag("profile");
+    // revalidateTag("profile");
+    revalidateTag("profile", "default");
     return result.data;
 };