@naeil/ui 0.2.0 → 0.4.0

package/dist/source/components/nav.js

@@ -0,0 +1,375 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Logo } from "./logo.js";
+import { Badge } from "./ui/badge.js";
+import Image from "next/image";
+const PROJECTS = [
+  {
+    key: "cc",
+    href: "/cc",
+    accent: "oklch(0.704 0.140 181)",
+    icon: "/images/coral.png",
+    status: "active"
+  },
+  {
+    key: "pkm",
+    href: "/pkm",
+    accent: "oklch(0.702 0.183 293)",
+    icon: "/images/jellyfish.png",
+    status: "coming"
+  },
+  {
+    key: "naeilUi",
+    href: "/design",
+    accent: "oklch(0.623 0.214 259)",
+    icon: "/images/whale.png",
+    status: "active"
+  },
+  {
+    key: "sa",
+    href: "/sa",
+    accent: "oklch(0.723 0.219 149)",
+    icon: "/images/fish.png",
+    status: "active"
+  },
+  {
+    key: "babyAgent",
+    href: "/baby-agent",
+    accent: "oklch(0.769 0.188 70.08)",
+    icon: "/images/turtle.png",
+    status: "coming"
+  }
+];
+function Nav({
+  Link,
+  usePathname,
+  brandHref = "/",
+  brandExternal = false,
+  brandSlot,
+  projectsExternal = false,
+  externalBaseUrl = "https://naeil.dev",
+  currentProjectKey,
+  currentProjectHref,
+  subNav,
+  authSlot,
+  showProjects = true,
+  showBlog = true,
+  toolbarSlot
+}) {
+  const t = useTranslations("nav");
+  const pt = useTranslations("projects");
+  const pathname = usePathname();
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [projectsOpen, setProjectsOpen] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 16);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect(() => {
+    setMobileOpen(false);
+    setProjectsOpen(false);
+  }, [pathname]);
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  const linkClass = (href) => {
+    const isActive = pathname === href;
+    return [
+      "text-sm font-medium transition-colors",
+      isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+    ].join(" ");
+  };
+  const isProjectActive = pathname.startsWith("/projects") || pathname.startsWith("/cc") || pathname.startsWith("/pkm") || pathname.startsWith("/sa") || pathname.startsWith("/design");
+  function getProjectLink(project) {
+    if (currentProjectKey && project.key === currentProjectKey) {
+      return { href: currentProjectHref || "/", external: false };
+    }
+    if (projectsExternal) {
+      return { href: `${externalBaseUrl}${project.href}`, external: true };
+    }
+    return { href: project.href, external: false };
+  }
+  const brandContent = brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block" });
+  const brandElement = brandExternal ? /* @__PURE__ */ jsx("a", { href: brandHref, children: brandContent }) : /* @__PURE__ */ jsx(Link, { href: brandHref, children: brandContent });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        className: [
+          "fixed top-0 z-50 w-full transition-[background-color,border-color] duration-300",
+          scrolled || mobileOpen ? "border-b border-border/40 bg-background/80 backdrop-blur-md" : "border-b border-transparent bg-transparent"
+        ].join(" "),
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-[58px] max-w-7xl items-center px-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center md:w-[200px]", children: brandElement }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden flex-1 items-center gap-6 md:flex", children: [
+            showProjects && /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: [
+                    "text-sm font-medium transition-colors",
+                    isProjectActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                  ].join(" "),
+                  children: [
+                    t("projects"),
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "10",
+                        height: "10",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "ml-1 inline-block transition-transform group-hover:rotate-180",
+                        children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-full pt-3 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "border-border/40 bg-background/95 w-[520px] rounded-xl border p-4 shadow-xl backdrop-blur-md", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: PROJECTS.map((project) => {
+                const { href, external } = getProjectLink(project);
+                const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-3.5 rounded-lg px-3 py-3 transition-colors", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border",
+                      style: {
+                        borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
+                        backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: project.icon,
+                          alt: "",
+                          width: 24,
+                          height: 24,
+                          className: "object-contain"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
+                      project.status === "coming" && /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          variant: "outline",
+                          className: "text-muted-foreground px-1 py-0 text-[9px]",
+                          children: pt("status.coming")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-xs leading-snug", children: pt(`${project.key}.description`) })
+                  ] })
+                ] });
+                if (external) {
+                  return /* @__PURE__ */ jsx("a", { href, children: inner }, project.key);
+                }
+                return /* @__PURE__ */ jsx(Link, { href, children: inner }, project.key);
+              }) }) }) })
+            ] }),
+            showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `${externalBaseUrl}/blog`,
+                className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+                children: t("blog")
+              }
+            ) : /* @__PURE__ */ jsx(Link, { href: "/blog", className: linkClass("/blog"), children: t("blog") }) }),
+            subNav && subNav.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
+              subNav.map((item) => /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: item.href,
+                  className: linkClass(item.href),
+                  children: item.label
+                },
+                item.href
+              ))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 md:flex", children: [
+            authSlot,
+            authSlot && toolbarSlot && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
+            toolbarSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: toolbarSlot })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "text-muted-foreground hover:text-foreground ml-auto transition-colors md:hidden",
+              onClick: () => setMobileOpen(!mobileOpen),
+              "aria-label": "Menu",
+              children: mobileOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {})
+            }
+          )
+        ] })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsx("div", { className: "bg-background/95 fixed inset-0 z-40 overflow-y-auto pt-[58px] backdrop-blur-md md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-6", children: [
+      showProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "text-foreground flex items-center justify-between py-3 text-base font-medium",
+            onClick: () => setProjectsOpen(!projectsOpen),
+            children: [
+              t("projects"),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: [
+                    "transition-transform duration-200",
+                    projectsOpen ? "rotate-180" : ""
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ),
+        projectsOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-col gap-1 pl-1", children: PROJECTS.map((project) => {
+          const { href, external } = getProjectLink(project);
+          const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-center gap-3 rounded-lg px-3 py-3 transition-colors", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+                style: {
+                  borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
+                  backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: project.icon,
+                    alt: "",
+                    width: 20,
+                    height: 20,
+                    className: "object-contain"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
+              project.status === "coming" && /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: "text-muted-foreground ml-2 px-1 py-0 text-[9px]",
+                  children: pt("status.coming")
+                }
+              )
+            ] })
+          ] });
+          if (external) {
+            return /* @__PURE__ */ jsx(
+              "a",
+              {
+                href,
+                onClick: () => setMobileOpen(false),
+                children: inner
+              },
+              project.key
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            Link,
+            {
+              href,
+              onClick: () => setMobileOpen(false),
+              children: inner
+            },
+            project.key
+          );
+        }) })
+      ] }),
+      showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `${externalBaseUrl}/blog`,
+          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: t("blog")
+        }
+      ) : /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: "/blog",
+          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: t("blog")
+        }
+      ) }),
+      subNav && subNav.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t", children: subNav.map((item) => /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: item.href,
+          className: "text-foreground block py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: item.label
+        },
+        item.href
+      )) }),
+      authSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t pt-4", children: authSlot }),
+      toolbarSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 flex items-center gap-4 border-t pt-4 mt-2", children: toolbarSlot })
+    ] }) })
+  ] });
+}
+function MenuIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
+}
+export {
+  Nav
+};

