fluentui-svelte 0.1.2 → 0.2.0

package/README.md

@@ -44,12 +44,6 @@ pnpm add fluentui-svelte
 # yarn add fluentui-svelte
 ```
 
-Svelte 5 is the only peer dependency:
-
-```sh
-pnpm add -D svelte@^5
-```
-
 ## Setup
 
 ### 1. Import the stylesheets

package/dist/components/auto-suggest-box/auto-suggest-box.svelte

@@ -31,6 +31,7 @@
 		value = $bindable(''),
 		inputRef = $bindable(),
 		selectOnFocus,
+		openOnFocus = false,
 		virtualizer,
 		flyoutRef = $bindable(),
 		flyoutProps,
@@ -250,6 +251,10 @@
 		inputRef?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
 	}
 
+	function handleFocus() {
+		if (openOnFocus) open = true;
+	}
+
 	async function handleTextChanged(e: InputEvent, val: string) {
 		if (val.length > 0 && !open) open = true;
 		lastTypedValue = val;
@@ -363,6 +368,7 @@
 		querySubmitted={(e) => querySubmitted?.(e, value)}
 		textChanged={(e) => handleTextChanged(e, value)}
 		onClear={handleClear}
+		onfocus={handleFocus}
 		role="combobox"
 		aria-expanded={open}
 		aria-autocomplete="list"

package/dist/components/auto-suggest-box/docs/llms.md

@@ -58,16 +58,17 @@ built-in filter that a plain option list applies is skipped.
 
 ## Component Props
 
-| Name               | Type                                                      | Description                                                            |
-| ------------------ | --------------------------------------------------------- | ---------------------------------------------------------------------- |
-| `placeholder`      | `string`                                                  | Placeholder text shown in the input.                                   |
-| `value`            | `string`                                                  | The current value of the input field.                                  |
-| `open`             | `boolean`                                                 | Whether the suggestion flyout is open. Default: `false`.               |
-| `multiselect`      | `boolean`                                                 | Allow selecting multiple suggestions.                                  |
-| `selectOnFocus`    | `boolean`                                                 | Select a suggestion as it is focused during keyboard navigation.       |
-| `notFoundText`     | `string`                                                  | Text shown when no suggestions match. Default: `No results found`.     |
-| `maxItemsInView`   | `number`                                                  | Number of suggestions visible before the flyout scrolls. Default: `6`. |
-| `ref`              | `HTMLElement`                                             | The DOM reference of the auto-suggest box element.                     |
-| `suggestionChosen` | `(e: Event, selection: string) => void`                   | Event triggered when a suggestion is chosen.                           |
-| `querySubmitted`   | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted.                             |
-| `virtualizer`      | `{ size, scrollToIndex?, scrollToTop?, scrollToBottom? }` | Bridge to a windowed list. `size` is the total suggestion count.       |
+| Name               | Type                                                      | Description                                                                  |
+| ------------------ | --------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `placeholder`      | `string`                                                  | Placeholder text shown in the input.                                         |
+| `value`            | `string`                                                  | The current value of the input field.                                        |
+| `open`             | `boolean`                                                 | Whether the suggestion flyout is open. Default: `false`.                     |
+| `multiselect`      | `boolean`                                                 | Allow selecting multiple suggestions.                                        |
+| `selectOnFocus`    | `boolean`                                                 | Select a suggestion as it is focused during keyboard navigation.             |
+| `openOnFocus`      | `boolean`                                                 | Open the suggestion list as soon as the input takes focus. Default: `false`. |
+| `notFoundText`     | `string`                                                  | Text shown when no suggestions match. Default: `No results found`.           |
+| `maxItemsInView`   | `number`                                                  | Number of suggestions visible before the flyout scrolls. Default: `6`.       |
+| `ref`              | `HTMLElement`                                             | The DOM reference of the auto-suggest box element.                           |
+| `suggestionChosen` | `(e: Event, selection: string) => void`                   | Event triggered when a suggestion is chosen.                                 |
+| `querySubmitted`   | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted.                                   |
+| `virtualizer`      | `{ size, scrollToIndex?, scrollToTop?, scrollToBottom? }` | Bridge to a windowed list. `size` is the total suggestion count.             |

package/dist/components/auto-suggest-box/types.d.ts

@@ -29,6 +29,11 @@ export type AutoSuggestBoxProps = {
      * Not supported together with `multiselect`.
      */
     selectOnFocus?: boolean;
+    /** Opens the suggestion list as soon as the text box takes focus, instead of waiting for the
+     * first keystroke. Useful on touch devices, which have no arrow key to open the list with.
+     * @default false
+     */
+    openOnFocus?: boolean;
     /** Lists every chosen suggestion in the text box, comma separated. Multiselect only. */
     showTextualMultiselect?: boolean;
     /** The message shown in place of the list when nothing matches.

package/dist/components/avatar/avatar.svelte

@@ -76,7 +76,7 @@
 			/>
 		{/if}
 		{#if Icon}
-			<RenderSoC SoC={Icon} args={[{ width: badgeSize, height: badgeSize }]} width={badgeSize} height={badgeSize} />
+			<RenderSoC SoC={Icon} args={{ width: badgeSize, height: badgeSize }} />
 		{:else}
 			{initials}
 		{/if}

package/dist/components/badge/badge-icon.svelte

@@ -49,15 +49,12 @@
 	{...attributes}
 >
 	{#if Icon}
-		<RenderSoC
-			SoC={Icon}
-			args={[{ 'aria-hidden': true, width: size, height: size }]}
-			aria-hidden="true"
-			width="{size}px"
-			height="{size}px"
-		/>
+		<RenderSoC SoC={Icon} args={{ 'aria-hidden': true, width: `${size}px`, height: `${size}px` }} />
 	{:else}
-		<RenderSoC SoC={getIconBadge(outOfOffice, status)} aria-hidden="true" width="{size}px" height="{size}px" />
+		{@const statusIcon = getIconBadge(outOfOffice, status)}
+		{#if statusIcon}
+			<RenderSoC SoC={statusIcon} args={{ 'aria-hidden': true, width: `${size}px`, height: `${size}px` }} />
+		{/if}
 	{/if}
 </span>
 

package/dist/components/badge/badge.svelte

@@ -43,9 +43,13 @@
 >
 	{#if iconPosition === 'after'}
 		{@render children?.()}
-		<RenderSoC SoC={Icon} />
+		{#if Icon}
+			<RenderSoC SoC={Icon} />
+		{/if}
 	{:else}
-		<RenderSoC SoC={Icon} />
+		{#if Icon}
+			<RenderSoC SoC={Icon} />
+		{/if}
 		{@render children?.()}
 	{/if}
 </span>

package/dist/components/button/button.svelte

@@ -54,7 +54,7 @@
 >
 	{#if isMenuButton && indicatorPosition === 'before'}
 		{#if indicatorIcon}
-			<RenderSoC SoC={indicatorIcon} class="indicator" args={[{ class: 'indicator' }]} />
+			<RenderSoC SoC={indicatorIcon} args={{ class: 'indicator' }} />
 		{:else}
 			<ChevronDownFilled class="indicator" />
 		{/if}
@@ -68,7 +68,7 @@
 
 	{#if isMenuButton && indicatorPosition === 'after'}
 		{#if indicatorIcon}
-			<RenderSoC SoC={indicatorIcon} class="indicator" args={[{ class: 'indicator' }]} />
+			<RenderSoC SoC={indicatorIcon} args={{ class: 'indicator' }} />
 		{:else}
 			<ChevronDownFilled class="indicator" />
 		{/if}

package/dist/components/button/types.d.ts

@@ -40,7 +40,11 @@ export type ButtonProps<T extends ButtonGenerics = 'button'> = {
     /** The icon used to indicate the button triggers a menu.
      * @type Snippet | Component
      */
-    indicatorIcon?: Snippet<unknown[]> | Component<Record<string, unknown>>;
+    indicatorIcon?: Snippet<[{
+        class: string;
+    }]> | Component<{
+        class: string;
+    }>;
 } & PolymorphicProps<T>;
 export type ButtonElementDOMType = {
     button: HTMLButtonElement;

package/dist/components/card/card-context.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CardContext } from './types.ts';
+export declare const getCardContext: () => CardContext | null, setCardContext: (context: CardContext) => void;

package/dist/components/card/card-context.svelte.js

@@ -0,0 +1,2 @@
+import { createFSContext } from '../../internal/index.js';
+export const [getCardContext, setCardContext] = createFSContext();

package/dist/components/card/card-footer.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { CardFooterProps } from './types.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let { ref = $bindable(), class: classes, action, ...attributes }: CardFooterProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+	const selectable = $derived(config.selectable);
+
+	// Rendered through `_action`, so the invariant is enforced during SSR and on every prop update.
+	const _action = $derived.by(() => {
+		if (action && selectable) throw new Error('Action cannot be used with selectable cards.');
+		return action;
+	});
+</script>
+
+<div bind:this={ref} class={['fs-card-footer', showFloatingAction && 'with-action', classes]} {...attributes}>
+	{#if _action}
+		<RenderSoC SoC={_action} />
+	{/if}
+</div>
+
+<style>
+	.fs-card-footer {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		justify-content: space-between;
+	}
+</style>

package/dist/components/card/card-footer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardFooterProps } from './types.ts';
+declare const CardFooter: import("svelte").Component<CardFooterProps, {}, "ref">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/card/card-header.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { CardHeaderProps } from './types.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let {
+		ref = $bindable(),
+		class: classes,
+		title,
+		image,
+		imageAlt = '',
+		description,
+		action,
+		...attributes
+	}: CardHeaderProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+	const selectable = $derived(config.selectable);
+	const id = $derived(config.id);
+
+	// Rendered through `_action`, so the invariant is enforced during SSR and on every prop update.
+	const _action = $derived.by(() => {
+		if (action && selectable) throw new Error('Action cannot be used with selectable cards.');
+		return action;
+	});
+</script>
+
+<div bind:this={ref} class={['fs-card-header', showFloatingAction && 'with-action', classes]} {...attributes}>
+	{#if typeof image === 'string'}
+		<img src={image} alt={imageAlt} />
+	{:else if image}
+		<RenderSoC SoC={image} />
+	{/if}
+	{#if description}
+		<div class="fs-card-header-content">
+			{#if typeof title === 'string'}
+				<h4 class="body" id={`${id}-title`}>{title}</h4>
+			{:else if title}
+				<RenderSoC SoC={title} id={`${id}-title`} />
+			{/if}
+			{#if typeof description === 'string'}
+				<p class="caption">{description}</p>
+			{:else if description}
+				<RenderSoC SoC={description} />
+			{/if}
+		</div>
+	{:else if typeof title === 'string'}
+		<h4 class="body" id={`${id}-title`}>{title}</h4>
+	{:else if title}
+		<RenderSoC SoC={title} id={`${id}-title`} />
+	{/if}
+	{#if _action}
+		<RenderSoC SoC={_action} />
+	{/if}
+</div>
+
+<style>
+	.fs-card-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		&.with-action:nth-child(2) {
+			padding-right: 2.4rem;
+		}
+		& :global(img) {
+			width: 48px;
+		}
+		& .fs-card-header-content {
+			display: flex;
+			flex-direction: column;
+			margin-right: auto;
+		}
+	}
+</style>

package/dist/components/card/card-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardHeaderProps } from './types.ts';
+declare const CardHeader: import("svelte").Component<CardHeaderProps, {}, "ref">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/card/card-preview.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { CardPreviewProps } from './types.js';
+	import { getCardContext } from './card-context.svelte.js';
+
+	let { ref = $bindable(), logoSrc, logoAlt = '', class: classes, children, ...attrs }: CardPreviewProps = $props();
+
+	const context = getCardContext();
+
+	if (!context) throw new Error('Card context is not available. Make sure this component is used within a Card.');
+
+	const { config, state: _state } = context;
+
+	const showFloatingAction = $derived(config.showFloatingAction);
+
+	const orientation = $derived(_state.orientation);
+</script>
+
+<div class={['fs-card-preview', showFloatingAction && 'with-action', orientation, classes]} bind:this={ref} {...attrs}>
+	{@render children?.()}
+	<img src={logoSrc} alt={logoAlt} class="fs-card-preview-logo" />
+</div>
+
+<style>
+	.fs-card-preview {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		overflow: hidden;
+		/* 2nd child (After floating Checkbox) */
+		&:first-child,
+		&.with-action:nth-child(2) {
+			border-radius: var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0 0;
+		}
+		&:last-child {
+			border-radius: 0 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius);
+		}
+		&.horizontal {
+			&:first-child,
+			&.with-action:nth-child(2) {
+				border-radius: var(--fs-control-overlay-border-radius) 0 0 var(--fs-control-overlay-border-radius);
+			}
+			&:last-child {
+				border-radius: 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0;
+			}
+		}
+		&:only-child {
+			border-radius: var(--fs-control-overlay-border-radius);
+		}
+		& :global(img:not(.fs-card-preview-logo)) {
+			width: 100%;
+			height: auto;
+		}
+		& .fs-card-preview-logo {
+			width: 32px;
+			height: auto;
+			position: absolute;
+			bottom: 0.5rem;
+			left: 0.5rem;
+			z-index: 1;
+		}
+	}
+</style>

package/dist/components/card/card-preview.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CardPreviewProps } from './types.ts';
+declare const CardPreview: import("svelte").Component<CardPreviewProps, {}, "ref">;
+type CardPreview = ReturnType<typeof CardPreview>;
+export default CardPreview;

package/dist/components/card/card.svelte

@@ -0,0 +1,242 @@
+<script lang="ts" generics="Tag extends CardTagTypes = 'div'">
+	import type { Horientation } from '../../types/index.js';
+	import { invokeHandlers } from '../../internal/utils.js';
+	import { setCardContext } from './card-context.svelte.js';
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import type { CardContext, CardProps, CardTagTypes } from './types.js';
+	import { PREFIX } from '../../internal/constants.js';
+
+	const _ID = $props.id();
+	const FALLBACK_ID = PREFIX + '-card-' + _ID;
+
+	let {
+		as = 'div' as Tag,
+		ref = $bindable(),
+		orientation = 'horizontal',
+		id = FALLBACK_ID,
+		selectable = false,
+		showFloatingAction = false,
+		selected = $bindable(false),
+		disabled = false,
+		appearance = 'filled',
+		class: classes,
+		children,
+		onclick,
+		onSelectionChange,
+		...attributes
+	}: CardProps<Tag> = $props();
+
+	const context: CardContext = $state({
+		config: {
+			get as() {
+				return as;
+			},
+			get appearance() {
+				return appearance;
+			},
+			get selectable() {
+				return selectable;
+			},
+			get showFloatingAction() {
+				return showFloatingAction;
+			},
+			get id() {
+				return id;
+			}
+		},
+		state: {
+			get selected() {
+				return selected;
+			},
+			set selected(value: boolean) {
+				selected = value;
+			},
+			get disabled() {
+				return disabled;
+			},
+			set disabled(value: boolean) {
+				disabled = value;
+			},
+			get orientation() {
+				return orientation;
+			},
+			set orientation(value: Horientation) {
+				orientation = value;
+			}
+		},
+		events: null,
+		methods: {
+			handleAction(e) {
+				if (selectable && !disabled) {
+					selected = !selected;
+					onSelectionChange?.(id, selected);
+				}
+				onclick?.(e as any);
+			}
+		}
+	});
+
+	setCardContext(context);
+
+	let actionable = $derived(!disabled && (selectable || as === 'a'));
+
+	/**
+	 * The props the invariants rule over. The markup renders them through here, so reading any of
+	 * them validates the whole set during SSR and on every prop update.
+	 */
+	const _card = $derived.by(() => {
+		if (showFloatingAction && !selectable)
+			throw new Error('Floating action can only be shown if the card is selectable.');
+		if (selected && !selectable) throw new Error('A card cannot be selected if it is not selectable.');
+		if (as === 'a' && selectable) throw new Error('A card cannot be both a link and selectable.');
+		return { as, selected, showFloatingAction };
+	});
+
+	let isLink = $derived(as === 'a');
+
+	/** The root carries the selection semantics itself when no floating checkbox is there to carry them. */
+	let isRootControl = $derived(selectable && !isLink && !_card.showFloatingAction);
+
+	/**
+	 * A focusable root needs an accessible name. The title of the header provides it, unless the
+	 * consumer named the card itself.
+	 */
+	let rootLabelledBy = $derived(
+		isRootControl && !attributes['aria-label'] && !attributes['aria-labelledby'] ? `${id}-title` : undefined
+	);
+
+	/** Enter and Space toggle the selection, the same way a pointer click does. */
+	const handleKeydown = (e: KeyboardEvent) => {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		if (e.currentTarget instanceof HTMLElement) e.currentTarget.click();
+	};
+</script>
+
+<!--
+	@component
+	A card is a container that displays content and actions on a single topic.
+	- Usage:
+    ```tsx
+    <script>
+      import { Card, CardHeader } from 'fluentui-svelte';
+    </script>
+
+    <Card>
+      <CardHeader title="Card title" />
+      <p>Content goes here</p>
+    </Card>
+    ```
+ -->
+<svelte:element
+	this={_card.as}
+	class={['fs-card', { actionable, disabled, selected: _card.selected }, orientation, appearance, classes]}
+	bind:this={ref}
+	{id}
+	role={isLink ? undefined : isRootControl ? 'checkbox' : 'group'}
+	aria-checked={isRootControl ? _card.selected : undefined}
+	aria-labelledby={rootLabelledBy}
+	aria-disabled={disabled || undefined}
+	tabindex={isRootControl && !disabled ? 0 : undefined}
+	onclick={(e: MouseEvent) => invokeHandlers(e, [disabled], [context.methods.handleAction])}
+	onkeydown={isRootControl ? handleKeydown : undefined}
+	{...attributes}
+>
+	{#if selectable && _card.showFloatingAction && as !== 'a'}
+		<Checkbox
+			wrapperAs="div"
+			aria-labelledby={`${id}-title`}
+			bind:checked={selected}
+			{disabled}
+			onclick={(e) => e.stopPropagation()}
+			onchange={(e) => onSelectionChange?.(id, e.currentTarget.checked)}
+		/>
+	{/if}
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-card {
+		display: flex;
+		position: relative;
+		border-radius: var(--fs-control-overlay-border-radius);
+		background-clip: padding-box;
+		color: var(--fs-text-primary);
+		transition: box-shadow var(--fs-fast-duration) var(--fs-point-to-point);
+		text-decoration: none;
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+		&.filled {
+			background: var(--fs-card-background-default);
+			box-shadow: var(--fs-shadow-card);
+		}
+		&.filled,
+		&.outlined {
+			border: 1px solid var(--fs-control-stroke-default);
+		}
+		&.disabled {
+			user-select: none;
+			box-shadow: unset;
+			&.filled {
+				background: var(--fs-control-fill-disabled);
+				border-color: var(--fs-control-stroke-secondary);
+				color: var(--fs-text-disabled);
+			}
+			&:hover {
+				cursor: not-allowed;
+			}
+		}
+		&:hover {
+			&.filled:not(.disabled) {
+				box-shadow: var(--fs-shadow-card-hover);
+			}
+			&.outlined:not(.disabled) {
+				border-color: var(--fs-control-stroke-secondary);
+			}
+			&.subtle:not(.disabled) {
+				background: var(--fs-subtle-fill-secondary);
+			}
+		}
+		&:active.actionable:not(.disabled) {
+			box-shadow: unset;
+			&.filled {
+				background: var(--fs-card-background-tertiary);
+				border-color: var(--fs-control-surface-stroke-default);
+				color: var(--fs-text-secondary);
+			}
+			&.outlined {
+				border-color: var(--fs-control-surface-stroke-default);
+				color: var(--fs-text-secondary);
+			}
+			&.subtle {
+				background: var(--fs-subtle-fill-tertiary);
+				color: var(--fs-text-tertiary);
+			}
+		}
+		&.actionable {
+			cursor: pointer;
+		}
+		&.selected {
+			&.filled {
+				background: var(--fs-card-background-tertiary);
+				box-shadow: var(--fs-shadow-card);
+			}
+			&.outlined {
+				background: var(--fs-card-background-default);
+			}
+			&.subtle {
+				background: var(--fs-subtle-fill-tertiary);
+			}
+		}
+		&.vertical {
+			flex-direction: column;
+		}
+		& :global(.fs-checkbox) {
+			position: absolute;
+			top: 0.5rem;
+			right: 0.5rem;
+			z-index: 2;
+		}
+	}
+</style>

package/dist/components/card/card.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { CardProps, CardTagTypes } from './types.js';
+declare function $$render<Tag extends CardTagTypes = 'div'>(): {
+    props: CardProps<Tag>;
+    exports: {};
+    bindings: "ref" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends CardTagTypes = 'div'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends CardTagTypes = 'div'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends CardTagTypes = 'div'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A card is a container that displays content and actions on a single topic.
+ * - Usage:
+ *    ```tsx
+ *    <script>
+ *      import { Card, CardHeader } from 'fluentui-svelte';
+ *    </script>
+ *
+ *    <Card>
+ *      <CardHeader title="Card title" />
+ *      <p>Content goes here</p>
+ *    </Card>
+ *    ```
+ */
+declare const Card: $$IsomorphicComponent;
+type Card<Tag extends CardTagTypes = 'div'> = InstanceType<typeof Card<Tag>>;
+export default Card;