Rails Blocks

https://railsblocks.com
Admin
Rails Blocks offers a ready-to-use collection of over 250 UI components for Rails applications,...
Tokens:500,221
Snippets:1,775
Trust Score:5.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### NPM: Install Floating UI and Tom Select

Source: https://railsblocks.com/docs/select

Commands to install the Floating UI and Tom Select libraries using NPM.

```bash
npm install @floating-ui/dom
npm install tom-select
```

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

### Yarn: Install Floating UI and Tom Select

Source: https://railsblocks.com/docs/select

Commands to install the Floating UI and Tom Select libraries using Yarn.

```bash
yarn add @floating-ui/dom
yarn add tom-select
```

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

### Basic Animated Number Controller Setup

Source: https://railsblocks.com/docs/animated-number

This example shows the fundamental setup for the animated number Stimulus controller. It requires essential data attributes like `data-controller`, `data-animated-number-start-value`, `data-animated-number-end-value`, and `data-animated-number-duration-value`. The `data-animated-number-trigger-value` can be set to 'viewport' to initiate the animation when the element becomes visible.

```html
<span data-controller="animated-number"
      data-animated-number-start-value="0"
      data-animated-number-end-value="1000"
      data-animated-number-duration-value="2000"
      data-animated-number-trigger-value="viewport">
</span>
```

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

### Stimulus Controller Setup for Clipboard (HTML)

Source: https://railsblocks.com/docs/clipboard

This example shows the minimal HTML structure required to initialize the Stimulus clipboard controller. It specifies the controller and the text to be copied.

```html
<button data-controller="clipboard" data-clipboard-text="Text to copy">
  <div data-clipboard-target="copyContent">Copy</div>
  <div data-clipboard-target="copiedContent" class="hidden">Copied!</div>
</button>
```

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

### Rails Dock Component Controller Setup Example

Source: https://railsblocks.com/docs/dock

This example demonstrates the basic HTML structure required for the dock component, including the main container with the `data-controller='dock'` attribute and a sample navigation link. It highlights the necessary data attributes for Stimulus targets.

```html
<div class="flex w-fit mx-auto items-center justify-center" data-controller="dock">
  <div class="mx-auto hidden h-16 items-end gap-4 rounded-2xl bg-neutral-50 px-4 pb-3 md:flex dark:bg-neutral-950 border border-neutral-200/50 dark:border-neutral-600/50">
    <a href="/dashboard" class="rounded-full" data-dock-target="icon" data-tooltip="Dashboard" data-tooltip-hotkey="d" data-tooltip-placement="top">
      <div class="size-10 relative flex aspect-square items-center justify-center rounded-full border border-neutral-200/50 dark:border-neutral-600/50 text-neutral-500 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-800">
        <div class="flex items-center justify-center *:size-full" style="width: 50%; height: 50%">
          <!-- Icon SVG -->
        </div>
      </div>
    </a>
  </div>
</div>
```

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

### Tooltip Controller Setup Example

Source: https://railsblocks.com/docs/tooltip

This code demonstrates the basic structure for a tooltip component using a Stimulus controller. It requires `data-controller='tooltip'` and specifies the tooltip content and placement via data attributes. The `data-tooltip-delay-value` attribute can be used to set a delay before the tooltip appears.

```html
<button data-controller="tooltip"
        data-tooltip-content="Hello world"
        data-tooltip-placement-value="top">
  Hover me
</button>

```

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

### Install AirDatepicker and Floating UI via NPM

Source: https://railsblocks.com/docs/date-picker

This command demonstrates how to install the AirDatepicker and Floating UI libraries using npm, a common package manager for JavaScript projects. Running these commands in your terminal will download and add these dependencies to your project's `node_modules` directory.

```bash
npm install air-datepicker
npm install @floating-ui/dom
```

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

### Install AirDatepicker and Floating UI via Yarn

Source: https://railsblocks.com/docs/date-picker

This command shows how to install the AirDatepicker and Floating UI libraries using Yarn, an alternative package manager for JavaScript projects. Executing these commands in your project's terminal will add these dependencies to your project.

