From ee8ae4df265aa1a406b059e2284b91048da6f47a Mon Sep 17 00:00:00 2001
From: Jeanne Mas <jeannemas@jeannemas.me>
Date: Tue, 4 Jun 2024 12:12:18 -0400
Subject: [PATCH] component: Card

---
 .../components/calendar/CalendarRoot.svelte   |  1 +
 src/lib/components/card/CardContent.svelte    | 32 +++++++++++
 .../components/card/CardDescription.svelte    | 43 +++++++++++++-
 src/lib/components/card/CardFooter.svelte     | 38 ++++++++++++-
 src/lib/components/card/CardHeader.svelte     | 46 ++++++++++++++-
 src/lib/components/card/CardRoot.svelte       | 56 ++++++++++++++++++-
 src/lib/components/card/CardTitle.svelte      | 41 ++++++++++++++
 src/lib/components/card/context.ts            | 11 ++++
 src/lib/components/card/index.ts              |  2 +-
 src/routes/accordion/+page.ts                 |  4 +-
 src/routes/alert-dialog/+page.ts              | 14 ++---
 src/routes/alert-dialog/props.schema.ts       | 12 +++-
 src/routes/alert/+page.ts                     |  8 +--
 src/routes/alert/props.schema.ts              |  7 ++-
 src/routes/breadcrumb/+page.ts                |  8 +--
 src/routes/breadcrumb/props.schema.ts         |  7 ++-
 src/routes/card/+page.svelte                  |  6 +-
 src/routes/card/+page.ts                      |  8 +--
 src/routes/card/props.schema.ts               |  4 +-
 19 files changed, 305 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/components/card/context.ts

diff --git a/src/lib/components/calendar/CalendarRoot.svelte b/src/lib/components/calendar/CalendarRoot.svelte
index 7f5aa57..9e85b8b 100644
--- a/src/lib/components/calendar/CalendarRoot.svelte
+++ b/src/lib/components/calendar/CalendarRoot.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+  import '@internationalized/date';
   import { Calendar as CalendarPrimitive } from 'bits-ui';
   import type { SvelteHTMLElements } from 'svelte/elements';
   import { writable } from 'svelte/store';
diff --git a/src/lib/components/card/CardContent.svelte b/src/lib/components/card/CardContent.svelte
index 5788e74..959c398 100644
--- a/src/lib/components/card/CardContent.svelte
+++ b/src/lib/components/card/CardContent.svelte
@@ -4,6 +4,8 @@
 
   import type { EmptyObject } from '$lib/utils/types.js';
 
+  import { rootContext } from './context.js';
+
   /**
    * The attributes of the content.
    */
@@ -33,11 +35,41 @@
   type $$Slots = Slots;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.get();
