fluentui-svelte 0.1.0

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

@@ -0,0 +1,107 @@
+# Persona
+
+A Persona is a visual representation of a person that combines an avatar, presence status, and up to three lines of descriptive text.
+
+## Usage
+
+```svelte
+<script>
+	import { Persona } from 'fluentui-svelte';
+</script>
+
+<Persona
+	name="John Doe"
+	primaryText="Software Engineer"
+	secondaryText="Intranet"
+	tertiaryText="Team A"
+	presence={{ status: 'available' }}
+	avatar={{ color: 'colorful' }}
+/>
+```
+
+## Component API
+
+### Text Align
+
+A Persona supports three text alignments, with 'left' as the default position.
+
+```svelte
+<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
+<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="center" />
+<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textAlign="right" />
+```
+
+### Text Position
+
+A Persona supports four text positions: 'top', 'bottom', 'left', and 'right'. The default position is 'right'.
+
+```svelte
+<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" />
+<Persona
+	name="Alex Johnson"
+	avatar={{ initials: 'AJ' }}
+	secondaryText="Available"
+	textPosition="bottom"
+	textAlign="center"
+/>
+<Persona name="Alex Johnson" avatar={{ initials: 'AJ' }} secondaryText="Available" textPosition="left" />
+<Persona
+	name="Alex Johnson"
+	avatar={{ initials: 'AJ' }}
+	secondaryText="Available"
+	textPosition="top"
+	textAlign="center"
+/>
+```
+
+### Size
+
+A Persona supports custom sizes, with a default of 42px. You can set the size using the size prop. This applies to both the avatar or presence-only display and all text.
+
+```svelte
+<Persona name="John Doe" size={24} />
+<Persona name="John Doe" size={32} />
+<Persona name="John Doe" size={56} />
+```
+
+### Avatar
+
+A Persona wraps an avatar inside it, which can be customized with all the props available to the Avatar component.
+
+```svelte
+<Persona name="John Doe" avatar={{ color: 'attention' }} />
+<Persona name="John Doe" avatar={{ color: 'colorful', idForColor: '' }} />
+<Persona name="John Doe" avatar={{ image: { src: 'https://placehold.co/96x96/jpeg', alt: 'Placeholder Image' } }} />
+```
+
+### Presence
+
+A Persona can display presence information, such as online status or availability. This is controlled through the presence prop, which accepts an object with a status key.
+
+```svelte
+<Persona name="John Doe" presence={{ status: 'available' }} />
+<Persona name="John Doe" presence={{ status: 'away' }} />
+<Persona name="John Doe" presence={{ status: 'busy' }} />
+<Persona name="John Doe" presence={{ status: 'do-not-disturb' }} />
+<Persona name="John Doe" presence={{ status: 'offline' }} />
+<Persona name="John Doe" presence={{ status: 'out-of-office' }} />
+<Persona name="John Doe" presence={{ status: 'blocked' }} />
+<Persona name="John Doe" presence={{ status: 'unknown' }} />
+```
+
+## Component Props
+
+| Name            | Type             | Description                                                                                                                                                                  |
+| --------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`          | `string`         | The full name of the person.                                                                                                                                                 |
+| `primaryText`   | `string`         | Main text, usually the person's role or title.                                                                                                                               |
+| `secondaryText` | `string`         | Secondary text, for example location or status.                                                                                                                              |
+| `tertiaryText`  | `string`         | Tertiary text, for example team or department.                                                                                                                               |
+| `size`          | `number`         | Size in pixels for the avatar and text.                                                                                                                                      |
+| `textAlign`     | `string`         | Alignment of the text. Possible values are 'left', 'center', and 'right'.                                                                                                    |
+| `textPosition`  | `string`         | Position of the text relative to the avatar. Possible values are 'top', 'bottom', 'left', and 'right'.                                                                       |
+| `avatarAlign`   | `string`         | Cross-axis alignment of the avatar relative to the text. Possible values are 'start', 'center', and 'end'.                                                                   |
+| `avatar`        | `object`         | Avatar props object. See the Avatar component for details.                                                                                                                   |
+| `presence`      | `object`         | Presence object, for example { status: 'available' }. Status values are 'available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'blocked', and 'unknown'. |
+| `presenceOnly`  | `boolean`        | Shows only the presence indicator, with no avatar or text.                                                                                                                   |
+| `element`       | `HTMLDivElement` | The DOM reference of the persona root element.                                                                                                                               |

package/dist/components/persona/persona.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { Avatar, BadgeIcon } from '../../index.js';
+	import type { PersonaProps } from './types.js';
+
+	let {
+		name,
+		size = 42,
+		primaryText,
+		tertiaryText,
+		secondaryText,
+		textAlign = 'left',
+		textPosition: dir = 'right',
+		avatarAlign = 'center',
+		element = $bindable(),
+		avatar,
+		presence,
+		presenceOnly,
+		...attributes
+	}: PersonaProps = $props();
+
+	const position = {
+		top: 'column-reverse',
+		bottom: 'column',
+		left: 'row-reverse',
+		right: 'row'
+	};
+</script>
+
+<div
+	bind:this={element}
+	class="persona"
+	style="--p-size: {size}px; --avatar-align: {avatarAlign}; flex-direction: {position[dir]}; text-align: {textAlign};"
+	{...attributes}
+>
+	{#if presenceOnly && presence?.status}
+		<BadgeIcon {size} icon={presence?.icon || undefined} status={presence.status} outOfOffice={presence?.outOfOffice} />
+	{:else}
+		<Avatar {name} {size} {...avatar} badge={presence} />
+	{/if}
+	<div class="persona-data">
+		<p class="persona-name">{name}</p>
+		{#if primaryText}
+			<p>{primaryText}</p>
+		{/if}
+		{#if secondaryText}
+			<p>{secondaryText}</p>
+		{/if}
+		{#if tertiaryText}
+			<p>{tertiaryText}</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.persona {
+		display: flex;
+		align-items: var(--avatar-align);
+		gap: 0.8rem;
+		min-width: max-content;
+		& .persona-data {
+			display: flex;
+			flex-direction: column;
+			gap: 0.2rem;
+			text-align: var(--p-align);
+			line-height: 1em;
+			& .persona-name {
+				font-size: calc(var(--p-size) / 3.2);
+				font-weight: 500;
+				color: var(--fs-text-primary);
+				line-height: 1em;
+			}
+			& p {
+				font-size: calc(var(--p-size) / 4.2);
+				color: var(--fs-text-secondary);
+				line-height: 1em;
+			}
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,42 @@
+import type { AvatarProps } from '../avatar/type.ts';
+/** @propsmith PersonaProps */
+export type PersonaProps = {
+    /** The name of the person or entity represented by this Persona. It is also used by the avatar for its initials. */
+    name: string;
+    /** The size of the avatar in pixels. The text scales with it.
+     * @default 42
+     */
+    size?: number;
+    /** Text to display below the name. */
+    primaryText?: string;
+    /** Text to display below the primary text. */
+    secondaryText?: string;
+    /** Text to display below the secondary text. */
+    tertiaryText?: string;
+    /** How the text block is aligned.
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /** Where the text block sits relative to the avatar.
+     * @default 'right'
+     */
+    textPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Renders the presence badge on its own, without the avatar behind it. */
+    presenceOnly?: boolean;
+    /** How the avatar is aligned against the text block.
+     * @default 'center'
+     */
+    avatarAlign?: 'start' | 'center' | 'end';
+    /** The DOM reference of the persona element.
+     * @bindable
+     */
+    element?: HTMLDivElement;
+    /** The props to spread on the avatar.
+     * @type AvatarProps
+     */
+    avatar?: AvatarProps;
+    /** The presence badge to display as a status indicator.
+     * @type BadgePresence
+     */
+    presence?: AvatarProps['badge'];
+};

package/dist/components/persona/types.js

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

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

@@ -0,0 +1,67 @@
+# Progress Bar
+
+A progress bar is a horizontal indicator that communicates the progress of an operation. Set `value` for determinate progress, or omit it for an indeterminate animation when the duration is unknown.
+
+## Usage
+
+```svelte
+<script>
+	import { ProgressBar } from 'fluentui-svelte';
+</script>
+
+<ProgressBar value={50} />
+```
+
+## Component API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props in the Component Props section below.
+
+## Examples
+
+### Value
+
+The value prop sets the current progress value of the bar. It should be a number between 0 and 100.
+
+```svelte
+<ProgressBar value={30} />
+<ProgressBar value={50} />
+<ProgressBar value={70} />
+```
+
+### Indeterminate
+
+If you do not set the value prop, the progress bar enters an indeterminate state, meaning it does not have a specific value. This is useful for operations where the duration is unknown.
+
+```svelte
+<ProgressBar indeterminate />
+```
+
+### Hide Rail
+
+The hideRail prop can be used to hide the progress bar rail.
+
+```svelte
+<ProgressBar value={50} hideRail />
+```
+
+### Status
+
+The status prop allows you to set the status of the progress bar to 'paused' or 'error'. This changes the color of the progress bar to indicate different states.
+
+```svelte
+<ProgressBar value={50} status="paused" />
+<ProgressBar value={50} status="error" />
+```
+
+## Component Props
+
+| Name                    | Type                           | Description                                               |
+| ----------------------- | ------------------------------ | --------------------------------------------------------- |
+| `value`                 | bindable `number \| undefined` | The current progress value of the bar, between 0 and 100. |
+| `indeterminate`         | `boolean`                      | If true, the progress bar enters an indeterminate state.  |
+| `hideRail`              | `boolean`                      | If true, the progress bar rail is hidden.                 |
+| `status`                | `'paused' \| 'error'`          | The current status of the progress bar.                   |
+| `element`               | bindable `SVGElement`          | The DOM reference of the progress bar element.            |
+| `railElement`           | bindable `SVGRectElement`      | The DOM reference of the rail element.                    |
+| `trackElement`          | bindable `SVGRectElement`      | The DOM reference of the track element.                   |
+| `secondaryTrackElement` | bindable `SVGRectElement`      | The DOM reference of the secondary track element.         |

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

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { ProgressBarProps } from './types.js';
+
+	let {
+		status,
+		class: classes,
+		hideRail,
+		'aria-label': ariaLabel,
+		min = 0,
+		max = 100,
+		value = $bindable(),
+		ref = $bindable(),
+		railElement = $bindable(),
+		trackElement = $bindable(),
+		secondaryTrackElement = $bindable(),
+		...attributes
+	}: ProgressBarProps = $props();
+
+	let checkValue = $derived(typeof value === 'number' ? Math.max(min, Math.min(max, value)) : undefined);
+</script>
+
+<!-- @component
+  A progress bar component that displays a horizontal progress indicator.
+  - Usage:
+    ```tsx
+    <script>
+      import { ProgressBar } from 'fluentui-svelte';
+    </script>
+
+    <ProgressBar value={50} />
+    ```
+-->
+<svg
+	class={['fs-progress-bar', status && `status-${status}`, classes, typeof value !== 'number' && 'indeterminate']}
+	role="progressbar"
+	aria-label={ariaLabel ??
+		(typeof value !== 'number' ? (!status ? 'Loading' : `Status: ${status}`) : `Progress: ${checkValue}%`)}
+	width="100%"
+	height="3"
+	aria-valuemin={min}
+	aria-valuemax={max}
+	aria-valuenow={checkValue}
+	bind:this={ref}
+	{...attributes}
+>
+	{#if !hideRail}
+		<rect bind:this={railElement} height="1" rx="0.5" y="1" width="100%" class="progress-bar-rail" />
+	{/if}
+	{#if typeof value !== 'number'}
+		<rect bind:this={secondaryTrackElement} height="3" ry="3" class="progress-bar-track progress-bar-secondary" />
+	{/if}
+	<rect
+		bind:this={trackElement}
+		width={typeof value === 'number' ? `${checkValue}%` : undefined}
+		height="3"
+		rx="1.5"
+		class="progress-bar-track"
+	/>
+</svg>
+
+<style>
+	.fs-progress-bar {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 3px;
+		& .progress-bar-track {
+			height: 3px;
+			transition: width var(--fs-slow-duration) var(--fs-point-to-point);
+			fill: var(--fs-accent-fill-default);
+		}
+		& .progress-bar-rail {
+			fill: var(--fs-control-stroke-default);
+			width: 100%;
+			height: 1px;
+		}
+		&.indeterminate {
+			& .progress-bar-track {
+				animation-timing-function: ease-in-out;
+				&:nth-last-child(2) {
+					width: 30%;
+					animation: 2.5s infinite indeterminate-1;
+				}
+				&:last-child {
+					width: 50%;
+					animation: 2.5s infinite indeterminate-2;
+				}
+			}
+		}
+		&.status-paused {
+			.progress-bar-track {
+				fill: var(--fs-system-caution);
+			}
+		}
+		&.status-error {
+			.progress-bar-track {
+				fill: var(--fs-system-critical);
+			}
+		}
+		&.status-error.indeterminate,
+		&.status-paused.indeterminate {
+			.progress-bar-track {
+				animation: none;
+				width: 100%;
+			}
+		}
+	}
+	@keyframes indeterminate-1 {
+		0% {
+			opacity: 1;
+			transform: translateX(-100%);
+		}
+		75% {
+			opacity: 1;
+			transform: translateX(120%);
+		}
+		76% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 0;
+			transform: translateX(180%);
+		}
+	}
+	@keyframes indeterminate-2 {
+		0% {
+			opacity: 0;
+			transform: translateX(-100%);
+		}
+		37.49% {
+			opacity: 0;
+		}
+		37.5% {
+			opacity: 1;
+			transform: translateX(-50%);
+		}
+		100% {
+			transform: translateX(120%);
+			opacity: 1;
+		}
+	}
+	@keyframes fs-pulse {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	/*
+	 * Reduced motion swaps the spin for a pulse instead of shortening it — a 0ms spin is simply
+	 * invisible.
+	 */
+	:global(:root[data-fs-reduced-motion='true']) {
+		& .progress-bar-secondary {
+			display: none;
+		}
+		& .fs-progress-bar.indeterminate .progress-bar-track {
+			animation: fs-pulse 3s infinite linear;
+			stroke-dasharray: 0px;
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+import type { ProgressBarProps } from './types.ts';
+/**
+ * A progress bar component that displays a horizontal progress indicator.
+ * - Usage:
+ *   ```tsx
+ *   <script>
+ *     import { ProgressBar } from 'fluentui-svelte';
+ *   </script>
+ *
+ *   <ProgressBar value={50} />
+ *   ```
+ */
+declare const ProgressBar: import("svelte").Component<ProgressBarProps, {}, "ref" | "value" | "railElement" | "trackElement" | "secondaryTrackElement">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

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

@@ -0,0 +1,39 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { ProgressStatus } from '../../types/index.js';
+/** @propsmith ProgressBarProps */
+export type ProgressBarProps = {
+    /** The current value of the progress bar. Leave it unset for an indeterminate bar.
+     * @bindable
+     */
+    value?: number | null;
+    /** The class to apply to the progress bar. */
+    class?: string;
+    /** The DOM reference of the progress bar element.
+     * @bindable
+     */
+    ref?: SVGElement;
+    /** The minimum value of the progress bar.
+     * @default 0
+     */
+    min?: number;
+    /** The maximum value of the progress bar.
+     * @default 100
+     */
+    max?: number;
+    /** Whether to hide the rail element. */
+    hideRail?: boolean;
+    /** The DOM reference of the rail element.
+     * @bindable
+     */
+    railElement?: SVGRectElement;
+    /** The DOM reference of the secondary track element, used while indeterminate.
+     * @bindable
+     */
+    secondaryTrackElement?: SVGRectElement;
+    /** The DOM reference of the track element.
+     * @bindable
+     */
+    trackElement?: SVGRectElement;
+    /** The current status of the progress bar, which recolors the track. */
+    status?: ProgressStatus;
+} & SVGAttributes<SVGElement>;

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

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

package/dist/components/progress-ring/docs/llms.md

@@ -0,0 +1,76 @@
+# Progress Ring
+
+A circular progress indicator that shows determinate or indeterminate progress, with paused and error states.
+
+## Usage
+
+```svelte
+<script>
+	import { ProgressRing } from 'fluentui-svelte';
+</script>
+
+<ProgressRing value={50} />
+```
+
+## 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
+
+### Value
+
+The value prop determines the percentage of the progress ring that is filled. It should be a number between 0 and 100.
+
+```svelte
+<ProgressRing value={0} />
+<ProgressRing value={25} />
+<ProgressRing value={50} />
+<ProgressRing value={75} />
+<ProgressRing value={100} />
+```
+
+### Indeterminate
+
+The indeterminate prop allows the progress ring to display an indeterminate state, which is useful when the progress cannot be determined.
+
+```svelte
+<ProgressRing indeterminate />
+<ProgressRing indeterminate status="paused" />
+<ProgressRing indeterminate status="error" />
+```
+
+### Hide Rail
+
+The hideRail prop allows the progress ring to hide the rail, which is a background track for the progress indicator.
+
+```svelte
+<ProgressRing value={50} hideRail />
+<ProgressRing value={75} hideRail />
+<ProgressRing value={100} hideRail />
+```
+
+### Status
+
+The status prop allows you to set the status of the progress ring for visual feedback. It accepts values such as 'paused' or 'error'.
+
+```svelte
+<ProgressRing value={40} />
+<ProgressRing value={50} status="paused" />
+<ProgressRing value={75} status="error" />
+```
+
+## Component Props
+
+| Name            | Type                  | Description                                                       |
+| --------------- | --------------------- | ----------------------------------------------------------------- |
+| `value`         | `number`              | The percentage of the progress ring that is filled.               |
+| `min`           | `number`              | The minimum value of the progress ring. Default is 0.             |
+| `max`           | `number`              | The maximum value of the progress ring. Default is 100.           |
+| `size`          | `number`              | The size of the progress ring in pixels. Default is 32.           |
+| `indeterminate` | `boolean`             | If true, the progress ring displays an indeterminate state.       |
+| `hideRail`      | `boolean`             | If true, the progress ring hides the rail.                        |
+| `status`        | `'paused' \| 'error'` | The status of the progress ring, for example 'paused' or 'error'. |
+| `ref`           | `SVGElement`          | The DOM reference to the SVG element.                             |
+| `railElement`   | `SVGCircleElement`    | The DOM reference to the rail element.                            |
+| `trackElement`  | `SVGCircleElement`    | The DOM reference to the track element.                           |