fluentui-svelte 0.1.0

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

@@ -0,0 +1,86 @@
+# TextBox
+
+The TextBox control lets a user type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform, plaintext format.
+
+## Usage
+
+```svelte
+<script>
+	import { TextBox } from 'fluentui-svelte';
+</script>
+
+<TextBox type="text" placeholder="Type here..." />
+```
+
+## 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
+
+### Type
+
+The `type` prop specifies the type of input element. It can be set to various types such as `text`, `search`, `email`, `url`, `tel`, `password`, or `number`. This determines the behavior and validation of the input.
+
+```svelte
+<TextBox type="text" placeholder="Text" />
+<TextBox type="search" placeholder="Search" />
+<TextBox type="password" placeholder="Password" />
+<TextBox type="number" placeholder="Number" />
+```
+
+### Input Element
+
+The `ref` prop allows you to bind a reference to the underlying HTML input element (`bind:ref`). This can be useful for direct DOM manipulations or accessing native input properties. The wrapper element can be bound via `wrapperRef`.
+
+### Readonly
+
+The `readonly` prop makes the input field read-only, preventing users from modifying its value. This is useful for displaying information that should not be edited.
+
+```svelte
+<TextBox readonly value="Read-only value" />
+```
+
+### Placeholder
+
+The `placeholder` prop sets the placeholder text for the input field, providing a hint to users about what to enter.
+
+### Hide Buttons
+
+The `hideActionButtons` prop allows you to hide the extra action buttons in the input, such as clear or submit buttons. This can be useful for a cleaner UI when those actions are not needed.
+
+```svelte
+<TextBox type="search" hideActionButtons placeholder="No action buttons" />
+```
+
+### Query Submitted
+
+The `querySubmitted` event is triggered when a query is submitted, such as when the user presses Enter in a search input. This allows you to handle the submission of the input value.
+
+### Text Changed
+
+The `textChanged` event is triggered whenever the content of the text box changes. This can be used to react to user input in real-time, such as validating input or updating other parts of the UI.
+
+### On Clear
+
+The `onClear` event is triggered when the input is cleared, allowing you to handle any necessary actions when the user removes the input value.
+
+## Component Props
+
+| Name                | Type                                                      | Description                                                                                                                  |
+| ------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `type`              | `string`                                                  | The type of the input element. Possible values: `'text'`, `'search'`, `'email'`, `'url'`, `'tel'`, `'password'`, `'number'`. |
+| `ref`               | `HTMLInputElement`                                        | The DOM reference of the input element.                                                                                      |
+| `wrapperRef`        | `HTMLDivElement`                                          | The DOM reference of the wrapper element.                                                                                    |
+| `wrapperAttributes` | `HTMLAttributes<HTMLDivElement>`                          | Additional attributes forwarded to the wrapper element.                                                                      |
+| `size`              | `'small' \| 'medium' \| 'large'`                          | The size of the input.                                                                                                       |
+| `readonly`          | `boolean`                                                 | Whether the input is read-only.                                                                                              |
+| `placeholder`       | `string`                                                  | The placeholder text for the input.                                                                                          |
+| `hideActionButtons` | `boolean`                                                 | Whether to hide the extra action buttons in the input.                                                                       |
+| `justify`           | `boolean`                                                 | Whether the input fills the full width of the container.                                                                     |
+| `contentBefore`     | `string \| Snippet \| Component`                          | Content rendered before the input (e.g. an icon).                                                                            |
+| `contentAfter`      | `string \| Snippet \| Component`                          | Content rendered after the input (e.g. an icon).                                                                             |
+| `textChanged`       | `(e: InputEvent, text: string) => void`                   | Event triggered when content changes in the text box.                                                                        |
+| `querySubmitted`    | `(e: MouseEvent \| KeyboardEvent, query: string) => void` | Event triggered when a query is submitted (Enter or search icon click on `type="search"`).                                   |
+| `onClear`           | `(e: MouseEvent) => void`                                 | Event triggered when the input is cleared.                                                                                   |
+| `children`          | `Snippet`                                                 | The children elements to render inside the input.                                                                            |

