@solo-io-public/ui-components 0.0.0

package/dist/components/Button/Button.style.d.ts

@@ -0,0 +1,48 @@
+import { ElementOf } from '../../_internal/utils';
+import { buttonVariants } from './Button';
+export declare const StyledButton: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    stylingOverrides?: import('@emotion/utils').SerializedStyles;
+} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    variant?: ElementOf<(typeof buttonVariants)["variants"]>;
+    color?: ElementOf<(typeof buttonVariants)["colors"]>;
+    size?: ElementOf<(typeof buttonVariants)["sizes"]>;
+    disabled?: boolean;
+    isSquareIconButton?: boolean;
+    isCircleIconButton?: boolean;
+    minWidth?: import('react').CSSProperties["minWidth"];
+    leftIcon?: import('react').ReactNode;
+    rightIcon?: import('react').ReactNode;
+    uiTestId?: string;
+    styleOverrides?: import('@emotion/utils').SerializedStyles;
+} & {
+    children?: import('react').ReactNode | undefined;
+}, {}, {}>;
+export declare namespace SoloButtonStyles {
+    const StyledButton: import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme;
+        as?: React.ElementType;
+    } & {
+        stylingOverrides?: import("@emotion/utils").SerializedStyles;
+    } & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        theme?: import("@emotion/react").Theme;
+    } & {
+        variant?: ElementOf<(typeof buttonVariants)["variants"]>;
+        color?: ElementOf<(typeof buttonVariants)["colors"]>;
+        size?: ElementOf<(typeof buttonVariants)["sizes"]>;
+        disabled?: boolean;
+        isSquareIconButton?: boolean;
+        isCircleIconButton?: boolean;
+        minWidth?: import("react").CSSProperties["minWidth"];
+        leftIcon?: import("react").ReactNode;
+        rightIcon?: import("react").ReactNode;
+        uiTestId?: string;
+        styleOverrides?: import("@emotion/utils").SerializedStyles;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    }, {}, {}>;
+}

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

@@ -0,0 +1 @@
+export { Button, IconButton, buttonSvg, buttonVariants, type ButtonProps, type ButtonPropsBase, type IconButtonProps } from './Button';

package/dist/components/CloseButton/CloseButton.d.ts

@@ -0,0 +1,14 @@
+import { SerializedStyles } from '@emotion/react';
+import { ButtonHTMLAttributes } from 'react';
+export interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** X icon size in px. */
+    size?: number;
+    /** Emotion styles appended to the button. */
+    styleOverrides?: SerializedStyles;
+}
+/**
+ * A minimal "×" icon button (Lucide `X`). Inherits its color from context
+ * (override via `style`/`styleOverrides`); hover/active washes derive from that
+ * color, so it sits cleanly on any surface — alerts, drawers, modals, etc.
+ */
+export declare function CloseButton({ size, styleOverrides, type, 'aria-label': ariaLabel, ...props }: CloseButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { CloseButton, type CloseButtonProps } from './CloseButton';

package/dist/components/Layout/FlexLayout.d.ts

@@ -0,0 +1,83 @@
+import { CSSProperties } from 'react';
+import { SpacerProps } from './Spacer';
+export type FlexLayoutProps = SpacerProps & {
+    horizontal?: boolean;
+    vertical?: boolean;
+    gap?: CSSProperties['gap'] | number;
+    display?: CSSProperties['display'];
+    flexWrap?: CSSProperties['flexWrap'];
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    alignContent?: CSSProperties['alignContent'];
+    flexDirection?: CSSProperties['flexDirection'];
+    overflow?: CSSProperties['overflow'];
+    column?: boolean;
+    row?: boolean;
+    nowrap?: boolean;
+    expandChildren?: boolean;
+};
+/**
+ * Quick horizontal, vertical, or centered (horizontal & vertical) flex layout.
+ * A numeric `gap` is treated as a 0.25em scale step (e.g. `gap={3}` → `0.75em`).
+ */
+export declare const FlexLayout: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    mx?: string;
+    my?: string;
+    mr?: string;
+    ml?: string;
+    mt?: string;
+    mb?: string;
+    margin?: string;
+    px?: string;
+    py?: string;
+    pr?: string;
+    pl?: string;
+    pt?: string;
+    pb?: string;
+    padding?: string;
+    display?: CSSProperties["display"];
+    position?: CSSProperties["position"];
+    minHeight?: string | number;
+    minWidth?: CSSProperties["minWidth"];
+    height?: string | number;
+    width?: string | number;
+    maxHeight?: CSSProperties["maxHeight"];
+    maxWidth?: CSSProperties["maxWidth"];
+    flexGrow?: CSSProperties["flexGrow"];
+    flexBasis?: CSSProperties["flexBasis"];
+    flexShrink?: CSSProperties["flexShrink"];
+    overflowY?: CSSProperties["overflowY"];
+    overflowX?: CSSProperties["overflowX"];
+    textOverflow?: CSSProperties["textOverflow"];
+    overflow?: CSSProperties["overflow"];
+    zIndex?: CSSProperties["zIndex"];
+    stylingOverrides?: import('@emotion/utils').SerializedStyles;
+    fadeIn?: boolean;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    horizontal?: boolean;
+    vertical?: boolean;
+    gap?: CSSProperties["gap"] | number;
+    display?: CSSProperties["display"];
+    flexWrap?: CSSProperties["flexWrap"];
+    justifyContent?: CSSProperties["justifyContent"];
+    alignItems?: CSSProperties["alignItems"];
+    alignContent?: CSSProperties["alignContent"];
+    flexDirection?: CSSProperties["flexDirection"];
+    overflow?: CSSProperties["overflow"];
+    column?: boolean;
+    row?: boolean;
+    nowrap?: boolean;
+    expandChildren?: boolean;
+}, {}, {}>;
+/** Adds a `flex-grow: 1` filler into a flex layout. */
+export declare const FlexLayoutSpacer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    flexBasis?: CSSProperties["flexBasis"];
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Layout/Spacer.d.ts

