### Install Dependencies and Start Server

Source: https://context7.com/coingaming/moon/llms.txt

Install project dependencies, npm packages for assets, and start the Phoenix LiveView server.

```bash
mix deps.get
cd assets && npm i && cd - 
iex -S mix phx.server
```

--------------------------------

### Start Phoenix server

Source: https://github.com/coingaming/moon/blob/main/README.md

Starts the Phoenix development server. This command should be run after installing dependencies.

```bash
iex -S mix phx.server
```

--------------------------------

### Install Nodejs with asdf

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs a specific version of Nodejs using asdf.

```bash
asdf install nodejs
```

--------------------------------

### Datepicker Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Demonstrates the Datepicker component for selecting date ranges, including setup in LiveView, template usage, time selection, and event handling.

```elixir
alias Moon.Components.Datepicker

# In LiveView mount
def mount(_params, _session, socket) do
  {:ok,
   assign(socket,
     start_date: Timex.beginning_of_month(Timex.today()),
     end_date: Timex.today()
   )}
end
```

```elixir
# In template
<Datepicker
  id="report-datepicker"
  start_date={@start_date}
  end_date={@end_date}
  submit="apply_dates"
  week_starts_on={1}
  ranges={~w(today yesterday thisWeek lastWeek thisMonth lastMonth)}
  show_date_inputs={true}
  testid="report-date-range"
/>
```

```elixir
# With time selection
<Datepicker
  id="booking-datepicker"
  start_date={@start_date}
  end_date={@end_date}
  submit="apply_booking_dates"
  with_time={true}
  ranges={~w(today tomorrow thisWeek nextWeek)}
/>
```

```elixir
# Handle the submit event
def handle_event("apply_dates", %{"start_date" => start_date, "end_date" => end_date}, socket) do
  {start_date, end_date} = Datepicker.validate(start_date, end_date)
  {:noreply, assign(socket, start_date: start_date, end_date: end_date)}
end
```

```elixir
# Programmatically close the picker
Datepicker.close(id: "report-datepicker")
```

--------------------------------

### Install Elixir with asdf

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs a specific version of Elixir using asdf.

```bash
asdf install elixir
```

--------------------------------

### Table Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Provides examples for the Table component, highlighting its use with configurable columns and sortable headers.

```elixir
alias Moon.Components.Table
alias Moon.Components.Table.Column  # defined via slot
```

--------------------------------

### Install asdf Erlang Plugin

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs the Erlang plugin for asdf version manager. May require specific configuration options if installation fails.

```bash
asdf plugin add erlang
```

--------------------------------

### Install all tool versions with asdf

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs all tool versions specified in the .tool-versions file using asdf. This is a prerequisite for local development.

```bash
asdf install
```

--------------------------------

### Install asdf Nodejs Plugin

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs the Nodejs plugin for asdf version manager.

```bash
asdf plugin add nodejs
```

--------------------------------

### Get project dependencies

Source: https://github.com/coingaming/moon/blob/main/README.md

Fetches and installs project dependencies using Mix, the Elixir build tool.

```bash
mix deps.get
```

--------------------------------

### Install assets dependencies

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs Node.js dependencies for the assets directory. Ensure you are in the 'assets' directory before running.

```bash
cd assets && npm i && cd -
```

--------------------------------

### Select Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Illustrates the Select component for creating dropdowns, showing standalone usage, integration with Phoenix forms, and disabled states.

```elixir
alias Moon.Components.Select

# Standalone select with label
<Select
  field={:country}
  label="Country"
  value={@selected_country}
  options={[
    [key: "United States", value: "us"],
    [key: "United Kingdom", value: "uk"],
    [key: "Germany", value: "de"]
  ]}
  prompt="Select a country…"
/>
```

```elixir
# Inside a Phoenix form
<Form for={@changeset} change="validate" submit="save">
  <Select
    field={:role}
    label="User Role"
    value={Ecto.Changeset.get_field(@changeset, :role)}
    options={[
      [key: "Admin", value: "admin"],
      [key: "Editor", value: "editor"],
      [key: "Viewer", value: "viewer"]
    ]}
  />
</Form>
```

```elixir
# Disabled select
<Select
  field={:tier}
  label="Subscription Tier"
  value="pro"
  options={[[key: "Pro", value: "pro"]]}
  disabled={true}
/>
```

--------------------------------

### Install asdf Elixir Plugin

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs the Elixir plugin for asdf version manager.

```bash
asdf plugin add elixir
```

