@speakeasy-api/moonshine 2.0.0-alpha.1 → 2.0.0-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Speakeasy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,6 +1,7 @@
 # 🥃 Moonshine 🥃
 
 [![NPM](https://img.shields.io/badge/npm-moonshine@latest-blue)](https://www.npmjs.com/package/@speakeasy-api/moonshine)
+<a href="https://moonshine.speakeasy.com/" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg"></a>
 
 Speakeasy's design system.
 
@@ -10,7 +11,12 @@ Speakeasy's design system.
 
 ```bash
 pnpm add @speakeasy-api/moonshine
-pnpm add -D tw-animate-css @tailwindcss/typography
+```
+
+Make sure you install the peer dependencies of this package:
+
+```
+pnpm add lucide-react @dnd-kit/core @dnd-kit/modifiers @dnd-kit/utilities react react-dom motion react-markdown remark-gfm shiki react-virtuoso react-resizable-panels @rive-app/react-canvas-lite ai
 ```
 
 ### 2. Configure Tailwind CSS
@@ -27,7 +33,7 @@ Add this to the top of your project's CSS file where you configure Tailwind:
 
 **Note:** The `@reference` directive is required for Tailwind v4 to recognize Moonshine's custom utilities and make them available in your project.
 
-### 3. Import Moonshine's Compiled CSS
+### 3. Import Moonshine's CSS
 
 In your main app file (or root layout):
 
@@ -35,35 +41,36 @@ In your main app file (or root layout):
 import '@speakeasy-api/moonshine/moonshine.css'
 ```
 
+**Note:** Moonshine distributes as pure TypeScript, and Vite will process the CSS from source automatically.
+
 ### 4. Set up the Provider
 
 Wrap your application in the `MoonshineConfigProvider` component:
 
 ```tsx
 import { MoonshineConfigProvider } from '@speakeasy-api/moonshine'
-
-<MoonshineConfigProvider themeElement={document.documentElement}>
+;<MoonshineConfigProvider themeElement={document.documentElement}>
   <App />
 </MoonshineConfigProvider>
 ```
 
-### 5. Configure Custom Fonts (Optional)
+### 6. Configure Custom Fonts (Optional)
 
 Moonshine uses custom fonts (Diatype, Tobias). If you have licenses for these fonts, add them to your project:
 
 ```css
 /* In your global CSS */
 @font-face {
-  font-family: "Diatype";
-  src: url("/fonts/diatype/ABCDiatype-Regular.woff2") format("woff2");
+  font-family: 'Diatype';
+  src: url('/fonts/diatype/ABCDiatype-Regular.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: block;
 }
 
 @font-face {
-  font-family: "Diatype";
-  src: url("/fonts/diatype/ABCDiatype-Light.woff2") format("woff2");
+  font-family: 'Diatype';
+  src: url('/fonts/diatype/ABCDiatype-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: block;
@@ -74,15 +81,13 @@ Moonshine uses custom fonts (Diatype, Tobias). If you have licenses for these fo
 
 If you don't have these fonts, the design system will fall back to system fonts.
 
-### 6. Use Components and Utilities
+### 7. Use Components and Utilities
 
 ```tsx
 import { Grid } from '@speakeasy-api/moonshine'
 
 // Use semantic utility classes
-<div className="text-heading-lg bg-surface-primary">
-  Hello Moonshine!
-</div>
+;<div className="text-heading-lg bg-surface-primary">Hello Moonshine!</div>
 ```
 
 ### TypeScript Support for Utility Classes
@@ -102,13 +107,14 @@ const styles: MoonshineClasses = 'text-heading-lg' // ✅ Autocompletes!
 ```
 
 The types are automatically generated during the build process and include:
+
 - All custom utilities (`text-heading-xl`, `bg-surface-primary`, etc.)
 - All semantic color utilities (`bg-warning`, `text-success`, etc.)
 - Full IntelliSense support in your IDE
 
 💡 **Tip**: This prevents typos and helps you discover available utilities without leaving your editor!
 
-The package is built with [vite](https://vitejs.dev/), and is distributed in both [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) and [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs) formats.
+The package is built with [vite](https://vitejs.dev/) and distributed as **pure TypeScript**. Consumers using Vite will transpile the TypeScript on-the-fly, eliminating the need for a separate build step when linking the library locally.
 
 ### Using Tailwind Merge
 
@@ -124,11 +130,8 @@ return (
     Lorem Ipsum
   </span>
 )
-
 ```
 
-
-
 ## Design System Architecture
 
 Moonshine is a utility-first design system built on top of [Tailwind CSS v4](https://tailwindcss.com/). It provides a curated set of design tokens and utilities that enforce consistency while preventing common pitfalls.
@@ -138,11 +141,13 @@ Moonshine is a utility-first design system built on top of [Tailwind CSS v4](htt
 Our CSS is organized into three main files:
 
 1. **`base.css`** - Primitive design tokens (colors, fonts, spacing scales)
+
    - Contains raw values that should **not** be used directly in components
    - Defines theme-aware semantic tokens that adapt to light/dark mode
    - Houses base element styles and resets
 
 2. **`utilities.css`** - The public API of our design system
+
    - Exposes carefully crafted utility classes like `text-heading-xl`, `bg-surface-primary`
    - Enforces typography combinations to prevent arbitrary text styling
    - Provides semantic color utilities that automatically handle theming
@@ -162,11 +167,13 @@ Our CSS is organized into three main files:
 ### Usage Guidelines
 
 ✅ **Do:**
+
 - Use semantic utilities: `bg-warning`, `text-body`, `border-error`
 - Leverage pre-defined typography scales: `text-heading-xl`, `text-body-sm`
 - Stick to the exposed utility classes in `utilities.css`
 
 ❌ **Don't:**
+
 - Access raw color values: `bg-[var(--color-neutral-200)]`
 - Create arbitrary combinations: `text-[1.813rem] leading-[1.5]`
 - Override the design system without discussing with the team
@@ -176,16 +183,21 @@ For more technical details about the CSS architecture, see [CLAUDE.md](./CLAUDE.
 ## Troubleshooting
 
 ### Utilities not working
+
 Make sure you've added the `@reference` directive to your global CSS file. This is required for Tailwind v4 to pick up Moonshine's utility classes.
 
 ### Fonts not loading
+
 The custom fonts (Diatype, Tobias) require licenses. If you don't have them, the system will use fallback fonts. Ensure your font files are in the correct path if you do have licenses.
 
 ### Dark mode not working
+
 Ensure the `themeElement` prop in `MoonshineConfigProvider` points to the element where your `dark` class is applied (usually `document.documentElement`).
 
 ### TypeScript types not found
+
 Make sure you're importing from the correct path:
+
 ```tsx
 import type { MoonshineClasses } from '@speakeasy-api/moonshine/types/utilities'
 ```
@@ -196,8 +208,7 @@ import type { MoonshineClasses } from '@speakeasy-api/moonshine/types/utilities'
 
 1. Clone the repository
 2. Run `pnpm install` to install the dependencies
-3. Run `pnpm build` to build the package
-4. Run `pnpm storybook` to start the storybook server
+3. Run `pnpm storybook` to start the storybook server
 
 If you'd like to develop Moonshine in tandem with another app, you can follow the steps outlined below in the **Linking the library locally** section.
 
@@ -254,18 +265,33 @@ Run `pnpm test` to run the tests.
 
 ### Linking the library locally
 
-Run `pnpm build:watch` within Moonshine to build the library and watch for changes.
+Since Moonshine distributes as pure TypeScript, linking is much simpler - no build step required!
 
-Then run `pnpm link ../path/to/moonshine` within the app that will use the library. For the registry `webapp` directory (assuming a standard cloning setup where `moonshine` is a sibling of the registry repo), it would be:
+1. **Link the library** from within your consuming app:
 
 ```bash
 pnpm link ../path/to/moonshine
 ```
 
-The lockfile file within your app should referenced the linked copy:
+For example, if `moonshine` is a sibling of your app directory:
+
+```bash
+pnpm link ../moonshine
+```
+
+2. **Start your dev server** - Vite will automatically transpile the TypeScript from the linked library.
+
+The lockfile within your app should reference the linked copy:
 
 ```yaml
 '@speakeasy-api/moonshine':
-  specifier: ^0.43.1
+  specifier: ^2.0.0-alpha.1
   version: link:../../../../moonshine
 ```
+
+**Benefits of pure TypeScript distribution:**
+
+- ✅ No need to run `tsc` in watch mode
+- ✅ No build conflicts between library and consumer
+- ✅ Instant updates when you change source files
+- ✅ Simpler development workflow

package/package.json

@@ -1,20 +1,22 @@
 {
   "name": "@speakeasy-api/moonshine",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.3",
   "packageManager": "pnpm@9.0.0",
   "description": "Speakeasy's design system Moonshine",
-  "main": "dist/moonshine.cjs.js",
-  "module": "dist/moonshine.es.js",
-  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "require": "./dist/moonshine.cjs.js",
-      "import": "./dist/moonshine.es.js"
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
     },
     "./moonshine.css": {
-      "require": "./dist/style.css",
-      "import": "./dist/style.css"
+      "require": "./src/global.css",
+      "import": "./src/global.css",
+      "default": "./src/global.css"
     },
     "./src/global.css": {
       "require": "./src/global.css",
@@ -25,51 +27,32 @@
     "type": "git",
     "url": "https://github.com/speakeasy-api/moonshine.git"
   },
-  "files": [
-    "dist",
-    "src/global.css",
-    "src/base.css",
-    "src/utilities.css",
-    "types"
-  ],
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "pnpm clean && vite build",
-    "build:watch": "vite build --watch --mode development",
     "type-check": "tsc --noEmit --skipLibCheck",
-    "prepack": "pnpm build",
+    "prepack": "pnpm type-check",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "test": "vitest",
-    "visualize": "npx vite-bundle-visualizer",
-    "generate:docs": "node scripts/generate-utility-docs.js",
-    "postbuild": "pnpm generate:docs"
+    "generate:docs": "node scripts/generate-utility-docs.js"
   },
   "author": "Speakeasy",
   "license": "ISC",
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.1.1",
     "@eslint/compat": "^1.2.2",
     "@eslint/js": "^9.13.0",
     "@faker-js/faker": "^9.2.0",
     "@semantic-release/commit-analyzer": "^13.0.0",
     "@semantic-release/npm": "^12.0.1",
     "@semantic-release/release-notes-generator": "^14.0.1",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-interactions": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
-    "@storybook/addon-themes": "^8.6.9",
-    "@storybook/blocks": "^8.6.9",
-    "@storybook/builder-vite": "^8.6.9",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/preview-api": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-vite": "^8.6.9",
-    "@storybook/test": "^8.6.9",
-    "@storybook/theming": "^8.6.9",
+    "@storybook/addon-docs": "^9.1.7",
+    "@storybook/addon-links": "^9.1.7",
+    "@storybook/addon-themes": "^9.1.7",
+    "@storybook/builder-vite": "^9.1.7",
+    "@storybook/react-vite": "^9.1.7",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.2",
     "@testing-library/jest-dom": "^6.6.3",
@@ -84,6 +67,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "9.1.7",
     "eslint-plugin-unused-imports": "^4.1.4",
     "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
@@ -91,7 +75,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.0",
-    "storybook": "^8.6.9",
+    "storybook": "^9.1.7",
     "svgo": "^3.3.2",
     "tsx": "^4.19.3",
     "typescript": "^5.6.3",
@@ -103,18 +87,26 @@
     "vitest": "^2.1.4"
   },
   "peerDependencies": {
+    "ai": "^4.3.15",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@rive-app/react-canvas-lite": "^4.22.0",
     "@types/react": "^18.3.11 || ^19.0.0",
     "lucide-react": "^0.453.0",
+    "motion": "^12.6.3",
     "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0"
+    "react-dom": "^18.3.1 || ^19.0.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^2.1.7",
+    "react-virtuoso": "^4.12.0",
+    "remark-gfm": "^4.0.1",
+    "shiki": "^1.27.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-collapsible": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
@@ -124,19 +116,10 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@rive-app/react-canvas-lite": "^4.22.0",
-    "ai": "^4.3.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "codehike": "^1.0.4",
     "date-fns": "^4.1.0",
-    "framer-motion": "^11.11.11",
-    "motion": "^12.6.3",
-    "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^2.1.7",
-    "react-virtuoso": "^4.12.0",
-    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.1.2",
     "tw-animate-css": "^1.2.4"