fluentui-svelte 0.1.0

package/dist/components/avatar/type.d.ts

@@ -0,0 +1,63 @@
+import type { Component, Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { BadgePresence } from '../badge/types.ts';
+import type { ActiveOrInactive, Colors, PolymorphicProps, Shapes } from '../../types/index.js';
+/** @propsmith AvatarProps */
+export type AvatarProps = {
+    /** The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+     *
+     * The name is used to determine the initials displayed when there is no image. It is also provided to accessibility tools.
+     * @default 'Avatar'
+     * */
+    name?: string;
+    /** The Avatar's image */
+    image?: {
+        src: string;
+    };
+    /** The DOM reference of the avatar element.
+     * @bindable
+     */
+    ref?: HTMLDivElement;
+    /** Size of the avatar in pixels.
+     * @default 48
+     */
+    size?: number;
+    /** The avatar can have a circular, rounded or square shape.
+     * @default 'circular'
+     */
+    shape?: Shapes;
+    /** The color when displaying either an icon or initials. For now it only supports system colors (plus colorful).
+     * @default 'attention'
+     */
+    color?: Colors | 'colorful';
+    /** Optional activity indicator
+     *
+     * `active`: the avatar will be decorated according to activeAppearance
+     *
+     * `inactive`: the avatar will be reduced in size and partially transparent
+     * */
+    active?: ActiveOrInactive;
+    /** The appearance when `active="active"`
+     * @default 'ring'
+     */
+    activeAppearance?: 'ring' | 'shadow' | 'ring-shadow';
+    /** Custom initials by default they will be derived from the `name` prop.
+     *
+     * The initials are displayed when there is no image.
+     * @default name
+     */
+    initials?: string;
+    /** Specify a string to be used instead of the name, to determine which color to use when color="colorful".*/
+    idForColor?: string;
+    /** Icon to be displayed when the avatar doesn't have an image or initials.
+     * @type Snippet | Component
+     */
+    icon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>>;
+    /** The badge to display as a status indicator. (you can use with a custom icon)
+     * @type BadgePresence
+     */
+    badge?: BadgePresence & {
+        /** Set a custom badge. */
+        icon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>>;
+    };
+} & PolymorphicProps<'div'>;

package/dist/components/avatar/type.js

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

package/dist/components/badge/badge-icon.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { pxToRem, capitalize, RenderSoC } from '../../internal/index.js';
+	import { colors, getIconBadge } from './utils.svelte.js';
+	import type { BadgeIconProps } from './types.js';
+
+	let {
+		size = 20,
+		status = 'available',
+		outOfOffice = false,
+		icon: Icon,
+		class: classes,
+		color,
+		style,
+		ref = $bindable(),
+		...attributes
+	}: BadgeIconProps = $props();
+
+	const arialabel = $derived(capitalize(status));
+</script>
+
+<!-- 
+  @component
+  Fluent UI Badge: You can use this component to paint icons that act as Badges. It does not support children. You can use any icon library you prefer.
+  
+  Note that a scaling property is applied since FluentUI icons have around 20% padding. If you are using another library that doesn't add padding to its icons, you can reverse this by applying:
+
+  ```css
+  :global(.fs-badge-icon){
+    transform: scale(1);
+  }
+  ```
+  
+  - Usage:
+  ```tsx
+  <script>
+    import { BadgeIcon } from 'fluentui-svelte';
+    import { HomeIcon } from 'some-icon-library';
+  </script>
+
+  <BadgeIcon size={24} shape="rounded" appearance="outline" color="success" icon={HomeIcon} />
+  ```
+ -->
+<span
+	bind:this={ref}
+	aria-label={arialabel}
+	role="img"
+	class={['fs-badge-icon', color || colors[status], classes]}
+	style="--badge-size: {pxToRem(size)}; {style}"
+	{...attributes}
+>
+	{#if Icon}
+		<RenderSoC
+			SoC={Icon}
+			args={[{ 'aria-hidden': true, width: size, height: size }]}
+			aria-hidden="true"
+			width="{size}px"
+			height="{size}px"
+		/>
+	{:else}
+		<RenderSoC SoC={getIconBadge(outOfOffice, status)} aria-hidden="true" width="{size}px" height="{size}px" />
+	{/if}
+</span>
+
+<style>
+	.fs-badge-icon {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0rem;
+		user-select: none;
+		border-radius: var(--badge-shapes);
+		color: var(--fs-text-on-accent-primary);
+		line-height: var(--fs-caption-line-height);
+		font-size: calc(var(--badge-size) / 2);
+		font-weight: 600;
+		width: var(--badge-size);
+		min-width: max-content;
+		height: var(--badge-size);
+		& :global(svg) {
+			max-width: calc(var(--badge-size));
+			/* FluentUI icons have about 20% padding, but to keep the positioning consistent, we use a scale transform.  */
+			transform: scale(1.25);
+			& :global(path) {
+				fill: currentColor;
+			}
+		}
+		&.information {
+			color: var(--fs-system-neutral-text);
+		}
+		&.attention {
+			color: var(--fs-accent-fill-default);
+		}
+		&.warning {
+			color: var(--fs-system-caution);
+		}
+		&.success {
+			color: var(--fs-system-success);
+		}
+		&.critical {
+			color: var(--fs-system-critical);
+		}
+	}
+</style>

package/dist/components/badge/badge-icon.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { BadgeIconProps } from './types.ts';
+/**
+ * Fluent UI Badge: You can use this component to paint icons that act as Badges. It does not support children. You can use any icon library you prefer.
+ *
+ * Note that a scaling property is applied since FluentUI icons have around 20% padding. If you are using another library that doesn't add padding to its icons, you can reverse this by applying:
+ *
+ * ```css
+ * :global(.fs-badge-icon){
+ *   transform: scale(1);
+ * }
+ * ```
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { BadgeIcon } from 'fluentui-svelte';
+ *   import { HomeIcon } from 'some-icon-library';
+ * </script>
+ *
+ * <BadgeIcon size={24} shape="rounded" appearance="outline" color="success" icon={HomeIcon} />
+ * ```
+ */
+declare const BadgeIcon: import("svelte").Component<BadgeIconProps, {}, "ref">;
+type BadgeIcon = ReturnType<typeof BadgeIcon>;
+export default BadgeIcon;

package/dist/components/badge/badge.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { pxToRem, RenderSoC } from '../../internal/index.js';
+	import { shapes } from './utils.svelte.js';
+	import type { BadgeProps } from './types.js';
+
+	let {
+		size = 20,
+		shape = 'circular',
+		appearance = 'filled',
+		color = 'information',
+		icon: Icon,
+		iconPosition = 'before',
+		children,
+		class: classes,
+		style,
+		ref = $bindable(),
+		...attributes
+	}: BadgeProps = $props();
+</script>
+
+<!-- 
+  @component
+  Fluent UI Badge: It displays an icon and/or text with various styles and colors.
+  The badge can have different shapes, sizes, and appearances.
+  It is used to highlight or label items with additional information.
+  - Usage:
+  ```tsx
+  <script>
+    import { Badge } from 'fluentui-svelte';
+    import { HomeIcon } from 'some-icon-library';
+  </script>
+
+  <Badge size={24} shape="rounded" appearance="outline" color="success" Icon={HomeIcon}>
+    Home
+  </Badge>
+  ```
+ -->
+<span
+	bind:this={ref}
+	class={['fs-badge', shape, appearance, color, classes]}
+	style="--badge-shapes: {shapes[shape]}; --badge-size: {pxToRem(size)}; {style}"
+	{...attributes}
+>
+	{#if iconPosition === 'after'}
+		{@render children?.()}
+		<RenderSoC SoC={Icon} />
+	{:else}
+		<RenderSoC SoC={Icon} />
+		{@render children?.()}
+	{/if}
+</span>
+
+<style>
+	.fs-badge {
+		display: inline-flex;
+		justify-content: center;
+		position: relative;
+		align-items: center;
+		padding: 0.25rem;
+		gap: 0.25rem;
+		user-select: none;
+		border-radius: var(--badge-shapes);
+		color: var(--fs-text-on-accent-primary);
+		line-height: var(--fs-caption-line-height);
+		font-size: calc(var(--badge-size) / 2);
+		font-weight: 600;
+		width: var(--badge-size);
+		min-width: max-content;
+		height: var(--badge-size);
+		& :global(svg) {
+			width: calc(var(--badge-size) / 1.5);
+			& :global(path) {
+				fill: var(--fs-text-on-accent-primary);
+			}
+		}
+		&.information {
+			background: var(--fs-system-neutral);
+			&:not(.filled) {
+				color: var(--fs-system-neutral);
+				& :global(path) {
+					fill: var(--fs-system-neutral);
+				}
+			}
+			&.tint {
+				background: var(--fs-system-neutral-bg);
+			}
+		}
+		&.attention {
+			background: var(--fs-system-attention);
+			&:not(.filled) {
+				color: var(--fs-accent-text-primary);
+				& :global(path) {
+					fill: var(--fs-accent-text-primary);
+				}
+			}
+			&.tint {
+				background: var(--fs-system-attention-bg);
+			}
+		}
+		&.warning {
+			background: var(--fs-system-caution);
+			&:not(.filled) {
+				color: var(--fs-system-caution-text);
+				& :global(path) {
+					fill: var(--fs-system-caution-text);
+				}
+			}
+			&.tint {
+				background: var(--fs-system-caution-bg);
+			}
+		}
+		&.success {
+			background: var(--fs-system-success);
+			&:not(.filled) {
+				color: var(--fs-system-success-text);
+				& :global(path) {
+					fill: var(--fs-system-success-text);
+				}
+			}
+			&.tint {
+				background: var(--fs-system-success-bg);
+			}
+		}
+		&.critical {
+			background: var(--fs-system-critical);
+			&:not(.filled) {
+				color: var(--fs-system-critical-text);
+				& :global(path) {
+					fill: var(--fs-system-critical-text);
+				}
+			}
+			&.tint {
+				background: var(--fs-system-critical-bg);
+			}
+		}
+		&.outline:after,
+		&.tint:after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			border-radius: var(--badge-shapes);
+		}
+		&.outline {
+			border: 1px solid currentColor;
+		}
+		&.tint {
+			border: 1px solid color-mix(in srgb, currentColor, transparent 50%);
+		}
+		&:not(.filled, .tint) {
+			background: transparent;
+		}
+		&.ghost :global(svg) {
+			width: auto;
+			max-width: calc(var(--badge-size) + 4px);
+			position: absolute;
+			top: -3px;
+			left: -3px;
+			& :global(path) {
+				fill: var(--fs-text-on-accent-primary);
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,20 @@
+import type { BadgeProps } from './types.ts';
+/**
+ * Fluent UI Badge: It displays an icon and/or text with various styles and colors.
+ * The badge can have different shapes, sizes, and appearances.
+ * It is used to highlight or label items with additional information.
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { Badge } from 'fluentui-svelte';
+ *   import { HomeIcon } from 'some-icon-library';
+ * </script>
+ *
+ * <Badge size={24} shape="rounded" appearance="outline" color="success" Icon={HomeIcon}>
+ *   Home
+ * </Badge>
+ * ```
+ */
+declare const Badge: import("svelte").Component<BadgeProps, {}, "ref">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

@@ -0,0 +1,133 @@
+# Badge
+
+A badge is a visual decoration for UI elements used to display notifications, status indicators, or counts. It supports different colors and styles to match various UI needs.
+
+## Usage
+
+```svelte
+<script>
+	import { Badge } from 'fluentui-svelte';
+</script>
+
+<Badge>36</Badge>
+```
+
+## Badge API
+
+A brief explanation of the props that really need explaining. You can see the rest of the props here.
+
+## Examples
+
+### Appearance
+
+Use the appearance prop to switch between filled, outline, tint, and ghost styles.
+
+```svelte
+<Badge size={46} color="attention">5</Badge>
+<Badge size={46} color="attention" appearance="outline">5</Badge>
+<Badge size={46} color="attention" appearance="tint">5</Badge>
+<Badge size={46} color="attention" appearance="ghost">5</Badge>
+```
+
+### Sizes
+
+Use the size prop to control the badge dimensions.
+
+```svelte
+<Badge size={42} color="attention">46</Badge>
+<Badge size={56} color="attention">56</Badge>
+<Badge size={64} color="attention">64</Badge>
+<Badge size={96} color="attention">96</Badge>
+```
+
+### Shapes
+
+Use the shape prop to render circular, rounded, or square badges.
+
+```svelte
+<Badge size={36} color="attention">36</Badge>
+<Badge size={36} color="attention" shape="rounded">36</Badge>
+<Badge size={36} color="attention" shape="square">36</Badge>
+```
+
+### Color
+
+Use the color prop to communicate different statuses and priorities.
+
+```svelte
+<Badge size={36} color="information">I</Badge>
+<Badge size={36} color="attention">A</Badge>
+<Badge size={36} color="warning">W</Badge>
+<Badge size={36} color="critical">C</Badge>
+<Badge size={36} color="success">S</Badge>
+```
+
+### Icon
+
+Use the icon prop to render an icon inside the badge. You can pass the icon as a snippet or as a component.
+
+> **Only icon?** If you use this component and notice padding between the wrapper and the icon, use the BadgeIcon component instead to avoid it.
+
+```svelte
+<script>
+	import { Badge } from 'fluentui-svelte';
+	import { AccessibilityRegular } from 'fluentui-icons-svelte';
+</script>
+
+<Badge color="attention" size={96} icon={AccessibilityRegular} />
+```
+
+## Badge Props
+
+| Name           | Type                     | Description                                                                                            |
+| -------------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `size`         | `number`                 | The size of the badge in pixels.                                                                       |
+| `shape`        | `string`                 | The shape of the badge. Possible values: 'circular', 'rounded', 'square'.                              |
+| `appearance`   | `string`                 | The appearance of the badge. Possible values: 'filled', 'outline', 'ghost', 'tint'.                    |
+| `iconPosition` | `string`                 | The position of the icon inside the badge. Possible values: 'before', 'after'.                         |
+| `color`        | `string`                 | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
+| `icon`         | `Snippet` \| `Component` | The icon to display inside the badge.                                                                  |
+| `ref`          | `HTMLSpanElement`        | The DOM reference of the badge element.                                                                |
+| `children`     | `Snippet`                | The children elements to render inside the badge.                                                      |
+
+## BadgeIcon API
+
+This component is useful when you want to show an icon in the form of a Badge somewhere in your app.
+
+### Usage
+
+```svelte
+<script>
+	import { BadgeIcon } from 'fluentui-svelte';
+	import { AccessibilityRegular } from 'fluentui-icons-svelte';
+</script>
+
+<BadgeIcon size={96} icon={AccessibilityRegular} />
+```
+
+One example is using this component inside Avatar:
+
+By default, Avatar uses an instance of BadgeIcon. As you can see, the first example on the left uses the Badge component, which adds unwanted padding inside it. In Avatar, you can use one of the predefined BadgeIcon options, or set a custom icon by passing it as a property. When you use the component option, the styles are applied automatically, but with #snippet you need to make sure you pass the arguments to the icon like this:
+
+```svelte
+<script>
+	import { Avatar, Badge } from 'fluentui-svelte';
+	import { AccessibilityRegular } from 'fluentui-icons-svelte';
+</script>
+
+<!-- args: [size: number, shape: string] -->
+{#snippet customBadge(args)}
+	<Badge color="attention" size={args.width} aria-hidden={args['aria-hidden']} icon={AccessibilityRegular} />
+{/snippet}
+
+<Avatar active="active" size={96} name="FluentUI Svelte" badge={{ icon: customBadge }} />
+```
+
+### BadgeIcon Props
+
+| Name    | Type                     | Description                                                                                            |
+| ------- | ------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `size`  | `number`                 | The size of the badge in pixels.                                                                       |
+| `color` | `string`                 | The color of the badge. Possible values: 'information', 'attention', 'warning', 'success', 'critical'. |
+| `icon`  | `Snippet` \| `Component` | The icon to display inside the badge.                                                                  |
+| `ref`   | `HTMLSpanElement`        | The DOM reference of the badge element.                                                                |

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

@@ -0,0 +1,70 @@
+import type { Component, Snippet } from 'svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { BeforeOrAfter, Colors, PolymorphicProps, Shapes, Statuses, Variants } from '../../types/index.js';
+/** @propsmith BadgeProps */
+export type BadgeProps = {
+    /** The size of the badge in pixels.
+     * @default 20
+     */
+    size?: number;
+    /** The badge can have a circular, rounded or square shape.
+     * @default 'circular'
+     */
+    shape?: Shapes;
+    /** The badge can have its background and border styled for greater emphasis or to be subtle.
+     * @default 'filled'
+     */
+    appearance?: Variants;
+    /** The position of the icon relative to the badge content.
+     * @default 'before'
+     */
+    iconPosition?: BeforeOrAfter;
+    /** The color of the badge. For now it only supports system colors.
+     * @default 'information'
+     */
+    color?: Colors;
+    /** Icon to render inside the badge.
+     * @type Snippet | Component
+     */
+    icon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>>;
+    /** The DOM reference of the badge element.
+     * @bindable
+     */
+    ref?: HTMLSpanElement;
+} & PolymorphicProps<'span'>;
+/** The presence of a person, rendered by BadgeIcon on its own or by an Avatar through its badge prop. */
+export type BadgePresence = {
+    /** The presence status to display.
+     * @default 'available'
+     */
+    status?: Statuses;
+    /** Decorates the presence icon to signal that the person is out of office.
+     * @default false
+     */
+    outOfOffice?: boolean;
+};
+/** @propsmith BadgeIconProps */
+export type BadgeIconProps = {
+    /** The presence status to display. It picks both the icon and the color of the badge.
+     * @default 'available'
+     */
+    status?: Statuses;
+    /** Decorates the presence icon to signal that the person is out of office.
+     * @default false
+     */
+    outOfOffice?: boolean;
+    /** The size of the badge in pixels.
+     * @default 20
+     */
+    size?: number;
+    /** Overrides the color the status would pick on its own. */
+    color?: Colors;
+    /** Custom icon, rendered instead of the one the status would pick on its own.
+     * @type Snippet | Component
+     */
+    icon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>>;
+    /** The DOM reference of the badge element.
+     * @bindable
+     */
+    ref?: HTMLSpanElement;
+} & Omit<PolymorphicProps<'span'>, 'children'>;

package/dist/components/badge/types.js

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

package/dist/components/badge/utils.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare const shapes: {
+    rounded: string;
+    circular: string;
+    square: string;
+};
+export declare const getIconBadge: (outOfOffice: boolean, status: string) => import("svelte").Component<import("svelte/elements").SVGAttributes<SVGElement>, {}, ""> | undefined;
+export declare const colors: {
+    available: string;
+    away: string;
+    busy: string;
+    'do-not-disturb': string;
+    offline: string;
+    'out-of-office': string;
+    blocked: string;
+    unknown: string;
+};

package/dist/components/badge/utils.svelte.js

@@ -0,0 +1,35 @@
+import CheckmarkCircleFilled from 'fluentui-icons-svelte/CheckmarkCircleFilled.svelte';
+import CheckmarkCircleRegular from 'fluentui-icons-svelte/CheckmarkCircleRegular.svelte';
+import ClockFilled from 'fluentui-icons-svelte/ClockFilled.svelte';
+import CircleFilled from 'fluentui-icons-svelte/CircleFilled.svelte';
+import CircleRegular from 'fluentui-icons-svelte/CircleRegular.svelte';
+import SubtractCircleFilled from 'fluentui-icons-svelte/SubtractCircleFilled.svelte';
+import SubtractCircleRegular from 'fluentui-icons-svelte/SubtractCircleRegular.svelte';
+import DismissCircleRegular from 'fluentui-icons-svelte/DismissCircleRegular.svelte';
+import ArrowCircleLeftRegular from 'fluentui-icons-svelte/ArrowCircleLeftRegular.svelte';
+import ProhibitedFilled from 'fluentui-icons-svelte/ProhibitedFilled.svelte';
+export const shapes = {
+    rounded: 'var(--fs-control-border-radius)',
+    circular: '9999rem',
+    square: '0'
+};
+export const getIconBadge = (outOfOffice, status) => ({
+    available: outOfOffice ? CheckmarkCircleRegular : CheckmarkCircleFilled,
+    away: outOfOffice ? ArrowCircleLeftRegular : ClockFilled,
+    busy: outOfOffice ? CircleRegular : CircleFilled,
+    'do-not-disturb': outOfOffice ? SubtractCircleRegular : SubtractCircleFilled,
+    offline: outOfOffice ? ArrowCircleLeftRegular : DismissCircleRegular,
+    'out-of-office': ArrowCircleLeftRegular,
+    blocked: ProhibitedFilled,
+    unknown: CircleRegular
+})[status];
+export const colors = {
+    available: 'success',
+    away: 'warning',
+    busy: 'critical',
+    'do-not-disturb': 'critical',
+    offline: 'information',
+    'out-of-office': 'information',
+    blocked: 'critical',
+    unknown: 'information'
+};