--------------------------------

### Install Erlang with asdf

Source: https://github.com/coingaming/moon/blob/main/README.md

Installs a specific version of Erlang using asdf. Refer to the asdf-erlang plugin documentation for troubleshooting.

```bash
asdf install erlang
```

--------------------------------

### Popover Component Setup

Source: https://context7.com/coingaming/moon/llms.txt

Initializes the Popover component in a LiveView. Requires a boolean assign to control its open state.

```elixir
alias Moon.Components.Popover
alias Moon.Components.Button

# In LiveView
def mount(_params, _session, socket) do
  {:ok, assign(socket, popover_open: false)}
end
```

--------------------------------

### Avatar Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Demonstrates different configurations for the Avatar component, including image-based, initials-based, status indicators, and size variations.

```elixir
<Avatar
  image_url="https://example.com/photo.jpg"
  size="md"
/>
```

```elixir
<Avatar
  name="JD"
  size="lg"
  bg_color="bg-piccolo"
  color="text-goten"
  is_uppercase={true}
/>
```

```elixir
<Avatar
  name="KL"
  size="xl"
  is_status_active={true}
  status_origin={%StatusOrigin{vertical: "top", horizontal: "right"}}
/>
```

```elixir
<Avatar
  image_url="https://example.com/avatar.jpg"
  size="xs"
  is_rounded={true}
/>
```

```elixir
<Avatar size="2xl" />
```

--------------------------------

### Breadcrumb Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Shows how to use the Breadcrumb component for navigation, illustrating both short and long trails that auto-collapse.

```elixir
alias Moon.Components.Breadcrumb

<Breadcrumb
  id="nav-breadcrumb"
  breadcrumbs={[
    %{name: "Home", to: "/"},
    %{name: "Products", to: "/products"},
    %{name: "Elixir Books", to: nil}
  ]}
/>
```

```elixir
alias Moon.Components.Breadcrumb

<Breadcrumb
  id="deep-nav"
  breadcrumbs={[
    %{name: "Home", to: "/"},
    %{name: "Store", to: "/store"},
    %{name: "Electronics", to: "/store/electronics"},
    %{name: "Laptops", to: "/store/electronics/laptops"},
    %{name: "MacBook Pro 16", to: nil}
  ]}
  class="text-moon-14"
/>
```

--------------------------------

### Moon Button Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Demonstrates various configurations for the Moon Button component, including variants, sizes, icons, and animations. Use `on_click` for LiveView events and `value` to pass data.

```elixir
defmodule MyAppWeb.DemoLive do
  use MyAppWeb, :live_view
  alias Moon.Components.Button

  def render(assigns) do
    ~H"""
    <%!-- Primary button (default) --%> 
    <Button variant="primary" size="md" on_click="handle_save" testid="save-btn">
      Save Changes
    </Button>

    <%!-- Secondary button with left icon --%> 
    <Button variant="secondary" size="sm" left_icon="generic_plus">
      Add Item
    </Button>

    <%!-- Ghost button, full width --%> 
    <Button variant="ghost" size="lg" full_width>
      Cancel
    </Button>

    <%!-- Button with loading animation --%> 
    <Button variant="primary" size="md" animation="progress">
      Saving…
    </Button>

    <%!-- Button with success animation --%> 
    <Button variant="primary" size="md" animation="success">
      Saved
    </Button>

    <%!-- Icon-only button --%> 
    <Button variant="tertiary" size="xs" icon_only="controls_close" testid="close-btn" />

    <%!-- Button passing a value on click --%> 
    <Button
      variant="primary"
      on_click="select_item"
      value_name="item_id"
      value={42}
    >
      Select
    </Button>
    """
  end

  def handle_event("handle_save", _params, socket), do: {:noreply, socket}
  def handle_event("select_item", %{"item_id" => id}, socket) do
    {:noreply, assign(socket, :selected_id, id)}
  end
end
```

--------------------------------

### Moon Avatar Component Setup

Source: https://context7.com/coingaming/moon/llms.txt

Imports necessary components for the Moon Avatar component, including `Avatar` and `Avatar.StatusOrigin`.

```elixir
alias Moon.Components.Avatar
alias Moon.Components.Avatar.StatusOrigin
```

--------------------------------

### Chip Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Illustrates the usage of the Chip component for interactive filters or tags, including variations with icons, sizes, and variants.