+
+  if (!rootCtx) {
+    throw new Error('Card.Content must be used within a Card.Root component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The content of the card component.
+
+Must be used within a `Card.Root` component.
+
+### Attributes
+
+Accepts the attributes of a `div` element.
+
+### Events
+
+None.
+
+### Props
+
+None.
+
+### Slots
+
+- `default` - The default slot.
+-->
+
 <div
   {...attributes}
   class="{contentStyles({
diff --git a/src/lib/components/card/CardDescription.svelte b/src/lib/components/card/CardDescription.svelte
index a78241a..f06727f 100644
--- a/src/lib/components/card/CardDescription.svelte
+++ b/src/lib/components/card/CardDescription.svelte
@@ -4,6 +4,8 @@
 
   import type { EmptyObject } from '$lib/utils/types.js';
 
+  import { headerContext } from './context.js';
+
   /**
    * The attributes of the description.
    */
@@ -23,7 +25,13 @@
    * The styles of the description.
    */
   export const descriptionStyles = tv({
-    base: ['text-sm text-muted-foreground'],
+    base: ['text-sm'],
+    variants: {
+      variant: {
+        danger: ['text-red-500'],
+        default: ['text-muted-foreground'],
+      },
+    },
   });
 </script>
 
@@ -33,15 +41,48 @@
   type $$Slots = Slots;
 
   $: attributes = $$restProps as Attributes;
+
+  const headerCtx = headerContext.get();
+
+  if (!headerCtx) {
+    throw new Error('Card.Description must be used within a Card.Header component.');
+  }
+
+  $: ({ variant } = $headerCtx!);
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The description of the card component.
+
+Must be used within a `Card.Header` component.
+
+### Attributes
+
+Accepts the attributes of a `p` element.
+
+### Events
+
+None.
+
+### Props
+
+None.
+
+### Slots
+
+- `default` - The default slot.
+-->
+
 <p
   {...attributes}
   class="{descriptionStyles({
     class: attributes.class,
+    variant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/card/CardFooter.svelte b/src/lib/components/card/CardFooter.svelte
index e31e0a3..7b1906e 100644
--- a/src/lib/components/card/CardFooter.svelte
+++ b/src/lib/components/card/CardFooter.svelte
@@ -4,10 +4,12 @@
 
   import type { EmptyObject } from '$lib/utils/types.js';
 
+  import { rootContext } from './context.js';
+
   /**
    * The attributes of the footer.
    */
-  export type Attributes = SvelteHTMLElements['div'];
+  export type Attributes = SvelteHTMLElements['footer'];
   /**
    * The props of the footer.
    */
@@ -33,16 +35,46 @@
   type $$Slots = Slots;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.get();
+
+  if (!rootCtx) {
+    throw new Error('Card.Content must be used within a Card.Root component.');
+  }
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<div
+<!--
+@component
+
+The footer of the card component.
+
+Must be used within a `Card.Root` component.
+
+### Attributes
+
+Accepts the attributes of a `footer` element.
+
+### Events
+
+None.
+
+### Props
+
+None.
+
+### Slots
+
+- `default` - The default slot.
+-->
+
+<footer
   {...attributes}
   class="{footerStyles({
     class: attributes.class,
   })}"
 >
   <slot />
-</div>
+</footer>
diff --git a/src/lib/components/card/CardHeader.svelte b/src/lib/components/card/CardHeader.svelte
index b0f5c9d..df3e9e1 100644
--- a/src/lib/components/card/CardHeader.svelte
+++ b/src/lib/components/card/CardHeader.svelte
@@ -1,13 +1,16 @@
 <script context="module" lang="ts">
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv } from 'tailwind-variants';
 
   import type { EmptyObject } from '$lib/utils/types.js';
 
+  import { headerContext, rootContext } from './context.js';
+
   /**
    * The attributes of the header.
    */
-  export type Attributes = SvelteHTMLElements['div'];
+  export type Attributes = SvelteHTMLElements['header'];
   /**
    * The props of the header.
    */
@@ -33,16 +36,53 @@
   type $$Slots = Slots;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.get();
+
+  if (!rootCtx) {
+    throw new Error('Card.Header must be used within a Card.Root component.');
+  }
+
+  const headerCtx = headerContext.set(writable());
+
+  $: headerCtx.update(($ctx) => ({
+    ...$ctx,
+    ...$rootCtx,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
-<div
+<!--
+@component
+
+The header of the card component.
+
+Must be used within a `Card.Root` component.
+
+### Attributes
+
+Accepts the attributes of a `header` element.
+
+### Events
+
+None.
+
+### Props
+
+None.
+
+### Slots
+
+- `default` - The default slot.
+-->
+
+<header
   {...attributes}
   class="{headerStyles({
     class: attributes.class,
   })}"
 >
   <slot />
-</div>
+</header>
diff --git a/src/lib/components/card/CardRoot.svelte b/src/lib/components/card/CardRoot.svelte
index c85a24b..bfcb0ae 100644
--- a/src/lib/components/card/CardRoot.svelte
+++ b/src/lib/components/card/CardRoot.svelte
@@ -1,9 +1,12 @@
 <script context="module" lang="ts">
   import type { SvelteHTMLElements } from 'svelte/elements';
