### Install Dependencies and Start Server

Source: https://github.com/bluzky/salad_ui/blob/main/storybook/README.md

Installs project dependencies using Mix and starts the Phoenix server. This is a crucial step to run the Salad UI Storybook locally.

```bash
mix deps.get
mix phx.server
```

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

### Using Salad UI Components (Quick Setup)

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

An example of how to import and use Salad UI components like Button and Dialog within a LiveView module after performing a quick setup.

```elixir
defmodule MyAppWeb.PageLive do
  use MyAppWeb, :live_view
  import SaladUI.Button
  import SaladUI.Dialog

  def render(_) do
    ~H"""
    <.button>Click me</.button>
    <.dialog id="my-dialog">
      <.dialog_content>
        <p>Hello world!</p>
      </.dialog_content>
    </.dialog>
    """
  end
end
```

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

### Using Salad UI Components (Local Installation)

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

An example of importing and using Salad UI components from a local project path after running `mix salad.install`. Components are imported from a custom path like `MyAppWeb.Components.UI`.

```elixir
defmodule MyAppWeb.PageLive do
  use MyAppWeb, :live_view
  import MyAppWeb.Components.UI.Button
  import MyAppWeb.Components.UI.Dialog

  def render(_) do
    ~H"""
    <.button>Click me</.button>
    <.dialog id="my-dialog">
      <.dialog_content>
        <p>Hello world!</p>
      </.dialog_content>
    </.dialog>
    """
  end
end
```

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

### Server-Side Event Handling for JS Execution (Elixir)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Demonstrates how to trigger client-side JavaScript from the Elixir server using `push_event/3`. This example shows how to close a sheet component by sending a `js-exec` event with the target selector and attribute.

```elixir
@impl true
def handle_event("update", params, socket) do
  # your logic
  {:noreply, push_event(socket, "js-exec", %{to: "#my-sheet", attr: "phx-hide-sheet"})}
end
```

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

### Install tailwindcss-animate (npm/yarn)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Installs the `tailwindcss-animate` package as a development dependency using either npm or yarn. This package is required for certain animations and transitions used by Salad UI.

```shell
cd assets
npm i -D tailwindcss-animate
# or yarn
yarn add -D tailwindcss-animate
```

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

### Start Storybook for Development

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

Instructions for setting up and running the Salad UI development environment using the provided storybook. This involves cloning the repository, navigating to the storybook directory, and starting the Phoenix server.

```bash
cd storybook
mix phx.server
```

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

### JavaScript State Machine Configuration

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Provides an example of a JavaScript state machine configuration for a component. It defines states, entry/exit handlers for each state, and transitions triggered by specific events.

```javascript
stateMachine: {
  state1: {
    enter: "onState1Enter",        # Called when entering state
    exit: "onState1Exit",          # Called when leaving state
    transitions: {
      event: "state2"              # event -> new state
    }
  }
}
```

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

### Dispatching Commands with SaladUI.JS

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Demonstrates how to use `SaladUI.JS.dispatch_command/3` in HEEx templates to trigger actions in other components, such as opening dialogs or updating charts. It shows examples of single commands, commands with details, and chaining multiple commands.

```heex
<.button phx-click={SaladUI.JS.dispatch_command("open", to: "#user-dialog")}>
  Open Dialog
</.button>

<.button phx-click={SaladUI.JS.dispatch_command("update",
  to: "#sales-chart",
  detail: %{data: @new_chart_data})}>
  Refresh Chart
</.button>

<.button phx-click={
  %JS{}
  |> SaladUI.JS.dispatch_command("toggle", to: "#sidebar")
  |> SaladUI.JS.dispatch_command("close", to: "#dropdown")
}>
  Toggle Layout
</.button>

<.button phx-click={SaladUI.JS.dispatch_command("highlight",
  to: "#data-table",
  detail: %{row_id: @selected_row})}>
  Highlight Row
</.button>

<.button phx-click={SaladUI.JS.dispatch_command("filter",
  to: "#product-list",
  detail: %{
    filters: %{
      category: @category,
      price_range: %{min: @min_price, max: @max_price},
      in_stock: true
    }
  })}>
  Apply Filters
</.button>

<.button phx-click={
  %JS{} 
  |> SaladUI.JS.dispatch_command("close", to: "#main-dialog")
  |> SaladUI.JS.dispatch_command("open", to: "#confirmation-dialog")
  |> SaladUI.JS.dispatch_command("focus", to: "#cancel-button")
}>
  Show Confirmation
</.button>
```

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

### Dark/Light Mode Body Styling (CSS)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Applies default background and foreground colors for dark and light mode support, ensuring consistent theming across the application. This should be added to the `app.css` file.

```css
body {
    @apply bg-background text-foreground;
}
```

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

