@silicajs/components 0.1.0 → 0.1.2

package/dist/google-icon.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function GoogleIcon({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { GoogleIcon };

package/dist/google-icon.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function GoogleIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            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",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            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",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            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",
+            fill: "#FBBC05"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            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",
+            fill: "#EA4335"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  GoogleIcon
+};
+//# sourceMappingURL=google-icon.js.map

package/dist/google-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/google-icon.tsx"],"sourcesContent":["export function GoogleIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      <path\n        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        fill=\"#4285F4\"\n      />\n      <path\n        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        fill=\"#34A853\"\n      />\n      <path\n        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        fill=\"#FBBC05\"\n      />\n      <path\n        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        fill=\"#EA4335\"\n      />\n    </svg>\n  );\n}\n"],"mappings":"AAEI,SAME,KANF;AAFG,SAAS,WAAW,EAAE,UAAU,GAA2B;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { Backlinks, BacklinksProps } from './backlinks.js';
 export { Breadcrumbs, BreadcrumbsProps } from './breadcrumbs.js';
 export { DarkModeToggle, DarkModeToggleProps } from './dark-mode-toggle.js';
+export { GoogleIcon } from './google-icon.js';
 export { NotAllowed, NotAllowedProps } from './not-allowed.js';
+export { SignInShell, SignInShellProps } from './sign-in-shell.js';
 export { NotFound, NotFoundProps } from './not-found.js';
 export { PageProperties, PagePropertiesProps } from './page-properties.js';
 export { SearchPalette, SearchPaletteProps, SearchTrigger, SearchTriggerProps } from './search.js';

package/dist/index.js

@@ -3,7 +3,9 @@ import { Breadcrumbs } from "./breadcrumbs.js";
 import {
   DarkModeToggle
 } from "./dark-mode-toggle.js";
+import { GoogleIcon } from "./google-icon.js";
 import { NotAllowed } from "./not-allowed.js";
