@opencosmos/ui 1.3.1

package/dist/tables.mjs

@@ -0,0 +1,218 @@
+"use client";
+
+// src/components/data-display/DataTable.tsx
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/data-display/Table.tsx
+import { jsx } from "react/jsx-runtime";
+var Table = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm", className),
+    ...props
+  }
+) });
+var TableHeader = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props });
+var TableBody = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+);
+var TableRow = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+);
+var TableHead = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+);
+var TableCell = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+);
+
+// src/components/actions/Button.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm",
+        primary: "bg-primary text-primary-foreground shadow-sm",
+        // Alias for default
+        destructive: "bg-destructive text-destructive-foreground shadow-xs",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary",
+        secondary: "bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground",
+        ghost: "hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  children,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx2("span", { className: "relative z-20 flex items-center justify-center gap-2", children })
+    }
+  );
+};
+
+// src/components/data-display/DataTable.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx3("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx3(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx3(TableRow, { children: headerGroup.headers.map((header) => {
+        return /* @__PURE__ */ jsx3(TableHead, { children: header.isPlaceholder ? null : flexRender(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id);
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx3(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx3(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx3(TableCell, { children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx3(TableRow, { children: /* @__PURE__ */ jsx3(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center",
+          children: "No results."
+        }
+      ) }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end space-x-2", children: [
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => table.previousPage(),
+          disabled: !table.getCanPreviousPage(),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: () => table.nextPage(),
+          disabled: !table.getCanNextPage(),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=tables.mjs.map

package/dist/tables.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataTable.tsx","../src/lib/utils.ts","../src/components/data-display/Table.tsx","../src/components/actions/Button.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"./Table\"\nimport { Button } from \"../actions/Button\"\n\ninterface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n}: DataTableProps<TData, TValue>) {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    onSortingChange: setSorting,\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      sorting,\n    },\n  })\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => table.previousPage()}\n          disabled={!table.getCanPreviousPage()}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => table.nextPage()}\n          disabled={!table.getCanNextPage()}\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  )\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst Table = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableElement> & {\n    ref?: React.Ref<HTMLTableElement>;\n  }\n) => (<div className=\"relative w-full overflow-auto\">\n  <table\n    ref={ref}\n    className={cn(\"w-full caption-bottom text-sm\", className)}\n    {...props}\n  />\n</div>)\n\nconst TableHeader = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableSectionElement> & {\n    ref?: React.Ref<HTMLTableSectionElement>;\n  }\n) => (<thead ref={ref} className={cn(\"[&_tr]:border-b\", className)} {...props} />)\n\nconst TableBody = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableSectionElement> & {\n    ref?: React.Ref<HTMLTableSectionElement>;\n  }\n) => (<tbody\n  ref={ref}\n  className={cn(\"[&_tr:last-child]:border-0\", className)}\n  {...props}\n/>)\n\nconst TableFooter = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableSectionElement> & {\n    ref?: React.Ref<HTMLTableSectionElement>;\n  }\n) => (<tfoot\n  ref={ref}\n  className={cn(\n    \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n    className\n  )}\n  {...props}\n/>)\n\nconst TableRow = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableRowElement> & {\n    ref?: React.Ref<HTMLTableRowElement>;\n  }\n) => (<tr\n  ref={ref}\n  className={cn(\n    \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n    className\n  )}\n  {...props}\n/>)\n\nconst TableHead = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.ThHTMLAttributes<HTMLTableCellElement> & {\n    ref?: React.Ref<HTMLTableCellElement>;\n  }\n) => (<th\n  ref={ref}\n  className={cn(\n    \"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n    className\n  )}\n  {...props}\n/>)\n\nconst TableCell = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.TdHTMLAttributes<HTMLTableCellElement> & {\n    ref?: React.Ref<HTMLTableCellElement>;\n  }\n) => (<td\n  ref={ref}\n  className={cn(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n  {...props}\n/>)\n\nconst TableCaption = (\n  {\n    ref,\n    className,\n    ...props\n  }: React.HTMLAttributes<HTMLTableCaptionElement> & {\n    ref?: React.Ref<HTMLTableCaptionElement>;\n  }\n) => (<caption\n  ref={ref}\n  className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n  {...props}\n/>)\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Slot } from '@radix-ui/react-slot';\n\nconst buttonVariants = cva(\n    'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 sage-interactive [&_svg]:transition-transform [&_svg]:duration-300 hover:[&_svg]:translate-x-1',\n    {\n        variants: {\n            variant: {\n                default: 'bg-primary text-primary-foreground shadow-sm',\n                primary: 'bg-primary text-primary-foreground shadow-sm', // Alias for default\n                destructive: 'bg-destructive text-destructive-foreground shadow-xs',\n                outline: 'border border-input bg-transparent shadow-xs hover:bg-primary hover:text-primary-foreground hover:border-primary',\n                secondary: 'bg-black/5 dark:bg-white/10 backdrop-blur-md border border-black/5 dark:border-white/10 text-secondary-foreground shadow-xs hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary dark:hover:text-primary-foreground',\n                ghost: 'hover:text-accent-foreground',\n                link: 'text-primary underline-offset-4 hover:underline',\n            },\n            size: {\n                default: 'h-9 px-4 py-2',\n                sm: 'h-8 rounded-md px-3 text-xs',\n                lg: 'h-10 rounded-md px-8',\n                icon: 'h-9 w-9',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    }\n);\n\nexport interface ButtonProps\n    extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n    asChild?: boolean;\n}\n\nconst Button = (\n    {\n        ref,\n        className,\n        variant,\n        size,\n        asChild = false,\n        children,\n        ...props\n    }: ButtonProps & {\n        ref?: React.Ref<HTMLButtonElement>;\n    }\n) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n        <Comp\n            className={cn(buttonVariants({ variant, size, className }))}\n            ref={ref}\n            {...props}\n        >\n            {asChild ? (\n                children\n            ) : (\n                <span className=\"relative z-20 flex items-center justify-center gap-2\">\n                    {children}\n                </span>\n            )}\n        </Comp>\n    )\n}\n\nexport { Button, buttonVariants };\n"],"mappings":"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","names":["jsx","jsx"]}