import{CodeBlock as i,InstallCommand as o}from"@contractspec/lib.design-system";import a from"@contractspec/lib.ui-link";import{ChevronRight as n}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var r=`import { DataTable } from '@contractspec/lib.ui-kit-web/ui/data-table';
import { useContractTable } from '@contractspec/lib.presentation-runtime-react';

import { SHOWCASE_ROWS } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.data';
import { useShowcaseColumns } from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.columns';
import {
  ExpandedRowContent,
  ShowcaseToolbar,
} from '@contractspec/example.data-grid-showcase/ui/data-grid-showcase.parts';

export function WebAccountGrid() {
  const columns = useShowcaseColumns();

  const controller = useContractTable({
    data: SHOWCASE_ROWS,
    columns,
    selectionMode: 'single',
    initialState: {
      sorting: [{ id: 'lastActivityAt', desc: true }],
      pagination: { pageIndex: 0, pageSize: 4 },
      columnVisibility: { notes: false },
      columnPinning: { left: ['account'], right: [] },
    },
    renderExpandedContent: (row) => <ExpandedRowContent row={row} />,
    getCanExpand: () => true,
  });

  return (
    <DataTable
      controller={controller}
      toolbar={
        <ShowcaseToolbar
          controller={controller}
          label="Web primitive"
          primaryColumnId="account"
          toggleColumnId="notes"
          pinColumnId="owner"
          sortColumnIds={['arr', 'renewalDate']}
        />
      }
      loading={false}
      emptyState={<div>No rows available.</div>}
      footer={\`Rows \${controller.totalItems}\`}
    />
  );
}`;function d(){return t("div",{className:"space-y-8",children:[t("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.ui-kit-web"}),e("p",{className:"text-muted-foreground",children:"Web-first React and Next primitives for ContractSpec. The canonical data-table example uses this package to render the raw browser table layer directly, without the design-system shell on top."})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(o,{package:"@contractspec/lib.ui-kit-web"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Data table example"}),t("p",{className:"text-muted-foreground",children:["This is the raw browser lane from the canonical"," ",e(a,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"}),". It demonstrates the primitive renderer with sorting, pagination, single selection, column visibility, column resizing, left/right pinning, row expansion, loading, and empty-state slots."]}),e(i,{language:"tsx",filename:"web-account-grid.tsx",code:r})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"What this layer owns"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[e("li",{children:"The raw table renderer and browser interaction model."}),e("li",{children:"Pagination, column visibility menus, pin menus, resize handles, and empty/loading states."}),e("li",{children:"Accessibility helpers and other web-specific primitives that stay outside the native-first package."})]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(a,{href:"/docs/libraries/ui-kit",className:"btn-ghost",children:"Previous: UI Kit"}),t(a,{href:"/docs/libraries/design-system",className:"btn-primary",children:["Next: Design System ",e(n,{size:16})]})]})]})}export{d as LibrariesUIKitWebPage};
