@photon-ai/pho-ui 0.6.0 → 0.7.1

package/dist/chunks/avatar-Bb4RZQIa.js

@@ -0,0 +1,53 @@
+"use client";
+import { t } from "./cn-7uGUzCOM.js";
+import { t as l } from "./resolve-variant-CcD8iG5l.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+import { Avatar as r } from "@base-ui/react/avatar";
+var n = {
+  xs: {
+    classes: "size-6 text-[0.625rem]",
+    description: "Extra small — inline chips and rails"
+  },
+  sm: {
+    classes: "size-8 text-xs",
+    description: "Small — dense lists"
+  },
+  md: {
+    classes: "size-10 text-sm",
+    description: "Medium — the default"
+  },
+  lg: {
+    classes: "size-12 text-md",
+    description: "Large — profile headers"
+  }
+};
+function o({ className: e, size: s = "md", ...a }) {
+  return /* @__PURE__ */ i(r.Root, {
+    className: t("squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none", l(n, s), e),
+    ...a
+  });
+}
+function c({ className: e, ...s }) {
+  return /* @__PURE__ */ i(r.Image, {
+    className: t("size-full object-cover", e),
+    ...s
+  });
+}
+function m({ className: e, ...s }) {
+  return /* @__PURE__ */ i(r.Fallback, {
+    className: t("flex size-full items-center justify-center", e),
+    ...s
+  });
+}
+var v = {
+  Root: o,
+  Image: c,
+  Fallback: m
+};
+export {
+  v as n,
+  n as t
+};
+
+//# sourceMappingURL=avatar-Bb4RZQIa.js.map

package/dist/chunks/avatar-Bb4RZQIa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-Bb4RZQIa.js","names":[],"sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\n/** Size axis — four sizes, no `xl` (Geist-reductive). `md` is default. */\nexport const AVATAR_SIZES = {\n  xs: {\n    classes: \"size-6 text-[0.625rem]\",\n    description: \"Extra small — inline chips and rails\",\n  },\n  sm: { classes: \"size-8 text-xs\", description: \"Small — dense lists\" },\n  md: { classes: \"size-10 text-sm\", description: \"Medium — the default\" },\n  lg: { classes: \"size-12 text-md\", description: \"Large — profile headers\" },\n} satisfies VariantMap;\n\nexport type AvatarSize = keyof typeof AVATAR_SIZES;\n\ninterface RootProps extends StyledProps<typeof BaseAvatar.Root> {\n  /** Size variant. @default \"md\" */\n  size?: AvatarSize;\n}\n\nfunction Root({ className, size = \"md\", ...props }: RootProps) {\n  return (\n    <BaseAvatar.Root\n      className={cn(\n        \"squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none\",\n        resolveVariant(AVATAR_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Image({ className, ...props }: StyledProps<typeof BaseAvatar.Image>) {\n  return (\n    <BaseAvatar.Image\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Fallback({\n  className,\n  ...props\n}: StyledProps<typeof BaseAvatar.Fallback>) {\n  return (\n    <BaseAvatar.Fallback\n      className={cn(\"flex size-full items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Avatar built on Base UI `Avatar`. Compose `Avatar.Image` with an\n * `Avatar.Fallback` (initials or icon) that shows while the image loads or if\n * it fails. Set `size` on `Avatar.Root`.\n */\nexport const Avatar = { Root, Image, Fallback };\n"],"mappings":";;;;;;AAcA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAkB,aAAa;AAAA,EAAsB;AAAA,EACpE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAAuB;AAAA,EACtE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAA0B;AAC3E;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAoB;AAC7D,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,2KACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0BAA0B,CAAS;AAAA,IACjD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACuC;AAC1C,SACE,gBAAA,EAAC,EAAW,UAAZ;AAAA,IACE,WAAW,EAAG,8CAA8C,CAAS;AAAA,IACrE,GAAI;AAAA,EACL,CAAA;AAEL;AAOA,IAAa,IAAS;AAAA,EAAE,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,UAAA;AAAS"}

package/dist/chunks/sidebar-CivriTLb.js