+  import { writable } from 'svelte/store';
   import { tv, type VariantProps } from 'tailwind-variants';
 
   import type { EmptyObject } from '$lib/utils/types.js';
 
+  import { rootContext } from './context.js';
+
   /**
    * The attributes of the root.
    */
@@ -40,8 +43,8 @@
     },
     variants: {
       variant: {
-        danger: ['border-red-500 bg-red-50 text-red-500'],
-        default: ['border-border bg-card text-card-foreground'],
+        danger: ['border-red-500 bg-red-50'],
+        default: ['border-border bg-card'],
       },
     },
   });
@@ -55,11 +58,60 @@
   export let variant: Props['variant'] = rootStyles.defaultVariants.variant;
 
   $: attributes = $$restProps as Attributes;
+
+  const rootCtx = rootContext.set(writable());
+
+  $: rootCtx.update(($ctx) => ({
+    ...$ctx,
+    variant,
+  }));
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The root of the card component.
+
+### Attributes
+
+Accepts the attributes of a `div` element.
+
+### Events
+
+None.
+
+### Props
+
+- `variant` - The variant of the card.
+
+### Slots
+
+- `default` - The default slot.
+
+### Components hierarchy
+
+```html
+<Card.Root>
+  <Card.Header>
+    <Card.Title />
+
+    <Card.Description />
+  </Card.Header>
+
+  <Card.Content>
+    ...
+  </Card.Content>
+
+  <Card.Footer>
+    ...
+  </Card.Footer>
+</Card.Root>
+```
+-->
+
 <div
   {...attributes}
   class="{rootStyles({
diff --git a/src/lib/components/card/CardTitle.svelte b/src/lib/components/card/CardTitle.svelte
index f62f77d..e3aa19c 100644
--- a/src/lib/components/card/CardTitle.svelte
+++ b/src/lib/components/card/CardTitle.svelte
@@ -4,6 +4,8 @@
 
   import type { EmptyObject, HeadingLevel } from '$lib/utils/types.js';
 
+  import { headerContext } from './context.js';
+
   /**
    * The attributes of the title.
    */
@@ -29,6 +31,12 @@
    */
   export const titleStyles = tv({
     base: ['text-lg font-semibold leading-none tracking-tight'],
+    variants: {
+      variant: {
+        danger: ['text-red-500'],
+        default: ['text-card-foreground'],
+      },
+    },
   });
 </script>
 
@@ -41,16 +49,49 @@
   export let level: TypedProps['level'] = 'h3' as TypedProps['level'];
 
   $: attributes = $$restProps as Attributes;
+
+  const headerCtx = headerContext.get();
+
+  if (!headerCtx) {
+    throw new Error('Card.Title must be used within a Card.Header component.');
+  }
+
+  $: ({ variant } = $headerCtx!);
 </script>
 
 <!-- <style lang="postcss">
 </style> -->
 
+<!--
+@component
+
+The title of the card component.
+
+Must be used within a `Card.Header` component.
+
+### Attributes
+
+Accepts the attributes of a heading element.
+
+### Events
+
+None.
+
+### Props
+
+- `level` - The heading level.
+
+### Slots
+
+- `default` - The default slot.
+-->
+
 <svelte:element
   this="{level}"
   {...attributes}
   class="{titleStyles({
     class: attributes.class,
+    variant,
   })}"
 >
   <slot />
