@scalepad/ui 0.1.0

package/src/components/InfiniteScrollSentinel.tsx

@@ -0,0 +1,86 @@
+import { Box, Flex, Loader } from '@mantine/core';
+
+import { Text } from './Typography';
+
+/**
+ * Props for the InfiniteScrollSentinel component
+ */
+export interface InfiniteScrollSentinelProps {
+  /** Ref to attach to the sentinel element for intersection observation */
+  sentinelRef: (node?: Element | null) => void;
+  /** Whether the next page is currently being fetched */
+  isFetchingNextPage: boolean;
+  /** Custom loading message (default: 'Loading more...') */
+  loadingMessage?: string;
+  /** Size of the loader spinner (default: 'md') */
+  loaderSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Number of pages fetched so far (used to detect if infinite scrolling was used) */
+  totalPages?: number;
+  /** Message to show when all data has been loaded (only shown if totalPages > 1)
+   * @default "All items loaded"
+   */
+  endMessage?: string;
+}
+
+/**
+ * Component that renders an invisible sentinel element for infinite scroll
+ * and displays a loading indicator while fetching more data.
+ * Optionally shows an end message when all data has been loaded.
+ *
+ * @example
+ * ```tsx
+ * const { ref } = useInfiniteScroll({ hasNextPage, isFetchingNextPage, fetchNextPage });
+ *
+ * return (
+ *   <>
+ *     {items.map(item => <Item key={item.id} {...item} />)}
+ *     <InfiniteScrollSentinel
+ *       sentinelRef={ref}
+ *       isFetchingNextPage={isFetchingNextPage}
+ *       loadingMessage="Loading more items..."
+ *       totalPages={totalPages}
+ *       endMessage="All items loaded"
+ *     />
+ *   </>
+ * );
+ * ```
+ */
+export function InfiniteScrollSentinel({
+  sentinelRef,
+  isFetchingNextPage,
+  loadingMessage = 'Loading more...',
+  loaderSize = 'md',
+  totalPages,
+  endMessage = 'All items loaded',
+}: InfiniteScrollSentinelProps) {
+  // Only show end message if:
+  // 1. Not currently fetching
+  // 2. totalPages > 1 (infinite scrolling was actively used)
+  const showEndMessage = !isFetchingNextPage && (totalPages ?? 0) > 1;
+
+  return (
+    <>
+      {/* Invisible sentinel element that triggers intersection observer */}
+      <Box ref={sentinelRef} h={20} />
+
+      {/* Loading indicator shown while fetching next page */}
+      {isFetchingNextPage && (
+        <Flex justify="center" align="center" gap="sm" py="xl">
+          <Loader size={loaderSize} type="dots" />
+          <Text variant="caption1.strong" c="text.subdued.default">
+            {loadingMessage}
+          </Text>
+        </Flex>
+      )}
+
+      {/* End message shown when all data has been loaded via infinite scroll */}
+      {showEndMessage && (
+        <Flex justify="center" align="center" py="xl">
+          <Text variant="caption1.strong" c="text.subdued.default">
+            {endMessage}
+          </Text>
+        </Flex>
+      )}
+    </>
+  );
+}

package/src/components/InfiniteScrollTrigger.tsx

