shadcn-ui-react 0.6.0 → 0.6.2

package/README.md

@@ -18,6 +18,16 @@ pnpm add shadcn-ui-react
 
 ---
 
+### Tailwind IntelliSense (VS Code)
+
+To enable Tailwind CSS IntelliSense to detect classes within `cn(...)` and other utilities:
+
+```bash
+npx shadcn-ui-react init-vscode
+```
+
+---
+
 ## 🚀 Getting Started
 
 ### 1. Import Global Styles

package/bin/shadcn-ui-react.mjs

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const cmd = process.argv[2];
+
+const uniq = (arr) => {
+  const seen = new Set();
+  const out = [];
+  for (const item of arr) {
+    const key = JSON.stringify(item);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(item);
+  }
+  return out;
+};
+
+function ensureDir(dir) {
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+}
+
+function readJson(p) {
+  if (!fs.existsSync(p)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(p, "utf8"));
+  } catch (e) {
+    console.error(`❌ No pude leer JSON: ${p}`);
+    console.error(e?.message ?? e);
+    process.exit(1);
+  }
+}
+
+function writeJson(p, obj) {
+  fs.writeFileSync(p, JSON.stringify(obj, null, 2) + "\n", "utf8");
+}
+
+function initVscode() {
+  const tplPath = path.join(__dirname, "..", "templates", "vscode-settings.json");
+  const tpl = readJson(tplPath) ?? {};
+
+  const vscodeDir = path.join(process.cwd(), ".vscode");
+  const settingsPath = path.join(vscodeDir, "settings.json");
+
+  ensureDir(vscodeDir);
+
+  const current = readJson(settingsPath) ?? {};
+  const next = { ...current };
+
+  // classRegex (merge + dedupe)
+  const curRegex = current["tailwindCSS.experimental.classRegex"] ?? [];
+  const tplRegex = tpl["tailwindCSS.experimental.classRegex"] ?? [];
+  next["tailwindCSS.experimental.classRegex"] = uniq([
+    ...(Array.isArray(curRegex) ? curRegex : []),
+    ...(Array.isArray(tplRegex) ? tplRegex : [])
+  ]);
+
+  // includeLanguages (merge)
+  const curLang = current["tailwindCSS.includeLanguages"] ?? {};
+  const tplLang = tpl["tailwindCSS.includeLanguages"] ?? {};
+  next["tailwindCSS.includeLanguages"] = { ...(curLang || {}), ...(tplLang || {}) };
+
+  writeJson(settingsPath, next);
+  console.log("✅ Listo: actualizado .vscode/settings.json (Tailwind IntelliSense).");
+}
+
+function initExtensions() {
+  const vscodeDir = path.join(process.cwd(), ".vscode");
+  const extPath = path.join(vscodeDir, "extensions.json");
+  ensureDir(vscodeDir);
+
+  const current = readJson(extPath) ?? {};
+  const recs = Array.isArray(current.recommendations) ? current.recommendations : [];
+  const add = "bradlc.vscode-tailwindcss";
+
+  const next = {
+    ...current,
+    recommendations: Array.from(new Set([...recs, add]))
+  };
+
+  writeJson(extPath, next);
+  console.log("✅ Listo: actualizado .vscode/extensions.json (recomendación Tailwind CSS).");
+}
+
+switch (cmd) {
+  case "init-vscode":
+    initVscode();
+    initExtensions();
+    break;
+  default:
+    console.log(`Uso:
+  npx shadcn-ui-react init-vscode
+`);
+    process.exit(cmd ? 1 : 0);
+}

package/dist/index.cjs

@@ -8392,23 +8392,12 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-var import_react36 = __toESM(require("react"), 1);
+var import_react36 = require("react");
 var import_framer_motion2 = require("framer-motion");
 var import_react_icons18 = require("@radix-ui/react-icons");
 var import_react_table = require("@tanstack/react-table");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var TablePlain = import_react36.default.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    "table",
