Card

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

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

<div
  bind:this={ref}
  data-slot="card-action"
  class={cn(
    'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end text-[#d0e891]',
    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="card-content"
  class={cn('px-8 text-zinc-300 group-data-[size=sm]/card:px-5', 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<HTMLParagraphElement>> = $props();
</script>

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

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

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

<div
  bind:this={ref}
  data-slot="card-footer"
  class={cn(
    'flex items-center border-t border-[#222225] px-8 pt-6 group-data-[size=sm]/card:px-5 group-data-[size=sm]/card:pt-4',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

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

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

<div
  bind:this={ref}
  data-slot="card-header"
  class={cn(
    'grid auto-rows-min items-start gap-1.5 border-b border-[#222225] px-8 pb-6 group-data-[size=sm]/card:px-5 group-data-[size=sm]/card:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] group/card-header @container/card-header',
    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="card-title"
  class={cn('font-mono text-sm font-semibold uppercase tracking-[0.08em] text-zinc-50', 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,
    size = 'default',
    ...restProps
  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
</script>

<div
  bind:this={ref}
  data-slot="card"
  data-size={size}
  class={cn(
    'flex flex-col gap-8 overflow-hidden border border-[#222225] bg-[#09090b] py-8 text-sm text-zinc-50 shadow-none has-[>img:first-child]:pt-0 data-[size=sm]:gap-5 data-[size=sm]:py-5 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card',
    className
  )}
  {...restProps}
>
  {@render children?.()}
</div>

import Root from './card.svelte';
import Content from './card-content.svelte';
import Description from './card-description.svelte';
import Footer from './card-footer.svelte';
import Header from './card-header.svelte';
import Title from './card-title.svelte';
import Action from './card-action.svelte';

export {
  Root,
  Content,
  Description,
  Footer,
  Header,
  Title,
  Action,
  //
  Root as Card,
  Content as CardContent,
  Description as CardDescription,
  Footer as CardFooter,
  Header as CardHeader,
  Title as CardTitle,
  Action as CardAction
};