// @bun
var r=Object.defineProperty;var n=(a)=>a;function c(a,o){this[a]=n.bind(null,o)}var u=(a,o)=>{for(var l in o)r(a,l,{get:o[l],enumerable:!0,configurable:!0,set:c.bind(o,l)})};var h=(a,o)=>()=>(a&&(o=a(a=0)),o);import{CodeBlock as d,InstallCommand as s}from"@contractspec/lib.design-system";import i from"@contractspec/lib.ui-link";import{ChevronRight as m}from"lucide-react";import{jsx as e,jsxs as t}from"react/jsx-runtime";var p=`import { DataTable } from '@contractspec/lib.ui-kit/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 NativeAccountGrid() {
  const columns = useShowcaseColumns();

  const controller = useContractTable({
    data: SHOWCASE_ROWS,
    columns,
    selectionMode: 'single',
    initialState: {
      sorting: [{ id: 'arr', 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="Native primitive"
          primaryColumnId="account"
          toggleColumnId="notes"
          pinColumnId="owner"
          sortColumnIds={['arr', 'renewalDate']}
        />
      }
      loading={false}
      footer={\`Rows \${controller.rows.length}\`}
    />
  );
}`;function N(){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"}),t("p",{className:"text-muted-foreground",children:["Universal UI components for React Native and Web, built on top of",e("code",{children:"nativewind"})," and ",e("code",{children:"@rn-primitives"}),"."]})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(s,{package:"@contractspec/lib.ui-kit"})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Key Features"}),t("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[t("li",{children:[e("strong",{children:"Universal"}),": Components render natively on iOS/Android and as standard HTML on web"]}),t("li",{children:[e("strong",{children:"Styled with NativeWind"}),": Uses Tailwind CSS classes for styling"]}),t("li",{children:[e("strong",{children:"Accessible"}),": Leverages ",e("code",{children:"@rn-primitives"})," ","(Radix UI for Native)"]}),t("li",{children:[e("strong",{children:"Atomic Design"}),": Exports atoms, molecules, and organisms"]})]})]}),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:["The canonical"," ",e(i,{href:"/docs/examples/data-grid-showcase",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Data Grid Showcase"})," ","uses ",e("code",{children:"@contractspec/lib.ui-kit/ui/data-table"})," as the native-first primitive lane. It shares the same controller model as the web renderer while keeping the React Native / Expo surface explicit."]}),e(d,{language:"tsx",code:p})]}),t("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Core Components"}),t("div",{className:"grid gap-4 md:grid-cols-3",children:[t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Form Controls"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Button"}),e("li",{children:"Input"}),e("li",{children:"Checkbox"}),e("li",{children:"Switch"}),e("li",{children:"Select"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Layout"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Card"}),e("li",{children:"Stack"}),e("li",{children:"Separator"}),e("li",{children:"Sheet"})]})]}),t("div",{className:"card-subtle p-4",children:[e("h3",{className:"mb-2 font-semibold",children:"Feedback"}),t("ul",{className:"space-y-1 text-muted-foreground text-sm",children:[e("li",{children:"Alert"}),e("li",{children:"Skeleton"}),e("li",{children:"Progress"}),e("li",{children:"Tooltip"})]})]})]})]}),t("div",{className:"card-subtle space-y-3 p-6",children:[e("h2",{className:"font-bold text-2xl",children:"Where this layer fits"}),t("p",{className:"text-muted-foreground",children:["Read"," ",e(i,{href:"/docs/libraries/cross-platform-ui",className:"text-[color:var(--rust)] underline underline-offset-4",children:"Cross-platform UI"})," ","for the full React and React Native compatibility model around this native-first primitive lane."]})]}),t("div",{className:"flex items-center gap-4 pt-4",children:[e(i,{href:"/docs/libraries/schema",className:"btn-ghost",children:"Previous: Schema"}),t(i,{href:"/docs/libraries/ui-kit-web",className:"btn-primary",children:["Next: UI Kit Web ",e(m,{size:16})]})]})]})}export{N as LibrariesUIKitPage};
