Tabs

/** @jsxImportSource hono/jsx */
import type { PropsWithChildren } from "hono/jsx"
import { cn, type ClassValue } from "@/registry/lib/cn"

// Tabs — shadcn-htmx, htmx v4 + Tailwind v4.
//
// We follow the WAI-ARIA APG tabs pattern:
//   repos/aria-practices/content/patterns/tabs/tabs-pattern.html
//
// shadcn's React Tabs uses Radix. For our SSR + tiny-JS setup, we render
// real <button role="tab"> elements and <div role="tabpanel"> siblings, then
// public/site.js wires up the keyboard contract (Arrow keys + Home/End +
// Enter/Space) and click handling. The whole component degrades gracefully:
// without JS, the initial active tab is still visible.
//
// Composition (matches shadcn's API):
//   <Tabs id="my-tabs" value="account">
//     <TabsList>
//       <TabsTrigger value="account">Account</TabsTrigger>
//       <TabsTrigger value="password">Password</TabsTrigger>
//     </TabsList>
//     <TabsContent value="account">…</TabsContent>
//     <TabsContent value="password">…</TabsContent>
//   </Tabs>

export type TabsOrientation = "horizontal" | "vertical"
export type TabsActivation = "automatic" | "manual"

type TabsProps = PropsWithChildren<{
  // The id is required so site.js can scope its keyboard handlers per group
  // and so panels can be aria-labelledby their trigger.
  id: string
  // Initial active value. Each TabsTrigger / TabsContent passes a matching
  // `value` and the one matching this prop is shown.
  value: string
  orientation?: TabsOrientation
  // APG tabs pattern allows two activation modes:
  //   - "automatic" (default): arrow keys move focus AND activate the tab.
  //     Best when revealing a panel is cheap.
  //   - "manual": arrow keys only move focus; the user must press Space or
  //     Enter to activate. Best when activating a tab is expensive (network
  //     request, large render, side effects).
  // See repos/aria-practices/content/patterns/tabs/tabs-pattern.html:49,104-107.
  activation?: TabsActivation
  class?: ClassValue
}>

export function Tabs(props: TabsProps) {
  const {
    id,
    value,
    orientation = "horizontal",
    activation = "automatic",
    class: className,
    children,
  } = props
  // Inline script runs immediately after this element is parsed, so the
  // active trigger / panel get their state set before paint — no flicker.
  // It also leaves data-tabs-ready on the container so site.js knows the
  // group is already bootstrapped and only needs interaction handlers.
  //
  // aria-controls on each trigger references the panel id, per APG:
  //   repos/aria-practices/content/patterns/tabs/tabs-pattern.html:132
  const boot = `(function(el){
    var active = el.getAttribute('data-active-tab');
    el.querySelectorAll('[data-tab-panel]').forEach(function(p){
      var value = p.getAttribute('data-tab-panel');
      p.id = el.id + '-panel-' + value;
    });
    el.querySelectorAll('[data-tab-trigger]').forEach(function(t){
      var value = t.getAttribute('data-tab-trigger');
      var on = value === active;
      t.setAttribute('aria-selected', on ? 'true' : 'false');
      t.setAttribute('tabindex', on ? '0' : '-1');
      t.setAttribute('aria-controls', el.id + '-panel-' + value);
      t.id = el.id + '-trigger-' + value;
    });
    el.querySelectorAll('[data-tab-panel]').forEach(function(p){
      var value = p.getAttribute('data-tab-panel');
      var on = value === active;
      if (on) p.removeAttribute('hidden'); else p.setAttribute('hidden', '');
      p.setAttribute('aria-labelledby', el.id + '-trigger-' + value);
    });
    var list = el.querySelector('[role="tablist"]');
    if (list) list.setAttribute('aria-orientation', el.getAttribute('data-orientation') === 'vertical' ? 'vertical' : 'horizontal');
    el.setAttribute('data-tabs-ready','true');
  })(document.currentScript.previousElementSibling);`
  return (
    <>
      <div
        id={id}
        data-slot="tabs"
        data-tabs
        data-orientation={orientation}
        data-activation={activation}
        data-active-tab={value}
        class={cn(
          "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
          className,
        )}
      >
        {children}
      </div>
      <script
        // biome-ignore lint/security/noDangerouslySetInnerHtml: SSR boot
        dangerouslySetInnerHTML={{ __html: boot }}
      />
    </>
  )
}

type TabsListProps = PropsWithChildren<{
  class?: ClassValue
  ariaLabel?: string
  // APG prefers aria-labelledby pointing at a visible heading when one exists;
  // aria-label is the fallback for an unlabelled tablist. See
  // repos/aria-practices/content/patterns/tabs/tabs-pattern.html:129-130.
  ariaLabelledby?: string
}>

export function TabsList(props: TabsListProps) {
  const { class: className, ariaLabel, ariaLabelledby, children } = props
  return (
    <div
      role="tablist"
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      data-slot="tabs-list"
      class={cn(
        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
        "group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
        className,
      )}
    >
      {children}
    </div>
  )
}

type TabsTriggerProps = PropsWithChildren<{
  value: string
  disabled?: boolean
  class?: ClassValue
  // htmx and arbitrary attributes ride along onto the underlying tab button,
  // mirroring TabsContent. This is the idiomatic host for the htmx lazy-load
  // pattern (hx-get + hx-trigger="click once" to fetch the panel only when the
  // tab is activated), since panels render `hidden` so hooks there would fire
  // on page load. See repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md.
  [key: `hx-${string}`]: any
  [key: `data-${string}`]: any
  [key: `aria-${string}`]: any
}>

export function TabsTrigger(props: TabsTriggerProps) {
  const { value, disabled, class: className, children, ...rest } = props as any
  // aria-selected and tabindex are set at render time based on the parent
  // Tabs' active value. site.js maintains them on switch. Both renderings
  // (server + client) use the same source of truth.
  return (
    <button
      // rest is spread first so the fixed contract attributes below (type,
      // role, data-slot, data-tab-trigger, class) always win and can't be
      // clobbered by passthrough.
      {...rest}
      type="button"
      role="tab"
      data-slot="tabs-trigger"
      data-tab-trigger={value}
      disabled={disabled}
      class={cn(
        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all",
        "hover:text-foreground",
        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        "aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm",
        "dark:aria-selected:border-input dark:aria-selected:bg-input/30 dark:aria-selected:text-foreground",
        "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
    >
      {children}
    </button>
  )
}

type TabsContentProps = PropsWithChildren<{
  value: string
  class?: ClassValue
  // htmx and arbitrary attributes ride along onto the underlying panel div.
  [key: `hx-${string}`]: any
  [key: `data-${string}`]: any
  [key: `aria-${string}`]: any
}>

export function TabsContent(props: TabsContentProps) {
  const { value, class: className, children, ...rest } = props as any
  return (
    <div
      role="tabpanel"
      data-slot="tabs-content"
      data-tab-panel={value}
      tabindex={0}
      class={cn(
        "flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
        className,
      )}
      {...rest}
    >
      {children}
    </div>
  )
}

{# Tabs macros — shadcn-htmx, htmx v4 + Tailwind v4.
   Mirrors registry/ui/tabs.tsx. Renders the wrapper, list, trigger, and
   content panels; the boot <script> right after the wrapper sets the
   initial active tab so the first paint matches the requested state.

   Usage:
     {% from "components/tabs.html" import tabs, tab_trigger, tab_content %}

     {% call tabs(id="account-tabs", value="account") %}
       {% from "components/tabs.html" import tabs_list_open, tabs_list_close %}
       {{ tabs_list_open() }}
         {{ tab_trigger("account",  "Account") }}
         {{ tab_trigger("password", "Password") }}
       {{ tabs_list_close() }}
       {% call(_) tab_content("account") %}
         <p>Account fields…</p>
       {% endcall %}
       {% call(_) tab_content("password") %}
         <p>Password fields…</p>
       {% endcall %}
     {% endcall %} #}

{% macro tabs(id, value, orientation="horizontal", activation="automatic", extra_class="") %}
<div id="{{ id }}"
     data-slot="tabs"
     data-tabs
     data-orientation="{{ orientation }}"
     data-activation="{{ activation }}"
     data-active-tab="{{ value }}"
     class="group/tabs flex gap-2 data-[orientation=horizontal]:flex-col {{ extra_class }}">
  {{ caller() }}
</div>
<script>(function(el){
  var active = el.getAttribute('data-active-tab');
  el.querySelectorAll('[data-tab-panel]').forEach(function(p){
    p.id = el.id + '-panel-' + p.getAttribute('data-tab-panel');
  });
  el.querySelectorAll('[data-tab-trigger]').forEach(function(t){
    var value = t.getAttribute('data-tab-trigger');
    var on = value === active;
    t.setAttribute('aria-selected', on ? 'true' : 'false');
    t.setAttribute('tabindex', on ? '0' : '-1');
    t.setAttribute('aria-controls', el.id + '-panel-' + value);
    t.id = el.id + '-trigger-' + value;
  });
  el.querySelectorAll('[data-tab-panel]').forEach(function(p){
    var value = p.getAttribute('data-tab-panel');
    var on = value === active;
    if (on) p.removeAttribute('hidden'); else p.setAttribute('hidden', '');
    p.setAttribute('aria-labelledby', el.id + '-trigger-' + value);
  });
  el.setAttribute('data-tabs-ready','true');
})(document.currentScript.previousElementSibling);</script>
{% endmacro %}

{# APG prefers aria_labelledby pointing at a visible heading when one exists;
   aria_label is the fallback for an unlabelled tablist. See
   repos/aria-practices/content/patterns/tabs/tabs-pattern.html:129-130. #}
{% macro tabs_list_open(aria_label=none, aria_labelledby=none, extra_class="") -%}
<div role="tablist"
     {%- if aria_label %} aria-label="{{ aria_label }}"{% endif %}
     {%- if aria_labelledby %} aria-labelledby="{{ aria_labelledby }}"{% endif %}
     data-slot="tabs-list"
     class="inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col {{ extra_class }}">
{%- endmacro %}
{% macro tabs_list_close() %}</div>{% endmacro %}

{# **attrs passes hx-* and other attributes through onto the tab button
   (underscores become dashes), mirroring how button.html forwards attrs. This
   is the idiomatic host for the htmx lazy-load pattern (hx_get + hx_trigger=
   "click once" to fetch the panel only when the tab is activated); panels
   render hidden so hooks there fire on load. See
   repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md. #}
{% macro tab_trigger(value, label, disabled=false, extra_class="", **attrs) %}
<button type="button"
        role="tab"
        data-slot="tabs-trigger"
        data-tab-trigger="{{ value }}"
        {% if disabled %} disabled{% endif %}
        {%- for k, v in attrs.items() %} {{ k|replace('_', '-') }}="{{ v }}"{% endfor %}
        class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm dark:aria-selected:border-input dark:aria-selected:bg-input/30 dark:aria-selected:text-foreground group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 {{ extra_class }}">{{ label }}</button>
{% endmacro %}

{% macro tab_content(value, extra_class="") %}
<div role="tabpanel"
     data-slot="tabs-content"
     data-tab-panel="{{ value }}"
     tabindex="0"
     class="flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 {{ extra_class }}">
  {{ caller() }}
</div>
{% endmacro %}

{{/*
  Tabs template — shadcn-htmx, htmx v4 + Tailwind v4.
  Mirrors registry/ui/tabs.tsx. Provides three named templates:
    - "tabs"          — the wrapper + boot script
    - "tabs_list"     — opens / closes the role="tablist" container
    - "tabs_trigger"  — one tab button
    - "tabs_content"  — one panel

  Usage (compose your own block of HTML inside):

      type TabsArgs struct {
          ID, Active, Orientation string
          Body                    template.HTML
      }

  Hand-compose the inner HTML so you can build the trigger list + panels.
*/}}

{{define "tabs"}}
{{- $orientation := or .Orientation "horizontal" -}}
{{- $activation := or .Activation "automatic" -}}
<div id="{{.ID}}"
     data-slot="tabs"
     data-tabs
     data-orientation="{{$orientation}}"
     data-activation="{{$activation}}"
     data-active-tab="{{.Active}}"
     class="group/tabs flex gap-2 data-[orientation=horizontal]:flex-col">
  {{.Body}}
</div>
<script>(function(el){
  var active = el.getAttribute('data-active-tab');
  el.querySelectorAll('[data-tab-panel]').forEach(function(p){
    p.id = el.id + '-panel-' + p.getAttribute('data-tab-panel');
  });
  el.querySelectorAll('[data-tab-trigger]').forEach(function(t){
    var value = t.getAttribute('data-tab-trigger');
    var on = value === active;
    t.setAttribute('aria-selected', on ? 'true' : 'false');
    t.setAttribute('tabindex', on ? '0' : '-1');
    t.setAttribute('aria-controls', el.id + '-panel-' + value);
    t.id = el.id + '-trigger-' + value;
  });
  el.querySelectorAll('[data-tab-panel]').forEach(function(p){
    var value = p.getAttribute('data-tab-panel');
    var on = value === active;
    if (on) p.removeAttribute('hidden'); else p.setAttribute('hidden', '');
    p.setAttribute('aria-labelledby', el.id + '-trigger-' + value);
  });
  el.setAttribute('data-tabs-ready','true');
})(document.currentScript.previousElementSibling);</script>
{{end}}

{{/*
  tabs_trigger args: { Value, Label string; Disabled bool; Attrs map[string]string }
  .Attrs (e.g. {"hx-get": "/tab/account", "hx-target": "#panel", "hx-trigger": "click once"})
  ranges onto the tab button, mirroring button.tmpl. This is the idiomatic host
  for the htmx lazy-load pattern — fetch the panel only when the tab is
  activated; panels render hidden so hooks there fire on load. See
  repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md.
*/}}
{{define "tabs_trigger"}}
<button type="button"
        role="tab"
        data-slot="tabs-trigger"
        data-tab-trigger="{{.Value}}"
        {{- if .Disabled}} disabled{{end}}
        {{- range $k, $v := .Attrs}} {{$k}}="{{$v}}"{{end}}
        class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm dark:aria-selected:border-input dark:aria-selected:bg-input/30 dark:aria-selected:text-foreground group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">{{.Label}}</button>
{{end}}

{{define "tabs_content"}}
<div role="tabpanel"
     data-slot="tabs-content"
     data-tab-panel="{{.Value}}"
     tabindex="0"
     class="flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">{{.Body}}</div>
{{end}}

defmodule ShadcnHtmx.Components.Tabs do
  @moduledoc """
  Tabs — shadcn-htmx, htmx v4 + Tailwind v4 for Phoenix.

  Mirrors registry/ui/tabs.tsx. Three function components: `tabs`,
  `tabs_list`, `tabs_trigger`, `tabs_content`. The keyboard contract
  (arrows, Home, End) is wired up in public/site.js.

  ## Examples

      <.tabs id="account-tabs" value="account">
        <.tabs_list>
          <.tabs_trigger value="account">Account</.tabs_trigger>
          <.tabs_trigger value="password">Password</.tabs_trigger>
        </.tabs_list>
        <.tabs_content value="account">
          <p>Account fields…</p>
        </.tabs_content>
        <.tabs_content value="password">
          <p>Password fields…</p>
        </.tabs_content>
      </.tabs>
  """

  use Phoenix.Component

  attr :id, :string, required: true
  attr :value, :string, required: true
  attr :orientation, :string, default: "horizontal", values: ~w(horizontal vertical)
  # APG activation mode — "automatic" (focus = activate) or "manual" (focus
  # only; Space/Enter to activate). See
  # repos/aria-practices/content/patterns/tabs/tabs-pattern.html:49,104-107.
  attr :activation, :string, default: "automatic", values: ~w(automatic manual)
  attr :class, :string, default: nil
  slot :inner_block, required: true

  def tabs(assigns) do
    ~H"""
    <div
      id={@id}
      data-slot="tabs"
      data-tabs
      data-orientation={@orientation}
      data-activation={@activation}
      data-active-tab={@value}
      class={["group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", @class]}
    >
      {render_slot(@inner_block)}
    </div>
    <script>{Phoenix.HTML.raw(~s"""
      (function(el){
        var active = el.getAttribute('data-active-tab');
        el.querySelectorAll('[data-tab-panel]').forEach(function(p){
          p.id = el.id + '-panel-' + p.getAttribute('data-tab-panel');
        });
        el.querySelectorAll('[data-tab-trigger]').forEach(function(t){
          var value = t.getAttribute('data-tab-trigger');
          var on = value === active;
          t.setAttribute('aria-selected', on ? 'true' : 'false');
          t.setAttribute('tabindex', on ? '0' : '-1');
          t.setAttribute('aria-controls', el.id + '-panel-' + value);
          t.id = el.id + '-trigger-' + value;
        });
        el.querySelectorAll('[data-tab-panel]').forEach(function(p){
          var value = p.getAttribute('data-tab-panel');
          var on = value === active;
          if (on) p.removeAttribute('hidden'); else p.setAttribute('hidden', '');
          p.setAttribute('aria-labelledby', el.id + '-trigger-' + value);
        });
        el.setAttribute('data-tabs-ready','true');
      })(document.currentScript.previousElementSibling);
    """)}</script>
    """
  end

  attr :class, :string, default: nil
  attr :"aria-label", :string, default: nil
  # APG prefers aria-labelledby pointing at a visible heading when one exists;
  # aria-label is the fallback for an unlabelled tablist. See
  # repos/aria-practices/content/patterns/tabs/tabs-pattern.html:129-130.
  attr :"aria-labelledby", :string, default: nil
  slot :inner_block, required: true

  def tabs_list(assigns) do
    ~H"""
    <div
      role="tablist"
      aria-label={assigns[:"aria-label"]}
      aria-labelledby={assigns[:"aria-labelledby"]}
      data-slot="tabs-list"
      class={[
        "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
        "group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end

  attr :value, :string, required: true
  attr :disabled, :boolean, default: false
  attr :class, :string, default: nil

  # htmx and arbitrary attributes ride along onto the underlying tab button,
  # mirroring tabs_content. This is the idiomatic host for the htmx lazy-load
  # pattern (hx-get + hx-trigger="click once" to fetch the panel only when the
  # tab is activated), since panels render hidden so hooks there fire on load.
  # See repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md.
  attr :rest, :global,
    include:
      ~w(hx-get hx-post hx-put hx-patch hx-delete hx-target hx-swap hx-trigger hx-indicator hx-confirm hx-vals hx-disable
         id aria-label aria-labelledby aria-describedby aria-haspopup)

  slot :inner_block, required: true

  def tabs_trigger(assigns) do
    ~H"""
    <button
      type="button"
      role="tab"
      data-slot="tabs-trigger"
      data-tab-trigger={@value}
      disabled={@disabled}
      {@rest}
      class={[
        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all",
        "hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        "aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm",
        "dark:aria-selected:border-input dark:aria-selected:bg-input/30 dark:aria-selected:text-foreground",
        "group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start",
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </button>
    """
  end

  attr :value, :string, required: true
  attr :class, :string, default: nil
  slot :inner_block, required: true

  def tabs_content(assigns) do
    ~H"""
    <div
      role="tabpanel"
      data-slot="tabs-content"
      data-tab-panel={@value}
      tabindex="0"
      class={[
        "flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
        @class
      ]}
    >
      {render_slot(@inner_block)}
    </div>
    """
  end
end

<!--
  shadcn-htmx — raw HTML tabs snippet.

  Mirrors registry/ui/tabs.tsx. The inline <script> right after the wrapper
  applies the active state on first paint (no flicker). The keyboard
  contract (arrows / Home / End) needs the wiring in public/site.js.

  Required CSS theme variables: --background, --foreground, --muted,
  --muted-foreground, --ring, --input. See app/styles/input.css.

  Labelling the tablist (WAI-ARIA APG): if a visible heading exists above the
  tabs, point at it with aria-labelledby instead of aria-label, e.g.
  <h2 id="settings-heading">Settings</h2> then
  <div role="tablist" aria-labelledby="settings-heading" …>. Use aria-label only
  when there is no visible label. See
  repos/aria-practices/content/patterns/tabs/tabs-pattern.html:129-130.

  Lazy-loading a panel on tab activation (htmx): put the hx-* hook on the tab
  button (NOT the panel — panels render hidden, so a hook there fires on page
  load), e.g. <button role="tab" … hx-get="/tab/account" hx-target="#…-panel-account"
  hx-trigger="click once">. See
  repos/htmx/www/src/content/patterns/01-loading/03-lazy-load.md.

  Minimal inline JS for keyboard navigation:

    <script>
      document.addEventListener('keydown', (e) => {
        const t = e.target.closest('[data-tab-trigger]')
        if (!t) return
        const group = t.closest('[data-tabs]')
        const orientation = group.getAttribute('data-orientation') || 'horizontal'
        const prev = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
        const next = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
        if (![prev, next, 'Home', 'End'].includes(e.key)) return
        e.preventDefault()
        const list = [...group.querySelectorAll('[data-tab-trigger]:not([disabled])')]
        const i = list.indexOf(t)
        const target =
          e.key === prev ? list[(i - 1 + list.length) % list.length] :
          e.key === next ? list[(i + 1) % list.length] :
          e.key === 'Home' ? list[0] : list[list.length - 1]
        target.focus()
        target.click()
      })
    </script>
-->

<div id="account-tabs"
     data-slot="tabs"
     data-tabs
     data-orientation="horizontal"
     data-activation="automatic"
     data-active-tab="account"
     class="group/tabs flex flex-col gap-2 data-[orientation=horizontal]:flex-col">

  <div role="tablist" data-slot="tabs-list"
       class="inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground">

    <button type="button" role="tab"
            data-slot="tabs-trigger"
            data-tab-trigger="account"
            class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm">
      Account
    </button>

    <button type="button" role="tab"
            data-slot="tabs-trigger"
            data-tab-trigger="password"
            class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none aria-selected:bg-background aria-selected:text-foreground aria-selected:shadow-sm">
      Password
    </button>

  </div>

  <div role="tabpanel" data-slot="tabs-content" data-tab-panel="account" tabindex="0"
       class="flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
    <!-- Account fields -->
  </div>

  <div role="tabpanel" data-slot="tabs-content" data-tab-panel="password" tabindex="0"
       class="flex-1 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
    <!-- Password fields -->
  </div>

</div>

<script>
  (function (el) {
    var active = el.getAttribute('data-active-tab')
    el.querySelectorAll('[data-tab-panel]').forEach(function (p) {
      p.id = el.id + '-panel-' + p.getAttribute('data-tab-panel')
    })
    el.querySelectorAll('[data-tab-trigger]').forEach(function (t) {
      var value = t.getAttribute('data-tab-trigger')
      var on = value === active
      t.setAttribute('aria-selected', on ? 'true' : 'false')
      t.setAttribute('tabindex', on ? '0' : '-1')
      t.setAttribute('aria-controls', el.id + '-panel-' + value)
      t.id = el.id + '-trigger-' + value
    })
    el.querySelectorAll('[data-tab-panel]').forEach(function (p) {
      var value = p.getAttribute('data-tab-panel')
      var on = value === active
      if (on) p.removeAttribute('hidden'); else p.setAttribute('hidden', '')
      p.setAttribute('aria-labelledby', el.id + '-trigger-' + value)
    })
    el.setAttribute('data-tabs-ready', 'true')
  })(document.currentScript.previousElementSibling)
</script>