@prediktif/ui 0.1.29 → 0.1.31

package/dist/index.js

@@ -1465,6 +1465,7 @@ function AppSidebarInner({
   const router = (0, import_navigation.useRouter)();
   const { setOpenMobile } = useSidebar();
   const [isPending, startTransition] = (0, import_react.useTransition)();
+  const [confirmDialogOpen, setConfirmDialogOpen] = (0, import_react.useState)(false);
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
   const allNavItems = [...navMainItems, ...navSecondaryItems];
   (0, import_react.useEffect)(() => {
@@ -1475,6 +1476,10 @@ function AppSidebarInner({
   const handleLinkClick = () => {
     setOpenMobile(false);
   };
+  const handleConfirmContinue = () => {
+    setConfirmDialogOpen(false);
+    handleLinkClick();
+  };
   const handleSelectOrg = (org) => {
     if (org.id && (activeOrg == null ? void 0 : activeOrg.id) && org.id === activeOrg.id) return;
     setOpenMobile(false);
@@ -1616,47 +1621,54 @@ function AppSidebarInner({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialog, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          AlertDialogTrigger,
-          {
-            render: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuButton, { size: "lg", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Avatar, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarImage, { src: image || "", alt: name || "" }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarFallback, { children: initials })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: name }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: email })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogTitle, { children: "Manage Account in Identity" }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogDescription, { children: "You will be redirected to the Identity website to manage your profile, account, and settings." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogFooter, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogCancel, { children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        AlertDialog,
+        {
+          open: confirmDialogOpen,
+          onOpenChange: setConfirmDialogOpen,
+          children: [
             /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              AlertDialogAction,
+              AlertDialogTrigger,
               {
-                nativeButton: false,
-                render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                  import_link.default,
+                render: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SidebarMenuButton, { size: "lg", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Avatar, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarImage, { src: image || "", alt: name || "" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AvatarFallback, { children: initials })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate font-medium", children: name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: email })
+                  ] })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogHeader, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogTitle, { children: "Manage Account in Identity" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogDescription, { children: "You will be redirected to the Identity website to manage your profile, account, and settings." })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AlertDialogFooter, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  AlertDialogAction,
                   {
-                    href,
-                    target: "_blank",
-                    onClick: handleLinkClick
+                    nativeButton: false,
+                    render: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      import_link.default,
+                      {
+                        href,
+                        target: "_blank",
+                        onClick: handleConfirmContinue
+                      }
+                    ),
+                    children: "Continue"
                   }
-                ),
-                children: "Continue"
-              }
-            )
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                )
+              ] })
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         SidebarMenuButton,
         {
           size: "lg",
@@ -4769,12 +4781,19 @@ var HeaderTabs = (0, import_react22.memo)(function HeaderTabs2({
   onValueChange,
   children
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const pathname = (0, import_navigation4.usePathname)();
-  const matchedItem = pathname ? items.find(
-    (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
+  const normalizedPathname = pathname ? pathname.replace(/\/$/, "") : "";
+  const matchedItem = normalizedPathname ? (_c = (_b = (_a = items.find(
+    (item) => item.url.replace(/\/$/, "") === normalizedPathname
+  )) != null ? _a : [...items].filter(
+    (item) => normalizedPathname.startsWith(`${item.url.replace(/\/$/, "")}/`)
+  ).sort((a, b) => b.url.length - a.url.length)[0]) != null ? _b : items.find(
+    (item) => normalizedPathname.split("/").pop() === item.value
+  )) != null ? _c : items.find(
+    (item) => normalizedPathname.endsWith(item.url.replace(/\/$/, ""))
   ) : void 0;
-  const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
+  const activeTab = (_e = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _e : (_d = items[0]) == null ? void 0 : _d.value;
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
       TabsTrigger,

package/dist/index.mjs

@@ -35,7 +35,7 @@ var __objRest = (source, exclude) => {
 import { Check, ChevronsUpDown, Command, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { memo, useEffect as useEffect3, useTransition } from "react";
+import { memo, useEffect as useEffect3, useState as useState3, useTransition } from "react";
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
@@ -1374,6 +1374,7 @@ function AppSidebarInner({
   const router = useRouter();
   const { setOpenMobile } = useSidebar();
   const [isPending, startTransition] = useTransition();
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState3(false);
   const segments = pathname ? pathname.split("/").filter(Boolean) : [];
   const allNavItems = [...navMainItems, ...navSecondaryItems];
   useEffect3(() => {
@@ -1384,6 +1385,10 @@ function AppSidebarInner({
   const handleLinkClick = () => {
     setOpenMobile(false);
   };
+  const handleConfirmContinue = () => {
+    setConfirmDialogOpen(false);
+    handleLinkClick();
+  };
   const handleSelectOrg = (org) => {
     if (org.id && (activeOrg == null ? void 0 : activeOrg.id) && org.id === activeOrg.id) return;
     setOpenMobile(false);
@@ -1525,47 +1530,54 @@ function AppSidebarInner({
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(SidebarFooter, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ jsxs7(AlertDialog, { children: [
-        /* @__PURE__ */ jsx12(
-          AlertDialogTrigger,
-          {
-            render: /* @__PURE__ */ jsxs7(SidebarMenuButton, { size: "lg", children: [
-              /* @__PURE__ */ jsxs7(Avatar, { children: [
-                /* @__PURE__ */ jsx12(AvatarImage, { src: image || "", alt: name || "" }),
-                /* @__PURE__ */ jsx12(AvatarFallback, { children: initials })
-              ] }),
-              /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-                /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: name }),
-                /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-muted-foreground", children: email })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
-          /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
-            /* @__PURE__ */ jsx12(AlertDialogTitle, { children: "Manage Account in Identity" }),
-            /* @__PURE__ */ jsx12(AlertDialogDescription, { children: "You will be redirected to the Identity website to manage your profile, account, and settings." })
-          ] }),
-          /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
-            /* @__PURE__ */ jsx12(AlertDialogCancel, { children: "Cancel" }),
+      /* @__PURE__ */ jsx12(SidebarFooter, { children: /* @__PURE__ */ jsx12(SidebarMenu, { children: /* @__PURE__ */ jsx12(SidebarMenuItem, { children: confirmDialog ? /* @__PURE__ */ jsxs7(
+        AlertDialog,
+        {
+          open: confirmDialogOpen,
+          onOpenChange: setConfirmDialogOpen,
+          children: [
             /* @__PURE__ */ jsx12(
-              AlertDialogAction,
+              AlertDialogTrigger,
               {
-                nativeButton: false,
-                render: /* @__PURE__ */ jsx12(
-                  Link,
+                render: /* @__PURE__ */ jsxs7(SidebarMenuButton, { size: "lg", children: [
+                  /* @__PURE__ */ jsxs7(Avatar, { children: [
+                    /* @__PURE__ */ jsx12(AvatarImage, { src: image || "", alt: name || "" }),
+                    /* @__PURE__ */ jsx12(AvatarFallback, { children: initials })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+                    /* @__PURE__ */ jsx12("span", { className: "truncate font-medium", children: name }),
+                    /* @__PURE__ */ jsx12("span", { className: "truncate text-xs text-muted-foreground", children: email })
+                  ] })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
+              /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
+                /* @__PURE__ */ jsx12(AlertDialogTitle, { children: "Manage Account in Identity" }),
+                /* @__PURE__ */ jsx12(AlertDialogDescription, { children: "You will be redirected to the Identity website to manage your profile, account, and settings." })
+              ] }),
+              /* @__PURE__ */ jsxs7(AlertDialogFooter, { children: [
+                /* @__PURE__ */ jsx12(AlertDialogCancel, { children: "Cancel" }),
+                /* @__PURE__ */ jsx12(
+                  AlertDialogAction,
                   {
-                    href,
-                    target: "_blank",
-                    onClick: handleLinkClick
+                    nativeButton: false,
+                    render: /* @__PURE__ */ jsx12(
+                      Link,
+                      {
+                        href,
+                        target: "_blank",
+                        onClick: handleConfirmContinue
+                      }
+                    ),
+                    children: "Continue"
                   }
-                ),
-                children: "Continue"
-              }
-            )
-          ] })
-        ] })
-      ] }) : /* @__PURE__ */ jsxs7(
+                )
+              ] })
+            ] })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs7(
         SidebarMenuButton,
         {
           size: "lg",
@@ -1795,7 +1807,7 @@ var AvatarUser = memo4(function AvatarUser2({
 // src/components/composed/columns/copyable-code.tsx
 import { cn as cn14 } from "cn";
 import { CheckIcon as CheckIcon2, CopyIcon } from "lucide-react";
-import { memo as memo5, useCallback as useCallback2, useState as useState3 } from "react";
+import { memo as memo5, useCallback as useCallback2, useState as useState4 } from "react";
 
 // src/components/ui/toast.tsx
 import { Toast as ToastPrimitive } from "@base-ui/react/toast";
@@ -1826,7 +1838,7 @@ var CopyableCode = memo5(function CopyableCode2({
   codeClassName,
   onCopy
 }) {
-  const [copied, setCopied] = useState3(false);
+  const [copied, setCopied] = useState4(false);
   const handleCopy = useCallback2(
     async (e) => {
       e.stopPropagation();
@@ -2750,7 +2762,7 @@ import {
 } from "@tanstack/react-table";
 import { FolderOpenIcon } from "lucide-react";
 import { useRouter as useRouter3 } from "next/navigation";
-import { useMemo as useMemo5, useState as useState6 } from "react";
+import { useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/components/composed/state-empty.tsx
 import { memo as memo17 } from "react";
@@ -3480,7 +3492,7 @@ function DataTableHeaderDownload({
 // src/components/composed/data-table/table-header-filter.tsx
 import { format } from "date-fns";
 import { CalendarIcon, ListFilterIcon } from "lucide-react";
-import { useMemo as useMemo4, useState as useState4 } from "react";
+import { useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/components/ui/calendar.tsx
 import { cn as cn28 } from "cn";
@@ -4046,7 +4058,7 @@ function ColumnFilterInput({
   table,
   headerText
 }) {
-  const [calendarOpen, setCalendarOpen] = useState4(false);
+  const [calendarOpen, setCalendarOpen] = useState5(false);
   const filterValue = column.getFilterValue();
   const variant = useMemo4(
     () => getFilterVariant(column, table),
@@ -4265,11 +4277,11 @@ function DataTableHeaderFilter({
 // src/components/composed/data-table/table-header-refresh.tsx
 import { RotateCwIcon } from "lucide-react";
 import { useRouter as useRouter2 } from "next/navigation";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 function DataTableHeaderRefresh() {
   const router = useRouter2();
-  const [isRefreshing, setIsRefreshing] = useState5(false);
+  const [isRefreshing, setIsRefreshing] = useState6(false);
   const handleRefresh = () => {
     setIsRefreshing(true);
     router.refresh();
@@ -4541,11 +4553,11 @@ function DataTable({
   showAddButton = true
 }) {
   const router = useRouter3();
-  const [createOpen, setCreateOpen] = useState6(false);
-  const [sorting, setSorting] = useState6([]);
-  const [columnFilters, setColumnFilters] = useState6([]);
-  const [columnVisibility, setColumnVisibility] = useState6(initialColumnVisibility != null ? initialColumnVisibility : {});
-  const [globalFilter, setGlobalFilter] = useState6("");
+  const [createOpen, setCreateOpen] = useState7(false);
+  const [sorting, setSorting] = useState7([]);
+  const [columnFilters, setColumnFilters] = useState7([]);
+  const [columnVisibility, setColumnVisibility] = useState7(initialColumnVisibility != null ? initialColumnVisibility : {});
+  const [globalFilter, setGlobalFilter] = useState7("");
   const columnsWithSmartFilters = useMemo5(() => {
     return columns.map((col) => __spreadValues({
       filterFn: smartFilterFn
@@ -4734,12 +4746,19 @@ var HeaderTabs = memo18(function HeaderTabs2({
   onValueChange,
   children
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const pathname = usePathname2();
-  const matchedItem = pathname ? items.find(
-    (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
+  const normalizedPathname = pathname ? pathname.replace(/\/$/, "") : "";
+  const matchedItem = normalizedPathname ? (_c = (_b = (_a = items.find(
+    (item) => item.url.replace(/\/$/, "") === normalizedPathname
+  )) != null ? _a : [...items].filter(
+    (item) => normalizedPathname.startsWith(`${item.url.replace(/\/$/, "")}/`)
+  ).sort((a, b) => b.url.length - a.url.length)[0]) != null ? _b : items.find(
+    (item) => normalizedPathname.split("/").pop() === item.value
+  )) != null ? _c : items.find(
+    (item) => normalizedPathname.endsWith(item.url.replace(/\/$/, ""))
   ) : void 0;
-  const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
+  const activeTab = (_e = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _e : (_d = items[0]) == null ? void 0 : _d.value;
   return /* @__PURE__ */ jsxs35(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
     /* @__PURE__ */ jsx49("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ jsx49(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ jsxs35(
       TabsTrigger,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -29,6 +29,15 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:lib": "tsup",
+    "prepublishOnly": "pnpm build:lib",
+    "start": "next start",
+    "lint": "biome check",
+    "format": "biome format --write"
+  },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@hookform/resolvers": "^5.9.1",
@@ -84,12 +93,5 @@
     "tsup": "^8.5.1",
     "typescript": "^5"
   },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "build:lib": "tsup",
-    "start": "next start",
-    "lint": "biome check",
-    "format": "biome format --write"
-  }
-}
+  "packageManager": "pnpm@10.30.3"
+}

package/README.md

@@ -1,220 +0,0 @@
-# `@prediktif/ui`
-
-The official shared Design System and UI Component Library for the **Prediktif** ecosystem.
-
-This repository provides reusable React components, custom layout blocks, and standardized design tokens for applications built within the Prediktif product line.
-
----
-
-## 🚀 Quick Start (Installation)
-
-To consume Prediktif's custom components in any application within the ecosystem:
-
-```bash
-pnpm add @prediktif/ui
-# or
-npm install @prediktif/ui
-# or
-yarn add @prediktif/ui
-```
-
----
-
-## 🎨 Styling & Tailwind Setup
-
-To ensure Tailwind CSS properly scans and compiles the styles, icons, and theme colors used by `@prediktif/ui`, configure your application's `globals.css`:
-
-### 1. Configure `@source` in `globals.css` (Tailwind CSS v4)
-
-Add the `@source` directive right after `@import "tailwindcss";` in your project's `src/app/globals.css`:
-
-```css
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-
-/* 💡 Enables Tailwind v4 to scan class names inside @prediktif/ui */
-@import "@prediktif/ui/styles.css";
-```
-
-*(If using **Tailwind CSS v3**, add `"./node_modules/@prediktif/ui/dist/**/*.{js,mjs}"` to the `content` array in your `tailwind.config.ts`)*.
-
-### 2. Configure Sidebar Theme Variables
-
-Ensure your `globals.css` includes the `@theme inline` mapping and CSS variables for sidebar colors:
-
-```css
-@theme inline {
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-}
-
-:root {
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.681 0.162 75.834);
-  --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.795 0.184 86.047);
-  --sidebar-primary-foreground: oklch(0.987 0.026 102.212);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-```
-
----
-
-## 💻 Usage
-
-Only Prediktif's custom composed components (`src/components/composed/*`) are exposed by the package entry points.
-
-### Importing Composed Components
-
-```tsx
-import { HeaderTitle } from "@prediktif/ui";
-
-export default function DashboardHeader() {
-  return (
-    <HeaderTitle
-      title="User Management"
-      subtitle="Manage roles and permissions across your organization"
-    />
-  );
-}
-```
-
-Or via subpath export:
-
-```tsx
-import { HeaderTitle } from "@prediktif/ui/composed";
-```
-
----
-
-## 🏗️ Project Architecture & Component Classification
-
-The repository is structured as follows:
-
-```
-src/
-├── components/
-│   ├── composed/      <-- Custom components built by Prediktif (EXPOSED)
-│   ├── ai-elements/   <-- Third-party AI/LLM UI components (Internal)
-│   └── ui/            <-- Third-party primitive UI components (Internal)
-├── app/               <-- Next.js Documentation & Preview Portal
-├── index.ts           <-- Main library entry point
-└── components/composed/index.ts <-- Composed components export index
-```
-
-* **`src/components/composed/`**: High-level, custom-tailored components created specifically for Prediktif applications. **These components are bundled and exported in the published package.**
-* **`src/components/ui/` & `src/components/ai-elements/`**: Base primitives and AI component libraries used internally to construct `composed` elements and render the local documentation preview.
-
----
-
-## 🛠️ Development Workflow
-
-### 1. Running the Local Documentation Portal
-To preview components and view interactive documentation locally:
-
-```bash
-pnpm dev
-```
-Open [http://localhost:3000](http://localhost:3000) in your browser.
-
-### 2. Adding a New Composed Component
-
-1. **Create the component** in `src/components/composed/my-component.tsx`:
-   ```tsx
-   export interface MyComponentProps {
-     label: string;
-   }
-
-   export function MyComponent({ label }: MyComponentProps) {
-     return <div className="p-4 rounded-md border">{label}</div>;
-   }
-   ```
-
-2. **Export the component** in `src/components/composed/index.ts`:
-   ```ts
-   export * from "./header-title";
-   export * from "./my-component";
-   ```
-
-3. **Register in navigation** (`src/lib/docs-config.ts`):
-   ```ts
-   {
-     title: "Components",
-     url: "/components",
-     items: [
-       // ...
-       { title: "My Component", url: "/components/my-component" },
-     ]
-   }
-   ```
-
-4. **Create the documentation detail page** in `src/app/(docs)/components/my-component/page.tsx`:
-   - Include `<ComponentHeader>`, `<ComponentSection title="Preview">`, `<ComponentCodeExample>`, `<ComponentPropsTable>`, and `<ComponentPagination />`.
-
-5. **Add a preview card** to `src/app/(docs)/components/page.tsx`:
-   - Add `<Card>` with `<CardHeader>`, `<CardTitle>`, `<CardDescription className="truncate">`, and `<CardContent className="max-h-32 overflow-y-scroll">` wrapping `<ComponentPreview>`.
-
----
-
-## 📦 Building & Publishing
-
-### Building the Component Library
-To build the distribution bundle (`dist/index.mjs`, `dist/index.js`, `dist/index.d.ts`):
-
-```bash
-pnpm build:lib
-```
-
-This uses `tsup` to bundle the TypeScript components while preserving React `"use client"` directives and generating TypeScript type declarations (`.d.ts`).
-
-### Publishing to NPM Registry
-
-> [!NOTE]
-> **Private GitHub Repository + Public NPM Package**:
-> The GitHub repository is **Private** to protect source code and documentation history.
-> The compiled library package is published **Publicly** to NPM (`npmjs.com`) so that all Prediktif ecosystem projects can install it without requiring GitHub credentials or tokens.
-
-#### Publishing Steps:
-
-1. **Bump Version** in `package.json` (or use `npm version patch | minor | major`):
-   ```bash
-   npm version patch
-   ```
-
-2. **Login to NPM** (if not authenticated):
-   ```bash
-   npm login
-   ```
-
-3. **Publish Package**:
-   ```bash
-   pnpm publish --access public --registry https://registry.npmjs.org/
-   ```
-
-*Note: The `prepublishOnly` hook automatically runs `pnpm build:lib` before publishing.*
-
----
-
-## 📄 License
-
-Private & Proprietary — **Prediktif Ecosystem**. All rights reserved.