### SaladUI State Machine Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

An example demonstrating the structure of state machine configuration, including states like 'closed', 'open', 'loading', and 'error' with their respective transitions and handlers.

```js
stateMachine: {
  closed: {
    enter: "onClosedEnter",
    exit: "onClosedExit",
    transitions: {
      open: "open",
      toggle: "open"
    }
  },
  open: {
    enter: "onOpenEnter",
    transitions: {
      close: "closed",
      toggle: "closed"
    }
  },
  loading: {
    enter: () => console.log("Loading started"),
    transitions: {
      complete: "idle",
      error: "error"
    }
  }
}
```

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

### Tailwind CSS Configuration (JavaScript)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Configures Tailwind CSS to include Salad UI components, extend the theme with custom colors from `tailwind.colors.json`, and apply necessary plugins like `@tailwindcss/typography` and `tailwindcss-animate`.

```javascript
module.exports = {
  content: [
    "../deps/salad_ui/lib/**/*.ex",
    ],
  theme: {
    extend: {
      colors: require("./tailwind.colors.json"),
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("tailwindcss-animate"),
    ...
  ]
}
```

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

### Local Installation with `mix salad.install`

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

Shows the `mix salad.install` command for copying Salad UI component files into your project for customization. It supports custom prefixes and color schemes.

```bash
# Default installation
mix salad.install

# With custom prefix and color scheme
mix salad.install --prefix MyUI --color-scheme slate
```

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

### Complete Component Configuration Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

A comprehensive example of a component configuration object, including state machine definitions, event mappings (mouse and keyboard), visibility rules, and ARIA configurations for a listbox component.

```js
getComponentConfig() {
  return {
    stateMachine: {
      closed: {
        enter: "onClosedEnter",
        transitions: {
          open: "open",
          toggle: "open"
        }
      },
      open: {
        enter: "onOpenEnter",
        transitions: {
          close: "closed",
          toggle: "closed",
          select: "closed"
        }
      }
    },

    events: {
      closed: {
        mouseMap: {
          trigger: { click: "open" }
        },
        keyMap: {
          Enter: "open",
          " ": "open",
          ArrowDown: "open"
        }
      },
      open: {
        keyEventTarget: "content",
        mouseMap: {
          overlay: { click: "close" },
          item: { click: "selectItem" }
        },
        keyMap: {
          Escape: "close",
          ArrowDown: () => this.navigateNext(),
          ArrowUp: () => this.navigatePrev()
        }
      }
    },

    hiddenConfig: {
      closed: {
        content: true,
        overlay: true
      },
      open: {
        content: false,
        overlay: false
      }
    },

    ariaConfig: {
      trigger: {
        all: { haspopup: "listbox" },
        open: { expanded: "true" },
        closed: { expanded: "false" }
      },
      content: {
        all: { role: "listbox" }
      },
      item: {
        all: { role: "option" },
        selected: { selected: "true" },
        unselected: { selected: "false" }
      }
    }
  };
}
```

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

### Server-Triggered JavaScript Execution (JavaScript)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Adds an event listener to the window for `phx:js-exec` events. This allows the server to trigger client-side JavaScript actions by selecting elements and executing attributes, similar to `JS.exec/2`.

```javascript
window.addEventListener("phx:js-exec", ({ detail }) => {
  document.querySelectorAll(detail.to).forEach((el) => {
    liveSocket.execJS(el, el.getAttribute(detail.attr));
  });
});
```

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

### Quick Setup with `mix salad.setup`

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

Demonstrates the `mix salad.setup` command for a quick integration of Salad UI, allowing immediate use of components without local customization. It configures Tailwind CSS, JavaScript hooks, and components.

```bash
mix salad.setup
```

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

### Install Heroicons v2.0.16

Source: https://github.com/bluzky/salad_ui/blob/main/storybook/assets/vendor/heroicons/UPGRADE.md

This command downloads the Heroicons v2.0.16 archive from GitHub, extracts it, and strips the top-level directory to install the optimized icons. It requires `curl` and `tar` to be installed.

```shell
export HERO_VSN="2.0.16" ; \
  curl -L "https://github.com/tailwindlabs/heroicons/archive/refs/tags/v${HERO_VSN}.tar.gz" | \
  tar -xvz --strip-components=1 heroicons-${HERO_VSN}/optimized
```

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

### SaladUI Hidden Configuration Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

An example of `hiddenConfig` showing how to control the visibility of parts like 'content', 'overlay', and 'loading-spinner' across different states ('closed', 'open', 'loading', 'error').