+import { SignInShell } from "./sign-in-shell.js";
 import { NotFound } from "./not-found.js";
 import { PageProperties } from "./page-properties.js";
 import {
@@ -26,11 +28,13 @@ export {
   Backlinks,
   Breadcrumbs,
   DarkModeToggle,
+  GoogleIcon,
   NotAllowed,
   NotFound,
   PageProperties,
   SearchPalette,
   SearchTrigger,
+  SignInShell,
   SilicaLink,
   SilicaRoutingProvider,
   TableOfContents,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Backlinks, type BacklinksProps } from \"./backlinks.js\";\nexport { Breadcrumbs, type BreadcrumbsProps } from \"./breadcrumbs.js\";\nexport {\n  DarkModeToggle,\n  type DarkModeToggleProps,\n} from \"./dark-mode-toggle.js\";\nexport { NotAllowed, type NotAllowedProps } from \"./not-allowed.js\";\nexport { NotFound, type NotFoundProps } from \"./not-found.js\";\nexport { PageProperties, type PagePropertiesProps } from \"./page-properties.js\";\nexport {\n  SearchPalette,\n  SearchTrigger,\n  type SearchPaletteProps,\n  type SearchTriggerProps,\n} from \"./search.js\";\nexport {\n  SilicaLink,\n  SilicaRoutingProvider,\n  useSilicaRouting,\n  type SilicaLinkComponent,\n  type SilicaLinkProps,\n  type SilicaRoutingContextValue,\n  type SilicaRoutingProviderProps,\n} from \"./routing.js\";\nexport {\n  TableOfContents,\n  type TableOfContentsProps,\n} from \"./table-of-contents.js\";\nexport { TagsList, type TagsListProps } from \"./tags-list.js\";\nexport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\nexport { VaultTree, type VaultTreeProps } from \"./vault-tree.js\";\nexport { breadcrumbSegmentHref, prettySegment, slugToHref } from \"./slug.js\";\n"],"mappings":"AAAA,SAAS,iBAAsC;AAC/C,SAAS,mBAA0C;AACnD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,kBAAwC;AACjD,SAAS,gBAAoC;AAC7C,SAAS,sBAAgD;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,gBAAoC;AAC7C,SAAS,gBAAoC;AAC7C,SAAS,iBAAsC;AAC/C,SAAS,uBAAuB,eAAe,kBAAkB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Backlinks, type BacklinksProps } from \"./backlinks.js\";\nexport { Breadcrumbs, type BreadcrumbsProps } from \"./breadcrumbs.js\";\nexport {\n  DarkModeToggle,\n  type DarkModeToggleProps,\n} from \"./dark-mode-toggle.js\";\nexport { GoogleIcon } from \"./google-icon.js\";\nexport { NotAllowed, type NotAllowedProps } from \"./not-allowed.js\";\nexport { SignInShell, type SignInShellProps } from \"./sign-in-shell.js\";\nexport { NotFound, type NotFoundProps } from \"./not-found.js\";\nexport { PageProperties, type PagePropertiesProps } from \"./page-properties.js\";\nexport {\n  SearchPalette,\n  SearchTrigger,\n  type SearchPaletteProps,\n  type SearchTriggerProps,\n} from \"./search.js\";\nexport {\n  SilicaLink,\n  SilicaRoutingProvider,\n  useSilicaRouting,\n  type SilicaLinkComponent,\n  type SilicaLinkProps,\n  type SilicaRoutingContextValue,\n  type SilicaRoutingProviderProps,\n} from \"./routing.js\";\nexport {\n  TableOfContents,\n  type TableOfContentsProps,\n} from \"./table-of-contents.js\";\nexport { TagsList, type TagsListProps } from \"./tags-list.js\";\nexport { UserMenu, type UserMenuProps } from \"./user-menu.js\";\nexport { VaultTree, type VaultTreeProps } from \"./vault-tree.js\";\nexport { breadcrumbSegmentHref, prettySegment, slugToHref } from \"./slug.js\";\n"],"mappings":"AAAA,SAAS,iBAAsC;AAC/C,SAAS,mBAA0C;AACnD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,kBAAkB;AAC3B,SAAS,kBAAwC;AACjD,SAAS,mBAA0C;AACnD,SAAS,gBAAoC;AAC7C,SAAS,sBAAgD;AACzD;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE;AAAA,OAEK;AACP,SAAS,gBAAoC;AAC7C,SAAS,gBAAoC;AAC7C,SAAS,iBAAsC;AAC/C,SAAS,uBAAuB,eAAe,kBAAkB;","names":[]}

package/dist/not-found.js

