@sovereignfs/ui 0.40.0 → 0.45.0

package/src/components/Typography/Typography.module.css

@@ -0,0 +1,47 @@
+.h1 {
+  margin: 0;
+  font-size: var(--sv-font-size-2xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h2 {
+  margin: 0;
+  font-size: var(--sv-font-size-xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h3 {
+  margin: 0;
+  font-size: var(--sv-font-size-lg);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h4 {
+  margin: 0;
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.body {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.caption {
+  margin: 0;
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+.label {
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Typography } from './Typography';
+
+const meta = {
+  title: 'Components/Typography',
+  component: Typography,
+  parameters: { layout: 'padded' },
+  args: {
+    variant: 'body',
+    children: 'The quick brown fox',
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const H1: Story = {
+  args: { variant: 'h1' },
+};
+
+export const H2: Story = {
+  args: { variant: 'h2' },
+};
+
+export const H3: Story = {
+  args: { variant: 'h3' },
+};
+
+export const H4: Story = {
+  args: { variant: 'h4' },
+};
+
+export const Body: Story = {
+  args: { variant: 'body' },
+};
+
+export const Caption: Story = {
+  args: { variant: 'caption' },
+};
+
+export const LabelVariant: Story = {
+  name: 'Label',
+  args: { variant: 'label', children: 'Section label' },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="h4">Heading 4</Typography>
+      <Typography variant="body">
+        Body copy — the default reading size for paragraphs and descriptions.
+      </Typography>
+      <Typography variant="caption">Caption — secondary, supporting copy.</Typography>
+      <Typography variant="label">Section label</Typography>
+    </div>
+  ),
+};

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,30 @@
+import type { ElementType, ReactNode } from 'react';
+import styles from './Typography.module.css';
+
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption' | 'label';
+
+const DEFAULT_TAG: Record<TypographyVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  body: 'p',
+  caption: 'p',
+  label: 'span',
+};
+
+export interface TypographyProps {
+  variant: TypographyVariant;
+  children: ReactNode;
+  /** Override the rendered tag while keeping the variant's visual style —
+   * e.g. `variant="h1" as="div"` to avoid a second `<h1>` on a page that
+   * already has one. */
+  as?: ElementType;
+  className?: string;
+}
+
+/** Typography — text bound to the design system's font-size/weight scale. */
+export function Typography({ variant, children, as, className }: TypographyProps) {
+  const Tag = as ?? DEFAULT_TAG[variant];
+  return <Tag className={[styles[variant], className].filter(Boolean).join(' ')}>{children}</Tag>;
+}

package/src/components/Typography/__tests__/Typography.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Typography } from '../Typography';
+
+afterEach(cleanup);
+
+describe('Typography', () => {
+  it('renders the default tag for each variant', () => {
+    render(<Typography variant="h1">Title</Typography>);
+    expect(screen.getByText('Title').tagName).toBe('H1');
+  });
+
+  it('renders body as a <p> by default', () => {
+    render(<Typography variant="body">Body copy</Typography>);
+    expect(screen.getByText('Body copy').tagName).toBe('P');
+  });
+
+  it('renders label as a <span> by default', () => {
+    render(<Typography variant="label">Section</Typography>);
+    expect(screen.getByText('Section').tagName).toBe('SPAN');
+  });
+
+  it('overrides the rendered tag via `as` while keeping the variant class', () => {
+    render(
+      <Typography variant="h1" as="div">
+        Title
+      </Typography>,
+    );
+    const el = screen.getByText('Title');
+    expect(el.tagName).toBe('DIV');
+    expect(el.className).toContain('h1');
+  });
+});

package/src/index.ts

@@ -41,7 +41,7 @@ export { Sheet } from './components/Sheet/Sheet';
 export type { SheetProps } from './components/Sheet/Sheet';
 export { ConfirmDialog } from './components/ConfirmDialog/ConfirmDialog';
 export type { ConfirmDialogProps } from './components/ConfirmDialog/ConfirmDialog';
-export { Menu } from './components/Menu/Menu';
+export { Menu, MenuEntries } from './components/Menu/Menu';
 export type {
   MenuProps,
   MenuItem,
@@ -69,6 +69,83 @@ export { Tooltip } from './components/Tooltip/Tooltip';
 export type { TooltipProps } from './components/Tooltip/Tooltip';
 export { Checkbox } from './components/Checkbox/Checkbox';
 export type { CheckboxProps } from './components/Checkbox/Checkbox';
+export { RadioGroup } from './components/RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioGroupItem } from './components/RadioGroup/RadioGroup';
+export { Slider } from './components/Slider/Slider';
+export type { SliderProps } from './components/Slider/Slider';
+export { Progress } from './components/Progress/Progress';
+export type { ProgressProps } from './components/Progress/Progress';
+export {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+} from './components/Table/Table';
+export type { TableProps } from './components/Table/Table';
+export { Alert } from './components/Alert/Alert';
+export type { AlertProps, AlertVariant } from './components/Alert/Alert';
+export { Breadcrumb } from './components/Breadcrumb/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb/Breadcrumb';
+export { Pagination } from './components/Pagination/Pagination';
+export type { PaginationProps } from './components/Pagination/Pagination';
+export { Kbd } from './components/Kbd/Kbd';
+export type { KbdProps } from './components/Kbd/Kbd';
+export { Collapsible } from './components/Collapsible/Collapsible';
+export type { CollapsibleProps } from './components/Collapsible/Collapsible';
+export { Accordion } from './components/Accordion/Accordion';
+export type { AccordionProps, AccordionItem } from './components/Accordion/Accordion';
+export { AspectRatio } from './components/AspectRatio/AspectRatio';
+export type { AspectRatioProps } from './components/AspectRatio/AspectRatio';
+export { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
+export type { ButtonGroupProps } from './components/ButtonGroup/ButtonGroup';
+export { Item } from './components/Item/Item';
+export type { ItemProps } from './components/Item/Item';
+export { Label } from './components/Label/Label';
+export type { LabelProps } from './components/Label/Label';
+export { ScrollArea } from './components/ScrollArea/ScrollArea';
+export type { ScrollAreaProps } from './components/ScrollArea/ScrollArea';
+export { Typography } from './components/Typography/Typography';
+export type { TypographyProps, TypographyVariant } from './components/Typography/Typography';
+export { Marker } from './components/Marker/Marker';
+export type { MarkerProps } from './components/Marker/Marker';
+export { Message } from './components/Message/Message';
+export type { MessageProps, MessageSender } from './components/Message/Message';
+export { MessageScroller } from './components/MessageScroller/MessageScroller';
+export type { MessageScrollerProps } from './components/MessageScroller/MessageScroller';
+export { HoverCard } from './components/HoverCard/HoverCard';
+export type { HoverCardProps } from './components/HoverCard/HoverCard';
+export { ContextMenu } from './components/ContextMenu/ContextMenu';
+export type { ContextMenuProps } from './components/ContextMenu/ContextMenu';
+export { NavigationMenu } from './components/NavigationMenu/NavigationMenu';
+export type {
+  NavigationMenuProps,
+  NavigationMenuItem,
+} from './components/NavigationMenu/NavigationMenu';
+export { Menubar } from './components/Menubar/Menubar';
+export type { MenubarProps, MenubarMenu } from './components/Menubar/Menubar';
+export { Command } from './components/Command/Command';
+export type { CommandProps, CommandItem } from './components/Command/Command';
+export {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './components/Resizable/Resizable';
+export type {
+  ResizablePanelGroupProps,
+  ResizablePanelProps,
+  ResizableHandleProps,
+  ResizableDirection,
+} from './components/Resizable/Resizable';
+export { DataTable } from './components/DataTable/DataTable';
+export type {
+  DataTableProps,
+  DataTableColumn,
+  SortDirection,
+} from './components/DataTable/DataTable';
+export { Combobox } from './components/Combobox/Combobox';
+export type { ComboboxProps, ComboboxOption } from './components/Combobox/Combobox';
 export { DragHandleRow } from './components/DragHandleRow/DragHandleRow';
 export type { DragHandleRowProps } from './components/DragHandleRow/DragHandleRow';
 export { FileDropzone } from './components/FileDropzone/FileDropzone';
@@ -88,6 +165,20 @@ export { QuantityStepper } from './components/QuantityStepper/QuantityStepper';
 export type { QuantityStepperProps } from './components/QuantityStepper/QuantityStepper';
 export { CheckableListRow } from './components/CheckableListRow/CheckableListRow';
 export type { CheckableListRowProps } from './components/CheckableListRow/CheckableListRow';
+export { CurrencyInput } from './components/CurrencyInput/CurrencyInput';
+export type { CurrencyInputProps } from './components/CurrencyInput/CurrencyInput';
+export { BalanceChip } from './components/BalanceChip/BalanceChip';
+export type { BalanceChipProps } from './components/BalanceChip/BalanceChip';
+export { SplitMethodSelector } from './components/SplitMethodSelector/SplitMethodSelector';
+export type {
+  SplitMethodSelectorProps,
+  SplitMethod,
+} from './components/SplitMethodSelector/SplitMethodSelector';
+export { MemberMultiSelect } from './components/MemberMultiSelect/MemberMultiSelect';
+export type {
+  MemberMultiSelectProps,
+  MemberMultiSelectOption,
+} from './components/MemberMultiSelect/MemberMultiSelect';
 export {
   useLongPress,
   useDoubleTapHandler,