@@ -0,0 +1,164 @@
+"use client";
+import { t as o } from "./cn-7uGUzCOM.js";
+import { n as g, r as v } from "./link-provider-9TFNyDqO.js";
+import { l as x } from "./button-CQ4cZvkC.js";
+import { t as h } from "./createReactComponent-BqCmnqfX.js";
+import { n as l } from "./avatar-Bb4RZQIa.js";
+import { isValidElement as y } from "react";
+import { Fragment as b, jsx as t, jsxs as a } from "react/jsx-runtime";
+var N = [["path", {
+  d: "M17 7l-10 10",
+  key: "svg-0"
+}], ["path", {
+  d: "M8 7l9 0l0 9",
+  key: "svg-1"
+}]], I = h("outline", "arrow-up-right", "ArrowUpRight", N), k = [
+  ["path", {
+    d: "M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-0"
+  }],
+  ["path", {
+    d: "M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-1"
+  }],
+  ["path", {
+    d: "M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+    key: "svg-2"
+  }]
+], w = h("outline", "dots", "Dots", k), R = "border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r px-4 py-5", _ = "outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1", A = "bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-fg-pho-primary", E = o("text-pho-secondary *:data-icon:text-fg-pho-secondary", "hover:bg-pho-ghost-hover hover:text-pho-primary hover:*:data-icon:text-fg-pho-primary");
+function C({ className: r, ...e }) {
+  return /* @__PURE__ */ t("aside", {
+    className: o(R, r),
+    ...e
+  });
+}
+function M({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: o("mb-6 flex items-center gap-2.5 px-2", r),
+    ...e
+  });
+}
+function T({ className: r, ...e }) {
+  return /* @__PURE__ */ t("nav", {
+    className: o("flex flex-1 flex-col gap-6 overflow-y-auto", r),
+    ...e
+  });
+}
+function D({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: r,
+    ...e
+  });
+}
+function B({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: o("text-pho-secondary mb-2 px-2 text-xs font-medium", r),
+    ...e
+  });
+}
+function z({ className: r, columns: e, ...n }) {
+  return /* @__PURE__ */ t("ul", {
+    className: o("m-0 list-none p-0 *:m-0", e ? "grid grid-cols-2 gap-x-2 gap-y-0.5" : "flex flex-col gap-0.5", r),
+    ...n
+  });
+}
+function F({ className: r, ...e }) {
+  return /* @__PURE__ */ t("div", {
+    className: o("mt-4 flex flex-col gap-0.5", r),
+    ...e
+  });
+}
+function p(r) {
+  if (r == null || r === !1) return null;
+  let e = null;
+  return v(r) ? e = /* @__PURE__ */ t(r, {}) : y(r) && (e = r), e == null ? null : /* @__PURE__ */ t("span", {
+    "data-icon": !0,
+    className: "pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0",
+    children: e
+  });
+}
+function L({ icon: r, active: e, className: n, children: i, href: s, external: c, ...u }) {
+  const f = g(), d = o(_, e ? A : E, n), m = /* @__PURE__ */ t("span", {
+    className: "min-w-0 flex-1 truncate",
+    children: i
+  });
+  return s !== void 0 ? /* @__PURE__ */ t("li", { children: /* @__PURE__ */ a(f, {
+    href: s,
+    "aria-current": e ? "page" : void 0,
+    ...c && {
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    ...u,
+    className: d,
+    children: [
+      p(r),
+      m,
+      c && /* @__PURE__ */ a(b, { children: [p(/* @__PURE__ */ t(I, { "aria-hidden": !0 })), /* @__PURE__ */ t("span", {
+        className: "sr-only",
+        children: "(opens in a new tab)"
+      })] })
+    ]
+  }) }) : /* @__PURE__ */ t("li", { children: /* @__PURE__ */ a("button", {
+    type: "button",
+    "aria-current": e ? "page" : void 0,
+    ...u,
+    className: d,
+    children: [p(r), m]
+  }) });
+}
+var O = "group outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-lg p-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2";
+function S(r) {
+  const e = r.split(/\s+/).filter(Boolean);
+  return ((e[0]?.[0] ?? r[0] ?? "?") + (e.length >= 2 ? e[e.length - 1]?.[0] ?? "" : "")).toUpperCase();
+}
+function U({ name: r, avatarSrc: e, initials: n, className: i, ...s }) {
+  return /* @__PURE__ */ a("button", {
+    type: "button",
+    className: o(O, i),
+    ...s,
+    children: [
+      /* @__PURE__ */ a(l.Root, {
+        size: "xs",
+        children: [e && /* @__PURE__ */ t(l.Image, {
+          src: e,
+          alt: ""
+        }), /* @__PURE__ */ t(l.Fallback, { children: n ?? S(r) })]
+      }),
+      /* @__PURE__ */ t("span", {
+        className: "text-pho-primary min-w-0 flex-1 truncate text-xs",
+        children: r
+      }),
+      /* @__PURE__ */ t("span", {
+        "aria-hidden": !0,
+        className: x({
+          variant: "secondary",
+          size: "sm",
+          shape: "circle",
+          className: "group-hover:bg-pho-primary-hover group-hover:text-pho-secondary-hover group-data-[popup-open]:bg-pho-primary-hover group-data-[popup-open]:text-pho-secondary-hover p-1 group-data-[pressed]:scale-[0.97]"
+        }),
+        children: /* @__PURE__ */ t(w, { className: "size-4" })
+      })
+    ]
+  });
+}
+var J = {
+  Root: C,
+  Header: M,
+  Nav: T,
+  Group: D,
+  GroupLabel: B,
+  List: z,
+  Item: L,
+  Footer: F,
+  AccountRow: U
+};
+export {
+  J as a,
+  R as i,
+  A as n,
+  E as r,
+  _ as t
+};
+
+//# sourceMappingURL=sidebar-CivriTLb.js.map

package/dist/chunks/sidebar-CivriTLb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-CivriTLb.js","names":["__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconArrowUpRight.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconDots.mjs","../../src/sections/sidebar/sidebar.tsx"],"sourcesContent":["/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M17 7l-10 10\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M8 7l9 0l0 9\", \"key\": \"svg-1\" }]];\nconst IconArrowUpRight = createReactComponent(\"outline\", \"arrow-up-right\", \"ArrowUpRight\", __iconNode);\n\nexport { __iconNode, IconArrowUpRight as default };\n//# sourceMappingURL=IconArrowUpRight.mjs.map\n","/**\n * @license @tabler/icons-react v3.44.0 - MIT\n *\n * This source code is licensed under the MIT license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createReactComponent from '../createReactComponent.mjs';\n\nconst __iconNode = [[\"path\", { \"d\": \"M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0\", \"key\": \"svg-2\" }]];\nconst IconDots = createReactComponent(\"outline\", \"dots\", \"Dots\", __iconNode);\n\nexport { __iconNode, IconDots as default };\n//# sourceMappingURL=IconDots.mjs.map\n","import {\n  isValidElement,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ComponentProps,\n  type FC,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { IconArrowUpRight, IconDots } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils/cn\";\nimport { isReactComponent } from \"../../utils/is-react-component\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport { Avatar } from \"../../components/avatar\";\nimport { buttonVariants } from \"../../components/button\";\n\n/**\n * Sidebar — Pho's first SECTION: a composed app rail, not a micro component.\n * It encodes the navigation rail used across Photon surfaces (the Pho docs\n * site, the dashboard): a sticky full-height column with a brand header, a\n * scrollable stack of titled nav groups, and a pinned footer that usually\n * carries the account row.\n *\n * Sections stay presentational — no router, no data fetching, no theme\n * plumbing. Links render through the host's `LinkProvider` (same contract as\n * `ButtonLink`), state arrives via props (`active`), and interactive footers\n * compose with other Pho parts (e.g. wrap `Sidebar.AccountRow` in a\n * `Menu.Trigger render={...}` to open an account menu).\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** The rail itself — sticky, full-height, hairline right edge. */\nexport const SIDEBAR_ROOT =\n  \"border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r px-4 py-5\";\n\n/** A nav row at rest and on hover. Active/inactive inks split below. */\nexport const SIDEBAR_ITEM =\n  \"outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1\";\n\n/**\n * Selected row — lifted onto the primary surface with the site hairline.\n * The icon carries the same ink as the label so the pair reads as one unit.\n */\nexport const SIDEBAR_ITEM_ACTIVE =\n  \"bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-fg-pho-primary\";\n\n/**\n * Resting row — secondary ink (75% alpha; tertiary at 50% fails contrast for\n * nav labels), ghost wash on hover. The icon tracks the label's ink at every\n * state instead of sitting on a fainter step.\n */\nexport const SIDEBAR_ITEM_INACTIVE = cn(\n  \"text-pho-secondary *:data-icon:text-fg-pho-secondary\",\n  \"hover:bg-pho-ghost-hover hover:text-pho-primary hover:*:data-icon:text-fg-pho-primary\",\n);\n\n/* --------------------------------- frame --------------------------------- */\n\ninterface RootProps extends ComponentProps<\"aside\"> {\n  ref?: Ref<HTMLElement>;\n}\n\n/** The rail — a sticky, full-height `<aside>` with the hairline right edge. */\nfunction Root({ className, ...props }: RootProps) {\n  return <aside className={cn(SIDEBAR_ROOT, className)} {...props} />;\n}\n\n/** Brand slot at the top of the rail — logo, wordmark, workspace switcher. */\nfunction Header({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"mb-6 flex items-center gap-2.5 px-2\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The scrollable middle — a stack of `Sidebar.Group`s. */\nfunction Nav({ className, ...props }: ComponentProps<\"nav\">) {\n  return (\n    <nav\n      className={cn(\"flex flex-1 flex-col gap-6 overflow-y-auto\", className)}\n      {...props}\n    />\n  );\n}\n\n/** One titled cluster of nav rows: a `GroupLabel` followed by a `List`. */\nfunction Group({ className, ...props }: ComponentProps<\"div\">) {\n  return <div className={className} {...props} />;\n}\n\n/** The cluster's caption — secondary ink; quaternary (30%) is illegible. */\nfunction GroupLabel({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"text-pho-secondary mb-2 px-2 text-xs font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface ListProps extends ComponentProps<\"ul\"> {\n  /** Lay the rows out in two columns — for long, flat registries. */\n  columns?: boolean;\n}\n\n/** The rows of a group. `columns` switches to a two-column grid. */\nfunction List({ className, columns, ...props }: ListProps) {\n  return (\n    <ul\n      className={cn(\n        // list-none/m-0/p-0 shield the rail from host prose styles.\n        \"m-0 list-none p-0 *:m-0\",\n        columns\n          ? \"grid grid-cols-2 gap-x-2 gap-y-0.5\"\n          : \"flex flex-col gap-0.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Pinned bottom cluster — docs link, account row, theme toggle. */\nfunction Footer({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"mt-4 flex flex-col gap-0.5\", className)} {...props} />\n  );\n}\n\n/* --------------------------------- item ---------------------------------- */\n\n/** An icon slot — a component (`IconBook`) or element (`<IconBook />`). */\ntype Slottable = ReactNode | FC<{ className?: string }>;\n\nfunction renderIcon(icon: Slottable): ReactNode {\n  if (icon == null || icon === false) return null;\n  let content: ReactNode = null;\n  if (isReactComponent(icon)) {\n    const Icon = icon;\n    content = <Icon />;\n  } else if (isValidElement(icon)) {\n    content = icon;\n  }\n  if (content == null) return null;\n  return (\n    <span\n      data-icon\n      className=\"pointer-events-none inline-flex shrink-0 items-center [&>svg]:size-4 [&>svg]:shrink-0\"\n    >\n      {content}\n    </span>\n  );\n}\n\ninterface ItemBaseProps {\n  /** Slot before the label — a component (`IconBook`) or element. */\n  icon?: Slottable;\n  /** Marks the row as the current destination (adds `aria-current=\"page\"`). */\n  active?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\nexport interface SidebarItemLinkProps\n  extends\n    ItemBaseProps,\n    Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ItemBaseProps> {\n  /** Destination — rendered through the host's `LinkProvider`. */\n  href: string;\n  /** Leaves the app: opens in a new tab and renders a ↗ cue. */\n  external?: boolean;\n}\n\nexport interface SidebarItemButtonProps\n  extends\n    ItemBaseProps,\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ItemBaseProps> {\n  href?: undefined;\n  external?: undefined;\n}\n\nexport type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps;\n\n/**\n * A nav row — a link when `href` is given (rendered through the host's\n * `LinkProvider`), otherwise a button. `active` lifts the row onto the\n * primary surface; `external` opens a new tab and appends a ↗ cue.\n */\nfunction Item({\n  icon,\n  active,\n  className,\n  children,\n  href,\n  external,\n  ...rest\n}: SidebarItemProps) {\n  const Link = useLinkComponent();\n  const rowClass = cn(\n    SIDEBAR_ITEM,\n    active ? SIDEBAR_ITEM_ACTIVE : SIDEBAR_ITEM_INACTIVE,\n    className,\n  );\n  const label = <span className=\"min-w-0 flex-1 truncate\">{children}</span>;\n\n  if (href !== undefined) {\n    return (\n      <li>\n        <Link\n          href={href}\n          aria-current={active ? \"page\" : undefined}\n          {...(external && { target: \"_blank\", rel: \"noopener noreferrer\" })}\n          {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}\n          className={rowClass}\n        >\n          {renderIcon(icon)}\n          {label}\n          {external && (\n            <>\n              {renderIcon(<IconArrowUpRight aria-hidden />)}\n              <span className=\"sr-only\">(opens in a new tab)</span>\n            </>\n          )}\n        </Link>\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <button\n        type=\"button\"\n        aria-current={active ? \"page\" : undefined}\n        {...(rest as ButtonHTMLAttributes<HTMLButtonElement>)}\n        className={rowClass}\n      >\n        {renderIcon(icon)}\n        {label}\n      </button>\n    </li>\n  );\n}\n\n/* ------------------------------ account row ------------------------------ */\n\n/**\n * Whole-row account trigger. The row itself stays visually quiet — it only\n * carries the `group` state (hover/press/popup-open) and the focus ring;\n * all visual feedback renders on the ⋯ circle via `group-*` classes.\n */\nconst ACCOUNT_ROW =\n  \"group outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-lg p-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2\";\n\n/** Avatar initials: first + last word initial, else the first character. */\nfunction initialsFrom(name: string): string {\n  const words = name.split(/\\s+/).filter(Boolean);\n  const first = words[0]?.[0] ?? name[0] ?? \"?\";\n  const last = words.length >= 2 ? (words[words.length - 1]?.[0] ?? \"\") : \"\";\n  return (first + last).toUpperCase();\n}\n\nexport interface SidebarAccountRowProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> {\n  /** Display name — also the source for fallback initials. */\n  name: string;\n  /** Avatar image URL; falls back to initials while loading or on error. */\n  avatarSrc?: string;\n  /** Override the derived initials. */\n  initials?: string;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * The account chip pinned to the rail's footer — an xs avatar, the name, and\n * a decorative ⋯ circle. The WHOLE row is one button, but the row is only the\n * control — the circle is the indicator: hover, press, and menu-open feedback\n * all render on the ⋯ (a span wearing the stock secondary-circle button\n * classes), driven by the row's `group` state, so it reads as a button\n * without nesting one.\n *\n * It renders a plain `<button>` and forwards every prop, so it slots straight\n * into a menu: `<Menu.Trigger render={<Sidebar.AccountRow name=\"…\" />} />` —\n * Base UI's `data-popup-open` / `data-pressed` states light up the circle.\n */\nfunction AccountRow({\n  name,\n  avatarSrc,\n  initials,\n  className,\n  ...props\n}: SidebarAccountRowProps) {\n  return (\n    <button type=\"button\" className={cn(ACCOUNT_ROW, className)} {...props}>\n      <Avatar.Root size=\"xs\">\n        {avatarSrc && <Avatar.Image src={avatarSrc} alt=\"\" />}\n        <Avatar.Fallback>{initials ?? initialsFrom(name)}</Avatar.Fallback>\n      </Avatar.Root>\n      <span className=\"text-pho-primary min-w-0 flex-1 truncate text-xs\">\n        {name}\n      </span>\n      <span\n        aria-hidden\n        className={buttonVariants({\n          variant: \"secondary\",\n          size: \"sm\",\n          shape: \"circle\",\n          className:\n            \"group-hover:bg-pho-primary-hover group-hover:text-pho-secondary-hover group-data-[popup-open]:bg-pho-primary-hover group-data-[popup-open]:text-pho-secondary-hover p-1 group-data-[pressed]:scale-[0.97]\",\n        })}\n      >\n        <IconDots className=\"size-4\" />\n      </span>\n    </button>\n  );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * The composed sidebar rail. Assemble the frame parts and fill them with\n * rows; wire interactivity by composing other Pho parts around them:\n *\n * ```tsx\n * <Sidebar.Root>\n *   <Sidebar.Header>…brand…</Sidebar.Header>\n *   <Sidebar.Nav>\n *     <Sidebar.Group>\n *       <Sidebar.GroupLabel>Pages</Sidebar.GroupLabel>\n *       <Sidebar.List>\n *         <Sidebar.Item href=\"/\" icon={IconHome} active>\n *           Overview\n *         </Sidebar.Item>\n *       </Sidebar.List>\n *     </Sidebar.Group>\n *   </Sidebar.Nav>\n *   <Sidebar.Footer>\n *     <Menu.Root>\n *       <Menu.Trigger render={<Sidebar.AccountRow name=\"Ada Lovelace\" />} />\n *       …\n *     </Menu.Root>\n *   </Sidebar.Footer>\n * </Sidebar.Root>\n * ```\n */\nexport const Sidebar = {\n  Root,\n  Header,\n  Nav,\n  Group,\n  GroupLabel,\n  List,\n  Item,\n  Footer,\n  AccountRow,\n};\n"],"x_google_ignoreList":[0,1],"mappings":"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"}