package/dist/source/components/theme-provider.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+
+declare function ThemeProvider({ children, ...props }: React.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
+
+export { ThemeProvider };

package/dist/source/components/theme-provider.js

@@ -0,0 +1,45 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+function ThemeProvider(_a) {
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(NextThemesProvider, __spreadProps(__spreadValues({}, props), { children }));
+}
+export {
+  ThemeProvider
+};

package/dist/source/components/theme-toggle-icon.d.ts

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

package/dist/source/components/theme-toggle-icon.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { useSyncExternalStore } from "react";
+const emptySubscribe = () => () => {
+};
+function useIsMounted() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+function ThemeToggleIcon() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useIsMounted();
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("div", { className: "h-4 w-4" });
+  }
+  const isDark = resolvedTheme === "dark";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      className: "ui-control ui-focus inline-flex w-11 items-center justify-center text-muted-foreground hover:text-foreground",
+      "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+      children: isDark ? /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+        }
+      )
+    }
+  );
+}
+export {
+  ThemeToggleIcon
+};

package/dist/source/components/theme-toggle.d.ts

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

package/dist/source/components/theme-toggle.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "next-themes";
+import { useSyncExternalStore } from "react";
+import { Button } from "./ui/button.js";
+const emptySubscribe = () => () => {
+};
+function useIsMounted() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useIsMounted();
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "w-24", children: "\u2026" });
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: "w-24",
+      onClick: () => setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+      children: resolvedTheme === "dark" ? "\u2600\uFE0F Light" : "\u{1F319} Dark"
+    }
+  );
+}
+export {
+  ThemeToggle
+};

package/dist/source/components/typography.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+type HeadingProps = react.HTMLAttributes<HTMLHeadingElement> & {
+    children: react.ReactNode;
+};
+declare const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+declare const sectionTitleClass = "text-foreground text-xl font-semibold";
+declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+
+export { PageTitle, SectionTitle, pageTitleClass, sectionTitleClass };

package/dist/source/components/typography.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+const sectionTitleClass = "text-foreground text-xl font-semibold";
+function PageTitle(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx("h1", __spreadProps(__spreadValues({ className: cn(pageTitleClass, className) }, props), { children }));
+}
+function SectionTitle(_c) {
+  var _d = _c, { className, children } = _d, props = __objRest(_d, ["className", "children"]);
+  return /* @__PURE__ */ jsx("h2", __spreadProps(__spreadValues({ className: cn(sectionTitleClass, className) }, props), { children }));
+}
+export {
+  PageTitle,
+  SectionTitle,
+  pageTitleClass,
+  sectionTitleClass
+};

package/dist/source/components/ui/avatar.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { Avatar as Avatar$1 } from 'radix-ui';
+
+declare function Avatar({ className, size, ...props }: react.ComponentProps<typeof Avatar$1.Root> & {
+    size?: "default" | "sm" | "lg";
+}): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: react.ComponentProps<typeof Avatar$1.Image>): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: react.ComponentProps<typeof Avatar$1.Fallback>): react_jsx_runtime.JSX.Element;
+declare function AvatarBadge({ className, ...props }: react.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: react.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };