jquard 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b130aca867496b6207bc28b66be0dddf1d3ff6280bb63d80a58697a42581fda
-  data.tar.gz: 7a6ad21d829f150d8cc8be037da4f3333813db731664bf880fef471b1181c3b4
+  metadata.gz: b9a254d53fe440d2cc877ee803519e859c381e4a9749cdf7983b61dc1af4417a
+  data.tar.gz: 8e9367d15e0a8fb939828fdf7c16dd3c96a7192f313e5d8f23edf87d7a6a14b4
 SHA512:
-  metadata.gz: ee055ec22c5e2efaa33fc5ef146d7cf8c00f7e44b4a137b8286f4767df24a8ad2aa4c0d4f4ad377abd4785ef91f159370e93c120b23616d8ea37bb4722268800
-  data.tar.gz: 845e74ed5af20f36cedd738e8cb04342330d4e62721cb238f6b6d25cdb91cf00bf8c843c153f1388924b1e4d09e906e1c3dc22ca6a202ecc9472ea357cb61380
+  metadata.gz: f188d64fc35d805be9ad3d0c91f92ae15ef9b839a674c47c01530696e3fcb7392845b480ae181acce04dffb778319c1633102474f3efe88b4d473128dd0aaf20
+  data.tar.gz: 254abf379f90e8205297a6df25a0315ef89b46b52e0c6b9357a06ddf14312d912ef7cc49cdf27edac1d9be445627230050ef0d555ed09ca41e7789a5896802be

data/CHANGELOG.md

@@ -2,13 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [0.1.0] - 2026-07-17
 
-## [Unreleased]
-
-Jquard is in the design/planning phase — see `docs/DESIGN.md` for the vision,
-DSL proposal, MVP scope and roadmap.
+### Added
+- Mountable engine with self-registering resources and dynamic routing
+- Tables: searchable/sortable columns, pagination, badges, boolean icons
+- Forms: create/edit with section layouts, validation, and toasts
+- Row actions: edit, and delete with a confirmation modal
+- `jquard:install` and `jquard:resource` generators
+- Theming via brand name and primary color
 
 ## [0.0.1] - 2026-07-11
 

data/README.md

@@ -1,28 +1,277 @@
 # Jquard
-Short description and motivation.
 
-## Usage
-How to use my plugin.
+Build modern admin panels and apps in Ruby on Rails with a few lines of code.
 
