@prediktif/ui 0.1.15 → 0.1.17

package/README.md

@@ -34,7 +34,7 @@ Add the `@source` directive right after `@import "tailwindcss";` in your project
 @import "shadcn/tailwind.css";
 
 /* 💡 Enables Tailwind v4 to scan class names inside @prediktif/ui */
-@import "@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`)*.

package/dist/index.d.mts

@@ -35,6 +35,22 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+interface HeaderTabItem {
+    title: string;
+    url: string;
+    value: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+}
+interface HeaderTabsProps {
+    items: HeaderTabItem[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+}
+declare const HeaderTabs: react.NamedExoticComponent<HeaderTabsProps>;
+
 interface HeaderTitleProps {
     title: React.ReactNode;
     subtitle: React.ReactNode;
@@ -42,4 +58,4 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-export { AppSidebar, type AppSidebarProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };
+export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };

package/dist/index.d.ts

@@ -35,6 +35,22 @@ interface AppSidebarProps {
 }
 declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
 
+interface HeaderTabItem {
+    title: string;
+    url: string;
+    value: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }> | ReactNode;
+}
+interface HeaderTabsProps {
+    items: HeaderTabItem[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+}
+declare const HeaderTabs: react.NamedExoticComponent<HeaderTabsProps>;
+
 interface HeaderTitleProps {
     title: React.ReactNode;
     subtitle: React.ReactNode;
@@ -42,4 +58,4 @@ interface HeaderTitleProps {
 }
 declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
 
-export { AppSidebar, type AppSidebarProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };
+export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem };

package/dist/index.js

@@ -61,6 +61,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AppSidebar: () => AppSidebar,
+  HeaderTabs: () => HeaderTabs,
   HeaderTitle: () => HeaderTitle
 });
 module.exports = __toCommonJS(index_exports);
@@ -1229,9 +1230,11 @@ function SidebarMenuBadge(_a) {
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function renderNavIcon(icon) {
   if (!icon) return null;
-  if ((0, import_react.isValidElement)(icon)) return icon;
-  const IconComponent = icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComponent, {});
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComp, {});
+  }
+  return icon;
 }
 function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
   if (subHref) {
@@ -1438,18 +1441,136 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
   ] });
 });
 
-// src/components/composed/header-title.tsx
+// src/components/composed/header-tabs.tsx
+var import_link2 = __toESM(require("next/link"));
+var import_navigation2 = require("next/navigation");
 var import_react2 = require("react");
+
+// src/components/ui/tabs.tsx
+var import_tabs = require("@base-ui/react/tabs");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_cn12 = require("cn");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var HeaderTitle = (0, import_react2.memo)(function HeaderTitle2({
+function Tabs(_a) {
+  var _b = _a, {
+    className,
+    orientation = "horizontal"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_tabs.Tabs.Root,
+    __spreadValues({
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: (0, import_cn12.cn)(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )
+    }, props)
+  );
+}
+var tabsListVariants = (0, import_class_variance_authority3.cva)(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_tabs.Tabs.List,
+    __spreadValues({
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: (0, import_cn12.cn)(tabsListVariants({ variant }), className)
+    }, props)
+  );
+}
+function TabsTrigger(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_tabs.Tabs.Tab,
+    __spreadValues({
+      "data-slot": "tabs-trigger",
+      className: (0, import_cn12.cn)(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/header-tabs.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function renderTabIcon(icon) {
+  if (!icon) return null;
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconComp, {});
+  }
+  return icon;
+}
+var HeaderTabs = (0, import_react2.memo)(function HeaderTabs2({
+  items,
+  value,
+  onValueChange,
+  children
+}) {
+  var _a, _b;
+  const pathname = (0, import_navigation2.usePathname)();
+  const matchedItem = pathname ? items.find(
+    (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
+  ) : void 0;
+  const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      TabsTrigger,
+      {
+        nativeButton: false,
+        render: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_link2.default, { href: url }),
+        value: tabValue,
+        children: [
+          renderTabIcon(icon),
+          title
+        ]
+      },
+      tabValue
+    )) }) }),
+    children
+  ] });
+});
+
+// src/components/composed/header-title.tsx
+var import_react3 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var HeaderTitle = (0, import_react3.memo)(function HeaderTitle2({
   title,
   subtitle,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h1", { className: "font-semibold", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-xs text-muted-foreground", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: "font-semibold", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-muted-foreground", children: subtitle })
     ] }),
     children
   ] });
