@photon-ai/pho-ui 0.1.0

package/package.json

@@ -0,0 +1,406 @@
+{
+  "name": "@photon-ai/pho-ui",
+  "version": "0.1.0",
+  "description": "Pho Design System — Photon's React component library, built on Base UI",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/photon-hq/pho-ui.git",
+    "directory": "packages/pho-ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "dist/styles/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/button": {
+      "types": "./dist/src/components/button/index.d.ts",
+      "import": "./dist/components/button.js"
+    },
+    "./components/input": {
+      "types": "./dist/src/components/input/index.d.ts",
+      "import": "./dist/components/input.js"
+    },
+    "./components/dialog": {
+      "types": "./dist/src/components/dialog/index.d.ts",
+      "import": "./dist/components/dialog.js"
+    },
+    "./components/separator": {
+      "types": "./dist/src/components/separator/index.d.ts",
+      "import": "./dist/components/separator.js"
+    },
+    "./components/avatar": {
+      "types": "./dist/src/components/avatar/index.d.ts",
+      "import": "./dist/components/avatar.js"
+    },
+    "./components/progress": {
+      "types": "./dist/src/components/progress/index.d.ts",
+      "import": "./dist/components/progress.js"
+    },
+    "./components/meter": {
+      "types": "./dist/src/components/meter/index.d.ts",
+      "import": "./dist/components/meter.js"
+    },
+    "./components/toggle": {
+      "types": "./dist/src/components/toggle/index.d.ts",
+      "import": "./dist/components/toggle.js"
+    },
+    "./components/switch": {
+      "types": "./dist/src/components/switch/index.d.ts",
+      "import": "./dist/components/switch.js"
+    },
+    "./components/checkbox": {
+      "types": "./dist/src/components/checkbox/index.d.ts",
+      "import": "./dist/components/checkbox.js"
+    },
+    "./components/radio-group": {
+      "types": "./dist/src/components/radio-group/index.d.ts",
+      "import": "./dist/components/radio-group.js"
+    },
+    "./components/toggle-group": {
+      "types": "./dist/src/components/toggle-group/index.d.ts",
+      "import": "./dist/components/toggle-group.js"
+    },
+    "./components/field": {
+      "types": "./dist/src/components/field/index.d.ts",
+      "import": "./dist/components/field.js"
+    },
+    "./components/fieldset": {
+      "types": "./dist/src/components/fieldset/index.d.ts",
+      "import": "./dist/components/fieldset.js"
+    },
+    "./components/form": {
+      "types": "./dist/src/components/form/index.d.ts",
+      "import": "./dist/components/form.js"
+    },
+    "./components/number-field": {
+      "types": "./dist/src/components/number-field/index.d.ts",
+      "import": "./dist/components/number-field.js"
+    },
+    "./components/otp-field": {
+      "types": "./dist/src/components/otp-field/index.d.ts",
+      "import": "./dist/components/otp-field.js"
+    },
+    "./components/slider": {
+      "types": "./dist/src/components/slider/index.d.ts",
+      "import": "./dist/components/slider.js"
+    },
+    "./components/collapsible": {
+      "types": "./dist/src/components/collapsible/index.d.ts",
+      "import": "./dist/components/collapsible.js"
+    },
+    "./components/accordion": {
+      "types": "./dist/src/components/accordion/index.d.ts",
+      "import": "./dist/components/accordion.js"
+    },
+    "./components/tabs": {
+      "types": "./dist/src/components/tabs/index.d.ts",
+      "import": "./dist/components/tabs.js"
+    },
+    "./components/tooltip": {
+      "types": "./dist/src/components/tooltip/index.d.ts",
+      "import": "./dist/components/tooltip.js"
+    },
+    "./components/popover": {
+      "types": "./dist/src/components/popover/index.d.ts",
+      "import": "./dist/components/popover.js"
+    },
+    "./components/preview-card": {
+      "types": "./dist/src/components/preview-card/index.d.ts",
+      "import": "./dist/components/preview-card.js"
+    },
+    "./components/alert-dialog": {
+      "types": "./dist/src/components/alert-dialog/index.d.ts",
+      "import": "./dist/components/alert-dialog.js"
+    },
+    "./components/drawer": {
+      "types": "./dist/src/components/drawer/index.d.ts",
+      "import": "./dist/components/drawer.js"
+    },
+    "./components/menu": {
+      "types": "./dist/src/components/menu/index.d.ts",
+      "import": "./dist/components/menu.js"
+    },
+    "./components/context-menu": {
+      "types": "./dist/src/components/context-menu/index.d.ts",
+      "import": "./dist/components/context-menu.js"
+    },
+    "./components/menubar": {
+      "types": "./dist/src/components/menubar/index.d.ts",
+      "import": "./dist/components/menubar.js"
+    },
+    "./components/toolbar": {
+      "types": "./dist/src/components/toolbar/index.d.ts",
+      "import": "./dist/components/toolbar.js"
+    },
+    "./components/navigation-menu": {
+      "types": "./dist/src/components/navigation-menu/index.d.ts",
+      "import": "./dist/components/navigation-menu.js"
+    },
+    "./components/select": {
+      "types": "./dist/src/components/select/index.d.ts",
+      "import": "./dist/components/select.js"
+    },
+    "./components/combobox": {
+      "types": "./dist/src/components/combobox/index.d.ts",
+      "import": "./dist/components/combobox.js"
+    },
+    "./components/autocomplete": {
+      "types": "./dist/src/components/autocomplete/index.d.ts",
+      "import": "./dist/components/autocomplete.js"
+    },
+    "./components/toast": {
+      "types": "./dist/src/components/toast/index.d.ts",
+      "import": "./dist/components/toast.js"
+    },
+    "./components/scroll-area": {
+      "types": "./dist/src/components/scroll-area/index.d.ts",
+      "import": "./dist/components/scroll-area.js"
+    },
+    "./components/badge": {
+      "types": "./dist/src/components/badge/index.d.ts",
+      "import": "./dist/components/badge.js"
+    },
+    "./components/kbd": {
+      "types": "./dist/src/components/kbd/index.d.ts",
+      "import": "./dist/components/kbd.js"
+    },
+    "./components/notification": {
+      "types": "./dist/src/components/notification/index.d.ts",
+      "import": "./dist/components/notification.js"
+    },
+    "./icons": {
+      "types": "./dist/src/icons/index.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./utils": {
+      "types": "./dist/src/utils/index.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./primitives": {
+      "types": "./dist/src/primitives/index.d.ts",
+      "import": "./dist/primitives.js"
+    },
+    "./styles": "./src/styles/pho.css",
+    "./styles/fonts": "./src/styles/fonts.css",
+    "./styles/*": "./src/styles/*.css",
+    "./primitives/accordion": {
+      "types": "./dist/src/primitives/accordion.d.ts",
+      "import": "./dist/primitives/accordion.js"
+    },
+    "./primitives/alert-dialog": {
+      "types": "./dist/src/primitives/alert-dialog.d.ts",
+      "import": "./dist/primitives/alert-dialog.js"
+    },
+    "./primitives/autocomplete": {
+      "types": "./dist/src/primitives/autocomplete.d.ts",
+      "import": "./dist/primitives/autocomplete.js"
+    },
+    "./primitives/avatar": {
+      "types": "./dist/src/primitives/avatar.d.ts",
+      "import": "./dist/primitives/avatar.js"
+    },
+    "./primitives/button": {
+      "types": "./dist/src/primitives/button.d.ts",
+      "import": "./dist/primitives/button.js"
+    },
+    "./primitives/checkbox": {
+      "types": "./dist/src/primitives/checkbox.d.ts",
+      "import": "./dist/primitives/checkbox.js"
+    },
+    "./primitives/checkbox-group": {
+      "types": "./dist/src/primitives/checkbox-group.d.ts",
+      "import": "./dist/primitives/checkbox-group.js"
+    },
+    "./primitives/collapsible": {
+      "types": "./dist/src/primitives/collapsible.d.ts",
+      "import": "./dist/primitives/collapsible.js"
+    },
+    "./primitives/combobox": {
+      "types": "./dist/src/primitives/combobox.d.ts",
+      "import": "./dist/primitives/combobox.js"
+    },
+    "./primitives/context-menu": {
+      "types": "./dist/src/primitives/context-menu.d.ts",
+      "import": "./dist/primitives/context-menu.js"
+    },
+    "./primitives/csp-provider": {
+      "types": "./dist/src/primitives/csp-provider.d.ts",
+      "import": "./dist/primitives/csp-provider.js"
+    },
+    "./primitives/dialog": {
+      "types": "./dist/src/primitives/dialog.d.ts",
+      "import": "./dist/primitives/dialog.js"
+    },
+    "./primitives/direction-provider": {
+      "types": "./dist/src/primitives/direction-provider.d.ts",
+      "import": "./dist/primitives/direction-provider.js"
+    },
+    "./primitives/drawer": {
+      "types": "./dist/src/primitives/drawer.d.ts",
+      "import": "./dist/primitives/drawer.js"
+    },
+    "./primitives/field": {
+      "types": "./dist/src/primitives/field.d.ts",
+      "import": "./dist/primitives/field.js"
+    },
+    "./primitives/fieldset": {
+      "types": "./dist/src/primitives/fieldset.d.ts",
+      "import": "./dist/primitives/fieldset.js"
+    },
+    "./primitives/form": {
+      "types": "./dist/src/primitives/form.d.ts",
+      "import": "./dist/primitives/form.js"
+    },
+    "./primitives/input": {
+      "types": "./dist/src/primitives/input.d.ts",
+      "import": "./dist/primitives/input.js"
+    },
+    "./primitives/menu": {
+      "types": "./dist/src/primitives/menu.d.ts",
+      "import": "./dist/primitives/menu.js"
+    },
+    "./primitives/menubar": {
+      "types": "./dist/src/primitives/menubar.d.ts",
+      "import": "./dist/primitives/menubar.js"
+    },
+    "./primitives/meter": {
+      "types": "./dist/src/primitives/meter.d.ts",
+      "import": "./dist/primitives/meter.js"
+    },
+    "./primitives/navigation-menu": {
+      "types": "./dist/src/primitives/navigation-menu.d.ts",
+      "import": "./dist/primitives/navigation-menu.js"
+    },
+    "./primitives/number-field": {
+      "types": "./dist/src/primitives/number-field.d.ts",
+      "import": "./dist/primitives/number-field.js"
+    },
+    "./primitives/otp-field": {
+      "types": "./dist/src/primitives/otp-field.d.ts",
+      "import": "./dist/primitives/otp-field.js"
+    },
+    "./primitives/popover": {
+      "types": "./dist/src/primitives/popover.d.ts",
+      "import": "./dist/primitives/popover.js"
+    },
+    "./primitives/preview-card": {
+      "types": "./dist/src/primitives/preview-card.d.ts",
+      "import": "./dist/primitives/preview-card.js"
+    },
+    "./primitives/progress": {
+      "types": "./dist/src/primitives/progress.d.ts",
+      "import": "./dist/primitives/progress.js"
+    },
+    "./primitives/radio": {
+      "types": "./dist/src/primitives/radio.d.ts",
+      "import": "./dist/primitives/radio.js"
+    },
+    "./primitives/radio-group": {
+      "types": "./dist/src/primitives/radio-group.d.ts",
+      "import": "./dist/primitives/radio-group.js"
+    },
+    "./primitives/scroll-area": {
+      "types": "./dist/src/primitives/scroll-area.d.ts",
+      "import": "./dist/primitives/scroll-area.js"
+    },
+    "./primitives/select": {
+      "types": "./dist/src/primitives/select.d.ts",
+      "import": "./dist/primitives/select.js"
+    },
+    "./primitives/separator": {
+      "types": "./dist/src/primitives/separator.d.ts",
+      "import": "./dist/primitives/separator.js"
+    },
+    "./primitives/slider": {
+      "types": "./dist/src/primitives/slider.d.ts",
+      "import": "./dist/primitives/slider.js"
+    },
+    "./primitives/switch": {
+      "types": "./dist/src/primitives/switch.d.ts",
+      "import": "./dist/primitives/switch.js"
+    },
+    "./primitives/tabs": {
+      "types": "./dist/src/primitives/tabs.d.ts",
+      "import": "./dist/primitives/tabs.js"
+    },
+    "./primitives/toast": {
+      "types": "./dist/src/primitives/toast.d.ts",
+      "import": "./dist/primitives/toast.js"
+    },
+    "./primitives/toggle": {
+      "types": "./dist/src/primitives/toggle.d.ts",
+      "import": "./dist/primitives/toggle.js"
+    },
+    "./primitives/toggle-group": {
+      "types": "./dist/src/primitives/toggle-group.d.ts",
+      "import": "./dist/primitives/toggle-group.js"
+    },
+    "./primitives/toolbar": {
+      "types": "./dist/src/primitives/toolbar.d.ts",
+      "import": "./dist/primitives/toolbar.js"
+    },
+    "./primitives/tooltip": {
+      "types": "./dist/src/primitives/tooltip.d.ts",
+      "import": "./dist/primitives/tooltip.js"
+    }
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@tailwindcss/vite": "^4.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^6.0.3",
+    "happy-dom": "^20.10.6",
+    "plop": "^4.0.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.0",
+    "tsx": "^4.22.4",
+    "typescript": "^5.9.0",
+    "vite": "^8.1.0",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.9"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "clsx": "^2.1.1",
+    "motion": "^12.42.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "scripts": {
+    "build": "pnpm run codegen:primitives && vite build",
+    "dev": "vite build --watch --mode development",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "oxlint src",
+    "codegen:primitives": "tsx scripts/generate-primitives.ts",
+    "new:component": "plop component"
+  }
+}

