fluentui-svelte 0.1.0

package/dist/components/toggle-switch/toggle-switch.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { PREFIX } from '../../internal/constants.js';
+	import type { ToggleSwitchProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'toggle-switch';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		checked = $bindable(),
+		id = ID,
+		name = id,
+		label,
+		labelAttributes,
+		labelElement,
+		...attributes
+	}: ToggleSwitchProps = $props();
+</script>
+
+<!-- 
+	@component
+
+  This file contains the Svelte component implementation of a Fluent UI Toggle Switch.
+  The Fluent UI Toggle Switch is a customizable input element that allows users to switch between two states.
+
+  - Usage:
+  ```tsx
+  <script>
+    import { ToggleSwitch } from 'fluentui-svelte';
+  </script>
+
+  <ToggleSwitch label="Toggle Switch" />
+  ```
+-->
+<label class="fs-toggle-switch" {...labelAttributes} bind:this={labelElement}>
+	<input type="checkbox" role="switch" {id} {name} bind:checked bind:this={ref} {...attributes} />
+	{#if label}
+		<span>
+			{label}
+		</span>
+	{/if}
+</label>
+
+<style>
+	label {
+		display: flex;
+		align-items: center;
+		border-radius: 1.125rem;
+		outline: none;
+		cursor: pointer;
+		user-select: none;
+		&:has(input:focus-visible) {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.125rem;
+			&:has(span) {
+				border-radius: 0.063rem;
+				outline-offset: 0.313rem;
+			}
+		}
+		&:hover input {
+			background-color: var(--fs-control-alt-fill-tertiary);
+			&::after {
+				transform: translateX(0) scale(1.16);
+			}
+			&:checked::after {
+				transform: translateX(1.25rem) scale(1.16);
+			}
+		}
+		&:active input {
+			background-color: var(--fs-control-alt-fill-quaternary);
+			&::after {
+				width: 1rem;
+			}
+			&:checked {
+				background-color: var(--fs-accent-fill-secondary);
+				border-color: var(--fs-control-fill-transparent);
+				&::after {
+					margin-left: calc(-0.25rem * 1.16);
+				}
+			}
+		}
+		&:has(input:disabled) {
+			pointer-events: none;
+			color: var(--fs-text-disabled);
+			& input {
+				background-color: var(--fs-control-alt-fill-disabled);
+				border-color: var(--fs-control-strong-stroke-disabled);
+				&:checked {
+					background-clip: padding-box;
+					background-color: var(--fs-accent-fill-disabled);
+					border-color: var(--fs-accent-fill-disabled);
+					&::after {
+						background-color: var(--fs-text-on-accent-disabled);
+					}
+				}
+			}
+			& input::after {
+				background-color: var(--fs-text-disabled);
+			}
+		}
+		& input {
+			appearance: none;
+			display: flex;
+			align-items: center;
+			position: relative;
+			outline: none;
+			width: 2.5rem;
+			min-width: 2.5rem;
+			height: 1.25rem;
+			border: 0.063rem solid var(--fs-control-strong-stroke-default);
+			border-radius: 1.125rem;
+			background-color: var(--fs-control-alt-fill-secondary);
+			padding: 0.063rem;
+			cursor: pointer;
+			&::after {
+				content: '';
+				position: absolute;
+				left: 0.22rem;
+				width: 0.75rem;
+				height: 0.75rem;
+				border-radius: 0.75rem;
+				background-color: var(--fs-text-secondary);
+				transition:
+					transform var(--fs-fast-duration) var(--fs-point-to-point),
+					width var(--fs-fast-duration),
+					margin var(--fs-fast-duration);
+			}
+			/* Add effects support for Keyboard Events */
+			&:active::after {
+				width: 1rem;
+			}
+			&:checked {
+				background-color: var(--fs-accent-fill-default);
+				border-color: var(--fs-accent-fill-default);
+				&::after {
+					transform: translateX(1.25rem);
+					background-color: var(--fs-text-on-accent-primary);
+				}
+				&:active::after {
+					margin-left: calc(-0.25rem * 1.16);
+				}
+			}
+		}
+		& span {
+			font-size: inherit;
+			color: inherit;
+			padding-inline: 0.8rem;
+		}
+	}
+</style>

package/dist/components/toggle-switch/toggle-switch.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { ToggleSwitchProps } from './types.ts';
+/**
+ * This file contains the Svelte component implementation of a Fluent UI Toggle Switch.
+ * The Fluent UI Toggle Switch is a customizable input element that allows users to switch between two states.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { ToggleSwitch } from 'fluentui-svelte';
+ * </script>
+ *
+ * <ToggleSwitch label="Toggle Switch" />
+ * ```
+ */
+declare const ToggleSwitch: import("svelte").Component<ToggleSwitchProps, {}, "ref" | "checked">;
+type ToggleSwitch = ReturnType<typeof ToggleSwitch>;
+export default ToggleSwitch;

package/dist/components/toggle-switch/types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLLabelAttributes, SvelteHTMLElements } from 'svelte/elements';
+/** @propsmith ToggleSwitchProps */
+export type ToggleSwitchProps = {
+    /** Whether the switch is on.
+     * @bindable
+     */
+    checked?: boolean;
+    /** The DOM reference of the input element.
+     * @bindable
+     */
+    ref?: HTMLInputElement;
+    /** The label displayed next to the input element. */
+    label?: string;
+    /** The attributes to spread on the label wrapping the switch.
+     * @type HTMLLabelAttributes
+     */
+    labelAttributes?: HTMLLabelAttributes;
+    /** The DOM reference of the label element. */
+    labelElement?: HTMLLabelElement;
+} & SvelteHTMLElements['input'];

