@scalepad/ui 0.1.0

package/src/components/TextInput/README.md

@@ -0,0 +1,98 @@
+# TextInput Component
+
+A custom TextInput wrapper component that matches the Figma design specifications for input fields in the design system.
+
+## Figma Design Specifications
+
+This component implements the following Figma design specifications from node `105:7045`:
+
+| Property              | Figma Spec                         | Implementation                                                |
+| --------------------- | ---------------------------------- | ------------------------------------------------------------- |
+| **Border Radius**     | `var(--semantic/rounded-lg, 8px)`  | `radius="lg"` prop (8px)                                      |
+| **Padding**           | `px: 12px, py: 7.5px`              | CSS Module: `padding-top/bottom: 7.5px` (px: 12px from Mantine default) |
+| **Shadow**            | `0px 1px 2px 0px rgba(0,0,0,0.05)` | CSS Module: `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05)` |
+| **Font Size**         | `14px (paragraph small)`           | `size="sm"` prop (14px)                                       |
+| **Height**            | `36px total`                       | Automatic via padding (21px content + 15px padding)           |
+| **Border**            | `1px solid var(--general/border)`  | CSS Module: `border: 1px solid var(--color-general-border)`   |
+| **Background**        | `var(--general/input, white)`      | CSS Module: `background-color: var(--color-general-input)`    |
+| **Placeholder Color** | `var(--general/muted-foreground)`  | CSS Module: `color: var(--color-general-muted-foreground)`    |
+
+## Usage
+
+```tsx
+import { Search } from 'lucide-react';
+
+import { TextInput } from '@acme/ui';
+
+function SearchBar() {
+  return (
+    <TextInput
+      placeholder="Search by Device Name or User Name"
+      leftSection={<Search size={16} />}
+    />
+  );
+}
+```
+
+## Features
+
+- ✅ Matches Figma design specifications exactly
+- ✅ Automatic dark mode support
+- ✅ Consistent with design system colors and spacing
+- ✅ Proper focus and disabled states
+- ✅ Supports all standard Mantine TextInput props
+- ✅ TypeScript support with full type safety
+
+## Props
+
+This component extends all Mantine `TextInput` props with sensible defaults:
+
+- `size`: Defaults to `"sm"` (14px) to match Figma
+- `radius`: Defaults to `"lg"` (8px) to match Figma
+- All other props from `TextInputProps` are supported
+
+## Examples
+
+### Basic Input
+
+```tsx
+<TextInput placeholder="Enter text" />
+```
+
+### With Icon
+
+```tsx
+<TextInput placeholder="Search" leftSection={<Search size={16} />} />
+```
+
+### With Label and Error
+
+```tsx
+<TextInput label="Email" placeholder="Enter your email" error="Invalid email address" />
+```
+
+### Disabled State
+
+```tsx
+<TextInput placeholder="Disabled input" disabled />
+```
+
+## Design System Integration
+
+This component is part of the `@acme/ui` package and follows the same wrapper pattern as other extended components:
+
+- **Text** and **Title**: Typography components with semantic font weights
+- **Button**: Button component with Figma design variants
+- **TextInput**: Input component with Figma design specifications (this component)
+
+All components use a combination of Mantine props and CSS Modules to achieve pixel-perfect Figma designs while maintaining flexibility.
+
+## Development
+
+To view the component in Storybook:
+
+```bash
+pnpm --filter @acme/ui storybook
+```
+
+Navigate to **Components > TextInput** to see all variants and examples.

package/src/components/TextInput/SearchTextInput.figma.tsx

@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+
+import { SearchTextInput } from './SearchTextInput';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  SearchTextInput,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=176%3A27332',
+  {
+    props: {},
+    example: _props => (
+      <SearchTextInput value="" onChange={() => {}} placeholder="Search" />
+    ),
+  },
+);

package/src/components/TextInput/SearchTextInput.tsx

