Input Number

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :basic_amount,
      value: 10,
      placeholder: "Basic usage",
      id: "input-number-basic-input",
      wrapper_id: "input-number-basic"
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :basic_labeled,
      label: "Quantity",
      caption: "Use arrow keys to adjust",
      value: 2
    ) %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :size_small, size: :small, placeholder: "Small") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :size_middle, size: :middle, placeholder: "Middle") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :size_large, size: :large, placeholder: "Large") %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :variant_default, placeholder: "Default") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :variant_filled, variant: :filled, placeholder: "Filled") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :variant_borderless, variant: :borderless, placeholder: "Borderless") %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :price, prefix: "$", placeholder: "Amount") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :weight, suffix: "kg", placeholder: "Weight") %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :precision,
      value: 0.05,
      step: 0.01,
      precision: 2,
      caption: "Step by 0.01"
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :formatted,
      value: 1999.99,
      prefix: "$",
      formatter: {
        style: "currency",
        currency: "USD",
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }
    ) %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :status_success, status: :success, placeholder: "Success") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :status_warning, status: :warning, placeholder: "Warning") %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(name: :status_error, status: :error, placeholder: "Error") %>
  <% end %>
<% end %>

<%= render Hakumi::Space::Component.new(direction: :vertical, size: :middle, block: true) do |space| %>
  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :range_disabled,
      value: 5,
      disabled: true
    ) %>
  <% end %>

  <% space.with_item do %>
    <%= render Hakumi::InputNumber::Component.new(
      name: :range_limited,
      label: "Range",
      caption: "Try typing 12 to see out-of-range state",
      min: 0,
      max: 10,
      value: 6
    ) %>
  <% end %>
<% end %>