```js
hiddenConfig: {
  closed: {
    content: true,        // Hide content when closed
    overlay: true,
    "loading-spinner": true
  },
  open: {
    content: false,       // Show content when open
    overlay: false,
    "close-button": false
  },
  loading: {
    content: true,
    "loading-spinner": false,  // Show spinner when loading
    "error-message": true
  },
  error: {
    content: true,
    "loading-spinner": true,
    "error-message": false     // Show error when in error state
  }
}
```

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

### Handling Commands in a Salad UI Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Provides an example of a `DataTableComponent` class that extends the base `Component` and implements the `handleCommand` method to process specific commands like 'highlight', 'filter', and 'reset', including logic for UI manipulation.

```javascript
class DataTableComponent extends Component {
  handleCommand(command, params) {
    switch (command) {
      case "highlight":
        this.highlightRow(params.row_id);
        return true;

      case "filter":
        this.applyFilters(params.filters);
        return true;

      case "reset":
        this.clearFilters();
        this.clearHighlight();
        return true;

      default:
        return super.handleCommand(command, params);
    }
  }

  highlightRow(rowId) {
    // Remove previous highlights
    this.el.querySelectorAll('.highlighted').forEach(row => {
      row.classList.remove('highlighted');
    });

    // Highlight specific row
    const targetRow = this.el.querySelector(`[data-row-id="${rowId}"]`);
    if (targetRow) {
      targetRow.classList.add('highlighted');
    }
  }

  applyFilters(filters) {
    this.currentFilters = filters;
    this.filterRows();
    this.updateUI();
  }
}
```

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

### Custom Tailwind Colors Configuration (JSON)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Defines custom color palettes for Tailwind CSS by specifying default and foreground colors for various UI elements. This JSON file should be placed in the assets directory.

```json
{
  "accent": {
    "DEFAULT": "hsl(var(--accent))",
    "foreground": "hsl(var(--accent-foreground))"
  },
  "background": "hsl(var(--background))",
  "border": "hsl(var(--border))",
  "card": {
    "DEFAULT": "hsl(var(--card))",
    "foreground": "hsl(var(--card-foreground))"
  },
  "destructive": {
    "DEFAULT": "hsl(var(--destructive))",
    "foreground": "hsl(var(--destructive-foreground))"
  },
  "foreground": "hsl(var(--foreground))",
  "input": "hsl(var(--input))",
  "muted": {
    "DEFAULT": "hsl(var(--muted))",
    "foreground": "hsl(var(--muted-foreground))"
  },
  "popover": {
    "DEFAULT": "hsl(var(--popover))",
    "foreground": "hsl(var(--popover-foreground))"
  },
  "primary": {
    "DEFAULT": "hsl(var(--primary))",
    "foreground": "hsl(var(--primary-foreground))"
  },
  "ring": "hsl(var(--ring))",
  "secondary": {
    "DEFAULT": "hsl(var(--secondary))",
    "foreground": "hsl(var("--secondary-foreground))"
  }
}
```

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

### Salad UI Component Key Requirements

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Lists the essential attributes and registration methods required for Salad UI components to function correctly, including `phx-hook`, `data-component`, and `SaladUI.register()`.

```text
1. `phx-hook="SaladUI"` - Required
2. `data-component="name"` - Component identifier, match with component name registered with SaladUI
3. `data-part="root"` - On main element
4. `SaladUI.register()` - Register component
5. `getComponentConfig()` - Return state machine config
```

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

### SaladUI Mouse Events Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

An example of configuring mouse event handlers for the 'closed' and 'open' states, mapping events like 'click' and 'mouseenter' to actions or handler functions.

```js
events: {
  closed: {
    mouseMap: {
      trigger: {
        click: "open",                    // Trigger transition
        mouseenter: "handleMouseEnter",   // Call method
        mouseleave: (event) => {          // Inline function
          this.clearHover();
        }
      },
      "menu-item": {
        click: "selectItem",
        mouseenter: "highlightItem"
      }
    }
  },
  open: {
    mouseMap: {
      overlay: { click: "close" },
      "close-button": { click: "close" },
      content: {
        click: (event) => event.stopPropagation()
      }
    }
  }
}
```

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

### Handle Server Commands in JavaScript Components

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Shows how JavaScript components receive and process commands sent from the LiveView server via the `handleCommand()` method. Includes a switch statement for different command types.

```javascript
class ChartComponent extends Component {
  handleCommand(command, params) {
    switch (command) {
      case "update":
        this.updateChart(params.data, params.options);
        return true;

      case "reset":
        this.resetChart();
        return true;

      case "highlight":
        this.highlightDataPoint(params.index);
        return true;

      default:
        return super.handleCommand(command, params);
    }
  }

  updateChart(data, options = {}) {
    this.chart.data = data;
    if (options.animation) {
      this.chart.update('active');
    } else {
      this.chart.update('none');
    }
  }
}
```

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

