@solo-io-public/ui-components 0.0.0

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,168 @@
+import styled from '@emotion/styled';
+import { CircleCheck, Info, OctagonAlert, TriangleAlert, type LucideIcon } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
+import { soloColorTokens, type SoloColorName } from '../../_internal/palette';
+import { dontForwardProps } from '../../_internal/utils';
+import { useSoloMode } from '../../providers/SoloModeContext';
+import { CloseButton } from '../CloseButton';
+import { Text } from '../Text';
+
+// region Styles
+
+const Container = styled('div', dontForwardProps('background', 'frame', 'shadow'))<{
+  background: string;
+  frame: string;
+  shadow: string;
+}>`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 6px;
+  border: 1px solid ${props => props.frame};
+  background: ${props => props.background};
+  box-shadow: ${props => props.shadow};
+`;
+
+const IconSlot = styled('div', dontForwardProps('accent'))<{ accent: string }>`
+  flex-shrink: 0;
+  display: flex;
+  margin-top: 1px;
+  color: ${props => props.accent};
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const Body = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+
+// region Component
+
+export type AlertType = 'info' | 'success' | 'warning' | 'danger';
+
+// `darkAccent` is a neon-bright icon/outline for dark mode. `lightAccent` lets a
+// type swap its muted palette solid for a punchier hue in light mode (e.g. a
+// truer red / yellow); it falls back to the solid when omitted.
+const typeConfig: Record<AlertType, { color: SoloColorName; Icon: LucideIcon; darkAccent: string; lightAccent?: string }> = {
+  // Brand purple, matching the Button's `dark-purple`.
+  info: { color: 'dark-purple', Icon: Info, darkAccent: '#b57bff', lightAccent: '#8134e2' },
+  success: { color: 'success', Icon: CircleCheck, darkAccent: '#2fe07f', lightAccent: '#16a34a' },
+  warning: { color: 'warning', Icon: TriangleAlert, darkAccent: '#ffb238', lightAccent: '#f7c52e' },
+  danger: { color: 'red', Icon: OctagonAlert, darkAccent: '#ff6a6a', lightAccent: '#ef3030' }
+};
+
+export interface AlertProps {
+  type?: AlertType;
+  title?: ReactNode;
+  children?: ReactNode;
+  /** Shows an X button in the upper-right that hides the alert. */
+  isDismissable?: boolean;
+  /** Called when the alert is dismissed (after it hides itself). */
+  onDismiss?: () => void;
+}
+
+/**
+ * Inline alert with a Lucide icon. Dark uses a neon accent — a bright outline +
+ * icon with a glow — over a translucent fill; light uses a soft accent wash on
+ * near-white. Pass `isDismissable` for an X button that closes it.
+ */
+export function Alert({ type = 'info', title, children, isDismissable = false, onDismiss }: AlertProps) {
+  const { color, Icon, darkAccent, lightAccent } = typeConfig[type];
+  const tokens = soloColorTokens[color];
+  const mode = useSoloMode();
+  const [dismissed, setDismissed] = useState(false);
+
+  // Light mode can swap the muted solid for a punchier hue; dark keeps its neon.
+  const lightBase = lightAccent ?? tokens.bg;
+  const accent = mode === 'dark' ? darkAccent : lightBase;
+  // Base color the fill + text tints are composed from.
+  const tintBase = mode === 'dark' ? tokens.bg : lightBase;
+  // Colored icon in light (keeps the hue, grounded for contrast); dark keeps the
+  // neon accent. Warning's bright yellow is deepened more so it stays legible.
+  const iconColor =
+    mode === 'dark'
+      ? accent
+      : type === 'warning'
+        ? `color-mix(in srgb, ${lightBase} 42%, #15151a)`
+        : `color-mix(in srgb, ${lightBase} 60%, #1c1c22)`;
+  // Light uses an accent-on-white border; dark keeps the neon edge. Warning's
+  // pale-yellow border needs full strength to stay visible.
+  const borderColor =
+    mode === 'dark'
+      ? accent
+      : type === 'warning'
+        ? lightBase
+        : `color-mix(in srgb, ${lightBase} 60%, #ffffff)`;
+
+  // Dark: a translucent accent-tinted fill so the page shows through. Light: a
+  // medium accent tint on near-white.
+  const opacity = mode === 'dark' ? 72 : 100;
+  const fillPct = mode === 'dark' ? 28 : 20;
+  const background = `color-mix(in srgb, color-mix(in srgb, ${tintBase} ${fillPct}%, var(--color-bg-elevated, #1e1e22)) ${opacity}%, transparent)`;
+
+  // Dark: a neon glow from the accent plus a small drop shadow. Light: a soft,
+  // slightly accent-tinted card shadow so the alert reads as an elevated surface
+  // instead of a flat tinted rectangle.
+  const shadow =
+    mode === 'dark'
+      ? `0 0 16px color-mix(in srgb, ${accent} 34%, transparent), 0 2px 4px rgba(0, 0, 0, 0.32)`
+      : `0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 5px rgba(16, 24, 40, 0.04)`;
+
+  // Text is tinted with the accent — light on dark, and a soft accent-tinted dark
+  // on light (tinted rather than near-black, to suit the airy wash).
+  const titleColor =
+    mode === 'dark'
+      ? `color-mix(in srgb, ${tintBase} 22%, #ffffff)`
+      : `color-mix(in srgb, ${tintBase} 30%, #17171b)`;
+  const messageColor =
+    mode === 'dark'
+      ? `color-mix(in srgb, ${tintBase} 20%, #c8ccd4)`
+      : `color-mix(in srgb, ${tintBase} 22%, #3c3c44)`;
+
+  if (dismissed) return null;
+
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+
+  // info/success are polite (status); warning/danger interrupt (alert).
+  const role = type === 'warning' || type === 'danger' ? 'alert' : 'status';
+
+  return (
+    <Container role={role} background={background} frame={borderColor} shadow={shadow}>
+      {/* Icon is decorative — the title/message already carry the meaning. */}
+      <IconSlot accent={iconColor} aria-hidden='true'>
+        <Icon />
+      </IconSlot>
+      <Body>
+        {title ? (
+          <Text size='14px' weight={600} color={titleColor}>
+            {title}
+          </Text>
+        ) : null}
+        {children ? (
+          <Text size='14px' color={messageColor}>
+            {children}
+          </Text>
+        ) : null}
+      </Body>
+      {isDismissable ? (
+        <CloseButton
+          aria-label='Dismiss'
+          size={16}
+          onClick={handleDismiss}
+          style={{ color: messageColor, flexShrink: 0, marginTop: 1 }}
+        />
+      ) : null}
+    </Container>
+  );
+}

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert, type AlertProps, type AlertType } from './Alert';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, buttonVariants } from './Button';
+import { Text } from '../Text';
+
+const meta: Meta<typeof Button> = {
+  title: 'Common / Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    color: 'dark-purple',
+    variant: 'solid',
+    size: 'md'
+  },
+  argTypes: {
+    color: { control: 'select', options: buttonVariants.colors },
+    variant: { control: 'select', options: buttonVariants.variants },
+    size: { control: 'select', options: buttonVariants.sizes },
+    disabled: { control: 'boolean' }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+const Row = ({ children, label }: { children: React.ReactNode; label: string }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+    <Text size='12px' color='var(--color-text-secondary, #a1a1aa)'>
+      {label}
+    </Text>
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>{children}</div>
+  </div>
+);
+
+// `blue` is de-emphasized — rarely used, so keep it out of the showcase.
+const showcaseColors = buttonVariants.colors.filter(c => c !== 'blue');
+const showcaseSizes = ['md', 'sm'] as const;
+
+export const AllColors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {buttonVariants.variants.flatMap(variant =>
+        showcaseSizes.map(size => (
+          <Row key={`${variant}-${size}`} label={`${variant} variant (${size})`}>
+            {showcaseColors.map(c => (
+              <Button key={c} color={c} variant={variant} size={size}>
+                {variant} {c} {size}
+              </Button>
+            ))}
+          </Row>
+        ))
+      )}
+      <Row label='Disabled'>
+        <Button disabled color='dark-purple'>
+          Next
+        </Button>
+        <Button disabled color='gray'>
+          Back
+        </Button>
+      </Row>
+    </div>
+  )
+};

