Input

Gallery::Data.input_examples.each do |input|
  sample(input.label, slug: input.slug) do
    render_input(input)
  end
end

sample("Checked checkbox", slug: "checkbox") do
  render NitroKit::Input.new(
    type: :checkbox,
    id: "gallery-input-checkbox",
    name: "preferences[weekly_digest]",
    value: "1",
    checked: true,
    aria: { label: "Send weekly digest" }
  )
end
sample("File upload", slug: "file") do
  render NitroKit::Input.new(
    type: :file,
    id: "gallery-input-file",
    name: "profile[avatar]",
    accept: "image/png,image/jpeg",
    aria: { label: "Profile image" }
  )
end
sample("Range", slug: "range") do
  render NitroKit::Input.new(
    type: :range,
    id: "gallery-input-range",
    name: "notifications[volume]",
    value: 60,
    min: 0,
    max: 100,
    step: 10,
    aria: { label: "Notification volume" }
  )
end

sample("Empty", slug: "empty") do
  render_date("gallery-input-date-empty", aria: { label: "Start date" })
end
sample("Selected", slug: "selected") do
  render_date(
    "gallery-input-date-selected",
    value: Date.new(2026, 7, 13),
    aria: { label: "Start date" }
  )
end
sample("Required range", slug: "required-range") do
  render_date(
    "gallery-input-date-required",
    min: Date.new(2026, 7, 13),
    max: Date.new(2026, 8, 13),
    required: true,
    aria: { label: "Deployment date" }
  )
end
sample("Read only", slug: "readonly") do
  render_date(
    "gallery-input-date-readonly",
    value: Date.new(2026, 7, 13),
    readonly: true,
    aria: { label: "Invoice date" }
  )
end
sample("Disabled", slug: "disabled") do
  render_date(
    "gallery-input-date-disabled",
    value: Date.new(2026, 7, 13),
    disabled: true,
    aria: { label: "Archived date" }
  )
end

render NitroKit::Card.new(id: "gallery-input-date-release-card") do |card|
  card.title("Schedule production release", level: 3)
  card.body do
    form(id: "gallery-input-date-release-form", action: "/gallery/releases", method: "post") do
      render NitroKit::FieldGroup.new do
        render NitroKit::Field.new(
          nil,
          :release_date,
          as: :date,
          id: "gallery-input-date-release-date",
          name: "release[date]",
          label: "Release date",
          description: "Choose a weekday within the next thirty days.",
          value: Date.new(2026, 7, 20),
          min: Date.new(2026, 7, 13),
          max: Date.new(2026, 8, 12),
          required: true
        )
        render NitroKit::Button.new(
          "Schedule release",
          id: "gallery-input-date-schedule",
          type: :submit,
          variant: :primary
        )
      end
    end
  end
end

sample("Native month", slug: "month") do
  render NitroKit::Field.new(
    nil,
    :billing_month,
    as: :month,
    id: "gallery-input-month",
    name: "billing[month]",
    value: "2026-08",
    label: "Billing month",
    description: "Enter YYYY-MM if your browser does not provide a picker.",
    min: "2026-01",
    max: "2026-12",
    required: true
  )
end
sample("Native ISO week", slug: "week") do
  render NitroKit::Field.new(
    nil,
    :delivery_week,
    as: :week,
    id: "gallery-input-week",
    name: "delivery[week]",
    value: "2026-W32",
    label: "Delivery week",
    description: "Enter YYYY-Www if your browser does not provide a picker.",
    required: true
  )
end
sample("Exact month choice", slug: "month-select") do
  render NitroKit::Field.new(
    nil,
    :reporting_month,
    as: :select,
    id: "gallery-input-month-select",
    name: "report[month]",
    value: "2026-08",
    label: "Reporting month",
    description: "Use explicit application-owned options when only these periods are valid.",
    options: [ [ "July 2026", "2026-07" ], [ "August 2026", "2026-08" ] ]
  )
end

sample("Invalid", slug: "invalid") do
  render NitroKit::Input.new(
    type: :email,
    id: "gallery-input-invalid",
    name: "billing[email]",
    value: "not-an-email",
    required: true,
    aria: { label: "Billing email", invalid: true, describedby: "gallery-input-invalid-error" }
  )
  p(id: "gallery-input-invalid-error") { "Enter a valid email address" }
end
sample("Length limited", slug: "length") do
  render NitroKit::Input.new(
    id: "gallery-input-length",
    name: "workspace[slug]",
    value: "mothership",
    minlength: 3,
    maxlength: 24,
    aria: { label: "Workspace slug" }
  )
end
sample("Read only", slug: "readonly") do
  render NitroKit::Input.new(
    id: "gallery-input-readonly",
    value: "acct_42NK",
    readonly: true,
    aria: { label: "Account identifier" }
  )
end
sample("Disabled", slug: "disabled") do
  render NitroKit::Input.new(
    id: "gallery-input-disabled-state",
    value: "Unavailable",
    disabled: true,
    aria: { label: "Legacy setting" }
  )
end