```elixir
alias Moon.Components.Chip

<Chip
  id="filter-status"
  on_click="toggle_filter"
  value_name="filter"
  value="active"
  active={@filters.active}
  testid="status-chip"
>
  Active
</Chip>
```

```elixir
alias Moon.Components.Chip

<Chip
  size="medium"
  left_icon="generic_calendar"
  right_icon="controls_chevron_down"
  on_click="open_date_picker"
  active={@date_picker_open}
>
  Date Range
</Chip>
```

```elixir
alias Moon.Components.Chip

<Chip
  variant="ghost"
  size="small"
  icon_only="controls_close"
  on_click="clear_selection"
/>
```

```elixir
<Chip is_stroke={true} active={true} size="medium">
  Selected
</Chip>
```

--------------------------------

### Example TextInput component with icons

Source: https://github.com/coingaming/moon/blob/main/README.md

Demonstrates the usage of the Moon TextInput component with left and right icons. The right icon includes an 'on_click' event handler.

```elixir
alias Moon.Components.TextInput
alias Moon.Assets.Icons.IconCloseRounded
alias Moon.Assets.Icons.IconZoom

<TextInput placeholder="Search for dashboard, segments and more">
  <:left_icon>
    <IconZoom>
  </:left_icon>
  <:right_icon>
    <IconCloseRounded on_click="clear_search">
  </:right_icon>
</TextInput>
```

--------------------------------

### Generated Component Template Structure

Source: https://context7.com/coingaming/moon/llms.txt

Example structure for a generated stateless component. Includes prop declarations, slot usage, and rendering logic.

```elixir
defmodule Moon.Design.Form.SomethingAwesome do
  use Moon.StatelessComponent

  # Declare typed props
  prop(label, :string)
  prop(class, :css_class)
  slot(default)

  def render(assigns) do
    ~F"""
    <div class={@class}>
      <#slot />
    </div>
    """
  end
end
```

--------------------------------

### Loader Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Showcases different size and color variants of the Loader component, including its use within a conditional rendering block.

```elixir
alias Moon.Components.Loader

# Default medium loader in hit color
<Loader />
```

```elixir
# Small loader in piccolo (brand) color
<Loader size="xsmall" color="piccolo" />
```

```elixir
# Large loader in roshi (success) color
<Loader size="large" color="roshi" />
```

```elixir
# Loader inside a loading state panel
<div :if={@loading} class="flex items-center justify-center h-32">
  <Loader size="medium" color="hit" />
</div>
```

--------------------------------

### Moon Accordion Component Examples

Source: https://context7.com/coingaming/moon/llms.txt

Showcases the Moon Accordion component with different sizes, states (open/closed, disabled), and content structures. Uses client-side JS commands for toggling.

```elixir
alias Moon.Components.Accordion

# Basic accordion, closed by default
<Accordion id="faq-1" size="md">
  <:title>What is Moon Design System?</:title>
  <:content>
    <p class="text-trunks text-moon-14">
      Moon is a component-based design system built with Surface and Tailwind CSS.
    </p>
  </:content>
</Accordion>

# Pre-opened accordion with large size and extra header content
<Accordion id="settings-panel" size="xl" open_by_default={true}>
  <:title>Advanced Settings</:title>
  <:header_content>
    <span class="text-moon-12 text-trunks">3 items</span>
  </:header_content>
  <:content>
    <div class="space-y-2 mt-2">
      <p>Setting A</p>
      <p>Setting B</p>
    </div>
  </:content>
</Accordion>

# Disabled accordion
<Accordion id="locked-1" size="sm" disabled={true}>
  <:title>Locked Section</:title>
  <:content><p>Hidden content</p></:content>
</Accordion>
```

--------------------------------

### Run Test Suite

Source: https://github.com/coingaming/moon/blob/main/CONTRIBUTING.md

Execute the project's test suite using this command. Ensure all tests pass before submitting a pull request. New components should also include corresponding tests.

```sh
mix test
```

--------------------------------

### Generate New Component

Source: https://github.com/coingaming/moon/blob/main/CONTRIBUTING.md

Use this command to generate a new component, including its page and router/menu integration instructions. Ensure the component name follows the 'Namespace.SubNamespace.ComponentName' format.

```sh
mix moon.gen.component Form.SomethingAwesome
```

--------------------------------

### Popover Component Usage

Source: https://context7.com/coingaming/moon/llms.txt

Demonstrates how to use the Popover component with content and event handlers for toggling and closing.

