next-anvil 0.3.3 → 0.3.5

package/README.md

@@ -1,24 +1,36 @@
-# Anvil CLI
+# Next-anvil
 
-CLI tool for the Anvil framework - a Next.js framework for creating admin dashboards.
+A Next.js framework for building admin dashboards. Next-anvil provides schema definitions, form field components, and a CLI tool to scaffold resources.
 
 ## Installation
 
+### CLI Tool
+
+Install globally:
+
 ```bash
-npm install -g anvil
+npm install -g next-anvil
 ```
 
 Or use it locally in your project:
 
 ```bash
-npm install --save-dev anvil
+npm install --save-dev next-anvil
+```
+
+### Library
+
+Install as a dependency in your Next.js project:
+
+```bash
+npm install next-anvil
 ```
 
-## Usage
+## CLI Usage
 
 ### Create a Resource
 
-Generate a new resource with form and table components:
+Generate resource scaffolding files:
 
 ```bash
 anvil forge:resource <name>
@@ -29,12 +41,12 @@ Example:
 anvil forge:resource product
 ```
 
-This will create:
-- `src/lib/resources/products/index.ts`
-- `src/lib/resources/products/form.ts`
-- `src/lib/resources/products/table.ts`
+This creates:
+- `src/lib/resources/products/index.ts` - Resource definition
+- `src/lib/resources/products/form.ts` - Form schema
+- `src/lib/resources/products/table.ts` - Table schema
 