```bash
yarn add air-datepicker
yarn add @floating-ui/dom
```

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

### Importmap: Install Floating UI and Tom Select

Source: https://railsblocks.com/docs/select

Instructions for adding Floating UI and Tom Select to your project's import map configuration in Rails.

```ruby
pin "@floating-ui/dom", to: "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.4/+esm"
pin "tom-select", to: "https://cdn.jsdelivr.net/npm/tom-select@2.4.3/+esm"
```

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

### Clipboard Component with Bottom-Start Tooltip (HTML)

Source: https://railsblocks.com/docs/clipboard

This snippet illustrates the HTML setup for a clipboard component configured with a 'bottom-start' tooltip. Similar to the previous example, it utilizes Stimulus data attributes for functionality, specifying the text to copy and the success message. It displays a copy icon and the text 'bottom-start', with a hidden success message.

```html
<button
  class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"
  data-controller="clipboard"
  data-clipboard-text="Bottom start tooltip!"
  data-clipboard-tooltip-placement-value="bottom-start"
  data-clipboard-success-message-value="Bottom start shown!">
  <div data-clipboard-target="copyContent" class="flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
      </g>
    </svg>
    <span>bottom-start</span>
  </div>
  <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-green-600 dark:text-green-400" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z"></path>
      </g>
    </svg>
    <span>Copied!</span>
  </div>
</button>
```

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

### Get Week Number Utility (JavaScript)

Source: https://railsblocks.com/docs/date-picker

Calculates the ISO 8601 week number for a given date. It adjusts the date to find the first Thursday of the week and then calculates the week difference from the start of the year. This function is crucial for the week selection functionality.

```javascript
  _getWeekNumber(date) {
    const tempDate = new Date(date.getTime());
    const dayNumber = (tempDate.getDay() + 6) % 7;
    tempDate.setDate(tempDate.getDate() - dayNumber + 3);

    const firstThursday = new Date(tempDate.getFullYear(), 0, 4);
    firstThursday.setDate(firstThursday.getDate() - ((firstThursday.getDay() + 6) % 7) + 3);

    return Math.round((tempDate.getTime() - firstThursday.getTime()) / 86400000 / 7) + 1;
  }
```

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

### Basic Confirmation Controller Setup - HTML

Source: https://railsblocks.com/docs/confirmation

Demonstrates the fundamental HTML structure for the confirmation component, including the Stimulus controller and required data attributes for input and confirmation buttons. This setup enables basic confirmation functionality.

```html
<div data-controller="confirmation"
     data-confirmation-confirm-text-value="DELETE">
  <input data-confirmation-target="input"
         placeholder="Type DELETE to confirm">
  <button data-confirmation-target="confirmButton"
          data-action="click->confirmation#confirm">
    Confirm
  </button>
</div>
```

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

### Embla Carousel Installation via Yarn

Source: https://railsblocks.com/docs/carousel

Installs Embla Carousel and its wheel gestures plugin using Yarn. This is an alternative package manager for JavaScript projects.

```bash
yarn add embla-carousel
yarn add embla-carousel-wheel-gestures

```

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

### Basic Tree View Controller Setup (HTML)

Source: https://railsblocks.com/docs/tree-view

Sets up a basic tree view structure using data attributes for controller initialization and animation control. It includes a button to toggle folder visibility and a content area that can be shown or hidden.

```html
<div data-controller="tree-view" data-tree-view-animate-value="true">
  <div class="overflow-hidden">
    <button type="button"
            data-action="click->tree-view#toggle"
            aria-controls="tree-content-folder"
            aria-expanded="false"
            data-state="closed">
      <svg data-tree-view-target="icon"><!-- Folder icon --></svg>
      <span>Folder Name</span>
    </button>
    <div id="tree-content-folder"
         data-state="closed"
         role="region"
         data-tree-view-target="content"
         hidden>
      <!-- Nested content -->
    </div>
  </div>
</div>
```

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

### Embla Carousel Installation via NPM

Source: https://railsblocks.com/docs/carousel

Installs Embla Carousel and its wheel gestures plugin using NPM. This is a common method for front-end projects to manage JavaScript dependencies.