```elixir
<Popover
  id="user-menu-popover"
  show={@popover_open}
  placement="bottom-end"
  on_close="close_popover"
  testid="user-menu"
>
  <Button variant="ghost" on_click="toggle_popover" icon_only="generic_user" />

  <:content>
    <div class="bg-goku rounded-moon-s-sm shadow-lg p-2 w-48">
      <a href="/profile" class="block px-3 py-2 text-moon-14 hover:bg-gohan rounded">Profile</a>
      <a href="/settings" class="block px-3 py-2 text-moon-14 hover:bg-gohan rounded">Settings</a>
      <button class="block w-full text-left px-3 py-2 text-moon-14 text-chichi hover:bg-gohan rounded">
        Sign out
      </button>
    </div>
  </:content>
</Popover>
```

```elixir
def handle_event("toggle_popover", _, socket) do
  {:noreply, assign(socket, popover_open: !socket.assigns.popover_open)}
end
```

```elixir
def handle_event("close_popover", _, socket) do
  {:noreply, assign(socket, popover_open: false)}
end
```

--------------------------------

### Basic Table Component

Source: https://context7.com/coingaming/moon/llms.txt

Renders a table with specified columns and handles row clicks and sorting. Requires item data and event handlers for sorting and selection.

```elixir
<Table
  id="users-table"
  items={@users}
  testid="users-table"
  row_click="select_user"
  selected={"#{@selected_user_id}"}
  sort_key={@sort_key}
  sort_dir={@sort_dir}
  sorting_click="sort_table">
  <:cols name="id" label="ID" sortable width="w-16">
    {item.id}
  </:cols>
  <:cols name="name" label="Name" sortable>
    <span class="font-semibold">{item.name}</span>
  </:cols>
  <:cols name="email" label="Email">
    {item.email}
  </:cols>
  <:cols name="status" label="Status">
    <span class={"px-2 py-0.5 rounded text-moon-12",
      "bg-roshi-10 text-roshi": item.status == :active,
      "bg-chichi-10 text-chichi": item.status == :inactive
    }>
      {item.status}
    </span>
  </:cols>
</Table>
```

--------------------------------

### Add Moon to Project Dependencies

Source: https://context7.com/coingaming/moon/llms.txt

Add Moon, Surface, and Phoenix LiveView to your project's dependencies in `mix.exs`.

```elixir
defp deps do
  [
    {:moon, "~> 2.91"},
    {:surface, "~> 0.11.0"},
    {:phoenix_live_view, "~> 0.20"}
  ]
end
```

--------------------------------

### Register Moon Components with Surface

Source: https://context7.com/coingaming/moon/llms.txt

Register Moon components for use with Surface UI in `config/surface.exs`.

```elixir
import Config
config :surface, :components, []
```

--------------------------------

### Autolayout Components Imports

Source: https://context7.com/coingaming/moon/llms.txt

Imports for Moon's autolayout components, including TopToDown, LeftToRight, and PullAside.

```elixir
alias Moon.Autolayouts.TopToDown
alias Moon.Autolayouts.LeftToRight
alias Moon.Autolayouts.PullAside
```

--------------------------------

### Form Component for Registration

Source: https://context7.com/coingaming/moon/llms.txt

Demonstrates the Moon Form component wrapping Select and Checkbox inputs, with event handlers for validation and submission.

```elixir
alias Moon.Components.Form
alias Moon.Components.Select
alias Moon.Components.Checkbox

<Form
  id="registration-form"
  for={@changeset}
  change="validate_form"
  submit="submit_form"
  autocomplete="off"
  testid="registration-form"
>
  <div class="space-y-4">
    <Select
      field={:role}
      label="Role"
      value={Ecto.Changeset.get_field(@changeset, :role)}
      options={[
        [key: "Admin", value: "admin"],
        [key: "User", value: "user"]
      ]}
    />

    <Checkbox field={:active} checked={Ecto.Changeset.get_field(@changeset, :active)}>
      Active account
    </Checkbox>

    <button type="submit" class="btn-primary px-4 py-2 rounded-moon-s-sm">
      Register
    </button>
  </div>
</Form>
```

```elixir
def handle_event("validate_form", %{"user" => params}, socket) do
  changeset = User.changeset(%User{}, params) |> Map.put(:action, :validate)
  {:noreply, assign(socket, changeset: changeset)}
end
```

```elixir
def handle_event("submit_form", %{"user" => params}, socket) do
  case Accounts.create_user(params) do
    {:ok, _user} -> {:noreply, push_navigate(socket, to: "/dashboard")}
    {:error, changeset} -> {:noreply, assign(socket, changeset: changeset)}
  end
end
```

