@authdog/react-elements 0.0.16 → 0.0.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/.turbo/turbo-build.log +35 -35
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +3 -0
- package/package.json +1 -1
- package/src/components/core/navbar.tsx +27 -20
- package/src/components/core/placeholder-alert.tsx +25 -0
- package/src/components/icons.tsx +22 -0
- package/src/stories/Navbar.stories.tsx +7 -1
- package/src/stories/PlaceholderAlert.stories.tsx +13 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @authdog/react-elements@0.0.
|
|
2
|
+
> @authdog/react-elements@0.0.18 build /home/runner/work/web-sdk/web-sdk/packages/react-elements
|
|
3
3
|
> pnpm tsup && pnpm build:styles
|
|
4
4
|
|
|
5
5
|
[34mCLI[39m Building entry: src/index.ts, src/lib/utils.ts, src/components/ui/alert.tsx, src/components/ui/avatar.tsx, src/components/ui/badge.tsx, src/components/ui/button.tsx, src/components/ui/card.tsx, src/components/ui/dropdown-menu.tsx, src/components/ui/input.tsx, src/components/ui/label.tsx, src/components/ui/separator.tsx, src/components/ui/sheet.tsx
|
|
@@ -10,61 +10,61 @@
|
|
|
10
10
|
[34mCLI[39m Cleaning output folder
|
|
11
11
|
[34mESM[39m Build start
|
|
12
12
|
[34mCJS[39m Build start
|
|
13
|
-
[
|
|
14
|
-
[32mESM[39m [1mdist/lib/utils.mjs [22m[32m166.00 B[39m
|
|
15
|
-
[32mESM[39m [1mdist/components/ui/alert.mjs [22m[32m1.19 KB[39m
|
|
16
|
-
[32mESM[39m [1mdist/components/ui/avatar.mjs [22m[32m749.00 B[39m
|
|
17
|
-
[32mESM[39m [1mdist/components/ui/badge.mjs [22m[32m1.34 KB[39m
|
|
18
|
-
[32mESM[39m [1mdist/components/ui/button.mjs [22m[32m1.36 KB[39m
|
|
19
|
-
[32mESM[39m [1mdist/components/ui/card.mjs [22m[32m1.35 KB[39m
|
|
20
|
-
[32mESM[39m [1mdist/components/ui/dropdown-menu.mjs [22m[32m5.37 KB[39m
|
|
21
|
-
[32mESM[39m [1mdist/components/ui/sheet.mjs [22m[32m2.68 KB[39m
|
|
22
|
-
[32mESM[39m [1mdist/components/ui/input.mjs [22m[32m949.00 B[39m
|
|
23
|
-
[32mESM[39m [1mdist/index.mjs.map [22m[32m45.38 KB[39m
|
|
24
|
-
[32mESM[39m [1mdist/lib/utils.mjs.map [22m[32m415.00 B[39m
|
|
25
|
-
[32mESM[39m [1mdist/components/ui/label.mjs [22m[32m566.00 B[39m
|
|
26
|
-
[32mESM[39m [1mdist/components/ui/separator.mjs [22m[32m604.00 B[39m
|
|
27
|
-
[32mESM[39m [1mdist/components/ui/alert.mjs.map [22m[32m2.82 KB[39m
|
|
28
|
-
[32mESM[39m [1mdist/components/ui/avatar.mjs.map [22m[32m2.13 KB[39m
|
|
29
|
-
[32mESM[39m [1mdist/components/ui/badge.mjs.map [22m[32m2.63 KB[39m
|
|
30
|
-
[32mESM[39m [1mdist/components/ui/button.mjs.map [22m[32m3.01 KB[39m
|
|
31
|
-
[32mESM[39m [1mdist/components/ui/card.mjs.map [22m[32m3.54 KB[39m
|
|
32
|
-
[32mESM[39m [1mdist/components/ui/dropdown-menu.mjs.map [22m[32m12.05 KB[39m
|
|
33
|
-
[32mESM[39m [1mdist/components/ui/sheet.mjs.map [22m[32m6.49 KB[39m
|
|
34
|
-
[32mESM[39m [1mdist/components/ui/input.mjs.map [22m[32m1.67 KB[39m
|
|
35
|
-
[32mESM[39m [1mdist/components/ui/label.mjs.map [22m[32m1.32 KB[39m
|
|
36
|
-
[32mESM[39m [1mdist/components/ui/separator.mjs.map [22m[32m1.51 KB[39m
|
|
37
|
-
[32mESM[39m ⚡️ Build success in 258ms
|
|
38
|
-
[32mCJS[39m [1mdist/index.js [22m[32m17.38 KB[39m
|
|
13
|
+
[32mCJS[39m [1mdist/index.js [22m[32m17.59 KB[39m
|
|
39
14
|
[32mCJS[39m [1mdist/lib/utils.js [22m[32m620.00 B[39m
|
|
40
15
|
[32mCJS[39m [1mdist/components/ui/alert.js [22m[32m1.65 KB[39m
|
|
41
16
|
[32mCJS[39m [1mdist/components/ui/avatar.js [22m[32m1.34 KB[39m
|
|
42
17
|
[32mCJS[39m [1mdist/components/ui/badge.js [22m[32m1.78 KB[39m
|
|
18
|
+
[32mCJS[39m [1mdist/components/ui/button.js [22m[32m1.94 KB[39m
|
|
43
19
|
[32mCJS[39m [1mdist/components/ui/card.js [22m[32m1.85 KB[39m
|
|
44
20
|
[32mCJS[39m [1mdist/components/ui/dropdown-menu.js [22m[32m6.10 KB[39m
|
|
45
21
|
[32mCJS[39m [1mdist/components/ui/input.js [22m[32m1.37 KB[39m
|
|
46
22
|
[32mCJS[39m [1mdist/components/ui/label.js [22m[32m1.14 KB[39m
|
|
47
23
|
[32mCJS[39m [1mdist/components/ui/separator.js [22m[32m1.18 KB[39m
|
|
48
24
|
[32mCJS[39m [1mdist/components/ui/sheet.js [22m[32m3.36 KB[39m
|
|
49
|
-
[32mCJS[39m [1mdist/
|
|
50
|
-
[32mCJS[39m [1mdist/index.js.map [22m[32m45.01 KB[39m
|
|
25
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m46.06 KB[39m
|
|
51
26
|
[32mCJS[39m [1mdist/lib/utils.js.map [22m[32m520.00 B[39m
|
|
52
27
|
[32mCJS[39m [1mdist/components/ui/alert.js.map [22m[32m3.01 KB[39m
|
|
53
28
|
[32mCJS[39m [1mdist/components/ui/avatar.js.map [22m[32m2.31 KB[39m
|
|
54
29
|
[32mCJS[39m [1mdist/components/ui/badge.js.map [22m[32m2.79 KB[39m
|
|
30
|
+
[32mCJS[39m [1mdist/components/ui/button.js.map [22m[32m3.17 KB[39m
|
|
55
31
|
[32mCJS[39m [1mdist/components/ui/card.js.map [22m[32m3.81 KB[39m
|
|
56
32
|
[32mCJS[39m [1mdist/components/ui/dropdown-menu.js.map [22m[32m12.51 KB[39m
|
|
57
33
|
[32mCJS[39m [1mdist/components/ui/input.js.map [22m[32m1.79 KB[39m
|
|
58
34
|
[32mCJS[39m [1mdist/components/ui/label.js.map [22m[32m1.45 KB[39m
|
|
59
35
|
[32mCJS[39m [1mdist/components/ui/separator.js.map [22m[32m1.64 KB[39m
|
|
60
36
|
[32mCJS[39m [1mdist/components/ui/sheet.js.map [22m[32m6.75 KB[39m
|
|
61
|
-
[32mCJS[39m
|
|
62
|
-
[
|
|
37
|
+
[32mCJS[39m ⚡️ Build success in 206ms
|
|
38
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m15.96 KB[39m
|
|
39
|
+
[32mESM[39m [1mdist/components/ui/alert.mjs [22m[32m1.19 KB[39m
|
|
40
|
+
[32mESM[39m [1mdist/lib/utils.mjs [22m[32m166.00 B[39m
|
|
41
|
+
[32mESM[39m [1mdist/components/ui/avatar.mjs [22m[32m749.00 B[39m
|
|
42
|
+
[32mESM[39m [1mdist/components/ui/button.mjs [22m[32m1.36 KB[39m
|
|
43
|
+
[32mESM[39m [1mdist/components/ui/badge.mjs [22m[32m1.34 KB[39m
|
|
44
|
+
[32mESM[39m [1mdist/components/ui/card.mjs [22m[32m1.35 KB[39m
|
|
45
|
+
[32mESM[39m [1mdist/components/ui/dropdown-menu.mjs [22m[32m5.37 KB[39m
|
|
46
|
+
[32mESM[39m [1mdist/components/ui/input.mjs [22m[32m949.00 B[39m
|
|
47
|
+
[32mESM[39m [1mdist/components/ui/label.mjs [22m[32m566.00 B[39m
|
|
48
|
+
[32mESM[39m [1mdist/components/ui/separator.mjs [22m[32m604.00 B[39m
|
|
49
|
+
[32mESM[39m [1mdist/components/ui/sheet.mjs [22m[32m2.68 KB[39m
|
|
50
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m46.41 KB[39m
|
|
51
|
+
[32mESM[39m [1mdist/components/ui/alert.mjs.map [22m[32m2.82 KB[39m
|
|
52
|
+
[32mESM[39m [1mdist/lib/utils.mjs.map [22m[32m415.00 B[39m
|
|
53
|
+
[32mESM[39m [1mdist/components/ui/avatar.mjs.map [22m[32m2.13 KB[39m
|
|
54
|
+
[32mESM[39m [1mdist/components/ui/button.mjs.map [22m[32m3.01 KB[39m
|
|
55
|
+
[32mESM[39m [1mdist/components/ui/badge.mjs.map [22m[32m2.63 KB[39m
|
|
56
|
+
[32mESM[39m [1mdist/components/ui/card.mjs.map [22m[32m3.54 KB[39m
|
|
57
|
+
[32mESM[39m [1mdist/components/ui/dropdown-menu.mjs.map [22m[32m12.05 KB[39m
|
|
58
|
+
[32mESM[39m [1mdist/components/ui/input.mjs.map [22m[32m1.67 KB[39m
|
|
59
|
+
[32mESM[39m [1mdist/components/ui/label.mjs.map [22m[32m1.32 KB[39m
|
|
60
|
+
[32mESM[39m [1mdist/components/ui/separator.mjs.map [22m[32m1.51 KB[39m
|
|
61
|
+
[32mESM[39m [1mdist/components/ui/sheet.mjs.map [22m[32m6.49 KB[39m
|
|
62
|
+
[32mESM[39m ⚡️ Build success in 208ms
|
|
63
63
|
[34mDTS[39m Build start
|
|
64
|
-
[32mDTS[39m ⚡️ Build success in
|
|
65
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.
|
|
66
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.
|
|
64
|
+
[32mDTS[39m ⚡️ Build success in 10831ms
|
|
65
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.82 KB[39m
|
|
66
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.82 KB[39m
|
|
67
67
|
|
|
68
|
-
> @authdog/react-elements@0.0.
|
|
68
|
+
> @authdog/react-elements@0.0.18 build:styles /home/runner/work/web-sdk/web-sdk/packages/react-elements
|
|
69
69
|
> postcss src/global.css -o dist/styles.css
|
|
70
70
|
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @authdog/react-elements
|
|
2
2
|
|
|
3
|
+
## 0.0.18
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 7fae1dc: define placeholder alert component
|
|
8
|
+
|
|
9
|
+
## 0.0.17
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- 9ec3af6: adding basic navigation home onto navbar
|
|
14
|
+
|
|
3
15
|
## 0.0.16
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/index.d.mts
CHANGED
|
@@ -28,11 +28,12 @@ interface NavbarProps {
|
|
|
28
28
|
email?: string;
|
|
29
29
|
image?: string;
|
|
30
30
|
};
|
|
31
|
+
onNavigateHome?: () => void;
|
|
31
32
|
onNavItemClick?: (href: string) => void;
|
|
32
33
|
onProfileSelected?: () => void;
|
|
33
34
|
onLogout?: () => void;
|
|
34
35
|
}
|
|
35
|
-
declare function Navbar({ items, children, className, logoText, user, onNavItemClick, onProfileSelected, onLogout, }: NavbarProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
declare function Navbar({ items, children, className, logoText, user, onNavigateHome, onNavItemClick, onProfileSelected, onLogout, }: NavbarProps): react_jsx_runtime.JSX.Element;
|
|
36
37
|
|
|
37
38
|
interface UserProfileProps {
|
|
38
39
|
user: {
|
package/dist/index.d.ts
CHANGED
|
@@ -28,11 +28,12 @@ interface NavbarProps {
|
|
|
28
28
|
email?: string;
|
|
29
29
|
image?: string;
|
|
30
30
|
};
|
|
31
|
+
onNavigateHome?: () => void;
|
|
31
32
|
onNavItemClick?: (href: string) => void;
|
|
32
33
|
onProfileSelected?: () => void;
|
|
33
34
|
onLogout?: () => void;
|
|
34
35
|
}
|
|
35
|
-
declare function Navbar({ items, children, className, logoText, user, onNavItemClick, onProfileSelected, onLogout, }: NavbarProps): react_jsx_runtime.JSX.Element;
|
|
36
|
+
declare function Navbar({ items, children, className, logoText, user, onNavigateHome, onNavItemClick, onProfileSelected, onLogout, }: NavbarProps): react_jsx_runtime.JSX.Element;
|
|
36
37
|
|
|
37
38
|
interface UserProfileProps {
|
|
38
39
|
user: {
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";var ie=Object.create;var C=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(t,o)=>{for(var r in o)C(t,r,{get:o[r],enumerable:!0})},L=(t,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of de(o))!le.call(t,s)&&s!==r&&C(t,s,{get:()=>o[s],enumerable:!(m=se(o,s))||m.enumerable});return t};var M=(t,o,r)=>(r=t!=null?ie(me(t)):{},L(o||!t||!t.__esModule?C(r,"default",{value:t,enumerable:!0}):r,t)),pe=t=>L(C({},"__esModule",{value:!0}),t);var be={};ce(be,{Button:()=>l,Navbar:()=>Y,UserProfile:()=>ae});module.exports=pe(be);var F=M(require("react")),_=require("@radix-ui/react-slot"),O=require("class-variance-authority");var j=require("clsx"),E=require("tailwind-merge");function i(...t){return(0,E.twMerge)((0,j.clsx)(t))}var H=require("react/jsx-runtime"),ue=(0,O.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=F.forwardRef(({className:t,variant:o,size:r,asChild:m=!1,...s},h)=>(0,H.jsx)(m?_.Slot:"button",{className:i(ue({variant:o,size:r,className:t})),ref:h,...s}));l.displayName="Button";var w=require("react"),b=require("lucide-react");var x=M(require("@radix-ui/react-avatar"));var k=require("react/jsx-runtime");function S({className:t,...o}){return(0,k.jsx)(x.Root,{"data-slot":"avatar",className:i("relative flex size-8 shrink-0 overflow-hidden rounded-full",t),...o})}function D({className:t,...o}){return(0,k.jsx)(x.Image,{"data-slot":"avatar-image",className:i("aspect-square size-full",t),...o})}function R({className:t,...o}){return(0,k.jsx)(x.Fallback,{"data-slot":"avatar-fallback",className:i("bg-muted flex size-full items-center justify-center rounded-full",t),...o})}var n=M(require("@radix-ui/react-dropdown-menu")),B=require("lucide-react");var v=require("react/jsx-runtime");function U({...t}){return(0,v.jsx)(n.Root,{"data-slot":"dropdown-menu",...t})}function X({...t}){return(0,v.jsx)(n.Trigger,{"data-slot":"dropdown-menu-trigger",...t})}function $({className:t,sideOffset:o=4,...r}){return(0,v.jsx)(n.Portal,{children:(0,v.jsx)(n.Content,{"data-slot":"dropdown-menu-content",sideOffset:o,className:i("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",t),...r})})}function q({...t}){return(0,v.jsx)(n.Group,{"data-slot":"dropdown-menu-group",...t})}function I({className:t,inset:o,variant:r="default",...m}){return(0,v.jsx)(n.Item,{"data-slot":"dropdown-menu-item","data-inset":o,"data-variant":r,className:i("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",t),...m})}function J({className:t,inset:o,...r}){return(0,v.jsx)(n.Label,{"data-slot":"dropdown-menu-label","data-inset":o,className:i("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",t),...r})}function V({className:t,...o}){return(0,v.jsx)(n.Separator,{"data-slot":"dropdown-menu-separator",className:i("bg-border -mx-1 my-1 h-px",t),...o})}var c=M(require("@radix-ui/react-dialog")),W=require("lucide-react");var p=require("react/jsx-runtime"),fe=W.X;function Z({...t}){return(0,p.jsx)(c.Root,{"data-slot":"sheet",...t})}function K({...t}){return(0,p.jsx)(c.Trigger,{"data-slot":"sheet-trigger",...t})}function ve({...t}){return(0,p.jsx)(c.Portal,{"data-slot":"sheet-portal",...t})}function ge({className:t,...o}){return(0,p.jsx)(c.Overlay,{"data-slot":"sheet-overlay",className:i("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",t),...o})}function Q({className:t,children:o,side:r="right",...m}){return(0,p.jsxs)(ve,{children:[(0,p.jsx)(ge,{}),(0,p.jsxs)(c.Content,{"data-slot":"sheet-content",className:i("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",r==="right"&&"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",r==="left"&&"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",r==="top"&&"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",r==="bottom"&&"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",t),...m,children:[o,(0,p.jsxs)(c.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[(0,p.jsx)(fe,{className:"size-4"}),(0,p.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}var a=require("react/jsx-runtime");function Y({items:t=[{title:"Dashboard",href:"/dashboard"},{title:"Projects",href:"/projects"},{title:"Team",href:"/team"},{title:"Reports",href:"/reports"}],children:o,className:r,logoText:m="Company",user:s={name:"John Doe",email:"john@example.com",image:"https://i.pravatar.cc/150?u=a042581f4e29026704d"},onNavItemClick:h=u=>console.log(`Navigating to ${u}`),onProfileSelected:y,onLogout:z=()=>console.log("Logout clicked")}){let[u,d]=(0,w.useState)(!1),[A,re]=(0,w.useState)(!1);(0,w.useEffect)(()=>{re(!0)},[]);let ne={className:"mr-2 h-4 w-4","aria-hidden":"true"},N=f=>A?(0,a.jsx)(f,{...ne}):null;return(0,a.jsx)("header",{className:i("border-b bg-background",r),children:(0,a.jsxs)("div",{className:"container flex h-16 items-center justify-between px-4 md:px-6",children:[(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[(0,a.jsx)("span",{className:"text-xl font-bold",children:m}),(0,a.jsx)("nav",{className:"hidden md:flex gap-6",children:t?.map((f,T)=>(0,a.jsx)("span",{onClick:()=>{f.disabled||h(f.href)},className:i("text-sm font-medium transition-colors hover:text-primary cursor-pointer",f.disabled&&"cursor-not-allowed opacity-80"),children:f.title},T))})]}),(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[o,(0,a.jsxs)(U,{children:[(0,a.jsx)(X,{asChild:!0,children:(0,a.jsx)(l,{variant:"ghost",className:"relative h-8 w-8 rounded-full",children:(0,a.jsxs)(S,{className:"h-8 w-8",children:[(0,a.jsx)(D,{src:s.image||"/placeholder.svg",alt:s.name}),(0,a.jsx)(R,{children:s.name?.charAt(0)})]})})}),(0,a.jsxs)($,{className:"w-56",align:"end",forceMount:!0,children:[(0,a.jsx)(J,{className:"font-normal",children:(0,a.jsxs)("div",{className:"flex flex-col space-y-1",children:[(0,a.jsx)("p",{className:"text-sm font-medium leading-none",children:s.name}),(0,a.jsx)("p",{className:"text-xs leading-none text-muted-foreground",children:s.email})]})}),(0,a.jsx)(V,{}),(0,a.jsxs)(q,{children:[(0,a.jsxs)(I,{onClick:y,children:[N(b.User),(0,a.jsx)("span",{children:"Profile"})]}),(0,a.jsxs)(I,{children:[N(b.Settings),(0,a.jsx)("span",{children:"Settings"})]})]}),(0,a.jsx)(V,{}),(0,a.jsxs)(I,{onClick:z,children:[N(b.LogOut),(0,a.jsx)("span",{children:"Log out"})]})]})]}),(0,a.jsxs)(Z,{open:u,onOpenChange:d,children:[(0,a.jsx)(K,{asChild:!0,children:(0,a.jsx)(l,{variant:"ghost",size:"icon",className:"md:hidden","aria-label":"Open Menu",children:N(b.Menu)})}),(0,a.jsx)(Q,{side:"left",className:"pr-0",children:(0,a.jsx)("nav",{className:"grid gap-2 py-6",children:t?.map((f,T)=>(0,a.jsx)("a",{href:f.href,className:i("flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",f.disabled&&"cursor-not-allowed opacity-80"),onClick:()=>d(!1),children:f.title},T))})})]})]})]})})}var P=require("react");var ee=require("@radix-ui/react-slot"),te=require("class-variance-authority");var oe=require("react/jsx-runtime"),he=(0,te.cva)("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function G({className:t,variant:o,asChild:r=!1,...m}){return(0,oe.jsx)(r?ee.Slot:"span",{"data-slot":"badge",className:i(he({variant:o}),t),...m})}var g=require("lucide-react"),e=require("react/jsx-runtime"),ae=({user:t,emails:o=[],connectedAccounts:r=[]})=>{let[m,s]=(0,P.useState)(!1),[h,y]=(0,P.useState)("profile");(0,P.useEffect)(()=>{s(!0)},[]);let z={className:"mr-2 h-4 w-4","aria-hidden":"true"},u=d=>m?(0,e.jsx)(d,{...z}):null;return(0,e.jsxs)("div",{className:"grid grid-cols-[16rem,1fr] h-screen bg-gray-100",children:[(0,e.jsxs)("div",{className:"h-full border-r p-6 bg-white flex flex-col min-w-0",children:[(0,e.jsxs)("div",{className:"mb-6",children:[(0,e.jsx)("h1",{className:"text-xl font-bold",children:"Account"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Manage your account info."})]}),(0,e.jsxs)("nav",{className:"space-y-1 flex-1",children:[(0,e.jsxs)("button",{onClick:()=>y("profile"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${h==="profile"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[u(g.User),"Profile"]}),(0,e.jsxs)("button",{onClick:()=>y("security"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${h==="security"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[u(g.Shield),"Security"]})]})]}),(0,e.jsxs)("div",{className:"h-full p-10 overflow-y-auto min-w-0 bg-white",children:[(0,e.jsxs)("div",{className:"flex justify-between items-center mb-6",children:[(0,e.jsx)("h2",{className:"text-xl font-semibold",children:h==="profile"?"Profile details":"Security settings"}),(0,e.jsx)("button",{className:"text-gray-500 hover:text-gray-700",children:u(g.X)})]}),h==="profile"?(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Profile"}),(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsxs)(S,{className:"h-12 w-12 mr-4 border",children:[(0,e.jsx)(D,{src:t.image,alt:"Profile picture"}),(0,e.jsx)(R,{children:t.name.split(" ").map(d=>d[0]).join("")})]}),(0,e.jsx)("span",{className:"font-medium",children:t.name})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Edit profile"})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Email addresses"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(o.length>0?o:[{address:t.email,isPrimary:!0}]).map((d,A)=>(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)("span",{children:d.address}),d.isPrimary&&(0,e.jsx)(G,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]},d.address)),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[u(g.PlusCircle),"Add email address"]})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Phone number"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)("span",{children:"+1 (555) 123-4567"}),(0,e.jsx)(G,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]}),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[u(g.PlusCircle),"Add phone number"]})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Connected accounts"}),(0,e.jsxs)("div",{className:"space-y-3",children:[r.length>0?r.map((d,A)=>(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsx)("div",{className:"mr-2",children:(0,e.jsx)("span",{children:d.provider})}),(0,e.jsx)("span",{children:d.provider})]}),(0,e.jsx)("span",{className:"text-sm text-gray-500",children:d.email})]},d.provider+d.email)):(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsx)("div",{className:"mr-2",children:(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"20",height:"20",children:[(0,e.jsx)("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}),(0,e.jsx)("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),(0,e.jsx)("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),(0,e.jsx)("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]})}),(0,e.jsx)("span",{children:"Google"})]}),(0,e.jsx)("span",{className:"text-sm text-gray-500",children:t.email})]}),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[u(g.PlusCircle),"Connect account"]})]})]})]}):(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Two-factor authentication"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Two-factor authentication"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Add an extra layer of security to your account"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Enable"})]})})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Password"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Change password"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Last changed 3 months ago"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Change"})]})})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Active sessions"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Current session"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Chrome on Windows \u2022 Active now"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Sign out"})]})})]})]})]}),(0,e.jsxs)("div",{className:"absolute bottom-4 text-xs text-gray-500 flex items-center",children:["Secured by",(0,e.jsxs)("span",{className:"ml-1 font-medium flex items-center",children:[(0,e.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"mr-1",children:(0,e.jsx)("path",{d:"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z",fill:"#6C47FF"})}),"Authdog"]})]})]})};
|
|
2
|
+
"use strict";var re=Object.create;var C=Object.defineProperty;var ie=Object.getOwnPropertyDescriptor;var se=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var le=(t,a)=>{for(var n in a)C(t,n,{get:a[n],enumerable:!0})},L=(t,a,n,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let d of se(a))!me.call(t,d)&&d!==n&&C(t,d,{get:()=>a[d],enumerable:!(m=ie(a,d))||m.enumerable});return t};var M=(t,a,n)=>(n=t!=null?re(de(t)):{},L(a||!t||!t.__esModule?C(n,"default",{value:t,enumerable:!0}):n,t)),ce=t=>L(C({},"__esModule",{value:!0}),t);var xe={};le(xe,{Button:()=>l,Navbar:()=>ee,UserProfile:()=>ne});module.exports=ce(xe);var E=M(require("react")),_=require("@radix-ui/react-slot"),H=require("class-variance-authority");var F=require("clsx"),j=require("tailwind-merge");function i(...t){return(0,j.twMerge)((0,F.clsx)(t))}var O=require("react/jsx-runtime"),pe=(0,H.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=E.forwardRef(({className:t,variant:a,size:n,asChild:m=!1,...d},v)=>(0,O.jsx)(m?_.Slot:"button",{className:i(pe({variant:a,size:n,className:t})),ref:v,...d}));l.displayName="Button";var Y=require("react"),b=require("lucide-react");var x=M(require("@radix-ui/react-avatar"));var k=require("react/jsx-runtime");function S({className:t,...a}){return(0,k.jsx)(x.Root,{"data-slot":"avatar",className:i("relative flex size-8 shrink-0 overflow-hidden rounded-full",t),...a})}function D({className:t,...a}){return(0,k.jsx)(x.Image,{"data-slot":"avatar-image",className:i("aspect-square size-full",t),...a})}function R({className:t,...a}){return(0,k.jsx)(x.Fallback,{"data-slot":"avatar-fallback",className:i("bg-muted flex size-full items-center justify-center rounded-full",t),...a})}var r=M(require("@radix-ui/react-dropdown-menu")),T=require("lucide-react");var u=require("react/jsx-runtime");function U({...t}){return(0,u.jsx)(r.Root,{"data-slot":"dropdown-menu",...t})}function W({...t}){return(0,u.jsx)(r.Trigger,{"data-slot":"dropdown-menu-trigger",...t})}function X({className:t,sideOffset:a=4,...n}){return(0,u.jsx)(r.Portal,{children:(0,u.jsx)(r.Content,{"data-slot":"dropdown-menu-content",sideOffset:a,className:i("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",t),...n})})}function $({...t}){return(0,u.jsx)(r.Group,{"data-slot":"dropdown-menu-group",...t})}function I({className:t,inset:a,variant:n="default",...m}){return(0,u.jsx)(r.Item,{"data-slot":"dropdown-menu-item","data-inset":a,"data-variant":n,className:i("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",t),...m})}function q({className:t,inset:a,...n}){return(0,u.jsx)(r.Label,{"data-slot":"dropdown-menu-label","data-inset":a,className:i("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",t),...n})}function B({className:t,...a}){return(0,u.jsx)(r.Separator,{"data-slot":"dropdown-menu-separator",className:i("bg-border -mx-1 my-1 h-px",t),...a})}var c=M(require("@radix-ui/react-dialog")),J=require("lucide-react");var p=require("react/jsx-runtime"),ue=J.X;function Z({...t}){return(0,p.jsx)(c.Root,{"data-slot":"sheet",...t})}function K({...t}){return(0,p.jsx)(c.Trigger,{"data-slot":"sheet-trigger",...t})}function fe({...t}){return(0,p.jsx)(c.Portal,{"data-slot":"sheet-portal",...t})}function ve({className:t,...a}){return(0,p.jsx)(c.Overlay,{"data-slot":"sheet-overlay",className:i("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",t),...a})}function Q({className:t,children:a,side:n="right",...m}){return(0,p.jsxs)(fe,{children:[(0,p.jsx)(ve,{}),(0,p.jsxs)(c.Content,{"data-slot":"sheet-content",className:i("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",n==="right"&&"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",n==="left"&&"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",n==="top"&&"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",n==="bottom"&&"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",t),...m,children:[a,(0,p.jsxs)(c.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[(0,p.jsx)(ue,{className:"size-4"}),(0,p.jsx)("span",{className:"sr-only",children:"Close"})]})]})]})}var V=require("react/jsx-runtime"),ge={className:"mr-2 h-4 w-4","aria-hidden":"true"},he=t=>(0,V.jsx)(t,{...ge}),w=({Icon:t})=>(0,V.jsx)("span",{className:"inline-flex items-center justify-center",children:he(t)});var o=require("react/jsx-runtime");function ee({items:t=[{title:"Dashboard",href:"/dashboard"},{title:"Projects",href:"/projects"},{title:"Team",href:"/team"},{title:"Reports",href:"/reports"}],children:a,className:n,logoText:m="ACME Corp",user:d={name:"John Doe",email:"john@example.com",image:"https://i.pravatar.cc/150?u=a042581f4e29026704d"},onNavigateHome:v=()=>console.log("Navigating to home"),onNavItemClick:y=s=>console.log(`Navigating to ${s}`),onProfileSelected:z,onLogout:g=()=>console.log("Logout clicked")}){let[s,N]=(0,Y.useState)(!1);return(0,o.jsx)("header",{className:i("border-b bg-background",n),children:(0,o.jsxs)("div",{className:"container flex h-16 items-center justify-between px-4 md:px-6",children:[(0,o.jsxs)("div",{className:"flex items-center gap-4",children:[(0,o.jsx)("span",{className:"text-xl font-bold cursor-pointer",onClick:v,children:m}),(0,o.jsx)("nav",{className:"hidden md:flex gap-6",children:t?.map((h,A)=>(0,o.jsx)("span",{onClick:()=>{h.disabled||y(h.href)},className:i("text-sm font-medium transition-colors hover:text-primary cursor-pointer",h.disabled&&"cursor-not-allowed opacity-80"),children:h.title},A))})]}),(0,o.jsxs)("div",{className:"flex items-center gap-4",children:[a,(0,o.jsxs)(U,{children:[(0,o.jsx)(W,{asChild:!0,children:(0,o.jsx)(l,{variant:"ghost",className:"relative h-8 w-8 rounded-full",children:(0,o.jsxs)(S,{className:"h-8 w-8",children:[(0,o.jsx)(D,{src:d.image||"/placeholder.svg",alt:d.name}),(0,o.jsx)(R,{children:d.name?.charAt(0)})]})})}),(0,o.jsxs)(X,{className:"w-56",align:"end",forceMount:!0,children:[(0,o.jsx)(q,{className:"font-normal",children:(0,o.jsxs)("div",{className:"flex flex-col space-y-1",children:[(0,o.jsx)("p",{className:"text-sm font-medium leading-none",children:d.name}),(0,o.jsx)("p",{className:"text-xs leading-none text-muted-foreground",children:d.email})]})}),(0,o.jsx)(B,{}),(0,o.jsxs)($,{children:[(0,o.jsxs)(I,{onClick:z,children:[(0,o.jsx)(w,{Icon:b.User}),(0,o.jsx)("span",{children:"Profile"})]}),(0,o.jsxs)(I,{children:[(0,o.jsx)(w,{Icon:b.Settings}),(0,o.jsx)("span",{children:"Settings"})]})]}),(0,o.jsx)(B,{}),(0,o.jsxs)(I,{onClick:g,children:[(0,o.jsx)(w,{Icon:b.LogOut}),(0,o.jsx)("span",{children:"Log out"})]})]})]}),(0,o.jsxs)(Z,{open:s,onOpenChange:N,children:[(0,o.jsx)(K,{asChild:!0,children:(0,o.jsx)(l,{variant:"ghost",size:"icon",className:"md:hidden","aria-label":"Open Menu",children:(0,o.jsx)(w,{Icon:b.Menu})})}),(0,o.jsx)(Q,{side:"left",className:"pr-0",children:(0,o.jsx)("nav",{className:"grid gap-2 py-6",children:t?.map((h,A)=>(0,o.jsx)("a",{href:h.href,className:i("flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",h.disabled&&"cursor-not-allowed opacity-80"),onClick:()=>N(!1),children:h.title},A))})})]})]})]})})}var P=require("react");var te=require("@radix-ui/react-slot"),oe=require("class-variance-authority");var ae=require("react/jsx-runtime"),be=(0,oe.cva)("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function G({className:t,variant:a,asChild:n=!1,...m}){return(0,ae.jsx)(n?te.Slot:"span",{"data-slot":"badge",className:i(be({variant:a}),t),...m})}var f=require("lucide-react"),e=require("react/jsx-runtime"),ne=({user:t,emails:a=[],connectedAccounts:n=[]})=>{let[m,d]=(0,P.useState)(!1),[v,y]=(0,P.useState)("profile");(0,P.useEffect)(()=>{d(!0)},[]);let z={className:"mr-2 h-4 w-4","aria-hidden":"true"},g=s=>m?(0,e.jsx)(s,{...z}):null;return(0,e.jsxs)("div",{className:"grid grid-cols-[16rem,1fr] h-screen bg-gray-100",children:[(0,e.jsxs)("div",{className:"h-full border-r p-6 bg-white flex flex-col min-w-0",children:[(0,e.jsxs)("div",{className:"mb-6",children:[(0,e.jsx)("h1",{className:"text-xl font-bold",children:"Account"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Manage your account info."})]}),(0,e.jsxs)("nav",{className:"space-y-1 flex-1",children:[(0,e.jsxs)("button",{onClick:()=>y("profile"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${v==="profile"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[g(f.User),"Profile"]}),(0,e.jsxs)("button",{onClick:()=>y("security"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${v==="security"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[g(f.Shield),"Security"]})]})]}),(0,e.jsxs)("div",{className:"h-full p-10 overflow-y-auto min-w-0 bg-white",children:[(0,e.jsxs)("div",{className:"flex justify-between items-center mb-6",children:[(0,e.jsx)("h2",{className:"text-xl font-semibold",children:v==="profile"?"Profile details":"Security settings"}),(0,e.jsx)("button",{className:"text-gray-500 hover:text-gray-700",children:g(f.X)})]}),v==="profile"?(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Profile"}),(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsxs)(S,{className:"h-12 w-12 mr-4 border",children:[(0,e.jsx)(D,{src:t.image,alt:"Profile picture"}),(0,e.jsx)(R,{children:t.name.split(" ").map(s=>s[0]).join("")})]}),(0,e.jsx)("span",{className:"font-medium",children:t.name})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Edit profile"})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Email addresses"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(a.length>0?a:[{address:t.email,isPrimary:!0}]).map((s,N)=>(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)("span",{children:s.address}),s.isPrimary&&(0,e.jsx)(G,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]},s.address)),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[g(f.PlusCircle),"Add email address"]})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Phone number"}),(0,e.jsxs)("div",{className:"space-y-3",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)("span",{children:"+1 (555) 123-4567"}),(0,e.jsx)(G,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]}),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[g(f.PlusCircle),"Add phone number"]})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Connected accounts"}),(0,e.jsxs)("div",{className:"space-y-3",children:[n.length>0?n.map((s,N)=>(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsx)("div",{className:"mr-2",children:(0,e.jsx)("span",{children:s.provider})}),(0,e.jsx)("span",{children:s.provider})]}),(0,e.jsx)("span",{className:"text-sm text-gray-500",children:s.email})]},s.provider+s.email)):(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center",children:[(0,e.jsx)("div",{className:"mr-2",children:(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"20",height:"20",children:[(0,e.jsx)("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}),(0,e.jsx)("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),(0,e.jsx)("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),(0,e.jsx)("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]})}),(0,e.jsx)("span",{children:"Google"})]}),(0,e.jsx)("span",{className:"text-sm text-gray-500",children:t.email})]}),(0,e.jsxs)(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[g(f.PlusCircle),"Connect account"]})]})]})]}):(0,e.jsxs)("div",{className:"space-y-8",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Two-factor authentication"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Two-factor authentication"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Add an extra layer of security to your account"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Enable"})]})})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Password"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Change password"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Last changed 3 months ago"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Change"})]})})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("h3",{className:"text-sm font-medium mb-4",children:"Active sessions"}),(0,e.jsx)("div",{className:"space-y-3",children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"font-medium",children:"Current session"}),(0,e.jsx)("p",{className:"text-sm text-gray-500",children:"Chrome on Windows \u2022 Active now"})]}),(0,e.jsx)(l,{variant:"outline",size:"sm",children:"Sign out"})]})})]})]})]}),(0,e.jsxs)("div",{className:"absolute bottom-4 text-xs text-gray-500 flex items-center",children:["Secured by",(0,e.jsxs)("span",{className:"ml-1 font-medium flex items-center",children:[(0,e.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"mr-1",children:(0,e.jsx)("path",{d:"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z",fill:"#6C47FF"})}),"Authdog"]})]})]})};
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/core/navbar.tsx","../src/components/ui/avatar.tsx","../src/components/ui/dropdown-menu.tsx","../src/components/ui/sheet.tsx","../src/components/core/user-profile.tsx","../src/components/ui/badge.tsx"],"sourcesContent":["export {Button} from \"./components/ui/button\";\nexport {Navbar} from \"./components/core/navbar\";\nexport {UserProfile} from \"./components/core/user-profile\";","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\"\n\nimport type React from \"react\"\nimport { useState, useEffect } from \"react\"\nimport { User, Settings, LogOut, Menu } from \"lucide-react\"\nimport type { LucideProps } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\"\nimport { Sheet, SheetContent, SheetTrigger } from \"../../components/ui/sheet\"\n\ninterface NavItem {\n title: string\n href: string\n disabled?: boolean\n}\n\ninterface NavbarProps {\n items?: NavItem[]\n children?: React.ReactNode\n className?: string\n logoText?: string\n user?: {\n name?: string\n email?: string\n image?: string\n }\n onNavItemClick?: (href: string) => void;\n onProfileSelected?: () => void;\n onLogout?: () => void;\n}\n\nexport function Navbar({\n items = [\n { title: \"Dashboard\", href: \"/dashboard\" },\n { title: \"Projects\", href: \"/projects\" },\n { title: \"Team\", href: \"/team\" },\n { title: \"Reports\", href: \"/reports\" },\n ],\n children,\n className,\n logoText = \"Company\",\n user = {\n name: \"John Doe\",\n email: \"john@example.com\",\n image: \"https://i.pravatar.cc/150?u=a042581f4e29026704d\",\n },\n onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),\n onProfileSelected,\n onLogout = () => console.log(\"Logout clicked\"),\n}: NavbarProps) {\n const [open, setOpen] = useState(false)\n const [isMounted, setIsMounted] = useState(false)\n\n useEffect(() => {\n setIsMounted(true)\n }, [])\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <header className={cn(\"border-b bg-background\", className)}>\n <div className=\"container flex h-16 items-center justify-between px-4 md:px-6\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xl font-bold\">{logoText}</span>\n <nav className=\"hidden md:flex gap-6\">\n {items?.map((item, index) => (\n <span\n key={index}\n // href={item.href}\n onClick={() => {\n if (!item.disabled) {\n onNavItemClick(item.href)\n }\n }}\n className={cn(\n \"text-sm font-medium transition-colors hover:text-primary cursor-pointer\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n >\n {item.title}\n </span>\n ))}\n </nav>\n </div>\n <div className=\"flex items-center gap-4\">\n {children}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" className=\"relative h-8 w-8 rounded-full\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={user.image || \"/placeholder.svg\"} alt={user.name} />\n <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>\n </Avatar>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-56\" align=\"end\" forceMount>\n <DropdownMenuLabel className=\"font-normal\">\n <div className=\"flex flex-col space-y-1\">\n <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n <p className=\"text-xs leading-none text-muted-foreground\">{user.email}</p>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={onProfileSelected}>\n {renderIcon(User)}\n <span>Profile</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n {renderIcon(Settings)}\n <span>Settings</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem onClick={onLogout}>\n {renderIcon(LogOut)}\n <span>Log out</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open Menu\">\n {renderIcon(Menu)}\n </Button>\n </SheetTrigger>\n <SheetContent side=\"left\" className=\"pr-0\">\n <nav className=\"grid gap-2 py-6\">\n {items?.map((item, index) => (\n <a\n key={index}\n href={item.href}\n className={cn(\n \"flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n onClick={() => setOpen(false)}\n >\n {item.title}\n </a>\n ))}\n </nav>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </header>\n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n className={cn(\n \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full\", className)}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted flex size-full items-center justify-center rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>\nconst CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>\nconst ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n )\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n )\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CircleIcon className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n )\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n className\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n","\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport { Card } from \"../../components/ui/card\"\nimport { Badge } from \"../../components/ui/badge\"\nimport { PlusCircle, User, Shield, X, LucideProps } from \"lucide-react\"\n\nexport interface UserProfileProps {\n user: {\n name: string;\n email: string;\n image: string;\n };\n emails?: { address: string; isPrimary?: boolean }[];\n connectedAccounts?: { provider: string; email: string }[];\n}\n\nexport const UserProfile = ({\n user,\n emails = [],\n connectedAccounts = [],\n}: UserProfileProps) => {\n const [isMounted, setIsMounted] = useState(false)\n const [activeTab, setActiveTab] = useState<\"profile\" | \"security\">(\"profile\");\n\n useEffect(() => {\n setIsMounted(true)\n }, []);\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <div className=\"grid grid-cols-[16rem,1fr] h-screen bg-gray-100\">\n <div className=\"h-full border-r p-6 bg-white flex flex-col min-w-0\">\n <div className=\"mb-6\">\n <h1 className=\"text-xl font-bold\">Account</h1>\n <p className=\"text-sm text-gray-500\">Manage your account info.</p>\n </div>\n\n <nav className=\"space-y-1 flex-1\">\n <button\n onClick={() => setActiveTab(\"profile\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"profile\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(User)}\n Profile\n </button>\n <button\n onClick={() => setActiveTab(\"security\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"security\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(Shield)}\n Security\n </button>\n </nav>\n </div>\n\n <div className=\"h-full p-10 overflow-y-auto min-w-0 bg-white\">\n <div className=\"flex justify-between items-center mb-6\">\n <h2 className=\"text-xl font-semibold\">\n {activeTab === \"profile\" ? \"Profile details\" : \"Security settings\"}\n </h2>\n <button className=\"text-gray-500 hover:text-gray-700\">\n {renderIcon(X)}\n </button>\n </div>\n\n {activeTab === \"profile\" ? (\n <div className=\"space-y-8\">\n {/* Profile Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Profile</h3>\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <Avatar className=\"h-12 w-12 mr-4 border\">\n <AvatarImage src={user.image} alt=\"Profile picture\" />\n <AvatarFallback>{user.name.split(\" \").map(n => n[0]).join(\"\")}</AvatarFallback>\n </Avatar>\n <span className=\"font-medium\">{user.name}</span>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Edit profile\n </Button>\n </div>\n </div>\n\n {/* Email Addresses Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Email addresses</h3>\n <div className=\"space-y-3\">\n {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (\n <div className=\"flex items-center justify-between\" key={email.address}>\n <span>{email.address}</span>\n {email.isPrimary && (\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n )}\n </div>\n ))}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add email address\n </Button>\n </div>\n </div>\n\n {/* Phone Number Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Phone number</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <span>+1 (555) 123-4567</span>\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n </div>\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add phone number\n </Button>\n </div>\n </div>\n\n {/* Connected Accounts Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Connected accounts</h3>\n <div className=\"space-y-3\">\n {connectedAccounts.length > 0 ? connectedAccounts.map((acc, i) => (\n <div className=\"flex items-center justify-between\" key={acc.provider + acc.email}>\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <span>{acc.provider}</span>\n </div>\n <span>{acc.provider}</span>\n </div>\n <span className=\"text-sm text-gray-500\">{acc.email}</span>\n </div>\n )) : (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" />\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" />\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" />\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" />\n </svg>\n </div>\n <span>Google</span>\n </div>\n <span className=\"text-sm text-gray-500\">{user.email}</span>\n </div>\n )}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Connect account\n </Button>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"space-y-8\">\n {/* Security Settings */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Two-factor authentication</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Two-factor authentication</p>\n <p className=\"text-sm text-gray-500\">Add an extra layer of security to your account</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Enable\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Password</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Change password</p>\n <p className=\"text-sm text-gray-500\">Last changed 3 months ago</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Change\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Active sessions</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Current session</p>\n <p className=\"text-sm text-gray-500\">Chrome on Windows • Active now</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Sign out\n </Button>\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n <div className=\"absolute bottom-4 text-xs text-gray-500 flex items-center\">\n Secured by\n <span className=\"ml-1 font-medium flex items-center\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"mr-1\"\n >\n <path d=\"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z\" fill=\"#6C47FF\" />\n </svg>\n Authdog\n </span>\n </div>\n </div>\n )\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":["index_exports","__export","Button","Navbar","UserProfile","__toCommonJS","React","import_react_slot","import_class_variance_authority","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","buttonVariants","Button","className","variant","size","asChild","props","ref","cn","import_react","import_lucide_react","AvatarPrimitive","import_jsx_runtime","Avatar","className","props","cn","AvatarImage","AvatarFallback","DropdownMenuPrimitive","import_lucide_react","import_jsx_runtime","DropdownMenu","props","DropdownMenuTrigger","props","DropdownMenuContent","className","sideOffset","cn","DropdownMenuGroup","DropdownMenuItem","inset","variant","DropdownMenuLabel","className","inset","props","cn","DropdownMenuSeparator","SheetPrimitive","import_lucide_react","import_jsx_runtime","XIcon","Sheet","props","SheetTrigger","SheetPortal","props","SheetOverlay","className","cn","SheetContent","children","side","XIcon","import_jsx_runtime","Navbar","items","children","className","logoText","user","onNavItemClick","href","onProfileSelected","onLogout","open","setOpen","isMounted","setIsMounted","iconProps","renderIcon","Icon","cn","item","index","DropdownMenu","DropdownMenuTrigger","Button","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","Sheet","SheetTrigger","SheetContent","import_react","import_react_slot","import_class_variance_authority","import_jsx_runtime","badgeVariants","Badge","className","variant","asChild","props","cn","import_lucide_react","import_jsx_runtime","UserProfile","user","emails","connectedAccounts","isMounted","setIsMounted","activeTab","setActiveTab","iconProps","renderIcon","Icon","Avatar","AvatarImage","AvatarFallback","n","Button","email","i","Badge","acc"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/core/navbar.tsx","../src/components/ui/avatar.tsx","../src/components/ui/dropdown-menu.tsx","../src/components/ui/sheet.tsx","../src/components/icons.tsx","../src/components/core/user-profile.tsx","../src/components/ui/badge.tsx"],"sourcesContent":["export {Button} from \"./components/ui/button\";\nexport {Navbar} from \"./components/core/navbar\";\nexport {UserProfile} from \"./components/core/user-profile\";","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { User, Settings, LogOut, Menu } from \"lucide-react\"\n// import type { LucideProps } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\"\nimport { Sheet, SheetContent, SheetTrigger } from \"../../components/ui/sheet\"\nimport { IconWrapper } from \"../icons\"\n\ninterface NavItem {\n title: string\n href: string\n disabled?: boolean\n}\n\ninterface NavbarProps {\n items?: NavItem[]\n children?: React.ReactNode\n className?: string\n logoText?: string\n user?: {\n name?: string\n email?: string\n image?: string\n }\n onNavigateHome?: () => void;\n onNavItemClick?: (href: string) => void;\n onProfileSelected?: () => void;\n onLogout?: () => void;\n}\n\nexport function Navbar({\n items = [\n { title: \"Dashboard\", href: \"/dashboard\" },\n { title: \"Projects\", href: \"/projects\" },\n { title: \"Team\", href: \"/team\" },\n { title: \"Reports\", href: \"/reports\" },\n ],\n children,\n className,\n logoText = \"ACME Corp\",\n user = {\n name: \"John Doe\",\n email: \"john@example.com\",\n image: \"https://i.pravatar.cc/150?u=a042581f4e29026704d\",\n },\n onNavigateHome = () => console.log(\"Navigating to home\"),\n onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),\n onProfileSelected,\n onLogout = () => console.log(\"Logout clicked\"),\n}: NavbarProps) {\n const [open, setOpen] = useState(false)\n // const [isMounted, setIsMounted] = useState(false)\n\n // useEffect(() => {\n // setIsMounted(true)\n // }, [])\n\n // const iconProps: LucideProps = {\n // className: \"mr-2 h-4 w-4\",\n // \"aria-hidden\": \"true\"\n // }\n\n // const renderIcon = (Icon: any) => {\n // if (!isMounted) return null\n // return <Icon {...iconProps} />\n // }\n\n return (\n <header className={cn(\"border-b bg-background\", className)}>\n <div className=\"container flex h-16 items-center justify-between px-4 md:px-6\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xl font-bold cursor-pointer\" onClick={onNavigateHome}>{logoText}</span>\n <nav className=\"hidden md:flex gap-6\">\n {items?.map((item, index) => (\n <span\n key={index}\n // href={item.href}\n onClick={() => {\n if (!item.disabled) {\n onNavItemClick(item.href)\n }\n }}\n className={cn(\n \"text-sm font-medium transition-colors hover:text-primary cursor-pointer\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n >\n {item.title}\n </span>\n ))}\n </nav>\n </div>\n <div className=\"flex items-center gap-4\">\n {children}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" className=\"relative h-8 w-8 rounded-full\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={user.image || \"/placeholder.svg\"} alt={user.name} />\n <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>\n </Avatar>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-56\" align=\"end\" forceMount>\n <DropdownMenuLabel className=\"font-normal\">\n <div className=\"flex flex-col space-y-1\">\n <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n <p className=\"text-xs leading-none text-muted-foreground\">{user.email}</p>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={onProfileSelected}>\n {/* {renderIcon(User)} */}\n <IconWrapper Icon={User} />\n <span>Profile</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n {/* {renderIcon(Settings)} */}\n <IconWrapper Icon={Settings} />\n <span>Settings</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem onClick={onLogout}>\n {/* {renderIcon(LogOut)} */}\n <IconWrapper Icon={LogOut} />\n <span>Log out</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open Menu\">\n {/* {renderIcon(Menu)} */}\n <IconWrapper Icon={Menu} />\n </Button>\n </SheetTrigger>\n <SheetContent side=\"left\" className=\"pr-0\">\n <nav className=\"grid gap-2 py-6\">\n {items?.map((item, index) => (\n <a\n key={index}\n href={item.href}\n className={cn(\n \"flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n onClick={() => setOpen(false)}\n >\n {item.title}\n </a>\n ))}\n </nav>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </header>\n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n className={cn(\n \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full\", className)}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted flex size-full items-center justify-center rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>\nconst CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>\nconst ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n )\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n )\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CircleIcon className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n )\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n className\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n","import { LucideProps } from \"lucide-react\"\nimport { useCallback } from \"react\"\n\nconst iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n}\n\nexport const renderIcon = ((Icon: any) => {\n return <Icon {...iconProps} />\n}) as React.FC<{\n Icon: any\n}>\n\n\nexport const IconWrapper = ({ Icon }: { Icon: any }) => {\n return (\n <span className=\"inline-flex items-center justify-center\">\n {renderIcon(Icon)}\n </span>\n )\n}","\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport { Card } from \"../../components/ui/card\"\nimport { Badge } from \"../../components/ui/badge\"\nimport { PlusCircle, User, Shield, X, LucideProps } from \"lucide-react\"\n\nexport interface UserProfileProps {\n user: {\n name: string;\n email: string;\n image: string;\n };\n emails?: { address: string; isPrimary?: boolean }[];\n connectedAccounts?: { provider: string; email: string }[];\n}\n\nexport const UserProfile = ({\n user,\n emails = [],\n connectedAccounts = [],\n}: UserProfileProps) => {\n const [isMounted, setIsMounted] = useState(false)\n const [activeTab, setActiveTab] = useState<\"profile\" | \"security\">(\"profile\");\n\n useEffect(() => {\n setIsMounted(true)\n }, []);\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <div className=\"grid grid-cols-[16rem,1fr] h-screen bg-gray-100\">\n <div className=\"h-full border-r p-6 bg-white flex flex-col min-w-0\">\n <div className=\"mb-6\">\n <h1 className=\"text-xl font-bold\">Account</h1>\n <p className=\"text-sm text-gray-500\">Manage your account info.</p>\n </div>\n\n <nav className=\"space-y-1 flex-1\">\n <button\n onClick={() => setActiveTab(\"profile\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"profile\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(User)}\n Profile\n </button>\n <button\n onClick={() => setActiveTab(\"security\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"security\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(Shield)}\n Security\n </button>\n </nav>\n </div>\n\n <div className=\"h-full p-10 overflow-y-auto min-w-0 bg-white\">\n <div className=\"flex justify-between items-center mb-6\">\n <h2 className=\"text-xl font-semibold\">\n {activeTab === \"profile\" ? \"Profile details\" : \"Security settings\"}\n </h2>\n <button className=\"text-gray-500 hover:text-gray-700\">\n {renderIcon(X)}\n </button>\n </div>\n\n {activeTab === \"profile\" ? (\n <div className=\"space-y-8\">\n {/* Profile Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Profile</h3>\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <Avatar className=\"h-12 w-12 mr-4 border\">\n <AvatarImage src={user.image} alt=\"Profile picture\" />\n <AvatarFallback>{user.name.split(\" \").map(n => n[0]).join(\"\")}</AvatarFallback>\n </Avatar>\n <span className=\"font-medium\">{user.name}</span>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Edit profile\n </Button>\n </div>\n </div>\n\n {/* Email Addresses Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Email addresses</h3>\n <div className=\"space-y-3\">\n {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (\n <div className=\"flex items-center justify-between\" key={email.address}>\n <span>{email.address}</span>\n {email.isPrimary && (\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n )}\n </div>\n ))}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add email address\n </Button>\n </div>\n </div>\n\n {/* Phone Number Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Phone number</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <span>+1 (555) 123-4567</span>\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n </div>\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add phone number\n </Button>\n </div>\n </div>\n\n {/* Connected Accounts Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Connected accounts</h3>\n <div className=\"space-y-3\">\n {connectedAccounts.length > 0 ? connectedAccounts.map((acc, i) => (\n <div className=\"flex items-center justify-between\" key={acc.provider + acc.email}>\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <span>{acc.provider}</span>\n </div>\n <span>{acc.provider}</span>\n </div>\n <span className=\"text-sm text-gray-500\">{acc.email}</span>\n </div>\n )) : (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" />\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" />\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" />\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" />\n </svg>\n </div>\n <span>Google</span>\n </div>\n <span className=\"text-sm text-gray-500\">{user.email}</span>\n </div>\n )}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Connect account\n </Button>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"space-y-8\">\n {/* Security Settings */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Two-factor authentication</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Two-factor authentication</p>\n <p className=\"text-sm text-gray-500\">Add an extra layer of security to your account</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Enable\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Password</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Change password</p>\n <p className=\"text-sm text-gray-500\">Last changed 3 months ago</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Change\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Active sessions</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Current session</p>\n <p className=\"text-sm text-gray-500\">Chrome on Windows • Active now</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Sign out\n </Button>\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n <div className=\"absolute bottom-4 text-xs text-gray-500 flex items-center\">\n Secured by\n <span className=\"ml-1 font-medium flex items-center\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"mr-1\"\n >\n <path d=\"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z\" fill=\"#6C47FF\" />\n </svg>\n Authdog\n </span>\n </div>\n </div>\n )\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":["index_exports","__export","Button","Navbar","UserProfile","__toCommonJS","React","import_react_slot","import_class_variance_authority","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","buttonVariants","Button","className","variant","size","asChild","props","ref","cn","import_react","import_lucide_react","AvatarPrimitive","import_jsx_runtime","Avatar","className","props","cn","AvatarImage","AvatarFallback","DropdownMenuPrimitive","import_lucide_react","import_jsx_runtime","DropdownMenu","props","DropdownMenuTrigger","props","DropdownMenuContent","className","sideOffset","cn","DropdownMenuGroup","DropdownMenuItem","inset","variant","DropdownMenuLabel","className","inset","props","cn","DropdownMenuSeparator","SheetPrimitive","import_lucide_react","import_jsx_runtime","XIcon","Sheet","props","SheetTrigger","SheetPortal","props","SheetOverlay","className","cn","SheetContent","children","side","XIcon","import_jsx_runtime","iconProps","renderIcon","Icon","IconWrapper","import_jsx_runtime","Navbar","items","children","className","logoText","user","onNavigateHome","onNavItemClick","href","onProfileSelected","onLogout","open","setOpen","cn","item","index","DropdownMenu","DropdownMenuTrigger","Button","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","IconWrapper","Sheet","SheetTrigger","SheetContent","import_react","import_react_slot","import_class_variance_authority","import_jsx_runtime","badgeVariants","Badge","className","variant","asChild","props","cn","import_lucide_react","import_jsx_runtime","UserProfile","user","emails","connectedAccounts","isMounted","setIsMounted","activeTab","setActiveTab","iconProps","renderIcon","Icon","Avatar","AvatarImage","AvatarFallback","n","Button","email","i","Badge","acc"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import*as B from"react";import{Slot as W}from"@radix-ui/react-slot";import{cva as Z}from"class-variance-authority";import{clsx as q}from"clsx";import{twMerge as J}from"tailwind-merge";function i(...t){return J(q(t))}import{jsx as Q}from"react/jsx-runtime";var K=Z("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=B.forwardRef(({className:t,variant:a,size:s,asChild:p=!1,...u},g)=>Q(p?W:"button",{className:i(K({variant:a,size:s,className:t})),ref:g,...u}));l.displayName="Button";import{useState as H,useEffect as ae}from"react";import{User as re,Settings as ne,LogOut as ie,Menu as se}from"lucide-react";import*as x from"@radix-ui/react-avatar";import{jsx as k}from"react/jsx-runtime";function P({className:t,...a}){return k(x.Root,{"data-slot":"avatar",className:i("relative flex size-8 shrink-0 overflow-hidden rounded-full",t),...a})}function N({className:t,...a}){return k(x.Image,{"data-slot":"avatar-image",className:i("aspect-square size-full",t),...a})}function C({className:t,...a}){return k(x.Fallback,{"data-slot":"avatar-fallback",className:i("bg-muted flex size-full items-center justify-center rounded-full",t),...a})}import*as r from"@radix-ui/react-dropdown-menu";import{Check as Ie,ChevronRight as ze,Circle as Ae}from"lucide-react";import{jsx as h,jsxs as Ve}from"react/jsx-runtime";function V({...t}){return h(r.Root,{"data-slot":"dropdown-menu",...t})}function G({...t}){return h(r.Trigger,{"data-slot":"dropdown-menu-trigger",...t})}function L({className:t,sideOffset:a=4,...s}){return h(r.Portal,{children:h(r.Content,{"data-slot":"dropdown-menu-content",sideOffset:a,className:i("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",t),...s})})}function j({...t}){return h(r.Group,{"data-slot":"dropdown-menu-group",...t})}function M({className:t,inset:a,variant:s="default",...p}){return h(r.Item,{"data-slot":"dropdown-menu-item","data-inset":a,"data-variant":s,className:i("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",t),...p})}function E({className:t,inset:a,...s}){return h(r.Label,{"data-slot":"dropdown-menu-label","data-inset":a,className:i("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",t),...s})}function I({className:t,...a}){return h(r.Separator,{"data-slot":"dropdown-menu-separator",className:i("bg-border -mx-1 my-1 h-px",t),...a})}import*as m from"@radix-ui/react-dialog";import{X as Y}from"lucide-react";import{jsx as b,jsxs as z}from"react/jsx-runtime";var ee=Y;function F({...t}){return b(m.Root,{"data-slot":"sheet",...t})}function _({...t}){return b(m.Trigger,{"data-slot":"sheet-trigger",...t})}function te({...t}){return b(m.Portal,{"data-slot":"sheet-portal",...t})}function oe({className:t,...a}){return b(m.Overlay,{"data-slot":"sheet-overlay",className:i("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",t),...a})}function O({className:t,children:a,side:s="right",...p}){return z(te,{children:[b(oe,{}),z(m.Content,{"data-slot":"sheet-content",className:i("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",s==="right"&&"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",s==="left"&&"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",s==="top"&&"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",s==="bottom"&&"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",t),...p,children:[a,z(m.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[b(ee,{className:"size-4"}),b("span",{className:"sr-only",children:"Close"})]})]})]})}import{jsx as n,jsxs as c}from"react/jsx-runtime";function de({items:t=[{title:"Dashboard",href:"/dashboard"},{title:"Projects",href:"/projects"},{title:"Team",href:"/team"},{title:"Reports",href:"/reports"}],children:a,className:s,logoText:p="Company",user:u={name:"John Doe",email:"john@example.com",image:"https://i.pravatar.cc/150?u=a042581f4e29026704d"},onNavItemClick:g=f=>console.log(`Navigating to ${f}`),onProfileSelected:y,onLogout:S=()=>console.log("Logout clicked")}){let[f,d]=H(!1),[D,X]=H(!1);ae(()=>{X(!0)},[]);let $={className:"mr-2 h-4 w-4","aria-hidden":"true"},w=v=>D?n(v,{...$}):null;return n("header",{className:i("border-b bg-background",s),children:c("div",{className:"container flex h-16 items-center justify-between px-4 md:px-6",children:[c("div",{className:"flex items-center gap-4",children:[n("span",{className:"text-xl font-bold",children:p}),n("nav",{className:"hidden md:flex gap-6",children:t?.map((v,R)=>n("span",{onClick:()=>{v.disabled||g(v.href)},className:i("text-sm font-medium transition-colors hover:text-primary cursor-pointer",v.disabled&&"cursor-not-allowed opacity-80"),children:v.title},R))})]}),c("div",{className:"flex items-center gap-4",children:[a,c(V,{children:[n(G,{asChild:!0,children:n(l,{variant:"ghost",className:"relative h-8 w-8 rounded-full",children:c(P,{className:"h-8 w-8",children:[n(N,{src:u.image||"/placeholder.svg",alt:u.name}),n(C,{children:u.name?.charAt(0)})]})})}),c(L,{className:"w-56",align:"end",forceMount:!0,children:[n(E,{className:"font-normal",children:c("div",{className:"flex flex-col space-y-1",children:[n("p",{className:"text-sm font-medium leading-none",children:u.name}),n("p",{className:"text-xs leading-none text-muted-foreground",children:u.email})]})}),n(I,{}),c(j,{children:[c(M,{onClick:y,children:[w(re),n("span",{children:"Profile"})]}),c(M,{children:[w(ne),n("span",{children:"Settings"})]})]}),n(I,{}),c(M,{onClick:S,children:[w(ie),n("span",{children:"Log out"})]})]})]}),c(F,{open:f,onOpenChange:d,children:[n(_,{asChild:!0,children:n(l,{variant:"ghost",size:"icon",className:"md:hidden","aria-label":"Open Menu",children:w(se)})}),n(O,{side:"left",className:"pr-0",children:n("nav",{className:"grid gap-2 py-6",children:t?.map((v,R)=>n("a",{href:v.href,className:i("flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",v.disabled&&"cursor-not-allowed opacity-80"),onClick:()=>d(!1),children:v.title},R))})})]})]})]})})}import{useEffect as ue,useState as U}from"react";import{Slot as me}from"@radix-ui/react-slot";import{cva as le}from"class-variance-authority";import{jsx as pe}from"react/jsx-runtime";var ce=le("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function A({className:t,variant:a,asChild:s=!1,...p}){return pe(s?me:"span",{"data-slot":"badge",className:i(ce({variant:a}),t),...p})}import{PlusCircle as T,User as fe,Shield as ve,X as ge}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";var he=({user:t,emails:a=[],connectedAccounts:s=[]})=>{let[p,u]=U(!1),[g,y]=U("profile");ue(()=>{u(!0)},[]);let S={className:"mr-2 h-4 w-4","aria-hidden":"true"},f=d=>p?e(d,{...S}):null;return o("div",{className:"grid grid-cols-[16rem,1fr] h-screen bg-gray-100",children:[o("div",{className:"h-full border-r p-6 bg-white flex flex-col min-w-0",children:[o("div",{className:"mb-6",children:[e("h1",{className:"text-xl font-bold",children:"Account"}),e("p",{className:"text-sm text-gray-500",children:"Manage your account info."})]}),o("nav",{className:"space-y-1 flex-1",children:[o("button",{onClick:()=>y("profile"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${g==="profile"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[f(fe),"Profile"]}),o("button",{onClick:()=>y("security"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${g==="security"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[f(ve),"Security"]})]})]}),o("div",{className:"h-full p-10 overflow-y-auto min-w-0 bg-white",children:[o("div",{className:"flex justify-between items-center mb-6",children:[e("h2",{className:"text-xl font-semibold",children:g==="profile"?"Profile details":"Security settings"}),e("button",{className:"text-gray-500 hover:text-gray-700",children:f(ge)})]}),g==="profile"?o("div",{className:"space-y-8",children:[o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Profile"}),o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[o(P,{className:"h-12 w-12 mr-4 border",children:[e(N,{src:t.image,alt:"Profile picture"}),e(C,{children:t.name.split(" ").map(d=>d[0]).join("")})]}),e("span",{className:"font-medium",children:t.name})]}),e(l,{variant:"outline",size:"sm",children:"Edit profile"})]})]}),o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Email addresses"}),o("div",{className:"space-y-3",children:[(a.length>0?a:[{address:t.email,isPrimary:!0}]).map((d,D)=>o("div",{className:"flex items-center justify-between",children:[e("span",{children:d.address}),d.isPrimary&&e(A,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]},d.address)),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[f(T),"Add email address"]})]})]}),o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Phone number"}),o("div",{className:"space-y-3",children:[o("div",{className:"flex items-center justify-between",children:[e("span",{children:"+1 (555) 123-4567"}),e(A,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]}),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[f(T),"Add phone number"]})]})]}),o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Connected accounts"}),o("div",{className:"space-y-3",children:[s.length>0?s.map((d,D)=>o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[e("div",{className:"mr-2",children:e("span",{children:d.provider})}),e("span",{children:d.provider})]}),e("span",{className:"text-sm text-gray-500",children:d.email})]},d.provider+d.email)):o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[e("div",{className:"mr-2",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"20",height:"20",children:[e("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}),e("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),e("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),e("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]})}),e("span",{children:"Google"})]}),e("span",{className:"text-sm text-gray-500",children:t.email})]}),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[f(T),"Connect account"]})]})]})]}):o("div",{className:"space-y-8",children:[o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Two-factor authentication"}),e("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[e("p",{className:"font-medium",children:"Two-factor authentication"}),e("p",{className:"text-sm text-gray-500",children:"Add an extra layer of security to your account"})]}),e(l,{variant:"outline",size:"sm",children:"Enable"})]})})]}),o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Password"}),e("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[e("p",{className:"font-medium",children:"Change password"}),e("p",{className:"text-sm text-gray-500",children:"Last changed 3 months ago"})]}),e(l,{variant:"outline",size:"sm",children:"Change"})]})})]}),o("div",{children:[e("h3",{className:"text-sm font-medium mb-4",children:"Active sessions"}),e("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[e("p",{className:"font-medium",children:"Current session"}),e("p",{className:"text-sm text-gray-500",children:"Chrome on Windows \u2022 Active now"})]}),e(l,{variant:"outline",size:"sm",children:"Sign out"})]})})]})]})]}),o("div",{className:"absolute bottom-4 text-xs text-gray-500 flex items-center",children:["Secured by",o("span",{className:"ml-1 font-medium flex items-center",children:[e("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"mr-1",children:e("path",{d:"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z",fill:"#6C47FF"})}),"Authdog"]})]})]})};export{l as Button,de as Navbar,he as UserProfile};
|
|
2
|
+
import*as B from"react";import{Slot as $}from"@radix-ui/react-slot";import{cva as q}from"class-variance-authority";import{clsx as W}from"clsx";import{twMerge as X}from"tailwind-merge";function i(...e){return X(W(e))}import{jsx as Z}from"react/jsx-runtime";var J=q("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{default:"bg-primary text-primary-foreground hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground hover:bg-destructive/90",outline:"border border-input bg-background hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3",lg:"h-11 rounded-md px-8",icon:"h-10 w-10"}},defaultVariants:{variant:"default",size:"default"}}),l=B.forwardRef(({className:e,variant:a,size:s,asChild:p=!1,...u},f)=>Z(p?$:"button",{className:i(J({variant:a,size:s,className:e})),ref:f,...u}));l.displayName="Button";import{useState as ae}from"react";import{User as ne,Settings as re,LogOut as ie,Menu as se}from"lucide-react";import*as x from"@radix-ui/react-avatar";import{jsx as k}from"react/jsx-runtime";function N({className:e,...a}){return k(x.Root,{"data-slot":"avatar",className:i("relative flex size-8 shrink-0 overflow-hidden rounded-full",e),...a})}function C({className:e,...a}){return k(x.Image,{"data-slot":"avatar-image",className:i("aspect-square size-full",e),...a})}function M({className:e,...a}){return k(x.Fallback,{"data-slot":"avatar-fallback",className:i("bg-muted flex size-full items-center justify-center rounded-full",e),...a})}import*as r from"@radix-ui/react-dropdown-menu";import{Check as Ie,ChevronRight as ze,Circle as Ae}from"lucide-react";import{jsx as h,jsxs as Ve}from"react/jsx-runtime";function V({...e}){return h(r.Root,{"data-slot":"dropdown-menu",...e})}function G({...e}){return h(r.Trigger,{"data-slot":"dropdown-menu-trigger",...e})}function L({className:e,sideOffset:a=4,...s}){return h(r.Portal,{children:h(r.Content,{"data-slot":"dropdown-menu-content",sideOffset:a,className:i("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",e),...s})})}function F({...e}){return h(r.Group,{"data-slot":"dropdown-menu-group",...e})}function S({className:e,inset:a,variant:s="default",...p}){return h(r.Item,{"data-slot":"dropdown-menu-item","data-inset":a,"data-variant":s,className:i("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...p})}function j({className:e,inset:a,...s}){return h(r.Label,{"data-slot":"dropdown-menu-label","data-inset":a,className:i("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",e),...s})}function I({className:e,...a}){return h(r.Separator,{"data-slot":"dropdown-menu-separator",className:i("bg-border -mx-1 my-1 h-px",e),...a})}import*as m from"@radix-ui/react-dialog";import{X as K}from"lucide-react";import{jsx as b,jsxs as z}from"react/jsx-runtime";var Q=K;function E({...e}){return b(m.Root,{"data-slot":"sheet",...e})}function _({...e}){return b(m.Trigger,{"data-slot":"sheet-trigger",...e})}function Y({...e}){return b(m.Portal,{"data-slot":"sheet-portal",...e})}function ee({className:e,...a}){return b(m.Overlay,{"data-slot":"sheet-overlay",className:i("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",e),...a})}function H({className:e,children:a,side:s="right",...p}){return z(Y,{children:[b(ee,{}),z(m.Content,{"data-slot":"sheet-content",className:i("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",s==="right"&&"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",s==="left"&&"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",s==="top"&&"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",s==="bottom"&&"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",e),...p,children:[a,z(m.Close,{className:"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",children:[b(Q,{className:"size-4"}),b("span",{className:"sr-only",children:"Close"})]})]})]})}import{jsx as O}from"react/jsx-runtime";var te={className:"mr-2 h-4 w-4","aria-hidden":"true"},oe=e=>O(e,{...te}),w=({Icon:e})=>O("span",{className:"inline-flex items-center justify-center",children:oe(e)});import{jsx as n,jsxs as c}from"react/jsx-runtime";function de({items:e=[{title:"Dashboard",href:"/dashboard"},{title:"Projects",href:"/projects"},{title:"Team",href:"/team"},{title:"Reports",href:"/reports"}],children:a,className:s,logoText:p="ACME Corp",user:u={name:"John Doe",email:"john@example.com",image:"https://i.pravatar.cc/150?u=a042581f4e29026704d"},onNavigateHome:f=()=>console.log("Navigating to home"),onNavItemClick:y=d=>console.log(`Navigating to ${d}`),onProfileSelected:D,onLogout:v=()=>console.log("Logout clicked")}){let[d,P]=ae(!1);return n("header",{className:i("border-b bg-background",s),children:c("div",{className:"container flex h-16 items-center justify-between px-4 md:px-6",children:[c("div",{className:"flex items-center gap-4",children:[n("span",{className:"text-xl font-bold cursor-pointer",onClick:f,children:p}),n("nav",{className:"hidden md:flex gap-6",children:e?.map((g,R)=>n("span",{onClick:()=>{g.disabled||y(g.href)},className:i("text-sm font-medium transition-colors hover:text-primary cursor-pointer",g.disabled&&"cursor-not-allowed opacity-80"),children:g.title},R))})]}),c("div",{className:"flex items-center gap-4",children:[a,c(V,{children:[n(G,{asChild:!0,children:n(l,{variant:"ghost",className:"relative h-8 w-8 rounded-full",children:c(N,{className:"h-8 w-8",children:[n(C,{src:u.image||"/placeholder.svg",alt:u.name}),n(M,{children:u.name?.charAt(0)})]})})}),c(L,{className:"w-56",align:"end",forceMount:!0,children:[n(j,{className:"font-normal",children:c("div",{className:"flex flex-col space-y-1",children:[n("p",{className:"text-sm font-medium leading-none",children:u.name}),n("p",{className:"text-xs leading-none text-muted-foreground",children:u.email})]})}),n(I,{}),c(F,{children:[c(S,{onClick:D,children:[n(w,{Icon:ne}),n("span",{children:"Profile"})]}),c(S,{children:[n(w,{Icon:re}),n("span",{children:"Settings"})]})]}),n(I,{}),c(S,{onClick:v,children:[n(w,{Icon:ie}),n("span",{children:"Log out"})]})]})]}),c(E,{open:d,onOpenChange:P,children:[n(_,{asChild:!0,children:n(l,{variant:"ghost",size:"icon",className:"md:hidden","aria-label":"Open Menu",children:n(w,{Icon:se})})}),n(H,{side:"left",className:"pr-0",children:n("nav",{className:"grid gap-2 py-6",children:e?.map((g,R)=>n("a",{href:g.href,className:i("flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent",g.disabled&&"cursor-not-allowed opacity-80"),onClick:()=>P(!1),children:g.title},R))})})]})]})]})})}import{useEffect as ue,useState as U}from"react";import{Slot as me}from"@radix-ui/react-slot";import{cva as le}from"class-variance-authority";import{jsx as pe}from"react/jsx-runtime";var ce=le("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function A({className:e,variant:a,asChild:s=!1,...p}){return pe(s?me:"span",{"data-slot":"badge",className:i(ce({variant:a}),e),...p})}import{PlusCircle as T,User as fe,Shield as ve,X as ge}from"lucide-react";import{jsx as t,jsxs as o}from"react/jsx-runtime";var he=({user:e,emails:a=[],connectedAccounts:s=[]})=>{let[p,u]=U(!1),[f,y]=U("profile");ue(()=>{u(!0)},[]);let D={className:"mr-2 h-4 w-4","aria-hidden":"true"},v=d=>p?t(d,{...D}):null;return o("div",{className:"grid grid-cols-[16rem,1fr] h-screen bg-gray-100",children:[o("div",{className:"h-full border-r p-6 bg-white flex flex-col min-w-0",children:[o("div",{className:"mb-6",children:[t("h1",{className:"text-xl font-bold",children:"Account"}),t("p",{className:"text-sm text-gray-500",children:"Manage your account info."})]}),o("nav",{className:"space-y-1 flex-1",children:[o("button",{onClick:()=>y("profile"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${f==="profile"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[v(fe),"Profile"]}),o("button",{onClick:()=>y("security"),className:`flex items-center w-full px-3 py-2 text-sm rounded-md ${f==="security"?"bg-gray-100 text-gray-900":"text-gray-700 hover:bg-gray-50"}`,children:[v(ve),"Security"]})]})]}),o("div",{className:"h-full p-10 overflow-y-auto min-w-0 bg-white",children:[o("div",{className:"flex justify-between items-center mb-6",children:[t("h2",{className:"text-xl font-semibold",children:f==="profile"?"Profile details":"Security settings"}),t("button",{className:"text-gray-500 hover:text-gray-700",children:v(ge)})]}),f==="profile"?o("div",{className:"space-y-8",children:[o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Profile"}),o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[o(N,{className:"h-12 w-12 mr-4 border",children:[t(C,{src:e.image,alt:"Profile picture"}),t(M,{children:e.name.split(" ").map(d=>d[0]).join("")})]}),t("span",{className:"font-medium",children:e.name})]}),t(l,{variant:"outline",size:"sm",children:"Edit profile"})]})]}),o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Email addresses"}),o("div",{className:"space-y-3",children:[(a.length>0?a:[{address:e.email,isPrimary:!0}]).map((d,P)=>o("div",{className:"flex items-center justify-between",children:[t("span",{children:d.address}),d.isPrimary&&t(A,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]},d.address)),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[v(T),"Add email address"]})]})]}),o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Phone number"}),o("div",{className:"space-y-3",children:[o("div",{className:"flex items-center justify-between",children:[t("span",{children:"+1 (555) 123-4567"}),t(A,{variant:"outline",className:"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100",children:"Primary"})]}),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[v(T),"Add phone number"]})]})]}),o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Connected accounts"}),o("div",{className:"space-y-3",children:[s.length>0?s.map((d,P)=>o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[t("div",{className:"mr-2",children:t("span",{children:d.provider})}),t("span",{children:d.provider})]}),t("span",{className:"text-sm text-gray-500",children:d.email})]},d.provider+d.email)):o("div",{className:"flex items-center justify-between",children:[o("div",{className:"flex items-center",children:[t("div",{className:"mr-2",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"20",height:"20",children:[t("path",{fill:"#4285F4",d:"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"}),t("path",{fill:"#34A853",d:"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"}),t("path",{fill:"#FBBC05",d:"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"}),t("path",{fill:"#EA4335",d:"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"})]})}),t("span",{children:"Google"})]}),t("span",{className:"text-sm text-gray-500",children:e.email})]}),o(l,{variant:"ghost",size:"sm",className:"flex items-center text-gray-700",children:[v(T),"Connect account"]})]})]})]}):o("div",{className:"space-y-8",children:[o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Two-factor authentication"}),t("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[t("p",{className:"font-medium",children:"Two-factor authentication"}),t("p",{className:"text-sm text-gray-500",children:"Add an extra layer of security to your account"})]}),t(l,{variant:"outline",size:"sm",children:"Enable"})]})})]}),o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Password"}),t("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[t("p",{className:"font-medium",children:"Change password"}),t("p",{className:"text-sm text-gray-500",children:"Last changed 3 months ago"})]}),t(l,{variant:"outline",size:"sm",children:"Change"})]})})]}),o("div",{children:[t("h3",{className:"text-sm font-medium mb-4",children:"Active sessions"}),t("div",{className:"space-y-3",children:o("div",{className:"flex items-center justify-between",children:[o("div",{children:[t("p",{className:"font-medium",children:"Current session"}),t("p",{className:"text-sm text-gray-500",children:"Chrome on Windows \u2022 Active now"})]}),t(l,{variant:"outline",size:"sm",children:"Sign out"})]})})]})]})]}),o("div",{className:"absolute bottom-4 text-xs text-gray-500 flex items-center",children:["Secured by",o("span",{className:"ml-1 font-medium flex items-center",children:[t("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"mr-1",children:t("path",{d:"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z",fill:"#6C47FF"})}),"Authdog"]})]})]})};export{l as Button,de as Navbar,he as UserProfile};
|
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/core/navbar.tsx","../src/components/ui/avatar.tsx","../src/components/ui/dropdown-menu.tsx","../src/components/ui/sheet.tsx","../src/components/core/user-profile.tsx","../src/components/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\"\n\nimport type React from \"react\"\nimport { useState, useEffect } from \"react\"\nimport { User, Settings, LogOut, Menu } from \"lucide-react\"\nimport type { LucideProps } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\"\nimport { Sheet, SheetContent, SheetTrigger } from \"../../components/ui/sheet\"\n\ninterface NavItem {\n title: string\n href: string\n disabled?: boolean\n}\n\ninterface NavbarProps {\n items?: NavItem[]\n children?: React.ReactNode\n className?: string\n logoText?: string\n user?: {\n name?: string\n email?: string\n image?: string\n }\n onNavItemClick?: (href: string) => void;\n onProfileSelected?: () => void;\n onLogout?: () => void;\n}\n\nexport function Navbar({\n items = [\n { title: \"Dashboard\", href: \"/dashboard\" },\n { title: \"Projects\", href: \"/projects\" },\n { title: \"Team\", href: \"/team\" },\n { title: \"Reports\", href: \"/reports\" },\n ],\n children,\n className,\n logoText = \"Company\",\n user = {\n name: \"John Doe\",\n email: \"john@example.com\",\n image: \"https://i.pravatar.cc/150?u=a042581f4e29026704d\",\n },\n onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),\n onProfileSelected,\n onLogout = () => console.log(\"Logout clicked\"),\n}: NavbarProps) {\n const [open, setOpen] = useState(false)\n const [isMounted, setIsMounted] = useState(false)\n\n useEffect(() => {\n setIsMounted(true)\n }, [])\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <header className={cn(\"border-b bg-background\", className)}>\n <div className=\"container flex h-16 items-center justify-between px-4 md:px-6\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xl font-bold\">{logoText}</span>\n <nav className=\"hidden md:flex gap-6\">\n {items?.map((item, index) => (\n <span\n key={index}\n // href={item.href}\n onClick={() => {\n if (!item.disabled) {\n onNavItemClick(item.href)\n }\n }}\n className={cn(\n \"text-sm font-medium transition-colors hover:text-primary cursor-pointer\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n >\n {item.title}\n </span>\n ))}\n </nav>\n </div>\n <div className=\"flex items-center gap-4\">\n {children}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" className=\"relative h-8 w-8 rounded-full\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={user.image || \"/placeholder.svg\"} alt={user.name} />\n <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>\n </Avatar>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-56\" align=\"end\" forceMount>\n <DropdownMenuLabel className=\"font-normal\">\n <div className=\"flex flex-col space-y-1\">\n <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n <p className=\"text-xs leading-none text-muted-foreground\">{user.email}</p>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={onProfileSelected}>\n {renderIcon(User)}\n <span>Profile</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n {renderIcon(Settings)}\n <span>Settings</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem onClick={onLogout}>\n {renderIcon(LogOut)}\n <span>Log out</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open Menu\">\n {renderIcon(Menu)}\n </Button>\n </SheetTrigger>\n <SheetContent side=\"left\" className=\"pr-0\">\n <nav className=\"grid gap-2 py-6\">\n {items?.map((item, index) => (\n <a\n key={index}\n href={item.href}\n className={cn(\n \"flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n onClick={() => setOpen(false)}\n >\n {item.title}\n </a>\n ))}\n </nav>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </header>\n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n className={cn(\n \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full\", className)}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted flex size-full items-center justify-center rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>\nconst CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>\nconst ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n )\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n )\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CircleIcon className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n )\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n className\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n","\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport { Card } from \"../../components/ui/card\"\nimport { Badge } from \"../../components/ui/badge\"\nimport { PlusCircle, User, Shield, X, LucideProps } from \"lucide-react\"\n\nexport interface UserProfileProps {\n user: {\n name: string;\n email: string;\n image: string;\n };\n emails?: { address: string; isPrimary?: boolean }[];\n connectedAccounts?: { provider: string; email: string }[];\n}\n\nexport const UserProfile = ({\n user,\n emails = [],\n connectedAccounts = [],\n}: UserProfileProps) => {\n const [isMounted, setIsMounted] = useState(false)\n const [activeTab, setActiveTab] = useState<\"profile\" | \"security\">(\"profile\");\n\n useEffect(() => {\n setIsMounted(true)\n }, []);\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <div className=\"grid grid-cols-[16rem,1fr] h-screen bg-gray-100\">\n <div className=\"h-full border-r p-6 bg-white flex flex-col min-w-0\">\n <div className=\"mb-6\">\n <h1 className=\"text-xl font-bold\">Account</h1>\n <p className=\"text-sm text-gray-500\">Manage your account info.</p>\n </div>\n\n <nav className=\"space-y-1 flex-1\">\n <button\n onClick={() => setActiveTab(\"profile\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"profile\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(User)}\n Profile\n </button>\n <button\n onClick={() => setActiveTab(\"security\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"security\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(Shield)}\n Security\n </button>\n </nav>\n </div>\n\n <div className=\"h-full p-10 overflow-y-auto min-w-0 bg-white\">\n <div className=\"flex justify-between items-center mb-6\">\n <h2 className=\"text-xl font-semibold\">\n {activeTab === \"profile\" ? \"Profile details\" : \"Security settings\"}\n </h2>\n <button className=\"text-gray-500 hover:text-gray-700\">\n {renderIcon(X)}\n </button>\n </div>\n\n {activeTab === \"profile\" ? (\n <div className=\"space-y-8\">\n {/* Profile Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Profile</h3>\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <Avatar className=\"h-12 w-12 mr-4 border\">\n <AvatarImage src={user.image} alt=\"Profile picture\" />\n <AvatarFallback>{user.name.split(\" \").map(n => n[0]).join(\"\")}</AvatarFallback>\n </Avatar>\n <span className=\"font-medium\">{user.name}</span>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Edit profile\n </Button>\n </div>\n </div>\n\n {/* Email Addresses Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Email addresses</h3>\n <div className=\"space-y-3\">\n {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (\n <div className=\"flex items-center justify-between\" key={email.address}>\n <span>{email.address}</span>\n {email.isPrimary && (\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n )}\n </div>\n ))}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add email address\n </Button>\n </div>\n </div>\n\n {/* Phone Number Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Phone number</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <span>+1 (555) 123-4567</span>\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n </div>\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add phone number\n </Button>\n </div>\n </div>\n\n {/* Connected Accounts Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Connected accounts</h3>\n <div className=\"space-y-3\">\n {connectedAccounts.length > 0 ? connectedAccounts.map((acc, i) => (\n <div className=\"flex items-center justify-between\" key={acc.provider + acc.email}>\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <span>{acc.provider}</span>\n </div>\n <span>{acc.provider}</span>\n </div>\n <span className=\"text-sm text-gray-500\">{acc.email}</span>\n </div>\n )) : (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" />\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" />\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" />\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" />\n </svg>\n </div>\n <span>Google</span>\n </div>\n <span className=\"text-sm text-gray-500\">{user.email}</span>\n </div>\n )}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Connect account\n </Button>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"space-y-8\">\n {/* Security Settings */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Two-factor authentication</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Two-factor authentication</p>\n <p className=\"text-sm text-gray-500\">Add an extra layer of security to your account</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Enable\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Password</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Change password</p>\n <p className=\"text-sm text-gray-500\">Last changed 3 months ago</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Change\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Active sessions</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Current session</p>\n <p className=\"text-sm text-gray-500\">Chrome on Windows • Active now</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Sign out\n </Button>\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n <div className=\"absolute bottom-4 text-xs text-gray-500 flex items-center\">\n Secured by\n <span className=\"ml-1 font-medium flex items-center\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"mr-1\"\n >\n <path d=\"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z\" fill=\"#6C47FF\" />\n </svg>\n Authdog\n </span>\n </div>\n </div>\n )\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":";AAAA,UAAYA,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BCFvC,OAA0B,QAAAC,MAAY,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CDwCM,cAAAC,MAAA,oBAvCN,IAAMC,EAAiBC,EACrB,yRACA,CACE,SAAU,CACR,QAAS,CACP,QAAS,yDACT,YACE,qEACF,QACE,iFACF,UACE,+DACF,MAAO,+CACP,KAAM,iDACR,EACA,KAAM,CACJ,QAAS,iBACT,GAAI,sBACJ,GAAI,uBACJ,KAAM,WACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAQMC,EAAe,aACnB,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,KAAAC,EAAM,QAAAC,EAAU,GAAO,GAAGC,CAAM,EAAGC,IAGtDT,EAFWO,EAAUG,EAAO,SAE3B,CACC,UAAWC,EAAGV,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAU,CAAC,CAAC,EAC1D,IAAKK,EACJ,GAAGD,EACN,CAGN,EACAL,EAAO,YAAc,SElDrB,OAAS,YAAAS,EAAU,aAAAC,OAAiB,QACpC,OAAS,QAAAC,GAAM,YAAAC,GAAU,UAAAC,GAAQ,QAAAC,OAAY,eCD7C,UAAYC,MAAqB,yBAS7B,cAAAC,MAAA,oBALJ,SAASC,EAAO,CACd,UAAAC,EACA,GAAGC,CACL,EAAsD,CACpD,OACEH,EAAiB,OAAhB,CACC,YAAU,SACV,UAAWI,EACT,6DACAF,CACF,EACC,GAAGC,EACN,CAEJ,CAEA,SAASE,EAAY,CACnB,UAAAH,EACA,GAAGC,CACL,EAAuD,CACrD,OACEH,EAAiB,QAAhB,CACC,YAAU,eACV,UAAWI,EAAG,0BAA2BF,CAAS,EACjD,GAAGC,EACN,CAEJ,CAEA,SAASG,EAAe,CACtB,UAAAJ,EACA,GAAGC,CACL,EAA0D,CACxD,OACEH,EAAiB,WAAhB,CACC,YAAU,kBACV,UAAWI,EACT,mEACAF,CACF,EACC,GAAGC,EACN,CAEJ,CC/CA,UAAYI,MAA2B,gCACvC,OAAS,SAAAC,GAAO,gBAAAC,GAAc,UAAAC,OAAc,eAYnC,cAAAC,EAgFL,QAAAC,OAhFK,oBAHT,SAASC,EAAa,CACpB,GAAGC,CACL,EAA4D,CAC1D,OAAOC,EAAuB,OAAtB,CAA2B,YAAU,gBAAiB,GAAGD,EAAO,CAC1E,CAUA,SAASE,EAAoB,CAC3B,GAAGC,CACL,EAA+D,CAC7D,OACEC,EAAuB,UAAtB,CACC,YAAU,wBACT,GAAGD,EACN,CAEJ,CAEA,SAASE,EAAoB,CAC3B,UAAAC,EACA,WAAAC,EAAa,EACb,GAAGJ,CACL,EAA+D,CAC7D,OACEC,EAAuB,SAAtB,CACC,SAAAA,EAAuB,UAAtB,CACC,YAAU,wBACV,WAAYG,EACZ,UAAWC,EACT,yjBACAF,CACF,EACC,GAAGH,EACN,EACF,CAEJ,CAEA,SAASM,EAAkB,CACzB,GAAGN,CACL,EAA6D,CAC3D,OACEC,EAAuB,QAAtB,CAA4B,YAAU,sBAAuB,GAAGD,EAAO,CAE5E,CAEA,SAASO,EAAiB,CACxB,UAAAJ,EACA,MAAAK,EACA,QAAAC,EAAU,UACV,GAAGT,CACL,EAGG,CACD,OACEC,EAAuB,OAAtB,CACC,YAAU,qBACV,aAAYO,EACZ,eAAcC,EACd,UAAWJ,EACT,8mBACAF,CACF,EACC,GAAGH,EACN,CAEJ,CA+DA,SAASU,EAAkB,CACzB,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EAEG,CACD,OACEC,EAAuB,QAAtB,CACC,YAAU,sBACV,aAAYF,EACZ,UAAWG,EACT,oDACAJ,CACF,EACC,GAAGE,EACN,CAEJ,CAEA,SAASG,EAAsB,CAC7B,UAAAL,EACA,GAAGE,CACL,EAAiE,CAC/D,OACEC,EAAuB,YAAtB,CACC,YAAU,0BACV,UAAWC,EAAG,4BAA6BJ,CAAS,EACnD,GAAGE,EACN,CAEJ,CClLA,UAAYI,MAAoB,yBAChC,OAAS,KAAAC,MAAS,eAQT,cAAAC,EAiED,QAAAC,MAjEC,oBAHT,IAAMC,GAAQC,EAEd,SAASC,EAAM,CAAE,GAAGC,CAAM,EAAqD,CAC7E,OAAOL,EAAgB,OAAf,CAAoB,YAAU,QAAS,GAAGK,EAAO,CAC3D,CAEA,SAASC,EAAa,CACpB,GAAGD,CACL,EAAwD,CACtD,OAAOL,EAAgB,UAAf,CAAuB,YAAU,gBAAiB,GAAGK,EAAO,CACtE,CAQA,SAASE,GAAY,CACnB,GAAGC,CACL,EAAuD,CACrD,OAAOC,EAAgB,SAAf,CAAsB,YAAU,eAAgB,GAAGD,EAAO,CACpE,CAEA,SAASE,GAAa,CACpB,UAAAC,EACA,GAAGH,CACL,EAAwD,CACtD,OACEC,EAAgB,UAAf,CACC,YAAU,gBACV,UAAWG,EACT,yJACAD,CACF,EACC,GAAGH,EACN,CAEJ,CAEA,SAASK,EAAa,CACpB,UAAAF,EACA,SAAAG,EACA,KAAAC,EAAO,QACP,GAAGP,CACL,EAEG,CACD,OACEQ,EAACT,GAAA,CACC,UAAAE,EAACC,GAAA,EAAa,EACdM,EAAgB,UAAf,CACC,YAAU,gBACV,UAAWJ,EACT,6MACAG,IAAS,SACP,mIACFA,IAAS,QACP,gIACFA,IAAS,OACP,2GACFA,IAAS,UACP,oHACFJ,CACF,EACC,GAAGH,EAEH,UAAAM,EACDE,EAAgB,QAAf,CAAqB,UAAU,6OAC9B,UAAAP,EAACQ,GAAA,CAAM,UAAU,SAAS,EAC1BR,EAAC,QAAK,UAAU,UAAU,iBAAK,GACjC,GACF,GACF,CAEJ,CHTW,cAAAS,EAMH,QAAAC,MANG,oBAjCJ,SAASC,GAAO,CACrB,MAAAC,EAAQ,CACN,CAAE,MAAO,YAAa,KAAM,YAAa,EACzC,CAAE,MAAO,WAAY,KAAM,WAAY,EACvC,CAAE,MAAO,OAAQ,KAAM,OAAQ,EAC/B,CAAE,MAAO,UAAW,KAAM,UAAW,CACvC,EACA,SAAAC,EACA,UAAAC,EACA,SAAAC,EAAW,UACX,KAAAC,EAAO,CACL,KAAM,WACN,MAAO,mBACP,MAAO,iDACT,EACA,eAAAC,EAAkBC,GAAiB,QAAQ,IAAI,iBAAiBA,CAAI,EAAE,EACtE,kBAAAC,EACA,SAAAC,EAAW,IAAM,QAAQ,IAAI,gBAAgB,CAC/C,EAAgB,CACd,GAAM,CAACC,EAAMC,CAAO,EAAIC,EAAS,EAAK,EAChC,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAK,EAEhDG,GAAU,IAAM,CACdD,EAAa,EAAI,CACnB,EAAG,CAAC,CAAC,EAEL,IAAME,EAAyB,CAC7B,UAAW,eACX,cAAe,MACjB,EAEMC,EAAcC,GACbL,EACEf,EAACoB,EAAA,CAAM,GAAGF,EAAW,EADL,KAIzB,OACElB,EAAC,UAAO,UAAWqB,EAAG,yBAA0BhB,CAAS,EACvD,SAAAJ,EAAC,OAAI,UAAU,gEACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,QAAK,UAAU,oBAAqB,SAAAM,EAAS,EAC9CN,EAAC,OAAI,UAAU,uBACZ,SAAAG,GAAO,IAAI,CAACmB,EAAMC,IACjBvB,EAAC,QAGC,QAAS,IAAM,CACRsB,EAAK,UACRd,EAAec,EAAK,IAAI,CAE5B,EACA,UAAWD,EACT,0EACAC,EAAK,UAAY,+BACnB,EAEC,SAAAA,EAAK,OAZDC,CAaP,CACD,EACH,GACF,EACAtB,EAAC,OAAI,UAAU,0BACZ,UAAAG,EACDH,EAACuB,EAAA,CACC,UAAAxB,EAACyB,EAAA,CAAoB,QAAO,GAC1B,SAAAzB,EAAC0B,EAAA,CAAO,QAAQ,QAAQ,UAAU,gCAChC,SAAAzB,EAAC0B,EAAA,CAAO,UAAU,UAChB,UAAA3B,EAAC4B,EAAA,CAAY,IAAKrB,EAAK,OAAS,mBAAoB,IAAKA,EAAK,KAAM,EACpEP,EAAC6B,EAAA,CAAgB,SAAAtB,EAAK,MAAM,OAAO,CAAC,EAAE,GACxC,EACF,EACF,EACAN,EAAC6B,EAAA,CAAoB,UAAU,OAAO,MAAM,MAAM,WAAU,GAC1D,UAAA9B,EAAC+B,EAAA,CAAkB,UAAU,cAC3B,SAAA9B,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,KAAE,UAAU,mCAAoC,SAAAO,EAAK,KAAK,EAC3DP,EAAC,KAAE,UAAU,6CAA8C,SAAAO,EAAK,MAAM,GACxE,EACF,EACAP,EAACgC,EAAA,EAAsB,EACvB/B,EAACgC,EAAA,CACC,UAAAhC,EAACiC,EAAA,CAAiB,QAASxB,EACxB,UAAAS,EAAWgB,EAAI,EAChBnC,EAAC,QAAK,mBAAO,GACf,EACAC,EAACiC,EAAA,CACE,UAAAf,EAAWiB,EAAQ,EACpBpC,EAAC,QAAK,oBAAQ,GAChB,GACF,EACAA,EAACgC,EAAA,EAAsB,EACvB/B,EAACiC,EAAA,CAAiB,QAASvB,EACxB,UAAAQ,EAAWkB,EAAM,EAClBrC,EAAC,QAAK,mBAAO,GACf,GACF,GACF,EACAC,EAACqC,EAAA,CAAM,KAAM1B,EAAM,aAAcC,EAC/B,UAAAb,EAACuC,EAAA,CAAa,QAAO,GACnB,SAAAvC,EAAC0B,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,YAAY,aAAW,YAClE,SAAAP,EAAWqB,EAAI,EAClB,EACF,EACAxC,EAACyC,EAAA,CAAa,KAAK,OAAO,UAAU,OAClC,SAAAzC,EAAC,OAAI,UAAU,kBACZ,SAAAG,GAAO,IAAI,CAACmB,EAAMC,IACjBvB,EAAC,KAEC,KAAMsB,EAAK,KACX,UAAWD,EACT,oFACAC,EAAK,UAAY,+BACnB,EACA,QAAS,IAAMT,EAAQ,EAAK,EAE3B,SAAAS,EAAK,OARDC,CASP,CACD,EACH,EACF,GACF,GACF,GACF,EACF,CAEJ,CIrKA,OAAS,aAAAmB,GAAW,YAAAC,MAAgB,QCDpC,OAAS,QAAAC,OAAY,uBACrB,OAAS,OAAAC,OAA8B,2BAmCnC,cAAAC,OAAA,oBA/BJ,IAAMC,GAAgBC,GACpB,iZACA,CACE,SAAU,CACR,QAAS,CACP,QACE,iFACF,UACE,uFACF,YACE,4KACF,QACE,wEACJ,CACF,EACA,gBAAiB,CACf,QAAS,SACX,CACF,CACF,EAEA,SAASC,EAAM,CACb,UAAAC,EACA,QAAAC,EACA,QAAAC,EAAU,GACV,GAAGC,CACL,EAC8D,CAG5D,OACEP,GAHWM,EAAUE,GAAO,OAG3B,CACC,YAAU,QACV,UAAWC,EAAGR,GAAc,CAAE,QAAAI,CAAQ,CAAC,EAAGD,CAAS,EAClD,GAAGG,EACN,CAEJ,CDpCA,OAAS,cAAAG,EAAY,QAAAC,GAAM,UAAAC,GAAQ,KAAAC,OAAsB,eA+B9C,cAAAC,EAMH,QAAAC,MANG,oBAnBJ,IAAMC,GAAc,CAAC,CAC1B,KAAAC,EACA,OAAAC,EAAS,CAAC,EACV,kBAAAC,EAAoB,CAAC,CACvB,IAAwB,CACtB,GAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAC1C,CAACC,EAAWC,CAAY,EAAIF,EAAiC,SAAS,EAE5EG,GAAU,IAAM,CACdJ,EAAa,EAAI,CACnB,EAAG,CAAC,CAAC,EAEL,IAAMK,EAAyB,CAC7B,UAAW,eACX,cAAe,MACjB,EAEMC,EAAcC,GACbR,EACEN,EAACc,EAAA,CAAM,GAAGF,EAAW,EADL,KAIzB,OACEX,EAAC,OAAI,UAAU,kDACb,UAAAA,EAAC,OAAI,UAAU,qDACb,UAAAA,EAAC,OAAI,UAAU,OACb,UAAAD,EAAC,MAAG,UAAU,oBAAoB,mBAAO,EACzCA,EAAC,KAAE,UAAU,wBAAwB,qCAAyB,GAChE,EAEAC,EAAC,OAAI,UAAU,mBACb,UAAAA,EAAC,UACC,QAAS,IAAMS,EAAa,SAAS,EACrC,UAAW,yDACTD,IAAc,UAAY,4BAA8B,gCAC1D,GAEC,UAAAI,EAAWhB,EAAI,EAAE,WAEpB,EACAI,EAAC,UACC,QAAS,IAAMS,EAAa,UAAU,EACtC,UAAW,yDACTD,IAAc,WAAa,4BAA8B,gCAC3D,GAEC,UAAAI,EAAWf,EAAM,EAAE,YAEtB,GACF,GACF,EAEAG,EAAC,OAAI,UAAU,+CACb,UAAAA,EAAC,OAAI,UAAU,yCACb,UAAAD,EAAC,MAAG,UAAU,wBACX,SAAAS,IAAc,UAAY,kBAAoB,oBACjD,EACAT,EAAC,UAAO,UAAU,oCACf,SAAAa,EAAWd,EAAC,EACf,GACF,EAECU,IAAc,UACbR,EAAC,OAAI,UAAU,YAEb,UAAAA,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,mBAAO,EAChDC,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,oBACb,UAAAA,EAACc,EAAA,CAAO,UAAU,wBAChB,UAAAf,EAACgB,EAAA,CAAY,IAAKb,EAAK,MAAO,IAAI,kBAAkB,EACpDH,EAACiB,EAAA,CAAgB,SAAAd,EAAK,KAAK,MAAM,GAAG,EAAE,IAAIe,GAAKA,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,GAChE,EACAlB,EAAC,QAAK,UAAU,cAAe,SAAAG,EAAK,KAAK,GAC3C,EACAH,EAACmB,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,wBAEpC,GACF,GACF,EAGAlB,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,2BAAe,EACxDC,EAAC,OAAI,UAAU,YACX,WAAAG,EAAO,OAAS,EAAIA,EAAS,CAAC,CAAE,QAASD,EAAK,MAAO,UAAW,EAAK,CAAC,GAAG,IAAI,CAACiB,EAAOC,IACrFpB,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,QAAM,SAAAoB,EAAM,QAAQ,EACpBA,EAAM,WACLpB,EAACsB,EAAA,CAAM,QAAQ,UAAU,UAAU,sDAAsD,mBAEzF,IALoDF,EAAM,OAO9D,CACD,EACDnB,EAACkB,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,kCACzC,UAAAN,EAAWjB,CAAU,EAAE,qBAE1B,GACF,GACF,EAGAK,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,wBAAY,EACrDC,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,QAAK,6BAAiB,EACvBA,EAACsB,EAAA,CAAM,QAAQ,UAAU,UAAU,sDAAsD,mBAEzF,GACF,EACArB,EAACkB,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,kCACzC,UAAAN,EAAWjB,CAAU,EAAE,oBAE1B,GACF,GACF,EAGAK,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,8BAAkB,EAC3DC,EAAC,OAAI,UAAU,YACZ,UAAAI,EAAkB,OAAS,EAAIA,EAAkB,IAAI,CAACkB,EAAKF,IAC1DpB,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,oBACb,UAAAD,EAAC,OAAI,UAAU,OACb,SAAAA,EAAC,QAAM,SAAAuB,EAAI,SAAS,EACtB,EACAvB,EAAC,QAAM,SAAAuB,EAAI,SAAS,GACtB,EACAvB,EAAC,QAAK,UAAU,wBAAyB,SAAAuB,EAAI,MAAM,IAPGA,EAAI,SAAWA,EAAI,KAQ3E,CACD,EACCtB,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OAAI,UAAU,oBACb,UAAAD,EAAC,OAAI,UAAU,OACb,SAAAC,EAAC,OAAI,MAAM,6BAA6B,QAAQ,YAAY,MAAM,KAAK,OAAO,KAC5E,UAAAD,EAAC,QAAK,KAAK,UAAU,EAAE,0HAA0H,EACjJA,EAAC,QAAK,KAAK,UAAU,EAAE,wIAAwI,EAC/JA,EAAC,QAAK,KAAK,UAAU,EAAE,gIAAgI,EACvJA,EAAC,QAAK,KAAK,UAAU,EAAE,sIAAsI,GAC/J,EACF,EACAA,EAAC,QAAK,kBAAM,GACd,EACAA,EAAC,QAAK,UAAU,wBAAyB,SAAAG,EAAK,MAAM,GACtD,EAEFF,EAACkB,EAAA,CAAO,QAAQ,QAAQ,KAAK,KAAK,UAAU,kCACzC,UAAAN,EAAWjB,CAAU,EAAE,mBAE1B,GACF,GACF,GACF,EAEAK,EAAC,OAAI,UAAU,YAEb,UAAAA,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,qCAAyB,EAClEA,EAAC,OAAI,UAAU,YACb,SAAAC,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OACC,UAAAD,EAAC,KAAE,UAAU,cAAc,qCAAyB,EACpDA,EAAC,KAAE,UAAU,wBAAwB,0DAA8C,GACrF,EACAA,EAACmB,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,kBAEpC,GACF,EACF,GACF,EAEAlB,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,oBAAQ,EACjDA,EAAC,OAAI,UAAU,YACb,SAAAC,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OACC,UAAAD,EAAC,KAAE,UAAU,cAAc,2BAAe,EAC1CA,EAAC,KAAE,UAAU,wBAAwB,qCAAyB,GAChE,EACAA,EAACmB,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,kBAEpC,GACF,EACF,GACF,EAEAlB,EAAC,OACC,UAAAD,EAAC,MAAG,UAAU,2BAA2B,2BAAe,EACxDA,EAAC,OAAI,UAAU,YACb,SAAAC,EAAC,OAAI,UAAU,oCACb,UAAAA,EAAC,OACC,UAAAD,EAAC,KAAE,UAAU,cAAc,2BAAe,EAC1CA,EAAC,KAAE,UAAU,wBAAwB,+CAA8B,GACrE,EACAA,EAACmB,EAAA,CAAO,QAAQ,UAAU,KAAK,KAAK,oBAEpC,GACF,EACF,GACF,GACF,GAEJ,EAEAlB,EAAC,OAAI,UAAU,4DAA4D,uBAEzEA,EAAC,QAAK,UAAU,qCACd,UAAAD,EAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,OAEV,SAAAA,EAAC,QAAK,EAAE,2CAA2C,KAAK,UAAU,EACpE,EAAM,WAER,GACF,GACF,CAEJ","names":["React","Slot","cva","clsx","twMerge","cn","inputs","jsx","buttonVariants","cva","Button","className","variant","size","asChild","props","ref","Slot","cn","useState","useEffect","User","Settings","LogOut","Menu","AvatarPrimitive","jsx","Avatar","className","props","cn","AvatarImage","AvatarFallback","DropdownMenuPrimitive","Check","ChevronRight","Circle","jsx","jsxs","DropdownMenu","props","jsx","DropdownMenuTrigger","props","jsx","DropdownMenuContent","className","sideOffset","cn","DropdownMenuGroup","DropdownMenuItem","inset","variant","DropdownMenuLabel","className","inset","props","jsx","cn","DropdownMenuSeparator","SheetPrimitive","X","jsx","jsxs","XIcon","X","Sheet","props","SheetTrigger","SheetPortal","props","jsx","SheetOverlay","className","cn","SheetContent","children","side","jsxs","XIcon","jsx","jsxs","Navbar","items","children","className","logoText","user","onNavItemClick","href","onProfileSelected","onLogout","open","setOpen","useState","isMounted","setIsMounted","useEffect","iconProps","renderIcon","Icon","cn","item","index","DropdownMenu","DropdownMenuTrigger","Button","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","User","Settings","LogOut","Sheet","SheetTrigger","Menu","SheetContent","useEffect","useState","Slot","cva","jsx","badgeVariants","cva","Badge","className","variant","asChild","props","Slot","cn","PlusCircle","User","Shield","X","jsx","jsxs","UserProfile","user","emails","connectedAccounts","isMounted","setIsMounted","useState","activeTab","setActiveTab","useEffect","iconProps","renderIcon","Icon","Avatar","AvatarImage","AvatarFallback","n","Button","email","i","Badge","acc"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/button.tsx","../src/lib/utils.ts","../src/components/core/navbar.tsx","../src/components/ui/avatar.tsx","../src/components/ui/dropdown-menu.tsx","../src/components/ui/sheet.tsx","../src/components/icons.tsx","../src/components/core/user-profile.tsx","../src/components/ui/badge.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","\"use client\"\n\nimport type React from \"react\"\nimport { useState } from \"react\"\nimport { User, Settings, LogOut, Menu } from \"lucide-react\"\n// import type { LucideProps } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\"\nimport { Sheet, SheetContent, SheetTrigger } from \"../../components/ui/sheet\"\nimport { IconWrapper } from \"../icons\"\n\ninterface NavItem {\n title: string\n href: string\n disabled?: boolean\n}\n\ninterface NavbarProps {\n items?: NavItem[]\n children?: React.ReactNode\n className?: string\n logoText?: string\n user?: {\n name?: string\n email?: string\n image?: string\n }\n onNavigateHome?: () => void;\n onNavItemClick?: (href: string) => void;\n onProfileSelected?: () => void;\n onLogout?: () => void;\n}\n\nexport function Navbar({\n items = [\n { title: \"Dashboard\", href: \"/dashboard\" },\n { title: \"Projects\", href: \"/projects\" },\n { title: \"Team\", href: \"/team\" },\n { title: \"Reports\", href: \"/reports\" },\n ],\n children,\n className,\n logoText = \"ACME Corp\",\n user = {\n name: \"John Doe\",\n email: \"john@example.com\",\n image: \"https://i.pravatar.cc/150?u=a042581f4e29026704d\",\n },\n onNavigateHome = () => console.log(\"Navigating to home\"),\n onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),\n onProfileSelected,\n onLogout = () => console.log(\"Logout clicked\"),\n}: NavbarProps) {\n const [open, setOpen] = useState(false)\n // const [isMounted, setIsMounted] = useState(false)\n\n // useEffect(() => {\n // setIsMounted(true)\n // }, [])\n\n // const iconProps: LucideProps = {\n // className: \"mr-2 h-4 w-4\",\n // \"aria-hidden\": \"true\"\n // }\n\n // const renderIcon = (Icon: any) => {\n // if (!isMounted) return null\n // return <Icon {...iconProps} />\n // }\n\n return (\n <header className={cn(\"border-b bg-background\", className)}>\n <div className=\"container flex h-16 items-center justify-between px-4 md:px-6\">\n <div className=\"flex items-center gap-4\">\n <span className=\"text-xl font-bold cursor-pointer\" onClick={onNavigateHome}>{logoText}</span>\n <nav className=\"hidden md:flex gap-6\">\n {items?.map((item, index) => (\n <span\n key={index}\n // href={item.href}\n onClick={() => {\n if (!item.disabled) {\n onNavItemClick(item.href)\n }\n }}\n className={cn(\n \"text-sm font-medium transition-colors hover:text-primary cursor-pointer\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n >\n {item.title}\n </span>\n ))}\n </nav>\n </div>\n <div className=\"flex items-center gap-4\">\n {children}\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" className=\"relative h-8 w-8 rounded-full\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={user.image || \"/placeholder.svg\"} alt={user.name} />\n <AvatarFallback>{user.name?.charAt(0)}</AvatarFallback>\n </Avatar>\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-56\" align=\"end\" forceMount>\n <DropdownMenuLabel className=\"font-normal\">\n <div className=\"flex flex-col space-y-1\">\n <p className=\"text-sm font-medium leading-none\">{user.name}</p>\n <p className=\"text-xs leading-none text-muted-foreground\">{user.email}</p>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={onProfileSelected}>\n {/* {renderIcon(User)} */}\n <IconWrapper Icon={User} />\n <span>Profile</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n {/* {renderIcon(Settings)} */}\n <IconWrapper Icon={Settings} />\n <span>Settings</span>\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem onClick={onLogout}>\n {/* {renderIcon(LogOut)} */}\n <IconWrapper Icon={LogOut} />\n <span>Log out</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger asChild>\n <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open Menu\">\n {/* {renderIcon(Menu)} */}\n <IconWrapper Icon={Menu} />\n </Button>\n </SheetTrigger>\n <SheetContent side=\"left\" className=\"pr-0\">\n <nav className=\"grid gap-2 py-6\">\n {items?.map((item, index) => (\n <a\n key={index}\n href={item.href}\n className={cn(\n \"flex w-full items-center rounded-md px-3 py-2 text-sm font-medium hover:bg-accent\",\n item.disabled && \"cursor-not-allowed opacity-80\"\n )}\n onClick={() => setOpen(false)}\n >\n {item.title}\n </a>\n ))}\n </nav>\n </SheetContent>\n </Sheet>\n </div>\n </div>\n </header>\n )\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n return (\n <AvatarPrimitive.Root\n data-slot=\"avatar\"\n className={cn(\n \"relative flex size-8 shrink-0 overflow-hidden rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n return (\n <AvatarPrimitive.Image\n data-slot=\"avatar-image\"\n className={cn(\"aspect-square size-full\", className)}\n {...props}\n />\n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n return (\n <AvatarPrimitive.Fallback\n data-slot=\"avatar-fallback\"\n className={cn(\n \"bg-muted flex size-full items-center justify-center rounded-full\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst CheckIcon = Check as ComponentType<React.SVGProps<SVGSVGElement>>\nconst CircleIcon = Circle as ComponentType<React.SVGProps<SVGSVGElement>>\nconst ChevronRightIcon = ChevronRight as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction DropdownMenu({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n return (\n <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n )\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return (\n <DropdownMenuPrimitive.Trigger\n data-slot=\"dropdown-menu-trigger\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n className\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n )\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return (\n <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n )\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset}\n data-variant={variant}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n )\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n return (\n <DropdownMenuPrimitive.RadioGroup\n data-slot=\"dropdown-menu-radio-group\"\n {...props}\n />\n )\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <CircleIcon className=\"size-2 fill-current\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n )\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset}\n className={cn(\n \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn(\n \"text-muted-foreground ml-auto text-xs tracking-widest\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction DropdownMenuSub({\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n inset?: boolean\n}) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset}\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRightIcon className=\"ml-auto size-4\" />\n </DropdownMenuPrimitive.SubTrigger>\n )\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\nimport type { ComponentType } from \"react\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst XIcon = X as ComponentType<React.SVGProps<SVGSVGElement>>\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n <SheetPortal>\n <SheetOverlay />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n className\n )}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n <XIcon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n","import { LucideProps } from \"lucide-react\"\nimport { useCallback } from \"react\"\n\nconst iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n}\n\nexport const renderIcon = ((Icon: any) => {\n return <Icon {...iconProps} />\n}) as React.FC<{\n Icon: any\n}>\n\n\nexport const IconWrapper = ({ Icon }: { Icon: any }) => {\n return (\n <span className=\"inline-flex items-center justify-center\">\n {renderIcon(Icon)}\n </span>\n )\n}","\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../components/ui/avatar\"\nimport { Button } from \"../../components/ui/button\"\nimport { Card } from \"../../components/ui/card\"\nimport { Badge } from \"../../components/ui/badge\"\nimport { PlusCircle, User, Shield, X, LucideProps } from \"lucide-react\"\n\nexport interface UserProfileProps {\n user: {\n name: string;\n email: string;\n image: string;\n };\n emails?: { address: string; isPrimary?: boolean }[];\n connectedAccounts?: { provider: string; email: string }[];\n}\n\nexport const UserProfile = ({\n user,\n emails = [],\n connectedAccounts = [],\n}: UserProfileProps) => {\n const [isMounted, setIsMounted] = useState(false)\n const [activeTab, setActiveTab] = useState<\"profile\" | \"security\">(\"profile\");\n\n useEffect(() => {\n setIsMounted(true)\n }, []);\n\n const iconProps: LucideProps = {\n className: \"mr-2 h-4 w-4\",\n \"aria-hidden\": \"true\"\n }\n\n const renderIcon = (Icon: any) => {\n if (!isMounted) return null\n return <Icon {...iconProps} />\n }\n\n return (\n <div className=\"grid grid-cols-[16rem,1fr] h-screen bg-gray-100\">\n <div className=\"h-full border-r p-6 bg-white flex flex-col min-w-0\">\n <div className=\"mb-6\">\n <h1 className=\"text-xl font-bold\">Account</h1>\n <p className=\"text-sm text-gray-500\">Manage your account info.</p>\n </div>\n\n <nav className=\"space-y-1 flex-1\">\n <button\n onClick={() => setActiveTab(\"profile\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"profile\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(User)}\n Profile\n </button>\n <button\n onClick={() => setActiveTab(\"security\")}\n className={`flex items-center w-full px-3 py-2 text-sm rounded-md ${\n activeTab === \"security\" ? \"bg-gray-100 text-gray-900\" : \"text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {renderIcon(Shield)}\n Security\n </button>\n </nav>\n </div>\n\n <div className=\"h-full p-10 overflow-y-auto min-w-0 bg-white\">\n <div className=\"flex justify-between items-center mb-6\">\n <h2 className=\"text-xl font-semibold\">\n {activeTab === \"profile\" ? \"Profile details\" : \"Security settings\"}\n </h2>\n <button className=\"text-gray-500 hover:text-gray-700\">\n {renderIcon(X)}\n </button>\n </div>\n\n {activeTab === \"profile\" ? (\n <div className=\"space-y-8\">\n {/* Profile Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Profile</h3>\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <Avatar className=\"h-12 w-12 mr-4 border\">\n <AvatarImage src={user.image} alt=\"Profile picture\" />\n <AvatarFallback>{user.name.split(\" \").map(n => n[0]).join(\"\")}</AvatarFallback>\n </Avatar>\n <span className=\"font-medium\">{user.name}</span>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Edit profile\n </Button>\n </div>\n </div>\n\n {/* Email Addresses Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Email addresses</h3>\n <div className=\"space-y-3\">\n {(emails.length > 0 ? emails : [{ address: user.email, isPrimary: true }]).map((email, i) => (\n <div className=\"flex items-center justify-between\" key={email.address}>\n <span>{email.address}</span>\n {email.isPrimary && (\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n )}\n </div>\n ))}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add email address\n </Button>\n </div>\n </div>\n\n {/* Phone Number Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Phone number</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <span>+1 (555) 123-4567</span>\n <Badge variant=\"outline\" className=\"text-xs bg-gray-100 text-gray-700 hover:bg-gray-100\">\n Primary\n </Badge>\n </div>\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Add phone number\n </Button>\n </div>\n </div>\n\n {/* Connected Accounts Section */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Connected accounts</h3>\n <div className=\"space-y-3\">\n {connectedAccounts.length > 0 ? connectedAccounts.map((acc, i) => (\n <div className=\"flex items-center justify-between\" key={acc.provider + acc.email}>\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <span>{acc.provider}</span>\n </div>\n <span>{acc.provider}</span>\n </div>\n <span className=\"text-sm text-gray-500\">{acc.email}</span>\n </div>\n )) : (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center\">\n <div className=\"mr-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" />\n <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" />\n <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\" />\n <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" />\n </svg>\n </div>\n <span>Google</span>\n </div>\n <span className=\"text-sm text-gray-500\">{user.email}</span>\n </div>\n )}\n <Button variant=\"ghost\" size=\"sm\" className=\"flex items-center text-gray-700\">\n {renderIcon(PlusCircle)}\n Connect account\n </Button>\n </div>\n </div>\n </div>\n ) : (\n <div className=\"space-y-8\">\n {/* Security Settings */}\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Two-factor authentication</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Two-factor authentication</p>\n <p className=\"text-sm text-gray-500\">Add an extra layer of security to your account</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Enable\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Password</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Change password</p>\n <p className=\"text-sm text-gray-500\">Last changed 3 months ago</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Change\n </Button>\n </div>\n </div>\n </div>\n\n <div>\n <h3 className=\"text-sm font-medium mb-4\">Active sessions</h3>\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"font-medium\">Current session</p>\n <p className=\"text-sm text-gray-500\">Chrome on Windows • Active now</p>\n </div>\n <Button variant=\"outline\" size=\"sm\">\n Sign out\n </Button>\n </div>\n </div>\n </div>\n </div>\n )}\n </div>\n\n <div className=\"absolute bottom-4 text-xs text-gray-500 flex items-center\">\n Secured by\n <span className=\"ml-1 font-medium flex items-center\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"mr-1\"\n >\n <path d=\"M8 0L14.9282 4V12L8 16L1.07179 12V4L8 0Z\" fill=\"#6C47FF\" />\n </svg>\n Authdog\n </span>\n </div>\n </div>\n )\n}\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@authdog/react-elements/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n <Comp\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant }), className)}\n {...props}\n />\n )\n}\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":["React","Slot","cva","clsx","twMerge","cn","inputs","jsx","buttonVariants","cva","Button","className","variant","size","asChild","props","ref","Slot","cn","useState","User","Settings","LogOut","Menu","AvatarPrimitive","jsx","Avatar","className","props","cn","AvatarImage","AvatarFallback","DropdownMenuPrimitive","Check","ChevronRight","Circle","jsx","jsxs","DropdownMenu","props","jsx","DropdownMenuTrigger","props","jsx","DropdownMenuContent","className","sideOffset","cn","DropdownMenuGroup","DropdownMenuItem","inset","variant","DropdownMenuLabel","className","inset","props","jsx","cn","DropdownMenuSeparator","SheetPrimitive","X","jsx","jsxs","XIcon","X","Sheet","props","SheetTrigger","SheetPortal","props","jsx","SheetOverlay","className","cn","SheetContent","children","side","jsxs","XIcon","jsx","iconProps","renderIcon","Icon","IconWrapper","jsx","jsxs","Navbar","items","children","className","logoText","user","onNavigateHome","onNavItemClick","href","onProfileSelected","onLogout","open","setOpen","useState","cn","item","index","DropdownMenu","DropdownMenuTrigger","Button","Avatar","AvatarImage","AvatarFallback","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","IconWrapper","User","Settings","LogOut","Sheet","SheetTrigger","Menu","SheetContent","useEffect","useState","Slot","cva","jsx","badgeVariants","cva","Badge","className","variant","asChild","props","Slot","cn","PlusCircle","User","Shield","X","jsx","jsxs","UserProfile","user","emails","connectedAccounts","isMounted","setIsMounted","useState","activeTab","setActiveTab","useEffect","iconProps","renderIcon","Icon","Avatar","AvatarImage","AvatarFallback","n","Button","email","i","Badge","acc"]}
|
package/dist/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import type React from "react"
|
|
4
|
-
import { useState
|
|
4
|
+
import { useState } from "react"
|
|
5
5
|
import { User, Settings, LogOut, Menu } from "lucide-react"
|
|
6
|
-
import type { LucideProps } from "lucide-react"
|
|
6
|
+
// import type { LucideProps } from "lucide-react"
|
|
7
7
|
|
|
8
8
|
import { cn } from "../../lib/utils"
|
|
9
9
|
import { Avatar, AvatarFallback, AvatarImage } from "../../components/ui/avatar"
|
|
@@ -18,6 +18,7 @@ import {
|
|
|
18
18
|
DropdownMenuTrigger,
|
|
19
19
|
} from "../../components/ui/dropdown-menu"
|
|
20
20
|
import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet"
|
|
21
|
+
import { IconWrapper } from "../icons"
|
|
21
22
|
|
|
22
23
|
interface NavItem {
|
|
23
24
|
title: string
|
|
@@ -35,6 +36,7 @@ interface NavbarProps {
|
|
|
35
36
|
email?: string
|
|
36
37
|
image?: string
|
|
37
38
|
}
|
|
39
|
+
onNavigateHome?: () => void;
|
|
38
40
|
onNavItemClick?: (href: string) => void;
|
|
39
41
|
onProfileSelected?: () => void;
|
|
40
42
|
onLogout?: () => void;
|
|
@@ -49,38 +51,39 @@ export function Navbar({
|
|
|
49
51
|
],
|
|
50
52
|
children,
|
|
51
53
|
className,
|
|
52
|
-
logoText = "
|
|
54
|
+
logoText = "ACME Corp",
|
|
53
55
|
user = {
|
|
54
56
|
name: "John Doe",
|
|
55
57
|
email: "john@example.com",
|
|
56
58
|
image: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
|
|
57
59
|
},
|
|
60
|
+
onNavigateHome = () => console.log("Navigating to home"),
|
|
58
61
|
onNavItemClick = (href: string) => console.log(`Navigating to ${href}`),
|
|
59
62
|
onProfileSelected,
|
|
60
63
|
onLogout = () => console.log("Logout clicked"),
|
|
61
64
|
}: NavbarProps) {
|
|
62
65
|
const [open, setOpen] = useState(false)
|
|
63
|
-
const [isMounted, setIsMounted] = useState(false)
|
|
66
|
+
// const [isMounted, setIsMounted] = useState(false)
|
|
64
67
|
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
|
|
67
|
-
}, [])
|
|
68
|
+
// useEffect(() => {
|
|
69
|
+
// setIsMounted(true)
|
|
70
|
+
// }, [])
|
|
68
71
|
|
|
69
|
-
const iconProps: LucideProps = {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
72
|
+
// const iconProps: LucideProps = {
|
|
73
|
+
// className: "mr-2 h-4 w-4",
|
|
74
|
+
// "aria-hidden": "true"
|
|
75
|
+
// }
|
|
73
76
|
|
|
74
|
-
const renderIcon = (Icon: any) => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
77
|
+
// const renderIcon = (Icon: any) => {
|
|
78
|
+
// if (!isMounted) return null
|
|
79
|
+
// return <Icon {...iconProps} />
|
|
80
|
+
// }
|
|
78
81
|
|
|
79
82
|
return (
|
|
80
83
|
<header className={cn("border-b bg-background", className)}>
|
|
81
84
|
<div className="container flex h-16 items-center justify-between px-4 md:px-6">
|
|
82
85
|
<div className="flex items-center gap-4">
|
|
83
|
-
<span className="text-xl font-bold">{logoText}</span>
|
|
86
|
+
<span className="text-xl font-bold cursor-pointer" onClick={onNavigateHome}>{logoText}</span>
|
|
84
87
|
<nav className="hidden md:flex gap-6">
|
|
85
88
|
{items?.map((item, index) => (
|
|
86
89
|
<span
|
|
@@ -122,17 +125,20 @@ export function Navbar({
|
|
|
122
125
|
<DropdownMenuSeparator />
|
|
123
126
|
<DropdownMenuGroup>
|
|
124
127
|
<DropdownMenuItem onClick={onProfileSelected}>
|
|
125
|
-
{renderIcon(User)}
|
|
128
|
+
{/* {renderIcon(User)} */}
|
|
129
|
+
<IconWrapper Icon={User} />
|
|
126
130
|
<span>Profile</span>
|
|
127
131
|
</DropdownMenuItem>
|
|
128
132
|
<DropdownMenuItem>
|
|
129
|
-
{renderIcon(Settings)}
|
|
133
|
+
{/* {renderIcon(Settings)} */}
|
|
134
|
+
<IconWrapper Icon={Settings} />
|
|
130
135
|
<span>Settings</span>
|
|
131
136
|
</DropdownMenuItem>
|
|
132
137
|
</DropdownMenuGroup>
|
|
133
138
|
<DropdownMenuSeparator />
|
|
134
139
|
<DropdownMenuItem onClick={onLogout}>
|
|
135
|
-
{renderIcon(LogOut)}
|
|
140
|
+
{/* {renderIcon(LogOut)} */}
|
|
141
|
+
<IconWrapper Icon={LogOut} />
|
|
136
142
|
<span>Log out</span>
|
|
137
143
|
</DropdownMenuItem>
|
|
138
144
|
</DropdownMenuContent>
|
|
@@ -140,7 +146,8 @@ export function Navbar({
|
|
|
140
146
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
141
147
|
<SheetTrigger asChild>
|
|
142
148
|
<Button variant="ghost" size="icon" className="md:hidden" aria-label="Open Menu">
|
|
143
|
-
{renderIcon(Menu)}
|
|
149
|
+
{/* {renderIcon(Menu)} */}
|
|
150
|
+
<IconWrapper Icon={Menu} />
|
|
144
151
|
</Button>
|
|
145
152
|
</SheetTrigger>
|
|
146
153
|
<SheetContent side="left" className="pr-0">
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { CheckCircle2Icon } from "lucide-react"
|
|
2
|
+
import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert"
|
|
3
|
+
import { IconWrapper } from "../icons"
|
|
4
|
+
|
|
5
|
+
interface PlaceholderAlertProps {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const PlaceholderAlert = (
|
|
11
|
+
{ title = "Placeholder Alert", description = "This is a placeholder alert." }: PlaceholderAlertProps
|
|
12
|
+
) => {
|
|
13
|
+
return (
|
|
14
|
+
<div className="grid w-full max-w-xl items-start gap-4">
|
|
15
|
+
<Alert>
|
|
16
|
+
<IconWrapper Icon={CheckCircle2Icon} />
|
|
17
|
+
<AlertTitle>{title}</AlertTitle>
|
|
18
|
+
<AlertDescription>
|
|
19
|
+
{description}
|
|
20
|
+
</AlertDescription>
|
|
21
|
+
</Alert>
|
|
22
|
+
|
|
23
|
+
</div>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { LucideProps } from "lucide-react"
|
|
2
|
+
import { useCallback } from "react"
|
|
3
|
+
|
|
4
|
+
const iconProps: LucideProps = {
|
|
5
|
+
className: "mr-2 h-4 w-4",
|
|
6
|
+
"aria-hidden": "true"
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export const renderIcon = ((Icon: any) => {
|
|
10
|
+
return <Icon {...iconProps} />
|
|
11
|
+
}) as React.FC<{
|
|
12
|
+
Icon: any
|
|
13
|
+
}>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
export const IconWrapper = ({ Icon }: { Icon: any }) => {
|
|
17
|
+
return (
|
|
18
|
+
<span className="inline-flex items-center justify-center">
|
|
19
|
+
{renderIcon(Icon)}
|
|
20
|
+
</span>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
@@ -6,7 +6,13 @@ import "../global.css"
|
|
|
6
6
|
export const Default: Story = () => <Navbar logoText="Authdog" />;
|
|
7
7
|
Default.storyName = 'Default Navbar';
|
|
8
8
|
|
|
9
|
-
export const CustomNavigation: Story = () => <Navbar
|
|
9
|
+
export const CustomNavigation: Story = () => <Navbar
|
|
10
|
+
logoText="Authdog"
|
|
11
|
+
items={[{ title: "Home", href: "/" }, { title: "Features", href: "/features" }, { title: "Pricing", href: "/pricing" }, { title: "Contact", href: "/contact" }]}
|
|
12
|
+
|
|
13
|
+
/>;
|
|
14
|
+
|
|
15
|
+
|
|
10
16
|
CustomNavigation.storyName = 'Custom Navigation';
|
|
11
17
|
|
|
12
18
|
export const CustomUser: Story = () => <Navbar logoText="Authdog" user={{ name: "Jane Smith", email: "jane@Authdog.com", image: "https://github.com/shadcn.png" }} />;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Story } from '@ladle/react';
|
|
2
|
+
import { PlaceholderAlert } from "../components/core/placeholder-alert"
|
|
3
|
+
import "../global.css"
|
|
4
|
+
|
|
5
|
+
export const Default: Story = () => <PlaceholderAlert />;
|
|
6
|
+
Default.storyName = 'Default Placeholder Alert';
|
|
7
|
+
export const CustomTitleAndDescription: Story = () => (
|
|
8
|
+
<PlaceholderAlert
|
|
9
|
+
title="Custom Alert Title"
|
|
10
|
+
description="This is a custom description for the placeholder alert."
|
|
11
|
+
/>
|
|
12
|
+
);
|
|
13
|
+
CustomTitleAndDescription.storyName = 'Custom Title and Description';
|