```bash
npm install embla-carousel
npm install embla-carousel-wheel-gestures

```

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

### Clipboard Component Basic Setup (HTML)

Source: https://railsblocks.com/docs/clipboard

This snippet demonstrates the fundamental structure of the clipboard component using HTML. It includes the necessary data attributes for the Stimulus controller and targets for displaying the copy and copied states.

```html
<button
  class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"
  data-controller="clipboard"
  data-clipboard-text="Bottom tooltip!"
  data-clipboard-tooltip-placement-value="bottom"
  data-clipboard-success-message-value="Bottom tooltip shown!">
  <div data-clipboard-target="copyContent" class="flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
      </g>
    </svg>
    <span>bottom</span>
  </div>
  <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-green-600 dark:text-green-400" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z"></path>
      </g>
    </svg>
    <span>Copied!</span>
  </div>
</button>

<button
  class="w-full flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200"
  data-controller="clipboard"
  data-clipboard-text="Bottom end tooltip!"
  data-clipboard-tooltip-placement-value="bottom-end"
  data-clipboard-success-message-value="Bottom end shown!">
  <div data-clipboard-target="copyContent" class="flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M12.75,2h-.275c-.123-.846-.845-1.5-1.725-1.5h-3.5c-.879,0-1.602,.654-1.725,1.5h-.275c-1.517,0-2.75,1.233-2.75,2.75V14.25c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-5.75,.25c0-.138,.112-.25,.25-.25h3.5c.138,0,.25,.112,.25,.25v1c0,.138-.112,.25-.25,.25h-3.5c-.138,0-.25-.112-.25-.25v-1Zm4.75,10.25H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Zm0-3H6.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75h5.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path>
      </g>
    </svg>
    <span>bottom-end</span>
  </div>
  <div data-clipboard-target="copiedContent" class="hidden flex items-center gap-1.5">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-green-600 dark:text-green-400" width="18" height="18" viewBox="0 0 18 18">
      <g fill="currentColor">
        <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z"></path>
      </g>
    </svg>
    <span>Copied!</span>
  </div>
</button>
```

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

### Tooltip Best Practices

Source: https://railsblocks.com/docs/tooltip

Follow these guidelines for optimal tooltip implementation.

```APIDOC
## Tooltip Best Practices

### Description
Implement tooltips effectively by adhering to these recommended practices.

### Method
N/A (Best Practices)

### Endpoint
N/A

### Parameters
#### Best Practices
- **Keep it concise:** Tooltips should contain brief, helpful information
- **Avoid essential information:** Don't put critical information only in tooltips
- **Use appropriate delays:** Add delays for dense UIs to prevent tooltip spam

### Request Example
N/A

### Response
#### Success Response (200)
N/A (Best Practices)

#### Response Example
N/A
```

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

### Shell: PhotoSwipe Installation via Yarn

Source: https://railsblocks.com/docs/lightbox

This command installs the PhotoSwipe library using Yarn, an alternative JavaScript package manager. This is suitable for projects that use Yarn for dependency management.

```shell
yarn add photoswipe
```

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

### Grouped Select Options (Ruby on Rails)

Source: https://railsblocks.com/docs/select

Demonstrates how to organize select options into collapsible groups, improving user navigation for long lists. This example uses `grouped_options_for_select` and requires a Stimulus controller named 'select'. The second example adds column layout for optgroups.