@@ -0,0 +1,80 @@
+import { SerializedStyles } from '@emotion/react';
+import { ComponentProps, CSSProperties } from 'react';
+type SizeType = number | string;
+/**
+ * Margin/padding/sizing primitive. Use a string for exact values
+ * (e.g. `mx='5px'`). Directional props (`mr`, `mb`, …) override the axis
+ * shorthands (`mx`, `my`).
+ */
+export type SpacerProps = {
+    mx?: string;
+    my?: string;
+    mr?: string;
+    ml?: string;
+    mt?: string;
+    mb?: string;
+    margin?: string;
+    px?: string;
+    py?: string;
+    pr?: string;
+    pl?: string;
+    pt?: string;
+    pb?: string;
+    padding?: string;
+    display?: CSSProperties['display'];
+    position?: CSSProperties['position'];
+    minHeight?: SizeType;
+    minWidth?: CSSProperties['minWidth'];
+    height?: SizeType;
+    width?: SizeType;
+    maxHeight?: CSSProperties['maxHeight'];
+    maxWidth?: CSSProperties['maxWidth'];
+    flexGrow?: CSSProperties['flexGrow'];
+    flexBasis?: CSSProperties['flexBasis'];
+    flexShrink?: CSSProperties['flexShrink'];
+    overflowY?: CSSProperties['overflowY'];
+    overflowX?: CSSProperties['overflowX'];
+    textOverflow?: CSSProperties['textOverflow'];
+    overflow?: CSSProperties['overflow'];
+    zIndex?: CSSProperties['zIndex'];
+    stylingOverrides?: SerializedStyles;
+    fadeIn?: boolean;
+} & ComponentProps<'div'>;
+export declare const Spacer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    mx?: string;
+    my?: string;
+    mr?: string;
+    ml?: string;
+    mt?: string;
+    mb?: string;
+    margin?: string;
+    px?: string;
+    py?: string;
+    pr?: string;
+    pl?: string;
+    pt?: string;
+    pb?: string;
+    padding?: string;
+    display?: CSSProperties["display"];
+    position?: CSSProperties["position"];
+    minHeight?: SizeType;
+    minWidth?: CSSProperties["minWidth"];
+    height?: SizeType;
+    width?: SizeType;
+    maxHeight?: CSSProperties["maxHeight"];
+    maxWidth?: CSSProperties["maxWidth"];
+    flexGrow?: CSSProperties["flexGrow"];
+    flexBasis?: CSSProperties["flexBasis"];
+    flexShrink?: CSSProperties["flexShrink"];
+    overflowY?: CSSProperties["overflowY"];
+    overflowX?: CSSProperties["overflowX"];
+    textOverflow?: CSSProperties["textOverflow"];
+    overflow?: CSSProperties["overflow"];
+    zIndex?: CSSProperties["zIndex"];
+    stylingOverrides?: SerializedStyles;
+    fadeIn?: boolean;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Spacer, type SpacerProps } from './Spacer';
+export { FlexLayout, FlexLayoutSpacer, type FlexLayoutProps } from './FlexLayout';

