@photon-ai/pho-ui 1.2.1 → 1.3.0

package/dist/chunks/settings-B0vhLoMi.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"settings-B0vhLoMi.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: wrap the page in `Page` (`max-w-2xl`, vertical padding). `Stack`\n * separates blocks (`gap-10`). Inside a block, children share `gap-3`. Wrap a\n * section title + description in `Header` (`gap-0.5`) so that pair stays tight\n * — don't put them as loose siblings. 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 * Standalone callout surface — featured block (invite form, notice, etc.).\n * Don't wrap in `Card`; this is the outer chrome.\n */\nexport const SETTINGS_CALLOUT =\n  \"flex flex-col gap-3 rounded-base border border-pho-secondary bg-pho-page p-5\";\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/**\n * Page chrome — centered column at the settings content width. Hosts\n * `PageTitle` + `Stack` (and any route-level siblings). Prefer this over\n * ad-hoc `max-w-*` wrappers in the app shell.\n */\nfunction Page({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return (\n    <div\n      className={cn(\"mx-auto w-full max-w-2xl py-12\", className)}\n      {...props}\n    />\n  );\n}\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\n/**\n * Standalone callout. Pair with `CalloutTitle` / `CalloutDescription` (and\n * optional actions) for a featured block — e.g. an invite form. Do not wrap\n * in `Card`; this is already the outer surface.\n */\nfunction Callout({\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { ref?: Ref<HTMLDivElement> }) {\n  return <div className={cn(SETTINGS_CALLOUT, className)} {...props} />;\n}\n\n/** Callout heading — same type as `SectionTitle`. */\nfunction CalloutTitle({\n  className,\n  children,\n  ...props\n}: ComponentProps<\"h2\"> & { ref?: Ref<HTMLHeadingElement> }) {\n  return (\n    <h2\n      className={cn(\"text-display-xs text-pho-primary font-medium\", className)}\n      {...props}\n    >\n      {children}\n    </h2>\n  );\n}\n\n/** Supporting copy under a callout title. */\nfunction CalloutDescription({\n  className,\n  ...props\n}: ComponentProps<\"p\"> & { ref?: Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      className={cn(\n        \"text-display-xs text-pho-description font-normal\",\n        className,\n      )}\n      {...props}\n    />\n  );\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.Page>\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.Callout>\n *       <Settings.Header>\n *         <Settings.CalloutTitle>Invitations</Settings.CalloutTitle>\n *         <Settings.CalloutDescription>…</Settings.CalloutDescription>\n *       </Settings.Header>\n *       …invite form…\n *     </Settings.Callout>\n *   </Settings.Stack>\n * </Settings.Page>\n * ```\n */\nexport const Settings = {\n  Page,\n  PageTitle,\n  Stack,\n  Header,\n  SectionTitle,\n  Description,\n  Card,\n  Callout,\n  CalloutTitle,\n  CalloutDescription,\n  Row,\n  Value,\n  Alert,\n  Footer,\n};\n"],"mappings":"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"}

package/dist/sections/settings.js

@@ -1,8 +0,0 @@
-"use client";
-import { i as T, n as s, r as t, t as a } from "../chunks/settings-B0vhLoMi.js";
-export {
-  a as SETTINGS_CALLOUT,
-  s as SETTINGS_CARD,
-  t as SETTINGS_ROW,
-  T as Settings
-};

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

@@ -1 +0,0 @@
-export { Settings, SETTINGS_CARD, SETTINGS_CALLOUT, SETTINGS_ROW, type SettingsRowProps, } from './settings';

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

@@ -1,170 +0,0 @@
-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: 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>;
-}): import("react").JSX.Element;
-/**
- * Vertical stack under the page title. Blocks (forms / sections) use `gap-10`;
- * each block lays out its children with `gap-3`.
- */
-declare function Stack({ className, ...props }: ComponentProps<"div"> & {
-    ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
-/**
- * Title + optional description pair. Keeps that couple tight (`gap-0.5`) so
- * the block's `gap-3` only applies between this header and the card.
- */
-declare function Header({ className, ...props }: ComponentProps<"div"> & {
-    ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
-/** Section heading — same padding as the page title, smaller type. */
-declare function SectionTitle({ className, children, ...props }: ComponentProps<"h2"> & {
-    ref?: Ref<HTMLHeadingElement>;
-}): import("react").JSX.Element;
-/**
- * Supporting copy under a section title. Same display step as the title;
- * color + normal weight keep it secondary. Always wrap with `Header`.
- */
-declare function Description({ className, ...props }: ComponentProps<"p"> & {
-    ref?: Ref<HTMLParagraphElement>;
-}): import("react").JSX.Element;
-/** Bordered card that stacks settings rows with hairline dividers. */
-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;
-    /** Optional helper under the label. */
-    description?: ReactNode;
-    /** Associates the label with a control id. When omitted, the label is not a `<label>`. */
-    htmlFor?: string;
-    ref?: Ref<HTMLDivElement>;
-}
-/**
- * One settings row: label (+ optional description) left, control right.
- * Pass `htmlFor` when the row wraps a labelled input; omit it for display/
- * action rows (avatar, danger-zone delete).
- */
-declare function Row({ label, description, htmlFor, className, children, ...props }: SettingsRowProps): import("react").JSX.Element;
-/** Read-only value on the right side of a row (email, etc.). */
-declare function Value({ className, ...props }: ComponentProps<"p"> & {
-    ref?: Ref<HTMLParagraphElement>;
-}): import("react").JSX.Element;
-/**
- * Inline error under a row (still inside the card). Matches card horizontal
- * padding so hosts don't re-apply `px-5`.
- */
-declare function Alert({ className, ...props }: ComponentProps<"p"> & {
-    ref?: Ref<HTMLParagraphElement>;
-}): import("react").JSX.Element;
-/**
- * Trailing bar inside a card — typically a save status + submit button that
- * appears after the form is dirty. Same horizontal/vertical padding as a row.
- */
-declare function Footer({ className, ...props }: ComponentProps<"div"> & {
-    ref?: Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
-/**
- * Settings page layout. One stack, one gap rhythm — only title scale differs:
- *
- * ```tsx
- * <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;
-    Footer: typeof Footer;
-};
-export {};