package/src/styles/fonts.css

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+@font-face {
+  font-family: "PolySans";
+  src: url("/fonts/PolySansVF.woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Azeret Mono";
+  src: url("/fonts/AzeretMono-VariableFont_wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}

package/src/styles/pho.css

@@ -0,0 +1,50 @@
+/**
+ * Pho Design System — Tailwind v4 entry.
+ *
+ * Import this AFTER `@import "tailwindcss"` in your app's CSS, and point a
+ * `@source` at the Pho components so their utility classes are generated:
+ *
+ *   @import "tailwindcss";
+ *   @import "@photon-ai/pho-ui/styles";
+ *   @source "../node_modules/@photon-ai/pho-ui/dist";
+ *
+ * Optionally add the brand fonts:  @import "@photon-ai/pho-ui/styles/fonts";
+ */
+
+@import "./theme.css";
+
+@layer base {
+  /* `light-dark()` tokens resolve against color-scheme. Default light; opt a
+     subtree into dark with `data-mode="dark"` (or a `.dark` class). */
+  :root {
+    color-scheme: light;
+  }
+  [data-mode="dark"],
+  .dark {
+    color-scheme: dark;
+  }
+}
+
+/* True squircle corners (progressive enhancement; falls back to border-radius
+   where `corner-shape` is unsupported). Pair with a `rounded-*` utility. */
+@utility squircle {
+  corner-shape: superellipse(1.1);
+}
+
+/* Inherit the parent's transition timing — handy for icons inside buttons. */
+@utility transition-inherit-all {
+  transition-property: inherit;
+  transition-duration: inherit;
+  transition-timing-function: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}