### SaladUI Transition Functions

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Examples of defining transitions within the state machine, including simple state changes, conditional transitions based on parameters, and complex logic.

```js
transitions: {
  // Simple transition
  open: "open",

  // Conditional transition
  toggle: (params) => {
    return this.state === "open" ? "closed" : "open";
  },

  // Complex transition logic
  submit: (params) => {
    if (params.isValid) {
      return "success";
    } else {
      return "error";
    }
  }
}
```

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

### Use Elixir Chart Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Shows how to use the Elixir chart component in a HEEx template, providing an ID and chart data for visualization.

```heex
<.chart
  id="sales-chart"
  chart-data={%{ 
    labels: ["Jan", "Feb", "Mar"],
    datasets: [%{
      label: "Sales",
      data: [10, 20, 30]
    }]
  }}
/>
```

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

### Add Component Imports

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Shows how to import the custom Elixir component in the main Elixir file and the JavaScript component in the application's entry point.

```elixir
import SaladUI.MyComponent
```

```javascript
import "./salad_ui/components/my-component";
```

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

### Create JavaScript Simple Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Implements a JavaScript component that integrates with Salad UI. It handles initialization, state transitions, and data updates based on component configuration and commands.

```javascript
import Component from "../core/component";
import SaladUI from "../index";

class MyComponent extends Component {
  constructor(el, hookContext) {
    super(el, { hookContext });
    this.data = JSON.parse(this.el.dataset.options).data;
    this.initialize();
  }

  getComponentConfig() {
    return {
      stateMachine: {
        idle: { transitions: { update: "idle" } }
      }
    };
  }

  initialize() {
    // Initialize your component
    console.log("Data:", this.data);
  }

  handleCommand(command, params) {
    if (command === "update") {
      this.data = params.data;
      this.initialize();
      return true;
    }
    return super.handleCommand(command, params);
  }

  destroy() {
    // Cleanup here
  }
}

SaladUI.register("my-component", MyComponent);
export default MyComponent;
```

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

### ARIA Configuration Basic Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Illustrates a basic ARIA configuration for a dialog component, setting roles and states like 'expanded' and 'hidden' for trigger and content parts.

```js
ariaConfig: {
  trigger: {
    all: { role: "button", haspopup: "dialog" },
    open: { expanded: "true" },
    closed: { expanded: "false" }
  },
  content: {
    all: { role: "dialog" },
    open: { hidden: "false" },
    closed: { hidden: "true" }
  }
}
```

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

### Border Color Fallback Styling (CSS)

Source: https://github.com/bluzky/salad_ui/blob/main/docs/manual_install.md

Provides a fallback for border colors in CSS, ensuring that borders are consistently applied across all elements. This rule should be added to the `app.css` file to override default border styles.

```css
@layer base {
    * {
        @apply border-border !important;
    }
}
```

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

### Use Elixir Simple Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Demonstrates how to use the custom Elixir component within a HEEx template, passing required attributes like `id` and `data`.

```heex
<.my_component id="example" data={%{value: 123}} />
```

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

### Use JS Commands in Elixir Templates

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Illustrates using `JS.push/2` within Elixir HEEx templates for direct client-to-server event pushing, simplifying event handling for UI interactions.

```elixir
<.dialog on-open={JS.push("dialog_opened")} on-close={JS.push("dialog_closed")}>
  <.dialog_trigger>
    <.button>Open Dialog</.button>
  </.dialog_trigger>
  <.dialog_content>
    <.button phx-click={JS.push("action_clicked", value: %{action: "save"})}>
      Save
    </.button>
  </.dialog_content>
</.dialog>
```

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

### Create JavaScript Chart Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Implements a JavaScript component for rendering charts using the Chart.js library. It initializes the chart, handles updates, and manages cleanup.

```javascript
import Component from "../core/component";
import SaladUI from "../index";
import Chart from "chart.js/auto";

class ChartComponent extends Component {
  constructor(el, hookContext) {
    super(el, { hookContext });
    this.initChart();
  }

  getComponentConfig() {
    return {
      stateMachine: {
        idle: { transitions: { update: "idle" } }
      }
    };
  }

  initChart() {
    const data = JSON.parse(this.el.dataset.chartData);
    this.chart = new Chart(this.el, {
      type: "line",
      data: data
    });
  }

  handleCommand(command, params) {
    if (command === "update") {
      this.chart.data = params.data;
      this.chart.update();
      return true;
    }
  }

  destroy() {
    this.chart?.destroy();
  }
}

SaladUI.register("chart", ChartComponent);
```

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

### SaladUI Keyboard Events Example

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Demonstrates keyboard event handling for the 'open' state, including mapping keys like 'Escape', 'Enter', and arrow keys to actions or functions, and setting a default key event target.