diff --git a/src/lib/components/card/context.ts b/src/lib/components/card/context.ts
new file mode 100644
index 0000000..14c1ad5
--- /dev/null
+++ b/src/lib/components/card/context.ts
@@ -0,0 +1,11 @@
+import type { Writable } from 'svelte/store';
+
+import { Context } from '$lib/utils/context.js';
+
+import type { HeaderProps, RootProps } from './index.js';
+
+type HeaderContext = RootContext & Pick<HeaderProps, never>;
+type RootContext = Pick<RootProps, 'variant'>;
+
+export const headerContext = new Context<Writable<HeaderContext>>();
+export const rootContext = new Context<Writable<RootContext>>();
diff --git a/src/lib/components/card/index.ts b/src/lib/components/card/index.ts
index fd44703..078fee7 100644
--- a/src/lib/components/card/index.ts
+++ b/src/lib/components/card/index.ts
@@ -32,7 +32,7 @@ export {
   type Attributes as RootAttributes,
   type Props as RootProps,
   type Slots as RootSlots,
-  type Variant as RootVariant,
+  type Variant,
 } from './CardRoot.svelte';
 export {
   default as Title,
diff --git a/src/routes/accordion/+page.ts b/src/routes/accordion/+page.ts
index 950cac7..6a4c465 100644
--- a/src/routes/accordion/+page.ts
+++ b/src/routes/accordion/+page.ts
@@ -1,7 +1,7 @@
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-import { rootStyles } from '$lib/components/accordion/index.js';
+import * as Accordion from '$lib/components/accordion/index.js';
 
 import type { PageLoad } from './$types.js';
 import { schema } from './props.schema.js';
@@ -9,7 +9,7 @@ import { schema } from './props.schema.js';
 export const load = (async ({ fetch }) => {
   const form = await superValidate(zod(schema), {
     defaults: {
-      disabled: rootStyles.defaultVariants.disabled!,
+      disabled: Accordion.rootStyles.defaultVariants.disabled!,
     },
   });
   const posts: {
diff --git a/src/routes/alert-dialog/+page.ts b/src/routes/alert-dialog/+page.ts
index fc8f7c2..1b67650 100644
--- a/src/routes/alert-dialog/+page.ts
+++ b/src/routes/alert-dialog/+page.ts
@@ -2,7 +2,7 @@ import type { Selected } from 'bits-ui';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-import { rootStyles, type Breakpoint, type Variant } from '$lib/components/alert-dialog/index.js';
+import * as AlertDialog from '$lib/components/alert-dialog/index.js';
 
 import type { PageLoad } from './$types.js';
 import { schema } from './props.schema.js';
@@ -10,21 +10,21 @@ import { schema } from './props.schema.js';
 export const load = (async () => {
   const form = await superValidate(zod(schema), {
     defaults: {
-      breakpoint: rootStyles.defaultVariants.breakpoint!,
+      breakpoint: AlertDialog.rootStyles.defaultVariants.breakpoint!,
       closeOnEscape: true,
       closeOnOutsideClick: false,
       preventScroll: true,
-      variant: rootStyles.defaultVariants.variant!,
+      variant: AlertDialog.rootStyles.defaultVariants.variant!,
     },
   });
-  const breakpoints = Object.keys(rootStyles.variants.breakpoint).map((breakpoint) => ({
+  const breakpoints = Object.keys(AlertDialog.rootStyles.variants.breakpoint).map((breakpoint) => ({
     label: breakpoint,
     value: breakpoint,
-  })) as Selected<Breakpoint>[];
-  const variants = Object.keys(rootStyles.variants.variant).map((variant) => ({
+  })) as Selected<AlertDialog.Breakpoint>[];
+  const variants = Object.keys(AlertDialog.rootStyles.variants.variant).map((variant) => ({
     label: variant,
     value: variant,
-  })) as Selected<Variant>[];
+  })) as Selected<AlertDialog.Variant>[];
 
   return {
     breakpoints,
diff --git a/src/routes/alert-dialog/props.schema.ts b/src/routes/alert-dialog/props.schema.ts
index a4aee1b..1314c32 100644
--- a/src/routes/alert-dialog/props.schema.ts
+++ b/src/routes/alert-dialog/props.schema.ts
@@ -1,9 +1,15 @@
 import z from 'zod';
 
-import { rootStyles, type Breakpoint, type Variant } from '$lib/components/alert-dialog/index.js';
+import * as AlertDialog from '$lib/components/alert-dialog/index.js';
 
-const breakpoints = Object.keys(rootStyles.variants.breakpoint) as [Breakpoint, ...Breakpoint[]];
-const variants = Object.keys(rootStyles.variants.variant) as [Variant, ...Variant[]];
+const breakpoints = Object.keys(AlertDialog.rootStyles.variants.breakpoint) as [
+  AlertDialog.Breakpoint,
+  ...AlertDialog.Breakpoint[],
+];
+const variants = Object.keys(AlertDialog.rootStyles.variants.variant) as [
+  AlertDialog.Variant,
+  ...AlertDialog.Variant[],
+];
 
 export const schema = z.object({
   breakpoint: z.enum(breakpoints, {
diff --git a/src/routes/alert/+page.ts b/src/routes/alert/+page.ts
index 65a1e11..cfa595f 100644
--- a/src/routes/alert/+page.ts
+++ b/src/routes/alert/+page.ts
@@ -2,7 +2,7 @@ import type { Selected } from 'bits-ui';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-import { rootStyles, type Variant } from '$lib/components/alert/index.js';
+import * as Alert from '$lib/components/alert/index.js';
 
 import type { PageLoad } from './$types.js';
 import { schema } from './props.schema.js';
@@ -10,13 +10,13 @@ import { schema } from './props.schema.js';
 export const load = (async () => {
   const form = await superValidate(zod(schema), {
     defaults: {
-      variant: rootStyles.defaultVariants.variant!,
+      variant: Alert.rootStyles.defaultVariants.variant!,
     },
   });
-  const variants = Object.keys(rootStyles.variants.variant).map((variant) => ({
+  const variants = Object.keys(Alert.rootStyles.variants.variant).map((variant) => ({
     label: variant,
     value: variant,
-  })) as Selected<Variant>[];
+  })) as Selected<Alert.Variant>[];
 
   return {
     form,
diff --git a/src/routes/alert/props.schema.ts b/src/routes/alert/props.schema.ts
index 2b53643..28c71c1 100644
--- a/src/routes/alert/props.schema.ts
+++ b/src/routes/alert/props.schema.ts
@@ -1,8 +1,11 @@
 import z from 'zod';
 
-import { rootStyles, type Variant } from '$lib/components/alert/index.js';
+import * as Alert from '$lib/components/alert/index.js';
 
-const variants = Object.keys(rootStyles.variants.variant) as [Variant, ...Variant[]];
+const variants = Object.keys(Alert.rootStyles.variants.variant) as [
+  Alert.Variant,
+  ...Alert.Variant[],
+];
 
 export const schema = z.object({
   variant: z.enum(variants, {
diff --git a/src/routes/breadcrumb/+page.ts b/src/routes/breadcrumb/+page.ts
index 6ca7422..c242511 100644
--- a/src/routes/breadcrumb/+page.ts
+++ b/src/routes/breadcrumb/+page.ts
@@ -2,7 +2,7 @@ import type { Selected } from 'bits-ui';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-import { rootStyles, type Breakpoint } from '$lib/components/breadcrumb/index.js';
+import * as Breadcrumb from '$lib/components/breadcrumb/index.js';
 
 import type { PageLoad } from './$types.js';
 import { schema } from './props.schema.js';
@@ -10,13 +10,13 @@ import { schema } from './props.schema.js';
 export const load = (async () => {
   const form = await superValidate(zod(schema), {
     defaults: {
-      breakpoint: rootStyles.defaultVariants.breakpoint!,
+      breakpoint: Breadcrumb.rootStyles.defaultVariants.breakpoint!,
     },
   });
-  const breakpoints = Object.keys(rootStyles.variants.breakpoint).map((breakpoint) => ({
+  const breakpoints = Object.keys(Breadcrumb.rootStyles.variants.breakpoint).map((breakpoint) => ({
     label: breakpoint,
     value: breakpoint,
-  })) as Selected<Breakpoint>[];
+  })) as Selected<Breadcrumb.Breakpoint>[];
 
   return {
     breakpoints,
diff --git a/src/routes/breadcrumb/props.schema.ts b/src/routes/breadcrumb/props.schema.ts
index e6a65c1..701b52e 100644
--- a/src/routes/breadcrumb/props.schema.ts
+++ b/src/routes/breadcrumb/props.schema.ts
@@ -1,8 +1,11 @@
 import z from 'zod';
 
-import { rootStyles, type Breakpoint } from '$lib/components/breadcrumb/index.js';
+import * as Breadcrumb from '$lib/components/breadcrumb/index.js';
 
-const breakpoints = Object.keys(rootStyles.variants.breakpoint) as [Breakpoint, ...Breakpoint[]];
+const breakpoints = Object.keys(Breadcrumb.rootStyles.variants.breakpoint) as [
+  Breadcrumb.Breakpoint,
+  ...Breadcrumb.Breakpoint[],
+];
 
 export const schema = z.object({
   breakpoint: z.enum(breakpoints, {
diff --git a/src/routes/card/+page.svelte b/src/routes/card/+page.svelte
index 2259e6c..7c6e8af 100644
--- a/src/routes/card/+page.svelte
+++ b/src/routes/card/+page.svelte
@@ -27,9 +27,9 @@
   $: selectedVariant = {
     label: $props.variant,
     value: $props.variant,
-  } satisfies Selected<Card.RootVariant>;
+  } satisfies Selected<Card.Variant>;
 
-  function handleVariantthange(selected?: Selected<Card.RootVariant>) {
+  function handleVariantChange(selected?: Selected<Card.Variant>) {
     $props.variant = selected!.value;
   }
 </script>
@@ -46,7 +46,7 @@
         <Select.Root
           {...constraints}
           items="{data.variants}"
-          onSelectedChange="{handleVariantthange}"
+          onSelectedChange="{handleVariantChange}"
           selected="{selectedVariant}"
         >
           <Select.HiddenInput {...attrs} {...constraints} />
diff --git a/src/routes/card/+page.ts b/src/routes/card/+page.ts
index 245cfcf..8cc2840 100644
--- a/src/routes/card/+page.ts
+++ b/src/routes/card/+page.ts
@@ -2,7 +2,7 @@ import type { Selected } from 'bits-ui';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
-import { rootStyles, type RootVariant } from '$lib/components/card/index.js';
+import * as Card from '$lib/components/card/index.js';
 
 import type { PageLoad } from './$types.js';
 import { schema } from './props.schema.js';
@@ -10,13 +10,13 @@ import { schema } from './props.schema.js';
 export const load = (async () => {
   const form = await superValidate(zod(schema), {
     defaults: {
-      variant: rootStyles.defaultVariants.variant!,
+      variant: Card.rootStyles.defaultVariants.variant!,
     },
   });
-  const variants = Object.keys(rootStyles.variants.variant).map((variant) => ({
+  const variants = Object.keys(Card.rootStyles.variants.variant).map((variant) => ({
     label: variant,
     value: variant,
-  })) as Selected<RootVariant>[];
+  })) as Selected<Card.Variant>[];
 
   return {
     form,
diff --git a/src/routes/card/props.schema.ts b/src/routes/card/props.schema.ts
index a6fe08e..88e25e4 100644
--- a/src/routes/card/props.schema.ts
+++ b/src/routes/card/props.schema.ts
@@ -1,8 +1,8 @@
 import z from 'zod';
 
-import { rootStyles, type RootVariant } from '$lib/components/card/index.js';
+import * as Card from '$lib/components/card/index.js';
 
-const variants = Object.keys(rootStyles.variants.variant) as [RootVariant, ...RootVariant[]];
+const variants = Object.keys(Card.rootStyles.variants.variant) as [Card.Variant, ...Card.Variant[]];
 
 export const schema = z.object({
   variant: z.enum(variants, {