@@ -18,7 +18,13 @@ function NotFound({
       /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: title }),
       /* @__PURE__ */ jsx(CardDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Button, { variant: "outline", render: /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label }) }) })
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        render: /* @__PURE__ */ jsx("a", { href: cta.href, children: cta.label })
+      }
+    ) })
   ] }) });
 }
 export {

package/dist/not-found.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/not-found.tsx"],"sourcesContent":["import { Button } from \"@silicajs/ui/components/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@silicajs/ui/components/card\";\n\nexport type NotFoundProps = {\n  title?: string;\n  description?: string;\n  cta?: { href: string; label: string };\n  className?: string;\n};\n\nexport function NotFound({\n  title = \"Page not found\",\n  description = \"The requested note does not exist or is not published.\",\n  cta = { href: \"/\", label: \"Return home\" },\n  className,\n}: NotFoundProps) {\n  return (\n    <main className={className} data-slot=\"not-found\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle className=\"text-lg\">{title}</CardTitle>\n          <CardDescription>{description}</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Button variant=\"outline\" render={<a href={cta.href}>{cta.label}</a>} />\n        </CardContent>\n      </Card>\n    </main>\n  );\n}\n"],"mappings":"AAyBQ,SACE,KADF;AAzBR,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM,EAAE,MAAM,KAAK,OAAO,cAAc;AAAA,EACxC;AACF,GAAkB;AAChB,SACE,oBAAC,UAAK,WAAsB,aAAU,aACpC,+BAAC,QAAK,WAAU,oBACd;AAAA,yBAAC,cACC;AAAA,0BAAC,aAAU,WAAU,WAAW,iBAAM;AAAA,MACtC,oBAAC,mBAAiB,uBAAY;AAAA,OAChC;AAAA,IACA,oBAAC,eACC,8BAAC,UAAO,SAAQ,WAAU,QAAQ,oBAAC,OAAE,MAAM,IAAI,MAAO,cAAI,OAAM,GAAM,GACxE;AAAA,KACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/not-found.tsx"],"sourcesContent":["import { Button } from \"@silicajs/ui/components/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@silicajs/ui/components/card\";\n\nexport type NotFoundProps = {\n  title?: string;\n  description?: string;\n  cta?: { href: string; label: string };\n  className?: string;\n};\n\nexport function NotFound({\n  title = \"Page not found\",\n  description = \"The requested note does not exist or is not published.\",\n  cta = { href: \"/\", label: \"Return home\" },\n  className,\n}: NotFoundProps) {\n  return (\n    <main className={className} data-slot=\"not-found\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle className=\"text-lg\">{title}</CardTitle>\n          <CardDescription>{description}</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Button\n            variant=\"outline\"\n            render={<a href={cta.href}>{cta.label}</a>}\n          />\n        </CardContent>\n      </Card>\n    </main>\n  );\n}\n"],"mappings":"AAyBQ,SACE,KADF;AAzBR,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,MAAM,EAAE,MAAM,KAAK,OAAO,cAAc;AAAA,EACxC;AACF,GAAkB;AAChB,SACE,oBAAC,UAAK,WAAsB,aAAU,aACpC,+BAAC,QAAK,WAAU,oBACd;AAAA,yBAAC,cACC;AAAA,0BAAC,aAAU,WAAU,WAAW,iBAAM;AAAA,MACtC,oBAAC,mBAAiB,uBAAY;AAAA,OAChC;AAAA,IACA,oBAAC,eACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,QAAQ,oBAAC,OAAE,MAAM,IAAI,MAAO,cAAI,OAAM;AAAA;AAAA,IACxC,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/sign-in-shell.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type SignInShellProps = {
+    title: string;
+    description?: string;
+    logo?: string;
+    headline?: string;
+    subheadline?: string;
+    children: ReactNode;
+};
+declare function SignInShell({ title, description, logo, headline, subheadline, children, }: SignInShellProps): react_jsx_runtime.JSX.Element;
+
+export { SignInShell, type SignInShellProps };

package/dist/sign-in-shell.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BookOpen } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from "@silicajs/ui/components/card";
+function SignInShell({
+  title,
+  description,
+  logo,
+  headline = "Sign in required",
+  subheadline,
+  children
+}) {
+  const hint = subheadline ?? (description ? `${description} is private. Sign in with Google to access it.` : "This site is private. Sign in with Google to continue.");
+  return /* @__PURE__ */ jsxs(
+    "main",
+    {
+      className: "flex min-h-svh flex-col items-center justify-center gap-6 bg-muted/40 p-6 md:p-10",
+      "data-slot": "sign-in",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logo,
+              alt: "",
+              className: "size-8 shrink-0 rounded-md object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground", children: /* @__PURE__ */ jsx(BookOpen, { className: "size-4", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tracking-tight text-foreground", children: title })
+        ] }),
+        /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-sm shadow-sm", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+            /* @__PURE__ */ jsx(CardTitle, { className: "text-xl tracking-tight", children: headline }),
+            /* @__PURE__ */ jsx(CardDescription, { children: hint })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { className: "flex flex-col gap-4", children })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  SignInShell
+};
+//# sourceMappingURL=sign-in-shell.js.map