```js
events: {
  open: {
    keyEventTarget: "content",  // Keys are listened on content part
    keyMap: {
      Escape: "close",
      Enter: "confirm",
      ArrowDown: () => this.navigateNext(),
      ArrowUp: () => this.navigatePrev(),
      " ": "toggle",
      Tab: (event) => {
        // Custom tab handling
        this.handleTabNavigation(event);
      }
    }
  },
  _all: {
    keyMap: {
      "?": () => this.showHelp()  // Help works in any state
    }
  }
}
```

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

### Send Commands from LiveView to JavaScript Components

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Demonstrates sending commands from an Elixir LiveView to JavaScript components using `SaladUI.LiveView.send_command/4`. Supports sending commands with or without parameters to specific components.

```elixir
defmodule MyAppWeb.PageLive do
def handle_event("open_dialog", _params, socket) do
  # Send command to component
  socket = SaladUI.LiveView.send_command(socket, "user-dialog", "open")
  {:noreply, socket}
end

def handle_event("update_chart", _params, socket) do
  new_data = get_chart_data()

  # Send command with parameters
  socket = SaladUI.LiveView.send_command(socket, "sales-chart", "update", %{
    data: new_data,
    options: %{animation: true}
  })

  {:noreply, socket}
end

def handle_event("close_all_dialogs", _params, socket) do
  # Send commands to multiple components
  socket =
    socket
    |> SaladUI.LiveView.send_command("dialog-1", "close")
    |> SaladUI.LiveView.send_command("dialog-2", "close")
    |> SaladUI.LiveView.send_command("dialog-3", "close")

  {:noreply, socket}
end
end
```

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

### ARIA Configuration Common Patterns

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Provides ARIA configuration examples for common UI patterns including Dialogs, Menus, and Tabs, showcasing how to set appropriate roles and states for accessibility.

```js
// DialogariaConfig: {
  trigger: {
    all: { haspopup: "dialog" },
    open: { expanded: "true" },
    closed: { expanded: "false" }
  },
  content: {
    all: { role: "dialog" }
  }
}

// MenuariaConfig: {
  trigger: {
    all: { haspopup: "menu" },
    open: { expanded: "true" }
  },
  content: { all: { role: "menu" } },
  item: { all: { role: "menuitem" } }
}

// TabsariaConfig: {
  list: { all: { role: "tablist" } },
  trigger: {
    all: { role: "tab" },
    active: { selected: "true" }
  },
  content: { all: { role: "tabpanel" } }
}
```

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

### Create Elixir Simple Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Defines a basic Elixir component for Salad UI, including attributes and the render function using HEEx syntax. It sets up necessary data attributes for JavaScript integration.

```elixir
defmodule SaladUI.MyComponent do
  use SaladUI, :component

  attr :id, :string, required: true
  attr :data, :any, required: true

  def my_component(assigns) do
    ~H"""
    <div
      id={@id}
      phx-hook="SaladUI"
      data-component="my-component"
      data-part="root"
      data-options={Jason.encode!(%{data: @data})}>
      <!-- Your HTML here -->
    </div>
    """
  end
end
```

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

### Create Elixir Chart Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/implement_simple_component.md

Defines an Elixir component for rendering charts using Salad UI. It accepts an ID and chart data, preparing it for visualization with JavaScript.

```elixir
defmodule SaladUI.Chart do
  use SaladUI, :component

  attr :id, :string, required: true
  attr :"chart-data", :map, required: true

  def chart(assigns) do
    ~H"""
    <canvas
      id={@id}
      phx-hook="SaladUI"
      data-component="chart"
      data-part="root"
      data-chart-data={Jason.encode!(assigns[:"chart-data"])}>
    </canvas>
    """
  end
end
```

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

### Handle Client Events in Elixir LiveView

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Shows how to handle incoming events from JavaScript components within an Elixir LiveView module using the `handle_event/3` callback. Parses parameters and updates the socket.

```elixir
defmodule MyAppWeb.PageLive do
  use MyAppWeb, :live_view

  # Event handler matching the event mapping
  def handle_event("dialog_opened", params, socket) do
    %{"dialogId" => dialog_id, "timestamp" => timestamp} = params

    IO.puts("Dialog #{dialog_id} opened at #{timestamp}")
    {:noreply, socket}
  end

  def handle_event("item_selected", params, socket) do
    %{"value" => value, "label" => label} = params

    socket = 
      socket
      |> assign(:selected_item, value)
      |> put_flash(:info, "Selected: #{label}")

    {:noreply, socket}
  end
end
```

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

### Send Events from JavaScript to LiveView

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Demonstrates how JavaScript components send events to the Phoenix LiveView server using `pushEvent()`. Supports sending simple events or events with data payloads.

