@speakeasy-api/moonshine 1.20.0 → 1.20.2

package/README.md

@@ -10,7 +10,12 @@ Speakeasy's design system.
 
 ```bash
 pnpm add @speakeasy-api/moonshine
-pnpm add -D tw-animate-css @tailwindcss/typography
+```
+
+Make sure you install Lucide as it is a peer dependency of this package:
+
+```
+pnpm add lucide-react
 ```
 
 ### 2. Configure Tailwind CSS
@@ -41,8 +46,7 @@ Wrap your application in the `MoonshineConfigProvider` component:
 
 ```tsx
 import { MoonshineConfigProvider } from '@speakeasy-api/moonshine'
-
-<MoonshineConfigProvider themeElement={document.documentElement}>
+;<MoonshineConfigProvider themeElement={document.documentElement}>
   <App />
 </MoonshineConfigProvider>
 ```
@@ -54,16 +58,16 @@ Moonshine uses custom fonts (Diatype, Tobias). If you have licenses for these fo
 ```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;
@@ -80,9 +84,7 @@ If you don't have these fonts, the design system will fall back to system fonts.
 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,6 +104,7 @@ 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
@@ -124,11 +127,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 +138,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 +164,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 +180,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'
 ```

package/dist/components/AppLayout/index.d.ts

@@ -11,6 +11,9 @@ interface AppLayoutSidebarProps {
     className?: string;
     children?: React.ReactNode;
 }
+interface AppLayoutThemeSwitcherProps {
+    className?: string;
+}
 interface AppLayoutBreadcrumbProps extends PropsWithChildren {
     className?: string;
 }