package/dist/components/MonacoEditor/EditorSettingsContext.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface EditorSettings {
+    vimEnabled: boolean;
+    toggleVimMode: () => void;
+    wordWrapEnabled: boolean;
+    toggleWordWrap: () => void;
+}
+/**
+ * Provides per-user editor preferences (vim mode, word wrap), persisted to
+ * `localStorage`. Wrap any tree that renders `<MonacoEditorWithSettings />`.
+ */
+export declare function EditorSettingsProvider({ children }: {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useEditorSettings(): EditorSettings;

package/dist/components/MonacoEditor/MonacoEditorWithSettings.d.ts

@@ -0,0 +1,20 @@
+import { SerializedStyles } from '@emotion/react';
+import { OnMount } from '@monaco-editor/react';
+import type * as monacoEditor from 'monaco-editor';
+export interface MonacoEditorWithSettingsProps {
+    value: string;
+    onChange?: (value: string | undefined) => void;
+    language: string;
+    height?: string;
+    /** Defaults to the active `SoloContextProvider` mode when omitted. */
+    theme?: 'light' | 'dark';
+    options?: monacoEditor.editor.IStandaloneEditorConstructionOptions;
+    onMount?: OnMount;
+    readOnly?: boolean;
+    downloadFileName?: string;
+    onSave?: () => void;
+    onQuit?: () => void;
+    /** Emotion styles appended to the outer container. */
+    styleOverrides?: SerializedStyles;
+}
+export declare function MonacoEditorWithSettings({ value, onChange, language, height, theme, options, onMount, readOnly, downloadFileName, onSave, onQuit, styleOverrides, }: MonacoEditorWithSettingsProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { MonacoEditorWithSettings, type MonacoEditorWithSettingsProps } from './MonacoEditorWithSettings';
+export { EditorSettingsProvider, useEditorSettings, type EditorSettings } from './EditorSettingsContext';

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,71 @@
+import { CSSProperties } from 'react';
+import { SpacerProps } from '../Layout/Spacer';
+/**
+ * Typography primitive built on `Spacer` (so margin/padding/sizing props work
+ * too). Defaults to the theme's `--color-text-primary`, so text color follows
+ * the active light/dark mode unless `color` is set explicitly.
+ */
+export type TextProps = SpacerProps & {
+    size?: CSSProperties['fontSize'];
+    weight?: CSSProperties['fontWeight'];
+    lineHeight?: CSSProperties['lineHeight'];
+    color?: CSSProperties['color'];
+    textAlign?: CSSProperties['textAlign'];
+    whiteSpace?: CSSProperties['whiteSpace'];
+    truncate?: boolean;
+    wordBreak?: CSSProperties['wordBreak'];
+    textTransform?: CSSProperties['textTransform'];
+    fontStyle?: CSSProperties['fontStyle'];
+    inline?: boolean;
+};
+export declare const Text: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    mx?: string;
+    my?: string;
+    mr?: string;
+    ml?: string;
+    mt?: string;
+    mb?: string;
+    margin?: string;
+    px?: string;
+    py?: string;
+    pr?: string;
+    pl?: string;
+    pt?: string;
+    pb?: string;
+    padding?: string;
+    display?: CSSProperties["display"];
+    position?: CSSProperties["position"];
+    minHeight?: string | number;
+    minWidth?: CSSProperties["minWidth"];
+    height?: string | number;
+    width?: string | number;
+    maxHeight?: CSSProperties["maxHeight"];
+    maxWidth?: CSSProperties["maxWidth"];
+    flexGrow?: CSSProperties["flexGrow"];
+    flexBasis?: CSSProperties["flexBasis"];
+    flexShrink?: CSSProperties["flexShrink"];
+    overflowY?: CSSProperties["overflowY"];
+    overflowX?: CSSProperties["overflowX"];
+    textOverflow?: CSSProperties["textOverflow"];
+    overflow?: CSSProperties["overflow"];
+    zIndex?: CSSProperties["zIndex"];
+    stylingOverrides?: import('@emotion/utils').SerializedStyles;
+    fadeIn?: boolean;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+} & {
+    size?: CSSProperties["fontSize"];
+    weight?: CSSProperties["fontWeight"];
+    lineHeight?: CSSProperties["lineHeight"];
+    color?: CSSProperties["color"];
+    textAlign?: CSSProperties["textAlign"];
+    whiteSpace?: CSSProperties["whiteSpace"];
+    truncate?: boolean;
+    wordBreak?: CSSProperties["wordBreak"];
+    textTransform?: CSSProperties["textTransform"];
+    fontStyle?: CSSProperties["fontStyle"];
+    inline?: boolean;
+}, {}, {}>;

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

@@ -0,0 +1 @@
+export { Text, type TextProps } from './Text';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './components/Alert';
+export * from './components/Button';
+export * from './components/CloseButton';
+export * from './components/Layout';
+export * from './components/MonacoEditor';
+export * from './components/Text';
+export * from './providers';

package/dist/providers/SoloContextProvider.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { ToasterProps } from 'react-hot-toast';
+import { SoloMode } from './SoloModeContext';
+/** Theme tokens the library — and the Monaco editor chrome — read from. */
+export interface SoloTheme {
+    mode: SoloMode;
+    fontFamily: string;
+    colors: {
+        background: string;
+        bgElevated: string;
+        bgHover: string;
+        /** Pressed/active surface — a clearly distinct step from `bgHover`. */
+        bgActive: string;
+        borderBase: string;
+        primary: string;
+        textPrimary: string;
+        textSecondary: string;
+    };
+}
+/** Default Solo theme (dark). */
+export declare const defaultSoloTheme: SoloTheme;
+/** Theme overrides — non-recursive (one level of `colors`) to keep types cheap. */
+export interface SoloThemeOverride {
+    fontFamily?: string;
+    colors?: Partial<SoloTheme['colors']>;
+}
+/** Toggle which providers `SoloContextProvider` sets up. Each defaults to `true`. */
+export interface SoloFeatures {
+    /** emotion `ThemeProvider`, the `--color-*` CSS variables, and the web fonts. */
+    theme?: boolean;
+    /** react-hot-toast `<Toaster />`. */
+    toaster?: boolean;
+}
+/** Fully typed customization for the enabled features. */
+export interface SoloConfig {
+    /** Theme overrides, merged over the mode palette and any outer `ThemeProvider`. */
+    theme?: SoloThemeOverride;
+    /** Props for the bundled react-hot-toast `<Toaster />`. */
+    toaster?: ToasterProps;
+}
+export interface SoloContextProviderProps {
+    children: ReactNode;
+    /** Light or dark color mode. Drives the palette and the editor's default theme. Defaults to `'dark'`. */
+    mode?: SoloMode;
+    /** Toggle which providers are set up. Each feature defaults to on. */
+    features?: SoloFeatures;
+    /** Fully typed customization for the enabled features. */
+    config?: SoloConfig;
+}
+/**
+ * Single top-level provider for apps consuming this library. Composes the
+ * color mode + emotion theme (web fonts + the `--color-*` CSS variables the
+ * editor chrome reads), editor settings, and a react-hot-toast `<Toaster />` —
+ * so the library's components work as drop-ins.
+ *
+ * Opinionated by default (closed to modification), open to extension: pick
+ * `mode`, toggle pieces with `features`, and customize them with `config`.
+ *
+ * The body reads top-down as the provider tree it renders:
+ * mode → theme → editor settings → toaster → your app.
+ */
+export declare function SoloContextProvider({ children, mode, features, config }: SoloContextProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/providers/SoloModeContext.d.ts

@@ -0,0 +1,5 @@
+export type SoloMode = 'light' | 'dark';
+/** Provides the active light/dark mode to descendants (e.g. the editor). */
+export declare const SoloModeProvider: import('react').Provider<SoloMode>;
+/** Read the active Solo color mode. Defaults to `'dark'` outside a provider. */
+export declare function useSoloMode(): SoloMode;

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { SoloContextProvider, defaultSoloTheme, type SoloContextProviderProps, type SoloConfig, type SoloFeatures, type SoloTheme, type SoloThemeOverride } from './SoloContextProvider';
+export { useSoloMode, type SoloMode } from './SoloModeContext';