fluentui-svelte 0.1.0

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

@@ -0,0 +1,31 @@
+# Flyout
+
+The Flyout component is a floating panel that can be used to display additional information or options in a non-intrusive way. It is fully accessible and follows Fluent UI design principles for a seamless user experience.
+
+## Usage
+
+```svelte
+<script>
+	import { Flyout } from 'fluentui-svelte';
+</script>
+
+<Flyout>
+	<p>This is the content of the flyout.</p>
+</Flyout>
+```
+
+The Flyout.
+
+## Component Props
+
+| Name                | Type                                              | Description                                                     |
+| ------------------- | ------------------------------------------------- | --------------------------------------------------------------- |
+| `ref`               | Bindable `HTMLElement`                            | The DOM reference to the flyout element.                        |
+| `children`          | `Snippet`                                         | The content to be displayed inside the flyout.                  |
+| `floating`          | `boolean`                                         | Whether to use Floating UI for positioning. Default: false.     |
+| `reference`         | `HTMLElement`                                     | The reference element for Floating UI.                          |
+| `placement`         | `Placement`                                       | The placement for Floating UI positioning. Default: 'bottom'.   |
+| `onPlacementChange` | `(placement: Placement) => void`                  | A callback that is called when the placement changes.           |
+| `roundCorners`      | `'all' \| 'top' \| 'bottom' \| 'left' \| 'right'` | Which corners to round. Default: 'all'.                         |
+| `offset`            | `number`                                          | The offset for Floating UI positioning. Default: 8.             |
+| Element Attributes  |                                                   | All other attributes that can be applied to the flyout element. |

