fluentui-svelte 0.1.0

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { on } from 'svelte/events';
+	import { useDebounce } from 'runed';
+	import { onMount, tick } from 'svelte';
+	import { COMPONENT_NAME, getMenuContext } from './menu.svelte.js';
+	import ChevronRightFilled from 'fluentui-icons-svelte/ChevronRightFilled.svelte';
+	import type { MenuTriggerProps } from './types.js';
+	import type { ButtonProps } from '../button/types.js';
+
+	let FALLBACK_ID = $props.id();
+
+	let { disabled, shape, icon: Icon, children }: MenuTriggerProps = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${COMPONENT_NAME}.`);
+
+	const { state: _state } = context;
+
+	const { toggle, open, close } = context.methods;
+
+	const { id, isSubMenu, openOnHover, openingDelay, parentHasCheckmarks, parentHasIcons } = context.config;
+
+	const paddingLeft = $derived(1.25 * (+!!(parentHasIcons && !Icon) + +!!parentHasCheckmarks) + 0.9);
+
+	const debounced = useDebounce((e: MouseEvent) => {
+		if (e.type === 'mouseover' && !_state.open) {
+			return open(e);
+		}
+
+		// Where the mouse is moving to
+		const to = e.relatedTarget as HTMLElement | null;
+
+		if (to && !to.closest(`#fs-menu-popover-${id}`) && to.parentElement !== _state.ref && !_state.locked) close(e);
+	}, openingDelay || 0);
+
+	onMount(() => {
+		const off = on(document, 'click', async (e: MouseEvent) => {
+			const target = e.target as HTMLElement;
+
+			if (target.closest(`#fs-menu-popover-${id}`)) {
+				return;
+			}
+
+			if (target === _state.ref) {
+				_state.locked = !_state.locked;
+				toggle(e);
+				// Focus the first button in the popover when opening
+				if (_state.open) {
+					await tick();
+					(document.querySelector(`#fs-menu-popover-${id} .fs-button:first-of-type`) as HTMLElement)?.focus();
+				}
+				return;
+			}
+
+			if (!target.closest(`#fs-menu-popover-${id}`)) {
+				_state.locked = false;
+				close(e);
+			}
+		});
+
+		return () => off();
+	});
+
+	const menuTriggerProps: Omit<ButtonProps<'button'>, 'ref'> = $derived({
+		disabled,
+		shape,
+		'aria-controls': `fs-menu-popover-${id}`,
+		id: `fs-${isSubMenu ? 'submenu' : 'menu'}-trigger-${id}`,
+		class: `fs-${isSubMenu ? 'submenu' : 'menu'}-trigger ${
+			(parentHasIcons || parentHasCheckmarks) && isSubMenu ? 'align' : ''
+		} trigger-id-${FALLBACK_ID}`,
+		style: `--padding-left: ${paddingLeft}rem;`,
+		onmouseover: openOnHover && !disabled ? (e: MouseEvent) => debounced(e) : undefined,
+		onmouseleave: openOnHover && !disabled ? (e: MouseEvent) => debounced(e) : undefined,
+		'aria-haspopup': 'menu',
+		'aria-expanded': _state.open ? 'true' : 'false',
+		role: isSubMenu ? 'menuitem' : undefined,
+		appearance: isSubMenu ? 'subtle' : undefined,
+		isMenuButton: isSubMenu,
+		indicatorIcon: isSubMenu ? ChevronRightFilled : undefined
+	});
+
+	// svelte-ignore state_referenced_locally
+	const primaryButtonProps: ButtonProps<'button'> = $state.raw({
+		disabled,
+		shape
+	});
+</script>
+
+{@render children?.({ state: context.state, menuTriggerProps, primaryButtonProps })}
+
+<style>
+	:global(.fs-button.fs-submenu-trigger) {
+		width: 100%;
+		padding: 0.375rem 0.45rem;
+		border-radius: var(--fs-control-inner-border-radius);
+		justify-content: space-between;
+		font-size: var(--fs-body2-font-size);
+		line-height: var(--fs-body2-line-height);
+		& :global(svg) {
+			width: 1rem;
+			height: 1rem;
+			height: auto;
+			fill: currentColor;
+		}
+		& :global(svg.indicator) {
+			width: 1rem;
+			height: auto;
+			margin-left: 0.6rem;
+			margin-right: 0.2rem;
+			pointer-events: none;
+		}
+		&:global(:is(:disabled, [disabled]) :is(svg, .indicator)) {
+			color: var(--fs-text-disabled);
+		}
+		&:global(.align) {
+			padding-left: var(--padding-left) !important;
+		}
+	}
+</style>

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

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

