Bleed

import type { HTMLArkProps } from '@ark-ui/react/factory';
import { ark } from '@ark-ui/react/factory';
import { clsx } from 'clsx';
import { forwardRef, type ForwardedRef } from 'react';
import styles from './Bleed.module.css';

type BleedAmount = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type BleedInline = BleedAmount | 'full';

const BleedRoot = forwardRef<
  HTMLElement,
  HTMLArkProps<'div'> & {
    inline?: BleedInline;
    block?: BleedAmount;
  }
>(function BleedRoot({ inline = 'full', block = 'none', className, ...props }, ref) {
  return (
    <ark.div
      ref={ref as ForwardedRef<HTMLDivElement>}
      {...props}
      data-scope="bleed"
      data-part="root"
      data-slot="bleed-root"
      data-inline={inline}
      data-block={block}
      className={clsx(styles.root, className)}
    />
  );
});

const Bleed = Object.assign(BleedRoot, {
  Root: BleedRoot,
});

export { Bleed };

@layer moduix.components {
  .root {
    box-sizing: border-box;
    margin: 0;

    &[data-inline='xs'] {
      margin-inline: calc(var(--moduix-bleed-inline-xs, var(--moduix-spacing-1)) * -1);
    }

    &[data-inline='sm'] {
      margin-inline: calc(var(--moduix-bleed-inline-sm, var(--moduix-spacing-2)) * -1);
    }

    &[data-inline='md'] {
      margin-inline: calc(var(--moduix-bleed-inline-md, var(--moduix-spacing-3)) * -1);
    }

    &[data-inline='lg'] {
      margin-inline: calc(var(--moduix-bleed-inline-lg, var(--moduix-spacing-4)) * -1);
    }

    &[data-inline='xl'] {
      margin-inline: calc(var(--moduix-bleed-inline-xl, var(--moduix-spacing-6)) * -1);
    }

    &[data-inline='full'] {
      inline-size: var(--moduix-bleed-inline-full-size, 100vi);
      margin-inline: var(--moduix-bleed-inline-full, calc(50% - 50vi));
    }

    &[data-block='xs'] {
      margin-block: calc(var(--moduix-bleed-block-xs, var(--moduix-spacing-1)) * -1);
    }

    &[data-block='sm'] {
      margin-block: calc(var(--moduix-bleed-block-sm, var(--moduix-spacing-2)) * -1);
    }

    &[data-block='md'] {
      margin-block: calc(var(--moduix-bleed-block-md, var(--moduix-spacing-3)) * -1);
    }

    &[data-block='lg'] {
      margin-block: calc(var(--moduix-bleed-block-lg, var(--moduix-spacing-4)) * -1);
    }

    &[data-block='xl'] {
      margin-block: calc(var(--moduix-bleed-block-xl, var(--moduix-spacing-6)) * -1);
    }
  }
}

export * from './Bleed.js';