@snow-labs/brutal-ui 0.1.0 → 0.2.0

package/dist/components/views/calendar-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/views/calendar-view.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"calendar-view.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { useState } from \"react\";\nimport { Button } from \"../ui/button\";\n\ninterface CalendarEvent {\n  id: string;\n  title: string;\n  date: Date | string;\n  color?: string;\n}\n\ninterface CalendarViewProps {\n  events?: CalendarEvent[];\n  onEventClick?: (event: CalendarEvent) => void;\n  onDateClick?: (date: Date) => void;\n  className?: string;\n}\n\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\nfunction getDaysInMonth(year: number, month: number) {\n  return new Date(year, month + 1, 0).getDate();\n}\n\nfunction getFirstDayOfMonth(year: number, month: number) {\n  return new Date(year, month, 1).getDay();\n}\n\nexport function CalendarView({\n  events = [],\n  onEventClick,\n  onDateClick,\n  className,\n}: CalendarViewProps) {\n  const [currentDate, setCurrentDate] = useState(new Date());\n  const year = currentDate.getFullYear();\n  const month = currentDate.getMonth();\n  const daysInMonth = getDaysInMonth(year, month);\n  const firstDay = getFirstDayOfMonth(year, month);\n  const monthName = currentDate.toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    year: \"numeric\",\n  });\n\n  const cells: (number | null)[] = [];\n  for (let i = 0; i < firstDay; i++) cells.push(null);\n  for (let d = 1; d <= daysInMonth; d++) cells.push(d);\n\n  const getEventsForDay = (day: number) =>\n    events.filter((e) => {\n      const d = typeof e.date === \"string\" ? new Date(e.date) : e.date;\n      return (\n        d.getFullYear() === year &&\n        d.getMonth() === month &&\n        d.getDate() === day\n      );\n    });\n\n  const today = new Date();\n  const isToday = (day: number) =>\n    day === today.getDate() &&\n    month === today.getMonth() &&\n    year === today.getFullYear();\n\n  return (\n    <div className={cn(\"flex flex-col gap-4\", className)}>\n      <div className=\"flex items-center justify-between\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setCurrentDate(new Date(year, month - 1))}\n        >\n          ←\n        </Button>\n        <h3 className=\"brutal-h4\">{monthName}</h3>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={() => setCurrentDate(new Date(year, month + 1))}\n        >\n          →\n        </Button>\n      </div>\n      <div className=\"grid grid-cols-7 border-brutal border-foreground\">\n        {DAYS.map((day) => (\n          <div\n            key={day}\n            className=\"brutal-label border-b-brutal border-foreground bg-secondary px-2 py-2 text-center text-xs\"\n          >\n            {day}\n          </div>\n        ))}\n        {cells.map((day, i) => {\n          const dayEvents = day ? getEventsForDay(day) : [];\n          return (\n            <div\n              key={i}\n              className={cn(\n                \"min-h-[80px] border-b border-r border-foreground/10 p-1\",\n                day && onDateClick && \"cursor-pointer hover:bg-secondary/50\",\n                isToday(day ?? 0) && \"bg-brand-muted\"\n              )}\n              onClick={() => day && onDateClick?.(new Date(year, month, day))}\n            >\n              {day && (\n                <>\n                  <span\n                    className={cn(\n                      \"text-xs font-bold\",\n                      isToday(day) && \"text-brand\"\n                    )}\n                  >\n                    {day}\n                  </span>\n                  <div className=\"mt-1 flex flex-col gap-0.5\">\n                    {dayEvents.slice(0, 3).map((event) => (\n                      <div\n                        key={event.id}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onEventClick?.(event);\n                        }}\n                        className=\"cursor-pointer truncate border border-foreground/20 bg-brand-muted px-1 text-[10px] font-medium hover:bg-brand\"\n                        style={\n                          event.color\n                            ? { borderLeftColor: event.color, borderLeftWidth: 2 }\n                            : undefined\n                        }\n                      >\n                        {event.title}\n                      </div>\n                    ))}\n                    {dayEvents.length > 3 && (\n                      <span className=\"text-[10px] text-muted-foreground\">\n                        +{dayEvents.length - 3}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/views/data-table.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ColumnDef } from '@tanstack/react-table';
+
+interface DataTableProps<TData> {
+    columns: ColumnDef<TData, any>[];
+    data: TData[];
+    searchColumn?: string;
+    searchPlaceholder?: string;
+    pageSize?: number;
+    emptyMessage?: string;
+    className?: string;
+}
+declare function DataTable<TData>({ columns, data, searchColumn, searchPlaceholder, pageSize, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+export { DataTable };

package/dist/components/views/data-table.js

@@ -0,0 +1,204 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useState } from 'react';
+import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Input as Input$1 } from '@base-ui/react/input';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        // Primary: Black bg, white text, offset shadow
+        default: "border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // CTA: Mint green bg — the Bannerbear signature
+        cta: "border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Brand: Dynamic brand color bg
+        brand: "border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Outline: White bg, black border, offset shadow
+        outline: "border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Secondary: Light bg, border, smaller shadow
+        secondary: "border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none",
+        // Ghost: No border/shadow, subtle hover
+        ghost: "hover:bg-secondary hover:text-foreground",
+        // Link: Text only
+        link: "text-foreground underline-offset-4 hover:underline",
+        // Destructive
+        destructive: "border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Nav: Thin border, no shadow (for nav Sign In buttons)
+        nav: "border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background"
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        default: "h-10 gap-2 px-5 text-sm",
+        lg: "h-12 gap-2 px-7 text-base",
+        xl: "h-14 gap-2.5 px-9 text-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DataTable({
+  columns,
+  data,
+  searchColumn,
+  searchPlaceholder = "Search...",
+  pageSize = 10,
+  emptyMessage = "No data",
+  className
+}) {
+  const [sorting, setSorting] = useState([]);
+  const [globalFilter, setGlobalFilter] = useState("");
+  const table = useReactTable({
+    data,
+    columns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: { pagination: { pageSize } }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
+    searchColumn !== void 0 && /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: searchPlaceholder,
+        value: globalFilter,
+        onChange: (e) => setGlobalFilter(e.target.value),
+        className: "max-w-sm"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "overflow-auto border-brutal border-foreground shadow-brutal", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: "border-b-brutal border-foreground bg-secondary",
+          children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxs(
+            "th",
+            {
+              className: cn(
+                "brutal-label px-4 py-3 text-left",
+                header.column.getCanSort() && "cursor-pointer select-none"
+              ),
+              onClick: header.column.getToggleSortingHandler(),
+              children: [
+                flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                {
+                  asc: " \u2191",
+                  desc: " \u2193"
+                }[header.column.getIsSorted()] ?? ""
+              ]
+            },
+            header.id
+          ))
+        },
+        headerGroup.id
+      )) }),
+      /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "px-4 py-8 text-center text-muted-foreground",
+          children: emptyMessage
+        }
+      ) }) : table.getRowModel().rows.map((row, i) => /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: cn(
+            "border-b border-foreground/10 transition-colors hover:bg-brand-muted",
+            i % 2 === 1 && "bg-secondary/30"
+          ),
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        table.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        table.getPageCount()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { DataTable };
+//# sourceMappingURL=data-table.js.map
+//# sourceMappingURL=data-table.js.map

package/dist/components/views/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/ui/input.tsx","../../../src/components/views/data-table.tsx"],"names":["ButtonPrimitive","jsx","InputPrimitive"],"mappings":"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","file":"data-table.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import * as React from \"react\";\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Input };\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { useState } from \"react\";\nimport {\n  useReactTable,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  flexRender,\n  type ColumnDef,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport { Button } from \"../ui/button\";\nimport { Input } from \"../ui/input\";\n\ninterface DataTableProps<TData> {\n  columns: ColumnDef<TData, any>[];\n  data: TData[];\n  searchColumn?: string;\n  searchPlaceholder?: string;\n  pageSize?: number;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport function DataTable<TData>({\n  columns,\n  data,\n  searchColumn,\n  searchPlaceholder = \"Search...\",\n  pageSize = 10,\n  emptyMessage = \"No data\",\n  className,\n}: DataTableProps<TData>) {\n  const [sorting, setSorting] = useState<SortingState>([]);\n  const [globalFilter, setGlobalFilter] = useState(\"\");\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: { pagination: { pageSize } },\n  });\n\n  return (\n    <div className={cn(\"flex flex-col gap-4\", className)}>\n      {searchColumn !== undefined && (\n        <Input\n          placeholder={searchPlaceholder}\n          value={globalFilter}\n          onChange={(e) => setGlobalFilter(e.target.value)}\n          className=\"max-w-sm\"\n        />\n      )}\n\n      <div className=\"overflow-auto border-brutal border-foreground shadow-brutal\">\n        <table className=\"w-full text-sm\">\n          <thead>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <tr\n                key={headerGroup.id}\n                className=\"border-b-brutal border-foreground bg-secondary\"\n              >\n                {headerGroup.headers.map((header) => (\n                  <th\n                    key={header.id}\n                    className={cn(\n                      \"brutal-label px-4 py-3 text-left\",\n                      header.column.getCanSort() &&\n                        \"cursor-pointer select-none\"\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                  >\n                    {flexRender(\n                      header.column.columnDef.header,\n                      header.getContext()\n                    )}\n                    {{\n                      asc: \" ↑\",\n                      desc: \" ↓\",\n                    }[header.column.getIsSorted() as string] ?? \"\"}\n                  </th>\n                ))}\n              </tr>\n            ))}\n          </thead>\n          <tbody>\n            {table.getRowModel().rows.length === 0 ? (\n              <tr>\n                <td\n                  colSpan={columns.length}\n                  className=\"px-4 py-8 text-center text-muted-foreground\"\n                >\n                  {emptyMessage}\n                </td>\n              </tr>\n            ) : (\n              table.getRowModel().rows.map((row, i) => (\n                <tr\n                  key={row.id}\n                  className={cn(\n                    \"border-b border-foreground/10 transition-colors hover:bg-brand-muted\",\n                    i % 2 === 1 && \"bg-secondary/30\"\n                  )}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <td key={cell.id} className=\"px-4 py-3\">\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </td>\n                  ))}\n                </tr>\n              ))\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      <div className=\"flex items-center justify-between\">\n        <p className=\"text-sm text-muted-foreground\">\n          Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n          {table.getPageCount()}\n        </p>\n        <div className=\"flex gap-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    </div>\n  );\n}\n"]}

