@prediktif/ui 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +38 -2
- package/dist/index.d.ts +38 -2
- package/dist/index.js +271 -11
- package/dist/index.mjs +270 -12
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, ComponentProps } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
6
|
|
|
4
7
|
interface NavItem {
|
|
5
8
|
title: string;
|
|
@@ -35,6 +38,22 @@ interface AppSidebarProps {
|
|
|
35
38
|
}
|
|
36
39
|
declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
|
|
37
40
|
|
|
41
|
+
interface HeaderTabItem {
|
|
42
|
+
title: string;
|
|
43
|
+
url: string;
|
|
44
|
+
value: string;
|
|
45
|
+
icon?: React.ComponentType<{
|
|
46
|
+
className?: string;
|
|
47
|
+
}> | ReactNode;
|
|
48
|
+
}
|
|
49
|
+
interface HeaderTabsProps {
|
|
50
|
+
items: HeaderTabItem[];
|
|
51
|
+
value?: string;
|
|
52
|
+
onValueChange?: (value: string) => void;
|
|
53
|
+
children?: ReactNode;
|
|
54
|
+
}
|
|
55
|
+
declare const HeaderTabs: react.NamedExoticComponent<HeaderTabsProps>;
|
|
56
|
+
|
|
38
57
|
interface HeaderTitleProps {
|
|
39
58
|
title: React.ReactNode;
|
|
40
59
|
subtitle: React.ReactNode;
|
|
@@ -42,4 +61,21 @@ interface HeaderTitleProps {
|
|
|
42
61
|
}
|
|
43
62
|
declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
|
|
44
63
|
|
|
45
|
-
|
|
64
|
+
declare const buttonVariants: (props?: ({
|
|
65
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
66
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
67
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
68
|
+
declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
|
|
69
|
+
|
|
70
|
+
interface StateEmptyProps {
|
|
71
|
+
icon: React.ComponentType<{
|
|
72
|
+
className?: string;
|
|
73
|
+
}> | ReactNode;
|
|
74
|
+
title: ReactNode;
|
|
75
|
+
description: ReactNode;
|
|
76
|
+
buttonText: string;
|
|
77
|
+
render?: ComponentProps<typeof Button>["render"];
|
|
78
|
+
}
|
|
79
|
+
declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
|
|
80
|
+
|
|
81
|
+
export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import { ReactNode, ComponentProps } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { Button as Button$1 } from '@base-ui/react/button';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
6
|
|
|
4
7
|
interface NavItem {
|
|
5
8
|
title: string;
|
|
@@ -35,6 +38,22 @@ interface AppSidebarProps {
|
|
|
35
38
|
}
|
|
36
39
|
declare const AppSidebar: react.NamedExoticComponent<AppSidebarProps>;
|
|
37
40
|
|
|
41
|
+
interface HeaderTabItem {
|
|
42
|
+
title: string;
|
|
43
|
+
url: string;
|
|
44
|
+
value: string;
|
|
45
|
+
icon?: React.ComponentType<{
|
|
46
|
+
className?: string;
|
|
47
|
+
}> | ReactNode;
|
|
48
|
+
}
|
|
49
|
+
interface HeaderTabsProps {
|
|
50
|
+
items: HeaderTabItem[];
|
|
51
|
+
value?: string;
|
|
52
|
+
onValueChange?: (value: string) => void;
|
|
53
|
+
children?: ReactNode;
|
|
54
|
+
}
|
|
55
|
+
declare const HeaderTabs: react.NamedExoticComponent<HeaderTabsProps>;
|
|
56
|
+
|
|
38
57
|
interface HeaderTitleProps {
|
|
39
58
|
title: React.ReactNode;
|
|
40
59
|
subtitle: React.ReactNode;
|
|
@@ -42,4 +61,21 @@ interface HeaderTitleProps {
|
|
|
42
61
|
}
|
|
43
62
|
declare const HeaderTitle: react.NamedExoticComponent<HeaderTitleProps>;
|
|
44
63
|
|
|
45
|
-
|
|
64
|
+
declare const buttonVariants: (props?: ({
|
|
65
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
66
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
67
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
68
|
+
declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react.JSX.Element;
|
|
69
|
+
|
|
70
|
+
interface StateEmptyProps {
|
|
71
|
+
icon: React.ComponentType<{
|
|
72
|
+
className?: string;
|
|
73
|
+
}> | ReactNode;
|
|
74
|
+
title: ReactNode;
|
|
75
|
+
description: ReactNode;
|
|
76
|
+
buttonText: string;
|
|
77
|
+
render?: ComponentProps<typeof Button>["render"];
|
|
78
|
+
}
|
|
79
|
+
declare const StateEmpty: react.NamedExoticComponent<StateEmptyProps>;
|
|
80
|
+
|
|
81
|
+
export { AppSidebar, type AppSidebarProps, type HeaderTabItem, HeaderTabs, type HeaderTabsProps, HeaderTitle, type HeaderTitleProps, type NavItem, type OrganizationItem, StateEmpty, type StateEmptyProps };
|
package/dist/index.js
CHANGED
|
@@ -61,7 +61,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
61
61
|
var index_exports = {};
|
|
62
62
|
__export(index_exports, {
|
|
63
63
|
AppSidebar: () => AppSidebar,
|
|
64
|
-
|
|
64
|
+
HeaderTabs: () => HeaderTabs,
|
|
65
|
+
HeaderTitle: () => HeaderTitle,
|
|
66
|
+
StateEmpty: () => StateEmpty
|
|
65
67
|
});
|
|
66
68
|
module.exports = __toCommonJS(index_exports);
|
|
67
69
|
|
|
@@ -1229,9 +1231,11 @@ function SidebarMenuBadge(_a) {
|
|
|
1229
1231
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1230
1232
|
function renderNavIcon(icon) {
|
|
1231
1233
|
if (!icon) return null;
|
|
1232
|
-
if (
|
|
1233
|
-
|
|
1234
|
-
|
|
1234
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1235
|
+
const IconComp = icon;
|
|
1236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComp, {});
|
|
1237
|
+
}
|
|
1238
|
+
return icon;
|
|
1235
1239
|
}
|
|
1236
1240
|
function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
|
|
1237
1241
|
if (subHref) {
|
|
@@ -1438,24 +1442,280 @@ var AppSidebar = (0, import_react.memo)(function AppSidebar2({
|
|
|
1438
1442
|
] });
|
|
1439
1443
|
});
|
|
1440
1444
|
|
|
1441
|
-
// src/components/composed/header-
|
|
1445
|
+
// src/components/composed/header-tabs.tsx
|
|
1446
|
+
var import_link2 = __toESM(require("next/link"));
|
|
1447
|
+
var import_navigation2 = require("next/navigation");
|
|
1442
1448
|
var import_react2 = require("react");
|
|
1449
|
+
|
|
1450
|
+
// src/components/ui/tabs.tsx
|
|
1451
|
+
var import_tabs = require("@base-ui/react/tabs");
|
|
1452
|
+
var import_class_variance_authority3 = require("class-variance-authority");
|
|
1453
|
+
var import_cn12 = require("cn");
|
|
1443
1454
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1444
|
-
|
|
1455
|
+
function Tabs(_a) {
|
|
1456
|
+
var _b = _a, {
|
|
1457
|
+
className,
|
|
1458
|
+
orientation = "horizontal"
|
|
1459
|
+
} = _b, props = __objRest(_b, [
|
|
1460
|
+
"className",
|
|
1461
|
+
"orientation"
|
|
1462
|
+
]);
|
|
1463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1464
|
+
import_tabs.Tabs.Root,
|
|
1465
|
+
__spreadValues({
|
|
1466
|
+
"data-slot": "tabs",
|
|
1467
|
+
"data-orientation": orientation,
|
|
1468
|
+
className: (0, import_cn12.cn)(
|
|
1469
|
+
"group/tabs flex gap-2 data-horizontal:flex-col",
|
|
1470
|
+
className
|
|
1471
|
+
)
|
|
1472
|
+
}, props)
|
|
1473
|
+
);
|
|
1474
|
+
}
|
|
1475
|
+
var tabsListVariants = (0, import_class_variance_authority3.cva)(
|
|
1476
|
+
"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",
|
|
1477
|
+
{
|
|
1478
|
+
variants: {
|
|
1479
|
+
variant: {
|
|
1480
|
+
default: "bg-muted",
|
|
1481
|
+
line: "gap-1 bg-transparent"
|
|
1482
|
+
}
|
|
1483
|
+
},
|
|
1484
|
+
defaultVariants: {
|
|
1485
|
+
variant: "default"
|
|
1486
|
+
}
|
|
1487
|
+
}
|
|
1488
|
+
);
|
|
1489
|
+
function TabsList(_a) {
|
|
1490
|
+
var _b = _a, {
|
|
1491
|
+
className,
|
|
1492
|
+
variant = "default"
|
|
1493
|
+
} = _b, props = __objRest(_b, [
|
|
1494
|
+
"className",
|
|
1495
|
+
"variant"
|
|
1496
|
+
]);
|
|
1497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1498
|
+
import_tabs.Tabs.List,
|
|
1499
|
+
__spreadValues({
|
|
1500
|
+
"data-slot": "tabs-list",
|
|
1501
|
+
"data-variant": variant,
|
|
1502
|
+
className: (0, import_cn12.cn)(tabsListVariants({ variant }), className)
|
|
1503
|
+
}, props)
|
|
1504
|
+
);
|
|
1505
|
+
}
|
|
1506
|
+
function TabsTrigger(_a) {
|
|
1507
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1509
|
+
import_tabs.Tabs.Tab,
|
|
1510
|
+
__spreadValues({
|
|
1511
|
+
"data-slot": "tabs-trigger",
|
|
1512
|
+
className: (0, import_cn12.cn)(
|
|
1513
|
+
"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",
|
|
1514
|
+
"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",
|
|
1515
|
+
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
|
1516
|
+
"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",
|
|
1517
|
+
className
|
|
1518
|
+
)
|
|
1519
|
+
}, props)
|
|
1520
|
+
);
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
// src/components/composed/header-tabs.tsx
|
|
1524
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1525
|
+
function renderTabIcon(icon) {
|
|
1526
|
+
if (!icon) return null;
|
|
1527
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1528
|
+
const IconComp = icon;
|
|
1529
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconComp, {});
|
|
1530
|
+
}
|
|
1531
|
+
return icon;
|
|
1532
|
+
}
|
|
1533
|
+
var HeaderTabs = (0, import_react2.memo)(function HeaderTabs2({
|
|
1534
|
+
items,
|
|
1535
|
+
value,
|
|
1536
|
+
onValueChange,
|
|
1537
|
+
children
|
|
1538
|
+
}) {
|
|
1539
|
+
var _a, _b;
|
|
1540
|
+
const pathname = (0, import_navigation2.usePathname)();
|
|
1541
|
+
const matchedItem = pathname ? items.find(
|
|
1542
|
+
(item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
|
|
1543
|
+
) : void 0;
|
|
1544
|
+
const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
|
|
1545
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
|
|
1546
|
+
/* @__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)(
|
|
1547
|
+
TabsTrigger,
|
|
1548
|
+
{
|
|
1549
|
+
nativeButton: false,
|
|
1550
|
+
render: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_link2.default, { href: url }),
|
|
1551
|
+
value: tabValue,
|
|
1552
|
+
children: [
|
|
1553
|
+
renderTabIcon(icon),
|
|
1554
|
+
title
|
|
1555
|
+
]
|
|
1556
|
+
},
|
|
1557
|
+
tabValue
|
|
1558
|
+
)) }) }),
|
|
1559
|
+
children
|
|
1560
|
+
] });
|
|
1561
|
+
});
|
|
1562
|
+
|
|
1563
|
+
// src/components/composed/header-title.tsx
|
|
1564
|
+
var import_react3 = require("react");
|
|
1565
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1566
|
+
var HeaderTitle = (0, import_react3.memo)(function HeaderTitle2({
|
|
1445
1567
|
title,
|
|
1446
1568
|
subtitle,
|
|
1447
1569
|
children
|
|
1448
1570
|
}) {
|
|
1449
|
-
return /* @__PURE__ */ (0,
|
|
1450
|
-
/* @__PURE__ */ (0,
|
|
1451
|
-
/* @__PURE__ */ (0,
|
|
1452
|
-
/* @__PURE__ */ (0,
|
|
1571
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "w-full space-y-4", children: [
|
|
1572
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
|
|
1573
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h1", { className: "font-semibold", children: title }),
|
|
1574
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs text-muted-foreground", children: subtitle })
|
|
1453
1575
|
] }),
|
|
1454
1576
|
children
|
|
1455
1577
|
] });
|
|
1456
1578
|
});
|
|
1579
|
+
|
|
1580
|
+
// src/components/composed/state-empty.tsx
|
|
1581
|
+
var import_react4 = require("react");
|
|
1582
|
+
|
|
1583
|
+
// src/components/ui/empty.tsx
|
|
1584
|
+
var import_class_variance_authority4 = require("class-variance-authority");
|
|
1585
|
+
var import_cn13 = require("cn");
|
|
1586
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1587
|
+
function Empty(_a) {
|
|
1588
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1590
|
+
"div",
|
|
1591
|
+
__spreadValues({
|
|
1592
|
+
"data-slot": "empty",
|
|
1593
|
+
className: (0, import_cn13.cn)(
|
|
1594
|
+
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
|
1595
|
+
className
|
|
1596
|
+
)
|
|
1597
|
+
}, props)
|
|
1598
|
+
);
|
|
1599
|
+
}
|
|
1600
|
+
function EmptyHeader(_a) {
|
|
1601
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1602
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1603
|
+
"div",
|
|
1604
|
+
__spreadValues({
|
|
1605
|
+
"data-slot": "empty-header",
|
|
1606
|
+
className: (0, import_cn13.cn)("flex max-w-sm flex-col items-center gap-1", className)
|
|
1607
|
+
}, props)
|
|
1608
|
+
);
|
|
1609
|
+
}
|
|
1610
|
+
var emptyMediaVariants = (0, import_class_variance_authority4.cva)(
|
|
1611
|
+
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
1612
|
+
{
|
|
1613
|
+
variants: {
|
|
1614
|
+
variant: {
|
|
1615
|
+
default: "bg-transparent",
|
|
1616
|
+
icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
|
|
1617
|
+
}
|
|
1618
|
+
},
|
|
1619
|
+
defaultVariants: {
|
|
1620
|
+
variant: "default"
|
|
1621
|
+
}
|
|
1622
|
+
}
|
|
1623
|
+
);
|
|
1624
|
+
function EmptyMedia(_a) {
|
|
1625
|
+
var _b = _a, {
|
|
1626
|
+
className,
|
|
1627
|
+
variant = "default"
|
|
1628
|
+
} = _b, props = __objRest(_b, [
|
|
1629
|
+
"className",
|
|
1630
|
+
"variant"
|
|
1631
|
+
]);
|
|
1632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1633
|
+
"div",
|
|
1634
|
+
__spreadValues({
|
|
1635
|
+
"data-slot": "empty-icon",
|
|
1636
|
+
"data-variant": variant,
|
|
1637
|
+
className: (0, import_cn13.cn)(emptyMediaVariants({ variant, className }))
|
|
1638
|
+
}, props)
|
|
1639
|
+
);
|
|
1640
|
+
}
|
|
1641
|
+
function EmptyTitle(_a) {
|
|
1642
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1644
|
+
"div",
|
|
1645
|
+
__spreadValues({
|
|
1646
|
+
"data-slot": "empty-title",
|
|
1647
|
+
className: (0, import_cn13.cn)(
|
|
1648
|
+
"font-heading text-sm font-medium tracking-tight",
|
|
1649
|
+
className
|
|
1650
|
+
)
|
|
1651
|
+
}, props)
|
|
1652
|
+
);
|
|
1653
|
+
}
|
|
1654
|
+
function EmptyDescription(_a) {
|
|
1655
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1657
|
+
"div",
|
|
1658
|
+
__spreadValues({
|
|
1659
|
+
"data-slot": "empty-description",
|
|
1660
|
+
className: (0, import_cn13.cn)(
|
|
1661
|
+
"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
1662
|
+
className
|
|
1663
|
+
)
|
|
1664
|
+
}, props)
|
|
1665
|
+
);
|
|
1666
|
+
}
|
|
1667
|
+
function EmptyContent(_a) {
|
|
1668
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1669
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1670
|
+
"div",
|
|
1671
|
+
__spreadValues({
|
|
1672
|
+
"data-slot": "empty-content",
|
|
1673
|
+
className: (0, import_cn13.cn)(
|
|
1674
|
+
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
|
|
1675
|
+
className
|
|
1676
|
+
)
|
|
1677
|
+
}, props)
|
|
1678
|
+
);
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1681
|
+
// src/components/composed/state-empty.tsx
|
|
1682
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1683
|
+
function renderStateIcon(icon) {
|
|
1684
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1685
|
+
const IconComp = icon;
|
|
1686
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconComp, {});
|
|
1687
|
+
}
|
|
1688
|
+
return icon;
|
|
1689
|
+
}
|
|
1690
|
+
var StateEmpty = (0, import_react4.memo)(function StateEmpty2({
|
|
1691
|
+
icon,
|
|
1692
|
+
title,
|
|
1693
|
+
description,
|
|
1694
|
+
buttonText,
|
|
1695
|
+
render
|
|
1696
|
+
}) {
|
|
1697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Empty, { className: "w-full border border-dashed", children: [
|
|
1698
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(EmptyHeader, { children: [
|
|
1699
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
|
|
1700
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyTitle, { children: title }),
|
|
1701
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyDescription, { children: description })
|
|
1702
|
+
] }),
|
|
1703
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(EmptyContent, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1704
|
+
Button,
|
|
1705
|
+
{
|
|
1706
|
+
variant: "outline",
|
|
1707
|
+
size: "sm",
|
|
1708
|
+
nativeButton: !render,
|
|
1709
|
+
render,
|
|
1710
|
+
children: buttonText
|
|
1711
|
+
}
|
|
1712
|
+
) })
|
|
1713
|
+
] });
|
|
1714
|
+
});
|
|
1457
1715
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1458
1716
|
0 && (module.exports = {
|
|
1459
1717
|
AppSidebar,
|
|
1460
|
-
|
|
1718
|
+
HeaderTabs,
|
|
1719
|
+
HeaderTitle,
|
|
1720
|
+
StateEmpty
|
|
1461
1721
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -35,7 +35,7 @@ var __objRest = (source, exclude) => {
|
|
|
35
35
|
import { ChevronsUpDown, Command, LockIcon } from "lucide-react";
|
|
36
36
|
import Link from "next/link";
|
|
37
37
|
import { usePathname } from "next/navigation";
|
|
38
|
-
import {
|
|
38
|
+
import { memo } from "react";
|
|
39
39
|
|
|
40
40
|
// src/components/ui/alert-dialog.tsx
|
|
41
41
|
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
|
|
@@ -1195,9 +1195,11 @@ function SidebarMenuBadge(_a) {
|
|
|
1195
1195
|
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1196
1196
|
function renderNavIcon(icon) {
|
|
1197
1197
|
if (!icon) return null;
|
|
1198
|
-
if (
|
|
1199
|
-
|
|
1200
|
-
|
|
1198
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1199
|
+
const IconComp = icon;
|
|
1200
|
+
return /* @__PURE__ */ jsx12(IconComp, {});
|
|
1201
|
+
}
|
|
1202
|
+
return icon;
|
|
1201
1203
|
}
|
|
1202
1204
|
function formatSegment(segment, subHref, navMainItems = [], navSecondaryItems = []) {
|
|
1203
1205
|
if (subHref) {
|
|
@@ -1404,23 +1406,279 @@ var AppSidebar = memo(function AppSidebar2({
|
|
|
1404
1406
|
] });
|
|
1405
1407
|
});
|
|
1406
1408
|
|
|
1407
|
-
// src/components/composed/header-
|
|
1409
|
+
// src/components/composed/header-tabs.tsx
|
|
1410
|
+
import Link2 from "next/link";
|
|
1411
|
+
import { usePathname as usePathname2 } from "next/navigation";
|
|
1408
1412
|
import { memo as memo2 } from "react";
|
|
1409
|
-
|
|
1410
|
-
|
|
1413
|
+
|
|
1414
|
+
// src/components/ui/tabs.tsx
|
|
1415
|
+
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
1416
|
+
import { cva as cva3 } from "class-variance-authority";
|
|
1417
|
+
import { cn as cn12 } from "cn";
|
|
1418
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
1419
|
+
function Tabs(_a) {
|
|
1420
|
+
var _b = _a, {
|
|
1421
|
+
className,
|
|
1422
|
+
orientation = "horizontal"
|
|
1423
|
+
} = _b, props = __objRest(_b, [
|
|
1424
|
+
"className",
|
|
1425
|
+
"orientation"
|
|
1426
|
+
]);
|
|
1427
|
+
return /* @__PURE__ */ jsx13(
|
|
1428
|
+
TabsPrimitive.Root,
|
|
1429
|
+
__spreadValues({
|
|
1430
|
+
"data-slot": "tabs",
|
|
1431
|
+
"data-orientation": orientation,
|
|
1432
|
+
className: cn12(
|
|
1433
|
+
"group/tabs flex gap-2 data-horizontal:flex-col",
|
|
1434
|
+
className
|
|
1435
|
+
)
|
|
1436
|
+
}, props)
|
|
1437
|
+
);
|
|
1438
|
+
}
|
|
1439
|
+
var tabsListVariants = cva3(
|
|
1440
|
+
"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",
|
|
1441
|
+
{
|
|
1442
|
+
variants: {
|
|
1443
|
+
variant: {
|
|
1444
|
+
default: "bg-muted",
|
|
1445
|
+
line: "gap-1 bg-transparent"
|
|
1446
|
+
}
|
|
1447
|
+
},
|
|
1448
|
+
defaultVariants: {
|
|
1449
|
+
variant: "default"
|
|
1450
|
+
}
|
|
1451
|
+
}
|
|
1452
|
+
);
|
|
1453
|
+
function TabsList(_a) {
|
|
1454
|
+
var _b = _a, {
|
|
1455
|
+
className,
|
|
1456
|
+
variant = "default"
|
|
1457
|
+
} = _b, props = __objRest(_b, [
|
|
1458
|
+
"className",
|
|
1459
|
+
"variant"
|
|
1460
|
+
]);
|
|
1461
|
+
return /* @__PURE__ */ jsx13(
|
|
1462
|
+
TabsPrimitive.List,
|
|
1463
|
+
__spreadValues({
|
|
1464
|
+
"data-slot": "tabs-list",
|
|
1465
|
+
"data-variant": variant,
|
|
1466
|
+
className: cn12(tabsListVariants({ variant }), className)
|
|
1467
|
+
}, props)
|
|
1468
|
+
);
|
|
1469
|
+
}
|
|
1470
|
+
function TabsTrigger(_a) {
|
|
1471
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1472
|
+
return /* @__PURE__ */ jsx13(
|
|
1473
|
+
TabsPrimitive.Tab,
|
|
1474
|
+
__spreadValues({
|
|
1475
|
+
"data-slot": "tabs-trigger",
|
|
1476
|
+
className: cn12(
|
|
1477
|
+
"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",
|
|
1478
|
+
"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",
|
|
1479
|
+
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
|
|
1480
|
+
"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",
|
|
1481
|
+
className
|
|
1482
|
+
)
|
|
1483
|
+
}, props)
|
|
1484
|
+
);
|
|
1485
|
+
}
|
|
1486
|
+
|
|
1487
|
+
// src/components/composed/header-tabs.tsx
|
|
1488
|
+
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1489
|
+
function renderTabIcon(icon) {
|
|
1490
|
+
if (!icon) return null;
|
|
1491
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1492
|
+
const IconComp = icon;
|
|
1493
|
+
return /* @__PURE__ */ jsx14(IconComp, {});
|
|
1494
|
+
}
|
|
1495
|
+
return icon;
|
|
1496
|
+
}
|
|
1497
|
+
var HeaderTabs = memo2(function HeaderTabs2({
|
|
1498
|
+
items,
|
|
1499
|
+
value,
|
|
1500
|
+
onValueChange,
|
|
1501
|
+
children
|
|
1502
|
+
}) {
|
|
1503
|
+
var _a, _b;
|
|
1504
|
+
const pathname = usePathname2();
|
|
1505
|
+
const matchedItem = pathname ? items.find(
|
|
1506
|
+
(item) => item.url === pathname || pathname.endsWith(item.url) || pathname.split("/").includes(item.value)
|
|
1507
|
+
) : void 0;
|
|
1508
|
+
const activeTab = (_b = value != null ? value : matchedItem == null ? void 0 : matchedItem.value) != null ? _b : (_a = items[0]) == null ? void 0 : _a.value;
|
|
1509
|
+
return /* @__PURE__ */ jsxs8(Tabs, { value: activeTab, onValueChange, className: "space-y-4", children: [
|
|
1510
|
+
/* @__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(
|
|
1511
|
+
TabsTrigger,
|
|
1512
|
+
{
|
|
1513
|
+
nativeButton: false,
|
|
1514
|
+
render: /* @__PURE__ */ jsx14(Link2, { href: url }),
|
|
1515
|
+
value: tabValue,
|
|
1516
|
+
children: [
|
|
1517
|
+
renderTabIcon(icon),
|
|
1518
|
+
title
|
|
1519
|
+
]
|
|
1520
|
+
},
|
|
1521
|
+
tabValue
|
|
1522
|
+
)) }) }),
|
|
1523
|
+
children
|
|
1524
|
+
] });
|
|
1525
|
+
});
|
|
1526
|
+
|
|
1527
|
+
// src/components/composed/header-title.tsx
|
|
1528
|
+
import { memo as memo3 } from "react";
|
|
1529
|
+
import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1530
|
+
var HeaderTitle = memo3(function HeaderTitle2({
|
|
1411
1531
|
title,
|
|
1412
1532
|
subtitle,
|
|
1413
1533
|
children
|
|
1414
1534
|
}) {
|
|
1415
|
-
return /* @__PURE__ */
|
|
1416
|
-
/* @__PURE__ */
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
/* @__PURE__ */
|
|
1535
|
+
return /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-4", children: [
|
|
1536
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
1537
|
+
/* @__PURE__ */ jsx15("h1", { className: "font-semibold", children: title }),
|
|
1538
|
+
/* @__PURE__ */ jsx15("p", { className: "text-xs text-muted-foreground", children: subtitle })
|
|
1419
1539
|
] }),
|
|
1420
1540
|
children
|
|
1421
1541
|
] });
|
|
1422
1542
|
});
|
|
1543
|
+
|
|
1544
|
+
// src/components/composed/state-empty.tsx
|
|
1545
|
+
import { memo as memo4 } from "react";
|
|
1546
|
+
|
|
1547
|
+
// src/components/ui/empty.tsx
|
|
1548
|
+
import { cva as cva4 } from "class-variance-authority";
|
|
1549
|
+
import { cn as cn13 } from "cn";
|
|
1550
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1551
|
+
function Empty(_a) {
|
|
1552
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1553
|
+
return /* @__PURE__ */ jsx16(
|
|
1554
|
+
"div",
|
|
1555
|
+
__spreadValues({
|
|
1556
|
+
"data-slot": "empty",
|
|
1557
|
+
className: cn13(
|
|
1558
|
+
"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
|
|
1559
|
+
className
|
|
1560
|
+
)
|
|
1561
|
+
}, props)
|
|
1562
|
+
);
|
|
1563
|
+
}
|
|
1564
|
+
function EmptyHeader(_a) {
|
|
1565
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1566
|
+
return /* @__PURE__ */ jsx16(
|
|
1567
|
+
"div",
|
|
1568
|
+
__spreadValues({
|
|
1569
|
+
"data-slot": "empty-header",
|
|
1570
|
+
className: cn13("flex max-w-sm flex-col items-center gap-1", className)
|
|
1571
|
+
}, props)
|
|
1572
|
+
);
|
|
1573
|
+
}
|
|
1574
|
+
var emptyMediaVariants = cva4(
|
|
1575
|
+
"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
1576
|
+
{
|
|
1577
|
+
variants: {
|
|
1578
|
+
variant: {
|
|
1579
|
+
default: "bg-transparent",
|
|
1580
|
+
icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
|
|
1581
|
+
}
|
|
1582
|
+
},
|
|
1583
|
+
defaultVariants: {
|
|
1584
|
+
variant: "default"
|
|
1585
|
+
}
|
|
1586
|
+
}
|
|
1587
|
+
);
|
|
1588
|
+
function EmptyMedia(_a) {
|
|
1589
|
+
var _b = _a, {
|
|
1590
|
+
className,
|
|
1591
|
+
variant = "default"
|
|
1592
|
+
} = _b, props = __objRest(_b, [
|
|
1593
|
+
"className",
|
|
1594
|
+
"variant"
|
|
1595
|
+
]);
|
|
1596
|
+
return /* @__PURE__ */ jsx16(
|
|
1597
|
+
"div",
|
|
1598
|
+
__spreadValues({
|
|
1599
|
+
"data-slot": "empty-icon",
|
|
1600
|
+
"data-variant": variant,
|
|
1601
|
+
className: cn13(emptyMediaVariants({ variant, className }))
|
|
1602
|
+
}, props)
|
|
1603
|
+
);
|
|
1604
|
+
}
|
|
1605
|
+
function EmptyTitle(_a) {
|
|
1606
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1607
|
+
return /* @__PURE__ */ jsx16(
|
|
1608
|
+
"div",
|
|
1609
|
+
__spreadValues({
|
|
1610
|
+
"data-slot": "empty-title",
|
|
1611
|
+
className: cn13(
|
|
1612
|
+
"font-heading text-sm font-medium tracking-tight",
|
|
1613
|
+
className
|
|
1614
|
+
)
|
|
1615
|
+
}, props)
|
|
1616
|
+
);
|
|
1617
|
+
}
|
|
1618
|
+
function EmptyDescription(_a) {
|
|
1619
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1620
|
+
return /* @__PURE__ */ jsx16(
|
|
1621
|
+
"div",
|
|
1622
|
+
__spreadValues({
|
|
1623
|
+
"data-slot": "empty-description",
|
|
1624
|
+
className: cn13(
|
|
1625
|
+
"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
|
|
1626
|
+
className
|
|
1627
|
+
)
|
|
1628
|
+
}, props)
|
|
1629
|
+
);
|
|
1630
|
+
}
|
|
1631
|
+
function EmptyContent(_a) {
|
|
1632
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1633
|
+
return /* @__PURE__ */ jsx16(
|
|
1634
|
+
"div",
|
|
1635
|
+
__spreadValues({
|
|
1636
|
+
"data-slot": "empty-content",
|
|
1637
|
+
className: cn13(
|
|
1638
|
+
"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance",
|
|
1639
|
+
className
|
|
1640
|
+
)
|
|
1641
|
+
}, props)
|
|
1642
|
+
);
|
|
1643
|
+
}
|
|
1644
|
+
|
|
1645
|
+
// src/components/composed/state-empty.tsx
|
|
1646
|
+
import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1647
|
+
function renderStateIcon(icon) {
|
|
1648
|
+
if (typeof icon === "function" || typeof icon === "object" && icon !== null && "render" in icon) {
|
|
1649
|
+
const IconComp = icon;
|
|
1650
|
+
return /* @__PURE__ */ jsx17(IconComp, {});
|
|
1651
|
+
}
|
|
1652
|
+
return icon;
|
|
1653
|
+
}
|
|
1654
|
+
var StateEmpty = memo4(function StateEmpty2({
|
|
1655
|
+
icon,
|
|
1656
|
+
title,
|
|
1657
|
+
description,
|
|
1658
|
+
buttonText,
|
|
1659
|
+
render
|
|
1660
|
+
}) {
|
|
1661
|
+
return /* @__PURE__ */ jsxs10(Empty, { className: "w-full border border-dashed", children: [
|
|
1662
|
+
/* @__PURE__ */ jsxs10(EmptyHeader, { children: [
|
|
1663
|
+
/* @__PURE__ */ jsx17(EmptyMedia, { variant: "icon", children: renderStateIcon(icon) }),
|
|
1664
|
+
/* @__PURE__ */ jsx17(EmptyTitle, { children: title }),
|
|
1665
|
+
/* @__PURE__ */ jsx17(EmptyDescription, { children: description })
|
|
1666
|
+
] }),
|
|
1667
|
+
/* @__PURE__ */ jsx17(EmptyContent, { children: /* @__PURE__ */ jsx17(
|
|
1668
|
+
Button,
|
|
1669
|
+
{
|
|
1670
|
+
variant: "outline",
|
|
1671
|
+
size: "sm",
|
|
1672
|
+
nativeButton: !render,
|
|
1673
|
+
render,
|
|
1674
|
+
children: buttonText
|
|
1675
|
+
}
|
|
1676
|
+
) })
|
|
1677
|
+
] });
|
|
1678
|
+
});
|
|
1423
1679
|
export {
|
|
1424
1680
|
AppSidebar,
|
|
1425
|
-
|
|
1681
|
+
HeaderTabs,
|
|
1682
|
+
HeaderTitle,
|
|
1683
|
+
StateEmpty
|
|
1426
1684
|
};
|