```erb
<div class="w-full max-w-md space-y-4">
  <%= select_tag :cars, grouped_options_for_select({
      "European" => [["BMW", "bmw"], ["Mercedes", "mercedes"], ["Audi", "audi"]],
      "Japanese" => [["Toyota", "toyota"], ["Honda", "honda"], ["Nissan", "nissan"]],
      "American" => [["Ford", "ford"], ["Chevrolet", "chevy"], ["Dodge", "dodge"]]
    }),
    include_blank: "Select car brand…",
    autocomplete: "off",
    class: "w-full [&>*:first-child]:!cursor-pointer",
    data: {
      controller: "select",
      select_dropdown_input_value: false,
      select_disable_typing_value: true
  } %>



  <%= select_tag :cars, grouped_options_for_select({
      "European" => [["BMW", "bmw"], ["Mercedes", "mercedes"], ["Audi", "audi"], ["Volkswagen", "volkswagen"], ["Seat", "seat"], ["Porsche", "porsche"], ["Alfa Romeo", "alfa-romeo"]],
      "Japanese" => [["Toyota", "toyota"], ["Honda", "honda"], ["Nissan", "nissan"], ["Mazda", "mazda"], ["Subaru", "subaru"], ["Lexus", "lexus"], ["Mitsubishi", "mitsubishi"]],
      "American" => [["Ford", "ford"], ["Chevrolet", "chevy"], ["Dodge", "dodge"], ["Chrysler", "chrysler"], ["Jeep", "jeep"], ["GMC", "gmc"], ["Tesla", "tesla"]]
    }),
    include_blank: "Select car brand…",
    autocomplete: "off",
    class: "w-full [&>*:first-child]:!cursor-pointer",
    style: "visibility: hidden;",
    data: {
      controller: "select",
      select_dropdown_input_value: false,
      select_disable_typing_value: true,
      select_optgroup_columns_value: true
  } %>
</div>
```

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

### Stimulus Controller Setup for Tree View with Checkboxes

Source: https://railsblocks.com/docs/tree-view

This section describes the necessary Stimulus controllers for the tree view with checkboxes functionality. It emphasizes the need to install both the `tree-view` and `checkbox-select-all` controllers.

```html
<script src="path/to/tree-view.js"></script>
<script src="path/to/checkbox-select-all.js"></script>
```

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

### Shell: PhotoSwipe Installation via NPM

Source: https://railsblocks.com/docs/lightbox

This command installs the PhotoSwipe library using npm, a popular JavaScript package manager. This is a common method for adding PhotoSwipe to projects managed with Node.js and npm.

```shell
npm install photoswipe
```

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

### Implement Tooltip Sizes in HTML

Source: https://railsblocks.com/docs/tooltip

This HTML snippet demonstrates how to create tooltips with different size configurations. It utilizes a 'tooltip' controller and data attributes to define content, placement, and size. The examples include buttons for small, regular, and large tooltips, as well as variations with longer content to show text wrapping.

```erb
<%# Different tooltip sizes %>
<div class="flex flex-col items-center gap-4">
  <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
          data-controller="tooltip"
          data-tooltip-content="Small tooltip text (text-xs)"
          data-tooltip-placement-value="top"
          data-tooltip-size-value="small">
    Small Size
  </button>

  <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
          data-controller="tooltip"
          data-tooltip-content="Regular tooltip text (text-sm)"
          data-tooltip-placement-value="top"
          data-tooltip-size-value="regular">
    Regular Size (Default)
  </button>

  <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
          data-controller="tooltip"
          data-tooltip-content="Large tooltip text (text-base)"
          data-tooltip-placement-value="top"
          data-tooltip-size-value="large">
    Large Size
  </button>

  <%# With longer content to show differences %>
  <div class="mt-6 flex flex-col items-center gap-4">
    <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
            data-controller="tooltip"
            data-tooltip-content="This is a small tooltip with longer content to demonstrate how text wrapping works at different sizes. The small size uses text-xs."
            data-tooltip-placement-value="bottom"
            data-tooltip-size-value="small"
            data-tooltip-max-width-value="300">
      Small (Long Content)
    </button>

    <button class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200"
            data-controller="tooltip"
            data-tooltip-content="This is a regular tooltip with longer content to demonstrate how text wrapping works at different sizes. The regular size uses text-sm."
            data-tooltip-placement-value="bottom"
            data-tooltip-size-value="regular"
            data-tooltip-max-width-value="300">
      Regular (Long Content)
    </button>
  </div>
</div>
```

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

### Importing Locale for Internationalization

Source: https://railsblocks.com/docs/date-picker

This code demonstrates how to import a locale file (Spanish in this example) from the AirDatepicker library to enable internationalization for the date picker component. The imported locale object can then be passed to the AirDatepicker instance.

