@sovereignfs/ui 0.45.0 → 0.83.1

package/src/components/HeaderFooterLayout/HeaderFooterLayout.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HeaderFooterLayout } from './HeaderFooterLayout';
+
+function Bar({ label }: { label: string }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        fontFamily: 'var(--sv-font-family)',
+        fontSize: 'var(--sv-font-size-sm)',
+        fontWeight: 600,
+        color: 'var(--sv-color-text-primary)',
+        background: 'var(--sv-color-surface-raised)',
+        borderBlock: '1px solid var(--sv-color-border)',
+      }}
+    >
+      {label}
+    </div>
+  );
+}
+
+function ScrollableMain() {
+  return (
+    <div style={{ padding: 'var(--sv-space-4)', fontFamily: 'var(--sv-font-family)' }}>
+      {Array.from({ length: 30 }, (_, index) => (
+        <p key={index} style={{ color: 'var(--sv-color-text-primary)' }}>
+          Row {index + 1} — the main region scrolls independently; header and footer stay put.
+        </p>
+      ))}
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Components/HeaderFooterLayout',
+  component: HeaderFooterLayout,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Header + main + optional footer, both fixed-height and independently optional, with main always claiming the remaining height. The vertical counterpart to ThreeColumnLayout — a plain flex column, no color opinions, no responsive behavior of its own.',
+      },
+    },
+  },
+  args: {
+    children: <ScrollableMain />,
+  },
+} satisfies Meta<typeof HeaderFooterLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The canonical usage — header + main + footer, all three present. */
+export const Default: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout header={<Bar label="Header" />} footer={<Bar label="Footer" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const HeaderOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout header={<Bar label="Header" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const FooterOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout footer={<Bar label="Footer" />}>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const MainOnly: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout>
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};
+
+export const CustomHeights: Story = {
+  render: () => (
+    <div style={{ height: '480px' }}>
+      <HeaderFooterLayout
+        header={<Bar label="Header (100px)" />}
+        footer={<Bar label="Footer (48px)" />}
+        headerHeight={100}
+        footerHeight={48}
+      >
+        <ScrollableMain />
+      </HeaderFooterLayout>
+    </div>
+  ),
+};

package/src/components/HeaderFooterLayout/HeaderFooterLayout.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import styles from './HeaderFooterLayout.module.css';
+
+export interface HeaderFooterLayoutProps {
+  /** Main content — required, always fills whatever height header/footer don't claim. */
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  /** px. Fixed height of the header, when present. Default 60 (matches
+   *  MobileHeader/--sv-shell-header-height's own default). */
+  headerHeight?: number;
+  /** px. Fixed height of the footer, when present. Default 60 (matches
+   *  MobileFooter/--sv-shell-footer-height's own default). */
+  footerHeight?: number;
+  className?: string;
+}
+
+/**
+ * HeaderFooterLayout — header + main + optional footer, both fixed-height
+ * and independently optional, with main always claiming the remaining
+ * height. The vertical counterpart to ThreeColumnLayout: same purely
+ * structural approach (no color/background opinions, no awareness of what's
+ * inside each slot, no responsive behavior of its own — a plain flex
+ * column), just rotated. "Footer always at the bottom" falls out of flex
+ * layout alone; there is no position: fixed or safe-area handling here, so
+ * a caller composing this with the platform shell's own chrome still owns
+ * that separately.
+ */
+export function HeaderFooterLayout({
+  children,
+  header,
+  footer,
+  headerHeight = 60,
+  footerHeight = 60,
+  className,
+}: HeaderFooterLayoutProps) {
+  return (
+    <div className={[styles.shell, className].filter(Boolean).join(' ')}>
+      {header && (
+        <div className={styles.header} style={{ height: headerHeight }}>
+          {header}
+        </div>
+      )}
+      <div className={styles.main}>{children}</div>
+      {footer && (
+        <div className={styles.footer} style={{ height: footerHeight }}>
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { HeaderFooterLayout } from '../HeaderFooterLayout';
+
+afterEach(cleanup);
+
+describe('HeaderFooterLayout', () => {
+  it('renders main content with no header/footer by default', () => {
+    render(<HeaderFooterLayout>Main content</HeaderFooterLayout>);
+
+    expect(screen.getByText('Main content')).toBeDefined();
+    expect(screen.queryByText('Header')).toBeNull();
+    expect(screen.queryByText('Footer')).toBeNull();
+  });
+
+  it('renders header and footer when given', () => {
+    render(
+      <HeaderFooterLayout header={<span>Header</span>} footer={<span>Footer</span>}>
+        Main content
+      </HeaderFooterLayout>,
+    );
+
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.getByText('Main content')).toBeDefined();
+    expect(screen.getByText('Footer')).toBeDefined();
+  });
+
+  it('renders header without a footer', () => {
+    render(<HeaderFooterLayout header={<span>Header</span>}>Main content</HeaderFooterLayout>);
+
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.queryByText('Footer')).toBeNull();
+  });
+
+  it('renders footer without a header', () => {
+    render(<HeaderFooterLayout footer={<span>Footer</span>}>Main content</HeaderFooterLayout>);
+
+    expect(screen.queryByText('Header')).toBeNull();
+    expect(screen.getByText('Footer')).toBeDefined();
+  });
+
+  it('applies headerHeight and footerHeight as inline heights', () => {
+    render(
+      <HeaderFooterLayout
+        header={<span>Header</span>}
+        footer={<span>Footer</span>}
+        headerHeight={48}
+        footerHeight={72}
+      >
+        Main content
+      </HeaderFooterLayout>,
+    );
+
+    expect(screen.getByText('Header').parentElement?.style.height).toBe('48px');
+    expect(screen.getByText('Footer').parentElement?.style.height).toBe('72px');
+  });
+});

package/src/components/Icon/icons/arrow-left-right.tsx

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function ArrowLeftRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M8 3 4 7l4 4" />
+      <path d="M4 7h16" />
+      <path d="m16 21 4-4-4-4" />
+      <path d="M20 17H4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/bold.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function BoldIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/calendar.tsx

@@ -14,10 +14,10 @@ export function CalendarIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="M8 2v4" />
-      <path d="M16 2v4" />
-      <rect width="18" height="18" x="3" y="4" rx="2" />
-      <path d="M3 10h18" />
+      <path d="M8 2v3" />
+      <path d="M16 2v3" />
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M3 9h18" />
     </svg>
   );
 }

package/src/components/Icon/icons/carrot.tsx

@@ -14,9 +14,9 @@ export function CarrotIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinejoin="round"
       {...props}
     >
-      <path d="M2.27 21.7s9.87-3.5 12.73-6.36a4.5 4.5 0 0 0-6.36-6.37C5.77 11.84 2.27 21.7 2.27 21.7zM8.64 14l-2.05-2.04M15.34 15l-2.46-2.46" />
-      <path d="M22 9s-1.33-2-3.5-2C16.86 7 15 9 15 9s1.33 2 3.5 2S22 9 22 9z" />
-      <path d="M15 2s-2 1.33-2 3.5S15 9 15 9s2-1.84 2-3.5C17 3.33 15 2 15 2z" />
+      <path d="M15 16a1 1 0 0 0-7-7q-4 4-5.987 12.385a.5.5 0 0 0 .602.602Q11 20 15 16l-3-3" />
+      <path d="M15 9q4 4 7 0-3-4-7 0 4-4 0-7-4 3 0 7" />
+      <path d="m8 15-2.58-2.58" />
     </svg>
   );
 }