@@ -0,0 +1,78 @@
+import { InfiniteScrollSentinel } from './InfiniteScrollSentinel';
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
+
+/**
+ * Pagination state returned by hooks that use infinite queries.
+ * Spread directly onto `<InfiniteScrollTrigger {...pagination} />`.
+ */
+export interface InfiniteScrollState {
+  /** Whether there are more pages to fetch */
+  hasNextPage: boolean;
+  /** Whether the next page is currently being fetched */
+  isFetchingNextPage: boolean;
+  /** Function to call to fetch the next page */
+  fetchNextPage: () => void;
+  /** Number of pages fetched so far (used to detect if infinite scrolling was used) */
+  totalPages?: number;
+}
+
+/**
+ * Props for the InfiniteScrollTrigger component.
+ * Extends {@link InfiniteScrollState} with optional messages.
+ */
+export interface InfiniteScrollTriggerProps extends InfiniteScrollState {
+  /** Custom loading message (default: 'Loading more...') */
+  loadingMessage?: string;
+  /** Message to show when all data has been loaded (only shown if totalPages > 1)
+   * @default "All items loaded"
+   */
+  endMessage?: string;
+}
+
+/**
+ * Self-contained infinite scroll trigger that combines the scroll observer
+ * and loading sentinel into a single drop-in component.
+ *
+ * Shows "All items loaded" by default when infinite scrolling completes.
+ * Customize with the endMessage prop.
+ *
+ * @example
+ * ```tsx
+ * const { pagination } = useMyEntity();
+ *
+ * return (
+ *   <>
+ *     <MyTable items={items} />
+ *     <InfiniteScrollTrigger {...pagination} endMessage="All apps loaded" />
+ *   </>
+ * );
+ * ```
+ */
+export function InfiniteScrollTrigger({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  totalPages,
+  loadingMessage,
+  endMessage,
+}: InfiniteScrollTriggerProps) {
+  const { ref } = useInfiniteScroll({
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  });
+
+  if (!hasNextPage) {
+    return null;
+  }
+
+  return (
+    <InfiniteScrollSentinel
+      sentinelRef={ref}
+      isFetchingNextPage={isFetchingNextPage}
+      loadingMessage={loadingMessage}
+      totalPages={totalPages}
+      endMessage={endMessage}
+    />
+  );
+}