@@ -0,0 +1,150 @@
+/**
+ * Search TextInput with search icon and clear button
+ * Uses TextInput with a search icon in rightSection when empty;
+ * when there is a value, shows an IconButton with X to clear.
+ * All other props pass through to TextInput.
+ * Controlled: pass value and onChange.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (fully controlled)
+ * <SearchTextInput
+ *   placeholder="Search..."
+ *   value={query}
+ *   onChange={(e) => setQuery(e.currentTarget.value)}
+ * />
+ *
+ * // With debouncing for table searches
+ * <SearchTextInput
+ *   placeholder="Search..."
+ *   value={query}
+ *   onChange={(e) => setQuery(e.currentTarget.value)}
+ *   debounceMs={300}
+ * />
+ * ```
+ */
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+} from 'react';
+
+import { Search, X } from 'lucide-react';
+
+import { useDebouncedValue } from '@scalepad/ui-utils/hooks';
+
+import { IconButton } from '../IconButton';
+import { TextInput, type TextInputProps } from './TextInput';
+
+export interface SearchTextInputProps extends Omit<
+  TextInputProps,
+  'rightSection'
+> {
+  /**
+   * Optional debounce delay in milliseconds
+   * When set, internal state is used for instant input feedback
+   * and onChange is called with debounced value
+   * @default undefined (no debouncing)
+   */
+  debounceMs?: number;
+}
+
+export const SearchTextInput = forwardRef<
+  HTMLInputElement,
+  SearchTextInputProps
+>(({ value = '', onChange, debounceMs, ...rest }, ref) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Use internal state when debouncing, otherwise use controlled value
+  const [localValue, setLocalValue] = useState(value);
+  const [debouncedValue] = useDebouncedValue(localValue, debounceMs ?? 0);
+
+  const displayValue = debounceMs !== undefined ? localValue : value;
+  const hasValue = String(displayValue ?? '').length > 0;
+
+  const setRef = useCallback(
+    (el: HTMLInputElement | null) => {
+      inputRef.current = el;
+      if (typeof ref === 'function') {
+        ref(el);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLInputElement | null>).current = el;
+      }
+    },
+    [ref],
+  );
+
+  // Sync debounced value to parent when debouncing is enabled
+  useEffect(() => {
+    if (debounceMs !== undefined && onChange) {
+      const syntheticEvent = {
+        currentTarget: { value: debouncedValue },
+        target: { value: debouncedValue },
+      } as ChangeEvent<HTMLInputElement>;
+      onChange(syntheticEvent);
+    }
+  }, [debouncedValue, debounceMs, onChange]);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (debounceMs !== undefined) {
+        // With debouncing: update local state, debounced effect will call parent
+        setLocalValue(e.currentTarget.value);
+      } else {
+        // Without debouncing: call parent directly
+        onChange?.(e);
+      }
+    },
+    [debounceMs, onChange],
+  );
+
+  const clearInput = useCallback(() => {
+    const syntheticEvent = {
+      currentTarget: { value: '' },
+      target: { value: '' },
+    } as ChangeEvent<HTMLInputElement>;
+
+    if (debounceMs !== undefined) {
+      // With debouncing: clear local state, debounced effect will notify parent
+      setLocalValue('');
+    } else {
+      // Without debouncing: notify parent directly
+      onChange?.(syntheticEvent);
+    }
+
+    inputRef.current?.focus();
+  }, [debounceMs, onChange]);
+
+  const getRightSection = () => {
+    if (hasValue) {
+      return (
+        <IconButton
+          variant="ghost"
+          size="xs"
+          onClick={clearInput}
+          aria-label="Clear search"
+          type="button"
+        >
+          <X size={16} />
+        </IconButton>
+      );
+    }
+    return <Search size={16} />;
+  };
+
+  return (
+    <TextInput
+      ref={setRef}
+      value={displayValue}
+      onChange={handleChange}
+      rightSection={getRightSection()}
+      {...rest}
+    />
+  );
+});
+
+SearchTextInput.displayName = 'SearchTextInput';

package/src/components/TextInput/TextInput.figma.tsx

@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+
+import { TextInput } from './TextInput';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  TextInput,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=16%3A1738',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum('Size', {
+        Small: 'sm',
+      }),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      readOnly: figma.enum('State', {
+        Disabled: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "showDecorationLeft": figma.boolean('Show decoration left'),
+      // "showDecorationRight": figma.boolean('Show decoration right'),
+      // "showCursor": figma.boolean('Show cursor'),
+      // "roundness": figma.enum('Roundness', {
+      //   "Default": "default",
+      //   "Round": "round"
+      // })
+    },
+    example: props => (
+      <TextInput
+        size={props.size}
+        disabled={props.disabled}
+        readOnly={props.readOnly}
+      />
+    ),
+  },
+);

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,42 @@
+/**
+ * Extended TextInput Component
+ * Wrapper around Mantine TextInput with Figma design specifications
+ *
+ * @example
+ * ```tsx
+ * <TextInput
+ *   placeholder="Search by Device Name"
+ *   leftSection={<Search size={16} />}
+ * />
+ * ```
+ */
+
+import { forwardRef } from 'react';
+
+import {
+  TextInput as MantineTextInput,
+  type TextInputProps as MantineTextInputProps,
+} from '@mantine/core';
+
+export interface TextInputProps extends Omit<MantineTextInputProps, 'size'> {
+  /** Input size - defaults to 'sm' (14px) to match Figma */
+  size?: MantineTextInputProps['size'];
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ className, size = 'sm', radius = 'lg', ...props }, ref) => {
+    return (
+      <MantineTextInput
+        ref={ref}
+        size={size}
+        radius={radius}
+        classNames={{
+          input: className,
+        }}
+        {...props}
+      />
+    );
+  },
+);
+
+TextInput.displayName = 'TextInput';