package/dist/components/views/grid-view.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GridViewProps {
+    children: React.ReactNode;
+    columns?: number;
+    gap?: number;
+    className?: string;
+}
+declare function GridView({ children, columns, gap, className, }: GridViewProps): react_jsx_runtime.JSX.Element;
+
+export { GridView };

package/dist/components/views/grid-view.js

@@ -0,0 +1,31 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function GridView({
+  children,
+  columns = 3,
+  gap = 6,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("grid", className),
+      style: {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${Math.floor(100 / columns) - 2}%, 1fr))`,
+        gap: `${gap * 4}px`
+      },
+      children
+    }
+  );
+}
+
+export { GridView };
+//# sourceMappingURL=grid-view.js.map
+//# sourceMappingURL=grid-view.js.map

package/dist/components/views/grid-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/views/grid-view.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACIO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,GAAA,GAAM,CAAA;AAAA,EACN;AACF,CAAA,EAAkB;AAChB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,MAAA,EAAQ,SAAS,CAAA;AAAA,MAC/B,KAAA,EAAO;AAAA,QACL,qBAAqB,CAAA,yBAAA,EAA4B,IAAA,CAAK,MAAM,GAAA,GAAM,OAAO,IAAI,CAAC,CAAA,QAAA,CAAA;AAAA,QAC9E,GAAA,EAAK,CAAA,EAAG,GAAA,GAAM,CAAC,CAAA,EAAA;AAAA,OACjB;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"grid-view.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\ninterface GridViewProps {\n  children: React.ReactNode;\n  columns?: number;\n  gap?: number;\n  className?: string;\n}\n\nexport function GridView({\n  children,\n  columns = 3,\n  gap = 6,\n  className,\n}: GridViewProps) {\n  return (\n    <div\n      className={cn(\"grid\", className)}\n      style={{\n        gridTemplateColumns: `repeat(auto-fill, minmax(${Math.floor(100 / columns) - 2}%, 1fr))`,\n        gap: `${gap * 4}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/components/views/index.d.ts

@@ -0,0 +1,7 @@
+export { DataTable } from './data-table.js';
+export { KanbanBoard } from './kanban-board.js';
+export { GridView } from './grid-view.js';
+export { CalendarView } from './calendar-view.js';
+export { ListView } from './list-view.js';
+import 'react/jsx-runtime';
+import '@tanstack/react-table';