```javascript
import localeEs from "air-datepicker/locale/es";

// In the controller
this.datepickerInstance = new AirDatepicker(this.inputTarget, {
  locale: localeEs,
  // ... other options
});
```

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

### Combined Tree View and Checkbox Select All Controller Setup (HTML)

Source: https://railsblocks.com/docs/tree-view

Demonstrates how to combine the `tree-view` controller with the `checkbox-select-all` controller for hierarchical selection. This setup allows for selecting individual items and managing parent-child checkbox states.

```html
<div data-controller="tree-view checkbox-select-all"
     data-tree-view-animate-value="true"
     data-checkbox-select-all-toggle-key-value="x">

  <!-- Select All Header -->
  <input type="checkbox"
         data-checkbox-select-all-target="selectAll"
         data-action="click->checkbox-select-all#toggleAll">

  <!-- Folder with Checkbox -->
  <div data-checkbox-select-all-target="parent">
    <div class="flex items-center gap-2">
      <input type="checkbox"
             data-checkbox-select-all-target="checkbox"
             data-action="click->checkbox-select-all#toggleChildren click->checkbox-select-all#toggle">
      <button data-action="click->tree-view#toggle"
              aria-controls="folder-content"
              aria-expanded="false">
        <svg data-tree-view-target="icon"><!-- Folder icon --></svg>
        <span>Folder Name</span>
      </button>
    </div>
    <div id="folder-content" data-tree-view-target="content" hidden>
      <!-- Child files with checkboxes -->
      <input type="checkbox"
             data-checkbox-select-all-target="checkbox child"
             data-action="click->checkbox-select-all#toggle">
    </div>
  </div>
</div>
```

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

### Install Motion.dev via Yarn

Source: https://railsblocks.com/docs/installation

Installs the Motion.dev animation library using Yarn. This offers an alternative package management solution for the animation library.

```bash
yarn add motion
```

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

### Embla Carousel Installation via Importmap

Source: https://railsblocks.com/docs/carousel

Adds Embla Carousel and its wheel gestures plugin to the application's import map for easy access. This method is suitable for Rails applications using importmaps for dependency management.

```ruby
pin "embla-carousel", to: "https://cdn.jsdelivr.net/npm/embla-carousel/embla-carousel.esm.js"
pin "embla-carousel-wheel-gestures", to: "https://cdn.jsdelivr.net/npm/embla-carousel-wheel-gestures@latest/+esm"

```

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

### Create This Year Button Handler

Source: https://railsblocks.com/docs/date-picker

Generates the configuration for a 'This Year' button. The onClick handler selects the first day of the current year (January 1st). This provides a quick way to navigate to the start of the current year.

```javascript
_createYearButton() {
    return {
      content: "This year",
      onClick: (dp) => {
        const currentDate = new Date();
        dp.selectDate(new Date(currentDate.getFullYear(), 0, 1));
      },
    };
  }
```

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

### Install Tom Select via Yarn

Source: https://railsblocks.com/docs/installation

Installs the Tom Select library using Yarn, another package manager for Node.js. This is an alternative to using importmaps or npm.

```bash
yarn add tom-select
```

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

### TomSelect: Get Unflagged Icon SVG

Source: https://railsblocks.com/docs/select

Retrieves the SVG markup for an 'unflagged' icon. This icon is used to represent items that are not currently flagged. It's a simple SVG element with specific attributes for styling and rendering.

```javascript
getUnflaggedIcon() {
    return `
      <svg xmlns="http://www.w3.org/2000/svg" class="size-3" width="12" height="12" viewBox="0 0 12 12"><g fill="currentColor"><rect x=".751" y="5.25" width="10.499" height="1.5" transform="translate(-2.485 6) rotate(-45)" stroke-width="0"></rect><path d="m6,12c-3.309,0-6-2.691-6-6S2.691,0,6,0s6,2.691,6,6-2.691,6-6,6Zm0-10.5C3.519,1.5,1.5,3.519,1.5,6s2.019,4.5,4.5,4.5,4.5-2.019,4.5-4.5S8.481,1.5,6,1.5Z" stroke-width="0"></path></g></svg>
    `;
  }
```
Tokens:
Raw