fluentui-svelte 0.1.0

package/dist/components/dialog/dialog-title.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" generics="T extends DialogTitleTag">
+	import { PREFIX } from '../../internal/constants.js';
+	import { getDialogContext } from './dialog.svelte.js';
+	import type { DialogTitleProps, DialogTitleTag } from './types.js';
+
+	let { as = 'h3' as T, ref = $bindable(), children }: DialogTitleProps<T> = $props();
+
+	const FALLBACK_ID = $props.id();
+	const ID = `${PREFIX}dialog-title-${FALLBACK_ID}`;
+
+	const context = getDialogContext();
+
+	$effect.pre(() => {
+		if (!context) return;
+
+		context.state.titleId = ID;
+
+		return () => {
+			context.state.titleId = undefined;
+		};
+	});
+</script>
+
+<svelte:element this={as} id={ID} class="dialog-title" bind:this={ref}>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.dialog-title {
+		padding: 1.4rem 2rem 0 2rem;
+		grid-row: 1 / 1;
+	}
+</style>

package/dist/components/dialog/dialog-title.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { DialogTitleProps, DialogTitleTag } from './types.ts';
+declare function $$render<T extends DialogTitleTag>(): {
+    props: DialogTitleProps<T>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends DialogTitleTag> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends DialogTitleTag>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends DialogTitleTag>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DialogTitle: $$IsomorphicComponent;
+type DialogTitle<T extends DialogTitleTag> = InstanceType<typeof DialogTitle<T>>;
+export default DialogTitle;

package/dist/components/dialog/dialog-trigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Button } from '../../index.js';
+	import { getDialogContext } from './dialog.svelte.js';
+	import type { DialogTriggerProps } from './types.js';
+
+	let { children }: DialogTriggerProps = $props();
+
+	const CONTEXT = getDialogContext();
+
+	if (!CONTEXT) {
+		throw new Error('DialogTrigger must be used within a Dialog component');
+	}
+
+	const { methods } = CONTEXT;
+</script>
+
+<Button class="dialog-trigger" onclick={methods.openDialog}>
+	{#if children}
+		{@render children()}
+	{:else}
+		Open Dialog
+	{/if}
+</Button>

package/dist/components/dialog/dialog-trigger.svelte.d.ts

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

package/dist/components/dialog/dialog.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { setDialogContext } from './dialog.svelte.js';
+	import type { DialogContext, DialogProps } from './types.js';
+
+	let { type = 'modal', open = $bindable(), onOpenChange, children }: DialogProps = $props();
+
+	let dialogRef: HTMLDialogElement | undefined = $state();
+
+	let titleId: string | undefined = $state();
+
+	const config: DialogContext['config'] = $derived({
+		type
+	});
+
+	const _state: DialogContext['state'] = {
+		get open() {
+			return open;
+		},
+		get dialogRef() {
+			return dialogRef;
+		},
+		set dialogRef(v) {
+			dialogRef = v;
+		},
+		get titleId() {
+			return titleId;
+		},
+		set titleId(v) {
+			titleId = v;
+		}
+	};
+
+	const methods: DialogContext['methods'] = $derived({
+		openDialog: () => {
+			if (type !== 'non-modal') {
+				dialogRef?.showModal();
+			} else {
+				open = true;
+			}
+			onOpenChange?.(true);
+		},
+		closeDialog: () => {
+			if (type !== 'non-modal') {
+				dialogRef?.close();
+			} else {
+				open = false;
+			}
+			onOpenChange?.(false);
+		}
+	});
+
+	export function openDialog() {
+		methods.openDialog();
+	}
+
+	export function closeDialog() {
+		methods.closeDialog();
+	}
+
+	// svelte-ignore state_referenced_locally
+	setDialogContext({ config, state: _state, events: null, methods });
+</script>
+
+{@render children?.()}

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

@@ -0,0 +1,7 @@
+import type { DialogProps } from './types.ts';
+declare const Dialog: import("svelte").Component<DialogProps, {
+    openDialog: () => void;
+    closeDialog: () => void;
+}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/dialog/dialog.svelte.js

@@ -0,0 +1,2 @@
+import { createFSContext } from "../../internal/context.js";
+export const [getDialogContext, setDialogContext] = createFSContext();

package/dist/components/dialog/docs/llms.md

@@ -0,0 +1,131 @@
+# Dialog
+
+A dialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close.
+
+The Dialog is composed of several components that work together through a shared context:
+
+- `Dialog`: The root component that creates the state and provides context to its children.
+- `DialogTrigger`: A button that opens the dialog when clicked.
+- `DialogSurface`: The `<dialog>` element that hosts the dialog content.
+- `DialogTitle`: The heading of the dialog. Renders as an `h3` by default.
+- `DialogContent`: The scrollable body of the dialog.
+- `DialogActions`: The footer that holds action buttons.
+
+## Usage
+
+```svelte
+<script>
+	import {
+		Dialog,
+		DialogTrigger,
+		DialogSurface,
+		DialogTitle,
+		DialogContent,
+		DialogActions,
+		Button
+	} from 'fluentui-svelte';
+
+	let dialog = $state();
+</script>
+
+<Dialog bind:this={dialog}>
+	<DialogTrigger>Open Dialog</DialogTrigger>
+	<DialogSurface>
+		<DialogTitle>Dialog Title</DialogTitle>
+		<DialogContent>
+			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+		</DialogContent>
+		<DialogActions fluid>
+			<Button>Save</Button>
+			<Button appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
+		</DialogActions>
+	</DialogSurface>
+</Dialog>
+```
+
+## Examples
+
+### With Actions
+
+Add a `DialogActions` region to render action buttons in the dialog footer. Use `bind:this` on the `Dialog` to call `closeDialog()` programmatically.
+
+```svelte
+<script>
+	import {
+		Dialog,
+		DialogTrigger,
+		DialogSurface,
+		DialogTitle,
+		DialogContent,
+		DialogActions,
+		Button
+	} from 'fluentui-svelte';
+	let dialog = $state();
+</script>
+
+<Dialog bind:this={dialog}>
+	<DialogTrigger>Actions Dialog</DialogTrigger>
+	<DialogSurface>
+		<DialogTitle>Dialog Title</DialogTitle>
+		<DialogContent>
+			<p>Dialog body content.</p>
+		</DialogContent>
+		<DialogActions fluid>
+			<Button style="flex: 1 1 auto;">Save</Button>
+			<Button style="flex: 1 1 auto;" appearance="standard" onclick={() => dialog.closeDialog()}>Close</Button>
+		</DialogActions>
+	</DialogSurface>
+</Dialog>
+```
+
+## Dialog Props
+
+| Name           | Type                                | Description                                        |
+| -------------- | ----------------------------------- | -------------------------------------------------- |
+| `type`         | `'modal' \| 'non-modal' \| 'alert'` | The behavior type of the dialog. Default: `modal`. |
+| `open`         | bindable `boolean`                  | Whether the dialog is open.                        |
+| `onOpenChange` | `(open: boolean) => void`           | Callback fired when the dialog opens or closes.    |
+| `children`     | `Snippet`                           | The dialog sub-components to render.               |
+
+## DialogTrigger Props
+
+| Name           | Type                    | Description                              |
+| -------------- | ----------------------- | ---------------------------------------- |
+| `ref`          | `HTMLButtonElement`     | The DOM reference of the trigger button. |
+| `children`     | `Snippet`               | The content of the trigger button.       |
+| ...ButtonProps | `ButtonProps<'button'>` | Inherits all `Button` props.             |
+
+## DialogSurface Props
+
+| Name          | Type                                | Description                                      |
+| ------------- | ----------------------------------- | ------------------------------------------------ |
+| `ref`         | bindable `HTMLDialogElement`        | The DOM reference of the dialog element.         |
+| `children`    | `Snippet`                           | The content to render inside the dialog surface. |
+| ...Attributes | `HTMLAttributes<HTMLDialogElement>` | All native `<dialog>` attributes are forwarded.  |
+
+## DialogTitle Props
+
+| Name          | Type                   | Description                                                   |
+| ------------- | ---------------------- | ------------------------------------------------------------- |
+| `as`          | `'div' \| 'h1'`–`'h6'` | The element to render the title as. Default: `h3`.            |
+| `ref`         | bindable element       | The DOM reference of the title element.                       |
+| `children`    | `Snippet`              | The title content.                                            |
+| ...Attributes | Polymorphic            | All HTML attributes of the chosen `as` element are forwarded. |
+
+## DialogContent Props
+
+| Name          | Type                             | Description                                   |
+| ------------- | -------------------------------- | --------------------------------------------- |
+| `ref`         | `HTMLDivElement`                 | The DOM reference of the content element.     |
+| `children`    | `Snippet`                        | The content to render inside the dialog body. |
+| ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded.  |
+
+## DialogActions Props
+
+| Name          | Type                             | Description                                             |
+| ------------- | -------------------------------- | ------------------------------------------------------- |
+| `ref`         | bindable `HTMLDivElement`        | The DOM reference of the actions element.               |
+| `position`    | `'start' \| 'center' \| 'end'`   | Horizontal alignment of the actions. Default: `end`.    |
+| `fluid`       | `boolean`                        | Whether the actions container uses a full-width layout. |
+| `children`    | `Snippet`                        | The action elements to render, typically buttons.       |
+| ...Attributes | `HTMLAttributes<HTMLDivElement>` | All native `<div>` attributes are forwarded.            |

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

@@ -0,0 +1,92 @@
+import type { Snippet } from 'svelte';
+import type { FSContext } from '../../internal/index.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonProps } from '../button/types.ts';
+import type { PolymorphicProps, XDirection } from '../../types/index.js';
+export type DialogType = 'modal' | 'non-modal' | 'alert';
+export type DialogTitleTag = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/** @propsmith DialogProps */
+export type DialogProps = {
+    /** How the dialog behaves once open.
+     *
+     * `modal`: blocks the page behind it and traps the focus.
+     *
+     * `non-modal`: leaves the page behind it interactive.
+     *
+     * `alert`: a modal that cannot be dismissed with Escape or by clicking outside.
+     * @default 'modal'
+     */
+    type?: DialogType;
+    /** Controls the open state of the dialog.
+     * @bindable
+     */
+    open?: boolean;
+    /** Called whenever the dialog opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** The parts of the dialog: a trigger and a surface. */
+    children?: Snippet;
+};
+/** @propsmith DialogSurfaceProps */
+export type DialogSurfaceProps = {
+    /** The DOM reference of the dialog element.
+     * @bindable
+     */
+    ref?: HTMLDialogElement;
+} & HTMLAttributes<HTMLDialogElement>;
+/** @propsmith DialogTriggerProps */
+export type DialogTriggerProps = {
+    /** The DOM reference of the trigger element. */
+    ref?: HTMLButtonElement;
+} & ButtonProps<'button'>;
+/** @propsmith DialogContentProps */
+export type DialogContentProps = {
+    /** The DOM reference of the content element. */
+    ref?: HTMLDivElement;
+} & HTMLAttributes<HTMLDivElement>;
+/** @propsmith DialogActionsProps */
+export type DialogActionsProps = {
+    /** The DOM reference of the actions element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** Stretches every action to share the available width evenly. */
+    fluid?: boolean;
+    /** Where the actions sit along the main axis.
+     * @default 'end'
+     */
+    position?: XDirection;
+} & HTMLAttributes<HTMLDivElement>;
+type DialogTitleRefType = {
+    div: HTMLDivElement;
+    h1: HTMLHeadingElement;
+    h2: HTMLHeadingElement;
+    h3: HTMLHeadingElement;
+    h4: HTMLHeadingElement;
+    h5: HTMLHeadingElement;
+    h6: HTMLHeadingElement;
+};
+/** @propsmith DialogTitleProps */
+export type DialogTitleProps<T extends DialogTitleTag> = {
+    /** The DOM reference of the title element.
+     * @type HTMLDivElement | HTMLHeadingElement
+     * @bindable
+     */
+    ref?: DialogTitleRefType[T];
+    /** The HTML element to render the title as.
+     * @type DialogTitleTag
+     * @default 'h3'
+     */
+    as?: T;
+} & PolymorphicProps<T>;
+export type DialogContext = FSContext<{
+    type: DialogType;
+}, {
+    dialogRef: HTMLDialogElement | undefined;
+    readonly open: boolean | undefined;
+    /** Set by `DialogTitle`, to allow the surface pointing `aria-labelledby` at it. */
+    titleId: string | undefined;
+}, null, {
+    openDialog: () => void;
+    closeDialog: () => void;
+}>;
+export {};

package/dist/components/dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/divider/divider.svelte

@@ -0,0 +1,120 @@
+<script lang="ts" generics="Tag extends DividerGenerics = 'div'">
+	import type { DividerProps, DividerGenerics } from './types.js';
+
+	let {
+		as = 'div' as Tag,
+		ref = $bindable(),
+		vertical,
+		alignContent = 'center',
+		appearance = 'default',
+		inset,
+		children,
+		...attributes
+	}: DividerProps<Tag> = $props();
+</script>
+
+<!-- 
+	@component
+	A divider visually separates content into groups. It supports horizontal and vertical orientations, optional label content, and multiple appearances.
+
+	- Usage:
+	```tsx
+	<script>
+		import { Divider } from 'fluentui-svelte';
+	</script>
+
+	<Divider />
+	<Divider appearance="accent">Section</Divider>
+	<Divider vertical />
+	```
+-->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	role="separator"
+	class={['fs-divider', appearance, `align-${alignContent}`, { inset, vertical }]}
+	style=" --divider-margin: {children ? (vertical ? '0.5rem' : '0.75rem') : '0'}"
+	aria-orientation={vertical ? 'vertical' : 'horizontal'}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-divider {
+		width: 100%;
+		height: 1px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--fs-text-secondary);
+		background: unset;
+		border: unset;
+		&::before,
+		&::after {
+			content: '';
+			display: flex;
+			flex: 1;
+			background-color: var(--fs-control-strong-stroke-disabled);
+			height: 1px;
+			min-width: 0.5rem;
+		}
+		&::before {
+			margin-right: var(--divider-margin);
+		}
+		&::after {
+			margin-left: var(--divider-margin);
+		}
+		&.align-start::before {
+			max-width: 0.5rem;
+			max-height: 0.5rem;
+		}
+		&.align-end::after {
+			max-width: 0.5rem;
+			max-height: 0.5rem;
+		}
+		&.inset {
+			padding-inline: 0.75rem;
+		}
+		&.vertical {
+			flex-direction: column;
+			width: max-content;
+			height: inherit;
+			&::before,
+			&::after {
+				width: 1px;
+				min-width: 1px;
+				height: calc((100% / 2) - var(--divider-margin));
+				min-height: 0.5rem;
+				margin-inline: 0;
+			}
+			&::before {
+				margin-bottom: var(--divider-margin);
+			}
+			&::after {
+				margin-top: var(--divider-margin);
+			}
+		}
+		&.accent {
+			color: var(--fs-accent-text-primary);
+			&::before,
+			&::after {
+				background-color: var(--fs-accent-fill-default);
+			}
+		}
+		&.subtle {
+			color: var(--fs-text-disabled);
+			&::before,
+			&::after {
+				background-color: var(--fs-control-stroke-secondary);
+			}
+		}
+		&.strong {
+			color: var(--fs-text-primary);
+			&::before,
+			&::after {
+				background-color: var(--fs-control-strong-stroke-default);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { DividerProps, DividerGenerics } from './types.ts';
+declare function $$render<Tag extends DividerGenerics = 'div'>(): {
+    props: DividerProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends DividerGenerics = 'div'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends DividerGenerics = '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 DividerGenerics = 'div'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A divider visually separates content into groups. It supports horizontal and vertical orientations, optional label content, and multiple appearances.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { Divider } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Divider />
+ * <Divider appearance="accent">Section</Divider>
+ * <Divider vertical />
+ * ```
+ */
+declare const Divider: $$IsomorphicComponent;
+type Divider<Tag extends DividerGenerics = 'div'> = InstanceType<typeof Divider<Tag>>;
+export default Divider;

package/dist/components/divider/docs/llms.md

@@ -0,0 +1,83 @@
+# Divider
+
+The Divider component is used to visually separate content within a layout. It can be oriented horizontally or vertically.
+
+## Usage
+
+```svelte
+<script>
+	import { Divider } from 'fluentui-svelte';
+</script>
+
+<Divider>Divider</Divider>
+```
+
+## Divider API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props in the Divider Props table below.
+
+## Examples
+
+### Appearance
+
+Controls the color of the divider. Possible values: `'standard'`, `'accent'`, `'subtle'`.
+
+```svelte
+<Divider appearance="standard">Standard Divider</Divider>
+<Divider appearance="accent">Accent Divider</Divider>
+<Divider appearance="subtle">Subtle Divider</Divider>
+```
+
+### Vertical
+
+When `vertical` is set, the divider renders on the vertical axis instead of the horizontal one. Make sure the parent container has a defined height so the divider is visible.
+
+```svelte
+<Divider vertical>Vertical</Divider>
+```
+
+### Align Content
+
+The `alignContent` prop controls where the label content (children) is positioned along the divider. Possible values: `'start'`, `'center'`, `'end'`.
+
+```svelte
+<Divider alignContent="start">Start Aligned Divider</Divider>
+<Divider alignContent="center">Center Aligned Divider</Divider>
+<Divider alignContent="end">End Aligned Divider</Divider>
+```
+
+It also works combined with the `vertical` prop:
+
+```svelte
+<Divider alignContent="start" vertical>Start</Divider>
+<Divider alignContent="center" vertical>Center</Divider>
+<Divider alignContent="end" vertical>End</Divider>
+```
+
+### Inset
+
+When `inset` is set, the divider gets some inline padding applied, useful when it's placed inside a container that has content touching its edges.
+
+```svelte
+<Divider inset>Inset Divider</Divider>
+```
+
+### Custom element
+
+The `as` prop lets you change the underlying HTML element rendered by the divider. Possible values: `'div'`, `'hr'`, `'span'`.
+
+```svelte
+<Divider as="hr" />
+```
+
+## Divider Props
+
+| Name           | Type                                                 | Description                                                                                        |
+| -------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `as`           | `string`                                             | The HTML element to render the divider as. Possible values: `'div'`, `'hr'`, `'span'`.             |
+| `vertical`     | `boolean`                                            | Whether the divider is rendered vertically instead of horizontally.                                |
+| `alignContent` | `string`                                             | The alignment of the content within the divider. Possible values: `'start'`, `'center'`, `'end'`.  |
+| `appearance`   | `string`                                             | The appearance of the divider. Possible values: `'default'`, `'accent'`, `'standard'`, `'subtle'`. |
+| `inset`        | `boolean`                                            | Whether the divider has inline padding applied.                                                    |
+| `ref`          | `HTMLDivElement \| HTMLHRElement \| HTMLSpanElement` | The DOM reference of the divider element, its type depends on the `as` prop.                       |
+| `children`     | `Snippet`                                            | The content to render as a label within the divider.                                               |

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

@@ -0,0 +1,32 @@
+import type { Appearances, PolymorphicProps, XDirection } from '../../types/index.js';
+/** @propsmith DividerProps */
+export type DividerProps<Tag extends DividerGenerics = 'div'> = {
+    /** The HTML element to render the divider as.
+     * @type 'div' | 'hr' | 'span'
+     * @default 'div'
+     */
+    as?: Tag;
+    /** The DOM reference of the divider element.
+     * @type HTMLDivElement | HTMLHRElement | HTMLSpanElement
+     * @bindable
+     */
+    ref?: DividerElement[Tag];
+    /** Renders the divider vertically instead of horizontally. */
+    vertical?: boolean;
+    /** Where the content of the divider sits along the line.
+     * @default 'center'
+     */
+    alignContent?: XDirection;
+    /** Removes the padding around the divider line. */
+    inset?: boolean;
+    /** The divider line can be styled for greater emphasis or to be subtle.
+     * @default 'default'
+     */
+    appearance?: Appearances | 'default';
+} & PolymorphicProps<Tag>;
+export type DividerElement = {
+    div: HTMLDivElement;
+    hr: HTMLHRElement;
+    span: HTMLSpanElement;
+};
+export type DividerGenerics = 'div' | 'hr' | 'span';

package/dist/components/divider/types.js

@@ -0,0 +1 @@
+export {};