```javascript
class DialogComponent extends Component {
  onOpenEnter() {
    // Send simple event
    this.pushEvent("opened");

    // Send event with data
    this.pushEvent("opened", {
      dialogId: this.el.id,
      timestamp: Date.now()
    });
  }

  selectItem(item) {
    // Send structured data
    this.pushEvent("item-selected", {
      value: item.value,
      label: item.textContent,
      index: this.items.indexOf(item)
    });
  }
}
```

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

### Server-Client Event Communication

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Illustrates how to establish communication between the server (Elixir) and client (JavaScript) for event handling. This includes mapping server-side events to client-side actions and vice-versa using `pushEvent`.

```elixir
# In template
data-event-mappings={json(%{"opened" => assigns[:"on-open"]})}
```

```javascript
// In JavaScript
this.pushEvent("opened", { data: value });
```

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

### Map Client Events to Server Handlers in Elixir

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Configures event mappings in an Elixir LiveView component to direct client-side events to specific server-side handlers. Uses `add_event_mapping/3` and `json/1`.

```elixir
defmodule SaladUI.Dialog do
def dialog(assigns) do
  event_map = %{}
  |> add_event_mapping(assigns, "opened", :"on-open")
  |> add_event_mapping(assigns, "closed", :"on-close")
  |> add_event_mapping(assigns, "item-selected", :"on-item-selected")

  assigns = assign(assigns, :event_map, json(event_map))

  ~H"""
  <div
    data-component="dialog"
    data-event-mappings={@event_map}
    phx-hook="SaladUI"
  >
    <!-- component content -->
  </div>
  """
end
end
```

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

### JavaScript Event Handling Configuration

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Details the configuration for handling user events within different states of a component. It maps mouse and keyboard events to specific actions, allowing for state-driven interactivity.

```javascript
events: {
  stateName: {
    mouseMap: {
      partName: { eventType: "action" }
    },
    keyMap: {
      KeyName: "action"
    }
  }
}
```

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

### Salad UI Component Data Attributes for Actions

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Shows how `data-action` attributes are used to specify user interactions that trigger state transitions within a Salad UI component, including opening, closing, or toggling states.

```elixir
data-action="open"   # Triggers open transition
data-action="close"  # Triggers close transition
data-action="toggle" # Toggles between states
```

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

### Salad UI Component Data Attributes for Parts

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Illustrates the use of `data-part` attributes in HTML to define distinct functional parts of a Salad UI component, such as the root container, trigger, content area, and close button.

```elixir
data-part="root"          # Main container
data-part="trigger"       # Opens the component
data-part="content"       # Main content area
data-part="close-trigger" # Closes the component
```

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

### SaladUI Command Event Generation and Handling

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_communications_explain.md

Illustrates the underlying JavaScript generated by `SaladUI.JS.dispatch_command/3` and how Salad UI components listen for and process the `salad_ui:command` DOM event. This includes the structure of the dispatched event and the component's event listener.

```javascript
document.dispatchEvent(new CustomEvent('salad_ui:command', {
  detail: {
    command: 'open',
    params: { data: newData },
    target: 'user-dialog'
  }
}));

class Component {
  setupEvents() {
    document.addEventListener('salad_ui:command', (event) => {
      const { command, params, target } = event.detail;

      if (target === this.el.id) {
        this.handleCommand(command, params);
      }
    });
  }
}
```

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

### Elixir Dialog Component Structure

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Defines the Elixir component for a dialog, including attributes for ID, open state, event handlers, and slots for content. It sets up data attributes for component identification and event mappings.

```elixir
defmodule SaladUI.Dialog do
  use SaladUI, :component

  # Main container
  attr :id, :string, required: true
  attr :open, :boolean, default: false
  attr :"on-open", :any, default: nil
  attr :"on-close", :any, default: nil
  slot :inner_block, required: true

  def dialog(assigns) do
    event_map = %{}
    |> add_event_mapping(assigns, "opened", :"on-open")
    |> add_event_mapping(assigns, "closed", :"on-close")

    assigns = assign(assigns, :event_map, json(event_map))

    ~H"""
    <div
      id={@id}
      data-component="dialog"
      data-part="root"
      data-event-mappings={@event_map}
      phx-hook="SaladUI"
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

  # Trigger element
  def dialog_trigger(assigns) do
    ~H"""
    <div data-part="trigger" data-action="open">
      {render_slot(@inner_block)}
    </div>
    """
  end

  # Content element
  def dialog_content(assigns) do
    ~H"""
    <div data-part="content" hidden>
      <div data-part="overlay"></div>
      <div data-part="content-panel">
        {render_slot(@inner_block)}
        <button data-part="close-trigger" data-action="close">×</button>
      </div>
    </div>
    """
  end
end
```

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

