@photon-ai/pho-ui 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/dist/chunks/button-GQALfaly.js +325 -0
  2. package/dist/chunks/button-GQALfaly.js.map +1 -0
  3. package/dist/chunks/{close-button-CbQNfpxU.js → close-button-DKaNIndU.js} +6 -6
  4. package/dist/chunks/{close-button-CbQNfpxU.js.map → close-button-DKaNIndU.js.map} +1 -1
  5. package/dist/chunks/{cn-D6jQqeRj.js → cn-7uGUzCOM.js} +2 -3
  6. package/dist/chunks/{cn-D6jQqeRj.js.map → cn-7uGUzCOM.js.map} +1 -1
  7. package/dist/chunks/{dialog-BSBF1Wyq.js → dialog-CyyL5VCc.js} +13 -13
  8. package/dist/chunks/dialog-CyyL5VCc.js.map +1 -0
  9. package/dist/chunks/{input-aZqjjV_m.js → input-DX7d5MlS.js} +3 -3
  10. package/dist/chunks/input-DX7d5MlS.js.map +1 -0
  11. package/dist/chunks/menu-BfaNHnOp.js +101 -0
  12. package/dist/chunks/menu-BfaNHnOp.js.map +1 -0
  13. package/dist/components/accordion.js +1 -1
  14. package/dist/components/alert-dialog.js +5 -5
  15. package/dist/components/alert-dialog.js.map +1 -1
  16. package/dist/components/autocomplete.js +7 -7
  17. package/dist/components/autocomplete.js.map +1 -1
  18. package/dist/components/avatar.js +1 -1
  19. package/dist/components/badge.js +2 -2
  20. package/dist/components/badge.js.map +1 -1
  21. package/dist/components/button.js +10 -11
  22. package/dist/components/checkbox.js +2 -2
  23. package/dist/components/checkbox.js.map +1 -1
  24. package/dist/components/collapsible.js +1 -1
  25. package/dist/components/combobox.js +53 -53
  26. package/dist/components/combobox.js.map +1 -1
  27. package/dist/components/context-menu.js +11 -11
  28. package/dist/components/context-menu.js.map +1 -1
  29. package/dist/components/dialog.js +1 -1
  30. package/dist/components/drawer.js +2 -2
  31. package/dist/components/drawer.js.map +1 -1
  32. package/dist/components/field.js +26 -26
  33. package/dist/components/field.js.map +1 -1
  34. package/dist/components/fieldset.js +1 -1
  35. package/dist/components/form.js +1 -1
  36. package/dist/components/input.js +1 -1
  37. package/dist/components/kbd.js +8 -8
  38. package/dist/components/kbd.js.map +1 -1
  39. package/dist/components/menu.js +1 -1
  40. package/dist/components/menubar.js +5 -5
  41. package/dist/components/menubar.js.map +1 -1
  42. package/dist/components/meter.js +1 -1
  43. package/dist/components/navigation-menu.js +34 -34
  44. package/dist/components/navigation-menu.js.map +1 -1
  45. package/dist/components/notification.js +16 -16
  46. package/dist/components/notification.js.map +1 -1
  47. package/dist/components/number-field.js +18 -18
  48. package/dist/components/number-field.js.map +1 -1
  49. package/dist/components/otp-field.js +6 -6
  50. package/dist/components/otp-field.js.map +1 -1
  51. package/dist/components/popover.js +9 -9
  52. package/dist/components/popover.js.map +1 -1
  53. package/dist/components/preview-card.js +12 -12
  54. package/dist/components/preview-card.js.map +1 -1
  55. package/dist/components/progress.js +1 -1
  56. package/dist/components/radio-group.js +9 -9
  57. package/dist/components/radio-group.js.map +1 -1
  58. package/dist/components/scroll-area.js +1 -1
  59. package/dist/components/select.js +10 -10
  60. package/dist/components/select.js.map +1 -1
  61. package/dist/components/separator.js +1 -1
  62. package/dist/components/slider.js +16 -16
  63. package/dist/components/slider.js.map +1 -1
  64. package/dist/components/switch.js +11 -11
  65. package/dist/components/switch.js.map +1 -1
  66. package/dist/components/tabs.js +15 -15
  67. package/dist/components/tabs.js.map +1 -1
  68. package/dist/components/toast.js +6 -6
  69. package/dist/components/toast.js.map +1 -1
  70. package/dist/components/toggle-group.js +1 -1
  71. package/dist/components/toggle.js +6 -6
  72. package/dist/components/toggle.js.map +1 -1
  73. package/dist/components/toolbar.js +7 -7
  74. package/dist/components/toolbar.js.map +1 -1
  75. package/dist/components/tooltip.js +14 -14
  76. package/dist/components/tooltip.js.map +1 -1
  77. package/dist/index.js +17 -18
  78. package/dist/src/components/button/button.d.ts +12 -35
  79. package/dist/src/components/button/index.d.ts +1 -1
  80. package/dist/src/components/menu/menu.d.ts +2 -2
  81. package/dist/utils.js +1 -1
  82. package/package.json +1 -1
  83. package/src/styles/fonts.css +22 -0
  84. package/src/styles/theme.css +166 -169
  85. package/dist/chunks/button-DjjSiLYz.js +0 -334
  86. package/dist/chunks/button-DjjSiLYz.js.map +0 -1
  87. package/dist/chunks/dialog-BSBF1Wyq.js.map +0 -1
  88. package/dist/chunks/input-aZqjjV_m.js.map +0 -1
  89. package/dist/chunks/menu-BkzDbNuX.js +0 -101
  90. package/dist/chunks/menu-BkzDbNuX.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,29 +1,28 @@