--------------------------------

### Drawer Component Usage

Source: https://context7.com/coingaming/moon/llms.txt

Implements a side-panel drawer using Moon.Components.Drawer. The Drawer.Dialog submodule structures the content within the drawer. Visibility is controlled by a boolean assign.

```elixir
alias Moon.Components.Drawer
alias Moon.Components.Drawer.Dialog
alias Moon.Components.Button

# In LiveView
def mount(_params, _session, socket) do
  {:ok, assign(socket, show_drawer: false)}
end

# In template
<Button variant="secondary" on_click="open_drawer">Edit Profile</Button>

<Drawer :if={@show_drawer} id="profile-drawer" testid="profile-drawer">
  <Dialog close="close_drawer">
    <:title>Edit Profile</:title>
    <:content>
      <div class="space-y-4">
        <label class="block text-moon-14 text-bulma">Name</label>
        <input class="w-full border border-beerus rounded-moon-i-sm px-3 py-2" value={@user.name} />
      </div>
    </:content>
    <:footer>
      <div class="flex gap-2">
        <Button variant="primary" full_width>Save</Button>
        <Button variant="ghost" on_click="close_drawer" full_width>Cancel</Button>
      </div>
    </:footer>
  </Dialog>
</Drawer>
```

--------------------------------

### Drawer Event Handlers

Source: https://context7.com/coingaming/moon/llms.txt

Handles opening and closing the drawer component. Updates the 'show_drawer' assign to control the drawer's visibility.

```elixir
def handle_event("open_drawer", _, socket), do: {:noreply, assign(socket, show_drawer: true)}
def handle_event("close_drawer", _, socket), do: {:noreply, assign(socket, show_drawer: false)}
```

--------------------------------

### ProgressLinear Component Usage

Source: https://context7.com/coingaming/moon/llms.txt

Illustrates the ProgressLinear component for displaying progress, including static values and dynamic binding to LiveView state.

```elixir
alias Moon.Components.ProgressLinear

# 60% progress
<ProgressLinear value={60} />
```

```elixir
# Dynamic progress bound to LiveView state
<div class="w-full space-y-1">
  <span class="text-moon-12 text-trunks">{@upload_progress}% uploaded</span>
  <ProgressLinear value={@upload_progress} />
</div>
```

```elixir
# Handle progress updates
def handle_info({:upload_progress, pct}, socket) do
  {:noreply, assign(socket, upload_progress: pct)}
end
```

--------------------------------

### Configure Tailwind CSS for Moon

Source: https://context7.com/coingaming/moon/llms.txt

Configure Tailwind CSS in `assets/tailwind.config.js` to include Moon's design tokens and presets.

```javascript
module.exports = {
  content: ["../lib/**/*.ex", "../lib/**/*.heex"],
  presets: [require("./ds-moon-preset")],  // Moon design tokens
  plugins: [require("@tailwindcss/forms")],
};
```

--------------------------------

### Checkbox Component Integration

Source: https://context7.com/coingaming/moon/llms.txt

Shows how to use the Checkbox component within a Surface Form for form context integration and standalone with click events.

```elixir
alias Moon.Components.Checkbox
alias Moon.Components.Form

# Inside a Surface Form
<Form for={@changeset} change="validate">
  <Checkbox field={:terms_accepted} checked={Ecto.Changeset.get_field(@changeset, :terms_accepted)}>
    I agree to the Terms of Service
  </Checkbox>

  <Checkbox
    field={:newsletter}
    checked={Ecto.Changeset.get_field(@changeset, :newsletter)}
    disabled={false}
  >
    Subscribe to newsletter
  </Checkbox>
</Form>
```

```elixir
# Standalone with click event
<Checkbox
  id="remember-me"
  field={:remember_me}
  checked={@remember_me}
  click="toggle_remember"
/>
```

```elixir
def handle_event("toggle_remember", _params, socket) do
  {:noreply, assign(socket, remember_me: !socket.assigns.remember_me)}
end
```

--------------------------------

### Pagination Component Usage

Source: https://context7.com/coingaming/moon/llms.txt

Integrates the Pagination component in a LiveView template. Requires current and total page numbers, and an event handler for page changes.

