Headlessui Reagent

https://github.com/sudorock/headlessui-reagent
Admin
Provides Reagent wrappers for Headless UI React components, allowing developers to use them within...
Tokens:7,590
Snippets:28
Trust Score:6.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Switch Component Implementations in ClojureScript

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Provides examples of Switch components for boolean settings using Headless UI and Reagent. It covers a controlled switch with a label and description, demonstrating state management via an atom and conditional styling. An example of a simple, uncontrolled switch is also included.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Switch with label and description
(r/with-let [!enabled (r/atom false)]
  [ui/switch-group
    {:as :div, :class [:flex :items-center :space-x-4]}
    [ui/switch-label
      {:class [:text-sm :font-medium :text-gray-700]}
      "Enable notifications"]
    [ui/switch
      {:checked @!enabled
       :on-change #(reset! !enabled %)
       :class (fn [{:keys [checked]}] 
                [:relative :inline-flex :h-6 :w-11 :items-center
                 :rounded-full :transition-colors :focus:outline-none
                 :focus:ring-2 :focus:ring-offset-2 :focus:ring-blue-500
                 (if checked :bg-blue-600 :bg-gray-200)])}
      [:span
        {:class (fn [{:keys [checked]}] 
                  [:inline-block :h-4 :w-4 :transform :rounded-full
                   :bg-white :transition-transform
                   (if checked :translate-x-6 :translate-x-1)])}]]
    [ui/switch-description
      {:class [:text-sm :text-gray-500]}
      "Receive email notifications for updates"]])

;; Simple uncontrolled switch
[ui/switch
  {:class (fn [{:keys [checked]}] 
            [:relative :inline-flex :h-6 :w-11 :rounded-full
             (if checked :bg-green-500 :bg-gray-300)])}
  [:span.sr-only "Toggle setting"]]