package/dist/components/text-box/text-box-button.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let {
+		element = $bindable(),
+		type = 'button',
+		children,
+		...attributes
+	}: { element?: HTMLButtonElement; children: Snippet } & HTMLButtonAttributes = $props();
+</script>
+
+<button {type} bind:this={element} {...attributes}>
+	{@render children?.()}
+</button>
+
+<style>
+	button {
+		outline: none;
+		background-color: var(--fs-subtle-fill-transparent);
+		border: 1px solid var(--fs-subtle-fill-transparent);
+		border-radius: var(--fs-control-border-radius);
+		color: var(--fs-text-secondary);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.188rem 0.313rem;
+		z-index: 1;
+		flex: 0 0 auto;
+		margin: 0 0.375rem;
+		&:first-of-type {
+			margin-left: 0;
+		}
+		&:last-of-type {
+			margin-right: 0.188rem;
+		}
+		&:focus-visible {
+			outline: 0.125rem solid var(--fs-focus-stroke-outer);
+			outline-offset: 1px;
+		}
+		&:hover {
+			background-color: var(--fs-subtle-fill-secondary);
+		}
+		&:active {
+			background-color: var(--fs-subtle-fill-tertiary);
+			color: var(--fs-text-secondary);
+		}
+		&:disabled {
+			background-color: var(--fs-subtle-fill-disabled);
+			border-color: var(--fs-control-stroke-default);
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+		}
+		& :global(svg) {
+			pointer-events: none;
+			fill: currentColor;
+			width: 1.1rem;
+			height: 1.1rem;
+			& :global(path) {
+				fill: currentColor;
+			}
+		}
+	}
+</style>

package/dist/components/text-box/text-box-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    element?: HTMLButtonElement;
+    children: Snippet;
+} & HTMLButtonAttributes;
+declare const TextBoxButton: import("svelte").Component<$$ComponentProps, {}, "element">;
+type TextBoxButton = ReturnType<typeof TextBoxButton>;
+export default TextBoxButton;

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

