import { Disclosure, DisclosureGroup } from "@hashti/react";
// Or via compound subcomponents:
// Disclosure.Root, Disclosure.Trigger, Disclosure.Indicator, Disclosure.Panel, Disclosure.Group

<Disclosure>
  <Disclosure.Trigger headingLevel={3}>
    <span>Advanced Network Settings</span>
    <Disclosure.Indicator />
  </Disclosure.Trigger>
  <Disclosure.Panel>
    <p>Configure custom DNS and proxy rules here.</p>
  </Disclosure.Panel>
</Disclosure>

import { Disclosure, TextField } from "@hashti/react";

export function StandaloneDisclosureExample() {
  return (
    <div className="max-w-md p-4 border border-[var(--divider)] rounded-lg">
      <h3 className="font-semibold text-base mb-2">Project Settings</h3>
      <TextField label="Project Name" defaultValue="Hashti Design System" />

      <Disclosure className="mt-4" defaultExpanded={false}>
        <Disclosure.Trigger headingLevel={4} variant="ghost" className="w-full justify-between">
          <span>Advanced Configuration</span>
          <Disclosure.Indicator />
        </Disclosure.Trigger>
        <Disclosure.Panel>
          <div className="pt-3 space-y-3">
            <TextField label="API Endpoint" defaultValue="https://api.hashti.raminrez.dev" />
            <TextField label="Webhook Secret" type="password" defaultValue="secret_key" />
          </div>
        </Disclosure.Panel>
      </Disclosure>
    </div>
  );
}

import { Disclosure } from "@hashti/react";

export function CardDisclosureExample() {
  return (
    <Disclosure variant="card" className="max-w-lg">
      <Disclosure.Trigger headingLevel={3} className="w-full justify-between">
        <span>Payment Gateway Credentials</span>
        <Disclosure.Indicator />
      </Disclosure.Trigger>
      <Disclosure.Panel>
        <p className="text-sm text-[var(--text-muted)]">
          Manage your production and sandbox Stripe and PayPal API keys.
        </p>
      </Disclosure.Panel>
    </Disclosure>
  );
}

import { Disclosure, DisclosureGroup } from "@hashti/react";

export function FAQGroupExample() {
  return (
    <DisclosureGroup allowsMultipleExpanded variant="card" className="space-y-3 max-w-xl">
      <Disclosure id="panel-1">
        <Disclosure.Trigger headingLevel={3} className="w-full justify-between">
          <span>What design tokens are available in Hashti?</span>
          <Disclosure.Indicator />
        </Disclosure.Trigger>
        <Disclosure.Panel>
          <p className="text-sm text-[var(--text-muted)]">
            Hashti ships with 8 full semantic themes (Core 4, Relay 2, and Frame 2) with 191
            foundational tokens for color, typography, elevation, and density.
          </p>
        </Disclosure.Panel>
      </Disclosure>

      <Disclosure id="panel-2">
        <Disclosure.Trigger headingLevel={3} className="w-full justify-between">
          <span>Is right-to-left (RTL) supported?</span>
          <Disclosure.Indicator />
        </Disclosure.Trigger>
        <Disclosure.Panel>
          <p className="text-sm text-[var(--text-muted)]">
            Yes! Hashti has first-class Persian (Vazirmatn) and Arabic dual-engine support with
            automatic chevron rotation and directional margin mirroring.
          </p>
        </Disclosure.Panel>
      </Disclosure>
    </DisclosureGroup>
  );
}