### HEEx Usage of Salad UI Dialog Component

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Demonstrates how to use the Salad UI dialog component within a HEEx template. It shows how to pass props like `id` and `on-open`, and how to nest dialog trigger and content elements.

```heex
<.dialog id="my-dialog" on-open={JS.push("dialog_opened")}>
  <.dialog_trigger>
    <.button>Open Dialog</.button>
  </.dialog_trigger>
  <.dialog_content>
    <h2>Dialog Title</h2>
    <p>Dialog content here.</p>
  </.dialog_content>
</.dialog>
```

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

### JavaScript Dialog Component Implementation

Source: https://github.com/bluzky/salad_ui/blob/main/docs/complex_component_guide.md

Implements the JavaScript logic for the dialog component, including state management via a state machine, event handling for user interactions, visibility control, and accessibility features. It registers the component with SaladUI.

```javascript
import Component from "../core/component";
import SaladUI from "../index";
import FocusTrap from "../core/focus-trap";

class DialogComponent extends Component {
  constructor(el, hookContext) {
    super(el, { hookContext });
    this.content = this.getPart("content");
    this.contentPanel = this.getPart("content-panel");
  }

  getComponentConfig() {
    return {
      // State machine
      stateMachine: {
        closed: {
          enter: "onClosedEnter",
          transitions: { open: "open" }
        },
        open: {
          enter: "onOpenEnter",
          transitions: { close: "closed" }
        }
      },

      // Events by state
      events: {
        closed: {
          mouseMap: {
            trigger: { click: "open" }
          }
        },
        open: {
          mouseMap: {
            "close-trigger": { click: "close" },
            overlay: { click: "close" }
          },
          keyMap: {
            Escape: "close"
          }
        }
      },

      // Visibility control
      hiddenConfig: {
        closed: { content: true },
        open: { content: false }
      },

      // Accessibility
      ariaConfig: {
        trigger: {
          all: { haspopup: "dialog" },
          open: { expanded: "true" },
          closed: { expanded: "false" }
        },
        content: {
          all: { role: "dialog" }
        }
      }
    };
  }

  // State handlers
  onOpenEnter() {
    if (!this.focusTrap) {
      this.focusTrap = new FocusTrap(this.contentPanel);
    }
    this.focusTrap.activate();
    this.pushEvent("opened");
  }

  onClosedEnter() {
    this.focusTrap?.deactivate();
    this.pushEvent("closed");
  }

  beforeDestroy() {
    this.focusTrap?.destroy();
  }
}

SaladUI.register("dialog", DialogComponent);
```

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

### SaladUI State Machine Configuration

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Defines component states, transitions, and lifecycle handlers. Each state can have 'enter' and 'exit' handlers, and a map of 'transitions' triggered by events.

```js
stateMachine: {
  stateName: {
    enter: "handlerMethod" | handlerFunction,    // Called when entering state
    exit: "handlerMethod" | handlerFunction,     // Called when leaving state
    transitions: {
      eventName: "targetState" | transitionFunction
    }
  }
}
```

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

### SaladUI State Handler Methods and Functions

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Illustrates how to define state handler methods (referenced by string) and inline functions for 'enter' and 'exit' lifecycle hooks within the state machine.

```js
// Method referenced by string
onOpenEnter(params) {
  console.log("Dialog opened with", params);
  this.pushEvent("opened");
}

// Inline function
enter: (params) => {
  this.setupComponent(params);
}
```

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

### Salad UI Transition Flow With Animation

Source: https://github.com/bluzky/salad_ui/blob/main/docs/js_state_transition_flow.md

Details the execution flow for transitions that involve animations. This includes the standard transition steps plus additional actions for applying animation classes and waiting for the animation to complete before executing the enter handler.

```mermaid
flowchart TD
    subgraph "With Animation"
        AA[Call transition
event, params] --> BB[Determine next state]
        BB --> CC[Check for animation config]
        CC --> DD[Execute State A
exit handler]
        DD --> EE[Update state
A → B]
        EE --> FF[Apply animation
start classes]
        FF --> GG[Apply animation
run classes]
        GG --> HH[Apply animation
end classes]
        HH --> II[Wait for
animation duration]
        II --> JJ[Execute State B
enter handler]
        JJ --> KK[Update element
visibility]
        KK --> LL[Update UI
data-state & ARIA]
    end
```

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

### Add Salad UI to Mix Dependencies

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

This snippet shows how to add the Salad UI package to your Elixir project's `mix.exs` file to manage dependencies.

```elixir
def deps do
  [
    {:salad_ui, "~> 1.0.0-beta.3"},
  ]
end
```

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