package/src/components/TextInput/index.ts

@@ -0,0 +1,4 @@
+export { SearchTextInput } from './SearchTextInput';
+export { TextInput } from './TextInput';
+export type { SearchTextInputProps } from './SearchTextInput';
+export type { TextInputProps } from './TextInput';

package/src/components/ThemeSwitcher.figma.tsx

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  ThemeSwitcher,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=16%3A1801',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "checked": figma.boolean('Checked?'),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Focus": "focus",
+      //   "Disabled": "disabled"
+      // })
+    },
+    example: _props => <ThemeSwitcher />,
+  },
+);

package/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,69 @@
+import { Monitor, Moon, Sun } from 'lucide-react';
+
+import { Group, useMantineColorScheme } from '@mantine/core';
+
+import { IconButton } from './IconButton';
+
+import type { ButtonVariants } from './Button/Button';
+
+export interface ThemeSwitcherProps {
+  /** Size of the action icons */
+  size?: string | number;
+  /** Variant of the action icons */
+  variant?: ButtonVariants;
+}
+
+type ColorScheme = 'light' | 'dark' | 'auto';
+
+/**
+ * ThemeSwitcher component for switching between light, dark, and auto themes
+ * Uses ActionIcon components to provide theme selection
+ */
+export function ThemeSwitcher({
+  size = 'lg',
+  variant = 'ghost',
+}: ThemeSwitcherProps) {
+  const { setColorScheme, colorScheme } = useMantineColorScheme();
+
+  const handleThemeChange = (scheme: ColorScheme) => {
+    setColorScheme(scheme);
+  };
+
+  return (
+    <Group gap="xs">
+      <IconButton
+        onClick={() => handleThemeChange('light')}
+        variant={
+          colorScheme === 'light' ? ('primary' as ButtonVariants) : variant
+        }
+        size={size}
+        aria-label="Light theme"
+        title="Light theme"
+      >
+        <Sun size={18} />
+      </IconButton>
+      <IconButton
+        onClick={() => handleThemeChange('dark')}
+        variant={
+          colorScheme === 'dark' ? ('primary' as ButtonVariants) : variant
+        }
+        size={size}
+        aria-label="Dark theme"
+        title="Dark theme"
+      >
+        <Moon size={18} />
+      </IconButton>
+      <IconButton
+        onClick={() => handleThemeChange('auto')}
+        variant={
+          colorScheme === 'auto' ? ('primary' as ButtonVariants) : variant
+        }
+        size={size}
+        aria-label="Auto theme"
+        title="Auto theme (follows system)"
+      >
+        <Monitor size={18} />
+      </IconButton>
+    </Group>
+  );
+}

package/src/components/TrendBadge/TrendBadge.tsx

