@photon-ai/pho-ui 1.1.0 → 1.2.1

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

@@ -3,19 +3,32 @@ import { ComponentProps, ReactNode, Ref } from 'react';
  * Settings — Pho's settings-page section: a page title, section titles, and
  * bordered cards of label/control rows.
  *
- * Spacing: `Stack` separates blocks (`gap-10`). Inside a block, children share
- * `gap-3`. Wrap a section title + description in `Header` (`gap-0.5`) so that
- * pair stays tight — don't put them as loose siblings. Host the page at
- * `max-w-xl` (parts already carry `px-5`).
+ * Spacing: wrap the page in `Page` (`max-w-2xl`, vertical padding). `Stack`
+ * separates blocks (`gap-10`). Inside a block, children share `gap-3`. Wrap a
+ * section title + description in `Header` (`gap-0.5`) so that pair stays tight
+ * — don't put them as loose siblings. Parts already carry `px-5`.
  */
 /** Bordered card that stacks rows with hairline dividers. */
 export declare const SETTINGS_CARD = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary";
+/**
+ * Standalone callout surface — featured block (invite form, notice, etc.).
+ * Don't wrap in `Card`; this is the outer chrome.
+ */
+export declare const SETTINGS_CALLOUT = "flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5";
 /**
  * One settings row — label (+ optional description) left, control right.
  * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter
  * than a comfortable touch target.
  */
 export declare const SETTINGS_ROW = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