-## Installation
-Add this line to your application's Gemfile:
+Jquard is a mountable Rails engine, inspired by [Filament](https://filamentphp.com) from the Laravel ecosystem. With Jquard, you can describe your models with a chainable Ruby DSL and get searchable, sortable, and paginated tables — styled with Tailwind and Heroicons, and driven by Rails defaults.
+
+The built-in generator reads your models and writes the first version for you, so you never start from a blank file.
+
+![The Jquard admin panel](https://raw.githubusercontent.com/jquard/jquard/main/docs/images/posts.png)
+
+## What you get
+
+- **Tables** with search, sortable columns, pagination, status badges, and boolean icons.
+- **Forms** for creating and editing records, with section layouts, validation errors, and a "Saved" toast.
+- **Row actions** — edit, and delete with a confirmation dialog (not the browser's gray popup).
+- **A generator** that turns a model into a working resource in one command.
+- **Theming** — set a brand name and a primary color; the whole panel follows it.
+
+No JavaScript build step, no Tailwind config in your app. Jquard ships its own compiled CSS.
+
+## Requirements
+
+- Rails 8.0 or newer
+- Ruby 3.2 or newer
+- Hotwire (`turbo-rails`, included with new Rails apps)
+
+## Getting started
+
+Say you already have a `Comment` model in your app:
+
+```ruby
+# app/models/comment.rb
+class Comment < ApplicationRecord
+  validates :author_name, presence: true
+end
+```
+
+backed by a table like this:
+
+```ruby
+create_table :comments do |t|
+  t.string   :author_name, null: false
+  t.text     :body
+  t.boolean  :approved, null: false, default: false
+  t.datetime :posted_at
+  t.timestamps
+end
+```
+
+Here's how to put it in an admin panel.
+
+### 1. Install the gem
+
+Add it to your `Gemfile`:
 
 ```ruby
 gem "jquard"
 ```
 
-And then execute:
+Then run the install generator. It mounts the engine at `/admin` and creates a config file:
+
 ```bash
-$ bundle
+$ bundle install
+$ bin/rails generate jquard:install
+```
+
+### 2. Generate a resource for your model
+
+```bash
+$ bin/rails generate jquard:resource Comment
+```
+
+### 3. Open `/admin`
+
+That's it. You have a Comments table you can search and sort, a form to create new comments, and edit and delete on every row. The `author_name` column is searchable because it's a string; `approved` shows a check or a cross because it's a boolean; `posted_at` is formatted as a date. Jquard picked those from your database columns.
+
+## What the generator wrote
+
+The generator created a small folder of plain Ruby files. This is your code now — edit any of it.
+
+```
+app/jquard/resources/comments/
+├── comment_resource.rb          # ties the model, table, form, and pages together
+├── tables/comments_table.rb     # the columns shown in the list
+├── schemas/comment_form.rb       # the fields shown in the create/edit form
+└── pages/
+    ├── list_comments.rb
+    ├── create_comment.rb
+    └── edit_comment.rb
+```
+
+The table it wrote:
+
+```ruby
+# app/jquard/resources/comments/tables/comments_table.rb
+module Jquard
+  module Resources
+    module Comments
+      module Tables
+        class CommentsTable
+          include Jquard::Tables::Components
+
+          def self.configure(table)
+            table
+              .columns([
+                TextColumn.make(:author_name).searchable.sortable,
+                IconColumn.make(:approved).boolean,
+                TextColumn.make(:posted_at).date_time.sortable
+              ])
+              .record_actions([ EditAction.make, DeleteAction.make ])
+              .default_sort(:created_at, :desc)
+          end
+        end
+      end
+    end
+  end
+end
+```
+
+And the form:
+
+```ruby
+# app/jquard/resources/comments/schemas/comment_form.rb
+module Jquard
+  module Resources
+    module Comments
+      module Schemas
+        class CommentForm
+          include Jquard::Schemas::Components
+
+          def self.configure(schema)
+            schema.components([
+              Section.make("Details").columns(2).schema([
+                TextInput.make(:author_name).required,
+                Textarea.make(:body).rows(6).column_span_full,
+                Toggle.make(:approved),
+                DateTimePicker.make(:posted_at)
+              ])
+            ])
+          end
+        end
+      end
+    end
+  end
+end
+```
+
+Every line maps to something you can see on screen. Read the next section to change any of it.
+
+## Customizing
+
+### Table columns
+
+Each column starts with `.make(:attribute)` and reads left to right:
+
+```ruby
+table.columns([
+  TextColumn.make(:title).searchable.sortable,
+  TextColumn.make(:status)
+    .badge
+    .color(draft: :gray, reviewing: :warning, published: :success),
+  IconColumn.make(:featured).boolean,
+  TextColumn.make(:published_at).date_time.sortable
+])
+```
+
+- `.searchable` — this column is matched by the search box.
+- `.sortable` — the header becomes a sort toggle.
+- `.badge` — render the value as a pill; `.color(...)` maps values to colors.
+- `.boolean` — (on `IconColumn`) show a check for true, a cross for false.
+- `.date_time` — format a timestamp; pass a format string like `.date_time("%Y-%m-%d")` to change it.
+
+### Form fields
+
+Fields live inside layout sections. A `Section` is a titled card; `.columns(2)` arranges its fields in two columns, and `.column_span_full` makes one field span the whole width.
+
+```ruby
+schema.components([
+  Section.make("Content").columns(2).schema([
+    TextInput.make(:title).required.max_length(255).column_span_full,
+    Select.make(:status).options(draft: "Draft", reviewing: "Reviewing", published: "Published"),
+    DateTimePicker.make(:published_at).helper_text("Leave empty for unpublished posts"),
+    Toggle.make(:featured),
+    Textarea.make(:body).rows(8).column_span_full
+  ])
+])
 ```
 
-Or install it yourself as:
+Available fields: `TextInput` (with `.email`, `.password`, `.numeric` variants), `Textarea`, `Select`, `Checkbox`, `Toggle`, `DatePicker`, `DateTimePicker`, `Hidden`. Shared options include `.required`, `.placeholder`, `.helper_text`, `.default`, and `.disabled`.
+
+![Editing a record](https://raw.githubusercontent.com/jquard/jquard/main/docs/images/edit.png)
+
+### Row actions
+
+`record_actions` decides the buttons on each row. Delete shows a confirmation dialog you can word yourself:
+
+```ruby
+table.record_actions([
+  EditAction.make,
+  DeleteAction.make
+    .confirm_heading("Delete this comment?")
+    .confirm("This can't be undone.")
+    .confirm_button("Yes, delete")
+])
+```
+
+### The resource file
+
+`comment_resource.rb` is the hub. It names the model and hands the table and form to the classes above:
+
+```ruby
+class CommentResource < Jquard::Resource
+  self.model = ::Comment
+  self.navigation_icon = "chat-bubble-left-right"   # any Heroicon name
+
+  def self.form(schema)
+    Schemas::CommentForm.configure(schema)
+  end
+
+  def self.table(table)
+    Tables::CommentsTable.configure(table)
+  end
+end
+```
+
+## Theming
+
+The install generator wrote `config/initializers/jquard.rb`:
+
+```ruby
+Jquard.configure do |config|
+  config.brand_name = "My App"
+
+  # A built-in palette name...
+  config.primary_color = :ruby
+
+  # ...or a full set of shades:
+  # config.primary_color = {
+  #   50 => "#eff6ff", 100 => "#dbeafe", 200 => "#bfdbfe", 300 => "#93c5fd",
+  #   400 => "#60a5fa", 500 => "#3b82f6", 600 => "#2563eb", 700 => "#1d4ed8",
+  #   800 => "#1e40af", 900 => "#1e3a8a", 950 => "#172554"
+  # }
+end
+```
+
+The brand name shows in the sidebar; the primary color is used for buttons, links, the active nav item, and form focus rings.
+
+## How it works
+
+- **Resources register themselves.** Any class under `app/jquard/resources/` that inherits from `Jquard::Resource` shows up in the panel — no central list to maintain.
+- **State lives in the URL.** Search, sort, and page are query parameters, so every view is shareable and survives a refresh.
+- **Hotwire drives the updates.** Searching, sorting, and paging swap the table in place through a Turbo Frame instead of reloading the page.
+
+For the design decisions and the full roadmap, see [docs/DESIGN.md](docs/DESIGN.md).
+
+## Status
+
+Jquard is early. Today it covers the core admin panel: list, create, edit, and delete, plus the generator. Planned next: authentication, authorization, a read-only view page, relation managers, custom and bulk actions, and a dashboard. It follows semantic versioning.
+
+## Development
+
+The repo includes a dummy Rails app under `test/dummy` that mounts the engine.
+
 ```bash
-$ gem install jquard
+$ bin/rails test        # run the test suite
+$ bundle exec rubocop   # lint
 ```
 
 ## Contributing
-Contribution directions go here.
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jquard/jquard.
 
 ## License
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+Jquard is open source under the [MIT License](https://opensource.org/licenses/MIT).
+
+It ships with [Heroicons](https://heroicons.com) by [Tailwind Labs](https://tailwindcss.com), also MIT licensed — see [lib/jquard/icons/LICENSE](lib/jquard/icons/LICENSE).

data/Rakefile

@@ -4,3 +4,20 @@ APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
 load "rails/tasks/engine.rake"
 
 require "bundler/gem_tasks"
+
+namespace :jquard do
+  namespace :css do
+    input = File.expand_path("lib/jquard/tailwind/application.css", __dir__)
+    output = File.expand_path("app/assets/stylesheets/jquard/application.css", __dir__)
+
+    desc "Compile the engine stylesheet"
+    task :build do
+      sh "tailwindcss", "-i", input, "-o", output, "--minify"
+    end
+
+    desc "Recompile the engine stylesheet on change"
+    task :watch do
+      sh "tailwindcss", "-i", input, "-o", output, "--watch"
+    end
+  end
+end

data/app/assets/javascripts/jquard/application.js

@@ -0,0 +1,40 @@
+// Turbo Drive swaps the <body> on every visit while this module runs only
+// once, so the dialog must be looked up at call time — a captured reference
+// would go stale (detached node) after the first navigation.
+const findDialog = () => document.getElementById("jquard-confirm-dialog")
+
+const confirmWithDialog = (message, formElement) => {
+  const dialog = findDialog()
+  if (!dialog) return Promise.resolve(window.confirm(message))
+
+  const data = formElement?.dataset ?? {}
+
+  dialog.querySelector("[data-slot=heading]").textContent = data.confirmHeading || "Confirm action"
+  dialog.querySelector("[data-slot=description]").textContent = message
+  dialog.querySelector("[data-slot=confirm]").textContent = data.confirmButton || "Confirm"
+
+  dialog.returnValue = ""
+  dialog.showModal()
+
+  return new Promise((resolve) => {
+    dialog.addEventListener("close", () => resolve(dialog.returnValue === "confirm"), { once: true })
+  })
+}
+
+document.addEventListener("click", (event) => {
+  if (event.target instanceof HTMLDialogElement && event.target.id === "jquard-confirm-dialog") {
+    event.target.close("")
+  }
+})
+
+if (window.Turbo) {
+  if (window.Turbo.config?.forms) {
+    Turbo.config.forms.confirm = confirmWithDialog
+  } else {
+    Turbo.setConfirmMethod(confirmWithDialog)
+  }
+}
+
+document.addEventListener("change", (event) => {
+  if (event.target.matches("[data-jq-autosubmit]")) event.target.form?.requestSubmit()
+})

data/app/assets/stylesheets/jquard/application.css

@@ -1,15 +1,2 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+@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-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-tracking:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "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% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-700:oklch(55.5% .163 48.998);--color-green-50:oklch(98.2% .018 155.826);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-blue-50:oklch(97% .014 254.604);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{.jq-body{background-color:var(--color-gray-50);min-height:100vh;font-family:var(--font-sans);color:var(--color-gray-950);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.jq-shell{min-height:100vh;display:flex}.jq-sidebar{z-index:20;width:calc(var(--spacing) * 72);background-color:var(--color-white);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#0307120d;inset-block:0;flex-direction:column;display:flex;position:fixed;left:0}@supports (color:color-mix(in lab, red, red)){.jq-sidebar{--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent)}}.jq-sidebar-header{height:calc(var(--spacing) * 16);padding-inline:calc(var(--spacing) * 6);flex-shrink:0;align-items:center;display:flex}.jq-brand{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);color:var(--jq-primary-600)}.jq-sidebar-nav{row-gap:calc(var(--spacing) * 7);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 6);flex-direction:column;flex:1;display:flex;overflow-y:auto}.jq-nav-group-label{padding-inline:calc(var(--spacing) * 2);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider);color:var(--color-gray-500);text-transform:uppercase}.jq-nav-items{margin-top:calc(var(--spacing) * 2);row-gap:var(--spacing);flex-direction:column;display:flex}.jq-nav-item{align-items:center;column-gap:calc(var(--spacing) * 3);border-radius:var(--radius-lg);padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-700);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}@media (hover:hover){.jq-nav-item:hover{background-color:var(--color-gray-100)}}.jq-nav-item-icon{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 6);color:var(--color-gray-400);flex-shrink:0}.jq-nav-item--active{background-color:var(--color-gray-100);color:var(--jq-primary-600)}.jq-nav-item--active .jq-nav-item-icon{color:var(--jq-primary-600)}.jq-main{padding-left:calc(var(--spacing) * 72);flex:1}.jq-topbar{z-index:10;height:calc(var(--spacing) * 16);background-color:#fffc;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}@supports (color:color-mix(in lab, red, red)){.jq-topbar{background-color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.jq-topbar{padding-inline:calc(var(--spacing) * 6);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#0307120d}@supports (color:color-mix(in lab, red, red)){.jq-topbar{--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent)}}.jq-topbar{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}@media (min-width:64rem){.jq-topbar{padding-inline:calc(var(--spacing) * 8)}}.jq-breadcrumbs{align-items:center;column-gap:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-500);display:flex}.jq-breadcrumb-sep{height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4);color:var(--color-gray-400)}.jq-content{padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 8)}@media (min-width:64rem){.jq-content{padding-inline:calc(var(--spacing) * 8)}}.jq-page-header{margin-bottom:calc(var(--spacing) * 6);justify-content:space-between;align-items:center;display:flex}.jq-page-title{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight);color:var(--color-gray-950)}.jq-card{border-radius:var(--radius-xl);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent);overflow:hidden}.jq-table-toolbar{justify-content:flex-end;align-items:center;column-gap:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);display:flex}.jq-search{position:relative}.jq-search-icon{pointer-events:none;top:50%;left:calc(var(--spacing) * 3);height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y);color:var(--color-gray-400);position:absolute}.jq-search-input{width:calc(var(--spacing) * 64);border-radius:var(--radius-lg);border-style:var(--tw-border-style);background-color:var(--color-white);padding-block:calc(var(--spacing) * 1.5);padding-right:calc(var(--spacing) * 3);padding-left:calc(var(--spacing) * 10);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-950);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#0307121a;border-width:0}@supports (color:color-mix(in lab, red, red)){.jq-search-input{--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 10%, transparent)}}.jq-search-input::placeholder{color:var(--color-gray-400)}.jq-search-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;--tw-ring-color:var(--jq-primary-600);outline-style:none}.jq-table-scroll{overflow-x:auto}.jq-table{text-align:left;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.jq-table thead tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-200)}.jq-table th{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-950)}.jq-table tbody tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-gray-100);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.jq-table tbody tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.jq-table tbody tr:hover{background-color:var(--color-gray-50)}.jq-table td{padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);color:var(--color-gray-700)}.jq-sort-link{align-items:center;column-gap:var(--spacing);display:inline-flex}@media (hover:hover){.jq-sort-link:hover{color:var(--color-gray-600)}}.jq-sort-icon{height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4);color:var(--color-gray-400)}.jq-badge{border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 2);padding-block:var(--spacing);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);align-items:center;display:inline-flex}.jq-badge--gray{background-color:var(--color-gray-50);color:var(--color-gray-600);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#6a728233}@supports (color:color-mix(in lab, red, red)){.jq-badge--gray{--tw-ring-color:color-mix(in oklab, var(--color-gray-500) 20%, transparent)}}.jq-badge--gray{--tw-ring-inset:inset}.jq-badge--success{background-color:var(--color-green-50);color:var(--color-green-700);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#00a54433}@supports (color:color-mix(in lab, red, red)){.jq-badge--success{--tw-ring-color:color-mix(in oklab, var(--color-green-600) 20%, transparent)}}.jq-badge--success{--tw-ring-inset:inset}.jq-badge--warning{background-color:var(--color-amber-50);color:var(--color-amber-700);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#dd740033}@supports (color:color-mix(in lab, red, red)){.jq-badge--warning{--tw-ring-color:color-mix(in oklab, var(--color-amber-600) 20%, transparent)}}.jq-badge--warning{--tw-ring-inset:inset}.jq-badge--danger{background-color:var(--color-red-50);color:var(--color-red-700);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#e400141a}@supports (color:color-mix(in lab, red, red)){.jq-badge--danger{--tw-ring-color:color-mix(in oklab, var(--color-red-600) 10%, transparent)}}.jq-badge--danger{--tw-ring-inset:inset}.jq-badge--info{background-color:var(--color-blue-50);color:var(--color-blue-700);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#1447e61a}@supports (color:color-mix(in lab, red, red)){.jq-badge--info{--tw-ring-color:color-mix(in oklab, var(--color-blue-700) 10%, transparent)}}.jq-badge--info{--tw-ring-inset:inset}.jq-badge--primary{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-inset:inset;background-color:var(--jq-primary-600)}@supports (color:color-mix(in lab, red, red)){.jq-badge--primary{background-color:color-mix(in srgb, var(--jq-primary-600) 8%, white)}}.jq-badge--primary{color:var(--jq-primary-700);--tw-ring-color:var(--jq-primary-600)}@supports (color:color-mix(in lab, red, red)){.jq-badge--primary{--tw-ring-color:color-mix(in srgb, var(--jq-primary-600) 25%, transparent)}}.jq-bool-icon{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 6)}.jq-bool-icon--true{color:var(--color-green-500)}.jq-bool-icon--false{color:var(--color-red-500)}.jq-table-footer{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-gray-200);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3)}.jq-pagination{align-items:center;column-gap:calc(var(--spacing) * 3);grid-template-columns:1fr auto 1fr;display:grid}.jq-pagination-overview{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-700)}.jq-pagination-per-page{grid-column-start:2;justify-self:center}.jq-input-group{border-radius:var(--radius-lg);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 10%, transparent);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:75ms;align-items:stretch;transition-duration:75ms;display:flex}.jq-input-group:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:var(--jq-primary-600)}.jq-input-group-prefix{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;border-color:var(--color-gray-200);padding-inline:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-500);align-items:center;display:flex}.jq-per-page-select{appearance:none;border-style:var(--tw-border-style);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-950);--tw-outline-style:none;background-color:#0000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.15em 1.15em;border-width:0;border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg);outline-style:none;padding-inline-start:calc(var(--spacing) * 2.5);padding-inline-end:calc(var(--spacing) * 7)}.jq-pagination-items{border-radius:var(--radius-lg);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 10%, transparent);grid-column-start:3;justify-self:flex-end;list-style-type:none;display:flex}.jq-pagination-item{border-inline-style:var(--tw-border-style);border-inline-width:.5px;border-color:var(--color-gray-200)}.jq-pagination-item:first-child{border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.jq-pagination-item:last-child{border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.jq-pagination-item-btn{padding:calc(var(--spacing) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:75ms;transition-duration:75ms;display:flex;position:relative}@media (hover:hover){.jq-pagination-item-btn:hover{background-color:var(--color-gray-50)}}.jq-pagination-item:first-child .jq-pagination-item-btn{border-start-start-radius:var(--radius-lg);border-end-start-radius:var(--radius-lg)}.jq-pagination-item:last-child .jq-pagination-item-btn{border-start-end-radius:var(--radius-lg);border-end-end-radius:var(--radius-lg)}.jq-pagination-item-label{padding-inline:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-700)}.jq-pagination-item--active .jq-pagination-item-btn{background-color:var(--color-gray-50)}.jq-pagination-item--active .jq-pagination-item-label{color:var(--jq-primary-700)}.jq-pagination-item--disabled .jq-pagination-item-btn{pointer-events:none}.jq-pagination-item--disabled .jq-pagination-item-label{color:var(--color-gray-500)}.jq-pagination-icon{height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5);color:var(--color-gray-400)}.jq-empty-state{padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 12);text-align:center;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-500)}.jq-actions-header{width:var(--spacing)}.jq-row-actions{justify-content:flex-end;align-items:center;column-gap:calc(var(--spacing) * 3);white-space:nowrap;display:flex}.jq-row-action{cursor:pointer;align-items:center;column-gap:var(--spacing);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-600);background-color:#0000;display:inline-flex}@media (hover:hover){.jq-row-action:hover{color:var(--color-gray-950)}}.jq-row-action--danger{color:var(--color-red-600)}@media (hover:hover){.jq-row-action--danger:hover{color:var(--color-red-700)}}.jq-row-action-icon{height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4)}.jq-form{max-width:var(--container-3xl);row-gap:calc(var(--spacing) * 6);flex-direction:column;display:flex}.jq-section{border-radius:var(--radius-xl);background-color:var(--color-white);padding:calc(var(--spacing) * 6);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent)}.jq-section-header{margin-bottom:calc(var(--spacing) * 6)}.jq-section-heading{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-950)}.jq-section-description{margin-top:var(--spacing);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-500)}.jq-schema-grid{gap:calc(var(--spacing) * 6);display:grid}.jq-field{row-gap:calc(var(--spacing) * 1.5);flex-direction:column;display:flex}.jq-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-950)}.jq-required{margin-left:calc(var(--spacing) * .5);color:var(--color-red-600)}.jq-input{border-radius:var(--radius-lg);border-style:var(--tw-border-style);background-color:var(--color-white);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-950);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#0307121a;border-width:0}@supports (color:color-mix(in lab, red, red)){.jq-input{--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 10%, transparent)}}.jq-input::placeholder{color:var(--color-gray-400)}.jq-input:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-outline-style:none;--tw-ring-color:var(--jq-primary-600);outline-style:none}.jq-input--error,.jq-input--error:focus{--tw-ring-color:var(--color-red-600)}.jq-field-error{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-red-600)}.jq-helper-text{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-500)}.jq-field-inline{align-items:center;column-gap:calc(var(--spacing) * 3);display:flex}.jq-checkbox{height:calc(var(--spacing) * 4);width:calc(var(--spacing) * 4);border-color:var(--color-gray-300);accent-color:var(--jq-primary-600);border-radius:.25rem}.jq-toggle{display:inline-flex;position:relative}.jq-toggle-input{z-index:10;cursor:pointer;opacity:0;position:absolute;inset:0}.jq-toggle-track{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 11);background-color:var(--color-gray-200);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));border-radius:3.40282e38px;align-items:center;display:inline-flex;position:relative}.jq-toggle-thumb{left:calc(var(--spacing) * .5);height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5);background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border-radius:3.40282e38px;position:absolute}.jq-toggle-input:checked+.jq-toggle-track{background-color:var(--jq-primary-600)}.jq-toggle-input:checked+.jq-toggle-track .jq-toggle-thumb{transform:translate(1.25rem)}.jq-form-actions{align-items:center;column-gap:calc(var(--spacing) * 3);display:flex}.jq-btn{cursor:pointer;align-items:center;column-gap:calc(var(--spacing) * 1.5);border-radius:var(--radius-lg);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);display:inline-flex}.jq-btn-icon{height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 5)}.jq-btn--primary{color:var(--color-white);background-color:var(--jq-primary-600)}.jq-btn--primary:hover{background-color:var(--jq-primary-500)}.jq-btn--secondary{background-color:var(--color-white);color:var(--color-gray-950);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:#0307121a}@supports (color:color-mix(in lab, red, red)){.jq-btn--secondary{--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 10%, transparent)}}@media (hover:hover){.jq-btn--secondary:hover{background-color:var(--color-gray-50)}}.jq-toast{top:calc(var(--spacing) * 4);right:calc(var(--spacing) * 4);z-index:50;align-items:center;column-gap:calc(var(--spacing) * 2);border-radius:var(--radius-xl);background-color:var(--color-white);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-gray-950);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent);animation:4s forwards jq-toast-out;display:flex;position:fixed}.jq-toast-icon{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 6);color:var(--color-green-500)}.jq-modal{width:100%;max-width:var(--container-md);border-radius:var(--radius-xl);background-color:var(--color-white);--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);--tw-ring-color:color-mix(in oklab, var(--color-gray-950) 5%, transparent);margin:auto;padding:0}.jq-modal::backdrop{background-color:#03071280}.jq-modal-window{align-items:center;row-gap:calc(var(--spacing) * 1.5);padding:calc(var(--spacing) * 6);text-align:center;flex-direction:column;display:flex}.jq-modal-icon-circle{margin-bottom:calc(var(--spacing) * 2);height:calc(var(--spacing) * 12);width:calc(var(--spacing) * 12);background-color:var(--color-red-100);border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.jq-modal-icon{height:calc(var(--spacing) * 6);width:calc(var(--spacing) * 6);color:var(--color-red-600)}.jq-modal-heading{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-gray-950)}.jq-modal-description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-gray-500)}.jq-modal-actions{margin-top:calc(var(--spacing) * 4);gap:calc(var(--spacing) * 3);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.jq-modal-actions .jq-btn{justify-content:center}.jq-btn--danger{background-color:var(--color-red-600);color:var(--color-white)}@media (hover:hover){.jq-btn--danger:hover{background-color:var(--color-red-500)}}}@layer utilities;@keyframes jq-toast-out{0%,80%{opacity:1}to{opacity:0;visibility:hidden}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}

data/app/components/jquard/application_component.rb

@@ -0,0 +1,4 @@
+module Jquard
+  class ApplicationComponent < ViewComponent::Base
+  end
+end

data/app/components/jquard/schemas/field_wrapper_component.html.erb

@@ -0,0 +1,20 @@
+<div class="<%= wrapper_classes %>" style="<%= span_style %>">
+  <% if inline? %>
+    <label class="jq-field-inline">
+      <%= content %>
+      <span class="jq-label"><%= field.label %><% if field.required? %><span class="jq-required">*</span><% end %></span>
+    </label>
+  <% else %>
+    <label class="jq-label" for="<%= input_id %>">
+      <%= field.label %><% if field.required? %><span class="jq-required">*</span><% end %>
+    </label>
+    <%= content %>
+  <% end %>
+
+  <% if error_message %>
+    <p class="jq-field-error"><%= error_message %></p>
+  <% end %>
+  <% if field.helper_text %>
+    <p class="jq-helper-text"><%= field.helper_text %></p>
+  <% end %>
+</div>

data/app/components/jquard/schemas/field_wrapper_component.rb

@@ -0,0 +1,40 @@
+module Jquard
+  module Schemas
+    class FieldWrapperComponent < Jquard::ApplicationComponent
+      def initialize(field:, record:, inline: false)
+        @field = field
+        @record = record
+        @inline = inline
+      end
+
+      private
+
+      attr_reader :field, :record
+
+      def inline?
+        @inline
+      end
+
+      def input_id
+        "#{record.model_name.param_key}_#{field.name}"
+      end
+
+      def error_message
+        return nil unless record.respond_to?(:errors)
+
+        record.errors[field.name].first
+      end
+
+      def wrapper_classes
+        class_names("jq-field", "jq-field--error" => error_message.present?)
+      end
+
+      def span_style
+        case field.column_span
+        when :full then "grid-column: 1 / -1;"
+        when Integer then "grid-column: span #{field.column_span} / span #{field.column_span};"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/checkbox_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper(inline: true) do %>
+  <%= form.check_box field.name, class: "jq-checkbox", disabled: field.disabled? || nil %>
+<% end %>

data/app/components/jquard/schemas/fields/checkbox_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class CheckboxComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/date_picker_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.date_field field.name, **base_options %>
+<% end %>

data/app/components/jquard/schemas/fields/date_picker_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class DatePickerComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/date_time_picker_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.datetime_local_field field.name, **base_options %>
+<% end %>

data/app/components/jquard/schemas/fields/date_time_picker_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class DateTimePickerComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/field_component.rb

@@ -0,0 +1,38 @@
+module Jquard
+  module Schemas
+    module Fields
+      class FieldComponent < Jquard::ApplicationComponent
+        def initialize(component:, form:, record:)
+          @field = component
+          @form = form
+          @record = record
+        end
+
+        private
+
+        attr_reader :field, :form, :record
+
+        def wrapper(inline: false)
+          Jquard::Schemas::FieldWrapperComponent.new(field: field, record: record, inline: inline)
+        end
+
+        def input_classes
+          class_names("jq-input", "jq-input--error" => error?)
+        end
+
+        def error?
+          record.respond_to?(:errors) && record.errors[field.name].any?
+        end
+
+        def base_options
+          {
+            class: input_classes,
+            placeholder: field.placeholder,
+            required: field.required? || nil,
+            disabled: field.disabled? || nil
+          }.compact
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/hidden_component.rb

@@ -0,0 +1,11 @@
+module Jquard
+  module Schemas
+    module Fields
+      class HiddenComponent < FieldComponent
+        def call
+          form.hidden_field(field.name)
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/select_component.html.erb

@@ -0,0 +1,5 @@
+<%= render wrapper do %>
+  <%= form.select field.name, field.choices,
+        { include_blank: field.placeholder || false },
+        class: input_classes, required: field.required? || nil, disabled: field.disabled? || nil %>
+<% end %>