package/src/components/Icon/icons/circle-chevron-left.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CircleChevronLeftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m14 16-4-4 4-4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/code.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m16 18 6-6-6-6" />
+      <path d="m8 6-6 6 6 6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/copy.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CopyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/credit-card.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CreditCardIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="20" height="14" x="2" y="5" rx="2" />
+      <line x1="2" x2="22" y1="10" y2="10" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/database.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function DatabaseIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <ellipse cx="12" cy="5" rx="9" ry="3" />
+      <path d="M3 5V19A9 3 0 0 0 21 19V5" />
+      <path d="M3 12A9 3 0 0 0 21 12" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/download.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function DownloadIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 15V3" />
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <path d="m7 10 5 5 5-5" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/file-text.tsx

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function FileTextIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+      <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/folder-closed.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function FolderClosedIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+      <path d="M2 10h20" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/folder-open.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function FolderOpenIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/folder.tsx

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function FolderIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/folders.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function FoldersIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M20 5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2.5a1.5 1.5 0 0 1 1.2.6l.6.8a1.5 1.5 0 0 0 1.2.6z" />
+      <path d="M3 8.268a2 2 0 0 0-1 1.738V19a2 2 0 0 0 2 2h11a2 2 0 0 0 1.732-1" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/hat-glasses.tsx

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function HatGlassesIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M14 18a2 2 0 0 0-4 0" />
+      <path d="m19 11-2.11-6.657a2 2 0 0 0-2.752-1.148l-1.276.61A2 2 0 0 1 12 4H8.5a2 2 0 0 0-1.925 1.456L5 11" />
+      <path d="M2 11h20" />
+      <circle cx="17" cy="18" r="3" />
+      <circle cx="7" cy="18" r="3" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/history.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function HistoryIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+      <path d="M3 3v5h5" />
+      <path d="M12 7v5l4 2" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/inbox.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function InboxIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+    </svg>
+  );
+}