@prediktif/ui 0.1.4 → 0.1.6
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 +27 -3
- package/dist/index.d.ts +27 -3
- package/dist/index.js +362 -2
- package/dist/index.mjs +353 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,34 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
import { Tooltip } from '@base-ui/react/tooltip';
|
|
2
7
|
|
|
3
8
|
interface HeaderTitleProps {
|
|
4
9
|
title: React.ReactNode;
|
|
5
10
|
subtitle: React.ReactNode;
|
|
6
11
|
children?: React.ReactNode;
|
|
7
12
|
}
|
|
8
|
-
declare const HeaderTitle:
|
|
13
|
+
declare const HeaderTitle: React$1.NamedExoticComponent<HeaderTitleProps>;
|
|
9
14
|
|
|
10
|
-
|
|
15
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React$1.JSX.Element;
|
|
16
|
+
|
|
17
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
18
|
+
variant?: "default" | "outline" | null | undefined;
|
|
19
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
20
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
21
|
+
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React$1.ComponentProps<"button"> & {
|
|
22
|
+
isActive?: boolean;
|
|
23
|
+
tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
|
|
24
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): React$1.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface NavUserProps {
|
|
27
|
+
name: string;
|
|
28
|
+
email: string;
|
|
29
|
+
image?: string | null;
|
|
30
|
+
render?: ComponentProps<typeof SidebarMenuButton>["render"];
|
|
31
|
+
}
|
|
32
|
+
declare const NavUser: React$1.NamedExoticComponent<NavUserProps>;
|
|
33
|
+
|
|
34
|
+
export { HeaderTitle, type HeaderTitleProps, NavUser, type NavUserProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,34 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import { ComponentProps } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
import { Tooltip } from '@base-ui/react/tooltip';
|
|
2
7
|
|
|
3
8
|
interface HeaderTitleProps {
|
|
4
9
|
title: React.ReactNode;
|
|
5
10
|
subtitle: React.ReactNode;
|
|
6
11
|
children?: React.ReactNode;
|
|
7
12
|
}
|
|
8
|
-
declare const HeaderTitle:
|
|
13
|
+
declare const HeaderTitle: React$1.NamedExoticComponent<HeaderTitleProps>;
|
|
9
14
|
|
|
10
|
-
|
|
15
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React$1.JSX.Element;
|
|
16
|
+
|
|
17
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
18
|
+
variant?: "default" | "outline" | null | undefined;
|
|
19
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
20
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
21
|
+
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React$1.ComponentProps<"button"> & {
|
|
22
|
+
isActive?: boolean;
|
|
23
|
+
tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
|
|
24
|
+
} & VariantProps<typeof sidebarMenuButtonVariants>): React$1.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface NavUserProps {
|
|
27
|
+
name: string;
|
|
28
|
+
email: string;
|
|
29
|
+
image?: string | null;
|
|
30
|
+
render?: ComponentProps<typeof SidebarMenuButton>["render"];
|
|
31
|
+
}
|
|
32
|
+
declare const NavUser: React$1.NamedExoticComponent<NavUserProps>;
|
|
33
|
+
|
|
34
|
+
export { HeaderTitle, type HeaderTitleProps, NavUser, type NavUserProps };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
2
4
|
var __defProp = Object.defineProperty;
|
|
5
|
+
var __defProps = Object.defineProperties;
|
|
3
6
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
8
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
9
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
11
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
+
var __spreadValues = (a, b) => {
|
|
15
|
+
for (var prop in b || (b = {}))
|
|
16
|
+
if (__hasOwnProp.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
if (__getOwnPropSymbols)
|
|
19
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
+
if (__propIsEnum.call(b, prop))
|
|
21
|
+
__defNormalProp(a, prop, b[prop]);
|
|
22
|
+
}
|
|
23
|
+
return a;
|
|
24
|
+
};
|
|
25
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
+
var __objRest = (source, exclude) => {
|
|
27
|
+
var target = {};
|
|
28
|
+
for (var prop in source)
|
|
29
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
+
target[prop] = source[prop];
|
|
31
|
+
if (source != null && __getOwnPropSymbols)
|
|
32
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
+
target[prop] = source[prop];
|
|
35
|
+
}
|
|
36
|
+
return target;
|
|
37
|
+
};
|
|
6
38
|
var __export = (target, all) => {
|
|
7
39
|
for (var name in all)
|
|
8
40
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -15,12 +47,21 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
47
|
}
|
|
16
48
|
return to;
|
|
17
49
|
};
|
|
50
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
51
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
52
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
53
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
54
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
55
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
56
|
+
mod
|
|
57
|
+
));
|
|
18
58
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
59
|
|
|
20
60
|
// src/index.ts
|
|
21
61
|
var index_exports = {};
|
|
22
62
|
__export(index_exports, {
|
|
23
|
-
HeaderTitle: () => HeaderTitle
|
|
63
|
+
HeaderTitle: () => HeaderTitle,
|
|
64
|
+
NavUser: () => NavUser
|
|
24
65
|
});
|
|
25
66
|
module.exports = __toCommonJS(index_exports);
|
|
26
67
|
|
|
@@ -40,7 +81,326 @@ var HeaderTitle = (0, import_react.memo)(function HeaderTitle2({
|
|
|
40
81
|
children
|
|
41
82
|
] });
|
|
42
83
|
});
|
|
84
|
+
|
|
85
|
+
// src/components/composed/nav-user.tsx
|
|
86
|
+
var import_react2 = require("react");
|
|
87
|
+
|
|
88
|
+
// src/components/ui/avatar.tsx
|
|
89
|
+
var import_avatar = require("@base-ui/react/avatar");
|
|
90
|
+
var import_cn = require("cn");
|
|
91
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
92
|
+
function Avatar(_a) {
|
|
93
|
+
var _b = _a, {
|
|
94
|
+
className,
|
|
95
|
+
size = "default"
|
|
96
|
+
} = _b, props = __objRest(_b, [
|
|
97
|
+
"className",
|
|
98
|
+
"size"
|
|
99
|
+
]);
|
|
100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
101
|
+
import_avatar.Avatar.Root,
|
|
102
|
+
__spreadValues({
|
|
103
|
+
"data-slot": "avatar",
|
|
104
|
+
"data-size": size,
|
|
105
|
+
className: (0, import_cn.cn)(
|
|
106
|
+
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
|
107
|
+
className
|
|
108
|
+
)
|
|
109
|
+
}, props)
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
function AvatarImage(_a) {
|
|
113
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
115
|
+
import_avatar.Avatar.Image,
|
|
116
|
+
__spreadValues({
|
|
117
|
+
"data-slot": "avatar-image",
|
|
118
|
+
className: (0, import_cn.cn)(
|
|
119
|
+
"aspect-square size-full rounded-full object-cover",
|
|
120
|
+
className
|
|
121
|
+
)
|
|
122
|
+
}, props)
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
function AvatarFallback(_a) {
|
|
126
|
+
var _b = _a, {
|
|
127
|
+
className
|
|
128
|
+
} = _b, props = __objRest(_b, [
|
|
129
|
+
"className"
|
|
130
|
+
]);
|
|
131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
132
|
+
import_avatar.Avatar.Fallback,
|
|
133
|
+
__spreadValues({
|
|
134
|
+
"data-slot": "avatar-fallback",
|
|
135
|
+
className: (0, import_cn.cn)(
|
|
136
|
+
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
|
137
|
+
className
|
|
138
|
+
)
|
|
139
|
+
}, props)
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// src/components/ui/sidebar.tsx
|
|
144
|
+
var import_merge_props = require("@base-ui/react/merge-props");
|
|
145
|
+
var import_use_render = require("@base-ui/react/use-render");
|
|
146
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
147
|
+
var import_cn8 = require("cn");
|
|
148
|
+
var import_lucide_react2 = require("lucide-react");
|
|
149
|
+
var React2 = __toESM(require("react"));
|
|
150
|
+
|
|
151
|
+
// src/components/ui/button.tsx
|
|
152
|
+
var import_button = require("@base-ui/react/button");
|
|
153
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
154
|
+
var import_cn2 = require("cn");
|
|
155
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
156
|
+
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
157
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
158
|
+
{
|
|
159
|
+
variants: {
|
|
160
|
+
variant: {
|
|
161
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
162
|
+
outline: "border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
|
|
163
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
164
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
165
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
166
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
167
|
+
},
|
|
168
|
+
size: {
|
|
169
|
+
default: "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
170
|
+
xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
|
|
171
|
+
sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
172
|
+
lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
|
|
173
|
+
icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
|
|
174
|
+
"icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
|
|
175
|
+
"icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
176
|
+
"icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4"
|
|
177
|
+
}
|
|
178
|
+
},
|
|
179
|
+
defaultVariants: {
|
|
180
|
+
variant: "default",
|
|
181
|
+
size: "default"
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
);
|
|
185
|
+
|
|
186
|
+
// src/components/ui/input.tsx
|
|
187
|
+
var import_input = require("@base-ui/react/input");
|
|
188
|
+
var import_cn3 = require("cn");
|
|
189
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
190
|
+
|
|
191
|
+
// src/components/ui/separator.tsx
|
|
192
|
+
var import_separator = require("@base-ui/react/separator");
|
|
193
|
+
var import_cn4 = require("cn");
|
|
194
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
195
|
+
|
|
196
|
+
// src/components/ui/sheet.tsx
|
|
197
|
+
var import_dialog = require("@base-ui/react/dialog");
|
|
198
|
+
var import_cn5 = require("cn");
|
|
199
|
+
var import_lucide_react = require("lucide-react");
|
|
200
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
201
|
+
|
|
202
|
+
// src/components/ui/skeleton.tsx
|
|
203
|
+
var import_cn6 = require("cn");
|
|
204
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
205
|
+
|
|
206
|
+
// src/components/ui/tooltip.tsx
|
|
207
|
+
var import_tooltip = require("@base-ui/react/tooltip");
|
|
208
|
+
var import_cn7 = require("cn");
|
|
209
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
210
|
+
function Tooltip(_a) {
|
|
211
|
+
var props = __objRest(_a, []);
|
|
212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tooltip.Tooltip.Root, __spreadValues({ "data-slot": "tooltip" }, props));
|
|
213
|
+
}
|
|
214
|
+
function TooltipTrigger(_a) {
|
|
215
|
+
var props = __objRest(_a, []);
|
|
216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tooltip.Tooltip.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
|
|
217
|
+
}
|
|
218
|
+
function TooltipContent(_a) {
|
|
219
|
+
var _b = _a, {
|
|
220
|
+
className,
|
|
221
|
+
side = "top",
|
|
222
|
+
sideOffset = 4,
|
|
223
|
+
align = "center",
|
|
224
|
+
alignOffset = 0,
|
|
225
|
+
children
|
|
226
|
+
} = _b, props = __objRest(_b, [
|
|
227
|
+
"className",
|
|
228
|
+
"side",
|
|
229
|
+
"sideOffset",
|
|
230
|
+
"align",
|
|
231
|
+
"alignOffset",
|
|
232
|
+
"children"
|
|
233
|
+
]);
|
|
234
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
235
|
+
import_tooltip.Tooltip.Positioner,
|
|
236
|
+
{
|
|
237
|
+
align,
|
|
238
|
+
alignOffset,
|
|
239
|
+
side,
|
|
240
|
+
sideOffset,
|
|
241
|
+
className: "isolate z-50",
|
|
242
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
243
|
+
import_tooltip.Tooltip.Popup,
|
|
244
|
+
__spreadProps(__spreadValues({
|
|
245
|
+
"data-slot": "tooltip-content",
|
|
246
|
+
className: (0, import_cn7.cn)(
|
|
247
|
+
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
248
|
+
className
|
|
249
|
+
)
|
|
250
|
+
}, props), {
|
|
251
|
+
children: [
|
|
252
|
+
children,
|
|
253
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
|
|
254
|
+
]
|
|
255
|
+
})
|
|
256
|
+
)
|
|
257
|
+
}
|
|
258
|
+
) });
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
// src/hooks/use-mobile.ts
|
|
262
|
+
var React = __toESM(require("react"));
|
|
263
|
+
|
|
264
|
+
// src/components/ui/sidebar.tsx
|
|
265
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
266
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
267
|
+
var SidebarContext = React2.createContext(null);
|
|
268
|
+
function useSidebar() {
|
|
269
|
+
const context = React2.useContext(SidebarContext);
|
|
270
|
+
if (!context) {
|
|
271
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
272
|
+
}
|
|
273
|
+
return context;
|
|
274
|
+
}
|
|
275
|
+
function SidebarFooter(_a) {
|
|
276
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
278
|
+
"div",
|
|
279
|
+
__spreadValues({
|
|
280
|
+
"data-slot": "sidebar-footer",
|
|
281
|
+
"data-sidebar": "footer",
|
|
282
|
+
className: (0, import_cn8.cn)("flex flex-col gap-2 p-2", className)
|
|
283
|
+
}, props)
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
function SidebarMenu(_a) {
|
|
287
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
289
|
+
"ul",
|
|
290
|
+
__spreadValues({
|
|
291
|
+
"data-slot": "sidebar-menu",
|
|
292
|
+
"data-sidebar": "menu",
|
|
293
|
+
className: (0, import_cn8.cn)("flex w-full min-w-0 flex-col gap-px", className)
|
|
294
|
+
}, props)
|
|
295
|
+
);
|
|
296
|
+
}
|
|
297
|
+
function SidebarMenuItem(_a) {
|
|
298
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
300
|
+
"li",
|
|
301
|
+
__spreadValues({
|
|
302
|
+
"data-slot": "sidebar-menu-item",
|
|
303
|
+
"data-sidebar": "menu-item",
|
|
304
|
+
className: (0, import_cn8.cn)("group/menu-item relative", className)
|
|
305
|
+
}, props)
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
var sidebarMenuButtonVariants = (0, import_class_variance_authority2.cva)(
|
|
309
|
+
"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
|
|
310
|
+
{
|
|
311
|
+
variants: {
|
|
312
|
+
variant: {
|
|
313
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
314
|
+
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
315
|
+
},
|
|
316
|
+
size: {
|
|
317
|
+
default: "h-8 text-xs",
|
|
318
|
+
sm: "h-7 text-xs",
|
|
319
|
+
lg: "h-12 text-xs group-data-[collapsible=icon]:p-0!"
|
|
320
|
+
}
|
|
321
|
+
},
|
|
322
|
+
defaultVariants: {
|
|
323
|
+
variant: "default",
|
|
324
|
+
size: "default"
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
);
|
|
328
|
+
function SidebarMenuButton(_a) {
|
|
329
|
+
var _b = _a, {
|
|
330
|
+
render,
|
|
331
|
+
isActive = false,
|
|
332
|
+
variant = "default",
|
|
333
|
+
size = "default",
|
|
334
|
+
tooltip,
|
|
335
|
+
className
|
|
336
|
+
} = _b, props = __objRest(_b, [
|
|
337
|
+
"render",
|
|
338
|
+
"isActive",
|
|
339
|
+
"variant",
|
|
340
|
+
"size",
|
|
341
|
+
"tooltip",
|
|
342
|
+
"className"
|
|
343
|
+
]);
|
|
344
|
+
const { isMobile, state } = useSidebar();
|
|
345
|
+
const comp = (0, import_use_render.useRender)({
|
|
346
|
+
defaultTagName: "button",
|
|
347
|
+
props: (0, import_merge_props.mergeProps)(
|
|
348
|
+
{
|
|
349
|
+
className: (0, import_cn8.cn)(sidebarMenuButtonVariants({ variant, size }), className)
|
|
350
|
+
},
|
|
351
|
+
props
|
|
352
|
+
),
|
|
353
|
+
render: !tooltip ? render : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { render }),
|
|
354
|
+
state: {
|
|
355
|
+
slot: "sidebar-menu-button",
|
|
356
|
+
sidebar: "menu-button",
|
|
357
|
+
size,
|
|
358
|
+
active: isActive
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
if (!tooltip) {
|
|
362
|
+
return comp;
|
|
363
|
+
}
|
|
364
|
+
if (typeof tooltip === "string") {
|
|
365
|
+
tooltip = {
|
|
366
|
+
children: tooltip
|
|
367
|
+
};
|
|
368
|
+
}
|
|
369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
|
|
370
|
+
comp,
|
|
371
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
372
|
+
TooltipContent,
|
|
373
|
+
__spreadValues({
|
|
374
|
+
side: "right",
|
|
375
|
+
align: "center",
|
|
376
|
+
hidden: state !== "collapsed" || isMobile
|
|
377
|
+
}, tooltip)
|
|
378
|
+
)
|
|
379
|
+
] });
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
// src/components/composed/nav-user.tsx
|
|
383
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
384
|
+
var NavUser = (0, import_react2.memo)(function NavUser2({
|
|
385
|
+
name,
|
|
386
|
+
email,
|
|
387
|
+
image,
|
|
388
|
+
render
|
|
389
|
+
}) {
|
|
390
|
+
const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
|
|
391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarMenu, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarMenuItem, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SidebarMenuButton, { size: "lg", render, children: [
|
|
392
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Avatar, { children: [
|
|
393
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarImage, { src: image || "", alt: name || "" }),
|
|
394
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AvatarFallback, { children: initials })
|
|
395
|
+
] }),
|
|
396
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
397
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate font-medium", children: name }),
|
|
398
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate text-xs text-muted-foreground", children: email })
|
|
399
|
+
] })
|
|
400
|
+
] }) }) }) });
|
|
401
|
+
});
|
|
43
402
|
// Annotate the CommonJS export names for ESM import in node:
|
|
44
403
|
0 && (module.exports = {
|
|
45
|
-
HeaderTitle
|
|
404
|
+
HeaderTitle,
|
|
405
|
+
NavUser
|
|
46
406
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,36 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
+
var __spreadValues = (a, b) => {
|
|
10
|
+
for (var prop in b || (b = {}))
|
|
11
|
+
if (__hasOwnProp.call(b, prop))
|
|
12
|
+
__defNormalProp(a, prop, b[prop]);
|
|
13
|
+
if (__getOwnPropSymbols)
|
|
14
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
+
if (__propIsEnum.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
}
|
|
18
|
+
return a;
|
|
19
|
+
};
|
|
20
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
33
|
+
|
|
1
34
|
// src/components/composed/header-title.tsx
|
|
2
35
|
import { memo } from "react";
|
|
3
36
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -14,6 +47,325 @@ var HeaderTitle = memo(function HeaderTitle2({
|
|
|
14
47
|
children
|
|
15
48
|
] });
|
|
16
49
|
});
|
|
50
|
+
|
|
51
|
+
// src/components/composed/nav-user.tsx
|
|
52
|
+
import { memo as memo2 } from "react";
|
|
53
|
+
|
|
54
|
+
// src/components/ui/avatar.tsx
|
|
55
|
+
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
|
|
56
|
+
import { cn } from "cn";
|
|
57
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
58
|
+
function Avatar(_a) {
|
|
59
|
+
var _b = _a, {
|
|
60
|
+
className,
|
|
61
|
+
size = "default"
|
|
62
|
+
} = _b, props = __objRest(_b, [
|
|
63
|
+
"className",
|
|
64
|
+
"size"
|
|
65
|
+
]);
|
|
66
|
+
return /* @__PURE__ */ jsx2(
|
|
67
|
+
AvatarPrimitive.Root,
|
|
68
|
+
__spreadValues({
|
|
69
|
+
"data-slot": "avatar",
|
|
70
|
+
"data-size": size,
|
|
71
|
+
className: cn(
|
|
72
|
+
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
|
73
|
+
className
|
|
74
|
+
)
|
|
75
|
+
}, props)
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
function AvatarImage(_a) {
|
|
79
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
80
|
+
return /* @__PURE__ */ jsx2(
|
|
81
|
+
AvatarPrimitive.Image,
|
|
82
|
+
__spreadValues({
|
|
83
|
+
"data-slot": "avatar-image",
|
|
84
|
+
className: cn(
|
|
85
|
+
"aspect-square size-full rounded-full object-cover",
|
|
86
|
+
className
|
|
87
|
+
)
|
|
88
|
+
}, props)
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
function AvatarFallback(_a) {
|
|
92
|
+
var _b = _a, {
|
|
93
|
+
className
|
|
94
|
+
} = _b, props = __objRest(_b, [
|
|
95
|
+
"className"
|
|
96
|
+
]);
|
|
97
|
+
return /* @__PURE__ */ jsx2(
|
|
98
|
+
AvatarPrimitive.Fallback,
|
|
99
|
+
__spreadValues({
|
|
100
|
+
"data-slot": "avatar-fallback",
|
|
101
|
+
className: cn(
|
|
102
|
+
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
|
103
|
+
className
|
|
104
|
+
)
|
|
105
|
+
}, props)
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// src/components/ui/sidebar.tsx
|
|
110
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
111
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
112
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
113
|
+
import { cn as cn8 } from "cn";
|
|
114
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
115
|
+
import * as React2 from "react";
|
|
116
|
+
|
|
117
|
+
// src/components/ui/button.tsx
|
|
118
|
+
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
119
|
+
import { cva } from "class-variance-authority";
|
|
120
|
+
import { cn as cn2 } from "cn";
|
|
121
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
122
|
+
var buttonVariants = cva(
|
|
123
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
124
|
+
{
|
|
125
|
+
variants: {
|
|
126
|
+
variant: {
|
|
127
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
|
128
|
+
outline: "border-border hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30",
|
|
129
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
130
|
+
ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
131
|
+
destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
132
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
133
|
+
},
|
|
134
|
+
size: {
|
|
135
|
+
default: "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
136
|
+
xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
|
|
137
|
+
sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
138
|
+
lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
|
|
139
|
+
icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
|
|
140
|
+
"icon-xs": "size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5",
|
|
141
|
+
"icon-sm": "size-6 [&_svg:not([class*='size-'])]:size-3",
|
|
142
|
+
"icon-lg": "size-8 [&_svg:not([class*='size-'])]:size-4"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
defaultVariants: {
|
|
146
|
+
variant: "default",
|
|
147
|
+
size: "default"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
// src/components/ui/input.tsx
|
|
153
|
+
import { Input as InputPrimitive } from "@base-ui/react/input";
|
|
154
|
+
import { cn as cn3 } from "cn";
|
|
155
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
156
|
+
|
|
157
|
+
// src/components/ui/separator.tsx
|
|
158
|
+
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
159
|
+
import { cn as cn4 } from "cn";
|
|
160
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
161
|
+
|
|
162
|
+
// src/components/ui/sheet.tsx
|
|
163
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
164
|
+
import { cn as cn5 } from "cn";
|
|
165
|
+
import { XIcon } from "lucide-react";
|
|
166
|
+
import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
167
|
+
|
|
168
|
+
// src/components/ui/skeleton.tsx
|
|
169
|
+
import { cn as cn6 } from "cn";
|
|
170
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
171
|
+
|
|
172
|
+
// src/components/ui/tooltip.tsx
|
|
173
|
+
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
|
|
174
|
+
import { cn as cn7 } from "cn";
|
|
175
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
176
|
+
function Tooltip(_a) {
|
|
177
|
+
var props = __objRest(_a, []);
|
|
178
|
+
return /* @__PURE__ */ jsx8(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props));
|
|
179
|
+
}
|
|
180
|
+
function TooltipTrigger(_a) {
|
|
181
|
+
var props = __objRest(_a, []);
|
|
182
|
+
return /* @__PURE__ */ jsx8(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
|
|
183
|
+
}
|
|
184
|
+
function TooltipContent(_a) {
|
|
185
|
+
var _b = _a, {
|
|
186
|
+
className,
|
|
187
|
+
side = "top",
|
|
188
|
+
sideOffset = 4,
|
|
189
|
+
align = "center",
|
|
190
|
+
alignOffset = 0,
|
|
191
|
+
children
|
|
192
|
+
} = _b, props = __objRest(_b, [
|
|
193
|
+
"className",
|
|
194
|
+
"side",
|
|
195
|
+
"sideOffset",
|
|
196
|
+
"align",
|
|
197
|
+
"alignOffset",
|
|
198
|
+
"children"
|
|
199
|
+
]);
|
|
200
|
+
return /* @__PURE__ */ jsx8(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
|
|
201
|
+
TooltipPrimitive.Positioner,
|
|
202
|
+
{
|
|
203
|
+
align,
|
|
204
|
+
alignOffset,
|
|
205
|
+
side,
|
|
206
|
+
sideOffset,
|
|
207
|
+
className: "isolate z-50",
|
|
208
|
+
children: /* @__PURE__ */ jsxs3(
|
|
209
|
+
TooltipPrimitive.Popup,
|
|
210
|
+
__spreadProps(__spreadValues({
|
|
211
|
+
"data-slot": "tooltip-content",
|
|
212
|
+
className: cn7(
|
|
213
|
+
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
214
|
+
className
|
|
215
|
+
)
|
|
216
|
+
}, props), {
|
|
217
|
+
children: [
|
|
218
|
+
children,
|
|
219
|
+
/* @__PURE__ */ jsx8(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })
|
|
220
|
+
]
|
|
221
|
+
})
|
|
222
|
+
)
|
|
223
|
+
}
|
|
224
|
+
) });
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// src/hooks/use-mobile.ts
|
|
228
|
+
import * as React from "react";
|
|
229
|
+
|
|
230
|
+
// src/components/ui/sidebar.tsx
|
|
231
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
232
|
+
var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
233
|
+
var SidebarContext = React2.createContext(null);
|
|
234
|
+
function useSidebar() {
|
|
235
|
+
const context = React2.useContext(SidebarContext);
|
|
236
|
+
if (!context) {
|
|
237
|
+
throw new Error("useSidebar must be used within a SidebarProvider.");
|
|
238
|
+
}
|
|
239
|
+
return context;
|
|
240
|
+
}
|
|
241
|
+
function SidebarFooter(_a) {
|
|
242
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
243
|
+
return /* @__PURE__ */ jsx9(
|
|
244
|
+
"div",
|
|
245
|
+
__spreadValues({
|
|
246
|
+
"data-slot": "sidebar-footer",
|
|
247
|
+
"data-sidebar": "footer",
|
|
248
|
+
className: cn8("flex flex-col gap-2 p-2", className)
|
|
249
|
+
}, props)
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
function SidebarMenu(_a) {
|
|
253
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
254
|
+
return /* @__PURE__ */ jsx9(
|
|
255
|
+
"ul",
|
|
256
|
+
__spreadValues({
|
|
257
|
+
"data-slot": "sidebar-menu",
|
|
258
|
+
"data-sidebar": "menu",
|
|
259
|
+
className: cn8("flex w-full min-w-0 flex-col gap-px", className)
|
|
260
|
+
}, props)
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
function SidebarMenuItem(_a) {
|
|
264
|
+
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
265
|
+
return /* @__PURE__ */ jsx9(
|
|
266
|
+
"li",
|
|
267
|
+
__spreadValues({
|
|
268
|
+
"data-slot": "sidebar-menu-item",
|
|
269
|
+
"data-sidebar": "menu-item",
|
|
270
|
+
className: cn8("group/menu-item relative", className)
|
|
271
|
+
}, props)
|
|
272
|
+
);
|
|
273
|
+
}
|
|
274
|
+
var sidebarMenuButtonVariants = cva2(
|
|
275
|
+
"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
|
|
276
|
+
{
|
|
277
|
+
variants: {
|
|
278
|
+
variant: {
|
|
279
|
+
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
280
|
+
outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
|
|
281
|
+
},
|
|
282
|
+
size: {
|
|
283
|
+
default: "h-8 text-xs",
|
|
284
|
+
sm: "h-7 text-xs",
|
|
285
|
+
lg: "h-12 text-xs group-data-[collapsible=icon]:p-0!"
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
defaultVariants: {
|
|
289
|
+
variant: "default",
|
|
290
|
+
size: "default"
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
);
|
|
294
|
+
function SidebarMenuButton(_a) {
|
|
295
|
+
var _b = _a, {
|
|
296
|
+
render,
|
|
297
|
+
isActive = false,
|
|
298
|
+
variant = "default",
|
|
299
|
+
size = "default",
|
|
300
|
+
tooltip,
|
|
301
|
+
className
|
|
302
|
+
} = _b, props = __objRest(_b, [
|
|
303
|
+
"render",
|
|
304
|
+
"isActive",
|
|
305
|
+
"variant",
|
|
306
|
+
"size",
|
|
307
|
+
"tooltip",
|
|
308
|
+
"className"
|
|
309
|
+
]);
|
|
310
|
+
const { isMobile, state } = useSidebar();
|
|
311
|
+
const comp = useRender({
|
|
312
|
+
defaultTagName: "button",
|
|
313
|
+
props: mergeProps(
|
|
314
|
+
{
|
|
315
|
+
className: cn8(sidebarMenuButtonVariants({ variant, size }), className)
|
|
316
|
+
},
|
|
317
|
+
props
|
|
318
|
+
),
|
|
319
|
+
render: !tooltip ? render : /* @__PURE__ */ jsx9(TooltipTrigger, { render }),
|
|
320
|
+
state: {
|
|
321
|
+
slot: "sidebar-menu-button",
|
|
322
|
+
sidebar: "menu-button",
|
|
323
|
+
size,
|
|
324
|
+
active: isActive
|
|
325
|
+
}
|
|
326
|
+
});
|
|
327
|
+
if (!tooltip) {
|
|
328
|
+
return comp;
|
|
329
|
+
}
|
|
330
|
+
if (typeof tooltip === "string") {
|
|
331
|
+
tooltip = {
|
|
332
|
+
children: tooltip
|
|
333
|
+
};
|
|
334
|
+
}
|
|
335
|
+
return /* @__PURE__ */ jsxs4(Tooltip, { children: [
|
|
336
|
+
comp,
|
|
337
|
+
/* @__PURE__ */ jsx9(
|
|
338
|
+
TooltipContent,
|
|
339
|
+
__spreadValues({
|
|
340
|
+
side: "right",
|
|
341
|
+
align: "center",
|
|
342
|
+
hidden: state !== "collapsed" || isMobile
|
|
343
|
+
}, tooltip)
|
|
344
|
+
)
|
|
345
|
+
] });
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
// src/components/composed/nav-user.tsx
|
|
349
|
+
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
350
|
+
var NavUser = memo2(function NavUser2({
|
|
351
|
+
name,
|
|
352
|
+
email,
|
|
353
|
+
image,
|
|
354
|
+
render
|
|
355
|
+
}) {
|
|
356
|
+
const initials = name ? name.trim().split(" ").map((n) => n[0]).join("").substring(0, 2).toUpperCase() : "U";
|
|
357
|
+
return /* @__PURE__ */ jsx10(SidebarFooter, { children: /* @__PURE__ */ jsx10(SidebarMenu, { children: /* @__PURE__ */ jsx10(SidebarMenuItem, { children: /* @__PURE__ */ jsxs5(SidebarMenuButton, { size: "lg", render, children: [
|
|
358
|
+
/* @__PURE__ */ jsxs5(Avatar, { children: [
|
|
359
|
+
/* @__PURE__ */ jsx10(AvatarImage, { src: image || "", alt: name || "" }),
|
|
360
|
+
/* @__PURE__ */ jsx10(AvatarFallback, { children: initials })
|
|
361
|
+
] }),
|
|
362
|
+
/* @__PURE__ */ jsxs5("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
|
|
363
|
+
/* @__PURE__ */ jsx10("span", { className: "truncate font-medium", children: name }),
|
|
364
|
+
/* @__PURE__ */ jsx10("span", { className: "truncate text-xs text-muted-foreground", children: email })
|
|
365
|
+
] })
|
|
366
|
+
] }) }) }) });
|
|
367
|
+
});
|
|
17
368
|
export {
|
|
18
|
-
HeaderTitle
|
|
369
|
+
HeaderTitle,
|
|
370
|
+
NavUser
|
|
19
371
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prediktif/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"scripts": {
|
|
76
76
|
"dev": "next dev",
|
|
77
77
|
"build": "next build",
|
|
78
|
-
"build:lib": "tsup
|
|
78
|
+
"build:lib": "tsup",
|
|
79
79
|
"start": "next start",
|
|
80
80
|
"lint": "biome check",
|
|
81
81
|
"format": "biome format --write"
|