package/dist/components/menu/menu.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { getMenuContext, setMenuContext } from './menu.svelte.js';
+	import type { MenuContext, MenuProps, MenuState } from './types.js';
+
+	let {
+		checkedValues = {} as Record<string, string[]>,
+		onCheckedValueChange,
+		hasCheckmarks,
+		hasIcons,
+		openingDelay = 0,
+		open,
+		onOpenChange,
+		openOnHover = false,
+		persistOnItemActivation = false,
+		positionConfig,
+		children
+	}: MenuProps = $props();
+
+	const id = $props.id();
+
+	// Check if is being used as submenu
+	const PARENT_CONTEXT = getMenuContext();
+
+	let ref: HTMLElement | null = $state(null);
+
+	let locked = $state(false);
+
+	let config: MenuContext['config'] = $derived.by(() => {
+		if (!PARENT_CONTEXT) {
+			return {
+				id,
+				isSubMenu: false,
+				hasCheckmarks,
+				hasIcons,
+				openingDelay,
+				openOnHover,
+				persistOnItemActivation,
+				positionConfig,
+				parentHasCheckmarks: false,
+				parentHasIcons: false
+			};
+		} else {
+			return {
+				...PARENT_CONTEXT.config,
+				isSubMenu: true,
+				id,
+				hasCheckmarks,
+				hasIcons,
+				parentHasCheckmarks: !!PARENT_CONTEXT.config.hasCheckmarks,
+				parentHasIcons: !!PARENT_CONTEXT.config.hasIcons
+			};
+		}
+	});
+
+	const _state: MenuState = {
+		get open() {
+			return open;
+		},
+		set open(v) {
+			open = v;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+		get locked() {
+			return locked;
+		},
+		set locked(v) {
+			locked = v;
+		},
+		get checkedValues() {
+			return checkedValues;
+		},
+		set checkedValues(v) {
+			checkedValues = v;
+		}
+	};
+
+	let events: MenuContext['events'] = $derived.by(() => {
+		if (!PARENT_CONTEXT) {
+			return {
+				onCheckedValueChange: (e, value) => onCheckedValueChange?.(e, value),
+				onOpenChange: (e, opened) => onOpenChange?.(e, opened)
+			};
+		} else {
+			return PARENT_CONTEXT.events;
+		}
+	});
+
+	let methods: MenuContext['methods'] = $derived({
+		toggle: (e: Event) => {
+			_state.open = !_state.open;
+			events.onOpenChange?.(e, _state.open);
+		},
+		open: (e: Event) => {
+			_state.open = true;
+			events.onOpenChange?.(e, _state.open);
+		},
+		close: (e: Event) => {
+			_state.open = false;
+			events.onOpenChange?.(e, _state.open);
+		},
+		toggleCheckbox: (e: Event, value: string, name: string) => {
+			const current = _state.checkedValues?.[name] ?? [];
+			const updated = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+			_state.checkedValues = { ..._state.checkedValues, [name]: updated };
+			events.onCheckedValueChange?.(e, _state.checkedValues!);
+		},
+		toggleRadio: (e: Event, value: string, name: string) => {
+			if (!_state.checkedValues?.[name]?.includes(value)) {
+				_state.checkedValues = { ..._state.checkedValues, [name]: [value] };
+				events.onCheckedValueChange?.(e, _state.checkedValues!);
+			}
+		}
+	});
+
+	// svelte-ignore state_referenced_locally
+	setMenuContext({ config, state: _state, events, methods });
+</script>
+
+{@render children?.()}

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

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

package/dist/components/menu/menu.svelte.js

@@ -0,0 +1,77 @@
+import { createFSContext, getOffset } from '../../internal/index.js';
+export const COMPONENT_NAME = 'fs-menu-';
+export const [getMenuContext, setMenuContext] = createFSContext();
+/** Distance, in pixels, the popover keeps from the anchor edge when a vertical intro starts. */
+const VERTICAL_INTRO_DISTANCE = 10;
+/** Distance, in pixels, a horizontal intro slides out of the anchor edge. */
+const HORIZONTAL_INTRO_DISTANCE = 15;
+/**
+ * Rect of an element relative to its `offsetParent`, which is the coordinate space an absolutely
+ * positioned sibling lives in. It matches what FloatingUI resolves for such an element.
+ */
+const getOffsetRect = (element) => ({
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    top: element.offsetTop,
+    left: element.offsetLeft,
+    right: element.offsetLeft + element.offsetWidth,
+    bottom: element.offsetTop + element.offsetHeight,
+    width: element.offsetWidth,
+    height: element.offsetHeight
+});
+/**
+ * Resolves the coordinates FloatingUI settles the popover at for the given placement, in the same
+ * space as the anchor rect it is given: the viewport for a menu, the parent popover for a submenu.
+ *
+ * The `in:` transition runs before FloatingUI has computed anything, so the animation has to start
+ * and end on these coordinates for the handover to be seamless.
+ */
+export const getIntroCoords = ({ placement, anchor, floating, offset = 0 }) => {
+    const [side, alignment] = placement.split('-');
+    const isVertical = side === 'top' || side === 'bottom';
+    // Main axis: the popover sits right outside the anchor edge, pushed away by the `offset` middleware.
+    const main = side === 'top'
+        ? anchor.top - floating.height - offset
+        : side === 'bottom'
+            ? anchor.bottom + offset
+            : side === 'left'
+                ? anchor.left - floating.width - offset
+                : anchor.right + offset;
+    // Cross axis: flush with the anchor start or end edge, centered when the placement has no alignment.
+    const anchorStart = isVertical ? anchor.left : anchor.top;
+    const anchorSize = isVertical ? anchor.width : anchor.height;
+    const floatingSize = isVertical ? floating.width : floating.height;
+    const cross = alignment === 'start'
+        ? anchorStart
+        : alignment === 'end'
+            ? anchorStart + anchorSize - floatingSize
+            : anchorStart + (anchorSize - floatingSize) / 2;
+    return isVertical ? { top: main, left: cross } : { top: cross, left: main };
+};
+/**
+ * Builds the `flyToOffset` options for the popover intro: the popover emerges from the anchor and
+ * lands exactly where FloatingUI will keep it (or should, if element is not crossing the viewport), so nothing jumps when the transition ends.
+ */
+export const getIntroTransition = ({ config, anchor, element, ref, isSubMenu = false }) => {
+    const offset = getOffset(config);
+    const placement = config.placement ?? (isSubMenu ? 'right-start' : 'bottom-start');
+    const [side] = placement.split('-');
+    const isVertical = side === 'top' || side === 'bottom';
+    // A submenu is absolutely positioned inside its parent popover, so it is placed in the coordinate
+    // space of that popover instead of the viewport, the very same space FloatingUI resolves it in.
+    const rect = isSubMenu && ref instanceof HTMLElement ? getOffsetRect(ref) : anchor;
+    const { top, left } = getIntroCoords({
+        placement,
+        anchor: rect,
+        floating: element?.getBoundingClientRect() ?? { width: 0, height: 0 },
+        offset
+    });
+    // The popover starts overlapping the anchor and slides out of it, towards the resolved
+    // coordinates: a vertical intro emerges from the whole anchor, a horizontal one just peeks out.
+    const travel = isVertical ? rect.height + offset - VERTICAL_INTRO_DISTANCE : HORIZONTAL_INTRO_DISTANCE;
+    const distance = side === 'top' || side === 'left' ? travel : -travel;
+    return {
+        ...(isVertical ? { y: distance } : { x: distance }),
+        css: `top: ${top}px; left: ${left}px;`
+    };
+};

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

@@ -0,0 +1,127 @@
+import type { ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
+import type { FSContext } from '../../internal/index.js';
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { NoUndefinedField, Shapes } from '../../types/index.js';
+import type { Button } from '../../index.ts';
+import type { ButtonProps } from '../button/types.ts';
+export type MenuContext = FSContext<{
+    id: string;
+    isSubMenu: boolean;
+    parentHasCheckmarks: boolean;
+    parentHasIcons: boolean;
+} & Omit<MenuProps, 'element' | 'children' | 'onOpenChange' | 'open' | 'onCheckedValueChange' | 'checkedValues'>, MenuState, NoUndefinedField<Pick<MenuProps, 'onCheckedValueChange' | 'onOpenChange'>>, {
+    toggle: (e: Event) => void;
+    open: (e: Event) => void;
+    close: (e: Event) => void;
+    toggleCheckbox: (e: Event, value: string, name: string) => void;
+    toggleRadio: (e: Event, value: string, name: string) => void;
+}>;
+export type MenuState = {
+    open: boolean | undefined;
+    ref: HTMLElement | VirtualElement | null | undefined;
+    locked: boolean;
+    checkedValues: MenuProps['checkedValues'];
+};
+/** @propsmith MenuProps */
+export type MenuProps = {
+    /** The position configuration handed over to floating-ui.
+     * @type ComputePositionConfig
+     */
+    positionConfig?: Partial<ComputePositionConfig>;
+    /** Reserves the room every item needs for an icon, so the labels line up. */
+    hasIcons?: boolean;
+    /** Reserves the room every item needs for a checkmark, so the labels line up. */
+    hasCheckmarks?: boolean;
+    /** Controls the open state of the menu. */
+    open?: boolean;
+    /** Called whenever the menu opens or closes. */
+    onOpenChange?: (e: Event, open: boolean) => void;
+    /** The checked values of the menu, grouped by the `name` of each item.
+     * @default {}
+     */
+    checkedValues?: Record<string, string[]>;
+    /** Called whenever a checkbox or radio item changes.
+     * @type (e: Event, checkedValues: Record<string, string[]>) => void
+     */
+    onCheckedValueChange?: (e: Event, checkedValues: Record<string, string[]>) => void;
+    /** Opens the menu on hover instead of on click.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /** How long to wait, in milliseconds, before opening the menu.
+     * @default 0
+     */
+    openingDelay?: number;
+    /** Keeps the menu open after an item is activated.
+     * @default false
+     */
+    persistOnItemActivation?: boolean;
+    /** The parts of the menu: a trigger and a popover. */
+    children?: Snippet;
+};
+/** @propsmith MenuTriggerProps */
+export type MenuTriggerProps = {
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** The trigger can be rounded, circular, or square. */
+    shape?: Shapes;
+    /** An optional icon for the trigger.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** A custom trigger. It receives the menu state and the props to spread on your own buttons.
+     * @type Snippet
+     */
+    children?: Snippet<[
+        {
+            state: MenuState;
+            menuTriggerProps: ButtonProps<'button'>;
+            primaryButtonProps: ButtonProps<'button'>;
+        }
+    ]>;
+};
+/** @propsmith MenuGroupProps */
+export type MenuGroupProps = {
+    /** The DOM reference of the group element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** The label of the group. */
+    header?: string;
+    /** The items of the group. */
+    children: Snippet;
+};
+/** @propsmith MenuItemProps */
+export type MenuItemProps = {
+    /** The icon to display before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet<[{
+        class: string;
+    }]> | Component<{
+        class: string;
+    }>;
+    /** Right aligned text, usually a keyboard shortcut. */
+    secondaryContent?: string;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** A second line of text below the label. */
+    subText?: string;
+    /** Renders the item as a link pointing to this URL. */
+    href?: string;
+};
+/** @propsmith MenuItemActionableProps */
+export type MenuItemActionableProps = {
+    /** Whether the item is checked.
+     * @bindable
+     */
+    checked?: boolean;
+    /** The value reported to the menu when the item is checked. Falls back to the id of the item.
+     * @default id
+     */
+    value?: string;
+    /** The group of items this one belongs to. Falls back to the id of the item.
+     * @default id
+     */
+    name?: string;
+} & Omit<MenuItemProps, 'href'> & ComponentProps<typeof Button<'div'>>;

package/dist/components/menu/types.js

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

package/dist/components/number-box/docs/llms.md

@@ -0,0 +1,37 @@
+# Number Box
+
+The NumberBox component allows users to input numeric values with specified constraints such as minimum, maximum, and step values.
+
+## Usage
+
+```svelte
+<script>
+	import { NumberBox } from 'fluentui-svelte';
+</script>
+
+<NumberBox value={0} min={0} max={100} step={1} />
+```
+
+## 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
+
+### Variant
+
+The variant prop determines the visual style of the NumberBox.
+
+```svelte
+<NumberBox hideActionButtons min={0} max={100} step={1} />
+<NumberBox hideActionButtons min={0} max={100} step={1} variant="compact" />
+```
+
+## Component Props
+
+| Name          | Type                    | Description                                                   |
+| ------------- | ----------------------- | ------------------------------------------------------------- |
+| `value`       | `number`                | The current value of the NumberBox.                           |
+| `variant`     | `'inline' \| 'compact'` | The visual style of the NumberBox, e.g., 'inline', 'compact'. |
+| `ref`         | `HTMLInputElement`      | The DOM reference to the input element.                       |
+| TextBox Props |                         | Additional props inherited from the TextBox component.        |

package/dist/components/number-box/number-box.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { on } from 'svelte/events';
+	import { floating } from '../../internal/index.js';
+	import { offset, shift } from '@floating-ui/dom';
+	import { Flyout, TextBoxButton, TextBox } from '../../index.js';
+	import { ChevronUpFilled, ChevronDownFilled, ChevronUpDownFilled } from 'fluentui-icons-svelte';
+	import type { NumberBoxProps } from './types.js';
+
+	const ID = $props.id();
+
+	let {
+		id = 'input-' + ID,
+		name = id,
+		value = $bindable(),
+		variant = 'inline',
+		ref = $bindable(),
+		placeholder = '',
+		class: classes,
+		...attributes
+	}: NumberBoxProps = $props();
+
+	let openFlyout = $state(false);
+	let cleanEvent: () => void;
+
+	let handler = (e: Event) => {
+		if (!(e.target as HTMLElement).closest(`.${id}`)) {
+			openFlyout = false;
+			cleanEvent();
+		}
+	};
+
+	const compactToggler = () => {
+		openFlyout = true;
+		cleanEvent = on(document, 'click', handler);
+	};
+</script>
+
+<!-- @component
+  A number box component that displays a number input with an optional increase and decrease button.
+  - Usage:
+    ```tsx
+    <script>
+      import { NumberBox } from 'fluentui-svelte';
+    </script>
+
+    <NumberBox />
+    ```
+-->
+<TextBox class={['fs-number-box', classes]} type="number" {id} {name} {placeholder} bind:value bind:ref {...attributes}>
+	{#if variant === 'inline'}
+		<TextBoxButton aria-label="Increase Number" onclick={() => (value = value ? ++value : 1)}>
+			<ChevronUpFilled />
+		</TextBoxButton>
+		<TextBoxButton aria-label="Decrease Number" onclick={() => (value = value ? --value : -1)}>
+			<ChevronDownFilled />
+		</TextBoxButton>
+	{:else}
+		<TextBoxButton aria-label="Open" onclick={() => compactToggler()}>
+			<ChevronUpDownFilled />
+		</TextBoxButton>
+		{#if openFlyout}
+			<div
+				class="flyout-absolute"
+				{@attach ref
+					? floating(ref, {
+							placement: 'right',
+							middleware: [
+								shift({
+									crossAxis: true
+								}),
+								offset(({ rects }) => {
+									return -rects.reference.width / 1.4;
+								})
+							]
+						})
+					: undefined}
+			>
+				<Flyout>
+					<div class="flex-column">
+						<TextBoxButton aria-label="Increase Number" onclick={() => (value = value ? ++value : 1)}>
+							<ChevronUpFilled />
+						</TextBoxButton>
+						<TextBoxButton aria-label="Decrease Number" onclick={() => (value = value ? --value : -1)}>
+							<ChevronDownFilled />
+						</TextBoxButton>
+					</div>
+				</Flyout>
+			</div>
+		{/if}
+	{/if}
+</TextBox>
+
+<style>
+	.flyout-absolute {
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: 2;
+		& :global(.fs-flyout) {
+			padding: 8px;
+		}
+		& div.flex-column {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			& :global(button) {
+				margin: 0;
+				& :global(svg) {
+					width: 1.6rem;
+					height: 1.6rem;
+				}
+			}
+		}
+	}
+</style>

package/dist/components/number-box/number-box.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { NumberBoxProps } from './types.ts';
+/**
+ * A number box component that displays a number input with an optional increase and decrease button.
+ * - Usage:
+ *   ```tsx
+ *   <script>
+ *     import { NumberBox } from 'fluentui-svelte';
+ *   </script>
+ *
+ *   <NumberBox />
+ *   ```
+ */
+declare const NumberBox: import("svelte").Component<NumberBoxProps, {}, "ref" | "value">;
+type NumberBox = ReturnType<typeof NumberBox>;
+export default NumberBox;

package/dist/components/number-box/types.d.ts

@@ -0,0 +1,16 @@
+import type { TextBoxProps } from '../text-box/types.ts';
+/** @propsmith NumberBoxProps */
+export type NumberBoxProps = {
+    /** The current value of the input.
+     * @bindable
+     */
+    value?: number;
+    /** How the increment and decrement buttons are laid out.
+     *
+     * `inline`: the buttons sit inside the input, one next to the other.
+     *
+     * `compact`: the buttons are stacked in a flyout, opened from inside the input.
+     * @default 'inline'
+     */
+    variant?: 'inline' | 'compact';
+} & Omit<TextBoxProps, 'type'>;

package/dist/components/number-box/types.js

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