package/dist/components/avatar.js

@@ -1,49 +1,6 @@
 "use client";
-import { t as s } from "../chunks/cn-7uGUzCOM.js";
-import { t as l } from "../chunks/resolve-variant-CcD8iG5l.js";
-import "react";
-import { jsx as r } from "react/jsx-runtime";
-import { Avatar as i } from "@base-ui/react/avatar";
-var o = {
-  sm: {
-    classes: "size-8 text-xs",
-    description: "Small — dense lists"
-  },
-  md: {
-    classes: "size-10 text-sm",
-    description: "Medium — the default"
-  },
-  lg: {
-    classes: "size-12 text-md",
-    description: "Large — profile headers"
-  }
-};
-function n({ className: e, size: t = "md", ...a }) {
-  return /* @__PURE__ */ r(i.Root, {
-    className: s("squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none", l(o, t), e),
-    ...a
-  });
-}
-function m({ className: e, ...t }) {
-  return /* @__PURE__ */ r(i.Image, {
-    className: s("size-full object-cover", e),
-    ...t
-  });
-}
-function c({ className: e, ...t }) {
-  return /* @__PURE__ */ r(i.Fallback, {
-    className: s("flex size-full items-center justify-center", e),
-    ...t
-  });
-}
-var x = {
-  Root: n,
-  Image: m,
-  Fallback: c
-};
+import { n as a, t as r } from "../chunks/avatar-Bb4RZQIa.js";
 export {
-  o as AVATAR_SIZES,
-  x as Avatar
+  r as AVATAR_SIZES,
+  a as Avatar
 };