package/dist/components/flyout/flyout.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { computePosition, offset, autoPlacement, hide, autoUpdate, type Placement } from '@floating-ui/dom';
+	import { roundByDPR } from '../../internal/index.js';
+	import type { FlyoutProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		floating = false,
+		reference,
+		placement = 'bottom',
+		onPlacementChange,
+		placementConfig,
+		roundCorners = 'all',
+		offset: offsetValue = 8,
+		class: classes,
+		...attributes
+	}: FlyoutProps = $props();
+
+	let roundClass = $derived(`round-${roundCorners}`);
+	let currentPlacement = $derived(placement);
+
+	function handlePlacementChange(newPlacement: Placement) {
+		if (newPlacement !== currentPlacement) {
+			currentPlacement = newPlacement;
+			onPlacementChange?.(newPlacement);
+		}
+	}
+
+	function getRoundClass(newPlacement: string) {
+		if (roundCorners === newPlacement) return `round-${roundCorners}`;
+		if (roundCorners === 'top') return 'round-bottom';
+		if (roundCorners === 'bottom') return 'round-top';
+		if (roundCorners === 'left') return 'round-right';
+		if (roundCorners === 'right') return 'round-left';
+		return 'round-all';
+	}
+
+	onMount(() => {
+		if (floating && reference && ref) {
+			const middleware = [offset(offsetValue), autoPlacement(placementConfig), hide()];
+			const update = async () => {
+				if (!reference || !ref) return;
+
+				const {
+					x,
+					y,
+					middlewareData,
+					placement: _placement
+				} = await computePosition(reference, ref, {
+					placement,
+					middleware
+				});
+
+				Object.assign(ref.style, {
+					transform: `translate(${roundByDPR(x)}px, ${roundByDPR(y)}px)`,
+					visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
+				});
+
+				if (_placement !== currentPlacement) {
+					handlePlacementChange(_placement);
+					roundClass = getRoundClass(_placement);
+				}
+			};
+			const cleanup = autoUpdate(reference, ref, update);
+			return () => cleanup();
+		}
+	});
+</script>
+
+<!--
+@component
+A contextual popup that displays a set of actions or options. It appears when users interact with a control or action and is dismissed when users click outside of it or select an option.
+
+- Usage:
+  ```tsx
+  <script>
+    import { Flyout } from 'fluentui-svelte';
+  </script>
+
+  <Flyout>
+    <p>Content goes here</p>
+    <Button>Close Flyout</Button>
+  </Flyout>
+    ```
+-->
+<div class={['fs-flyout', roundClass, classes, { floating }]} bind:this={ref} {...attributes}>
+	{@render children?.()}
+</div>
+
+<style>
+	.fs-flyout {
+		display: flex;
+		position: relative;
+		padding: 1rem;
+		background: var(--fs-acrylic-background-default);
+		box-shadow: var(--fs-shadow-flyout);
+		border-radius: var(--fs-control-overlay-border-radius);
+		border: 1px solid var(--fs-control-surface-stroke-flyout);
+		background-clip: padding-box;
+		color: var(--fs-text-primary);
+		&.floating {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		&::before {
+			content: '';
+			border-radius: calc(var(--fs-control-overlay-border-radius) - 0.063rem);
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			inset: 0;
+			background: var(--fs-acrilic-noise);
+			background-size: 2.5rem;
+			opacity: 0.1;
+			filter: grayscale(1);
+			z-index: 0;
+			pointer-events: none;
+		}
+		& :global(> *) {
+			z-index: 1;
+		}
+		&.round-all {
+			border-radius: var(--fs-control-overlay-border-radius);
+		}
+		&.round-top,
+		&.round-top::before {
+			border-radius: var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0 0;
+		}
+		&.round-bottom,
+		&.round-bottom::before {
+			border-radius: 0 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius);
+		}
+		&.round-left,
+		&.round-left::before {
+			border-radius: var(--fs-control-overlay-border-radius) 0 0 var(--fs-control-overlay-border-radius);
+		}
+		&.round-right,
+		&.round-right::before {
+			border-radius: 0 var(--fs-control-overlay-border-radius) var(--fs-control-overlay-border-radius) 0;
+		}
+	}
+	:global(.dark-mode) .fs-flyout::before {
+		opacity: 0.05;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { FlyoutProps } from './types.ts';
+/**
+ * A contextual popup that displays a set of actions or options. It appears when users interact with a control or action and is dismissed when users click outside of it or select an option.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { Flyout } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Flyout>
+ *   <p>Content goes here</p>
+ *   <Button>Close Flyout</Button>
+ * </Flyout>
+ *   ```
+ */
+declare const Flyout: import("svelte").Component<FlyoutProps, {}, "ref">;
+type Flyout = ReturnType<typeof Flyout>;
+export default Flyout;

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

@@ -0,0 +1,36 @@
+import type { AutoPlacementOptions, Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** @propsmith FlyoutProps */
+export type FlyoutProps = {
+    /** The DOM reference of the flyout element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The content of the flyout. */
+    children?: Snippet;
+    /** Positions the flyout with floating-ui instead of leaving it in the normal flow.
+     * @default false
+     */
+    floating?: boolean;
+    /** The element the flyout is positioned against when `floating` is set. */
+    reference?: HTMLElement;
+    /** Where the flyout is placed relative to its reference.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+    /** Called whenever floating-ui settles on a different placement. */
+    onPlacementChange?: (placement: Placement) => void;
+    /** Which corners of the flyout are rounded.
+     * @default 'all'
+     */
+    roundCorners?: 'all' | 'top' | 'bottom' | 'left' | 'right';
+    /** The distance in pixels between the flyout and its reference.
+     * @default 8
+     */
+    offset?: number;
+    /** The auto placement configuration handed over to floating-ui.
+     * @type AutoPlacementOptions
+     */
+    placementConfig?: AutoPlacementOptions;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/flyout/types.js

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

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

@@ -0,0 +1,33 @@
+# Hyperlink
+
+The Hyperlink component is used to create clickable links that navigate to a specified URL. It follows Fluent UI design principles and ensures accessibility and smooth user interactions.
+
+## Usage
+
+```svelte
+<script>
+	import { Hyperlink } from 'fluentui-svelte';
+</script>
+
+<Hyperlink href="/">Go to Home</Hyperlink>
+```
+
+## Examples
+
+### Disabled
+
+Disables the hyperlink and prevents navigation.
+
+```svelte
+<Hyperlink href="/" disabled>Disabled Link</Hyperlink>
+```
+
+## Component Props
+
+| Name               | Type                | Description                                                             |
+| ------------------ | ------------------- | ----------------------------------------------------------------------- |
+| `href`             | `string`            | The URL to navigate to when the link is clicked.                        |
+| `disabled`         | `boolean`           | Disables the hyperlink and prevents navigation.                         |
+| `children`         | `Snippet`           | The content of the hyperlink.                                           |
+| `ref`              | `HTMLAnchorElement` | A bindable reference to the underlying anchor element.                  |
+| Element Attributes |                     | You can use any valid HTML anchor attributes (e.g., target, rel, etc.). |

package/dist/components/hyperlink/hyperlink.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { HyperlinkProps } from './types.js';
+
+	let { href = '#', disabled, class: classes, children, ref = $bindable(), ...attributes }: HyperlinkProps = $props();
+</script>
+
+<!-- 
+@component
+
+This is an implementation of the Fluent UI hyperlink component. The hyperlink is used to navigate to a different page or to a different section of the same page. It is used to provide additional information or to redirect the user to another location.
+F
+- Usage:
+```tsx
+<script>
+  import { Hyperlink } from 'fluentui-svelte';
+</script>
+
+<Hyperlink href="https://fluentui-svelte.dev">Fluent UI Svelte</Hyperlink>
+```
+-->
+<a
+	// eslint-disable-next-line svelte/no-navigation-without-resolve
+	{href}
+	class={['fs-hyperlink', classes, { disabled }]}
+	tabindex={disabled ? -1 : undefined}
+	aria-disabled={disabled || undefined}
+	onclick={disabled ? (e) => e?.preventDefault() : undefined}
+	bind:this={ref}
+	{...attributes}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{href}
+	{/if}
+</a>
+
+<style>
+	.fs-hyperlink {
+		color: var(--fs-accent-text-primary);
+		text-decoration: underline;
+		outline: none;
+		border-radius: 0.25rem;
+		&:hover,
+		&:active {
+			text-decoration: none;
+		}
+		&:hover {
+			color: var(--fs-accent-text-secondary);
+		}
+		&:active {
+			color: var(--fs-accent-text-tertiary);
+		}
+		&:focus-visible {
+			outline: 0.188rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.063rem;
+		}
+		&.disabled {
+			color: var(--fs-text-disabled);
+			&:hover {
+				cursor: not-allowed;
+				text-decoration: underline;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { HyperlinkProps } from './types.ts';
+/**
+ * This is an implementation of the Fluent UI hyperlink component. The hyperlink is used to navigate to a different page or to a different section of the same page. It is used to provide additional information or to redirect the user to another location.
+ * F
+ * - Usage:
+ * ```tsx
+ * <script>
+ * import { Hyperlink } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Hyperlink href="https://fluentui-svelte.dev">Fluent UI Svelte</Hyperlink>
+ * ```
+ */
+declare const Hyperlink: import("svelte").Component<HyperlinkProps, {}, "ref">;
+type Hyperlink = ReturnType<typeof Hyperlink>;
+export default Hyperlink;

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

@@ -0,0 +1,14 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+/** @propsmith HyperlinkProps */
+export type HyperlinkProps = {
+    /** The URL the hyperlink points to.
+     * @default '#'
+     */
+    href?: string;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The DOM reference of the anchor element.
+     * @bindable
+     */
+    ref?: HTMLAnchorElement;
+} & HTMLAnchorAttributes;

package/dist/components/hyperlink/types.js

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

package/dist/components/info-bar/docs/llms.md

@@ -0,0 +1,81 @@
+# InfoBar
+
+The InfoBar control is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in severity levels to easily indicate the type of message shown, as well as the option to include your own call to action or hyperlink button. Since the InfoBar is inline with other UI content, it can remain visible or be dismissed by the user.
+
+## Usage
+
+```svelte
+<script lang="ts">
+	import { InfoBar } from 'fluentui-svelte';
+</script>
+
+<InfoBar status="information" title="Information">
+	<p>This is an informational message.</p>
+</InfoBar>
+```
+
+## Component API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props table below.
+
+## Examples
+
+### Status
+
+The status prop determines the visual style and meaning of the InfoBar.
+
+```svelte
+<InfoBar status="information" title="Information">
+	<p>This is an informational message.</p>
+</InfoBar>
+<InfoBar status="attention" title="Attention">
+	<p>This is an attention message.</p>
+</InfoBar>
+<InfoBar status="warning" title="Warning">
+	<p>This is a warning message.</p>
+</InfoBar>
+<InfoBar status="critical" title="Critical">
+	<p>This is a critical message.</p>
+</InfoBar>
+<InfoBar status="success" title="Success">
+	<p>This is a success message.</p>
+</InfoBar>
+```
+
+### Style
+
+The style prop determines the layout of the InfoBar.
+
+```svelte
+<InfoBar status="information" style="inline" title="Inline Style">
+	<p>This is an inline styled InfoBar.</p>
+</InfoBar>
+<InfoBar status="information" style="multiline" title="Multiline Style">
+	<p>This is a multiline styled InfoBar.</p>
+</InfoBar>
+```
+
+### Hide Close Button
+
+The hideCloseButton prop allows you to hide the close button in the InfoBar.
+
+```svelte
+<InfoBar status="information" title="Without Close Button" hideCloseButton>
+	<p>This InfoBar does not have a close button.</p>
+</InfoBar>
+<InfoBar status="information" title="With Close Button">
+	<p>This InfoBar has a close button.</p>
+</InfoBar>
+```
+
+## Component Props
+
+| Name              | Type                   | Description                                                                                               |
+| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
+| `status`          | `string`               | The status of the InfoBar. Possible values: 'information', 'attention', 'warning', 'critical', 'success'. |
+| `style`           | `string`               | The style of the InfoBar. Possible values: 'inline', 'multiline'.                                         |
+| `title`           | `string`               | The title of the InfoBar.                                                                                 |
+| `icon`            | `Snippet \| Component` | The icon to display in the InfoBar.                                                                       |
+| `iconSize`        | `number`               | The size of the icon in pixels. Default: 20.                                                              |
+| `hideCloseButton` | `boolean`              | Whether to hide the close button. Default: false.                                                         |
+| `children`        | `Snippet`              | The child elements to render inside the InfoBar.                                                          |

package/dist/components/info-bar/info-bar.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Button, BadgeIcon } from '../../index.js';
+	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
+	import DismissCircleFilled from 'fluentui-icons-svelte/DismissCircleFilled.svelte';
+	import InfoFilled from 'fluentui-icons-svelte/InfoFilled.svelte';
+	import ErrorCircleFilled from 'fluentui-icons-svelte/ErrorCircleFilled.svelte';
+	import WarningFilled from 'fluentui-icons-svelte/WarningFilled.svelte';
+	import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
+	import { RenderSoC } from '../../internal/index.js';
+	import type { InfoBarProps } from './types.js';
+
+	let {
+		status = 'information',
+		title,
+		icon: Icon,
+		style = 'inline',
+		hideCloseButton,
+		iconSize = 20,
+		children
+	}: InfoBarProps = $props();
+
+	const icons = {
+		information: InfoFilled,
+		attention: ErrorCircleFilled,
+		warning: WarningFilled,
+		critical: DismissCircleFilled,
+		success: CheckmarkFilled
+	};
+
+	let closed = $state(false);
+</script>
+
+<!-- @component
+  The InfoBar component is used to display a message to the user. It can have different styles and colors based on the status prop.
+  It can also have an icon, a title, a message, and a button with a callback.
+  - Usage:
+  ```tsx
+  <script>
+    import { InfoBar } from 'fluentui-svelte';
+    import { HomeIcon } from 'some-icon-library';
+  </script>
+
+  <InfoBar status="success" title="Success" message="The operation was successful." buttonCallback={(e) => console.log('Button clicked')}>
+    This is a custom content.
+  </InfoBar>
+  ```
+-->
+{#if !closed}
+	<div class={['fs-info-bar', status, style]} role={status === 'critical' ? 'alert' : 'status'}>
+		<div class="icon-wrapper">
+			{#if Icon}
+				<RenderSoC SoC={Icon} />
+			{:else}
+				<BadgeIcon color={status} icon={icons[status] as any} size={iconSize} />
+			{/if}
+		</div>
+		<div class="content">
+			{#if title}<h3>{title}</h3>{/if}
+			{@render children?.()}
+		</div>
+		{#if !hideCloseButton}
+			<div class="close">
+				<Button
+					appearance="subtle"
+					style="min-width: max-content"
+					onclick={() => (closed = true)}
+					aria-label="Close InfoBar"
+				>
+					<DismissFilled class="button-icon" />
+				</Button>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.fs-info-bar {
+		position: relative;
+		display: flex;
+		gap: 0.813rem;
+		padding: 0.5rem 0.5rem 0.5rem 0.635rem;
+		background-color: var(--fs-card-background-secondary);
+		border: 1px solid var(--fs-card-stroke-default);
+		border-radius: var(--fs-control-border-radius);
+		color: var(--fs-text-primary);
+		&.multiline {
+			padding-bottom: 1rem;
+			& .icon-wrapper {
+				align-items: flex-start;
+			}
+			& .content {
+				flex-direction: column;
+				align-items: flex-start;
+			}
+			& .close {
+				align-items: flex-start;
+			}
+			&:not(:has(.close)) .content {
+				padding-right: 0.5rem;
+			}
+		}
+		&.warning {
+			background-color: var(--fs-system-caution-bg);
+		}
+		&.critical {
+			background-color: var(--fs-system-critical-bg);
+		}
+		&.success {
+			background-color: var(--fs-system-success-bg);
+		}
+		& .icon-wrapper {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 2rem;
+		}
+		& .content {
+			display: flex;
+			flex: 1 1 auto;
+			align-items: center;
+			gap: 0.5rem;
+			width: 100%;
+			& h3 {
+				font-weight: semibold;
+				font-size: var(--fs-body-font-size);
+				line-height: var(--fs-body-line-height);
+			}
+		}
+		& .close {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		& :global(.button-icon) {
+			width: 1.2rem;
+			height: 1.2rem;
+			color: var(--fs-text-primary);
+		}
+	}
+</style>

package/dist/components/info-bar/info-bar.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { InfoBarProps } from './types.ts';
+/**
+ * The InfoBar component is used to display a message to the user. It can have different styles and colors based on the status prop.
+ * It can also have an icon, a title, a message, and a button with a callback.
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { InfoBar } from 'fluentui-svelte';
+ *   import { HomeIcon } from 'some-icon-library';
+ * </script>
+ *
+ * <InfoBar status="success" title="Success" message="The operation was successful." buttonCallback={(e) => console.log('Button clicked')}>
+ *   This is a custom content.
+ * </InfoBar>
+ * ```
+ */
+declare const InfoBar: import("svelte").Component<InfoBarProps, {}, "">;
+type InfoBar = ReturnType<typeof InfoBar>;
+export default InfoBar;

package/dist/components/info-bar/types.d.ts

@@ -0,0 +1,27 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** @propsmith InfoBarProps */
+export type InfoBarProps = {
+    /** The severity of the message, which picks the icon and the colors.
+     * @default 'information'
+     */
+    status?: 'information' | 'attention' | 'warning' | 'critical' | 'success';
+    /** Lays the message out on a single line, or stacked below the title.
+     * @default 'inline'
+     */
+    style?: 'inline' | 'multiline';
+    /** The title of the InfoBar. */
+    title?: string;
+    /** Custom icon, rendered instead of the one the `status` would pick on its own.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** The size of the icon in pixels.
+     * @default 20
+     */
+    iconSize?: number;
+    /** Removes the button that dismisses the InfoBar. */
+    hideCloseButton?: boolean;
+    /** The message of the InfoBar. */
+    children?: Snippet;
+} & HTMLAttributes<HTMLDivElement>;

package/dist/components/info-bar/types.js

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