@photon-ai/pho-ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,29 +1,28 @@
 "use client";
-import { t as o } from "./chunks/cn-D6jQqeRj.js";
+import { t as o } 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 f, c as p, d as u, i as B, l as E, n as S, o as c, r as N, s as _, t as l, u as A } from "./chunks/button-DjjSiLYz.js";
-import { t as I } from "./chunks/close-button-CbQNfpxU.js";
-import { t as U } from "./chunks/input-aZqjjV_m.js";
-import { t as k } from "./chunks/dialog-BSBF1Wyq.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-BMDHIgZh.js";
+import { t as C } from "./chunks/close-button-DKaNIndU.js";
+import { t as L } from "./chunks/input-DX7d5MlS.js";
+import { t as U } from "./chunks/dialog-CyyL5VCc.js";
 export {
-  l as BUTTON_SHAPES,
-  S as BUTTON_SIZES,
-  N as BUTTON_VARIANTS,
+  N as BUTTON_SHAPES,
+  c as BUTTON_SIZES,
+  S as BUTTON_VARIANTS,
   B as Button,
-  f as ButtonLink,
-  I as CloseButton,
-  k as Dialog,
-  c as EFFECT_BUTTON_SIZES,
-  _ as EFFECT_BUTTON_VARIANTS,
-  p as EffectButton,
-  E as EffectButtonLink,
-  U as Input,
+  p as ButtonLink,
+  C as CloseButton,
+  U as Dialog,
+  E as EFFECT_BUTTON_SIZES,
+  l as EffectButton,
+  u as EffectButtonLink,
+  L as Input,
   n as LinkProvider,
-  A as buttonVariants,
+  T as buttonVariants,
   o as cn,
-  u as effectButtonVariants,
+  _ as effectButtonVariants,
   r as isReactComponent,
   m as resolveVariant,
   s as useLinkComponent

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

@@ -14,17 +14,17 @@ export declare const BUTTON_SIZES: {
         description: string;
     };
 };