@@ -1457,5 +1578,6 @@ var HeaderTitle = (0, import_react2.memo)(function HeaderTitle2({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSidebar,
+  HeaderTabs,
   HeaderTitle
 });

package/dist/index.mjs

@@ -35,7 +35,7 @@ var __objRest = (source, exclude) => {
 import { ChevronsUpDown, Command, LockIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { isValidElement, memo } from "react";
+import { memo } from "react";
 
 // src/components/ui/alert-dialog.tsx
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
@@ -1195,9 +1195,11 @@ function SidebarMenuBadge(_a) {
 import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function renderNavIcon(icon) {
   if (!icon) return null;
-  if (isValidElement(icon)) return icon;
-  const IconComponent = icon;
-  return /* @__PURE__ */ jsx12(IconComponent, {});
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ jsx12(IconComp, {});
+  }
+  return icon;
 }
 function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
   if (subHref) {
@@ -1404,23 +1406,142 @@ var AppSidebar = memo(function AppSidebar2({
   ] });
 });
 
-// src/components/composed/header-title.tsx
+// src/components/composed/header-tabs.tsx
+import Link2 from "next/link";
+import { usePathname as usePathname2 } from "next/navigation";
 import { memo as memo2 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var HeaderTitle = memo2(function HeaderTitle2({
+
+// src/components/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva as cva3 } from "class-variance-authority";
+import { cn as cn12 } from "cn";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Tabs(_a) {
+  var _b = _a, {
+    className,
+    orientation = "horizontal"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ jsx13(
+    TabsPrimitive.Root,
+    __spreadValues({
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn12(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )
+    }, props)
+  );
+}
+var tabsListVariants = cva3(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList(_a) {
+  var _b = _a, {
+    className,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx13(
+    TabsPrimitive.List,
+    __spreadValues({
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn12(tabsListVariants({ variant }), className)
+    }, props)
+  );
+}
+function TabsTrigger(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx13(
+    TabsPrimitive.Tab,
+    __spreadValues({
+      "data-slot": "tabs-trigger",
+      className: cn12(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/composed/header-tabs.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function renderTabIcon(icon) {
+  if (!icon) return null;
+  if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
+    const IconComp = icon;
+    return /* @__PURE__ */ jsx14(IconComp, {});
+  }
+  return icon;
+}
+var HeaderTabs = memo2(function HeaderTabs2({
+  items,
+  value,
+  onValueChange,
+  children
+}) {
+  var _a, _b;
+  const pathname = usePathname2();
+  const matchedItem = pathname ? items.find(
+    (item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
+  ) : void 0;
+  const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
+  return /* @__PURE__ */ jsxs8(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
+    /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto overflow-y-hidden border-b no-scrollbar", children: /* @__PURE__ */ jsx14(TabsList, { variant: "line", className: "inline-flex w-max justify-start", children: items.map(({ title, value: tabValue, url, icon }) => /* @__PURE__ */ jsxs8(
+      TabsTrigger,
+      {
+        nativeButton: false,
+        render: /* @__PURE__ */ jsx14(Link2, { href: url }),
+        value: tabValue,
+        children: [
+          renderTabIcon(icon),
+          title
+        ]
+      },
+      tabValue
+    )) }) }),
+    children
+  ] });
+});
+
+// src/components/composed/header-title.tsx
+import { memo as memo3 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var HeaderTitle = memo3(function HeaderTitle2({
   title,
   subtitle,
   children
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "w-full space-y-4", children: [
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx13("h1", { className: "font-semibold", children: title }),
-      /* @__PURE__ */ jsx13("p", { className: "text-xs text-muted-foreground", children: subtitle })
+  return /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx15("h1", { className: "font-semibold", children: title }),
+      /* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: subtitle })
     ] }),
     children
   ] });
 });
 export {
   AppSidebar,
+  HeaderTabs,
   HeaderTitle
 };

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@prediktif/ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "style": "./styles.css",
   "exports": {
     ".": {
-      "style": "./styles.css",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"