```

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

### Menu Component Examples in ClojureScript

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Illustrates the implementation of the Menu component in headlessui-reagent, showcasing a complete dropdown with keyboard navigation and focus management. It details how to structure menu items and apply conditional styling based on active states.

```clojurescript
(require '[headlessui-reagent.core :as ui])

;; Complete dropdown menu with keyboard navigation
[ui/menu
  {:as :div, :class [:relative :inline-block :text-left]}
  [ui/menu-button
    {:class [:inline-flex :justify-center :w-full :rounded-md
             :border :border-gray-300 :shadow-sm :px-4 :py-2
             :bg-white :text-sm :font-medium :text-gray-700
             :hover:bg-gray-50]}
    "Options"]
  [ui/menu-items
    {:class [:absolute :right-0 :w-56 :mt-2 :origin-top-right
             :bg-white :divide-y :divide-gray-100 :rounded-md
             :shadow-lg :ring-1 :ring-black :ring-opacity-5
             :focus:outline-none]}
    [ui/menu-item
      (fn [{:keys [active]}] 
        [:a.block
          {:href "#/edit"
           :class [:px-4 :py-2 :text-sm
                   (if active :bg-blue-500 :text-gray-900)
                   (when active :text-white)]}
          "Edit"])]
    [ui/menu-item
      (fn [{:keys [active]}] 
        [:button.w-full.text-left
          {:class [:px-4 :py-2 :text-sm
                   (if active :bg-blue-500 :text-gray-900)
                   (when active :text-white)]}
          "Delete"])]]
```

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

### Rendering Custom Elements with :as Prop in Reagent

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Demonstrates rendering a headlessui-reagent component as a different HTML element using the :as prop. This example shows how to render a disclosure panel as a `<ul>` element with custom styling.

```clojure
(defn panel-ul [props children]
  (into [:ul.bg-red-500 props] children))

[ui/disclosure-panel {:as panel-ul}
  [:li "Note this."]
  [:li "This too."]]
```

```clojure
[ui/disclosure-panel {:as :ul.bg-red-500}
  [:li "Note this."]
  [:li "This too."]]
```

```clojure
[ui/disclosure-panel {:as "ul", :class [:bg-red-500]}
  [:li "Note this."]
  [:li "This too."]]
```

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

### Disclosure Component Examples in ClojureScript

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Demonstrates the basic usage, render prop styling, and conditional styling of the Disclosure component in headlessui-reagent. It shows how to create collapsible sections with internal state management and accessibility features.

```clojurescript
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Basic disclosure with toggle functionality
[ui/disclosure
  [ui/disclosure-button
    {:class [:w-full :px-4 :py-2 :text-sm :font-medium
             :text-purple-900 :bg-purple-100 :rounded-lg
             :hover:bg-purple-200 :focus:outline-none]}
    "Show Details"]
  [ui/disclosure-panel
    {:class [:px-4 :pt-4 :pb-2 :text-sm :text-gray-500]}
    [:p "This content is revealed when the button is clicked."]]]

;; Using render props to style based on state
[ui/disclosure
  (fn [{:keys [open]}] 
    [:<>
      [ui/disclosure-button
        {:class [:px-4 :py-2 :rounded
                 (if open :bg-blue-500 :bg-gray-500)
                 :text-white]}
        (if open "Hide" "Show")]
      (when open
        [ui/disclosure-panel
          [:div "Dynamic content based on open state"]])])]

;; Using :class as a function for conditional styling
[ui/disclosure
  [ui/disclosure-button
    {:class (fn [{:keys [open]}] 
              [:border :rounded :px-4 :py-2
               (when open :bg-blue-200)])}
    "Toggle"]
  [ui/disclosure-panel "Panel content"]]
```

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

### Listbox Component Implementation in ClojureScript

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Demonstrates a Listbox component for selecting items from a list using Headless UI and Reagent. It manages complex ClojureScript objects, requiring primitive values for `:value` and `:on-change` props for proper interop. The example includes configuration for styling, labels, buttons, and options, along with accessibility features like keyboard navigation.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Listbox with complex ClojureScript objects
(r/with-let [people [{:id 1, :name "Wade Cooper", :role "Developer"}
                     {:id 2, :name "Arlene Mccoy", :role "Designer"}
                     {:id 3, :name "Devon Webb", :role "Manager"}
                     {:id 4, :name "Tom Cook", :role "Director"}
                     {:id 5, :name "Tanya Fox", :role "Analyst"}]
             person-by-id (zipmap (map :id people) people)
             !selected-person (r/atom (first people))]
  (let [selected-person @!selected-person]
    [ui/listbox
      {:value     (:id selected-person)  ;; Must be primitive
       :on-change #(reset! !selected-person (get person-by-id %1))}
      [ui/listbox-label
        {:class [:block :text-sm :font-medium :text-gray-700]}
        "Select team member"]
      [ui/listbox-button
        {:class [:relative :w-full :py-2 :pl-3 :pr-10 :text-left
                 :bg-white :rounded-lg :shadow-md :cursor-pointer
                 :focus:outline-none :border]}
        [:span.block.truncate (:name selected-person)]
        [:span " - " (:role selected-person)]]
      [ui/listbox-options
        {:class [:absolute :w-full :py-1 :mt-1 :overflow-auto
                 :text-base :bg-white :rounded-md :shadow-lg
                 :max-h-60 :ring-1 :ring-black :ring-opacity-5]}
        (for [person people]
          ^{:key (:id person)}
          [ui/listbox-option
            {:value (:id person)  ;; Must be primitive
             :class (fn [{:keys [active selected]}] 
                      [:cursor-pointer :select-none :relative :py-2 :pl-10 :pr-4
                       (cond
                         active :bg-blue-100
                         selected :bg-blue-50
                         :else :text-gray-900)])}
            (fn [{:keys [selected]}] 
              [:span {:class [(if selected :font-medium :font-normal)]}
                (:name person) " - " (:role person)])])]]))
```

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

### Conditional Rendering with Render Props in Reagent

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Illustrates how to use render props with headlessui-reagent components for conditional rendering. The example shows how to change the disclosure button text based on the 'open' state.

```clojure
[ui/disclosure
 (fn [{:keys [open]}]
   [:<> 
    [ui/disclosure-button (if open "Hide" "Show")]
    [ui/disclosure-panel ,,,]])]
```

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

### Conditional Styling with Render Props in Reagent

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Shows how to conditionally apply CSS classes to a headlessui-reagent component using render props. The example applies a background color class to the disclosure button when it's open.

```clojure
[ui/disclosure-button {:class (fn [{:keys [open]}] 
                               [:border (when open :bg-blue-200)])}
 "Show more"]
```

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

### Popover Component in Reagent

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Demonstrates a popover component using Headless UI and Reagent, featuring a button to trigger the popover, an overlay, and a panel for content. Manages open/close states and positioning for tooltips or dropdowns. Requires `headlessui-reagent.core` and `reagent.core`.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Popover with panel and overlay
[ui/popover
  {:as :div, :class [:relative]}
  [ui/popover-button
    {:class [:px-4 :py-2 :bg-white :border :rounded-md
             :text-sm :font-medium :hover:bg-gray-50]}
    "Solutions"]

  [ui/popover-overlay
    {:class [:fixed :inset-0 :bg-black :opacity-30]}]

  [ui/popover-panel
    {:class [:absolute :z-10 :w-screen :max-w-sm :px-4 :mt-3
             :transform :-translate-x-1/2 :left-1/2 :sm:px-0]}
    [:div.overflow-hidden.rounded-lg.shadow-lg.ring-1.ring-black.ring-opacity-5
      [:div.relative.grid.gap-8.bg-white.p-7
        [:a.flex.items-center.p-2.rounded-lg.hover:bg-gray-50
          {:href "#"}
          [:div.ml-4
            [:p.text-sm.font-medium.text-gray-900 "Analytics"]
            [:p.text-sm.text-gray-500 "Get insights into your traffic"]]]
        [:a.flex.items-center.p-2.rounded-lg.hover:bg-gray-50
          {:href "#"}
          [:div.ml-4
            [:p.text-sm.font-medium.text-gray-900 "Engagement"]
            [:p.text-sm.text-gray-500 "Connect with your audience"]]]]]]]
```

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

### Transition Component with Animations in Reagent

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Shows how to implement animated transitions for enter/leave effects on UI elements like dialogs using Headless UI's transition component in Reagent. It leverages CSS classes for controlling animation states like opacity and duration. Requires `headlessui-reagent.core` and `reagent.core`.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Dialog with animated transitions
(r/with-let [!is-open (r/atom false)]
  [:<>
    [:button {:on-click #(reset! !is-open true)} "Open"]

    [ui/transition
      {:show @!is-open
       :enter "transition-opacity duration-300"
       :enter-from "opacity-0"
       :enter-to "opacity-100"
       :leave "transition-opacity duration-200"
       :leave-from "opacity-100"
       :leave-to "opacity-0"}
      [ui/dialog {:open @!is-open, :on-close #(reset! !is-open false)}
        [:div.modal-content "Animated dialog content"]]]])
```

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

### Basic Disclosure Component in Reagent

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Demonstrates the basic usage of a Disclosure component from headlessui-reagent, showing how to integrate it into a Reagent application. It includes the disclosure button and panel with basic styling.

```clojure
(require '[headlessui-reagent.core :as ui])

[ui/disclosure
  [ui/disclosure-button {:class [:w-full :px-4 :py-2 :text-sm :font-medium :text-purple-900 :bg-purple-100 :rounded-lg]}
    "Explain"]
  [ui/disclosure-panel {:class [:px-4 :pt-4 :pb-2 :text-sm :text-gray-500]}
    [:p "Some explanation."]]]
```

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

### Dialog Component with Backdrop and Transitions (Clojure/Reagent)

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Implements a modal dialog with a backdrop, focus trap, and accessibility features. It manages the open/closed state using a Reagent atom and provides sub-components for overlay, title, and description. Useful for user confirmations or displaying important information.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Complete modal dialog with overlay and transitions
(r/with-let [!is-open (r/atom false)]
  [:<> 
    [:button
      {:on-click #(reset! !is-open true)
       :class [:px-4 :py-2 :bg-blue-600 :text-white :rounded]}
      "Open Dialog"]

    [ui/dialog
      {:open @!is-open
       :on-close #(reset! !is-open false)
       :class [:relative :z-50]}

      ;; Backdrop overlay
      [ui/dialog-overlay
        {:class [:fixed :inset-0 :bg-black :bg-opacity-30]}]

      ;; Dialog content
      [:div.fixed.inset-0.flex.items-center.justify-center.p-4
        [:div.bg-white.rounded-lg.shadow-xl.max-w-md.w-full.p-6
          [ui/dialog-title
            {:class [:text-lg :font-medium :text-gray-900 :mb-2]}
            "Confirm Action"]

          [ui/dialog-description
            {:class [:text-sm :text-gray-500 :mb-4]}
            "Are you sure you want to proceed? This action cannot be undone."]

          [:div.flex.justify-end.space-x-3
            [:button
              {:on-click #(reset! !is-open false)
               :class [:px-4 :py-2 :border :rounded :text-gray-700]}
              "Cancel"]
            [:button
              {:on-click #(do (js/console.log "Confirmed")
                             (reset! !is-open false))
               :class [:px-4 :py-2 :bg-red-600 :text-white :rounded]}
              "Confirm"]]]]]])

```

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

### Custom Element Rendering in Reagent with :as

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Illustrates overriding default HTML elements for Headless UI components using the ':as' prop in Reagent. This prop accepts strings, keywords, or custom Reagent component functions, allowing for flexible DOM structure and styling. Requires `headlessui-reagent.core`.

```clojure
(require '[headlessui-reagent.core :as ui])

;; Using :as with a keyword
[ui/disclosure-panel {:as :ul.bg-gray-100}
  [:li "First item"]
  [:li "Second item"]
  [:li "Third item"]]

;; Using :as with a string and :class
[ui/disclosure-panel {:as "ul", :class [:bg-red-500 :p-4 :rounded]}
  [:li "Note this."]
  [:li "This too."]]

;; Using :as with a custom Reagent component
(defn custom-panel [props children]
  (into [:div.custom-wrapper.bg-blue-100.border.rounded-lg props] children))

[ui/disclosure-panel {:as custom-panel}
  [:p "Custom rendered content"]
  [:button "Action"]]

;; Menu button rendered as a custom button component
(defn icon-button [props children]
  [:button.flex.items-center.space-x-2 props
    [:span "⚙"]
    (into [:span] children)])

[ui/menu-button {:as icon-button}
  "Settings"]
```

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

### Picking an Item with Listbox in Reagent

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Demonstrates how to use the `ui/listbox` component with Reagent. It shows how to manage selected items by using a unique identifier (like `:id`) as the `:value` and converting it back to the full ClojureScript object in the `:on-change` handler. This approach handles complex CLJS objects as list items.

```clojure
(reagent.core/with-let [people [{:id 1, :name "Wade Cooper"}
                                {:id 2, :name "Arlene Mccoy"}
                                {:id 3, :name "Devon Webb"}
                                {:id 4, :name "Tom Cook"}
                                {:id 5, :name "Tanya Fox"}
                                {:id 6, :name "Hellen Schmidt"}]
                        person-by-id (zipmap (map :id people) people)
                        !selected-person (reagent.core/atom (first people))]
  (let [selected-person @!selected-person]
    [ui/listbox
     {:value     (:id selected-person)
      :on-change #(reset! !selected-person (get person-by-id %1))}
     [ui/listbox-button (:name selected-person)]
     [ui/listbox-options
      (for [person people]
        ^{:key (:id person)}
        [ui/listbox-option
         {:value (:id person)}
         (:name person)])]]))
```

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

### Menu Component API

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

A dropdown menu component for navigation and action menus, providing keyboard navigation, focus management, and ARIA attributes automatically.

```APIDOC
## Menu Component

### Description
A dropdown menu component for navigation and action menus, providing keyboard navigation, focus management, and ARIA attributes automatically. Supports nested items and custom styling based on active/selected state.

### Usage

**Complete Dropdown Menu:**
```clojure
(require '[headlessui-reagent.core :as ui])

[ui/menu
  {:as :div, :class [:relative :inline-block :text-left]}
  [ui/menu-button
    {:class [:inline-flex :justify-center :w-full :rounded-md
             :border :border-gray-300 :shadow-sm :px-4 :py-2
             :bg-white :text-sm :font-medium :text-gray-700
             :hover:bg-gray-50]}
    "Options"]
  [ui/menu-items
    {:class [:absolute :right-0 :w-56 :mt-2 :origin-top-right
             :bg-white :divide-y :divide-gray-100 :rounded-md
             :shadow-lg :ring-1 :ring-black :ring-opacity-5
             :focus:outline-none]}
    [ui/menu-item
      (fn [{:keys [active]}]
        [:a.block
          {:href "#/edit"
           :class [:px-4 :py-2 :text-sm
                   (if active :bg-blue-500 :text-gray-900)
                   (when active :text-white)]}
          "Edit"])]
    [ui/menu-item
      (fn [{:keys [active]}]
        [:button.w-full.text-left
          {:class [:px-4 :py-2 :text-sm
                   (if active :bg-blue-500 :text-gray-900)
                   (when active :text-white)]}
          "Delete"])]]]
```
```

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

### Tab Component in Reagent

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Implements a complete tabbed interface using Headless UI's tab components in Reagent. It manages active tab states and renders content panels accessible via keyboard navigation. Dependencies include `headlessui-reagent.core` and `reagent.core`.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Complete tabbed interface
(r/with-let [categories [{:name "Recent", :content "Recent activity and updates"}
                         {:name "Popular", :content "Most popular items this week"}
                         {:name "Trending", :content "Trending topics and discussions"}]]
  [ui/tab-group
    {:as :div, :class [:w-full :max-w-md :px-2 :sm:px-0]}
    [ui/tab-list
      {:class [:flex :space-x-1 :rounded-xl :bg-blue-900/20 :p-1]}
      (for [category categories]
        ^{:key (:name category)}
        [ui/tab
          {:class (fn [{:keys [selected]}]
                    [:w-full :rounded-lg :py-2.5 :text-sm :font-medium
                     :leading-5 :focus:outline-none :transition
                     (if selected
                       [:bg-white :text-blue-700 :shadow]
                       [:text-blue-600 :hover:bg-white/[0.12] :hover:text-blue-800])])}
          (:name category)])]

    [ui/tab-panels
      {:class [:mt-2]}
      (for [category categories]
        ^{:key (:name category)}
        [ui/tab-panel
          {:class [:rounded-xl :bg-white :p-3 :ring-1
                   :ring-black :ring-opacity-5 :focus:outline-none]}
          [:div.text-sm.text-gray-700 (:content category)]
          [:button.mt-4.px-3.py-1.bg-blue-600.text-white.rounded
            "View More"])]])
```

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

### Radio Group Component for Plan Selection (Clojure/Reagent)

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

Implements a radio button group for selecting one option from multiple choices, featuring accessible keyboard navigation and state management. Requires primitive values for proper JS/CLJS interop and uses Reagent atoms to manage the selected state. Ideal for forms where a single selection is needed.

```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

;; Radio group for selecting plans
(r/with-let [plans [{:id "startup", :name "Startup", :price "$29"}
                    {:id "business", :name "Business", :price "$99"}
                    {:id "enterprise", :name "Enterprise", :price "$299"}]
             plan-by-id (zipmap (map :id plans) plans)
             !selected-plan (r/atom (:id (first plans)))]
  [ui/radio-group
    {:value @!selected-plan
     :on-change #(reset! !selected-plan %)}
    [ui/radio-group-label
      {:class [:text-base :font-medium :text-gray-900 :mb-3]}
      "Select a plan"]
    [:div.space-y-2
      (for [plan plans]
        ^{:key (:id plan)}
        [ui/radio-group-option
          {:value (:id plan)
           :class (fn [{:keys [checked]}]
                    [:relative :flex :cursor-pointer :rounded-lg :px-5 :py-4
                     :shadow-md :focus:outline-none
                     (if checked
                       [:bg-blue-600 :text-white :ring-2 :ring-blue-600]
                       [:bg-white :text-gray-900 :ring-1 :ring-gray-300])])}
          (fn [{:keys [checked]}]
            [:div.flex.w-full.items-center.justify-between
              [:div.flex.items-center
                [:div.text-sm
                  [ui/radio-group-label
                    {:as :p, :class [(when checked :text-white) :font-medium]}
                    (:name plan)]
                  [ui/radio-group-description
                    {:as :span, :class [(if checked :text-blue-100 :text-gray-500)]}
                    (:price plan) "/month"]]]
              (when checked
                [:div.shrink-0.text-white "✓"]])])]])

```

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

### Reagent Components vs. Hiccup Keywords with Render Props

Source: https://github.com/sudorock/headlessui-reagent/blob/main/README.md

Illustrates a known limitation when using HeadlessUI's render props pattern with Reagent. It shows that when HeadlessUI needs to pass props (like ARIA attributes or event handlers) to a component, that component must be a hiccup keyword (e.g., `:a`) rather than a Reagent component function. This is a workaround for interop issues where HeadlessUI cannot forward props to Reagent component functions.

```clojure
;; DON'T do this
(defn my-component [{:keys [active]} copy]
  [:a.block {:href "#" :class (when active :bg-blue-500)} copy])

[ui/menu-item
  (fn [props]
    [my-component props "A menu item"])]

;; Instead, do this
[ui/menu-item
  (fn [{:keys [active]}]
    [:a.block {:href "#" :class (when active :bg-blue-500)} "A menu item"])]
```

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

### Disclosure Component API

Source: https://context7.com/sudorock/headlessui-reagent/llms.txt

A disclosure component reveals and hides content, commonly used for accordions and collapsible sections. It manages open/closed state internally and provides accessibility features.

```APIDOC
## Disclosure Component

### Description
A disclosure component reveals and hides content, commonly used for accordions, collapsible sections, and expandable panels. It manages open/closed state internally and provides accessibility features automatically.

### Usage

**Basic Disclosure:**
```clojure
(require '[headlessui-reagent.core :as ui])
(require '[reagent.core :as r])

[ui/disclosure
  [ui/disclosure-button
    {:class [:w-full :px-4 :py-2 :text-sm :font-medium
             :text-purple-900 :bg-purple-100 :rounded-lg
             :hover:bg-purple-200 :focus:outline-none]}
    "Show Details"]
  [ui/disclosure-panel
    {:class [:px-4 :pt-4 :pb-2 :text-sm :text-gray-500]}
    [:p "This content is revealed when the button is clicked."]]]
```

**Using Render Props for State-Based Styling:**
```clojure
[ui/disclosure
  (fn [{:keys [open]}] 
    [:<> 
      [ui/disclosure-button
        {:class [:px-4 :py-2 :rounded 
                 (if open :bg-blue-500 :bg-gray-500)
                 :text-white]}
        (if open "Hide" "Show")]
      (when open 
        [ui/disclosure-panel 
          [:div "Dynamic content based on open state"]])])]
```

**Using `:class` as a Function for Conditional Styling:**
```clojure
[ui/disclosure
  [ui/disclosure-button
    {:class (fn [{:keys [open]}] 
              [:border :rounded :px-4 :py-2 
               (when open :bg-blue-200)])}
    "Toggle"]
  [ui/disclosure-panel "Panel content"]]
```
```
Tokens:
Raw