package/dist/sign-in-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sign-in-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { BookOpen } from \"lucide-react\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@silicajs/ui/components/card\";\n\nexport type SignInShellProps = {\n  title: string;\n  description?: string;\n  logo?: string;\n  headline?: string;\n  subheadline?: string;\n  children: ReactNode;\n};\n\nexport function SignInShell({\n  title,\n  description,\n  logo,\n  headline = \"Sign in required\",\n  subheadline,\n  children,\n}: SignInShellProps) {\n  const hint =\n    subheadline ??\n    (description\n      ? `${description} is private. Sign in with Google to access it.`\n      : \"This site is private. Sign in with Google to continue.\");\n\n  return (\n    <main\n      className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted/40 p-6 md:p-10\"\n      data-slot=\"sign-in\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {logo ? (\n          <img\n            src={logo}\n            alt=\"\"\n            className=\"size-8 shrink-0 rounded-md object-contain\"\n          />\n        ) : (\n          <span className=\"flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground\">\n            <BookOpen className=\"size-4\" aria-hidden=\"true\" />\n          </span>\n        )}\n        <span className=\"text-sm font-semibold tracking-tight text-foreground\">\n          {title}\n        </span>\n      </div>\n\n      <Card className=\"w-full max-w-sm shadow-sm\">\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl tracking-tight\">{headline}</CardTitle>\n          <CardDescription>{hint}</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex flex-col gap-4\">{children}</CardContent>\n      </Card>\n    </main>\n  );\n}\n"],"mappings":"AAsCM,SAEI,KAFJ;AArCN,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWA,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,OACJ,gBACC,cACG,GAAG,WAAW,mDACd;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,2BACZ;AAAA,iBACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAI;AAAA,cACJ,WAAU;AAAA;AAAA,UACZ,IAEA,oBAAC,UAAK,WAAU,kHACd,8BAAC,YAAS,WAAU,UAAS,eAAY,QAAO,GAClD;AAAA,UAEF,oBAAC,UAAK,WAAU,wDACb,iBACH;AAAA,WACF;AAAA,QAEA,qBAAC,QAAK,WAAU,6BACd;AAAA,+BAAC,cAAW,WAAU,eACpB;AAAA,gCAAC,aAAU,WAAU,0BAA0B,oBAAS;AAAA,YACxD,oBAAC,mBAAiB,gBAAK;AAAA,aACzB;AAAA,UACA,oBAAC,eAAY,WAAU,uBAAuB,UAAS;AAAA,WACzD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/user-menu.d.ts

@@ -1,9 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type UserMenuProps = {
-    label?: string;
-    className?: string;
+    logo?: string;
 };
-declare function UserMenu({ label, className }: UserMenuProps): react_jsx_runtime.JSX.Element;
+declare function UserMenu({ logo }: UserMenuProps): react_jsx_runtime.JSX.Element;
 
 export { UserMenu, type UserMenuProps };

package/dist/user-menu.js