1
1
  "use client";
2
- import { t as o } from "./chunks/cn-D6jQqeRj.js";
2
+ import { t as o } from "./chunks/cn-7uGUzCOM.js";
3
3
  import { n as s, r, t as n } from "./chunks/link-provider-9TFNyDqO.js";
4
4
  import { t as m } from "./chunks/resolve-variant-CcD8iG5l.js";
5
5
  import "./utils.js";
6
- 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";
7
- import { t as I } from "./chunks/close-button-CbQNfpxU.js";
8
- import { t as U } from "./chunks/input-aZqjjV_m.js";
9
- import { t as k } from "./chunks/dialog-BSBF1Wyq.js";
6
+ 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-GQALfaly.js";
7
+ import { t as C } from "./chunks/close-button-DKaNIndU.js";
8
+ import { t as L } from "./chunks/input-DX7d5MlS.js";
9
+ import { t as U } from "./chunks/dialog-CyyL5VCc.js";
10
10
  export {
11
- l as BUTTON_SHAPES,
12
- S as BUTTON_SIZES,
13
- N as BUTTON_VARIANTS,
11
+ N as BUTTON_SHAPES,
12
+ c as BUTTON_SIZES,
13
+ S as BUTTON_VARIANTS,
14
14
  B as Button,
15
- f as ButtonLink,
16
- I as CloseButton,
17
- k as Dialog,
18
- c as EFFECT_BUTTON_SIZES,
19
- _ as EFFECT_BUTTON_VARIANTS,
20
- p as EffectButton,
21
- E as EffectButtonLink,
22
- U as Input,
15
+ p as ButtonLink,
16
+ C as CloseButton,
17
+ U as Dialog,
18
+ E as EFFECT_BUTTON_SIZES,
19
+ l as EffectButton,
20
+ u as EffectButtonLink,
21
+ L as Input,
23
22
  n as LinkProvider,
24
- A as buttonVariants,
23
+ T as buttonVariants,
25
24
  o as cn,
26
- u as effectButtonVariants,
25
+ _ as effectButtonVariants,
27
26
  r as isReactComponent,
28
27
  m as resolveVariant,
29
28
  s as useLinkComponent
@@ -14,17 +14,17 @@ export declare const BUTTON_SIZES: {
14
14
  description: string;
15
15
  };
16
16
  };