-Run Prisma migrations:
+### Run Database Migrations
 
 ```bash
 anvil db:migrate
@@ -42,13 +54,145 @@ anvil db:migrate
 
 This executes `npx prisma migrate dev && npx prisma generate`.
 
+## Library Usage
+
+### Import Styles
+
+First, import the compiled Tailwind CSS:
+
+```javascript
+import "next-anvil/styles.css";
+```
+
+### Defining Field Schemas
+
+Next-anvil provides field definition functions for building form schemas:
+
+```typescript
+import { text, email, number, select, date, textarea } from "next-anvil/fields";
+import { defineFormSchema } from "next-anvil/form";
+
+const formSchema = defineFormSchema({
+  fields: {
+    name: text({
+      label: "Name",
+      required: true,
+      placeholder: "Enter name",
+    }),
+    email: email({
+      label: "Email",
+      required: true,
+      unique: true,
+    }),
+    age: number({
+      label: "Age",
+      min: 0,
+      max: 120,
+    }),
+    status: select({
+      label: "Status",
+      options: [
+        { value: "active", label: "Active" },
+        { value: "inactive", label: "Inactive" },
+      ],
+    }),
+    birthDate: date({
+      label: "Birth Date",
+    }),
+    bio: textarea({
+      label: "Biography",
+      rows: 4,
+    }),
+  },
+});
+```
+
+### Defining Table Schemas
+
+```typescript
+import { defineTableSchema } from "next-anvil/table";
+
+const tableSchema = defineTableSchema({
+  columns: [
+    { name: "id", label: "ID", visible: "never" },
+    { name: "name", label: "Name" },
+    { name: "email", label: "Email" },
+    { name: "createdAt", label: "Created At" },
+  ],
+});
+```
+
+### Defining Resources
+
+```typescript
+import { defineResource } from "next-anvil/resource";
+import form from "./form";
+import table from "./table";
+
+const productResource = defineResource({
+  model: "Product",
+  label: "Products",
+  form,
+  table,
+});
+```
+
+### Using Field Components
+
+Next-anvil provides React components for rendering form fields:
+
+```tsx
+import { TextField, EmailField, NumberField } from "next-anvil/components";
+
+function MyForm() {
+  const [formData, setFormData] = useState({});
+
+  return (
+    <form>
+      <TextField
+        fieldName="name"
+        fieldSchema={formSchema.fields.name}
+        value={formData.name}
+        onChange={(value) => setFormData({ ...formData, name: value })}
+      />
+      <EmailField
+        fieldName="email"
+        fieldSchema={formSchema.fields.email}
+        value={formData.email}
+        onChange={(value) => setFormData({ ...formData, email: value })}
+      />
+    </form>
+  );
+}
+```
+
+Available field components:
+- `TextField`
+- `EmailField`
+- `NumberField`
+- `SelectField`
+- `DateField`
+- `TextareaField`
+- `FieldWrapper` (base wrapper component)
+
+### Package Exports
+
+Next-anvil provides the following exports:
+
+- `next-anvil/fields` - Field schema definition functions (text, email, number, select, date, textarea, hidden)
+- `next-anvil/form` - Form schema utilities (`defineFormSchema`)
+- `next-anvil/table` - Table schema utilities (`defineTableSchema`)
+- `next-anvil/resource` - Resource definition utilities (`defineResource`)
+- `next-anvil/components` - React field components
+- `next-anvil/styles.css` - Compiled Tailwind CSS
+
 ## Requirements
 
 - Node.js 18.0.0 or higher
-- A Next.js project
-- Prisma configured (`db:migrate` commands)
+- React 18.0.0 or higher
+- Next.js 14.0.0 or higher
+- Prisma (for database operations)
 
 ## License
 
 ISC
-

package/dist/bin/commands/forge/resource.js

@@ -13,7 +13,7 @@ async function forgeResource(name) {
     const plural = (0, pluralize_esm_1.default)(singular);
     const pluralLower = plural.toLowerCase();
     const singularLower = singular.toLowerCase();
-    const resourceDir = path_1.default.join(process.cwd(), "src/lib/resources", pluralLower);
+    const resourceDir = path_1.default.join(process.cwd(), "src/lib/anvil/resources", pluralLower);
     if (await promises_1.default
         .access(resourceDir)
         .then(() => true)

package/dist/bin/commands/forge/resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"resource.js","sourceRoot":"","sources":["../../../../bin/commands/forge/resource.ts"],"names":[],"mappings":";;;;;AASA,sCAoCC;AA7CD,2DAA6B;AAC7B,gDAAwB;AACxB,kEAAsC;AACtC,uDAIkC;AAE3B,KAAK,UAAU,aAAa,CAAC,IAAY;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,IAAA,uBAAS,EAAC,QAAQ,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,cAAI,CAAC,IAAI,CAC3B,OAAO,CAAC,GAAG,EAAE,EACb,mBAAmB,EACnB,WAAW,CACZ,CAAC;IAEF,IACE,MAAM,kBAAE;SACL,MAAM,CAAC,WAAW,CAAC;SACnB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;SAChB,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EACrB,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,GAAG,QAAQ,0BAA0B,CAAC,CAAC;QACnD,OAAO;IACT,CAAC;IAED,MAAM,kBAAE,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjD,MAAM,OAAO,CAAC,GAAG,CAAC;QAChB,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,IAAA,wBAAa,EAAC,QAAQ,CAAC,CAAC;QACzE,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC;QACvE,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,IAAA,wBAAa,GAAE,CAAC;KAClE,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CACT,KAAK,QAAQ,0CAA0C,WAAW,GAAG,CACtE,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC/B,CAAC"}
+{"version":3,"file":"resource.js","sourceRoot":"","sources":["../../../../bin/commands/forge/resource.ts"],"names":[],"mappings":";;;;;AASA,sCAoCC;AA7CD,2DAA6B;AAC7B,gDAAwB;AACxB,kEAAsC;AACtC,uDAIkC;AAE3B,KAAK,UAAU,aAAa,CAAC,IAAY;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,MAAM,GAAG,IAAA,uBAAS,EAAC,QAAQ,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IAE7C,MAAM,WAAW,GAAG,cAAI,CAAC,IAAI,CAC3B,OAAO,CAAC,GAAG,EAAE,EACb,yBAAyB,EACzB,WAAW,CACZ,CAAC;IAEF,IACE,MAAM,kBAAE;SACL,MAAM,CAAC,WAAW,CAAC;SACnB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;SAChB,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EACrB,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,GAAG,QAAQ,0BAA0B,CAAC,CAAC;QACnD,OAAO;IACT,CAAC;IAED,MAAM,kBAAE,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjD,MAAM,OAAO,CAAC,GAAG,CAAC;QAChB,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,IAAA,wBAAa,EAAC,QAAQ,CAAC,CAAC;QACzE,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,IAAA,uBAAY,EAAC,QAAQ,CAAC,CAAC;QACvE,kBAAE,CAAC,SAAS,CAAC,cAAI,CAAC,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,EAAE,IAAA,wBAAa,GAAE,CAAC;KAClE,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CACT,KAAK,QAAQ,0CAA0C,WAAW,GAAG,CACtE,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC/B,CAAC"}

package/dist/styles.css

@@ -7,18 +7,49 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
+    --color-white: #fff;
     --spacing: 0.25rem;
+    --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-wider: 0.05em;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
   }
@@ -191,30 +222,117 @@
   .col-span-4 {
     grid-column: span 4 / span 4;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
   .block {
     display: block;
   }
+  .flex {
+    display: flex;
+  }
   .grid {
     display: grid;
   }
   .hidden {
     display: none;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
   .table {
     display: table;
   }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
   .w-full {
     width: 100%;
   }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .min-w-full {
+    min-width: 100%;
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
+  .divide-gray-200 {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-gray-200);
+    }
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -222,45 +340,253 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
+  .border-red-200 {
+    border-color: var(--color-red-200);
+  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-green-100 {
+    background-color: var(--color-green-100);
+  }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-12 {
+    padding: calc(var(--spacing) * 12);
+  }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .text-black {
     color: var(--color-black);
   }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+  .text-green-800 {
+    color: var(--color-green-800);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-red-600 {
     color: var(--color-red-600);
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .hover\:border-blue-300 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-blue-300);
+      }
+    }
+  }
+  .hover\:bg-blue-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-700);
+      }
+    }
+  }
+  .hover\:bg-gray-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-50);
+      }
+    }
+  }
+  .hover\:bg-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:bg-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-700);
+      }
+    }
+  }
+  .hover\:text-blue-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-900);
+      }
+    }
+  }
+  .hover\:text-red-900 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-900);
+      }
+    }
+  }
+  .hover\:shadow-md {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -283,6 +609,21 @@
       outline-style: none;
     }
   }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
   .md\:col-span-1 {
     @media (width >= 48rem) {
       grid-column: span 1 / span 1;
@@ -303,6 +644,31 @@
       grid-column: span 4 / span 4;
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 @property --tw-border-style {
   syntax: "*";
@@ -313,6 +679,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -381,8 +751,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-anvil",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "CLI tool for the Anvil framework - a Next.js framework for creating admin dashboards",
   "license": "ISC",
   "author": "Juan Sanchez <juan.sanchez@stallionstudios.net>",