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

package/src/utilities.css

@@ -312,7 +312,7 @@
 }
 
 @utility text-muted {
-  color: var(--text-muted)!important;
+  color: var(--text-muted) !important;
 }
 
 @utility text-placeholder {
@@ -362,7 +362,6 @@
   color: var(--text-muted-inverse);
 }
 
-
 /* Link colors */
 @utility text-link-primary {
   color: var(--text-link-primary);
@@ -412,11 +411,207 @@
   color: var(--text-link-warning);
 }
 
+/* Button Text Colors */
+@utility text-btn-brand {
+  color: var(--color-neutral-900);
+
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-brand-hover {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-brand-active {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-brand-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-primary {
+  color: var(--color-neutral-100);
+
+  @variant dark {
+    color: var(--color-neutral-900);
+  }
+}
+
+@utility text-btn-primary-hover {
+  color: var(--color-base-white);
+
+  @variant dark {
+    color: var(--color-base-black);
+  }
+}
+
+@utility text-btn-primary-active {
+  color: var(--color-base-white);
+
+  @variant dark {
+    color: var(--color-base-black);
+  }
+}
+
+@utility text-btn-primary-disabled {
+  color: var(--color-neutral-100);
+  opacity: 0.4;
+
+  @variant dark {
+    color: var(--color-neutral-900);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-secondary {
+  color: var(--color-neutral-900);
+
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-secondary-hover {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-secondary-active {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-secondary-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-tertiary {
+  color: var(--color-neutral-900);
+
+  @variant dark {
+    color: var(--color-neutral-100);
+  }
+}
+
+@utility text-btn-tertiary-hover {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-tertiary-active {
+  color: var(--color-base-black);
+
+  @variant dark {
+    color: var(--color-base-white);
+  }
+}
+
+@utility text-btn-tertiary-disabled {
+  color: var(--color-neutral-900);
+  opacity: 0.4;
+
+  @variant dark {
+    color: var(--color-neutral-100);
+    opacity: 0.4;
+  }
+}
+
+@utility text-btn-destructive-primary {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-hover {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-active {
+  color: var(--color-base-white);
+}
+
+@utility text-btn-destructive-primary-disabled {
+  color: var(--color-base-white);
+  opacity: 0.4;
+}
+
+@utility text-btn-destructive-secondary {
+  color: var(--color-feedback-red-600);
+
+  @variant dark {
+    color: var(--color-feedback-red-400);
+  }
+}
+
+@utility text-btn-destructive-secondary-hover {
+  color: var(--color-feedback-red-700);
+
+  @variant dark {
+    color: var(--color-feedback-red-500);
+  }
+}
+
+@utility text-btn-destructive-secondary-active {
+  color: var(--color-feedback-red-800);
+
+  @variant dark {
+    color: var(--color-feedback-red-600);
+  }
+}
+
+@utility text-btn-destructive-secondary-disabled {
+  color: var(--color-feedback-red-600);
+  opacity: 0.4;
+
+  @variant dark {
+    color: var(--color-feedback-red-400);
+    opacity: 0.4;
+  }
+}
 
 @utility bg-gradient-primary {
   background: var(--gradient-brand-primary);
 }
 
+/* TODO: check with others on the naming convention for brand gradient utilities */
+@utility bg-gradient-green {
+  background: var(--gradient-brand-green);
+}
+
+@utility bg-gradient-red {
+  background: var(--gradient-brand-red);
+}
+
 @utility border-gradient-primary {
   border-image: var(--gradient-brand-primary) 1;
 }
@@ -431,6 +626,10 @@
 
 @utility bg-surface-secondary {
   background-color: var(--color-neutral-100);
+
+  @variant dark {
+    background-color: var(--color-neutral-900);
+  }
 }
 
 @utility bg-warning {
@@ -447,7 +646,6 @@
   border-style: solid;
 }
 
-
 /* Link underline utilities */
 @utility underline-link-primary {
   color: var(--underline-link-primary);
@@ -827,6 +1025,152 @@
 /* ============================================
 * BACKGROUNDS
 * ============================================ */
+
+/* Button Background utilities
+ * Figma: Surface/Button/{Variant}/bg-{state} → Code: bg-btn-{variant}-{state}
+ * Follows Tailwind conventions: bg-*, rest state has no suffix */
+@utility bg-btn-brand {
+  background-color: var(--color-base-white);
+
+  @variant dark {
+    background-color: var(--color-base-black);
+  }
+}
+
+@utility bg-btn-brand-hover {
+  background-color: var(--color-neutral-100);
+
+  @variant dark {
+    background-color: var(--color-neutral-900);
+  }
+}
+
+@utility bg-btn-brand-active {
+  background-color: var(--color-neutral-200);
+
+  @variant dark {
+    background-color: var(--color-neutral-800);
+  }
+}
+
+@utility bg-btn-brand-disabled {
+  background-color: var(--color-base-white);
+  opacity: 1 !important;
+  color: var(--text-muted) !important;
+
+  &:before {
+    opacity: 0.4;
+  }
+
+
+  @variant dark {
+    background-color: var(--color-base-black);
+  }
+}
+
+@utility bg-btn-primary {
+  background-color: var(--color-neutral-800);
+
+  @variant dark {
+    background-color: var(--color-neutral-200);
+  }
+}
+
+@utility bg-btn-primary-hover {
+  background-color: var(--color-neutral-900);
+
+  @variant dark {
+    background-color: var(--color-neutral-100);
+  }
+}
+
+@utility bg-btn-primary-active {
+  background-color: var(--color-base-black);
+
+  @variant dark {
+    background-color: var(--color-base-white);
+  }
+}
+
+@utility bg-btn-primary-disabled {
+  background-color: var(--color-neutral-800);
+  opacity: 0.4;
+
+  @variant dark {
+    background-color: var(--color-neutral-200);
+    opacity: 0.4;
+  }
+}
+
+@utility bg-btn-secondary {
+  background-color: var(--color-neutral-200);
+
+  @variant dark {
+    background-color: var(--color-neutral-800);
+  }
+}
+
+@utility bg-btn-secondary-hover {
+  background-color: var(--color-neutral-300);
+
+  @variant dark {
+    background-color: var(--color-neutral-700);
+  }
+}
+
+@utility bg-btn-secondary-active {
+  background-color: var(--color-neutral-400);
+
+  @variant dark {
+    background-color: var(--color-neutral-600);
+  }
+}
+
+@utility bg-btn-secondary-disabled {
+  background-color: var(--color-neutral-200);
+  opacity: 0.4;
+
+  @variant dark {
+    background-color: var(--color-neutral-800);
+    opacity: 0.4;
+  }
+}
+
+@utility bg-btn-destructive {
+  background-color: var(--color-feedback-red-600);
+
+  @variant dark {
+    background-color: var(--color-feedback-red-400);
+  }
+}
+
+@utility bg-btn-destructive-hover {
+  background-color: var(--color-feedback-red-700);
+
+  @variant dark {
+    background-color: var(--color-feedback-red-500);
+  }
+}
+
+@utility bg-btn-destructive-active {
+  background-color: var(--color-feedback-red-800);
+
+  @variant dark {
+    background-color: var(--color-feedback-red-600);
+  }
+}
+
+@utility bg-btn-destructive-disabled {
+  background-color: var(--color-feedback-red-600);
+  opacity: 0.4;
+
+  @variant dark {
+    background-color: var(--color-feedback-red-400);
+    opacity: 0.4;
+  }
+}
+
+/* Surface Background utilities */
 @utility bg-surface-primary-default {
   background-color: var(--bg-surface-primary-default);
 }
@@ -966,7 +1310,6 @@
   background-color: var(--bg-warning-softest);
 }
 
-
 @layer utilities {
   .devicon-devicon-plain {
     max-width: 2em;
@@ -1110,5 +1453,3 @@
   --ease-out-expo: var(--ease-out-expo);
   --ease-out-circ: var(--ease-out-circ);
 }
-
-

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.riv' {
+  const value: string
+  export default value
+}

package/types/utilities.d.ts

@@ -1,6 +1,6 @@
 /**
  * Auto-generated TypeScript definitions for Moonshine utilities
- * Generated on: 2025-08-01T15:25:06.400Z
+ * Generated on: 2025-10-31T13:56:37.127Z
  *
  * DO NOT EDIT THIS FILE DIRECTLY
  * Run 'pnpm generate:docs' to update
@@ -68,7 +68,33 @@ export type MoonshineUtilities =
   | 'text-link-success'
   | 'text-default-warning'
   | 'text-link-warning'
+  | 'text-btn-brand'
+  | 'text-btn-brand-hover'
+  | 'text-btn-brand-active'
+  | 'text-btn-brand-disabled'
+  | 'text-btn-primary'
+  | 'text-btn-primary-hover'
+  | 'text-btn-primary-active'
+  | 'text-btn-primary-disabled'
+  | 'text-btn-secondary'
+  | 'text-btn-secondary-hover'
+  | 'text-btn-secondary-active'
+  | 'text-btn-secondary-disabled'
+  | 'text-btn-tertiary'
+  | 'text-btn-tertiary-hover'
+  | 'text-btn-tertiary-active'
+  | 'text-btn-tertiary-disabled'
+  | 'text-btn-destructive-primary'
+  | 'text-btn-destructive-primary-hover'
+  | 'text-btn-destructive-primary-active'
+  | 'text-btn-destructive-primary-disabled'
+  | 'text-btn-destructive-secondary'
+  | 'text-btn-destructive-secondary-hover'
+  | 'text-btn-destructive-secondary-active'
+  | 'text-btn-destructive-secondary-disabled'
   | 'bg-gradient-primary'
+  | 'bg-gradient-green'
+  | 'bg-gradient-red'
   | 'border-gradient-primary'
   | 'bg-surface-primary'
   | 'bg-surface-secondary'
@@ -158,6 +184,22 @@ export type MoonshineUtilities =
   | 'stroke-warning-highlight'
   | 'stroke-warning-default'
   | 'stroke-warning-muted'
+  | 'bg-btn-brand'
+  | 'bg-btn-brand-hover'
+  | 'bg-btn-brand-active'
+  | 'bg-btn-brand-disabled'
+  | 'bg-btn-primary'
+  | 'bg-btn-primary-hover'
+  | 'bg-btn-primary-active'
+  | 'bg-btn-primary-disabled'
+  | 'bg-btn-secondary'
+  | 'bg-btn-secondary-hover'
+  | 'bg-btn-secondary-active'
+  | 'bg-btn-secondary-disabled'
+  | 'bg-btn-destructive'
+  | 'bg-btn-destructive-hover'
+  | 'bg-btn-destructive-active'
+  | 'bg-btn-destructive-disabled'
   | 'bg-surface-primary-default'
   | 'bg-surface-primary-inverse'
   | 'bg-surface-secondary-default'

package/dist/components/AIChat/AIChatContainer.d.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from 'react';
-import { AIChatMessageComponents } from './AIChatMessage';
-import { AIChatMessageComposerComponents } from './AIChatMessageComposer';
-import { AIChatContextValue, ToolCallApprovalProps } from './types';
-export interface ModelSelectorConfig {
-    model: string;
-    onModelChange: (v: string) => void;
-    availableModels: {
-        label: string;
-        value: string;
-    }[];
-}
-export interface AIChatContainerProps extends Omit<AIChatContextValue, 'model' | 'onModelChange' | 'availableModels' | 'toolCallApproval'> {
-    modelSelector?: ModelSelectorConfig;
-    className?: string;
-    components?: Partial<AIChatComponents>;
-    toolCallApproval?: ToolCallApprovalProps;
-    children?: ReactNode;
-}
-interface AIChatComponents {
-    composer: Partial<AIChatMessageComposerComponents>;
-    message: Partial<AIChatMessageComponents>;
-}
-export declare function AIChatContainer({ messages, isLoading, onSendMessage, modelSelector, className, components, toolCallApproval, children, }: AIChatContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AIChat/AIChatMessage.d.ts

@@ -1,19 +0,0 @@
-import { BaseComponents, FcOrClassName } from './componentsTypes';
-import { AIChatMessageToolPartComponents } from './parts/AIChatMessageToolPart';
-import { ChatMessage } from './types';
-export interface AIChatMessageProps {
-    message: ChatMessage;
-    className?: string;
-    components?: Partial<AIChatMessageComponents>;
-}
-interface AvatarComponents extends BaseComponents {
-    user: FcOrClassName<unknown>;
-    assistant: FcOrClassName<unknown>;
-    system: FcOrClassName<unknown>;
-}
-export interface AIChatMessageComponents {
-    toolCall: Partial<AIChatMessageToolPartComponents>;
-    avatar: Partial<AvatarComponents>;
-}
-export declare function AIChatMessage({ message, className, components, }: AIChatMessageProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AIChat/AIChatMessageComposer.d.ts

@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import { FcOrClassName } from './componentsTypes';
-export interface AIChatMessageComposerProps {
-    className?: string;
-    components?: Partial<AIChatMessageComposerComponents>;
-}
-export type AIChatMessageComposerComponents = {
-    submitButton: FcOrClassName<{
-        disabled?: boolean;
-        type: 'submit';
-    }>;
-    modelSelector: FcOrClassName<{
-        model: string;
-        onModelChange: (model: string) => void;
-        availableModels: {
-            label: string;
-            value: string;
-        }[];
-    }>;
-    additionalActions: ReactNode;
-};
-export declare function AIChatMessageComposer({ className, components, }: AIChatMessageComposerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/AIChatMessageList.d.ts

@@ -1,6 +0,0 @@
-import { AIChatMessageComponents } from './AIChatMessage';
-export interface AIChatMessageListProps {
-    components?: Partial<AIChatMessageComponents>;
-    className?: string;
-}
-export declare function AIChatMessageList({ components, className, }: AIChatMessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/AIChatModelSelector.d.ts

@@ -1,14 +0,0 @@
-interface ModelSelectorConfig {
-    model: string;
-    onModelChange: (v: string) => void;
-    availableModels: {
-        label: string;
-        value: string;
-    }[];
-}
-interface AIChatModelSelectorProps {
-    modelSelector?: ModelSelectorConfig;
-    className?: string;
-}
-export declare function AIChatModelSelector({ modelSelector, className, }: AIChatModelSelectorProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/components/AIChat/componentsTypes.d.ts

@@ -1,11 +0,0 @@
-import { FunctionComponent, ReactNode } from 'react';
-type ClassName = string;
-export type FcOrClassName<P> = FunctionComponent<P> | ClassName;
-export type BaseComponents = Record<string, FcOrClassName<any> | ReactNode>;
-export type DefaultComponents<T extends BaseComponents> = {
-    [key in keyof T]: T[key] extends FcOrClassName<infer P> ? FunctionComponent<P & {
-        className: string;
-    }> : T[key];
-};
-export declare const renderComponent: <T extends BaseComponents, K extends keyof T>(defaultComponents: DefaultComponents<T>, userComponents: Partial<T> | undefined, key: K, props: T[K] extends FcOrClassName<infer P> ? P : never) => ReactNode;
-export {};

package/dist/components/AIChat/context.d.ts

@@ -1,3 +0,0 @@
-import { AIChatContextValue } from './types';
-export declare const AIChatContext: import('react').Context<AIChatContextValue>;
-export declare const useAIChat: () => AIChatContextValue;

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

@@ -1,12 +0,0 @@
-export * from './AIChatContainer';
-export * from './AIChatMessageList';
-export * from './AIChatMessage';
-export * from './AIChatMessageComposer';
-export * from './parts/AIChatMessageTextPart';
-export * from './parts/AIChatMessageReasoningPart';
-export * from './parts/AIChatMessageToolInvocationPart';
-export * from './parts/AIChatMessageToolResultPart';
-export * from './parts/AIChatMessageFilePart';
-export * from './parts/AIChatMessageSourcePart';
-export * from './types';
-export * from './context';

package/dist/components/AIChat/parts/AIChatMessageFilePart.d.ts

@@ -1,7 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageFilePartProps extends BasePartProps {
-    mimeType: string;
-    data: string;
-    fileName?: string;
-}
-export declare function AIChatMessageFilePart({ mimeType, data, fileName, className, }: AIChatMessageFilePartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/parts/AIChatMessageReasoningPart.d.ts

@@ -1,5 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageReasoningPartProps extends BasePartProps {
-    reasoning: string;
-}
-export declare function AIChatMessageReasoningPart({ reasoning, className, }: AIChatMessageReasoningPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/parts/AIChatMessageSourcePart.d.ts

@@ -1,9 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageSourcePartProps extends BasePartProps {
-    source: {
-        id: string;
-        url: string;
-        title?: string;
-    };
-}
-export declare function AIChatMessageSourcePart({ source, className, }: AIChatMessageSourcePartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/parts/AIChatMessageTextPart.d.ts

@@ -1,5 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageTextPartProps extends BasePartProps {
-    text: string;
-}
-export declare function AIChatMessageTextPart({ text, className, }: AIChatMessageTextPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/parts/AIChatMessageToolInvocationPart.d.ts

@@ -1,6 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageToolInvocationPartProps extends BasePartProps {
-    toolName: string;
-    toolInput?: Record<string, unknown>;
-}
-export declare function AIChatMessageToolInvocationPart({ toolName, toolInput, className, }: AIChatMessageToolInvocationPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AIChat/parts/AIChatMessageToolPart.d.ts

@@ -1,33 +0,0 @@
-import { BaseComponents, FcOrClassName } from '../componentsTypes';
-import { BasePartProps } from '../types';
-type ToolInvocationState = 'partial-call' | 'call' | 'result';
-type ToolInvocationStatus = 'pending' | 'in-progress' | 'success' | 'error';
-interface ToolInvocation {
-    state: ToolInvocationState;
-    toolCallId: string;
-    toolName: string;
-    args: Record<string, unknown>;
-    result?: unknown;
-}
-export interface AIChatMessageToolPartProps extends BasePartProps {
-    toolInvocation: ToolInvocation;
-    components?: Partial<AIChatMessageToolPartComponents>;
-    onAccept?: () => void;
-    onReject?: () => void;
-}
-export interface AIChatMessageToolPartComponents extends BaseComponents {
-    toolName: FcOrClassName<ToolInvocation & {
-        confirmMessage?: string;
-    }>;
-    statusIndicator: FcOrClassName<{
-        status: ToolInvocationStatus;
-    }>;
-    input: FcOrClassName<Omit<ToolInvocation, 'args'> & {
-        args: string;
-    }>;
-    result: FcOrClassName<Omit<ToolInvocation, 'result'> & {
-        result: string;
-    }>;
-}
-export declare function AIChatMessageToolPart({ toolInvocation, className, components, }: AIChatMessageToolPartProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/AIChat/parts/AIChatMessageToolResultPart.d.ts

@@ -1,5 +0,0 @@
-import { BasePartProps } from '../types';
-export interface AIChatMessageToolResultPartProps extends BasePartProps {
-    content: string;
-}
-export declare function AIChatMessageToolResultPart({ content, className, }: AIChatMessageToolResultPartProps): import("react/jsx-runtime").JSX.Element;