17
- /** Shape axis — corner treatment. `square` is the default text-button shape. */
17
+ /** Shape axis — corner treatment. Pills are the photon.codes default. */
18
18
  export declare const BUTTON_SHAPES: {
19
- square: {
19
+ rounded: {
20
20
  classes: string;
21
21
  description: string;
22
22
  };
23
- circle: {
23
+ square: {
24
24
  classes: string;
25
25
  description: string;
26
26
  };
27
- rounded: {
27
+ circle: {
28
28
  classes: string;
29
29
  description: string;
30
30
  };
@@ -56,7 +56,6 @@ export declare function buttonVariants(opts?: {
56
56
  variant?: ButtonVariant;
57
57
  size?: ButtonSize;
58
58
  shape?: ButtonShape;
59
- shadow?: boolean;
60
59
  className?: string;
61
60
  }): string;
62
61
  /** An icon/element slot rendered before or after the label. */
@@ -68,10 +67,8 @@ interface ButtonBaseProps {
68
67
  variant?: ButtonVariant;
69
68
  /** Size variant. @default "md" */
70
69
  size?: ButtonSize;
71
- /** Corner shape. @default "square" */
70
+ /** Corner shape. @default "rounded" */
72
71
  shape?: ButtonShape;
73
- /** Add an elevation shadow (marketing / `rounded`). */
74
- shadow?: boolean;
75
72
  /** Slot before the label — a component (`Plus`) or element (`<Plus />`). */
76
73
  prefix?: Slottable;
77
74
  /** Slot after the label. */
@@ -96,7 +93,7 @@ export interface ButtonLinkProps extends ButtonBaseProps, Omit<AnchorHTMLAttribu
96
93
  * Button — triggers an action that mutates state (submit, save, delete).
97
94
  * For navigation that changes the URL, use {@link ButtonLink}.
98
95
  */
99
- export declare function Button({ variant, size, shape, shadow, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
96
+ export declare function Button({ variant, size, shape, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: ButtonProps): import("react").JSX.Element;
100
97
  export declare namespace Button {
101
98
  var displayName: string;
102
99
  }
@@ -105,7 +102,7 @@ export declare namespace Button {
105
102
  * Shares every visual prop with {@link Button}; renders the host router's link
106
103
  * via `LinkProvider`.
107
104
  */
108
- export declare function ButtonLink({ variant, size, shape, shadow, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
105
+ export declare function ButtonLink({ variant, size, shape, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: ButtonLinkProps): import("react").JSX.Element;
109
106
  export declare namespace ButtonLink {
110
107
  var displayName: string;
111
108
  }
@@ -120,35 +117,15 @@ export declare const EFFECT_BUTTON_SIZES: {
120
117
  description: string;
121
118
  };
122
119
  };
123
- /**
124
- * Emphasis axis for {@link EffectButton} — the static fill + edge treatment.
125
- * `secondary` reuses the white-card surface tokens of Button's `secondary`
126
- * (white card, hairline ring, quiet hover) and skips the glossy sheen — that
127
- * inset shine is the brand-fill treatment.
128
- */
129
- export declare const EFFECT_BUTTON_VARIANTS: {
130
- primary: {
131
- classes: string;
132
- description: string;
133
- };
134
- secondary: {
135
- classes: string;
136
- description: string;
137
- };
138
- };
139
120
  export type EffectButtonSize = keyof typeof EFFECT_BUTTON_SIZES;
140
- export type EffectButtonVariant = keyof typeof EFFECT_BUTTON_VARIANTS;
141
121
  /** Compose the static class string for an effect button — exported for reuse. */
142
122
  export declare function effectButtonVariants(opts?: {
143
- variant?: EffectButtonVariant;
144
123
  size?: EffectButtonSize;
145
124
  fullWidth?: boolean;
146
125
  className?: string;
147
126
  }): string;
148
127
  type MotionConflicts = "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "style";
149
128
  interface EffectButtonBaseProps {
150
- /** Emphasis variant. @default "primary" */
151
- variant?: EffectButtonVariant;
152
129
  /** Size variant. @default "md" */
153
130
  size?: EffectButtonSize;
154
131
  /** Stretch to the container's full width (stacked login / OAuth pills). */
@@ -175,12 +152,12 @@ export interface EffectButtonLinkProps extends EffectButtonBaseProps, Omit<Ancho
175
152
  }
176
153
  /**
177
154
  * EffectButton — the glossy, springy pill ported frame-for-frame from Photon's
178
- * Framer "Button - Effect", driven by Motion. `variant="secondary"` swaps the
179
- * brand fill for the neutral white-card surface without the sheen (the login /
180
- * OAuth pill), and `fullWidth` stretches the pill across its container.
155
+ * Framer "Button - Effect", driven by Motion. `fullWidth` stretches the pill
156
+ * across its container. There is no variant axis — for a supporting/OAuth
157
+ * pill without the sheen, use `<Button variant="secondary">`.
181
158
  * Triggers an action; for navigation use {@link EffectButtonLink}.
182
159
  */
183
- export declare function EffectButton({ variant, size, fullWidth, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: EffectButtonProps): import("react").JSX.Element;
160
+ export declare function EffectButton({ size, fullWidth, prefix, suffix, svgOnly, loading, children, className, ref, ...props }: EffectButtonProps): import("react").JSX.Element;
184
161
  export declare namespace EffectButton {
185
162
  var displayName: string;
186
163
  }
@@ -189,7 +166,7 @@ export declare namespace EffectButton {
189
166
  * the URL. Renders the host router's link (via `LinkProvider`) wrapped by Motion,
190
167
  * so the pill animates identically to the button.
191
168
  */
192
- export declare function EffectButtonLink({ variant, size, fullWidth, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
169
+ export declare function EffectButtonLink({ size, fullWidth, prefix, suffix, svgOnly, loading, disabled, href, children, className, ...props }: EffectButtonLinkProps): import("react").JSX.Element;
193
170
  export declare namespace EffectButtonLink {
194
171
  var displayName: string;
195
172
  }
@@ -1,2 +1,2 @@
1
- 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';
1
+ 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';
2
2
  export { CloseButton, type CloseButtonProps } from './close-button';
@@ -6,8 +6,8 @@ type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "className"> &
6
6
  className?: string;
7
7
  };
8
8
  /** Shared popup + item styles, reused by `ContextMenu` and `Menubar` menus. */
9
- 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";
10
- 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";
9
+ 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";
10
+ 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";
11
11
  declare function Positioner({ className, sideOffset, ...props }: StyledProps<typeof BaseMenu.Positioner>): import("react").JSX.Element;
12
12
  declare function Popup({ className, ...props }: StyledProps<typeof BaseMenu.Popup>): import("react").JSX.Element;
13
13
  declare function Item({ className, ...props }: StyledProps<typeof BaseMenu.Item>): import("react").JSX.Element;
package/dist/utils.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { t as r } from "./chunks/cn-D6jQqeRj.js";
2
+ import { t as r } from "./chunks/cn-7uGUzCOM.js";
3
3
  import { n as e, r as n, t as i } from "./chunks/link-provider-9TFNyDqO.js";
4
4
  import { t as a } from "./chunks/resolve-variant-CcD8iG5l.js";
5
5
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@photon-ai/pho-ui",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "description": "Pho Design System — Photon's React component library, built on Base UI",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {
@@ -2,6 +2,12 @@
2
2
  * Photon brand fonts. Optional — import only if you self-host these files at
3
3
  * `/fonts/...` (or override the URLs). Pulled in by the docs site; product apps
4
4
  * may already ship these fonts.
5
+ *
6
+ * Roles (per photon.codes): PolySans is the voice — body/UI 400–500, headings
7
+ * 550–600 (enable `ss02` on display text). Azeret Mono for code and small
8
+ * labels — always normal case: the system bans all-caps small text for
9
+ * eyebrows, section titles, and descriptions. Instrument Serif (often
10
+ * italic) is the editorial accent.
5
11
  */
6
12
  @font-face {
7
13
  font-family: "PolySans";
@@ -18,3 +24,19 @@
18
24
  font-style: normal;
19
25
  font-display: swap;
20
26
  }
27
+
28
+ @font-face {
29
+ font-family: "Instrument Serif";
30
+ src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
31
+ font-weight: 400;
32
+ font-style: normal;
33
+ font-display: swap;
34
+ }
35
+
36
+ @font-face {
37
+ font-family: "Instrument Serif";
38
+ src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
39
+ font-weight: 400;
40
+ font-style: italic;
41
+ font-display: swap;
42
+ }