@@ -0,0 +1,299 @@
+<script lang="ts">
+	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
+	import SearchFilled from 'fluentui-icons-svelte/SearchFilled.svelte';
+	import EyeShowFilled from 'fluentui-icons-svelte/EyeShowFilled.svelte';
+	import EyeHideFilled from 'fluentui-icons-svelte/EyeHideFilled.svelte';
+	import { TextBoxButton } from '../../index.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import type { TextBoxProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+
+	let {
+		id = 'input-' + FALLBACK_ID,
+		readonly,
+		name = id,
+		hideActionButtons,
+		type = 'text',
+		class: classes,
+		wrapperAttributes,
+		wrapperRef = $bindable(),
+		value = $bindable(),
+		ref = $bindable(),
+		placeholder = 'Fluent TextBox',
+		size = 'medium',
+		contentBefore,
+		contentAfter,
+		querySubmitted,
+		textChanged,
+		onkeydown,
+		onClear,
+		children,
+		...attributes
+	}: TextBoxProps = $props();
+
+	let currentType = $derived(type);
+	let hasValue = $derived(!!((value && value.length > 0) || (typeof value === 'number' && value !== 0)));
+
+	const clearInput = (e: MouseEvent) => {
+		if (typeof value === 'string') {
+			value = '';
+			if (type === 'password' && currentType === 'text') {
+				ref?.setAttribute('type', 'password');
+				currentType = 'password';
+				ref?.focus();
+			}
+		} else {
+			value = 0;
+		}
+		onClear?.(e);
+	};
+
+	const revealPassword = () => {
+		if (ref) {
+			ref.setAttribute('type', currentType === 'password' ? 'text' : 'password');
+			currentType = currentType === 'password' ? 'text' : 'password';
+			ref.focus();
+		}
+	};
+
+	const handleKeyDown = (e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			(e.target as HTMLInputElement).blur();
+		}
+		onkeydown?.(e);
+	};
+</script>
+
+<!-- 
+@component
+
+This is a implementation of Fluent UI TextBox component. The TextBox component is a customizable input element that allows users to enter text. It is designed to be consistent with the Fluent Design System.
+
+- Usage:
+  ```tsx
+  <script>
+    import { TextBox } from 'fluentui-svelte';
+  </script>
+
+  <TextBox type="text" placeholder="Enter your name" />
+  ```
+-->
+<div class={['fs-textbox', id, `text-box-size-${size}`, classes]} {...wrapperAttributes} bind:this={wrapperRef}>
+	{#if contentBefore}
+		<span class="content-before">
+			{#if typeof contentBefore === 'string'}
+				{contentBefore}
+			{:else}
+				<RenderSoC SoC={contentBefore} />
+			{/if}
+		</span>
+	{/if}
+	<input
+		{type}
+		{id}
+		{name}
+		{placeholder}
+		{readonly}
+		bind:value
+		bind:this={ref}
+		onkeyup={handleKeyDown}
+		oninput={(e) => textChanged?.(e as any, value)}
+		onchange={(e) => textChanged?.(e as any, value)}
+		{...attributes}
+	/>
+	{#if contentAfter}
+		<span class="content-after">
+			{#if typeof contentAfter === 'string'}
+				{contentAfter}
+			{:else}
+				<RenderSoC SoC={contentAfter} />
+			{/if}
+		</span>
+	{/if}
+	{#if !hideActionButtons}
+		{#if !readonly}
+			<TextBoxButton
+				class="clear-button {hasValue ? '' : 'is-empty'}"
+				disabled={!hasValue}
+				aria-hidden={hasValue ? undefined : 'true'}
+				aria-label="Delete Text"
+				onclick={(e) => clearInput(e)}
+			>
+				<DismissFilled />
+			</TextBoxButton>
+		{/if}
+		{#if type === 'search'}
+			<TextBoxButton disabled={readonly} aria-label="Search" onclick={(e) => querySubmitted?.(e, value)}>
+				<SearchFilled />
+			</TextBoxButton>
+		{:else if type === 'password'}
+			<TextBoxButton disabled={readonly} aria-label="Reveal Password" onclick={() => revealPassword()}>
+				{#if currentType === 'password'}
+					<EyeShowFilled />
+				{:else}
+					<EyeHideFilled />
+				{/if}
+			</TextBoxButton>
+		{/if}
+	{/if}
+	{@render children?.()}
+</div>
+
+<style>
+	.fs-textbox {
+		display: flex;
+		align-items: center;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		background: var(--fs-control-fill-default);
+		border: none;
+		& input {
+			appearance: none;
+			background: transparent;
+			outline: none;
+			border: none;
+			margin: 0;
+			z-index: 1;
+			color: var(--fs-text-primary);
+			padding: 0.375rem 0.75rem;
+			min-width: 2ch;
+			flex: 1 1 auto;
+			&::placeholder {
+				color: var(--fs-text-secondary);
+			}
+			&::-ms-reveal,
+			&::-ms-clear {
+				display: none;
+			}
+			&::-webkit-search-decoration,
+			&::-webkit-search-cancel-button,
+			&::-webkit-search-results-button,
+			&::-webkit-search-results-decoration,
+			&::-webkit-outer-spin-button,
+			&::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+			}
+			&[type='number'] {
+				-moz-appearance: textfield;
+				appearance: textfield;
+			}
+		}
+		&:before {
+			content: '';
+			pointer-events: none;
+			width: calc(100% + 0.125rem);
+			height: calc(100% + 0.125rem);
+			position: absolute;
+			top: -0.063rem;
+			left: -0.063rem;
+			padding: 0.063rem;
+			border-radius: 0.313rem;
+			mask:
+				linear-gradient(#fff 0 0) content-box,
+				linear-gradient(#fff 0 0);
+			mask-composite: exclude;
+			background: var(--fs-elevation-text-border);
+			z-index: 1;
+		}
+		&:after {
+			content: '';
+			pointer-events: none;
+			width: 0;
+			height: 10px;
+			border-radius: 0px 0px 5px 5px;
+			position: absolute;
+			bottom: -0.063rem;
+			left: calc(50% - 0.063rem);
+			clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0% 100%);
+			background: transparent;
+			transition:
+				width var(--fs-normal-duration) var(--fs-point-to-point),
+				left var(--fs-normal-duration) var(--fs-point-to-point);
+			z-index: 2;
+		}
+		&:hover {
+			background: var(--fs-control-fill-secondary);
+		}
+		&:has(input:focus-visible):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background-color: var(--fs-accent-fill-default);
+		}
+		&:has(input:focus) {
+			background: var(--fs-control-fill-input-active);
+			& input::placeholder {
+				color: var(--fs-text-tertiary);
+			}
+		}
+		&:has(input:disabled) {
+			cursor: not-allowed;
+			background: var(--fs-control-fill-disabled);
+			& input::placeholder {
+				color: var(--fs-text-disabled);
+			}
+			&::before {
+				background: var(--fs-control-stroke-default);
+			}
+		}
+		&:has(.content-before, .content-after) {
+			& input {
+				padding: 0.375rem 0.25rem;
+			}
+			& .content-before {
+				padding: 0.375rem 0.25rem 0.375rem 0.625rem;
+			}
+			& .content-after {
+				padding: 0.375rem 0.625rem 0.375rem 0.25rem;
+			}
+		}
+		& .content-before,
+		& .content-after {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--fs-text-secondary);
+			height: 100%;
+			min-width: max-content;
+			width: auto;
+
+			& :global(svg) {
+				fill: currentColor;
+				width: auto;
+				height: 100%;
+				& :global(path) {
+					fill: currentColor;
+				}
+			}
+		}
+		& :global(.clear-button.is-empty) {
+			visibility: hidden;
+		}
+		&.text-box-size-small {
+			& :is(input, .content-after, .content-before) {
+				font-size: var(--fs-body2-font-size);
+				padding: 0.25rem;
+			}
+		}
+		&.text-box-size-medium {
+			font-size: var(--fs-body-font-size);
+			& :is(input, .content-after, .content-before) {
+				padding: 0.375rem;
+				font-size: var(--fs-body-font-size);
+			}
+		}
+		&.text-box-size-large {
+			& :is(input, .content-after, .content-before) {
+				padding: 0.625rem 0.625rem;
+				font-size: var(--fs-subtitle2-font-size);
+			}
+			& :is(.content-after, .content-before) {
+				font-size: var(--fs-body-font-size);
+			}
+			& :global(.clear-button:last-of-type) {
+				margin-right: 0.3125rem;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { TextBoxProps } from './types.ts';
+/**
+ * This is a implementation of Fluent UI TextBox component. The TextBox component is a customizable input element that allows users to enter text. It is designed to be consistent with the Fluent Design System.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { TextBox } from 'fluentui-svelte';
+ * </script>
+ *
+ * <TextBox type="text" placeholder="Enter your name" />
+ * ```
+ */
+declare const TextBox: import("svelte").Component<TextBoxProps, {}, "ref" | "value" | "wrapperRef">;
+type TextBox = ReturnType<typeof TextBox>;
+export default TextBox;

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

@@ -0,0 +1,60 @@
+import type { Component, Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { Sizes } from '../../types/index.js';
+export type TextBoxTypes = 'text' | 'search' | 'email' | 'url' | 'tel' | 'password' | 'number';
+/** @propsmith TextBoxProps */
+export type TextBoxProps = {
+    /** The type of the input element.
+     * @default 'text'
+     */
+    type?: TextBoxTypes;
+    /** The current value of the input.
+     * @type string | number
+     * @bindable
+     */
+    value?: string | number;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement;
+    /** The DOM reference of the input element.
+     * @bindable
+     */
+    ref?: HTMLInputElement;
+    /** The placeholder text for the input.
+     * @default 'Fluent TextBox'
+     */
+    placeholder?: string;
+    /** Whether to hide the extra action buttons in the input. */
+    hideActionButtons?: boolean;
+    /** Make the input fill the full width of the container. */
+    justify?: boolean;
+    /** Content rendered before the input, inside the wrapper.
+     * @type string | Snippet | Component
+     */
+    contentBefore?: string | Snippet | Component;
+    /** Content rendered after the input, inside the wrapper.
+     * @type string | Snippet | Component
+     */
+    contentAfter?: string | Snippet | Component;
+    /** The size of the input element.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** Occurs when content changes in the text box. */
+    textChanged?: (e: InputEvent, text: string) => void;
+    /** The QuerySubmitted event occurs when:
+     * 1. The input type is 'search'.
+     * 2. While the focus is in the text box, press Enter or click the query icon.
+     * @type (e: MouseEvent | KeyboardEvent, query: string) => void
+     */
+    querySubmitted?: (e: MouseEvent | KeyboardEvent, query: string) => void;
+    /** Occurs when the clear button is clicked. */
+    onClear?: (e: MouseEvent) => void;
+    /** The children elements to render inside the input. */
+    children?: Snippet;
+    /** The attributes to apply to the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+} & Omit<HTMLInputAttributes, 'size'>;

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

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

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

@@ -0,0 +1,55 @@
+# TextArea
+
+Textarea allows the user to enter and edit multiline text.
+
+## Usage
+
+```svelte
+<script>
+	import { TextArea } from 'fluentui-svelte';
+</script>
+
+<TextArea placeholder="Type your message here..." />
+```
+
+## 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
+
+### Placeholder
+
+The `placeholder` prop sets the placeholder text for the textarea, providing a hint to users about what to enter.
+
+```svelte
+<TextArea placeholder="Type your message here..." />
+```
+
+### Resize
+
+The `resize` prop controls whether the textarea can be resized by the user. It can be set to `none`, `both`, `horizontal`, or `vertical`. This allows you to control the resizing behavior of the textarea.
+
+```svelte
+<TextArea resize="none" placeholder="No resize" />
+<TextArea resize="vertical" placeholder="Vertical resize" />
+<TextArea resize="both" placeholder="Resize both" />
+```
+
+### On Change
+
+The `onChange` event is triggered whenever the content of the textarea changes. This can be used to react to user input in real-time, such as validating input or updating other parts of the UI.
+
+```svelte
+<TextArea onChange={(e) => console.log(e)} placeholder="Type..." />
+```
+
+## Component Props
+
+| Name               | Type       | Description                                                                                                        |
+| ------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------ |
+| `placeholder`      | `string`   | The placeholder text for the textarea.                                                                             |
+| `resize`           | `string`   | Controls the resizing behavior of the textarea. Possible values: `'none'`, `'both'`, `'horizontal'`, `'vertical'`. |
+| `onChange`         | `function` | Event handler for when the content of the textarea changes.                                                        |
+| `element`          |            | The DOM reference of the textarea element.                                                                         |
+| Element Attributes |            | All other attributes that can be applied to the textarea element.                                                  |