### SaladUI Events Configuration Structure

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Defines event handlers for different states, organized by event type and target part. Includes mouseMap, keyMap, and an optional keyEventTarget.

```js
events: {
  stateName: {
    mouseMap: {
      partName: {
        eventType: "action" | handlerFunction
      }
    },
    keyMap: {
      keyName: "action" | handlerFunction
    },
    keyEventTarget: "partName"  // Optional: which part receives key events
  },
  _all: {  // Special state: applies to all states
    // Event handlers that work in any state
  }
}
```

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

### ARIA Attribute Mapping to HTML

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Shows how ARIA configuration properties are mapped to standard HTML ARIA attributes, such as 'role', 'aria-expanded', 'aria-hidden', and 'aria-labelledby'.

```js
// Config -> HTML
role: "button"           // -> role="button"
expanded: "true"         // -> aria-expanded="true"
hidden: "true"           // -> aria-hidden="true"
labelledby: "title-id"   // -> aria-labelledby="title-id"
```

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

### SaladUI Key Names for Keyboard Events

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Lists common key names that can be used in `keyMap` for keyboard event handling, including alphanumeric keys, special keys, and modifier keys.

```js
keyMap: {
  "a": "actionA",
  "Enter": "confirm",
  "Escape": "cancel",
  "ArrowDown": "next",
  " ": "toggle",           // Space key
  "F1": "help",
  "Delete": "remove",
  "Backspace": "back",
  "Meta": "showMenu",      // Cmd/Windows key
  "Control": "multiSelect"
}
```

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

### ARIA Configuration with Dynamic Values

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Demonstrates using functions within ARIA configuration to dynamically set attribute values, such as 'valuemin' and 'valuenow' for a slider component.

```js
ariaConfig: {
  slider: {
    all: {
      role: "slider",
      valuemin: () => this.min.toString(),
      valuenow: () => this.value.toString()
    }
  }
}
```

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

### Salad UI Transition Flow Without Animation

Source: https://github.com/bluzky/salad_ui/blob/main/docs/js_state_transition_flow.md

Illustrates the sequence of events when a transition occurs without any associated animations. This includes determining the next state, executing exit and enter handlers, and updating UI elements and attributes.

```mermaid
flowchart TD
    subgraph "Without Animation"
        A[Call transition
event, params] --> B[Determine next state]
        B --> C[Execute State A
exit handler]
        C --> D[Update state
A → B]
        D --> E[Execute State B
enter handler]
        E --> F[Update element
visibility]
        F --> G[Update UI
data-state & ARIA]
    end
```

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

### SaladUI Mouse Event Types

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Provides a list of standard DOM mouse event types that can be mapped to actions or handler functions in the `mouseMap` configuration.

```js
mouseMap: {
  partName: {
    "click": "action",
    "dblclick": "doubleClick",
    "mousedown": "startDrag",
    "mouseup": "endDrag",
    "mouseenter": "hover",
    "mouseleave": "unhover",
    "mouseover": "over",
    "mouseout": "out",
    "contextmenu": "showContext",
    "focus": "focused",
    "blur": "blurred",
    "focusin": "focusIn",
    "focusout": "focusOut"
  }
}
```

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

### SaladUI Component Configuration Structure

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

The top-level structure for SaladUI component configuration, returned by `getComponentConfig()`. It includes state machine, events, hidden, and ARIA configurations.

```js
getComponentConfig() {
  return {
    stateMachine: { /* State definitions and transitions */ },
    events: { /* Event handlers by state */ },
    hiddenConfig: { /* Visibility control by state */ },
    ariaConfig: { /* ARIA attributes by part and state */ }
  };
}
```

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

### ARIA Configuration Structure

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Defines the structure for ARIA configuration, mapping part names to accessibility attributes based on component states. This allows for dynamic and state-specific ARIA attribute assignments.

```js
ariaConfig: {
  partName: {
    all: { attribute: "value" },        // Always applied
    stateName: { attribute: "value" }   // Applied in specific state
  }
}
```

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

### Configure Custom Error Translator Function

Source: https://github.com/bluzky/salad_ui/blob/main/README.md

This Elixir configuration snippet demonstrates how to set a custom function for translating errors within Salad UI, specifying `MyAppWeb.CoreComponents` and its `translate_error` function.

```elixir
config :salad_ui, :error_translator_function, {MyAppWeb.CoreComponents, :translate_error}
```

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

### SaladUI Hidden Configuration Structure

Source: https://github.com/bluzky/salad_ui/blob/main/docs/component_config_guide.md

Controls the visibility of component parts based on the current state. `hiddenConfig` maps state names to objects that specify the hidden status (true/false) for each part.

```js
hiddenConfig: {
  stateName: {
    partName: boolean  // true = hidden, false = visible
  }
}
```

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