@@ -1,40 +1,139 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { UserIcon } from "lucide-react";
-import { Button } from "@silicajs/ui/components/button";
+import { useEffect, useState } from "react";
+import { EllipsisVertical, LogOut } from "lucide-react";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "@silicajs/ui/components/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@silicajs/ui/components/dropdown-menu";
-function UserMenu({ label = "Signed in", className }) {
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar
+} from "@silicajs/ui/components/sidebar";
+function UserMenu({ logo }) {
+  const { isMobile } = useSidebar();
+  const [user, setUser] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    void fetch("/api/auth/get-session", { credentials: "include" }).then((response) => response.ok ? response.json() : null).then((data) => {
+      if (cancelled || !data?.user) return;
+      setUser({
+        name: data.user.name ?? data.user.email ?? "Account",
+        email: data.user.email ?? "",
+        image: data.user.image ?? void 0
+      });
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const displayName = user?.name ?? "Account";
+  const displayEmail = user?.email ?? "";
+  const avatarSrc = user?.image ?? logo;
+  const initials = getInitials(user?.name, user?.email);
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
         render: /* @__PURE__ */ jsx(
-          Button,
+          SidebarMenuButton,
           {
-            type: "button",
-            variant: "ghost",
-            size: "icon-sm",
-            "aria-label": "User menu",
-            className,
-            children: /* @__PURE__ */ jsx(UserIcon, { "aria-hidden": "true" })
+            size: "lg",
+            className: "data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
           }
-        )
+        ),
+        children: [
+          /* @__PURE__ */ jsx(UserAvatar, { src: avatarSrc, alt: displayName, initials }),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: displayName }),
+            displayEmail ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: displayEmail }) : null
+          ] }),
+          /* @__PURE__ */ jsx(EllipsisVertical, { className: "ml-auto size-4 shrink-0 text-muted-foreground" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "min-w-44", children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: label }),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { render: /* @__PURE__ */ jsx("a", { href: "/api/auth/sign-out", children: "Sign out" }) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "min-w-56 rounded-lg",
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-1 py-1.5 font-normal", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-left text-sm", children: [
+            /* @__PURE__ */ jsx(
+              UserAvatar,
+              {
+                src: avatarSrc,
+                alt: displayName,
+                initials
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: displayName }),
+              displayEmail ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: displayEmail }) : null
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              variant: "destructive",
+              onClick: () => {
+                void signOut();
+              },
+              children: [
+                /* @__PURE__ */ jsx(LogOut, {}),
+                "Sign out"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) }) });
+}
+function UserAvatar({
+  src,
+  alt,
+  initials
+}) {
+  return /* @__PURE__ */ jsxs(Avatar, { className: "size-8", children: [
+    src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initials })
   ] });
 }
+function getInitials(name, email) {
+  const trimmedName = name?.trim();
+  if (trimmedName) {
+    const parts = trimmedName.split(/\s+/).filter(Boolean);
+    if (parts.length >= 2) {
+      return `${parts[0]?.[0] ?? ""}${parts[1]?.[0] ?? ""}`.toUpperCase();
+    }
+    return trimmedName.slice(0, 2).toUpperCase();
+  }
+  if (email) return email.slice(0, 2).toUpperCase();
+  return "??";
+}
+async function signOut() {
+  await fetch("/api/auth/sign-out", {
+    method: "POST",
+    credentials: "include"
+  });
+  window.location.assign("/sign-in");
+}
 export {
   UserMenu
 };

