Module: StimulusPlumbers::Themes::Tailwind::Form::Input

Included in:

StimulusPlumbers::Themes::TailwindTheme

Defined in:

lib/stimulus_plumbers/themes/tailwind/form/input.rb

Constant Summary

INPUT_BASE =

── Standalone input ──────────────────────────────────────────────────

%w[
  w-full rounded-(--sp-radius-md) border px-(--sp-space-3) py-(--sp-space-2)
  text-(length:--sp-text-sm) text-(--sp-color-fg) bg-(--sp-color-bg)
  focus:outline-none focus:ring-(length:--sp-focus-ring-width) focus:ring-offset-0
].freeze

INPUT_DEFAULT =

%w[
  border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
  focus:ring-(--sp-focus-ring-color)
].freeze

INPUT_ERROR =

%w[border-(--sp-color-error) focus:ring-(--sp-color-error)].freeze

FLOATING_INPUT_BASE =

── Floating input ────────────────────────────────────────────────────

%w[
  peer w-full text-(length:--sp-text-sm) text-(--sp-color-fg) appearance-none
  focus:outline-none focus:ring-0
  focus-visible:outline-none focus-visible:ring-0
].freeze

FLOATING_INPUT_TYPES =

{
  filled:   %w[
    rounded-t-(--sp-radius-md) px-(--sp-space-2-5) pb-(--sp-space-2-5) pt-(--sp-space-5)
    bg-(--sp-color-bg-muted) border-0 border-b-2
  ].freeze,
  outlined: %w[
    px-(--sp-space-2-5) pb-(--sp-space-2-5) pt-(--sp-space-4)
    bg-transparent rounded-(--sp-radius-md) border
  ].freeze,
  standard: %w[
    py-(--sp-space-2-5) px-0
    bg-transparent border-0 border-b-2
  ].freeze
}.freeze

FLOATING_INPUT_DEFAULT =

%w[
  border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
  focus:border-(--sp-color-primary)
].freeze

FLOATING_INPUT_ERROR =

%w[border-(--sp-color-error)].freeze

INPUT_GROUP_BASE =

── Input group ───────────────────────────────────────────────────────

%w[flex items-center overflow-hidden rounded-(--sp-radius-md) border].freeze

INPUT_GROUP_BORDER =

{ error: "border-(--sp-color-error)", default: "border-(--sp-color-muted-fg)" }.freeze

FLOATING_INPUT_GROUP_BASE =

── Floating input group ──────────────────────────────────────────────

%w[flex items-center overflow-hidden peer].freeze

FLOATING_INPUT_GROUP_TYPES =

{
  filled:   %w[rounded-t-(--sp-radius-md) bg-(--sp-color-bg-muted) border-0 border-b-2].freeze,
  outlined: %w[rounded-(--sp-radius-md) border].freeze,
  standard: %w[rounded-none bg-transparent border-0 border-b-2].freeze
}.freeze

FLOATING_INPUT_GROUP_DEFAULT =

%w[
  border-(--sp-color-muted-fg) hover:border-(--sp-color-fg)
  focus-within:border-(--sp-color-primary)
].freeze

FLOATING_INPUT_GROUP_ERROR =

%w[border-(--sp-color-error)].freeze

COMBOBOX_INPUT =

── Combobox wrappers ─────────────────────────────────────────────────

%w[
  [&>input:not([type=hidden])]:border-0
  [&>input:not([type=hidden])]:rounded-none
  [&>input:not([type=hidden])]:px-0
  [&>input:not([type=hidden])]:py-0
  [&>input:not([type=hidden])]:bg-transparent
  [&>input:not([type=hidden])]:shadow-none
  [&>input:not([type=hidden])]:focus:ring-0
].freeze

COMBOBOX_TRIGGER_GROUP =

%w[
  [&>div:first-child]:border-0
  [&>div:first-child]:rounded-none
  [&>div:first-child]:px-0
  [&>div:first-child]:py-0
  [&>div:first-child]:focus-within:ring-0
].freeze

CHECKBOX_TYPES =

── Choice inputs ─────────────────────────────────────────────────────

{
  default: %w[
    size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
    border border-(--sp-color-border) bg-(--sp-color-muted)
    focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
    disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
  ].freeze,
  button:  %w[
    size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
    border border-(--sp-color-border) bg-(--sp-color-muted)
    focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
    disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
  ].freeze,
  card:    %w[
    size-(--sp-control-size) rounded-(--sp-radius-sm) shrink-0
    border border-(--sp-color-border) bg-(--sp-color-muted)
    checked:border-(--card-ring)
    focus:ring-(length:--sp-focus-ring-width) focus:ring-(--card-ring) focus:outline-none
    disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer
  ].freeze
}.freeze

RADIO_TYPES =

{
  default: %w[
    size-(--sp-control-size) rounded-full shrink-0
    [accent-color:var(--sp-color-primary)] cursor-pointer
    focus:ring-(length:--sp-focus-ring-width) focus:ring-(--sp-focus-ring-color) focus:outline-none
    disabled:opacity-50 disabled:cursor-not-allowed
  ].freeze,
  button:  %w[hidden].freeze,
  card:    %w[hidden].freeze
}.freeze

BUTTON_REVEAL =

── Utility buttons ───────────────────────────────────────────────────

[
  *Control::BASE,
  "inline-flex items-center justify-center",
  "focus-visible:ring-(--sp-focus-ring-color)",
  "self-stretch px-(--sp-space-2) border-0 bg-transparent cursor-pointer text-(--sp-color-muted-fg)",
  "rounded-(--sp-radius-sm) hover:bg-(--sp-color-muted) hover:text-(--sp-color-fg)"
].freeze

BUTTON_CLEAR =

[
  *Control::BASE,
  "inline-flex items-center justify-center",
  "focus-visible:ring-(--sp-focus-ring-color)",
  "self-stretch px-(--sp-space-2) border-0 bg-transparent cursor-pointer text-(--sp-color-muted-fg)",
  "rounded-(--sp-radius-sm) hover:bg-(--sp-color-muted) hover:text-(--sp-color-fg)"
].freeze