+/**
+ * Page chrome — centered column at the settings content width. Hosts
+ * `PageTitle` + `Stack` (and any route-level siblings). Prefer this over
+ * ad-hoc `max-w-*` wrappers in the app shell.
+ */
+declare function Page({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
 /** Page title — largest heading on the surface. */
 declare function PageTitle({ className, children, ...props }: ComponentProps<"h1"> & {
     ref?: Ref<HTMLHeadingElement>;
@@ -49,6 +62,22 @@ declare function Description({ className, ...props }: ComponentProps<"p"> & {
 declare function Card({ className, ...props }: ComponentProps<"div"> & {
     ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
+/**
+ * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and
+ * optional actions) for a featured block — e.g. an invite form. Do not wrap
+ * in `Card`; this is already the outer surface.
+ */
+declare function Callout({ className, ...props }: ComponentProps<"div"> & {
+    ref?: Ref<HTMLDivElement>;
+}): import("react").JSX.Element;
+/** Callout heading — same type as `SectionTitle`. */
+declare function CalloutTitle({ className, children, ...props }: ComponentProps<"h2"> & {
+    ref?: Ref<HTMLHeadingElement>;
+}): import("react").JSX.Element;
+/** Supporting copy under a callout title. */
+declare function CalloutDescription({ className, ...props }: ComponentProps<"p"> & {
+    ref?: Ref<HTMLParagraphElement>;
+}): import("react").JSX.Element;
 export interface SettingsRowProps extends Omit<ComponentProps<"div">, "title"> {
     /** Left-side field name. */
     label: string;
@@ -86,40 +115,53 @@ declare function Footer({ className, ...props }: ComponentProps<"div"> & {
  * Settings page layout. One stack, one gap rhythm — only title scale differs:
  *
  * ```tsx
- * <Settings.PageTitle>Profile</Settings.PageTitle>
- * <Settings.Stack>
- *   <form>
- *     <Settings.Card>
- *       <Settings.Row label="Name" htmlFor="first-name">
- *         <Input id="first-name" size="sm" />
- *       </Settings.Row>
- *     </Settings.Card>
- *   </form>
- *   <form>
- *     <Settings.Header>
- *       <Settings.SectionTitle>Agent profile</Settings.SectionTitle>
- *       <Settings.Description>…</Settings.Description>
- *     </Settings.Header>
- *     <Settings.Card>…</Settings.Card>
- *   </form>
- *   <div>
- *     <Settings.SectionTitle>Danger zone</Settings.SectionTitle>
- *     <Settings.Card>
- *       <Settings.Row label="Delete account" description="…">
- *         <Button color="destructive" size="sm">Delete</Button>
- *       </Settings.Row>
- *     </Settings.Card>
- *   </div>
- * </Settings.Stack>
+ * <Settings.Page>
+ *   <Settings.PageTitle>Profile</Settings.PageTitle>
+ *   <Settings.Stack>
+ *     <form>
+ *       <Settings.Card>
+ *         <Settings.Row label="Name" htmlFor="first-name">
+ *           <Input id="first-name" size="sm" />
+ *         </Settings.Row>
+ *       </Settings.Card>
+ *     </form>
+ *     <form>
+ *       <Settings.Header>
+ *         <Settings.SectionTitle>Agent profile</Settings.SectionTitle>
+ *         <Settings.Description>…</Settings.Description>
+ *       </Settings.Header>
+ *       <Settings.Card>…</Settings.Card>
+ *     </form>
+ *     <div>
+ *       <Settings.SectionTitle>Danger zone</Settings.SectionTitle>
+ *       <Settings.Card>
+ *         <Settings.Row label="Delete account" description="…">
+ *           <Button color="destructive" size="sm">Delete</Button>
+ *         </Settings.Row>
+ *       </Settings.Card>
+ *     </div>
+ *     <Settings.Callout>
+ *       <Settings.Header>
+ *         <Settings.CalloutTitle>Invitations</Settings.CalloutTitle>
+ *         <Settings.CalloutDescription>…</Settings.CalloutDescription>
+ *       </Settings.Header>
+ *       …invite form…
+ *     </Settings.Callout>
+ *   </Settings.Stack>
+ * </Settings.Page>
  * ```
  */
 export declare const Settings: {
+    Page: typeof Page;
     PageTitle: typeof PageTitle;
     Stack: typeof Stack;
     Header: typeof Header;
     SectionTitle: typeof SectionTitle;
     Description: typeof Description;
     Card: typeof Card;
+    Callout: typeof Callout;
+    CalloutTitle: typeof CalloutTitle;
+    CalloutDescription: typeof CalloutDescription;
     Row: typeof Row;
     Value: typeof Value;
     Alert: typeof Alert;

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

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

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

@@ -11,9 +11,25 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, FC, ReactNo
  * `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).
+ *
+ * `Root` takes `inset` (`base` | `sm`, default `base`) for the rail's outer
+ * padding and header spacing — prefer that over host-app class overrides.
  */
-/** 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 pt-5 pb-4";
+/** The rail itself — sticky, full-height, hairline right edge (no inset). */
+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";
+/** Outer inset on `Root` — `base` is the docs/default rail; `sm` is tighter. */
+export declare const SIDEBAR_ROOT_INSET: {
+    readonly base: "px-4 pt-5 pb-4";
+    readonly sm: "px-3 pt-4 pb-3";
+};
+/** `SIDEBAR_ROOT` with the default `base` inset — one string for docs chrome. */
+export declare const SIDEBAR_ROOT_BASE: string;
+/** Header spacing paired with `Root`'s `inset`. */
+export declare const SIDEBAR_HEADER_INSET: {
+    readonly base: "mb-6 px-2";
+    readonly sm: "mb-3 px-0";
+};
+export type SidebarInset = keyof typeof SIDEBAR_ROOT_INSET;
 /** A nav row at rest and on hover. Active/inactive inks split below. */
 export declare const SIDEBAR_ITEM = "outline-pho-brand flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base transition-colors focus-visible:outline-2 focus-visible:-outline-offset-1";
 /**
@@ -28,10 +44,12 @@ export declare const SIDEBAR_ITEM_ACTIVE = "bg-pho-primary text-pho-primary ring
  */
 export declare const SIDEBAR_ITEM_INACTIVE: string;
 interface RootProps extends ComponentProps<"aside"> {
+    /** Outer padding + header spacing. Defaults to `base`. */
+    inset?: SidebarInset;
     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;
+declare function Root({ className, inset, ...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. */

package/dist/src/utils/index.d.ts

@@ -2,3 +2,4 @@ export { cn } from './cn';
 export { isReactComponent } from './is-react-component';
 export { resolveVariant, type VariantDef, type VariantMap, } from './resolve-variant';
 export { LinkProvider, useLinkComponent, type LinkComponent, } from './link-provider';
+export { usePressPulse, CONTROL_PRESS_SCALE, CONTROL_PRESS_SPRING, } from './use-press-pulse';

package/dist/src/utils/use-press-pulse.d.ts

@@ -0,0 +1,41 @@
+import { Transition } from 'motion/react';
+/**
+ * Press feedback for selection controls (Select trigger, Checkbox…) — the same
+ * spring family as Button's effect press, and the same pointer-following
+ * behavior: press in on pointer-down, stay compressed while held, spring back
+ * on release. One deliberate refinement over a bare `whileTap`: a fast tap
+ * never truncates the press-in leg — it always reaches full depth before
+ * springing back, so even the quickest click reads as a complete tick.
+ */
+export declare const CONTROL_PRESS_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 700;
+    readonly damping: 32;
+    readonly mass: 0.06;
+};
+/** Default press depth — shallow; each control can tune its own. */
+export declare const CONTROL_PRESS_SCALE = 0.96;
+/**
+ * Pointer-following press driven by Motion controls. Spread `motionProps` onto
+ * a `motion.*` element (via Base UI `render`): pointer-down (primary button)
+ * compresses and holds; release springs back once the press-in leg has
+ * finished. Release is tracked on `window`, so dragging off the control before
+ * letting go still restores it.
+ */
+export declare function usePressPulse(opts?: {
+    scale?: number;
+    disabled?: boolean;
+    /** Spring override for both legs of the press. @default CONTROL_PRESS_SPRING */
+    transition?: Transition;
+}): {
+    pulse: () => void;
+    motionProps: {
+        initial: false;
+        animate: import('motion/react').LegacyAnimationControls;
+        onPointerDown: (event: {
+            button: number;
+            pointerId: number;
+            isPrimary: boolean;
+        }) => void;
+    };
+};

package/dist/utils.js

@@ -1,11 +1,15 @@
 "use client";
-import { t as r } from "./chunks/cn-DTiB6ek_.js";
-import { n as e, r as n, t as i } from "./chunks/link-provider-9TFNyDqO.js";
-import { t as a } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { t as s } from "./chunks/cn-DTiB6ek_.js";
+import { n as t, r as e, t as a } from "./chunks/link-provider-9TFNyDqO.js";
+import { t as i } from "./chunks/resolve-variant-CcD8iG5l.js";
+import { n as p, r as P, t as R } from "./chunks/use-press-pulse-8iorQPsh.js";
 export {
-  i as LinkProvider,
-  r as cn,
-  n as isReactComponent,
-  a as resolveVariant,
-  e as useLinkComponent
+  R as CONTROL_PRESS_SCALE,
+  p as CONTROL_PRESS_SPRING,
+  a as LinkProvider,
+  s as cn,
+  e as isReactComponent,
+  i as resolveVariant,
+  t as useLinkComponent,
+  P as usePressPulse
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {
@@ -37,6 +37,14 @@
       "types": "./dist/src/components/input/index.d.ts",
       "import": "./dist/components/input.js"
     },
+    "./components/input-group": {
+      "types": "./dist/src/components/input-group/index.d.ts",
+      "import": "./dist/components/input-group.js"
+    },
+    "./components/card": {
+      "types": "./dist/src/components/card/index.d.ts",
+      "import": "./dist/components/card.js"
+    },
     "./components/dialog": {
       "types": "./dist/src/components/dialog/index.d.ts",
       "import": "./dist/components/dialog.js"

package/src/styles/theme.css

@@ -280,9 +280,11 @@
     oklch(0 0 0 / 0.08)
   );
   --border-color-pho-error: oklch(0.642 0.245 21.5);
+  /* Resting invalid edge — readable on the field surface without matching
+     the solid focus ring. ~45% light / ~50% dark. */
   --border-color-pho-error-subtle: light-dark(
-    oklch(0.642 0.245 21.5 / 0.3),
-    oklch(0.642 0.245 21.5 / 0.4)
+    oklch(0.642 0.245 21.5 / 0.45),
+    oklch(0.642 0.245 21.5 / 0.5)
   );
   /* Hairline interactive edge shared by hover/selected surfaces. */
   --border-color-pho-interactive: light-dark(
@@ -298,9 +300,10 @@
   --ring-color-pho-secondary: light-dark(oklch(0.949 0 0), oklch(0.244 0 0));
   --ring-color-pho-brand: light-dark(oklch(0 0 0 / 0.4), oklch(1 0 0 / 0.4));
   --ring-color-pho-error: oklch(0.642 0.245 21.5);
+  /* Mirrors border-pho-error-subtle — resting invalid hairline. */
   --ring-color-pho-error-subtle: light-dark(
-    oklch(0.642 0.245 21.5 / 0.3),
-    oklch(0.642 0.245 21.5 / 0.4)
+    oklch(0.642 0.245 21.5 / 0.45),
+    oklch(0.642 0.245 21.5 / 0.5)
   );
   --ring-color-pho-interactive: light-dark(
     oklch(0 0 0 / 0.1),

package/dist/chunks/input-BSJGBUbf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-BSJGBUbf.js","names":["__iconNode","__iconNode"],"sources":["../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconEyeOff.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconEye.mjs","../../../../node_modules/.pnpm/@tabler+icons-react@3.44.0_react@19.2.7/node_modules/@tabler/icons-react/dist/esm/icons/IconAlertCircleFilled.mjs","../../src/components/input/input.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\": \"M10.585 10.587a2 2 0 0 0 2.829 2.828\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87\", \"key\": \"svg-1\" }], [\"path\", { \"d\": \"M3 3l18 18\", \"key\": \"svg-2\" }]];\nconst IconEyeOff = createReactComponent(\"outline\", \"eye-off\", \"EyeOff\", __iconNode);\n\nexport { __iconNode, IconEyeOff as default };\n//# sourceMappingURL=IconEyeOff.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\": \"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\", \"key\": \"svg-0\" }], [\"path\", { \"d\": \"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\", \"key\": \"svg-1\" }]];\nconst IconEye = createReactComponent(\"outline\", \"eye\", \"Eye\", __iconNode);\n\nexport { __iconNode, IconEye as default };\n//# sourceMappingURL=IconEye.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\": \"M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\", \"key\": \"svg-0\" }]];\nconst IconAlertCircleFilled = createReactComponent(\"filled\", \"alert-circle-filled\", \"AlertCircleFilled\", __iconNode);\n\nexport { __iconNode, IconAlertCircleFilled as default };\n//# sourceMappingURL=IconAlertCircleFilled.mjs.map\n","import {\n  useState,\n  type ComponentType,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport {\n  IconAlertCircleFilled,\n  IconEye,\n  IconEyeOff,\n} from \"@tabler/icons-react\";\nimport { Field } from \"@base-ui/react/field\";\nimport { cn } from \"../../utils/cn\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\n// Control padding per size. The wrapper carries a 2px inset (`p-0.5`) so the\n// control's border box — and the browser's autofill fill it paints — sits\n// inside the ring instead of over it; these paddings are the documented\n// effective padding (sm/md 12/8px, lg 14/10px) minus that 2px inset, so the\n// text position and total field height are unchanged.\nconst SIZE_PAD: Record<InputSize, string> = {\n  // 16px on small viewports — iOS zooms into any focused field under 16px.\n  sm: \"px-2.5 py-1.5 text-md md:text-base\",\n  md: \"px-2.5 py-1.5 text-md\",\n  lg: \"px-3 py-2 text-md\",\n};\n// Effective icon clearance minus the wrapper's 2px inset.\nconst LEADING_PAD: Record<InputSize, string> = {\n  sm: \"pl-8.5\",\n  md: \"pl-9.5\",\n  lg: \"pl-10\",\n};\n// Icons are absolutely positioned, so they're placed from the wrapper's\n// padding edge — which, with no border, is the visible field edge; the\n// wrapper's `p-0.5` does not offset them.\nconst LEADING_ICON_POS: Record<InputSize, string> = {\n  sm: \"left-3 size-4\",\n  md: \"left-3 size-5\",\n  lg: \"left-3.5 size-5\",\n};\n// Wrapper corner radius — `rounded-base` (12px) at every size; `lg` also gets\n// `squircle` superellipse smoothing (the ring is a box-shadow on this wrapper,\n// so it follows the border-radius automatically).\nconst SIZE_RADIUS: Record<InputSize, string> = {\n  sm: \"rounded-base\",\n  md: \"rounded-base\",\n  lg: \"squircle rounded-base\",\n};\n// Concentric inner-curve cover, `lg` only. Nested corner radii must follow\n// innerRadius = outerRadius − inset, so the hairline's inner edge at a 12px\n// outer radius is 11px at rest (ring-1) and 10px when focused (ring-2).\n// Browsers derive that automatically for plain round corners, but with\n// `corner-shape: superellipse(...)` shipping engines still scale (rather than\n// offset) the inner shadow curve, which renders the ring visibly thicker at\n// the four corners (see w3c/csswg-drafts#12961). This ::before repaints the\n// field surface over everything inside the correct concentric curve — a round\n// radius is the right parallel-offset approximation of the mild superellipse —\n// so the ring reads as a uniform hairline in every engine. `isolate` +\n// `-z-10` slot the cover above the wrapper's background/ring but below the\n// control's text, icons, and autofill fill. `sm`/`md` have no corner-shape,\n// so the native (already concentric) rendering is kept there.\n// The ::before is absolutely positioned, so its inset is measured from the\n// wrapper's border box (border 0): 1px in at rest, 2px in when focused.\nconst SIZE_RING_COVER: Record<InputSize, string> = {\n  sm: \"\",\n  md: \"\",\n  lg: cn(\n    \"isolate before:pointer-events-none before:absolute before:-z-10 before:content-['']\",\n    \"before:bg-pho-primary before:inset-px before:rounded-[calc(var(--radius-base)-1px)]\",\n    \"has-[input:focus-visible]:before:inset-0.5 has-[input:focus-visible]:before:rounded-[calc(var(--radius-base)-2px)]\",\n    \"before:transition-[inset,border-radius] before:duration-100 before:ease-linear\",\n  ),\n};\n// The control's border box sits 2px inside the wrapper (its `p-0.5` inset),\n// clear of both ring widths, so the browser's autofill fill paints inside the\n// hairline instead of over it. Rounding follows inner = outer − gap, derived\n// from the token with calc. Round (not squircle) — the parallel offset of\n// the wrapper's mild superellipse is effectively circular.\nconst SIZE_AUTOFILL_RADIUS: Record<InputSize, string> = {\n  sm: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n  md: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n  lg: \"autofill:rounded-[calc(var(--radius-base)-2px)]\",\n};\n\nexport interface InputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  /** Field label (associated for accessibility). */\n  label?: ReactNode;\n  /** Helper text below the field; rendered in the error color when `invalid`. */\n  hint?: ReactNode;\n  /** Size variant. @default \"md\" */\n  size?: InputSize;\n  /** Render the invalid state (ring + icon + error-colored hint). */\n  invalid?: boolean;\n  /** Leading icon component (e.g. a Tabler icon). */\n  icon?: ComponentType<{ className?: string }>;\n  /** Node rendered at the right edge of the label row (e.g. \"Forgot?\"). */\n  labelTrailing?: ReactNode;\n  /** Class applied to the input wrapper. */\n  wrapperClassName?: string;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * Text input built on Base UI `Field` (label/description a11y wiring) with\n * Pho's bordered surface, leading icon, invalid state, and a built-in password\n * reveal toggle.\n */\nexport function Input({\n  label,\n  hint,\n  size = \"md\",\n  invalid,\n  icon: Icon,\n  labelTrailing,\n  disabled,\n  required,\n  type = \"text\",\n  className,\n  wrapperClassName,\n  id,\n  ref,\n  ...props\n}: InputProps) {\n  const [reveal, setReveal] = useState(false);\n  const isPassword = type === \"password\";\n  const resolvedType = isPassword && reveal ? \"text\" : type;\n  const hasLeadingIcon = Boolean(Icon);\n  const hasTrailingIcon = isPassword || invalid;\n\n  return (\n    <Field.Root\n      disabled={disabled}\n      className=\"group/field flex w-full flex-col gap-1.5\"\n    >\n      {label && (\n        <div className=\"flex items-center justify-between gap-2\">\n          <Field.Label className=\"text-pho-secondary flex cursor-default items-center gap-0.5 text-base font-medium\">\n            {label}\n            {required && <span className=\"text-pho-brand\">*</span>}\n          </Field.Label>\n          {labelTrailing}\n        </div>\n      )}\n\n      <div\n        data-invalid={invalid || undefined}\n        className={cn(\n          // Flat field surface — hairline ring only; elevation shadows are\n          // reserved for floating layers (menus/popovers/dialogs). `p-0.5`\n          // insets the control 2px (the focused ring width) so its background\n          // and the browser's autofill fill nest inside the ring; the size\n          // maps compensate so effective padding/height are unchanged.\n          \"bg-pho-primary ring-pho-primary relative flex w-full items-center p-0.5 ring-1 transition-shadow duration-100 ease-linear ring-inset\",\n          SIZE_RADIUS[size],\n          SIZE_RING_COVER[size],\n          \"has-[input:focus-visible]:ring-pho-brand has-[input:focus-visible]:ring-2\",\n          \"data-[invalid]:ring-pho-error-subtle data-[invalid]:has-[input:focus-visible]:ring-pho-error\",\n          \"group-data-[disabled]/field:cursor-not-allowed group-data-[disabled]/field:opacity-50\",\n          wrapperClassName,\n        )}\n      >\n        {Icon && (\n          <Icon\n            className={cn(\n              \"text-pho-secondary pointer-events-none absolute\",\n              LEADING_ICON_POS[size],\n            )}\n          />\n        )}\n\n        <Field.Control\n          ref={ref}\n          id={id}\n          type={resolvedType}\n          required={required}\n          {...props}\n          className={cn(\n            \"text-pho-primary placeholder:text-pho-placeholder m-0 w-full bg-transparent outline-none disabled:cursor-not-allowed\",\n            SIZE_PAD[size],\n            SIZE_AUTOFILL_RADIUS[size],\n            hasLeadingIcon && LEADING_PAD[size],\n            // 34px + the wrapper's 2px inset = the previous 36px clearance.\n            hasTrailingIcon && \"pr-8.5\",\n            className,\n          )}\n        />\n\n        {invalid && !isPassword && (\n          <IconAlertCircleFilled className=\"text-pho-error pointer-events-none absolute right-3 size-4\" />\n        )}\n\n        {isPassword && (\n          <button\n            type=\"button\"\n            // Reachable by click but skipped in tab order so Tab moves field→field.\n            tabIndex={-1}\n            aria-label=\"Toggle password visibility\"\n            onClick={() => setReveal((v) => !v)}\n            className=\"text-pho-secondary hover:text-pho-secondary-hover absolute right-3 flex cursor-pointer items-center transition duration-100 ease-linear focus:outline-none\"\n          >\n            {reveal ? (\n              <IconEyeOff className=\"size-4\" />\n            ) : (\n              <IconEye className=\"size-4\" />\n            )}\n          </button>\n        )}\n      </div>\n\n      {hint && (\n        <Field.Description\n          className={cn(\n            \"text-pho-description text-base\",\n            invalid && \"text-pho-error\",\n          )}\n        >\n          {hint}\n        </Field.Description>\n      )}\n    </Field.Root>\n  );\n}\n\nInput.displayName = \"Input\";\n"],"x_google_ignoreList":[0,1,2],"mappings":"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"}

package/dist/chunks/settings-B3ilbRcF.js

@@ -1,104 +0,0 @@
-"use client";
-import { t as a } from "./cn-DTiB6ek_.js";
-import "react";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-var c = "divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary", p = "flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6";
-function m({ className: e, children: t, ...s }) {
-  return /* @__PURE__ */ r("h1", {
-    className: a("text-display-base text-pho-primary px-5 font-medium", e),
-    ...s,
-    children: t
-  });
-}
-function x({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: a("mt-6 flex flex-col gap-10", "*:flex *:flex-col *:gap-3", e),
-    ...t
-  });
-}
-function d({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: a("flex flex-col gap-0.5", e),
-    ...t
-  });
-}
-function f({ className: e, children: t, ...s }) {
-  return /* @__PURE__ */ r("h2", {
-    className: a("text-display-xs text-pho-primary px-5 font-medium", e),
-    ...s,
-    children: t
-  });
-}
-function u({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: a("text-display-xs text-pho-description px-5 font-normal", e),
-    ...t
-  });
-}
-function h({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: a(c, e),
-    ...t
-  });
-}
-function N({ label: e, description: t, htmlFor: s, className: i, children: o, ...l }) {
-  return /* @__PURE__ */ n("div", {
-    className: a(p, i),
-    ...l,
-    children: [/* @__PURE__ */ n("div", {
-      className: "min-w-0",
-      children: [s ? /* @__PURE__ */ r("label", {
-        htmlFor: s,
-        className: "text-pho-primary block text-base font-normal",
-        children: e
-      }) : /* @__PURE__ */ r("p", {
-        className: "text-pho-primary text-base font-normal",
-        children: e
-      }), t ? /* @__PURE__ */ r("p", {
-        className: "text-pho-description mt-0.5 text-xs",
-        children: t
-      }) : null]
-    }), /* @__PURE__ */ r("div", {
-      className: "flex w-full min-w-0 items-center gap-2 sm:w-auto",
-      children: o
-    })]
-  });
-}
-function y({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    className: a("text-pho-description truncate text-base", e),
-    ...t
-  });
-}
-function b({ className: e, ...t }) {
-  return /* @__PURE__ */ r("p", {
-    role: "alert",
-    className: a("text-pho-error px-5 pb-3 text-xs", e),
-    ...t
-  });
-}
-function v({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", {
-    className: a("flex items-center justify-between gap-6 px-5 py-4", e),
-    ...t
-  });
-}
-var T = {
-  PageTitle: m,
-  Stack: x,
-  Header: d,
-  SectionTitle: f,
-  Description: u,
-  Card: h,
-  Row: N,
-  Value: y,
-  Alert: b,
-  Footer: v
-};
-export {
-  p as n,
-  T as r,
-  c as t
-};
-
-//# sourceMappingURL=settings-B3ilbRcF.js.map

package/dist/chunks/settings-B3ilbRcF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"settings-B3ilbRcF.js","names":[],"sources":["../../src/sections/settings/settings.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, type Ref } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Settings — Pho's settings-page section: a page title, section titles, and\n * bordered cards of label/control rows.\n *\n * Spacing: `Stack` separates blocks (`gap-10`). Inside a block, children share\n * `gap-3`. Wrap a section title + description in `Header` (`gap-0.5`) so that\n * pair stays tight — don't put them as loose siblings. Host the page at\n * `max-w-xl` (parts already carry `px-5`).\n */\n\n/* ------------------------------- class map ------------------------------- */\n\n/** Bordered card that stacks rows with hairline dividers. */\nexport const SETTINGS_CARD =\n  \"divide-y divide-pho-secondary rounded-base border border-pho-secondary bg-pho-primary\";\n\n/**\n * One settings row — label (+ optional description) left, control right.\n * `min-h-[4.25rem]` (68px) keeps avatar/control rows from collapsing shorter\n * than a comfortable touch target.\n */\nexport const SETTINGS_ROW =\n  \"flex min-h-[4.25rem] flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6\";\n\n/* --------------------------------- parts --------------------------------- */\n\n/** Page title — largest heading on the surface. */\nfunction PageTitle({\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h1\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  return (\n    <h1\n      className={cn(\n        \"text-display-base text-pho-primary px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h1>\n  );\n}\n\n/**\n * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;\n * each block lays out its children with `gap-3`.\n */\nfunction Stack({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"mt-6 flex flex-col gap-10\",\n        \"*:flex *:flex-col *:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so\n * the block's `gap-3` only applies between this header and the card.\n */\nfunction Header({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(\"flex flex-col gap-0.5\", className)} {...props} />;\n}\n\n/** Section heading — same padding as the page title, smaller type. */\nfunction SectionTitle({\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  return (\n    <h2\n      className={cn(\n        \"text-display-xs text-pho-primary px-5 font-medium\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/**\n * Supporting copy under a section title. Same display step as the title;\n * color + normal weight keep it secondary. Always wrap with `Header`.\n */\nfunction Description({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description px-5 font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Bordered card that stacks settings rows with hairline dividers. */\nfunction Card({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(SETTINGS_CARD, className)} {...props} />;\n}\n\nexport interface SettingsRowProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Left-side field name. */\n  label: string;\n  /** Optional helper under the label. */\n  description?: ReactNode;\n  /** Associates the label with a control id. When omitted, the label is not a `<label>`. */\n  htmlFor?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * One settings row: label (+ optional description) left, control right.\n * Pass `htmlFor` when the row wraps a labelled input; omit it for display/\n * action rows (avatar, danger-zone delete).\n */\nfunction Row({\n  label,\n  description,\n  htmlFor,\n  className,\n  children,\n  ...props\n}: SettingsRowProps) {\n  return (\n    <div className={cn(SETTINGS_ROW, className)} {...props}>\n      <div className=\"min-w-0\">\n        {htmlFor ? (\n          <label\n            htmlFor={htmlFor}\n            className=\"text-pho-primary block text-base font-normal\"\n          >\n            {label}\n          </label>\n        ) : (\n          <p className=\"text-pho-primary text-base font-normal\">{label}</p>\n        )}\n        {description ? (\n          <p className=\"text-pho-description mt-0.5 text-xs\">{description}</p>\n        ) : null}\n      </div>\n      <div className=\"flex w-full min-w-0 items-center gap-2 sm:w-auto\">\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Read-only value on the right side of a row (email, etc.). */\nfunction Value({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\"text-pho-description truncate text-base\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Inline error under a row (still inside the card). Matches card horizontal\n * padding so hosts don't re-apply `px-5`.\n */\nfunction Alert({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      role=\"alert\"\n      className={cn(\"text-pho-error px-5 pb-3 text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Trailing bar inside a card — typically a save status + submit button that\n * appears after the form is dirty. Same horizontal/vertical padding as a row.\n */\nfunction Footer({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between gap-6 px-5 py-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* -------------------------------- assembly ------------------------------- */\n\n/**\n * Settings page layout. One stack, one gap rhythm — only title scale differs:\n *\n * ```tsx\n * <Settings.PageTitle>Profile</Settings.PageTitle>\n * <Settings.Stack>\n *   <form>\n *     <Settings.Card>\n *       <Settings.Row label=\"Name\" htmlFor=\"first-name\">\n *         <Input id=\"first-name\" size=\"sm\" />\n *       </Settings.Row>\n *     </Settings.Card>\n *   </form>\n *   <form>\n *     <Settings.Header>\n *       <Settings.SectionTitle>Agent profile</Settings.SectionTitle>\n *       <Settings.Description>…</Settings.Description>\n *     </Settings.Header>\n *     <Settings.Card>…</Settings.Card>\n *   </form>\n *   <div>\n *     <Settings.SectionTitle>Danger zone</Settings.SectionTitle>\n *     <Settings.Card>\n *       <Settings.Row label=\"Delete account\" description=\"…\">\n *         <Button color=\"destructive\" size=\"sm\">Delete</Button>\n *       </Settings.Row>\n *     </Settings.Card>\n *   </div>\n * </Settings.Stack>\n * ```\n */\nexport const Settings = {\n  PageTitle,\n  Stack,\n  Header,\n  SectionTitle,\n  Description,\n  Card,\n  Row,\n  Value,\n  Alert,\n  Footer,\n};\n"],"mappings":"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"}

package/dist/chunks/sidebar-C5cIhWs1.js

@@ -1,164 +0,0 @@
-"use client";
-import { t as o } from "./cn-DTiB6ek_.js";
-import { n as g, r as v } from "./link-provider-9TFNyDqO.js";
-import { d as x } from "./close-button-Bq9f-H15.js";
-import { t as h } from "./createReactComponent-BqCmnqfX.js";
-import { n as l } from "./avatar-CiAvJNNs.js";
-import { isValidElement as b } from "react";
-import { Fragment as y, 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 pt-5 pb-4", _ = "outline-pho-brand flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-base 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-pho-primary", E = o("text-pho-secondary *:data-icon:text-pho-secondary", "hover:bg-pho-primary hover:text-pho-primary hover:*:data-icon:text-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-description mb-2 px-2 text-xs font-normal", 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, {}) : b(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(y, { 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-base 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-base",
-        children: r
-      }),
-      /* @__PURE__ */ t("span", {
-        "aria-hidden": !0,
-        className: x({
-          variant: "outlined",
-          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-C5cIhWs1.js.map