@@ -93,6 +96,10 @@ export declare const AppLayout: {
         ({ children, className }: AppLayoutHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    ThemeSwitcher: {
+        ({ className }: AppLayoutThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     Nav: {
         ({ children, className, ...props }: AppLayoutNavProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/ThemeSwitcher/index.d.ts

@@ -1,5 +1,6 @@
 export interface ThemeSwitcherProps {
     onThemeSwitch?: (theme: string) => void;
     className?: string;
+    orientation?: 'horizontal' | 'vertical';
 }
-export declare function ThemeSwitcher({ className, onThemeSwitch, }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeSwitcher({ className, onThemeSwitch, orientation, }: ThemeSwitcherProps): import("react/jsx-runtime").JSX.Element;

package/dist/createCustomLucideIcon-XbD-heqT.mjs

@@ -0,0 +1,19 @@
+import { c as s, t as n } from "./index-DqLwaWEQ.mjs";
+import { Icon as p } from "lucide-react";
+import { forwardRef as f, createElement as i } from "react";
+const C = (e, t, r) => {
+  const o = f(
+    ({ className: a, ...c }, m) => i(p, {
+      ref: m,
+      iconNode: t,
+      className: s(`lucide-${n(e)}`, a),
+      ...r ?? {},
+      ...c
+    })
+  );
+  return o.displayName = `${e}`, o;
+};
+export {
+  C as c
+};
+//# sourceMappingURL=createCustomLucideIcon-XbD-heqT.mjs.map

package/dist/{createCustomLucideIcon-DSxx0O3v.mjs.map → createCustomLucideIcon-XbD-heqT.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"createCustomLucideIcon-DSxx0O3v.mjs","sources":["../src/components/Icon/customIcons/createCustomLucideIcon.ts"],"sourcesContent":["import { cn, toKebabCase } from '@/lib/utils'\nimport { Icon, IconNode, LucideProps } from 'lucide-react'\nimport { createElement, forwardRef } from 'react'\n\nconst createCustomLucideIcon = (\n  iconName: string,\n  iconNode: IconNode,\n  lucideProps?: Partial<LucideProps>\n) => {\n  const Component = forwardRef<SVGSVGElement, LucideProps>(\n    ({ className, ...props }, ref) =>\n      createElement(Icon, {\n        ref,\n        iconNode,\n        className: cn(`lucide-${toKebabCase(iconName)}`, className),\n        ...{ ...(lucideProps ?? {}), ...props },\n      })\n  )\n\n  Component.displayName = `${iconName}`\n\n  return Component\n}\n\nexport default createCustomLucideIcon\n"],"names":["createCustomLucideIcon","iconName","iconNode","lucideProps","Component","forwardRef","className","props","ref","createElement","Icon","cn","toKebabCase"],"mappings":";;;AAIA,MAAMA,IAAyB,CAC7BC,GACAC,GACAC,MACG;AACH,QAAMC,IAAYC;AAAA,IAChB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,MACxBC,EAAcC,GAAM;AAAA,MAClB,KAAAF;AAAA,MACA,UAAAN;AAAA,MACA,WAAWS,EAAG,UAAUC,EAAYX,CAAQ,CAAC,IAAIK,CAAS;AAAA,MACrD,GAAIH,KAAe,CAAC;AAAA,MAAI,GAAGI;AAAA,IACjC,CAAA;AAAA,EACL;AAEU,SAAAH,EAAA,cAAc,GAAGH,CAAQ,IAE5BG;AACT;"}
+{"version":3,"file":"createCustomLucideIcon-XbD-heqT.mjs","sources":["../src/components/Icon/customIcons/createCustomLucideIcon.ts"],"sourcesContent":["import { cn, toKebabCase } from '@/lib/utils'\nimport { Icon, IconNode, LucideProps } from 'lucide-react'\nimport { createElement, forwardRef } from 'react'\n\nconst createCustomLucideIcon = (\n  iconName: string,\n  iconNode: IconNode,\n  lucideProps?: Partial<LucideProps>\n) => {\n  const Component = forwardRef<SVGSVGElement, LucideProps>(\n    ({ className, ...props }, ref) =>\n      createElement(Icon, {\n        ref,\n        iconNode,\n        className: cn(`lucide-${toKebabCase(iconName)}`, className),\n        ...{ ...(lucideProps ?? {}), ...props },\n      })\n  )\n\n  Component.displayName = `${iconName}`\n\n  return Component\n}\n\nexport default createCustomLucideIcon\n"],"names":["createCustomLucideIcon","iconName","iconNode","lucideProps","Component","forwardRef","className","props","ref","createElement","Icon","cn","toKebabCase"],"mappings":";;;AAIA,MAAMA,IAAyB,CAC7BC,GACAC,GACAC,MACG;AACH,QAAMC,IAAYC;AAAA,IAChB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAS,GAAAC,MACxBC,EAAcC,GAAM;AAAA,MAClB,KAAAF;AAAA,MACA,UAAAN;AAAA,MACA,WAAWS,EAAG,UAAUC,EAAYX,CAAQ,CAAC,IAAIK,CAAS;AAAA,MACrD,GAAIH,KAAe,CAAC;AAAA,MAAI,GAAGI;AAAA,IACjC,CAAA;AAAA,EACL;AAEU,SAAAH,EAAA,cAAc,GAAGH,CAAQ,IAE5BG;AACT;"}

package/dist/{gems-glbrElVy.mjs → gems-TBSqj4DF.mjs}

@@ -1,4 +1,4 @@
-import { c as L } from "./createCustomLucideIcon-DSxx0O3v.mjs";
+import { c as L } from "./createCustomLucideIcon-XbD-heqT.mjs";
 const o = [
   [
     "path",
@@ -21,4 +21,4 @@ const o = [
 export {
   e as default
 };
-//# sourceMappingURL=gems-glbrElVy.mjs.map
+//# sourceMappingURL=gems-TBSqj4DF.mjs.map

package/dist/{gems-glbrElVy.mjs.map → gems-TBSqj4DF.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"gems-glbrElVy.mjs","sources":["../src/components/Icon/customIcons/gems.ts"],"sourcesContent":["import { IconNode } from 'lucide-react'\nimport createCustomLucideIcon from './createCustomLucideIcon'\n\nconst iconNode: IconNode = [\n  [\n    'path',\n    {\n      d: 'M156.139 157.469L196.307 117.301L168.177 89.1397V89.0126H88.2885L88.4113 89.2582L88.2885 89.1354L60.6496 117.296L128.5 184.929',\n      key: 'path-1',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M128.5 14L29 71.0835V185.25L128.5 242.333L228 185.25V71.0829L128.5 14ZM208.96 174.341L128.5 220.767L48.0401 174.34V81.7386L128.5 35.3114L208.96 81.3762',\n      key: 'path-2',\n    },\n  ],\n]\n\nconst icon = createCustomLucideIcon('gems', iconNode, {\n  viewBox: '0 0 256 256',\n  fill: 'currentColor',\n})\n\nexport { icon as default }\n"],"names":["iconNode","icon","createCustomLucideIcon"],"mappings":";AAGA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GAEMC,IAAOC,EAAuB,QAAQF,GAAU;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AACR,CAAC;"}
+{"version":3,"file":"gems-TBSqj4DF.mjs","sources":["../src/components/Icon/customIcons/gems.ts"],"sourcesContent":["import { IconNode } from 'lucide-react'\nimport createCustomLucideIcon from './createCustomLucideIcon'\n\nconst iconNode: IconNode = [\n  [\n    'path',\n    {\n      d: 'M156.139 157.469L196.307 117.301L168.177 89.1397V89.0126H88.2885L88.4113 89.2582L88.2885 89.1354L60.6496 117.296L128.5 184.929',\n      key: 'path-1',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M128.5 14L29 71.0835V185.25L128.5 242.333L228 185.25V71.0829L128.5 14ZM208.96 174.341L128.5 220.767L48.0401 174.34V81.7386L128.5 35.3114L208.96 81.3762',\n      key: 'path-2',\n    },\n  ],\n]\n\nconst icon = createCustomLucideIcon('gems', iconNode, {\n  viewBox: '0 0 256 256',\n  fill: 'currentColor',\n})\n\nexport { icon as default }\n"],"names":["iconNode","icon","createCustomLucideIcon"],"mappings":";AAGA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GAEMC,IAAOC,EAAuB,QAAQF,GAAU;AAAA,EACpD,SAAS;AAAA,EACT,MAAM;AACR,CAAC;"}

package/dist/{go-BthFBciR.mjs → go--uba-LB-.mjs}

@@ -1,4 +1,4 @@
-import { c } from "./createCustomLucideIcon-DSxx0O3v.mjs";
+import { c } from "./createCustomLucideIcon-XbD-heqT.mjs";
 const o = [
   [
     "path",
@@ -21,4 +21,4 @@ const o = [
 export {
   e as default
 };
-//# sourceMappingURL=go-BthFBciR.mjs.map
+//# sourceMappingURL=go--uba-LB-.mjs.map

package/dist/{go-BthFBciR.mjs.map → go--uba-LB-.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"go-BthFBciR.mjs","sources":["../src/components/Icon/customIcons/go.ts"],"sourcesContent":["import { IconNode } from 'lucide-react'\nimport createCustomLucideIcon from './createCustomLucideIcon'\n\nconst iconNode: IconNode = [\n  [\n    'path',\n    {\n      d: 'M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zM2.004 60.404c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zM79.58 53.738c-3.819.97-6.425 1.697-10.182 2.666-.91.243-.97.303-1.758-.606-.909-1.03-1.576-1.697-2.848-2.303-3.819-1.878-7.516-1.333-10.97.91-4.121 2.666-6.242 6.605-6.182 11.514.06 4.849 3.394 8.849 8.182 9.516 4.121.545 7.576-.91 10.303-4 .545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818.788-1.879 2.242-5.03 3.09-6.606.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91-.667 4.363-2.303 8.363-4.97 11.878-4.364 5.758-10.06 9.333-17.273 10.303-5.939.788-11.454-.364-16.302-4-4.485-3.394-7.03-7.879-7.697-13.454-.788-6.606 1.151-12.546 5.151-17.758 4.303-5.636 10-9.212 16.97-10.485 5.697-1.03 11.151-.363 16.06 2.97 3.212 2.121 5.515 5.03 7.03 8.545.364.546.122.849-.606 1.03z',\n      key: 'path-1',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334-3.576-3.09-5.818-7.03-6.545-11.697-1.091-6.848.787-12.909 4.909-18.302 4.424-5.819 9.757-8.849 16.97-10.122 6.181-1.09 12-.484 17.272 3.091 4.788 3.273 7.757 7.697 8.545 13.515 1.03 8.182-1.333 14.849-6.97 20.546-4 4.06-8.909 6.606-14.545 7.757-1.636.303-3.273.364-4.848.546zm14.424-24.485c-.06-.788-.06-1.394-.182-2-1.09-6-6.606-9.394-12.363-8.06-5.637 1.272-9.273 4.848-10.606 10.545-1.091 4.727 1.212 9.515 5.575 11.454 3.334 1.455 6.667 1.273 9.879-.363 4.788-2.485 7.394-6.364 7.697-11.576z',\n      key: 'path-2',\n    },\n  ],\n]\n\nconst icon = createCustomLucideIcon('go', iconNode, {\n  viewBox: '0 0 128 128',\n  fill: 'currentColor',\n})\n\nexport { icon as default }\n"],"names":["iconNode","icon","createCustomLucideIcon"],"mappings":";AAGA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GAEMC,IAAOC,EAAuB,MAAMF,GAAU;AAAA,EAClD,SAAS;AAAA,EACT,MAAM;AACR,CAAC;"}
+{"version":3,"file":"go--uba-LB-.mjs","sources":["../src/components/Icon/customIcons/go.ts"],"sourcesContent":["import { IconNode } from 'lucide-react'\nimport createCustomLucideIcon from './createCustomLucideIcon'\n\nconst iconNode: IconNode = [\n  [\n    'path',\n    {\n      d: 'M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zM2.004 60.404c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zM79.58 53.738c-3.819.97-6.425 1.697-10.182 2.666-.91.243-.97.303-1.758-.606-.909-1.03-1.576-1.697-2.848-2.303-3.819-1.878-7.516-1.333-10.97.91-4.121 2.666-6.242 6.605-6.182 11.514.06 4.849 3.394 8.849 8.182 9.516 4.121.545 7.576-.91 10.303-4 .545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818.788-1.879 2.242-5.03 3.09-6.606.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91-.667 4.363-2.303 8.363-4.97 11.878-4.364 5.758-10.06 9.333-17.273 10.303-5.939.788-11.454-.364-16.302-4-4.485-3.394-7.03-7.879-7.697-13.454-.788-6.606 1.151-12.546 5.151-17.758 4.303-5.636 10-9.212 16.97-10.485 5.697-1.03 11.151-.363 16.06 2.97 3.212 2.121 5.515 5.03 7.03 8.545.364.546.122.849-.606 1.03z',\n      key: 'path-1',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334-3.576-3.09-5.818-7.03-6.545-11.697-1.091-6.848.787-12.909 4.909-18.302 4.424-5.819 9.757-8.849 16.97-10.122 6.181-1.09 12-.484 17.272 3.091 4.788 3.273 7.757 7.697 8.545 13.515 1.03 8.182-1.333 14.849-6.97 20.546-4 4.06-8.909 6.606-14.545 7.757-1.636.303-3.273.364-4.848.546zm14.424-24.485c-.06-.788-.06-1.394-.182-2-1.09-6-6.606-9.394-12.363-8.06-5.637 1.272-9.273 4.848-10.606 10.545-1.091 4.727 1.212 9.515 5.575 11.454 3.334 1.455 6.667 1.273 9.879-.363 4.788-2.485 7.394-6.364 7.697-11.576z',\n      key: 'path-2',\n    },\n  ],\n]\n\nconst icon = createCustomLucideIcon('go', iconNode, {\n  viewBox: '0 0 128 128',\n  fill: 'currentColor',\n})\n\nexport { icon as default }\n"],"names":["iconNode","icon","createCustomLucideIcon"],"mappings":";AAGA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EAET;AAAA,EACA;AAAA,IACE;AAAA,IACA;AAAA,MACE,GAAG;AAAA,MACH,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GAEMC,IAAOC,EAAuB,MAAMF,GAAU;AAAA,EAClD,SAAS;AAAA,EACT,MAAM;AACR,CAAC;"}