Sheet

import { cva, type VariantProps } from 'class-variance-authority';

/**
 * Popover-family surfaces share the translucent/blurred recipe; Tooltip uses a
 * solid carve-out because its small, brief text appears over arbitrary content.
 */
export const popoverSurfaceClassName = [
  'nx:rounded-md',
  'nx:border-default',
  'nx:border-border-default',
  'nx:bg-popover-alpha',
  'nx:backdrop-blur-md',
  'nx:text-popover-foreground',
  'nx:typography-body-default',
  'nx:shadow-lg',
].join(' ');

export const tooltipSurfaceClassName = [
  'nx:rounded-md',
  'nx:border-default',
  'nx:border-border-default',
  'nx:bg-popover',
  'nx:text-popover-foreground',
  'nx:typography-body-default',
  'nx:shadow-lg',
].join(' ');

export const navigationMenuInlinePopoverSurfaceClassName = [
  'nx:group-data-[viewport=false]/navigation-menu:rounded-md',
  'nx:group-data-[viewport=false]/navigation-menu:border-default',
  'nx:group-data-[viewport=false]/navigation-menu:border-border-default',
  'nx:group-data-[viewport=false]/navigation-menu:bg-popover-alpha',
  'nx:group-data-[viewport=false]/navigation-menu:backdrop-blur-md',
  'nx:group-data-[viewport=false]/navigation-menu:text-popover-foreground',
  'nx:group-data-[viewport=false]/navigation-menu:shadow-lg',
].join(' ');

export const navigationMenuInlinePopoverTransitionClassName = [
  'nx:group-data-[viewport=false]/navigation-menu:transition-[opacity,scale]',
  'nx:group-data-[viewport=false]/navigation-menu:duration-fast',
  'nx:group-data-[viewport=false]/navigation-menu:ease-move',
  'nx:group-data-[viewport=false]/navigation-menu:data-[state=closed]:scale-95',
  'nx:group-data-[viewport=false]/navigation-menu:data-[state=closed]:opacity-0',
  'nx:group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-overlay-presence-exit',
].join(' ');

// `animate-overlay-presence-exit` is a non-visual "presence bridge": Reka's
// Presence only waits on `animationName`, not `transitionend`, so this inert
// animation keeps a closing overlay mounted while the opacity/scale/translate
// TRANSITIONS below run the visible exit. It animates an unread custom property (see
// generateMotionUtilitiesCSS in @nxds/core), never a transitioned property, so it
// cannot override those transitions.
const overlayPresenceExitClassName =
  'nx:data-[state=closed]:animate-overlay-presence-exit';

export const overlayFloatingTransitionClassName = [
  'nx:transition-[opacity,scale]',
  'nx:duration-fast',
  'nx:ease-move',
  'nx:data-[state=closed]:scale-95',
  'nx:data-[state=closed]:opacity-0',
  overlayPresenceExitClassName,
].join(' ');

const overlayContentTransitionClassName = [
  'nx:transition-[opacity,scale]',
  'nx:duration-default',
  'nx:ease-move',
  'nx:data-[state=closed]:scale-95',
  'nx:data-[state=closed]:opacity-0',
  overlayPresenceExitClassName,
].join(' ');

export const overlayScrimTransitionClassName = [
  'nx:transition-opacity',
  'nx:duration-default',
  'nx:ease-move',
  'nx:data-[state=closed]:opacity-0',
  overlayPresenceExitClassName,
].join(' ');

export const overlayPanelTransitionClassName = [
  'nx:transition-[translate]',
  'nx:duration-slow',
  'nx:ease-move',
  overlayPresenceExitClassName,
].join(' ');

export const overlayContentVariants = cva(
  [
    // Centred with margins, not a translate: a transform would make this the
    // containing block for fixed-position popups a dialog holds.
    'nx:fixed nx:inset-0 nx:z-modal nx:m-auto nx:flex nx:h-fit nx:w-full nx:max-w-lg nx:flex-col',
    'nx:max-h-[calc(100svh-2rem)] nx:overflow-hidden',
    'nx:gap-4 nx:border-default nx:border-border-default nx:bg-container nx:py-6 nx:shadow-lg',
    overlayContentTransitionClassName,
    'nx:sm:rounded-lg',
  ].join(' ')
);