```elixir
alias Moon.Components.Pagination

# In LiveView mount
def mount(_params, _session, socket) do
  {:ok, assign(socket, current_page: 1, total_pages: 20)}
end

# In template
<Pagination
  current_page_number={@current_page}
  total_pages={@total_pages}
  range_before={2}
  range_after={2}
  size="xsmall"
  previous_button_label="← Prev"
  next_button_label="Next →"
  on_change="go_to_page"
/>
```

--------------------------------

### Format code with Mix and Surface

Source: https://github.com/coingaming/moon/blob/main/README.md

Formats Elixir code using Mix and Surface formatters. This ensures consistent code style across the project.

```bash
mix format
```

```bash
mix surface.format
```

--------------------------------

### Modal Dialog Event Handlers

Source: https://context7.com/coingaming/moon/llms.txt

Manages the modal's visibility and actions. Handles opening, closing, and confirming deletion, updating the 'show_modal' assign accordingly.

```elixir
# Handle events
def handle_event("open_modal", _, socket), do: {:noreply, assign(socket, show_modal: true)}
def handle_event("close_modal", _, socket), do: {:noreply, assign(socket, show_modal: false)}
def handle_event("confirm_delete", _, socket) do
  # perform delete...
  {:noreply, assign(socket, show_modal: false)}
end
```

--------------------------------

### Pagination Event Handler

Source: https://context7.com/coingaming/moon/llms.txt

Handles the 'go_to_page' event from the Pagination component. Updates the current page number in the socket assigns.

```elixir
def handle_event("go_to_page", %{"page" => page}, socket) do
  page = String.to_integer(page)
  {:noreply, assign(socket, current_page: page)}
end
```

--------------------------------

### PullAside Two-Column Layout Component

Source: https://context7.com/coingaming/moon/llms.txt

Creates a two-column layout where the left column can grow to fill space. Accepts left_grow and class attributes.

```html
<PullAside left_grow class="w-full px-4 py-2">
  <:left>
    <span class="text-moon-14 font-semibold text-bulma">Subscription Plan</span>
  </:left>
  <:right>
    <Button variant="secondary" size="sm">Upgrade</Button>
  </:right>
</PullAside>
```

--------------------------------

### TopToDown Vertical Stack Component

Source: https://context7.com/coingaming/moon/llms.txt

Used for creating vertical stacks with configurable gaps. Accepts gap and class attributes.

```html
<TopToDown gap="gap-4" class="p-6">
  <h2 class="text-moon-18 font-semibold">Dashboard</h2>
  <p class="text-trunks">Your metrics at a glance.</p>
  <Button variant="primary">View Report</Button>
</TopToDown>
```

--------------------------------

### Table Event Handlers

Source: https://context7.com/coingaming/moon/llms.txt

Handles 'sort_table' and 'select_user' events for the Table component. Updates socket assigns for sorting direction and selected user.

```elixir
def handle_event("sort_table", %{"sort-key" => key, "sort-dir" => dir}, socket) do
  {:noreply, assign(socket, sort_key: key, sort_dir: dir)}
end

def handle_event("select_user", %{"selected" => id}, socket) do
  {:noreply, assign(socket, selected_user_id: id)}
end
```

--------------------------------

### Modal Dialog Component Usage

Source: https://context7.com/coingaming/moon/llms.txt

Implements a modal dialog using Moon.Components.Dialog.Modal. Controls visibility via a boolean assign and uses named slots for title, content, and footer.

```elixir
alias Moon.Components.Dialog.Modal
alias Moon.Components.Button

# In LiveView
def mount(_params, _session, socket) do
  {:ok, assign(socket, show_modal: false)}
end

# In template
<Button variant="primary" on_click="open_modal">Open Modal</Button>

<Modal
  :if={@show_modal}
  id="confirm-modal"
  testid="confirm-modal"
  close="close_modal">
  <:title>Confirm Delete</:title>
  <:content>
    <p class="text-trunks">Are you sure you want to delete this item? This action cannot be undone.</p>
  </:content>
  <:footer>
    <div class="flex gap-3 justify-end">
      <Button variant="secondary" on_click="close_modal">Cancel</Button>
      <Button variant="primary" on_click="confirm_delete">Delete</Button>
    </div>
  </:footer>
</Modal>
```

--------------------------------

### LeftToRight Horizontal Row Component

Source: https://context7.com/coingaming/moon/llms.txt

Used for creating horizontal rows. Accepts class attributes for alignment.

```html
<LeftToRight class="items-center">
  <Avatar name="AL" size="sm" />
  <span class="text-moon-14 text-bulma">Alex Lee</span>
</LeftToRight>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.