Popover

import Root from './popover.svelte';
import Close from './popover-close.svelte';
import Content from './popover-content.svelte';
import Description from './popover-description.svelte';
import Header from './popover-header.svelte';
import Title from './popover-title.svelte';
import Trigger from './popover-trigger.svelte';
import Portal from './popover-portal.svelte';

export {
  Root,
  Content,
  Description,
  Header,
  Title,
  Trigger,
  Close,
  Portal,
  //
  Root as Popover,
  Content as PopoverContent,
  Description as PopoverDescription,
  Header as PopoverHeader,
  Title as PopoverTitle,
  Trigger as PopoverTrigger,
  Close as PopoverClose,
  Portal as PopoverPortal
};

<script lang="ts">
  import { Popover as PopoverPrimitive } from 'bits-ui';
  import { cn } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    ...restProps
  }: PopoverPrimitive.CloseProps = $props();
</script>

<PopoverPrimitive.Close
  bind:ref
  data-slot="popover-close"
  class={cn(
    'outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/30',
    className
  )}
  {...restProps}
/>

<script lang="ts">
  import { Popover as PopoverPrimitive } from 'bits-ui';
  import PopoverPortal from './popover-portal.svelte';
  import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';
  import type { ComponentProps } from 'svelte';

  let {
    ref = $bindable(null),
    class: className,
    sideOffset = 4,
    align = 'center',
    portalProps,
    ...restProps
  }: PopoverPrimitive.ContentProps & {
    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
  } = $props();
</script>

<PopoverPortal {...portalProps}>
  <PopoverPrimitive.Content
    bind:ref
    data-slot="popover-content"
    {sideOffset}
    {align}
    class={cn(
      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 border border-[#222225] bg-[#09090b] p-4 text-sm text-zinc-50 shadow-none outline-hidden duration-100',
      className
    )}
    {...restProps}
  />
</PopoverPortal>

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="popover-description"
  class={cn('mt-0.5 text-sm leading-relaxed text-zinc-400', className)}
  {...restProps}
>
  {@render children?.()}
</div>

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="popover-header"
  class={cn('flex flex-col gap-1 border-b border-[#222225] pb-3 text-sm', className)}
  {...restProps}
>
  {@render children?.()}
</div>

<script lang="ts">
  import { Popover as PopoverPrimitive } from 'bits-ui';

  let { ...restProps }: PopoverPrimitive.PortalProps = $props();
</script>

<PopoverPrimitive.Portal {...restProps} />

<script lang="ts">
  import type { HTMLAttributes } from 'svelte/elements';
  import { cn, type WithElementRef } from '$UTILS$.js';

  let {
    ref = $bindable(null),
    class: className,
    children,
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script>

<div
  bind:this={ref}
  data-slot="popover-title"
  class={cn('font-mono text-xs font-semibold uppercase tracking-[0.08em] text-zinc-50', className)}
  {...restProps}
>
  {@render children?.()}
</div>

<script lang="ts">
  import { cn } from '$UTILS$.js';
  import { Popover as PopoverPrimitive } from 'bits-ui';

  let {
    ref = $bindable(null),
    class: className,
    ...restProps
  }: PopoverPrimitive.TriggerProps = $props();
</script>

<PopoverPrimitive.Trigger
  bind:ref
  data-slot="popover-trigger"
  class={cn(
    'outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/30',
    className
  )}
  {...restProps}
/>

<script lang="ts">
  import { Popover as PopoverPrimitive } from 'bits-ui';

  let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
</script>

<PopoverPrimitive.Root bind:open {...restProps} />