-
-//# sourceMappingURL=avatar.js.map

package/dist/index.js

@@ -1,28 +1,34 @@
 "use client";
-import { t as o } from "./chunks/cn-7uGUzCOM.js";
+import { t as a } from "./chunks/cn-7uGUzCOM.js";
 import { n as s, r, t as n } from "./chunks/link-provider-9TFNyDqO.js";
 import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
 import "./utils.js";
-import { a as p, c as u, i as B, l as T, n as c, o as E, r as S, s as l, t as N, u as _ } from "./chunks/button-CQ4cZvkC.js";
-import { t as C } from "./chunks/input-DbJpdu6v.js";
-import { t as L } from "./chunks/close-button-CNhn8z0w.js";
-import { t as U } from "./chunks/dialog-7oOe-eaO.js";
+import { a as T, c as f, i as B, l as I, n as p, o as S, r as u, s as _, t as A, u as c } from "./chunks/button-CQ4cZvkC.js";
+import { a as C, i as N, n as O, r as V, t as l } from "./chunks/sidebar-CivriTLb.js";
+import { t as k } from "./chunks/input-DbJpdu6v.js";
+import { t as U } from "./chunks/close-button-CNhn8z0w.js";
+import { t as b } from "./chunks/dialog-7oOe-eaO.js";
 export {
-  N as BUTTON_SHAPES,
-  c as BUTTON_SIZES,
-  S as BUTTON_VARIANTS,
+  A as BUTTON_SHAPES,
+  p as BUTTON_SIZES,
+  u as BUTTON_VARIANTS,
   B as Button,
-  p as ButtonLink,
-  L as CloseButton,
-  U as Dialog,
-  E as EFFECT_BUTTON_SIZES,
-  l as EffectButton,
-  u as EffectButtonLink,
-  C as Input,
+  T as ButtonLink,
+  U as CloseButton,
+  b as Dialog,
+  S as EFFECT_BUTTON_SIZES,
+  _ as EffectButton,
+  f as EffectButtonLink,
+  k as Input,
   n as LinkProvider,
-  T as buttonVariants,
-  o as cn,
-  _ as effectButtonVariants,
+  l as SIDEBAR_ITEM,
+  O as SIDEBAR_ITEM_ACTIVE,
+  V as SIDEBAR_ITEM_INACTIVE,
+  N as SIDEBAR_ROOT,
+  C as Sidebar,
+  I as buttonVariants,
+  a as cn,
+  c as effectButtonVariants,
   r as isReactComponent,
   m as resolveVariant,
   s as useLinkComponent

package/dist/primitives.js

@@ -42,10 +42,10 @@ import "./primitives/toolbar.js";
 import "./primitives/tooltip.js";
 export * from "@base-ui/react/field";
 export * from "@base-ui/react/dialog";
+export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/accordion";
 export * from "@base-ui/react/alert-dialog";
 export * from "@base-ui/react/autocomplete";
-export * from "@base-ui/react/avatar";
 export * from "@base-ui/react/button";
 export * from "@base-ui/react/checkbox";
 export * from "@base-ui/react/checkbox-group";

package/dist/sections/sidebar.js

@@ -0,0 +1,9 @@
+"use client";
+import { a as E, i as a, n as s, r as A, t as T } from "../chunks/sidebar-CivriTLb.js";
+export {
+  T as SIDEBAR_ITEM,
+  s as SIDEBAR_ITEM_ACTIVE,
+  A as SIDEBAR_ITEM_INACTIVE,
+  a as SIDEBAR_ROOT,
+  E as Sidebar
+};

package/dist/src/components/avatar/avatar.d.ts

@@ -4,8 +4,12 @@ import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
 type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> & {
     className?: string;
 };
-/** Size axis — three sizes, no `xs`/`xl` (Geist-reductive). `md` is default. */
+/** Size axis — four sizes, no `xl` (Geist-reductive). `md` is default. */
 export declare const AVATAR_SIZES: {
+    xs: {
+        classes: string;
+        description: string;
+    };
     sm: {
         classes: string;
         description: string;

package/dist/src/index.d.ts

@@ -9,3 +9,4 @@ export * from './utils';
 export * from './components/button';
 export * from './components/input';
 export * from './components/dialog';
+export * from './sections/sidebar';

package/dist/src/sections/sidebar/index.d.ts

@@ -0,0 +1 @@
+export { Sidebar, SIDEBAR_ROOT, SIDEBAR_ITEM, SIDEBAR_ITEM_ACTIVE, SIDEBAR_ITEM_INACTIVE, type SidebarItemProps, type SidebarItemLinkProps, type SidebarItemButtonProps, type SidebarAccountRowProps, } from './sidebar';

package/dist/src/sections/sidebar/sidebar.d.ts

@@ -0,0 +1,139 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, FC, ReactNode, Ref } from 'react';
+/**
+ * Sidebar — Pho's first SECTION: a composed app rail, not a micro component.
+ * It encodes the navigation rail used across Photon surfaces (the Pho docs
+ * site, the dashboard): a sticky full-height column with a brand header, a
+ * scrollable stack of titled nav groups, and a pinned footer that usually
+ * carries the account row.
+ *
+ * Sections stay presentational — no router, no data fetching, no theme
+ * plumbing. Links render through the host's `LinkProvider` (same contract as
+ * `ButtonLink`), state arrives via props (`active`), and interactive footers
+ * compose with other Pho parts (e.g. wrap `Sidebar.AccountRow` in a
+ * `Menu.Trigger render={...}` to open an account menu).
+ */
+/** The rail itself — sticky, full-height, hairline right edge. */
+export declare const SIDEBAR_ROOT = "border-pho-secondary bg-pho-page sticky top-0 flex h-dvh w-64 shrink-0 flex-col border-r px-4 py-5";
+/** A nav row at rest and on hover. Active/inactive inks split below. */
+export declare const SIDEBAR_ITEM = "outline-pho-brand flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1";
+/**
+ * Selected row — lifted onto the primary surface with the site hairline.
+ * The icon carries the same ink as the label so the pair reads as one unit.
+ */
+export declare const SIDEBAR_ITEM_ACTIVE = "bg-pho-primary text-pho-primary ring-pho-secondary font-medium ring-1 ring-inset *:data-icon:text-fg-pho-primary";
+/**
+ * Resting row — secondary ink (75% alpha; tertiary at 50% fails contrast for
+ * nav labels), ghost wash on hover. The icon tracks the label's ink at every
+ * state instead of sitting on a fainter step.
+ */
+export declare const SIDEBAR_ITEM_INACTIVE: string;
+interface RootProps extends ComponentProps<"aside"> {
+    ref?: Ref<HTMLElement>;
+}
+/** The rail — a sticky, full-height `<aside>` with the hairline right edge. */
+declare function Root({ className, ...props }: RootProps): import("react").JSX.Element;
+/** Brand slot at the top of the rail — logo, wordmark, workspace switcher. */
+declare function Header({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** The scrollable middle — a stack of `Sidebar.Group`s. */
+declare function Nav({ className, ...props }: ComponentProps<"nav">): import("react").JSX.Element;
+/** One titled cluster of nav rows: a `GroupLabel` followed by a `List`. */
+declare function Group({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** The cluster's caption — secondary ink; quaternary (30%) is illegible. */
+declare function GroupLabel({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+interface ListProps extends ComponentProps<"ul"> {
+    /** Lay the rows out in two columns — for long, flat registries. */
+    columns?: boolean;
+}
+/** The rows of a group. `columns` switches to a two-column grid. */
+declare function List({ className, columns, ...props }: ListProps): import("react").JSX.Element;
+/** Pinned bottom cluster — docs link, account row, theme toggle. */
+declare function Footer({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** An icon slot — a component (`IconBook`) or element (`<IconBook />`). */
+type Slottable = ReactNode | FC<{
+    className?: string;
+}>;
+interface ItemBaseProps {
+    /** Slot before the label — a component (`IconBook`) or element. */
+    icon?: Slottable;
+    /** Marks the row as the current destination (adds `aria-current="page"`). */
+    active?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+export interface SidebarItemLinkProps extends ItemBaseProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ItemBaseProps> {
+    /** Destination — rendered through the host's `LinkProvider`. */
+    href: string;
+    /** Leaves the app: opens in a new tab and renders a ↗ cue. */
+    external?: boolean;
+}
+export interface SidebarItemButtonProps extends ItemBaseProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ItemBaseProps> {
+    href?: undefined;
+    external?: undefined;
+}
+export type SidebarItemProps = SidebarItemLinkProps | SidebarItemButtonProps;
+/**
+ * A nav row — a link when `href` is given (rendered through the host's
+ * `LinkProvider`), otherwise a button. `active` lifts the row onto the
+ * primary surface; `external` opens a new tab and appends a ↗ cue.
+ */
+declare function Item({ icon, active, className, children, href, external, ...rest }: SidebarItemProps): import("react").JSX.Element;
+export interface SidebarAccountRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Display name — also the source for fallback initials. */
+    name: string;
+    /** Avatar image URL; falls back to initials while loading or on error. */
+    avatarSrc?: string;
+    /** Override the derived initials. */
+    initials?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The account chip pinned to the rail's footer — an xs avatar, the name, and
+ * a decorative ⋯ circle. The WHOLE row is one button, but the row is only the
+ * control — the circle is the indicator: hover, press, and menu-open feedback
+ * all render on the ⋯ (a span wearing the stock secondary-circle button
+ * classes), driven by the row's `group` state, so it reads as a button
+ * without nesting one.
+ *
+ * It renders a plain `<button>` and forwards every prop, so it slots straight
+ * into a menu: `<Menu.Trigger render={<Sidebar.AccountRow name="…" />} />` —
+ * Base UI's `data-popup-open` / `data-pressed` states light up the circle.
+ */
+declare function AccountRow({ name, avatarSrc, initials, className, ...props }: SidebarAccountRowProps): import("react").JSX.Element;
+/**
+ * The composed sidebar rail. Assemble the frame parts and fill them with
+ * rows; wire interactivity by composing other Pho parts around them:
+ *
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Header>…brand…</Sidebar.Header>
+ *   <Sidebar.Nav>
+ *     <Sidebar.Group>
+ *       <Sidebar.GroupLabel>Pages</Sidebar.GroupLabel>
+ *       <Sidebar.List>
+ *         <Sidebar.Item href="/" icon={IconHome} active>
+ *           Overview
+ *         </Sidebar.Item>
+ *       </Sidebar.List>
+ *     </Sidebar.Group>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Footer>
+ *     <Menu.Root>
+ *       <Menu.Trigger render={<Sidebar.AccountRow name="Ada Lovelace" />} />
+ *       …
+ *     </Menu.Root>
+ *   </Sidebar.Footer>
+ * </Sidebar.Root>
+ * ```
+ */
+export declare const Sidebar: {
+    Root: typeof Root;
+    Header: typeof Header;
+    Nav: typeof Nav;
+    Group: typeof Group;
+    GroupLabel: typeof GroupLabel;
+    List: typeof List;
+    Item: typeof Item;
+    Footer: typeof Footer;
+    AccountRow: typeof AccountRow;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -185,6 +185,10 @@
       "types": "./dist/src/components/notification/index.d.ts",
       "import": "./dist/components/notification.js"
     },
+    "./sections/sidebar": {
+      "types": "./dist/src/sections/sidebar/index.d.ts",
+      "import": "./dist/sections/sidebar.js"
+    },
     "./icons": {
       "types": "./dist/src/icons/index.d.ts",
       "import": "./dist/icons.js"

package/src/styles/theme.css

@@ -178,8 +178,10 @@
   --text-color-fg-pho-error: light-dark(#e01e3d, #ff5c75);
 
   /* =============== Semantic: background (bg-pho-*) =============== */
-  /* App/page canvas — the site's "Primary BG". */
-  --background-color-pho-page: light-dark(#f5f5f7, #000);
+  /* App/page canvas — the dashboard's backdrop (app.photon.codes sign-in).
+     Near-white neutral gray, warmer than the old #f5f5f7 (which had a faint
+     blue cast) and one step off the #fff card surface. */
+  --background-color-pho-page: light-dark(#fafafa, #000);
   /* Main surface: cards, inputs, panels — the site's "BG/Card". */
   --background-color-pho-primary: light-dark(#fff, #101010);
   --background-color-pho-primary-hover: light-dark(#f5f5f7, #1a1a1a);

package/dist/components/avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\n/** Size axis — three sizes, no `xs`/`xl` (Geist-reductive). `md` is default. */\nexport const AVATAR_SIZES = {\n  sm: { classes: \"size-8 text-xs\", description: \"Small — dense lists\" },\n  md: { classes: \"size-10 text-sm\", description: \"Medium — the default\" },\n  lg: { classes: \"size-12 text-md\", description: \"Large — profile headers\" },\n} satisfies VariantMap;\n\nexport type AvatarSize = keyof typeof AVATAR_SIZES;\n\ninterface RootProps extends StyledProps<typeof BaseAvatar.Root> {\n  /** Size variant. @default \"md\" */\n  size?: AvatarSize;\n}\n\nfunction Root({ className, size = \"md\", ...props }: RootProps) {\n  return (\n    <BaseAvatar.Root\n      className={cn(\n        \"squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none\",\n        resolveVariant(AVATAR_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Image({ className, ...props }: StyledProps<typeof BaseAvatar.Image>) {\n  return (\n    <BaseAvatar.Image\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Fallback({\n  className,\n  ...props\n}: StyledProps<typeof BaseAvatar.Fallback>) {\n  return (\n    <BaseAvatar.Fallback\n      className={cn(\"flex size-full items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Avatar built on Base UI `Avatar`. Compose `Avatar.Image` with an\n * `Avatar.Fallback` (initials or icon) that shows while the image loads or if\n * it fails. Set `size` on `Avatar.Root`.\n */\nexport const Avatar = { Root, Image, Fallback };\n"],"mappings":";;;;;;AAcA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IAAE,SAAS;AAAA,IAAkB,aAAa;AAAA,EAAsB;AAAA,EACpE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAAuB;AAAA,EACtE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAA0B;AAC3E;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAoB;AAC7D,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,2KACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0BAA0B,CAAS;AAAA,IACjD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACuC;AAC1C,SACE,gBAAA,EAAC,EAAW,UAAZ;AAAA,IACE,WAAW,EAAG,8CAA8C,CAAS;AAAA,IACrE,GAAI;AAAA,EACL,CAAA;AAEL;AAOA,IAAa,IAAS;AAAA,EAAE,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,UAAA;AAAS"}