package/dist/components/toggle-switch/types.js

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

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

@@ -0,0 +1,74 @@
+# Tooltip
+
+A tooltip displays additional information about another component. The information is displayed above and near the target component.
+
+## Usage
+
+```svelte
+<script>
+	import { Tooltip, Button } from 'fluentui-svelte';
+</script>
+
+<Tooltip content="Tooltip content" relationship="description" withArrow>
+	{#snippet children(attrs)}
+		<Button {...attrs}>Hover over me</Button>
+	{/snippet}
+</Tooltip>
+```
+
+## 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.
+
+### Content
+
+The content prop specifies the content to be displayed in the tooltip when the user hovers over the target element. This can be a string, a Svelte component, or a Snippet.
+
+### Position
+
+The positionConfig prop allows you to specify your own custom position using Floating UI's position configuration. This gives you more control over the placement of the tooltip, allowing you to define custom offsets, middleware, and more.
+
+### With Arrow
+
+The withArrow prop is a boolean that, when set to true, adds an arrow to the tooltip pointing towards the target element. This can help visually connect the tooltip to the element it is describing.
+
+```svelte
+<Tooltip content="Tooltip with arrow" relationship="description" withArrow>
+	{#snippet children(attrs)}
+		<Button {...attrs}>With arrow</Button>
+	{/snippet}
+</Tooltip>
+```
+
+### Delay
+
+The openDelay and hideDelay props allow you to specify a delay, in milliseconds, before the tooltip is shown or hidden after the user hovers over the target element. This can help prevent the tooltip from appearing or disappearing too quickly.
+
+```svelte
+<Tooltip content="Delayed tooltip" openDelay={500} hideDelay={200}>
+	{#snippet children(attrs)}
+		<Button {...attrs}>Delayed</Button>
+	{/snippet}
+</Tooltip>
+```
+
+### onVisibleChange
+
+The onVisibleChange prop is a callback function that is called whenever the visibility of the tooltip changes. This allows you to programmatically respond to the tooltip being shown or hidden.
+
+### relationship
+
+The relationship prop allows you to specify the relationship between the tooltip and the target element. This can be used for accessibility purposes, such as indicating that the tooltip is a description of the target element.
+
+## Component Props
+
+| Name               | Type                             | Description                                                                                                     |
+| ------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `content`          | `string \| Snippet \| Component` | The content to be displayed in the tooltip. This can be a string, a Svelte component, or a Snippet.             |
+| `positionConfig`   | `Partial<ComputePositionConfig>` | The position configuration of the tooltip. This allows you to define custom offsets, middleware, and more.      |
+| `withArrow`        | `boolean`                        | Whether the tooltip should display an arrow pointing towards the target element.                                |
+| `openDelay`        | `number`                         | The delay, in milliseconds, before the tooltip is shown after the user hovers over the target element.          |
+| `hideDelay`        | `number`                         | The delay, in milliseconds, before the tooltip is hidden after the user stops hovering over the target element. |
+| `onVisibleChange`  | `(visible: boolean) => void`     | A callback function that is called whenever the visibility of the tooltip changes.                              |
+| `element`          | `HTMLElement`                    | The DOM reference of the tooltip element.                                                                       |
+| Element Attributes |                                  | All other attributes that can be applied to the tooltip element.                                                |