export const overlayScrimVariants = cva(
  [
    'nx:fixed nx:inset-0 nx:z-modal nx:bg-overlay',
    overlayScrimTransitionClassName,
  ].join(' ')
);

export const overlayHeaderVariants = cva(
  'nx:flex nx:shrink-0 nx:flex-col nx:gap-1 nx:px-6',
  {
    variants: {
      variant: {
        default: 'nx:text-center nx:sm:text-left',
        center: 'nx:items-center nx:text-center',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

export const overlayBodyClassName = [
  'nx:min-h-0',
  'nx:overflow-y-auto',
  'nx:px-6',
  'nx:focus-visible:outline-2',
  'nx:focus-visible:outline-focus-default',
  'nx:focus-visible:[outline-offset:-2px]',
].join(' ');

export const overlayFooterVariants = cva(
  'nx:flex nx:shrink-0 nx:gap-2 nx:px-6',
  {
    variants: {
      orientation: {
        horizontal:
          'nx:flex-col nx:sm:flex-row nx:sm:items-center nx:sm:justify-end',
        vertical: 'nx:flex-col nx:items-stretch nx:*:w-full',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  }
);

export const overlayCloseButtonClassName = [
  'nx:absolute nx:right-6 nx:top-6 nx:rounded-sm nx:border-0 nx:bg-transparent nx:p-1 nx:text-muted-foreground-subtle',
  'nx:transition-control',
  'nx:hover:bg-container-hover nx:hover:text-foreground',
  'nx:focus-visible:bg-container-hover nx:focus-visible:text-foreground',
  'nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default',
  'nx:disabled:pointer-events-none',
].join(' ');

export type OverlayHeaderVariants = VariantProps<typeof overlayHeaderVariants>;

export type OverlayVariant = NonNullable<
  VariantProps<typeof overlayHeaderVariants>['variant']
>;

export type OverlayButtonOrientation = NonNullable<
  VariantProps<typeof overlayFooterVariants>['orientation']
>;

export type OverlayLayoutContextValue = {
  variant: OverlayVariant;
  buttonOrientation: OverlayButtonOrientation;
};

export const defaultOverlayLayout: OverlayLayoutContextValue = {
  variant: 'default',
  buttonOrientation: 'horizontal',
};

export function resolveOverlayButtonOrientation(
  variant: OverlayVariant
): OverlayButtonOrientation {
  return variant === 'center' ? 'vertical' : 'horizontal';
}

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';
import { overlayBodyClassName } from '../overlay-layout/overlay-layout';

export interface SheetBodyProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetBodyProps>();
</script>

<template>
  <div
    data-slot="sheet-body"
    tabindex="0"
    :class="cn(overlayBodyClassName, props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import {
  DialogClose,
  DialogContent,
  type DialogContentEmits,
  type DialogContentProps,
  DialogPortal,
  useForwardPropsEmits,
} from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { IconX } from '../../lib/icons';
import { cn } from '../../lib/utils';
import { overlayCloseButtonClassName } from '../overlay-layout/overlay-layout';

import SheetOverlay from './SheetOverlay.vue';

import { type SheetContentVariants, sheetContentVariants } from '.';

export interface SheetContentProps extends DialogContentProps {
  side?: SheetContentVariants['side'];
  /**
   * Shows the close button in the top-right corner.
   */
  showCloseButton?: boolean;
  class?: HTMLAttributes['class'];
}

defineOptions({ inheritAttrs: false });

const props = withDefaults(defineProps<SheetContentProps>(), {
  side: 'right',
  showCloseButton: true,
});
const emits = defineEmits<DialogContentEmits>();

const delegated = reactiveOmit(props, 'class', 'side', 'showCloseButton');
const forwarded = useForwardPropsEmits(delegated, emits);
</script>

<template>
  <DialogPortal>
    <SheetOverlay />
    <DialogContent
      data-slot="sheet-content"
      :data-side="side"
      :class="cn(sheetContentVariants({ side }), props.class)"
      v-bind="{ ...$attrs, ...forwarded }"
    >
      <slot />
      <DialogClose
        v-if="showCloseButton"
        data-slot="sheet-close-button"
        :class="overlayCloseButtonClassName"
      >
        <IconX class="nx:size-4" />
        <span class="nx:sr-only">Close</span>
      </DialogClose>
    </DialogContent>
  </DialogPortal>
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import {
  DialogDescription,
  type DialogDescriptionProps,
  useForwardProps,
} from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface SheetDescriptionProps extends DialogDescriptionProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetDescriptionProps>();

const delegated = reactiveOmit(props, 'class');
const forwarded = useForwardProps(delegated);
</script>

<template>
  <DialogDescription
    v-bind="forwarded"
    data-slot="sheet-description"
    :class="
      cn(
        'nx:m-0 nx:typography-body-default nx:text-muted-foreground',
        props.class
      )
    "
  >
    <slot />
  </DialogDescription>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface SheetFooterProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetFooterProps>();
</script>

<template>
  <div
    data-slot="sheet-footer"
    :class="
      cn(
        'nx:mt-auto nx:flex nx:shrink-0 nx:flex-col nx:gap-2 nx:p-6',
        props.class
      )
    "
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface SheetHeaderProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetHeaderProps>();
</script>

<template>
  <div
    data-slot="sheet-header"
    :class="cn('nx:flex nx:shrink-0 nx:flex-col nx:gap-1 nx:p-6', props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import {
  DialogOverlay,
  type DialogOverlayProps,
  useForwardProps,
} from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';
import { overlayScrimTransitionClassName } from '../overlay-layout/overlay-layout';

export interface SheetOverlayProps extends DialogOverlayProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetOverlayProps>();

const delegated = reactiveOmit(props, 'class');
const forwarded = useForwardProps(delegated);
</script>

<template>
  <DialogOverlay
    v-bind="forwarded"
    data-slot="sheet-overlay"
    :class="
      cn(
        'nx:fixed nx:inset-0 nx:z-modal nx:bg-overlay',
        overlayScrimTransitionClassName,
        props.class
      )
    "
  />
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import { DialogTitle, type DialogTitleProps, useForwardProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface SheetTitleProps extends DialogTitleProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<SheetTitleProps>();

const delegated = reactiveOmit(props, 'class');
const forwarded = useForwardProps(delegated);
</script>

<template>
  <DialogTitle
    v-bind="forwarded"
    data-slot="sheet-title"
    :class="cn('nx:m-0 nx:typography-heading-xsmall', props.class)"
  >
    <slot />
  </DialogTitle>
</template>

import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '../../lib/utils';
import { overlayPanelTransitionClassName } from '../overlay-layout/overlay-layout';

export { default as SheetBody, type SheetBodyProps } from './SheetBody.vue';
export {
  default as SheetContent,
  type SheetContentProps,
} from './SheetContent.vue';
export {
  default as SheetDescription,
  type SheetDescriptionProps,
} from './SheetDescription.vue';
export {
  default as SheetFooter,
  type SheetFooterProps,
} from './SheetFooter.vue';
export {
  default as SheetHeader,
  type SheetHeaderProps,
} from './SheetHeader.vue';
export {
  default as SheetOverlay,
  type SheetOverlayProps,
} from './SheetOverlay.vue';
export { default as SheetTitle, type SheetTitleProps } from './SheetTitle.vue';
export {
  DialogRoot as Sheet,
  DialogClose as SheetClose,
  type DialogCloseProps as SheetCloseProps,
  DialogPortal as SheetPortal,
  type DialogPortalProps as SheetPortalProps,
  type DialogRootProps as SheetProps,
  DialogTrigger as SheetTrigger,
  type DialogTriggerProps as SheetTriggerProps,
} from 'reka-ui';

/**
 * Per-side positioning and slide motion for the sheet panel. Each side pins the
 * panel to an edge, and a closed panel translates 100% past that edge.
 */
export const sheetContentVariants = cva(
  cn(
    'nx:fixed nx:z-modal nx:flex nx:flex-col nx:overflow-hidden',
    'nx:bg-container nx:shadow-lg',
    overlayPanelTransitionClassName
  ),
  {
    variants: {
      side: {
        top: cn(
          'nx:inset-x-0 nx:top-0 nx:h-auto nx:max-h-svh nx:border-b-default nx:border-border-default',
          'nx:data-[state=closed]:-translate-y-full'
        ),
        bottom: cn(
          'nx:inset-x-0 nx:bottom-0 nx:h-auto nx:max-h-svh nx:border-t-default nx:border-border-default',
          'nx:data-[state=closed]:translate-y-full'
        ),
        left: cn(
          'nx:left-0 nx:top-0 nx:h-svh nx:w-3/4 nx:border-r-default nx:border-border-default nx:sm:max-w-sm',
          'nx:data-[state=closed]:-translate-x-full'
        ),
        right: cn(
          'nx:right-0 nx:top-0 nx:h-svh nx:w-3/4 nx:border-l-default nx:border-border-default nx:sm:max-w-sm',
          'nx:data-[state=closed]:translate-x-full'
        ),
      },
    },
    defaultVariants: {
      side: 'right',
    },
  }
);

export type SheetContentVariants = VariantProps<typeof sheetContentVariants>;

/**
 * Internal Icons
 *
 * This barrel file re-exports icons used internally by the design system.
 * These are hardcoded icons for component states (loading, validation, navigation).
 *
 * User-facing icons should be passed via props by consumers.
 *
 * This set draws Phosphor. `nxds init --icons` installs the same names drawn
 * by another library.
 */
import { PhCircle } from '@phosphor-icons/vue';
import { type FunctionalComponent, h } from 'vue';

// Loading states
export { PhCircleNotch as IconLoader2 } from '@phosphor-icons/vue';

// Navigation
export {
  PhArrowDown as IconArrowDown,
  PhArrowLeft as IconArrowLeft,
  PhArrowRight as IconArrowRight,
  PhArrowUp as IconArrowUp,
  PhCaretDown as IconChevronDown,
  PhCaretLeft as IconChevronLeft,
  PhCaretRight as IconChevronRight,
  PhCaretUp as IconChevronUp,
  PhDotsThree as IconDots,
  PhSidebarSimple as IconLayoutSidebar,
  PhCaretUpDown as IconSelector,
} from '@phosphor-icons/vue';

// Actions
export {
  PhCheck as IconCheck,
  PhCopy as IconCopy,
  PhMinus as IconMinus,
  PhPencilSimple as IconPencil,
  PhPlus as IconPlus,
  PhX as IconX,
} from '@phosphor-icons/vue';

export const IconCircleFilled: FunctionalComponent = (_props, { attrs }) =>
  h(PhCircle, { weight: 'fill', ...attrs });

// Filter field types
export {
  PhCalendarBlank as IconCalendar,
  PhHash as IconHash,
  PhTextAa as IconLetterCase,
  PhListBullets as IconList,
} from '@phosphor-icons/vue';

// Search / input
export { PhMagnifyingGlass as IconSearch } from '@phosphor-icons/vue';

// Alerts/Status
export {
  PhWarningCircle as IconAlertCircle,
  PhWarning as IconAlertTriangle,
  PhCheckCircle as IconCircleCheck,
  PhInfo as IconInfoCircle,
} from '@phosphor-icons/vue';

// Layout
export {
  PhDotsSixVertical as IconGripVertical,
  PhPalette as IconPalette,
} from '@phosphor-icons/vue';