package/src/components/InfoCard.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+
+import { InfoCard } from './InfoCard';
+
+/**
+ * -- 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(
+  InfoCard,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=179%3A29234',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      variant: figma.enum('Variant', {
+        Information: 'information',
+        Success: 'success',
+        Danger: 'danger',
+        Warning: 'warning',
+        Subdued: 'subdued',
+      }),
+      // No matching props could be found for these Figma properties:
+      // "mainSlot": figma.instance('Main Slot'),
+      // "headerSlot": figma.instance('Header Slot'),
+      // "footerSlot": figma.instance('Footer Slot'),
+      // "slotNo": figma.enum('Slot No.', {
+      //   "1 Slot": "1-slot",
+      //   "2 Slots": "2-slots",
+      //   "3 Slots": "3-slots",
+      //   "Slot No.4": "slot-no-4",
+      //   "Slot No.5": "slot-no-5",
+      //   "Slot No.6": "slot-no-6"
+      // })
+    },
+    example: props => (
+      <InfoCard
+        title="Deployment Instructions"
+        description="Ready to deploy to your customers? We provide comprehensive rollout scripts so you can get up and running quickly!"
+        buttonText="Show Deployment Instructions"
+        variant={props.variant}
+      />
+    ),
+  },
+);

package/src/components/InfoCard.tsx

@@ -0,0 +1,216 @@
+import type { ReactNode } from 'react';
+
+import { Box, Card, Group, Stack } from '@mantine/core';
+
+import { Button, type ButtonProps } from './Button';
+import { Text, Title } from './Typography';
+import { tokens } from '../theme/themeContract.css';
+
+type InfoCardVariant =
+  | 'information'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'subdued'
+  | 'default';
+type InfoCardLayout = 'left' | 'centered';
+
+interface InfoCardVariantStyles {
+  cardBackgroundColor: string;
+  iconBackgroundColor: string;
+  iconColor: string;
+  textColor: string;
+}
+
+const variantStyles: Record<InfoCardVariant, InfoCardVariantStyles> = {
+  information: {
+    cardBackgroundColor: tokens.color.background.informationFilled,
+    iconBackgroundColor: tokens.color.background.informationFilledHover,
+    iconColor: tokens.color.icon.inverse,
+    textColor: tokens.color.text.inverse,
+  },
+  success: {
+    cardBackgroundColor: tokens.color.background.successLight,
+    iconBackgroundColor: tokens.color.background.successLightHover,
+    iconColor: tokens.color.icon.successDefault,
+    textColor: tokens.color.text.default,
+  },
+  danger: {
+    cardBackgroundColor: tokens.color.background.dangerLight,
+    iconBackgroundColor: tokens.color.background.dangerLightHover,
+    iconColor: tokens.color.icon.dangerDefault,
+    textColor: tokens.color.text.default,
+  },
+  warning: {
+    cardBackgroundColor: tokens.color.background.warningLight,
+    iconBackgroundColor: tokens.color.background.warningLightHover,
+    iconColor: tokens.color.icon.warningDefault,
+    textColor: tokens.color.text.default,
+  },
+  subdued: {
+    cardBackgroundColor: tokens.color.background.subduedLight,
+    iconBackgroundColor: tokens.color.background.subduedLightHover,
+    iconColor: tokens.color.icon.default,
+    textColor: tokens.color.text.default,
+  },
+  default: {
+    cardBackgroundColor: tokens.color.background.default,
+    iconBackgroundColor: tokens.color.background.defaultHover,
+    iconColor: tokens.color.icon.default,
+    textColor: tokens.color.text.default,
+  },
+};
+
+export interface InfoCardProps {
+  /**
+   * The title of the card
+   */
+  title: string;
+  /**
+   * The description text
+   */
+  description: string;
+  /**
+   * The button text
+   */
+  buttonText: string;
+  /**
+   * Callback function when the button is clicked
+   */
+  onButtonClick?: () => void;
+  /**
+   * Visual variant of the card
+   */
+  variant?: InfoCardVariant;
+  /**
+   * Card content alignment
+   */
+  layout?: InfoCardLayout;
+  /**
+   * Optional icon displayed in the header
+   */
+  icon?: ReactNode;
+  /**
+   * Button color
+   */
+  buttonColor?: ButtonProps['color'];
+  /**
+   * Button variant
+   */
+  buttonVariant?: ButtonProps['variant'];
+
+  /**
+   * Button left section
+   */
+  buttonLeftSection?: ReactNode;
+  /**
+   * Button right section
+   */
+  buttonRightSection?: ReactNode;
+}
+
+/**
+ * InfoCard component
+ * A generic card for displaying information with a call-to-action button
+ */
+export function InfoCard({
+  title,
+  description,
+  buttonText,
+  onButtonClick,
+  variant = 'information',
+  layout = 'left',
+  icon,
+  buttonColor = 'gray',
+  buttonVariant = 'primary',
+  buttonLeftSection,
+  buttonRightSection,
+}: InfoCardProps) {
+  const styles = variantStyles[variant];
+
+  let stackAlignment: 'center' | 'flex-start' = 'flex-start';
+  let textAlign: 'center' | 'left' = 'left';
+  if (layout === 'centered') {
+    stackAlignment = 'center';
+    textAlign = 'center';
+  }
+
+  const renderHeader = () => {
+    if (!icon) {
+      return (
+        <Title
+          variant="heading4"
+          ta={textAlign}
+          style={{ color: styles.textColor }}
+        >
+          {title}
+        </Title>
+      );
+    }
+
+    return (
+      <Group gap="md" align="center" wrap="nowrap">
+        <Box
+          w={48}
+          h={48}
+          p="sm"
+          style={{
+            borderRadius: tokens.radius.full,
+            backgroundColor: styles.iconBackgroundColor,
+            color: styles.iconColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+          }}
+        >
+          {icon}
+        </Box>
+        <Title
+          variant="heading4"
+          ta={textAlign}
+          style={{ color: styles.textColor }}
+        >
+          {title}
+        </Title>
+      </Group>
+    );
+  };
+
+  return (
+    <Card
+      p="xl"
+      radius="xl"
+      shadow="0"
+      h="100%"
+      withBorder={false}
+      style={{
+        backgroundColor: styles.cardBackgroundColor,
+      }}
+    >
+      <Stack gap="md" align={stackAlignment} h="100%">
+        {renderHeader()}
+
+        <Text
+          variant="caption1"
+          ta={textAlign}
+          style={{ color: styles.textColor }}
+        >
+          {description}
+        </Text>
+
+        <Button
+          variant={buttonVariant}
+          size="md"
+          radius="lg"
+          color={buttonColor}
+          onClick={onButtonClick}
+          leftSection={buttonLeftSection}
+          rightSection={buttonRightSection}
+        >
+          {buttonText}
+        </Button>
+      </Stack>
+    </Card>
+  );
+}