@@ -0,0 +1,76 @@
+import { Minus, TrendingDown, TrendingUp } from 'lucide-react';
+
+import { Badge, type BadgeProps, type BadgeSize } from '../Badge';
+
+export type TrendDirection = 'up' | 'down' | 'flat';
+
+export interface TrendBadgeProps {
+  /**
+   * Direction of change. Drives both the icon and the default semantic color.
+   */
+  direction: TrendDirection;
+  /**
+   * Pre-formatted value, e.g. "12.4%" or "$1.2k". Rendered after the icon.
+   */
+  value: string;
+  /**
+   * Optional trailing qualifier, e.g. "YoY", "MoM".
+   */
+  label?: string;
+  /**
+   * Invert the semantic mapping — by default up=success, down=destructive.
+   * Use invert=true for metrics where a decrease is desirable (e.g. costs).
+   */
+  invert?: boolean;
+  /**
+   * Badge size
+   * @default 'xs'
+   */
+  size?: BadgeSize;
+}
+
+const ICON_SIZE = 12;
+
+function resolveVariant(
+  direction: TrendDirection,
+  invert: boolean,
+): BadgeProps['variant'] {
+  if (direction === 'flat') return 'secondary';
+  const positive = direction === 'up';
+  const isGood = invert ? !positive : positive;
+  return isGood ? 'success' : 'destructive';
+}
+
+function DirectionIcon({ direction }: { direction: TrendDirection }) {
+  if (direction === 'up') return <TrendingUp size={ICON_SIZE} />;
+  if (direction === 'down') return <TrendingDown size={ICON_SIZE} />;
+  return <Minus size={ICON_SIZE} />;
+}
+
+/**
+ * TrendBadge displays a directional delta — arrow icon + formatted value +
+ * optional qualifier — styled by semantic tone. Built on top of Badge so it
+ * inherits the design-system color tokens.
+ */
+export function TrendBadge({
+  direction,
+  value,
+  label,
+  invert = false,
+  size = 'xs',
+}: TrendBadgeProps) {
+  const variant = resolveVariant(direction, invert);
+  const text = label ? `${value} ${label}` : value;
+
+  return (
+    <Badge
+      data-testid="trendbadge-root"
+      data-variant={variant}
+      variant={variant}
+      size={size}
+      leftSection={<DirectionIcon direction={direction} />}
+    >
+      {text}
+    </Badge>
+  );
+}

package/src/components/TrendBadge/index.ts

@@ -0,0 +1,2 @@
+export { TrendBadge } from './TrendBadge';
+export type { TrendBadgeProps, TrendDirection } from './TrendBadge';

package/src/components/TruncatedText.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { Tooltip } from '@mantine/core';
+
+import { Text, type TextProps } from './Typography';
+
+export interface TruncatedTextProps extends TextProps {
+  /**
+   * Text content to display
+   */
+  children: ReactNode;
+  /**
+   * Tooltip text to show on hover
+   * If not provided, uses the children text
+   * Set to null to disable tooltip
+   */
+  tooltip?: string | null;
+  /**
+   * Whether to always disable the tooltip (overrides overflow detection)
+   * Useful when you want conditional tooltips
+   * @default false
+   */
+  disableTooltip?: boolean;
+}
+
+/**
+ * TruncatedText Component
+ *
+ * Renders text with truncation (ellipsis) and automatically shows a tooltip
+ * ONLY when the text is actually truncated. This provides better UX by avoiding
+ * redundant tooltips for fully visible text.
+ *
+ * @example Basic usage (auto-tooltip only when truncated)
+ * ```tsx
+ * <TruncatedText>Very long text that will be truncated</TruncatedText>
+ * ```
+ *
+ * @example Custom tooltip
+ * ```tsx
+ * <TruncatedText tooltip="Full version string">
+ *   v1.2.3
+ * </TruncatedText>
+ * ```
+ *
+ * @example Force disable tooltip
+ * ```tsx
+ * <TruncatedText disableTooltip={!hasValue}>
+ *   {value || 'N/A'}
+ * </TruncatedText>
+ * ```
+ *
+ * @example With text props
+ * ```tsx
+ * <TruncatedText variant="caption1.strong" c="text.subdued.default">
+ *   Long text
+ * </TruncatedText>
+ * ```
+ */
+export function TruncatedText({
+  children,
+  tooltip,
+  disableTooltip = false,
+  ...textProps
+}: TruncatedTextProps) {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  // Check if text is truncated by comparing scrollWidth with clientWidth
+  useEffect(() => {
+    const element = textRef.current;
+    if (!element) return;
+
+    const checkTruncation = () => {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    };
+
+    // Initial check
+    checkTruncation();
+
+    // Use ResizeObserver to watch for element size changes
+    // This is more efficient than window resize listener and works for container resizes
+    const resizeObserver = new ResizeObserver(checkTruncation);
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [children]); // Re-check when children change
+
+  // Use provided tooltip, or fallback to children if it's a string
+  const tooltipLabel =
+    tooltip !== undefined
+      ? tooltip
+      : typeof children === 'string'
+        ? children
+        : null;
+
+  // Only show tooltip if:
+  // 1. Not explicitly disabled
+  // 2. Text is actually truncated
+  // 3. We have valid tooltip content
+  const shouldShowTooltip =
+    !disableTooltip &&
+    isTruncated &&
+    tooltipLabel !== null &&
+    Boolean(tooltipLabel);
+
+  return (
+    <Tooltip label={tooltipLabel} disabled={!shouldShowTooltip}>
+      <Text ref={textRef} truncate {...textProps}>
+        {children}
+      </Text>
+    </Tooltip>
+  );
+}