-    __spreadValues({
-      ref,
-      className: cn("w-full caption-bottom text-sm", className)
-    }, props)
-  );
-});
-TablePlain.displayName = "TablePlain";
 var ACCENT_COLOR = {
   primary: "var(--primary)",
   emerald: "#10b981",
@@ -8428,9 +8417,9 @@ var DATA_TABLE_TEMPLATES = {
   neo: {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-sm",
-      "bg-background/70 supports-[backdrop-filter]:bg-background/45 backdrop-blur",
+      "bg-background/70 supports-backdrop-filter:bg-background/45 backdrop-blur",
       "flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     table: cn("w-full text-sm"),
@@ -8459,14 +8448,14 @@ var DATA_TABLE_TEMPLATES = {
     td: "px-4 py-3 align-middle",
     footer: cn(
       "border-t",
-      "bg-background/80 supports-[backdrop-filter]:bg-background/55 backdrop-blur"
+      "bg-background/80 supports-backdrop-filter:bg-background/55 backdrop-blur"
     ),
     footerInner: "px-4 py-3",
     metaWrap: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground",
     controlsWrap: "flex flex-wrap items-center justify-between gap-3 sm:justify-end",
     pageSizeLabel: "text-sm font-medium whitespace-nowrap",
     pageSizeTrigger: cn(
-      "h-8 w-[5rem]",
+      "h-8 w-20",
       "border-muted-foreground/20",
       "focus-visible:ring-2 focus-visible:ring-ring",
       "data-[accent=on]:focus-visible:ring-[color:var(--dt-accent)]/35"
@@ -8485,13 +8474,16 @@ var DATA_TABLE_TEMPLATES = {
   glass: {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-md",
-      "bg-background/55 supports-[backdrop-filter]:bg-background/25 backdrop-blur-xl",
+      "bg-background/55 supports-backdrop-filter:bg-background/25 backdrop-blur-xl",
       "flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-background/70 supports-[backdrop-filter]:bg-background/35 backdrop-blur-xl",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-background/20")
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-background/20"
+    )
   },
   compact: {
     th: "h-10 px-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap",
@@ -8499,7 +8491,9 @@ var DATA_TABLE_TEMPLATES = {
     pageSizeTrigger: "h-8 w-[4.5rem]"
   },
   minimal: {
-    root: cn("relative w-full overflow-hidden rounded-xl border-0 shadow-none bg-transparent flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-xl border-0 shadow-none bg-transparent flex flex-col"
+    ),
     theadSticky: "sticky top-0 z-10 bg-background",
     footer: "border-t bg-transparent",
     tbody: "[&_tr:last-child]:border-0"
@@ -8508,11 +8502,14 @@ var DATA_TABLE_TEMPLATES = {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-none",
       "bg-background flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-background",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-transparent"),
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-transparent"
+    ),
     tr: cn(
       "border-b",
       "data-[state=selected]:bg-muted/35",
@@ -8529,11 +8526,14 @@ var DATA_TABLE_TEMPLATES = {
     root: cn(
       "relative w-full overflow-hidden rounded-3xl border shadow-lg",
       "bg-card flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-card/95 supports-[backdrop-filter]:bg-card/75 backdrop-blur",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-muted/10"),
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-muted/10"
+    ),
     th: cn(
       "h-12 px-5 text-left align-middle whitespace-nowrap",
       "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
@@ -8541,7 +8541,9 @@ var DATA_TABLE_TEMPLATES = {
     td: "px-5 py-3 align-middle"
   },
   grid: {
-    root: cn("relative w-full overflow-hidden rounded-2xl border shadow-sm bg-background flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border shadow-sm bg-background flex flex-col"
+    ),
     table: cn(
       "w-full text-sm border-separate border-spacing-0",
       "[&_th]:border-b [&_td]:border-b",
@@ -8563,7 +8565,9 @@ var DATA_TABLE_TEMPLATES = {
     )
   },
   cards: {
-    root: cn("relative w-full overflow-hidden rounded-2xl border bg-transparent shadow-none flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border bg-transparent shadow-none flex flex-col"
+    ),
     table: cn(
       "w-full text-sm border-separate border-spacing-y-2",
       "[&_tbody_tr_td]:bg-background",
@@ -8679,13 +8683,13 @@ function DataTable({
       style: accentOn ? { "--dt-accent": dtAccent } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "relative min-w-full w-max", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(TablePlain, { className: cn(ui.table), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Table, { className: cn(ui.table), children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               TableHead,
               {
                 className: cn(
-                  ui.th,
-                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0
+                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
+                  ui.th
                 ),
                 children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(
                   header.column.columnDef.header,
@@ -8708,15 +8712,24 @@ function DataTable({
                     "data-accent": dataAccent,
                     "data-state": row.getIsSelected() ? "selected" : void 0,
                     onClick: () => onClick == null ? void 0 : onClick(row.original),
-                    className: cn(ui.tr, clickable ? ui.trClickable : void 0),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                    className: cn(
+                      ui.tr,
+                      clickable ? ui.trClickable : void 0
+                    ),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id))
                   },
                   row.id
                 )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                   TableCell,
                   {
                     colSpan: columns.length,
-                    className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                    className: cn(
+                      ui.td,
+                      "text-muted-foreground h-28 text-center"
+                    ),
                     children: "No results."
                   }
                 ) })
@@ -8728,15 +8741,24 @@ function DataTable({
                 "data-accent": dataAccent,
                 "data-state": row.getIsSelected() ? "selected" : void 0,
                 onClick: () => onClick == null ? void 0 : onClick(row.original),
-                className: cn(ui.tr, clickable ? ui.trClickable : void 0),
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                className: cn(
+                  ui.tr,
+                  clickable ? ui.trClickable : void 0
+                ),
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableCell, { className: cn(ui.td), children: (0, import_react_table.flexRender)(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                ) }, cell.id))
               },
               row.id
             )) : emptyData || /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               TableCell,
               {
                 colSpan: columns.length,
-                className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                className: cn(
+                  ui.td,
+                  "text-muted-foreground h-28 text-center"
+                ),
                 children: "No results."
               }
             ) }) })
@@ -8763,10 +8785,24 @@ function DataTable({
           /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn(ui.controlsWrap), children: [
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: cn(ui.pageSizeLabel), children: rowPerPageLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Select2, { value: `${pageSize}`, onValueChange: (v) => changePageSize(Number(v)), children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectTrigger, { "data-accent": dataAccent, className: cn(ui.pageSizeTrigger), children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: `${pageSize}` }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
-              ] })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                Select2,
+                {
+                  value: `${pageSize}`,
+                  onValueChange: (v) => changePageSize(Number(v)),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                      SelectTrigger,
+                      {
+                        "data-accent": dataAccent,
+                        className: cn(ui.pageSizeTrigger),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectValue, { placeholder: `${pageSize}` })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem, { value: `${size}`, children: size }, size)) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn(ui.pageLabel), children: [

package/dist/index.d.cts

@@ -803,7 +803,7 @@ type DataTableSlots = Partial<{
  *  - `accentColor`: provide a custom CSS color (overrides `accent`)
  *  If both are null/empty, accent styling is disabled.
  */
-type DataTableAccent = 'primary' | 'emerald' | 'indigo' | 'rose' | 'amber' | 'zinc';
+type DataTableAccent = "primary" | "emerald" | "indigo" | "rose" | "amber" | "zinc";
 /** =========
  *  TEMPLATES
  *  =========
@@ -933,7 +933,7 @@ interface DataTableProps<TData, TValue> {
  * - isRowsSelected / rowsSelectedLabel: selection meta display
  * - rowPerPageLabel, pageLabel, ofLabel: i18n labels
  */
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;

package/dist/index.d.ts

@@ -803,7 +803,7 @@ type DataTableSlots = Partial<{
  *  - `accentColor`: provide a custom CSS color (overrides `accent`)
  *  If both are null/empty, accent styling is disabled.
  */
-type DataTableAccent = 'primary' | 'emerald' | 'indigo' | 'rose' | 'amber' | 'zinc';
+type DataTableAccent = "primary" | "emerald" | "indigo" | "rose" | "amber" | "zinc";
 /** =========
  *  TEMPLATES
  *  =========
@@ -933,7 +933,7 @@ interface DataTableProps<TData, TValue> {
  * - isRowsSelected / rowsSelectedLabel: selection meta display
  * - rowPerPageLabel, pageLabel, ofLabel: i18n labels
  */
-declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, pageCount, page, perPage, pageSizeOptions, rowPerPageLabel, ofLabel, pageLabel, isRowsSelected, totalRows, rowsSelectedLabel, template, classNames, accent, accentColor, emptyData, onPageChange, onClick, onPageSizeChange, animate, stickyHeader, headerScroll, heightClassName, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 
 type DataTableSkeletonProps = {
     columnCount: number;

package/dist/index.js

@@ -8182,7 +8182,7 @@ function Breadcrumbs({ items, className, classNameList }) {
 }
 
 // src/shared/data-table.tsx
-import React67, { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { AnimatePresence, motion as motion2 } from "framer-motion";
 import {
   DoubleArrowLeftIcon,
@@ -8196,17 +8196,6 @@ import {
 } from "@tanstack/react-table";
 import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight3 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
-var TablePlain = React67.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx48(
-    "table",
-    __spreadValues({
-      ref,
-      className: cn("w-full caption-bottom text-sm", className)
-    }, props)
-  );
-});
-TablePlain.displayName = "TablePlain";
 var ACCENT_COLOR = {
   primary: "var(--primary)",
   emerald: "#10b981",
@@ -8226,9 +8215,9 @@ var DATA_TABLE_TEMPLATES = {
   neo: {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-sm",
-      "bg-background/70 supports-[backdrop-filter]:bg-background/45 backdrop-blur",
+      "bg-background/70 supports-backdrop-filter:bg-background/45 backdrop-blur",
       "flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     table: cn("w-full text-sm"),
@@ -8257,14 +8246,14 @@ var DATA_TABLE_TEMPLATES = {
     td: "px-4 py-3 align-middle",
     footer: cn(
       "border-t",
-      "bg-background/80 supports-[backdrop-filter]:bg-background/55 backdrop-blur"
+      "bg-background/80 supports-backdrop-filter:bg-background/55 backdrop-blur"
     ),
     footerInner: "px-4 py-3",
     metaWrap: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground",
     controlsWrap: "flex flex-wrap items-center justify-between gap-3 sm:justify-end",
     pageSizeLabel: "text-sm font-medium whitespace-nowrap",
     pageSizeTrigger: cn(
-      "h-8 w-[5rem]",
+      "h-8 w-20",
       "border-muted-foreground/20",
       "focus-visible:ring-2 focus-visible:ring-ring",
       "data-[accent=on]:focus-visible:ring-[color:var(--dt-accent)]/35"
@@ -8283,13 +8272,16 @@ var DATA_TABLE_TEMPLATES = {
   glass: {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-md",
-      "bg-background/55 supports-[backdrop-filter]:bg-background/25 backdrop-blur-xl",
+      "bg-background/55 supports-backdrop-filter:bg-background/25 backdrop-blur-xl",
       "flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-background/70 supports-[backdrop-filter]:bg-background/35 backdrop-blur-xl",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-background/20")
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-background/20"
+    )
   },
   compact: {
     th: "h-10 px-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground whitespace-nowrap",
@@ -8297,7 +8289,9 @@ var DATA_TABLE_TEMPLATES = {
     pageSizeTrigger: "h-8 w-[4.5rem]"
   },
   minimal: {
-    root: cn("relative w-full overflow-hidden rounded-xl border-0 shadow-none bg-transparent flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-xl border-0 shadow-none bg-transparent flex flex-col"
+    ),
     theadSticky: "sticky top-0 z-10 bg-background",
     footer: "border-t bg-transparent",
     tbody: "[&_tr:last-child]:border-0"
@@ -8306,11 +8300,14 @@ var DATA_TABLE_TEMPLATES = {
     root: cn(
       "relative w-full overflow-hidden rounded-2xl border shadow-none",
       "bg-background flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-background",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-transparent"),
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-transparent"
+    ),
     tr: cn(
       "border-b",
       "data-[state=selected]:bg-muted/35",
@@ -8327,11 +8324,14 @@ var DATA_TABLE_TEMPLATES = {
     root: cn(
       "relative w-full overflow-hidden rounded-3xl border shadow-lg",
       "bg-card flex flex-col",
-      "before:absolute before:inset-x-0 before:top-0 before:h-[2px] before:bg-transparent",
+      "before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-transparent",
       "data-[accent=on]:before:bg-[color:var(--dt-accent)]"
     ),
     theadSticky: "sticky top-0 z-10 bg-card/95 supports-[backdrop-filter]:bg-card/75 backdrop-blur",
-    tbody: cn("[&_tr:last-child]:border-0", "[&>tr:nth-child(even)]:bg-muted/10"),
+    tbody: cn(
+      "[&_tr:last-child]:border-0",
+      "[&>tr:nth-child(even)]:bg-muted/10"
+    ),
     th: cn(
       "h-12 px-5 text-left align-middle whitespace-nowrap",
       "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground"
@@ -8339,7 +8339,9 @@ var DATA_TABLE_TEMPLATES = {
     td: "px-5 py-3 align-middle"
   },
   grid: {
-    root: cn("relative w-full overflow-hidden rounded-2xl border shadow-sm bg-background flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border shadow-sm bg-background flex flex-col"
+    ),
     table: cn(
       "w-full text-sm border-separate border-spacing-0",
       "[&_th]:border-b [&_td]:border-b",
@@ -8361,7 +8363,9 @@ var DATA_TABLE_TEMPLATES = {
     )
   },
   cards: {
-    root: cn("relative w-full overflow-hidden rounded-2xl border bg-transparent shadow-none flex flex-col"),
+    root: cn(
+      "relative w-full overflow-hidden rounded-2xl border bg-transparent shadow-none flex flex-col"
+    ),
     table: cn(
       "w-full text-sm border-separate border-spacing-y-2",
       "[&_tbody_tr_td]:bg-background",
@@ -8477,13 +8481,13 @@ function DataTable({
       style: accentOn ? { "--dt-accent": dtAccent } : void 0,
       children: [
         /* @__PURE__ */ jsx48("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs23(ScrollArea, { className: "h-full", children: [
-          /* @__PURE__ */ jsx48("div", { className: "relative min-w-full w-max", children: /* @__PURE__ */ jsxs23(TablePlain, { className: cn(ui.table), children: [
+          /* @__PURE__ */ jsx48("div", { className: "relative w-max min-w-full", children: /* @__PURE__ */ jsxs23(Table, { className: cn(ui.table), children: [
             /* @__PURE__ */ jsx48(TableHeader, { className: cn(ui.thead), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx48(TableRow, { className: cn(ui.trHead), children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx48(
               TableHead,
               {
                 className: cn(
-                  ui.th,
-                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0
+                  headerIsSticky ? cn(ui.theadSticky, "z-20") : void 0,
+                  ui.th
                 ),
                 children: header.isPlaceholder ? null : flexRender(
                   header.column.columnDef.header,
@@ -8506,15 +8510,24 @@ function DataTable({
                     "data-accent": dataAccent,
                     "data-state": row.getIsSelected() ? "selected" : void 0,
                     onClick: () => onClick == null ? void 0 : onClick(row.original),
-                    className: cn(ui.tr, clickable ? ui.trClickable : void 0),
-                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                    className: cn(
+                      ui.tr,
+                      clickable ? ui.trClickable : void 0
+                    ),
+                    children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id))
                   },
                   row.id
                 )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx48(
                   TableCell,
                   {
                     colSpan: columns.length,
-                    className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                    className: cn(
+                      ui.td,
+                      "text-muted-foreground h-28 text-center"
+                    ),
                     children: "No results."
                   }
                 ) })
@@ -8526,15 +8539,24 @@ function DataTable({
                 "data-accent": dataAccent,
                 "data-state": row.getIsSelected() ? "selected" : void 0,
                 onClick: () => onClick == null ? void 0 : onClick(row.original),
-                className: cn(ui.tr, clickable ? ui.trClickable : void 0),
-                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+                className: cn(
+                  ui.tr,
+                  clickable ? ui.trClickable : void 0
+                ),
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx48(TableCell, { className: cn(ui.td), children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                ) }, cell.id))
               },
               row.id
             )) : emptyData || /* @__PURE__ */ jsx48(TableRow, { "data-accent": dataAccent, children: /* @__PURE__ */ jsx48(
               TableCell,
               {
                 colSpan: columns.length,
-                className: cn(ui.td, "text-muted-foreground h-28 text-center"),
+                className: cn(
+                  ui.td,
+                  "text-muted-foreground h-28 text-center"
+                ),
                 children: "No results."
               }
             ) }) })
@@ -8561,10 +8583,24 @@ function DataTable({
           /* @__PURE__ */ jsxs23("div", { className: cn(ui.controlsWrap), children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx48("p", { className: cn(ui.pageSizeLabel), children: rowPerPageLabel }),
-              /* @__PURE__ */ jsxs23(Select2, { value: `${pageSize}`, onValueChange: (v) => changePageSize(Number(v)), children: [
-                /* @__PURE__ */ jsx48(SelectTrigger, { "data-accent": dataAccent, className: cn(ui.pageSizeTrigger), children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: `${pageSize}` }) }),
-                /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
-              ] })
+              /* @__PURE__ */ jsxs23(
+                Select2,
+                {
+                  value: `${pageSize}`,
+                  onValueChange: (v) => changePageSize(Number(v)),
+                  children: [
+                    /* @__PURE__ */ jsx48(
+                      SelectTrigger,
+                      {
+                        "data-accent": dataAccent,
+                        className: cn(ui.pageSizeTrigger),
+                        children: /* @__PURE__ */ jsx48(SelectValue, { placeholder: `${pageSize}` })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx48(SelectContent, { side: "top", children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx48(SelectItem, { value: `${size}`, children: size }, size)) })
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxs23("div", { className: cn(ui.pageLabel), children: [

package/dist/style.css

@@ -658,9 +658,6 @@
   .w-\[4\.5rem\] {
     width: 4.5rem;
   }
-  .w-\[5rem\] {
-    width: 5rem;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -1769,10 +1766,10 @@
       top: calc(var(--spacing) * 0);
     }
   }
-  .before\:h-\[2px\] {
+  .before\:h-0\.5 {
     &::before {
       content: var(--tw-content);
-      height: 2px;
+      height: calc(var(--spacing) * 0.5);
     }
   }
   .before\:bg-transparent {
@@ -2956,7 +2953,7 @@
       transition-property: none;
     }
   }
-  .supports-\[backdrop-filter\]\:bg-background\/25 {
+  .supports-backdrop-filter\:bg-background\/25 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--background);
       @supports (color: color-mix(in lab, red, red)) {
@@ -2964,27 +2961,27 @@
       }
     }
   }
-  .supports-\[backdrop-filter\]\:bg-background\/35 {
+  .supports-backdrop-filter\:bg-background\/45 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--background);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--background) 35%, transparent);
+        background-color: color-mix(in oklab, var(--background) 45%, transparent);
       }
     }
   }
-  .supports-\[backdrop-filter\]\:bg-background\/45 {
+  .supports-backdrop-filter\:bg-background\/55 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--background);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--background) 45%, transparent);
+        background-color: color-mix(in oklab, var(--background) 55%, transparent);
       }
     }
   }
-  .supports-\[backdrop-filter\]\:bg-background\/55 {
+  .supports-\[backdrop-filter\]\:bg-background\/35 {
     @supports (backdrop-filter: var(--tw)) {
       background-color: var(--background);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--background) 55%, transparent);
+        background-color: color-mix(in oklab, var(--background) 35%, transparent);
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-ui-react",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "private": false,
   "author": "Bleker Cordova <bleker@gliyen.com>",
   "description": "A collection of components for building beautiful and accessible user interfaces with React and Tailwind CSS.",
@@ -14,8 +14,13 @@
   "style": "dist/style.css",
   "files": [
     "dist",
-    "dist/style.css"
+    "dist/style.css",
+    "bin",
+    "templates"
   ],
+  "bin": {
+    "shadcn-ui-react": "./bin/shadcn-ui-react.mjs"
+  },
   "sideEffects": [
     "dist/*.css"
   ],

package/templates/vscode-settings.json

@@ -0,0 +1,11 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*?)[\"'`]"],
+    ["classNames\\s*=\\s*\\{\\{([\\s\\S]*?)\\}\\}", "[\"'`]([^\"'`]*?)[\"'`]"]
+  ],
+  "tailwindCSS.includeLanguages": {
+    "typescript": "javascript",
+    "typescriptreact": "javascript",
+    "javascriptreact": "javascript"
+  }
+}