-/** Shape axis — corner treatment. `square` is the default text-button shape. */
+/** Shape axis — corner treatment. Pills are the photon.codes default. */
 export declare const BUTTON_SHAPES: {
-    square: {
+    rounded: {
         classes: string;
         description: string;
     };
-    circle: {
+    square: {
         classes: string;
         description: string;
     };
-    rounded: {
+    circle: {
         classes: string;
         description: string;
     };
@@ -56,7 +56,6 @@ export declare function buttonVariants(opts?: {
     variant?: ButtonVariant;
     size?: ButtonSize;
     shape?: ButtonShape;
-    shadow?: boolean;
     className?: string;
 }): string;
 /** An icon/element slot rendered before or after the label. */
@@ -68,10 +67,8 @@ interface ButtonBaseProps {
     variant?: ButtonVariant;
     /** Size variant. @default "md" */
     size?: ButtonSize;
-    /** Corner shape. @default "square" */
+    /** Corner shape. @default "rounded" */
     shape?: ButtonShape;
-    /** Add an elevation shadow (marketing / `rounded`). */
-    shadow?: boolean;
     /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */
     prefix?: Slottable;
     /** Slot after the label. */
@@ -96,7 +93,7 @@ export interface ButtonLinkProps extends ButtonBaseProps, Omit<AnchorHTMLAttribu
  * Button — triggers an action that mutates state (submit, save, delete).
  * For navigation that changes the URL, use {@link ButtonLink}.
  */
-export declare function Button({ variant, size, shape, shadow, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, shape, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
 export declare namespace Button {
     var displayName: string;
 }
@@ -105,11 +102,15 @@ export declare namespace Button {
  * Shares every visual prop with {@link Button}; renders the host router's link
  * via `LinkProvider`.
  */
-export declare function ButtonLink({ variant, size, shape, shadow, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export declare function ButtonLink({ variant, size, shape, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
 export declare namespace ButtonLink {
     var displayName: string;
 }
-/** Size axis for {@link EffectButton} — padding + label size per source variant. */
+/**
+ * EffectButton shares Button's size axis verbatim — same padding, text size,
+ * and svgOnly geometry, so effect pills line up with plain Buttons.
+ * Kept as a named export for API compatibility.
+ */
 export declare const EFFECT_BUTTON_SIZES: {
     sm: {
         classes: string;
@@ -119,40 +120,33 @@ export declare const EFFECT_BUTTON_SIZES: {
         classes: string;
         description: string;
     };
-};
-/**
- * Emphasis axis for {@link EffectButton} — the static fill + edge treatment.
- * `secondary` reuses the white-card surface tokens of Button's `secondary`
- * (white card, hairline ring, quiet hover) and skips the glossy sheen — that
- * inset shine is the brand-fill treatment.
- */
-export declare const EFFECT_BUTTON_VARIANTS: {
-    primary: {
-        classes: string;
-        description: string;
-    };
-    secondary: {
+    lg: {
         classes: string;
         description: string;
     };
 };
-export type EffectButtonSize = keyof typeof EFFECT_BUTTON_SIZES;
-export type EffectButtonVariant = keyof typeof EFFECT_BUTTON_VARIANTS;
-/** Compose the static class string for an effect button — exported for reuse. */
+export type EffectButtonSize = ButtonSize;
+/** Compose the full class string for an effect button — exported for reuse. */
 export declare function effectButtonVariants(opts?: {
-    variant?: EffectButtonVariant;
     size?: EffectButtonSize;
     fullWidth?: boolean;
     className?: string;
 }): string;
 type MotionConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "style";
 interface EffectButtonBaseProps {
-    /** Emphasis variant. @default "primary" */
-    variant?: EffectButtonVariant;
-    /** Size variant. @default "md" */
+    /** Size variant — Button's scale (32 / 36 / 44px). @default "md" */
     size?: EffectButtonSize;
     /** Stretch to the container's full width (stacked login / OAuth pills). */
     fullWidth?: boolean;
+    /**
+     * Play the Motion treatment. When `true` (the default), hovering springs the
+     * sheen, gap, and icon reveal — at rest the pill reads as a normal button
+     * with the icon hidden. When `false` there is no animation at all: the pill
+     * is a plain static `Button` with the effect styling, and a passed icon is
+     * simply displayed from the start.
+     * @default true
+     */
+    animated?: boolean;
     /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */
     prefix?: Slottable;
     /** Slot after the label. */
@@ -174,22 +168,27 @@ export interface EffectButtonLinkProps extends EffectButtonBaseProps, Omit<Ancho
     disabled?: boolean;
 }
 /**
- * EffectButton — the glossy, springy pill ported frame-for-frame from Photon's
- * Framer "Button - Effect", driven by Motion. `variant="secondary"` swaps the
- * brand fill for the neutral white-card surface without the sheen (the login /
- * OAuth pill), and `fullWidth` stretches the pill across its container.
- * Triggers an action; for navigation use {@link EffectButtonLink}.
+ * EffectButton — {@link Button} wearing the glossy, springy effect treatment
+ * ported frame-for-frame from Photon's Framer "Button - Effect". Shares
+ * Button's size scale (`sm`/`md`/`lg` at 32/36/44px) so it pairs with plain
+ * Buttons at equal heights. `animated` (default `true`) gates the Motion
+ * treatment: off, it's a static effect-styled Button whose icon is always
+ * visible. `fullWidth` stretches the pill across its container. There is no
+ * variant axis — for a supporting/OAuth pill without the sheen, use
+ * `<Button variant="secondary">`. Triggers an action; for navigation use
+ * {@link EffectButtonLink}.
  */
-export declare function EffectButton({ variant, size, fullWidth, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: EffectButtonProps): import("react").JSX.Element;
+export declare function EffectButton({ size, fullWidth, animated, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: EffectButtonProps): import("react").JSX.Element;
 export declare namespace EffectButton {
     var displayName: string;
 }
 /**
- * EffectButtonLink — {@link EffectButton} as a link, for navigation that changes
- * the URL. Renders the host router's link (via `LinkProvider`) wrapped by Motion,
- * so the pill animates identically to the button.
+ * EffectButtonLink — {@link EffectButton} as a link, for navigation that
+ * changes the URL. Composes {@link ButtonLink} (Motion-wrapped when animated),
+ * which renders the host router's link via `LinkProvider`, so the pill
+ * animates identically to the button.
  */
-export declare function EffectButtonLink({ variant, size, fullWidth, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
+export declare function EffectButtonLink({ size, fullWidth, animated, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
 export declare namespace EffectButtonLink {
     var displayName: string;
 }

package/dist/src/components/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button, ButtonLink, buttonVariants, BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, EffectButton, EffectButtonLink, effectButtonVariants, EFFECT_BUTTON_SIZES, EFFECT_BUTTON_VARIANTS, type ButtonProps, type ButtonLinkProps, type ButtonSize, type ButtonShape, type ButtonVariant, type EffectButtonProps, type EffectButtonLinkProps, type EffectButtonSize, type EffectButtonVariant, } from './button';
+export { Button, ButtonLink, buttonVariants, BUTTON_SIZES, BUTTON_SHAPES, BUTTON_VARIANTS, EffectButton, EffectButtonLink, effectButtonVariants, EFFECT_BUTTON_SIZES, type ButtonProps, type ButtonLinkProps, type ButtonSize, type ButtonShape, type ButtonVariant, type EffectButtonProps, type EffectButtonLinkProps, type EffectButtonSize, } from './button';
 export { CloseButton, type CloseButtonProps } from './close-button';

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

@@ -6,8 +6,8 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
     className?: string;
 };
 /** Shared popup + item styles, reused by `ContextMenu` and `Menubar` menus. */
-export declare const MENU_POPUP = "squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-interactive origin-[var(--transform-origin)] min-w-44 rounded-xl p-1 ring-1 ring-inset outline-none transition-[transform,opacity] duration-150 ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0";
-export declare const MENU_ITEM = "relative flex cursor-pointer items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2.5 text-sm text-pho-secondary outline-none select-none data-[highlighted]:bg-pho-secondary data-[highlighted]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:text-fg-pho-quaternary";
+export declare const MENU_POPUP = "squircle bg-pho-primary text-pho-primary shadow-pho-lg ring-pho-secondary origin-[var(--transform-origin)] min-w-44 rounded-xl p-1 ring-1 ring-inset outline-none transition-[transform,opacity] duration-150 ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0";
+export declare const MENU_ITEM = "relative flex cursor-pointer items-center gap-2 rounded-lg py-1.5 pr-2.5 pl-2.5 text-sm text-pho-secondary outline-none select-none data-[highlighted]:bg-pho-ghost-hover data-[highlighted]:text-pho-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:text-fg-pho-quaternary";
 declare function Positioner({ className, sideOffset, ...props }: StyledProps<typeof BaseMenu.Positioner>): import("react").JSX.Element;
 declare function Popup({ className, ...props }: StyledProps<typeof BaseMenu.Popup>): import("react").JSX.Element;
 declare function Item({ className, ...props }: StyledProps<typeof BaseMenu.Item>): import("react").JSX.Element;

package/dist/utils.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as r } from "./chunks/cn-D6jQqeRj.js";
+import { t as r } from "./chunks/cn-7uGUzCOM.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";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photon-ai/pho-ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Pho Design System — Photon's React component library, built on Base UI",
   "license": "UNLICENSED",
   "repository": {

package/src/styles/fonts.css

@@ -2,6 +2,12 @@
  * Photon brand fonts. Optional — import only if you self-host these files at
  * `/fonts/...` (or override the URLs). Pulled in by the docs site; product apps
  * may already ship these fonts.
+ *
+ * Roles (per photon.codes): PolySans is the voice — body/UI 400–500, headings
+ * 550–600 (enable `ss02` on display text). Azeret Mono for code and small
+ * labels — always normal case: the system bans all-caps small text for
+ * eyebrows, section titles, and descriptions. Instrument Serif (often
+ * italic) is the editorial accent.
  */
 @font-face {
   font-family: "PolySans";
@@ -18,3 +24,19 @@
   font-style: normal;
   font-display: swap;
 }
+
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Instrument Serif";
+  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}