fluentui-svelte 0.1.0

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

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import type { ProgressRingProps } from './types.js';
+
+	let {
+		status,
+		size = 32,
+		class: classes,
+		hideRail,
+		min = 0,
+		max = 100,
+		role,
+		'aria-label': ariaLabel,
+		indeterminate,
+		value = $bindable(0),
+		ref = $bindable(),
+		railElement = $bindable(),
+		trackElement = $bindable(),
+		...attributes
+	}: ProgressRingProps = $props();
+
+	let circumference = $derived(
+		(trackElement && Number((Math.PI * (trackElement.r.baseVal.value * 2)).toFixed(2))) || 43.97
+	);
+
+	let checkValue = $derived(typeof value === 'number' ? Math.max(min, Math.min(max, value)) : undefined);
+
+	let _role = $derived(role ?? (!indeterminate ? 'progressbar' : 'status'));
+</script>
+
+<!-- @component
+  A progress ring component that displays a circular progress indicator.
+  - Usage:
+    ```tsx
+    <script>
+      import { ProgressRing } from 'fluentui-svelte';
+    </script>
+
+    <ProgressRing value={50} size={32} rail />
+    ```
+-->
+<svg
+	bind:this={ref}
+	tabindex="-1"
+	class={['progress-ring', status && `status-${status}`, classes, { indeterminate }]}
+	width={size}
+	height={size}
+	viewBox="0 0 16 16"
+	role={_role}
+	aria-label={ariaLabel ?? (indeterminate ? (!status ? 'Loading' : `Status: ${status}`) : `Progress: ${checkValue}%`)}
+	aria-valuemin={!indeterminate ? min : undefined}
+	aria-valuemax={!indeterminate ? max : undefined}
+	aria-valuenow={!indeterminate ? checkValue : undefined}
+	style="--ring-circumference: {circumference}px;"
+	{...attributes}
+>
+	{#if !hideRail}
+		<circle
+			bind:this={railElement}
+			class="progress-ring-rail"
+			cx="50%"
+			cy="50%"
+			r="7"
+			stroke-dasharray={circumference}
+			stroke-dashoffset={0 * circumference}
+		/>
+	{/if}
+	<circle
+		bind:this={trackElement}
+		class="progress-ring-track"
+		cx="50%"
+		cy="50%"
+		r="7"
+		stroke-dasharray={circumference}
+		stroke-dashoffset={((max - (checkValue || 0)) / (max - min)) * circumference}
+	/>
+</svg>
+
+<style>
+	@keyframes progress-ring-indeterminate {
+		0% {
+			stroke-dasharray: 0.01px var(--ring-circumference);
+			transform: rotate(0);
+		}
+		50% {
+			stroke-dasharray: calc(var(--ring-circumference) / 2) calc(var(--ring-circumference) / 2);
+			transform: rotate(450deg);
+		}
+		100% {
+			stroke-dasharray: 0.01px var(--ring-circumference);
+			transform: rotate(1080deg);
+		}
+	}
+	@keyframes fs-pulse {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.progress-ring {
+		outline: none;
+		min-inline-size: 16px;
+		min-block-size: 16px;
+		z-index: 0;
+
+		& circle {
+			transform: rotate(-90deg);
+			transform-origin: 50% 50%;
+			fill: none;
+			stroke: var(--fs-accent-fill-default);
+			stroke-width: 1.5;
+			stroke-linecap: round;
+			stroke-dasharray: var(--ring-circumference);
+			&.progress-ring-rail {
+				stroke: var(--fs-accent-fill-disabled);
+			}
+		}
+		&.indeterminate circle:not(.progress-ring-rail) {
+			animation: progress-ring-indeterminate 2s linear infinite;
+		}
+		&.status-paused {
+			& .progress-ring-track {
+				stroke: var(--fs-system-caution);
+			}
+		}
+		&.status-error {
+			& .progress-ring-track {
+				stroke: var(--fs-system-critical);
+			}
+		}
+	}
+	/*
+	 * 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-ring.indeterminate circle.progress-ring-track {
+		animation: fs-pulse 3s infinite linear;
+		stroke-dasharray: 0px;
+	}
+</style>

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

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

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

@@ -0,0 +1,42 @@
+import type { SVGAttributes } from 'svelte/elements';
+import type { ProgressStatus } from '../../types/index.js';
+/** @propsmith ProgressRingProps */
+export type ProgressRingProps = {
+    /** The current value of the progress ring.
+     * @default 0
+     * @bindable
+     */
+    value?: number;
+    /** The minimum value of the progress ring.
+     * @default 0
+     */
+    min?: number;
+    /** The maximum value of the progress ring.
+     * @default 100
+     */
+    max?: number;
+    /** Spins the ring continuously instead of reporting a value. */
+    indeterminate?: boolean;
+    /** Whether to hide the rail element. */
+    hideRail?: boolean;
+    /** The size of the progress ring in pixels.
+     * @default 32
+     */
+    size?: number;
+    /** The DOM reference of the progress ring element.
+     * @bindable
+     */
+    ref?: SVGElement;
+    /** The DOM reference of the rail element.
+     * @bindable
+     */
+    railElement?: SVGCircleElement;
+    /** The DOM reference of the track element.
+     * @bindable
+     */
+    trackElement?: SVGCircleElement;
+    /** The current status of the progress ring, which recolors the track. */
+    status?: ProgressStatus;
+    /** The class to apply to the progress ring. */
+    class?: string;
+} & SVGAttributes<SVGElement>;

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

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

package/dist/components/radio-button/docs/llms.md

@@ -0,0 +1,64 @@
+# Radio Button
+
+The Radio Button component lets users choose a single option from a set of mutually exclusive choices.
+
+## Usage
+
+```svelte
+<script>
+	import { RadioButton } from 'fluentui-svelte';
+</script>
+
+<RadioButton label="Option 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 section below.
+
+## Examples
+
+### Grouping
+
+While you can use name="inputName" to group items and have only one checked, you can use bind:group={someVariable} to update that variable with the value of the selected input and inspect it in your console. (Read More: https://svelte.dev/tutorial/svelte/group-inputs)
+
+```svelte
+<script>
+	import { RadioButton } from 'fluentui-svelte';
+	let groupValue = $state('');
+	$inspect(groupValue);
+</script>
+
+<RadioButton label="Option 1" name="group1" value="$1" bind:group={groupValue} />
+<RadioButton label="Option 2" name="group1" value="$2" bind:group={groupValue} />
+<RadioButton label="Option 3" name="group1" value="$3" disabled bind:group={groupValue} />
+```
+
+### Disabled
+
+The disabled prop can be used to disable a radio button, preventing user interaction.
+
+```svelte
+<RadioButton label="Enabled Option" value="D" />
+<RadioButton label="Disabled Option" value="E" disabled />
+```
+
+### Checked
+
+The checked prop allows you to control the checked state of the radio button. This is useful for controlled components.
+
+```svelte
+<RadioButton label="Checked Option" value="F" checked />
+<RadioButton label="Unchecked Option" value="G" />
+```
+
+## Component Props
+
+| Name               | Type               | Description                                                                          |
+| ------------------ | ------------------ | ------------------------------------------------------------------------------------ |
+| `label`            | `string`           | The label text for the radio button.                                                 |
+| `group`            | `unknown`          | Bindable value representing a group of radio inputs that the input will be bound to. |
+| `checked`          | `boolean`          | Indicates whether the radio button is checked.                                       |
+| `disabled`         | `boolean`          | Indicates whether the radio button is disabled.                                      |
+| `ref`              | `HTMLInputElement` | Gets the DOM reference of the radio button element.                                  |
+| Element Attributes |                    | All standard HTML attributes for input elements can be applied.                      |

package/dist/components/radio-button/radio-button.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import { PREFIX } from '../../internal/constants.js';
+	import type { RadioButtonProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'radio-button';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	let {
+		ref = $bindable(),
+		group = $bindable(undefined),
+		id = ID,
+		label,
+		name = id,
+		value,
+		checked = $bindable(false),
+		labelAttributes,
+		...attributes
+	}: RadioButtonProps = $props();
+</script>
+
+<!-- 
+	@component
+
+  This file contains the Svelte component implementation of a Fluent UI Radio Button.
+  The Fluent UI Radio Button is a customizable input element that allows users to select one option from a set.
+
+	If a `name` attribute isn't passed, `id` attribute will be used instead. If `name` & `id` aren't passed, the component will generate one and apply it to both.
+
+  - Usage:
+  ```tsx
+  <script>
+    import { RadioButton } from 'fluentui-svelte';
+  </script>
+
+  <RadioButton label="Radio Button label" />
+  ```
+ -->
+
+<label class="fs-radio-button" {...labelAttributes}>
+	<input type="radio" {id} {name} {value} {checked} bind:this={ref} bind:group {...attributes} />
+	{#if label}
+		<span>{label}</span>
+	{/if}
+</label>
+
+<style>
+	.fs-radio-button {
+		display: flex;
+		align-items: center;
+		border-radius: 1.125rem;
+		& input {
+			appearance: none;
+			position: relative;
+			border: 1px solid var(--fs-control-strong-default);
+			border-radius: 50%;
+			width: 1.125rem;
+			height: 1.125rem;
+			cursor: pointer;
+			outline: none;
+			background-color: var(--fs-control-alt-fill-secondary);
+			&::after {
+				content: '';
+				position: absolute;
+				width: 0.5rem;
+				height: 0.5rem;
+				inset: 0.25rem;
+				border-radius: 50%;
+				background-color: var(--fs-text-on-accent-primary);
+				transition: transform var(--fs-fast-duration) var(--fs-point-to-point);
+				transform: scale(0);
+			}
+			&:hover {
+				border-color: var(--fs-control-strong-disabled);
+				background-color: var(--fs-control-alt-fill-tertiary);
+			}
+			&:active {
+				background-color: var(--fs-control-alt-fill-quaternary);
+				&::after {
+					transform: scale(0.7);
+				}
+			}
+			&:checked {
+				border-color: transparent;
+				background-color: var(--fs-accent-fill-default);
+				&::after {
+					transform: scale(1);
+				}
+				&:hover {
+					border-color: transparent;
+					background-color: var(--fs-accent-fill-secondary);
+					&::after {
+						transform: scale(1.3);
+					}
+				}
+				&:active {
+					background-color: var(--fs-accent-fill-tertiary);
+					&::after {
+						transform: scale(0.7);
+					}
+				}
+			}
+		}
+		&: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-disabled);
+				&::after {
+					background-color: var(--fs-text-on-accent-disabled);
+				}
+			}
+		}
+		&: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;
+			}
+		}
+		& span {
+			font-size: inherit;
+			color: inherit;
+			padding: 0px 0.75rem;
+		}
+	}
+</style>

package/dist/components/radio-button/radio-button.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from './types.ts';
+/**
+ * This file contains the Svelte component implementation of a Fluent UI Radio Button.
+ *  The Fluent UI Radio Button is a customizable input element that allows users to select one option from a set.
+ *
+ * If a `name` attribute isn't passed, `id` attribute will be used instead. If `name` & `id` aren't passed, the component will generate one and apply it to both.
+ *
+ *  - Usage:
+ *  ```tsx
+ *  <script>
+ *    import { RadioButton } from 'fluentui-svelte';
+ *  </script>
+ *
+ *  <RadioButton label="Radio Button label" />
+ *  ```
+ */
+declare const RadioButton: import("svelte").Component<RadioButtonProps, {}, "ref" | "group" | "checked">;
+type RadioButton = ReturnType<typeof RadioButton>;
+export default RadioButton;

package/dist/components/radio-button/types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { PolymorphicProps } from '../../types/index.js';
+/** @propsmith RadioButtonProps */
+export type RadioButtonProps = {
+    /** The label displayed next to the radio button. */
+    label?: string;
+    /** Bindable value representing a group of radio inputs that the input will be bound to.
+     * @bindable
+     */
+    group?: unknown;
+    /** Whether the radio button is selected.
+     * @default false
+     * @bindable
+     */
+    checked?: boolean;
+    /** The DOM reference of the radio button element.
+     * @bindable
+     */
+    ref?: HTMLInputElement;
+    /** The attributes to spread on the label wrapping the radio button.
+     * @type PolymorphicProps
+     */
+    labelAttributes?: PolymorphicProps<'label'>;
+} & HTMLInputAttributes;

package/dist/components/radio-button/types.js

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

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

@@ -0,0 +1,67 @@
+# Skeleton
+
+The skeleton component provides a placeholder for content that is loading, giving users a visual indication of where content will appear once it has loaded.
+
+## Usage
+
+The skeleton renders a placeholder element and sizes itself via standard HTML/CSS. Use the `style`, `class`, `width` and `height` attributes (or the `justify` prop) to control its dimensions.
+
+```svelte
+<script>
+	import { Skeleton } from 'fluentui-svelte';
+</script>
+
+<Skeleton style="width: 42px;" />
+<Skeleton justify style="height: 12px;" />
+```
+
+## 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
+
+### Animation
+
+The `animation` prop controls which type of animation is used for the skeleton. It can be set to `pulse` or `wave`. The default is `wave`.
+
+```svelte
+<Skeleton style="width: 72px;" animation="pulse" />
+```
+
+### Justify
+
+Control if the skeleton should take the full width of its container or not. The default is `false`, meaning it will only take the `1:1` ratio of its width.
+
+```svelte
+<Skeleton style="width: 120px;" justify />
+```
+
+### Shape
+
+The `shape` prop allows you to change the shape of the skeleton. It can be set to `circle`, `square`, or `rounded`. The default is `rounded`.
+
+```svelte
+<Skeleton style="width: 72px;" shape="circle" />
+<Skeleton style="width: 72px;" shape="rounded" />
+<Skeleton style="width: 72px;" shape="square" />
+```
+
+### As
+
+The `as` prop lets you choose the HTML tag used to render the skeleton. Possible values: `'div'` (default) or `'span'`.
+
+```svelte
+<Skeleton as="span" style="width: 72px;" />
+```
+
+## Component Props
+
+| Name               | Type                                | Description                                                                                                               |
+| ------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `as`               | `'div' \| 'span'`                   | The HTML element used to render the skeleton. Default: `'div'`.                                                           |
+| `animation`        | `'wave' \| 'pulse'`                 | The animation type for the skeleton. Default: `'wave'`.                                                                   |
+| `shape`            | `'circle' \| 'rounded' \| 'square'` | The shape of the skeleton. Default: `'rounded'`.                                                                          |
+| `justify`          | `boolean`                           | If `true` the skeleton fills the full width of its container; otherwise it keeps a `1:1` aspect ratio based on its width. |
+| `element`          | `HTMLElement`                       | The DOM reference of the skeleton element (`bind:element`).                                                               |
+| Element Attributes |                                     | All other attributes are passed to the root element of the skeleton.                                                      |

package/dist/components/skeleton/skeleton.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" generics="Tag extends SkeletonTags = 'div'">
+	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import type { SkeletonProps, SkeletonTags } from './types.js';
+
+	let {
+		as = 'div' as Tag,
+		animation = 'wave',
+		shape = 'rounded',
+		justify,
+		class: classes,
+		ref = $bindable(),
+		...attributes
+	}: SkeletonProps<Tag> = $props();
+
+	let reducedMotion = getReducedMotion();
+
+	$effect.pre(() => {
+		animation = reducedMotion() ? 'pulse' : animation;
+	});
+</script>
+
+<!-- 
+	@component
+	This is a implementation of Fluent UI Skeleton component. The skeleton supports two visual animations (wave & pulse) and three shapes (circle, square & rounded).
+  
+  - Usage:
+    ```tsx
+    <script>
+      import { Skeleton } from 'fluentui-svelte';
+    </script>
+
+    <Skeleton />
+    <Skeleton animation="pulse" shape="circle" height="42px" />
+    <Skeleton animation="wave" shape="square" height="24px" />
+    ```
+ -->
+<svelte:element
+	this={as}
+	bind:this={ref}
+	aria-hidden="true"
+	class={['fs-skeleton', animation, shape, classes, { justify }]}
+	{...attributes}
+></svelte:element>
+
+<style>
+	.fs-skeleton {
+		background: var(--fs-system-neutral-bg);
+		overflow: hidden;
+		position: relative;
+		&.justify {
+			width: 100%;
+		}
+		&:not(.justify) {
+			aspect-ratio: 1;
+		}
+		&.circle {
+			border-radius: 9999px;
+		}
+		&.square {
+			border-radius: 0;
+		}
+		&.rounded {
+			border-radius: 4px;
+		}
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 100;
+		}
+		&.wave::after {
+			background-image: linear-gradient(
+				90deg,
+				transparent 20%,
+				color-mix(in srgb, var(--fs-control-on-image-fill-default), transparent 40%) 50%,
+				transparent 80%
+			);
+			transform: translateX(-100%);
+			animation: fs-skeleton-wave var(--fs-extra-slow-duration) infinite var(--fs-point-to-point);
+		}
+		&.pulse::after {
+			background: var(--fs-system-neutral-bg);
+			animation: fs-skeleton-pulse 2s infinite var(--fs-point-to-point);
+		}
+	}
+
+	@keyframes fs-skeleton-wave {
+		100% {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes fs-skeleton-pulse {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { SkeletonProps, SkeletonTags } from './types.ts';
+declare function $$render<Tag extends SkeletonTags = 'div'>(): {
+    props: SkeletonProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends SkeletonTags = '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 SkeletonTags = '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 SkeletonTags = 'div'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * This is a implementation of Fluent UI Skeleton component. The skeleton supports two visual animations (wave & pulse) and three shapes (circle, square & rounded).
+ *
+ * - Usage:
+ *   ```tsx
+ *   <script>
+ *     import { Skeleton } from 'fluentui-svelte';
+ *   </script>
+ *
+ *   <Skeleton />
+ *   <Skeleton animation="pulse" shape="circle" height="42px" />
+ *   <Skeleton animation="wave" shape="square" height="24px" />
+ *   ```
+ */
+declare const Skeleton: $$IsomorphicComponent;
+type Skeleton<Tag extends SkeletonTags = 'div'> = InstanceType<typeof Skeleton<Tag>>;
+export default Skeleton;

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

@@ -0,0 +1,24 @@
+import type { PolymorphicProps, Shapes } from '../../types/index.js';
+export type SkeletonTags = 'div' | 'span';
+/** @propsmith SkeletonProps */
+export type SkeletonProps<Tag extends SkeletonTags = 'div'> = {
+    /** The HTML element to render the skeleton as.
+     * @type 'div' | 'span'
+     * @default 'div'
+     */
+    as?: Tag;
+    /** The animation played while the content is loading.
+     * @default 'wave'
+     */
+    animation?: 'wave' | 'pulse';
+    /** The skeleton can have a circular, rounded or square shape.
+     * @default 'rounded'
+     */
+    shape?: Shapes;
+    /** The skeleton is justified to the full width of the container. */
+    justify?: boolean;
+    /** The DOM reference of the skeleton element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+} & PolymorphicProps<Tag>;

package/dist/components/skeleton/types.js

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