package/dist/user-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/user-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { UserIcon } from \"lucide-react\";\n\nimport { Button } from \"@silicajs/ui/components/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@silicajs/ui/components/dropdown-menu\";\n\nexport type UserMenuProps = {\n  label?: string;\n  className?: string;\n};\n\nexport function UserMenu({ label = \"Signed in\", className }: UserMenuProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"User menu\"\n            className={className}\n          >\n            <UserIcon aria-hidden=\"true\" />\n          </Button>\n        }\n      />\n      <DropdownMenuContent align=\"end\" sideOffset={6} className=\"min-w-44\">\n        <DropdownMenuLabel>{label}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem render={<a href=\"/api/auth/sign-out\">Sign out</a>} />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";AA+BY,cAIN,YAJM;AA7BZ,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,SAAS,SAAS,EAAE,QAAQ,aAAa,UAAU,GAAkB;AAC1E,SACE,qBAAC,gBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QACE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAW;AAAA,YACX;AAAA,YAEA,8BAAC,YAAS,eAAY,QAAO;AAAA;AAAA,QAC/B;AAAA;AAAA,IAEJ;AAAA,IACA,qBAAC,uBAAoB,OAAM,OAAM,YAAY,GAAG,WAAU,YACxD;AAAA,0BAAC,qBAAmB,iBAAM;AAAA,MAC1B,oBAAC,yBAAsB;AAAA,MACvB,oBAAC,oBAAiB,QAAQ,oBAAC,OAAE,MAAK,sBAAqB,sBAAQ,GAAM;AAAA,OACvE;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/user-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { EllipsisVertical, LogOut } from \"lucide-react\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@silicajs/ui/components/avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@silicajs/ui/components/dropdown-menu\";\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@silicajs/ui/components/sidebar\";\n\nexport type UserMenuProps = {\n  logo?: string;\n};\n\ntype SessionUser = {\n  name?: string | null;\n  email?: string | null;\n  image?: string | null;\n};\n\ntype SessionResponse = {\n  user?: SessionUser;\n};\n\nexport function UserMenu({ logo }: UserMenuProps) {\n  const { isMobile } = useSidebar();\n  const [user, setUser] = useState<SessionUser | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    void fetch(\"/api/auth/get-session\", { credentials: \"include\" })\n      .then((response) => (response.ok ? response.json() : null))\n      .then((data: SessionResponse | null) => {\n        if (cancelled || !data?.user) return;\n        setUser({\n          name: data.user.name ?? data.user.email ?? \"Account\",\n          email: data.user.email ?? \"\",\n          image: data.user.image ?? undefined,\n        });\n      })\n      .catch(() => {});\n\n    return () => {\n      cancelled = true;\n    };\n  }, []);\n\n  const displayName = user?.name ?? \"Account\";\n  const displayEmail = user?.email ?? \"\";\n  const avatarSrc = user?.image ?? logo;\n  const initials = getInitials(user?.name, user?.email);\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <UserAvatar src={avatarSrc} alt={displayName} initials={initials} />\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{displayName}</span>\n              {displayEmail ? (\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {displayEmail}\n                </span>\n              ) : null}\n            </div>\n            <EllipsisVertical className=\"ml-auto size-4 shrink-0 text-muted-foreground\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <div className=\"px-1 py-1.5 font-normal\">\n              <div className=\"flex items-center gap-2 text-left text-sm\">\n                <UserAvatar\n                  src={avatarSrc}\n                  alt={displayName}\n                  initials={initials}\n                />\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{displayName}</span>\n                  {displayEmail ? (\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {displayEmail}\n                    </span>\n                  ) : null}\n                </div>\n              </div>\n            </div>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem\n                variant=\"destructive\"\n                onClick={() => {\n                  void signOut();\n                }}\n              >\n                <LogOut />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n\nfunction UserAvatar({\n  src,\n  alt,\n  initials,\n}: {\n  src?: string;\n  alt: string;\n  initials: string;\n}) {\n  return (\n    <Avatar className=\"size-8\">\n      {src ? <AvatarImage src={src} alt={alt} /> : null}\n      <AvatarFallback className=\"text-xs\">{initials}</AvatarFallback>\n    </Avatar>\n  );\n}\n\nfunction getInitials(name?: string | null, email?: string | null): string {\n  const trimmedName = name?.trim();\n  if (trimmedName) {\n    const parts = trimmedName.split(/\\s+/).filter(Boolean);\n    if (parts.length >= 2) {\n      return `${parts[0]?.[0] ?? \"\"}${parts[1]?.[0] ?? \"\"}`.toUpperCase();\n    }\n    return trimmedName.slice(0, 2).toUpperCase();\n  }\n  if (email) return email.slice(0, 2).toUpperCase();\n  return \"??\";\n}\n\nasync function signOut(): Promise<void> {\n  await fetch(\"/api/auth/sign-out\", {\n    method: \"POST\",\n    credentials: \"include\",\n  });\n  window.location.assign(\"/sign-in\");\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@silicajs/components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Silica-aware, framework-agnostic React composables built on @silicajs/ui.",
   "type": "module",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -27,10 +28,10 @@
     "test": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@silicajs/core": "^0.1.0",
+    "@silicajs/core": "^0.1.1",
     "@silicajs/remark-obsidian": "^0.1.0",
-    "@silicajs/ui": "^0.1.0",
-    "lucide-react": "^1.16.0"
+    "@silicajs/ui": "^0.1.2",
+    "lucide-react": "^1.17.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -40,7 +41,16 @@
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.6",
-    "react-dom": "^19.2.6",
+    "react-dom": "^19.2.7",
     "tsup": "^8.5.1"
+  },
+  "homepage": "https://github.com/agdevhq/silica/tree/main/packages/components#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/agdevhq/silica.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/agdevhq/silica/issues"
   }
 }