import { Sheet } from "@hashti/react";
// Or via compound subcomponents:
// Sheet.Root, Sheet.Trigger, Sheet.Overlay, Sheet.Backdrop, Sheet.Content, Sheet.Handle, Sheet.Header, Sheet.Body, Sheet.Footer

<Sheet.Trigger>
  <Button>View Order Details</Button>
  <Sheet placement="bottom" snapPoints={[0.3, 0.6, 0.9]}>
    <Sheet.Backdrop />
    <Sheet.Content>
      <Sheet.Handle />
      <Sheet.Header>Order Summary</Sheet.Header>
      <Sheet.Body>
        <p>Order itemized list and pricing breakdown.</p>
      </Sheet.Body>
      <Sheet.Footer>
        <Button variant="primary">Proceed to Checkout</Button>
      </Sheet.Footer>
    </Sheet.Content>
  </Sheet>
</Sheet.Trigger>

import { useState } from "react";
import { Sheet, Button, Icon } from "@hashti/react";

export function MobileBottomSheetExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="max-w-xs">
      <Button variant="secondary" onPress={() => setIsOpen(true)}>
        Open Mobile Sheet
      </Button>

      <Sheet isOpen={isOpen} onOpenChange={setIsOpen} placement="bottom">
        <Sheet.Backdrop />
        <Sheet.Content className="p-6">
          <Sheet.Handle />
          <div className="mt-4 space-y-4">
            <h3 className="text-base font-semibold">Share Document</h3>
            <p className="text-sm text-[var(--text-muted)]">
              Anyone with this link will be able to view the Hashti design tokens.
            </p>
            <div className="flex gap-2">
              <Button variant="primary" className="flex-1" onPress={() => setIsOpen(false)}>
                Copy Link
              </Button>
              <Button variant="ghost" onPress={() => setIsOpen(false)}>
                Cancel
              </Button>
            </div>
          </div>
        </Sheet.Content>
      </Sheet>
    </div>
  );
}

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

export function SnapPointsSheetExample() {
  return (
    <Sheet.Trigger>
      <Button variant="secondary">Open Map Locations</Button>
      <Sheet placement="bottom" snapPoints={[0.25, 0.5, 0.9]} defaultSnapPoint={0.5}>
        <Sheet.Backdrop />
        <Sheet.Content className="p-6">
          <Sheet.Handle />
          <div className="mt-3 space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-base">Nearby Offices</h3>
              <span className="text-xs text-[var(--text-muted)]">Drag up to expand</span>
            </div>
            <TextField placeholder="Search by city or country..." />
            <div className="space-y-3 pt-2">
              <div className="p-3 bg-[var(--surface-raised)] rounded-md">
                <p className="text-sm font-medium">Tehran Innovation Hub</p>
                <p className="text-xs text-[var(--text-muted)]">Valiasr St, Tehran</p>
              </div>
              <div className="p-3 bg-[var(--surface-raised)] rounded-md">
                <p className="text-sm font-medium">Isfahan Tech Park</p>
                <p className="text-xs text-[var(--text-muted)]">Chaharbagh Ave, Isfahan</p>
              </div>
            </div>
          </div>
        </Sheet.Content>
      </Sheet>
    </Sheet.Trigger>
  );
}

import { Sheet, Button, Checkbox, CheckboxGroup } from "@hashti/react";

export function SideFilterSheetExample() {
  return (
    <Sheet.Trigger>
      <Button variant="ghost">Filter Catalog</Button>
      <Sheet placement="right" className="max-w-md">
        <Sheet.Backdrop />
        <Sheet.Content className="p-6">
          <div className="flex justify-between items-center mb-6">
            <h3 className="font-semibold text-lg">Filters</h3>
            <Sheet.Handle className="hidden" />
          </div>
          <CheckboxGroup label="Component Categories">
            <Checkbox value="actions">Buttons & Actions</Checkbox>
            <Checkbox value="forms">Forms & Inputs</Checkbox>
            <Checkbox value="navigation">Navigation & Collections</Checkbox>
            <Checkbox value="overlays">Overlays & Modals</Checkbox>
          </CheckboxGroup>
        </Sheet.Content>
      </Sheet>
    </Sheet.Trigger>
  );
}