package/src/components/Button/Button.style.ts

@@ -0,0 +1,158 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { resolveBareFg, soloColorTokens } from "../../_internal/palette";
+import { spacingPx } from "../../_internal/sizing";
+import { UnstyledButton } from "../../_internal/unstyledButton";
+import { dontForwardProps, type ElementOf } from "../../_internal/utils";
+import type { SoloMode } from "../../providers/SoloModeContext";
+import { buttonVariants, type ButtonProps } from "./Button";
+
+type SizeType = ElementOf<(typeof buttonVariants)["sizes"]>;
+
+const sizeMap: Record<
+  SizeType,
+  { py: string; px: string; gap: string; height: string; fontSize: string }
+> = {
+  sm: {
+    py: "5px",
+    px: "10px",
+    gap: spacingPx.xs,
+    height: "30px",
+    fontSize: "13px",
+  },
+  md: {
+    py: "8px",
+    px: "14px",
+    gap: spacingPx.sm,
+    height: "36px",
+    fontSize: "14px",
+  },
+};
+
+export const StyledButton = styled(
+  UnstyledButton,
+  dontForwardProps(
+    "uiTestId",
+    "styleOverrides",
+    "isSquareIconButton",
+    "isCircleIconButton",
+    "leftIcon",
+    "rightIcon",
+    "minWidth",
+  ),
+)<ButtonProps>((props) => {
+  const {
+    variant = "solid",
+    size,
+    color = "dark-purple",
+    isSquareIconButton,
+    isCircleIconButton,
+  } = props;
+  const sizeData = sizeMap[size ?? "md"];
+  const c = soloColorTokens[color];
+  // The active light/dark mode is published on the emotion theme by SoloContextProvider.
+  const mode = (props.theme as { mode?: SoloMode }).mode ?? "dark";
+  const bareFg = resolveBareFg(c.bareFg, mode);
+  const isIcon = isSquareIconButton || isCircleIconButton;
+
+  return css`
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${sizeData.gap};
+    height: ${sizeData.height};
+    border: 1px solid transparent;
+    border-radius: ${isCircleIconButton ? "999px" : "4px"};
+    font: inherit;
+    font-weight: 400;
+    font-size: ${sizeData.fontSize};
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color 0.08s ease,
+      border-color 0.08s ease,
+      transform 0.08s ease;
+
+    ${isIcon
+      ? css`
+          width: ${sizeData.height};
+          padding: 0;
+        `
+      : css`
+          min-width: ${props.minWidth ?? "96px"};
+          padding: ${sizeData.py} ${sizeData.px};
+        `}
+
+    ${variant === "bare"
+      ? css`
+          /* Outlined "secondary" button: dim fill with the accent as both outline
+             and text, so the color/variant reads clearly (legible in both modes). */
+          background-color: var(--color-bg-elevated, #1b1624);
+          color: ${bareFg};
+          border-color: ${bareFg};
+          /* Hover/active tint the fill toward the button's own accent — active is a
+             clearly deeper step than hover, plus a press shift. */
+          &:not([aria-disabled="true"]):hover {
+            background-color: color-mix(
+              in srgb,
+              ${c.bg} ${mode === "dark" ? "12" : "6"}%,
+              var(--color-bg-elevated, #1b1624)
+            );
+          }
+          &:not([aria-disabled="true"]):active {
+            background-color: color-mix(
+              in srgb,
+              ${c.bg} ${mode === "dark" ? "24" : "15"}%,
+              var(--color-bg-elevated, #1b1624)
+            );
+            transform: translateY(1px);
+          }
+        `
+      : css`
+          background-color: ${c.bg};
+          color: ${c.fg};
+          border-color: ${c.border ?? "transparent"};
+          /* Hover/active darken the fill (active darker than hover) in both modes. */
+          &:not([aria-disabled="true"]):hover {
+            background-color: color-mix(in srgb, ${c.bg} 88%, #000);
+          }
+          &:not([aria-disabled="true"]):active {
+            background-color: color-mix(in srgb, ${c.bg} 76%, #000);
+            transform: translateY(1px);
+          }
+        `}
+
+    &:focus-visible {
+      outline: 2px solid ${c.border ?? c.bg};
+      outline-offset: 2px;
+    }
+
+    &[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* The only motion is the 1px press shift; color feedback stays. */
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      &:active {
+        transform: none;
+      }
+    }
+
+    ${props.styleOverrides ? props.styleOverrides : ""}
+  `;
+});
+
+// Alias so the namespace below can reference the original without shadowing.
+const _StyledButton = StyledButton;
+
+// Namespace form for consumers that prefer the grouped `SoloButtonStyles.X` API
+// (e.g. when targeting these styled components as CSS selectors).
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace SoloButtonStyles {
+  export const StyledButton = _StyledButton;
+}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders its children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('fires onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Go</Button>);
+    await user.click(screen.getByRole('button', { name: 'Go' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not fire onClick when disabled', async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Nope
+      </Button>
+    );
+    // The styled button uses pointer-events: none when disabled; userEvent honors it.
+    await user.click(screen.getByRole('button', { name: 'Nope' })).catch(() => {});
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('renders left and right icons', () => {
+    render(
+      <Button leftIcon={<span data-testid='left' />} rightIcon={<span data-testid='right' />}>
+        Label
+      </Button>
+    );
+    expect(screen.getByTestId('left')).toBeInTheDocument();
+    expect(screen.getByTestId('right')).toBeInTheDocument();
+  });
+
+  it('exposes uiTestId as data-testid', () => {
+    render(<Button uiTestId='my-button'>Tagged</Button>);
+    expect(screen.getByTestId('my-button')).toBeInTheDocument();
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,84 @@
+import { css, type SerializedStyles } from '@emotion/react';
+import type { CSSProperties, PropsWithChildren, ReactNode, ButtonHTMLAttributes } from 'react';
+import { Svg, type SvgAsset } from '../../_internal/Svg';
+import type { ElementOf } from '../../_internal/utils';
+import { StyledButton } from './Button.style';
+
+/** Helper to render an SvgAsset at the standard 16px size with `currentColor`. */
+export const buttonSvg = (asset: SvgAsset) => <Svg asset={asset} color='currentColor' size={16} />;
+
+export const buttonVariants = {
+  /** `variant='bare'` is an outlined secondary button (dim fill + accent outline & text). */
+  variants: ['solid', 'bare'],
+  colors: ['dark-purple', 'red', 'warning', 'success', 'gray', 'black', 'blue'],
+  sizes: ['sm', 'md']
+} as const;
+
+export type ButtonPropsBase = {
+  variant?: ElementOf<(typeof buttonVariants)['variants']>;
+  color?: ElementOf<(typeof buttonVariants)['colors']>;
+  size?: ElementOf<(typeof buttonVariants)['sizes']>;
+
+  disabled?: boolean;
+  isSquareIconButton?: boolean;
+  isCircleIconButton?: boolean;
+  minWidth?: CSSProperties['minWidth'];
+
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  uiTestId?: string;
+  styleOverrides?: SerializedStyles;
+} & PropsWithChildren<unknown>;
+
+export type ButtonProps = ButtonPropsBase & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const Button = ({ children, leftIcon, rightIcon, uiTestId, disabled, ...props }: ButtonProps) => {
+  return (
+    <StyledButton
+      type='button'
+      // `aria-disabled` (not the native attribute) keeps the button focusable and
+      // lets `cursor: not-allowed` show — browsers suppress custom cursors on a
+      // natively-disabled control. Activation is guarded in the onClick below.
+      aria-disabled={disabled || undefined}
+      {...props}
+      {...(uiTestId ? { 'data-testid': uiTestId } : {})}
+      onClick={
+        props.onClick && !disabled
+          ? e => {
+              // Stops propagation so the button is safe inside clickable rows/cards.
+              e.stopPropagation();
+              e.preventDefault();
+              props.onClick?.(e);
+              return false;
+            }
+          : undefined
+      }>
+      {leftIcon}
+      {children}
+      {rightIcon}
+    </StyledButton>
+  );
+};
+
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'leftIcon' | 'rightIcon' | 'size'> & {
+  icon: SvgAsset;
+  size?: number | ButtonPropsBase['size'];
+};
+
+export const IconButton = ({ icon, size: sizeIn = 'md', ...props }: IconButtonProps) => {
+  const size = typeof sizeIn === 'number' ? sizeIn : sizeIn === 'sm' ? 32 : 36;
+  return (
+    <Button
+      {...props}
+      size='sm'
+      minWidth='auto'
+      styleOverrides={css`
+        padding: ${size / 4}px;
+        width: ${size + 1}px;
+        height: ${size + 1}px;
+        ${props.styleOverrides}
+      `}>
+      <Svg asset={icon} size={size / 2} color='currentColor' />
+    </Button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,11 @@
+export {
+  Button,
+  IconButton,
+  buttonSvg,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonPropsBase,
+  type IconButtonProps
+} from './Button';
+// Note: `SoloButtonStyles` (and the underlying `StyledButton`) are exposed via
+// the `@solo-io-public/ui-components/styles` subpath, not the main entry.

package/src/components/CloseButton/CloseButton.tsx

@@ -0,0 +1,76 @@
+import type { SerializedStyles } from '@emotion/react';
+import styled from '@emotion/styled';
+import { X } from 'lucide-react';
+import type { ButtonHTMLAttributes } from 'react';
+import { dontForwardProps } from '../../_internal/utils';
+
+// region Styles
+
+const StyledCloseButton = styled('button', dontForwardProps('styleOverrides'))<{ styleOverrides?: SerializedStyles }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.8;
+  transition:
+    background-color 0.08s ease,
+    opacity 0.08s ease;
+
+  &:hover {
+    opacity: 1;
+    /* Subtle wash derived from the button's own color, so it works on any background. */
+    background-color: color-mix(in srgb, currentColor 14%, transparent);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, currentColor 24%, transparent);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-primary, #6844ff);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  svg {
+    display: block;
+  }
+
+  ${props => props.styleOverrides}
+`;
+
+// region Component
+
+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 function CloseButton({
+  size = 18,
+  styleOverrides,
+  type = 'button',
+  'aria-label': ariaLabel = 'Close',
+  ...props
+}: CloseButtonProps) {
+  return (
+    <StyledCloseButton type={type} aria-label={ariaLabel} styleOverrides={styleOverrides} {...props}>
+      <X size={size} />
+    </StyledCloseButton>
+  );
+}

package/src/components/CloseButton/index.ts

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