package/dist/components/tooltip/tooltip.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	import { on } from 'svelte/events';
+	import { useDebounce } from 'runed';
+	import { floating, roundByDPR, RenderSoC } from '../../internal/index.js';
+	import { Flyout } from '../../index.js';
+	import { PREFIX } from '../../internal/constants.js';
+	import { arrow, flip, hide, offset, shift, type ComputePositionReturn, type Side } from '@floating-ui/dom';
+	import type { Attachment } from 'svelte/attachments';
+	import type { TooltipProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'tooltip';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		content = 'I am a tooltip',
+		placement,
+		target,
+		positionConfig: _config,
+		open = $bindable(false),
+		withArrow = false,
+		openDelay = 100,
+		hideDelay = 300,
+		preventClose = $bindable(false),
+		onVisibleChange,
+		animationFrame = false,
+		relationship = 'label',
+		class: classes,
+		id = ID,
+		children,
+		...attributes
+	}: TooltipProps = $props();
+
+	let anchor: HTMLElement | null = $state(null);
+	let explicitTrigger: HTMLElement | null = $state(null);
+	let arrowElement: HTMLElement | null = $state(null);
+	let hoveringTooltip = $state(false);
+
+	const childrenProps = $derived({
+		'aria-labelledby': relationship === 'label' ? id : undefined,
+		'aria-describedby': relationship === 'description' ? id : undefined
+	});
+
+	const handleOpen = useDebounce(
+		() => {
+			open = true;
+			onVisibleChange?.(true);
+		},
+		() => openDelay
+	);
+
+	const handleClose = useDebounce(
+		() => {
+			if (preventClose || hoveringTooltip) return;
+			open = false;
+			onVisibleChange?.(false);
+		},
+		() => hideDelay
+	);
+
+	const triggerRef: Attachment = (node) => {
+		explicitTrigger = node as HTMLElement;
+		return () => {
+			explicitTrigger = null;
+		};
+	};
+
+	let triggerElement = $derived(
+		target ?? explicitTrigger ?? (anchor ? (anchor as HTMLElement).nextElementSibling : null)
+	);
+
+	let positionConfig = $derived({
+		..._config,
+		placement: placement ?? _config?.placement ?? 'top',
+		strategy: 'fixed' as const,
+		middleware: [
+			...(_config?.middleware ?? [offset(8), flip(), shift({ padding: 8 }), hide()]),
+			...(withArrow && arrowElement ? [arrow({ element: arrowElement })] : [])
+		]
+	});
+
+	const arrowComputeCallback = (data: ComputePositionReturn) => {
+		if (!arrowElement) return;
+
+		const { x, y } = data.middlewareData.arrow || {};
+		const { placement } = data;
+
+		const side = placement.split('-')[0] as Side;
+
+		// Invert the side of the arrow
+		const staticSide = {
+			top: 'bottom',
+			right: 'left',
+			bottom: 'top',
+			left: 'right'
+		}[side];
+
+		if (staticSide && arrowElement.style) {
+			Object.assign(arrowElement.style, {
+				left: x != null ? `${roundByDPR(x)}px` : '',
+				top: y != null ? `${roundByDPR(y)}px` : '',
+				[staticSide]: `${-(arrowElement.offsetWidth / 2) + 1}px`,
+				transform: 'rotate(45deg)'
+			});
+			arrowElement.style.setProperty(
+				'--fs-tooltip-mask-angle',
+				{
+					top: '135deg',
+					right: '-135deg',
+					bottom: '-45deg',
+					left: '45deg'
+				}[side]
+			);
+		}
+	};
+
+	$effect(() => {
+		if (!triggerElement) return;
+
+		const cleanups = [
+			on(triggerElement, 'mouseenter', () => handleOpen()),
+			on(triggerElement, 'mouseleave', () => handleClose()),
+			on(triggerElement, 'focusin', () => handleOpen()),
+			on(triggerElement, 'focusout', () => handleClose())
+		];
+
+		return () => cleanups.forEach((c) => c());
+	});
+
+	$effect(() => {
+		if (!ref || !open) return;
+
+		const cleanups = [
+			on(ref, 'mouseenter', () => {
+				hoveringTooltip = true;
+			}),
+			on(ref, 'mouseleave', () => {
+				hoveringTooltip = false;
+				handleClose();
+			})
+		];
+
+		return () => {
+			hoveringTooltip = false;
+			cleanups.forEach((c) => c());
+		};
+	});
+
+	$effect(() => {
+		if (!open) return;
+
+		return on(document, 'keydown', (e) => {
+			if (e.key === 'Escape') {
+				open = false;
+				onVisibleChange?.(false);
+			}
+		});
+	});
+</script>
+
+<!-- @component
+  This is a implementation of Fluent UI tooltip component. The tooltip is a small pop-up box that appears when a user hovers over an element. It provides additional information about the element being hovered over.
+  
+  - Usage:
+    ```tsx
+    <script>
+      import { Tooltip } from 'fluentui-svelte';
+    </script>
+
+    <Tooltip>
+      <Button>Hover me!</Button>
+    </Tooltip>
+    ``` 
+-->
+<Flyout
+	{id}
+	class={['fs-tooltip', !open && 'tooltip-hidden', classes]}
+	role="tooltip"
+	bind:ref
+	{...attributes}
+	{@attach triggerElement && open
+		? floating(triggerElement, positionConfig, {
+				onComputed: withArrow ? arrowComputeCallback : undefined,
+				animationFrame
+			})
+		: undefined}
+>
+	{#if typeof content === 'string'}
+		{content}
+	{:else if typeof content === 'function'}
+		<RenderSoC SoC={content} />
+	{/if}
+	{#if withArrow}
+		<div class="fs-tooltip-arrow" aria-hidden="true" bind:this={arrowElement}></div>
+	{/if}
+</Flyout>
+
+{#if !explicitTrigger && !target}
+	<i hidden bind:this={anchor}></i>
+{/if}
+
+{@render children?.(childrenProps, triggerRef)}
+
+<style>
+	:global(.fs-tooltip) {
+		position: fixed !important;
+		top: 0;
+		left: 0;
+		z-index: 50;
+		& .fs-tooltip-arrow {
+			position: absolute;
+			width: 16px;
+			height: 16px;
+			background: var(--fs-acrylic-background-default);
+			border-radius: var(--fs-control-border-radius);
+			border: 1px solid var(--fs-control-surface-stroke-flyout);
+			transform: rotate(45deg);
+			mask: linear-gradient(
+				var(--fs-tooltip-mask-angle, -45deg),
+				transparent 0%,
+				transparent 50%,
+				black 50%,
+				black 100%
+			);
+			&::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;
+			}
+		}
+		&.tooltip-hidden {
+			visibility: hidden !important;
+			pointer-events: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { TooltipProps } from './types.ts';
+/**
+ * This is a implementation of Fluent UI tooltip component. The tooltip is a small pop-up box that appears when a user hovers over an element. It provides additional information about the element being hovered over.
+ *
+ * - Usage:
+ *   ```tsx
+ *   <script>
+ *     import { Tooltip } from 'fluentui-svelte';
+ *   </script>
+ *
+ *   <Tooltip>
+ *     <Button>Hover me!</Button>
+ *   </Tooltip>
+ *   ```
+ */
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "ref" | "open" | "preventClose">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,67 @@
+import type { ComputePositionConfig, Placement } from '@floating-ui/dom';
+import type { Component, Snippet } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import type { HTMLAttributes } from 'svelte/elements';
+/** @propsmith TooltipProps */
+export type TooltipProps = {
+    /** The content to display in the tooltip.
+     * @type string | Snippet | Component
+     * @default 'I am a tooltip'
+     */
+    content?: string | Snippet | Component;
+    /** The class to apply to the tooltip. */
+    class?: string;
+    /** The DOM reference of the tooltip element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The element the tooltip is anchored to. Falls back to the rendered children. */
+    target?: HTMLElement;
+    /** Controls the open state of the tooltip.
+     * @default false
+     * @bindable
+     */
+    open?: boolean;
+    /** Whether the tooltip has an arrow pointing at its target.
+     * @default false
+     */
+    withArrow?: boolean;
+    /** The position configuration handed over to floating-ui.
+     * @type ComputePositionConfig
+     */
+    positionConfig?: Partial<ComputePositionConfig>;
+    /** The delay in milliseconds before the tooltip is shown.
+     * @default 100
+     */
+    openDelay?: number;
+    /** The delay in milliseconds before the tooltip is hidden.
+     * @default 300
+     */
+    hideDelay?: number;
+    /** Callback function that is called when the visibility of the tooltip changes. */
+    onVisibleChange?: (visible: boolean) => void;
+    /** The relationship of the tooltip to its target, which decides how it is announced.
+     * @default 'label'
+     */
+    relationship?: 'label' | 'description' | 'inaccessible';
+    /** Where the tooltip is placed relative to its target. */
+    placement?: Placement;
+    /** The id of the tooltip element, referenced by the target. Falls back to a generated id. */
+    id?: string;
+    /** Keeps the tooltip open until it is closed by hand.
+     * @default false
+     * @bindable
+     */
+    preventClose?: boolean;
+    /** Repositions the tooltip on every animation frame, for a target that keeps moving.
+     * @default false
+     */
+    animationFrame?: boolean;
+    /** The target of the tooltip. It receives the ARIA attributes and the attachment to spread on your element.
+     * @type Snippet
+     */
+    children?: Snippet<[{
+        'aria-labelledby'?: string;
+        'aria-describedby'?: string;
+    }, Attachment]>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dist/components/tooltip/types.js

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