package/src/components/KbdHint/KbdHint.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+import { Group, Kbd } from '@mantine/core';
+
+import { Text } from '../Typography';
+
+export interface KbdHintProps {
+  keys: string[];
+  text?: ReactNode;
+}
+
+export function KbdHint({ keys, text }: KbdHintProps) {
+  return (
+    <Group gap={8} wrap="nowrap">
+      <Group gap={4} wrap="nowrap">
+        {keys.map(key => (
+          <Kbd key={key}>{key}</Kbd>
+        ))}
+      </Group>
+      {text ? <Text variant="caption1">{text}</Text> : null}
+    </Group>
+  );
+}

package/src/components/KbdHint/index.ts

@@ -0,0 +1,2 @@
+export { KbdHint } from './KbdHint';
+export type { KbdHintProps } from './KbdHint';

package/src/components/LabeledField/LabeledField.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+import { Stack } from '@mantine/core';
+
+import { Text } from '../Typography';
+
+export interface LabeledFieldProps {
+  label: string;
+  children: ReactNode;
+}
+
+export function LabeledField({ label, children }: LabeledFieldProps) {
+  return (
+    <Stack gap="3xs">
+      <Text variant="caption1" c="text.subdued.default">
+        {label}
+      </Text>
+      {children}
+    </Stack>
+  );
+}

package/src/components/LabeledField/index.ts

@@ -0,0 +1,2 @@
+export { LabeledField } from './LabeledField';
+export type { LabeledFieldProps } from './LabeledField';

package/src/components/LookupSelect/LookupSelect.css.ts

@@ -0,0 +1,149 @@
+/**
+ * LookupSelect component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { mantineVars } from '../../theme/mantineVars';
+import { tokens } from '../../theme/themeContract.css';
+
+const focusRing = {
+  outline: `2px solid ${tokens.color.stroke.focusStrong}`,
+  outlineOffset: 2,
+};
+
+export const trigger = style({
+  all: 'unset',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minHeight: 36,
+  height: 36,
+  padding: '5.5px 8px',
+  gap: 8,
+  borderRadius: 8,
+  border: `1px solid ${tokens.color.stroke.default}`,
+  background: tokens.color.background.input,
+  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
+  fontFamily: 'inherit',
+  fontSize: 14,
+  lineHeight: '21px',
+  fontWeight: 400,
+  cursor: 'pointer',
+  transition: 'border-color 0.15s ease',
+  selectors: {
+    '&:hover:not(:disabled)': {
+      borderColor: tokens.color.stroke.subduedStrong,
+    },
+    '&:focus-visible': focusRing,
+    '&[aria-expanded="true"]': {
+      borderColor: tokens.color.stroke.focusDefault,
+    },
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.6,
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      borderColor: tokens.color.stroke.default,
+      backgroundColor: tokens.color.background.default,
+    },
+  },
+});
+
+export const triggerValue = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  flex: 1,
+  minWidth: 0,
+  overflow: 'hidden',
+});
+
+export const triggerLabel = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const placeholder = style({
+  color: tokens.color.text.subduedDefault,
+});
+
+export const chevron = style({
+  color: tokens.color.text.subduedDefault,
+  flexShrink: 0,
+  width: 16,
+  height: 16,
+});
+
+export const searchRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  padding: '6px 10px',
+  borderBottom: `1px solid ${tokens.color.stroke.light}`,
+});
+
+export const searchIcon = style({
+  color: tokens.color.icon.medium,
+  flexShrink: 0,
+  width: 14,
+  height: 14,
+});
+
+export const searchInput = style({
+  all: 'unset',
+  flex: 1,
+  minWidth: 0,
+  fontFamily: 'inherit',
+  fontSize: 14,
+  lineHeight: '21px',
+  color: tokens.color.text.default,
+  selectors: {
+    '&::placeholder': {
+      color: tokens.color.text.subduedDefault,
+    },
+  },
+});
+
+export const options = style({
+  maxHeight: 300,
+  overflowY: 'auto',
+  padding: 4,
+});
+
+export const option = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  minWidth: 0,
+});
+
+export const optionRoot = style({
+  selectors: {
+    '&[data-combobox-selected]': {
+      backgroundColor: tokens.color.background.subduedLight,
+    },
+  },
+});
+
+export const optionText = style({
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 0,
+  gap: 2,
+});
+
+export const optionLabel = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const footer = style({
+  padding: '8px 12px',
+  borderTop: `1px solid ${tokens.color.stroke.light}`,
+  backgroundColor: tokens.color.background.subduedUltralight,
+});