compote-ui 0.61.0 → 0.62.0

package/dist/components/password-input/password-input.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import { PasswordInput } from '@ark-ui/svelte/password-input';
+	import type { PasswordInputProps } from './types';
+	import { PhEye, PhEyeSlash } from '../../icons';
+
+	let {
+		label,
+		layout = 'vertical',
+		placeholder,
+		class: className,
+		...restProps
+	}: PasswordInputProps = $props();
+
+	const rootClass = $derived(
+		layout === 'horizontal'
+			? 'flex items-center justify-between gap-1.5 w-full data-disabled:opacity-50 data-disabled:grayscale'
+			: 'flex flex-col gap-1.5 w-full max-w-72 data-disabled:opacity-50 data-disabled:grayscale'
+	);
+</script>
+
+<PasswordInput.Root {...restProps} class={className ? `${rootClass} ${className}` : rootClass}>
+	{#if label}
+		<PasswordInput.Label class="text-sm leading-none font-medium">
+			{label}
+			<Field.RequiredIndicator />
+		</PasswordInput.Label>
+	{/if}
+	<PasswordInput.Control class="relative isolate">
+		<PasswordInput.Input
+			{placeholder}
+			class="h-9 w-full rounded-md border bg-surface-1 px-3 pr-9 text-sm shadow-sm placeholder:text-ink-dim focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-invalid:border-danger data-invalid:focus-visible:ring-danger"
+		/>
+		<PasswordInput.VisibilityTrigger
+			class="absolute top-1/2 right-2 -translate-y-1/2 text-ink-dim hover:text-ink focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			<PasswordInput.Indicator class="flex items-center justify-center">
+				{#snippet fallback()}
+					<PhEyeSlash class="size-4" />
+				{/snippet}
+				<PhEye class="size-4" />
+			</PasswordInput.Indicator>
+		</PasswordInput.VisibilityTrigger>
+	</PasswordInput.Control>
+</PasswordInput.Root>

package/dist/components/password-input/password-input.svelte.d.ts

@@ -0,0 +1,5 @@
+import { PasswordInput } from '@ark-ui/svelte/password-input';
+import type { PasswordInputProps } from './types';
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/password-input/types.d.ts

@@ -0,0 +1,7 @@
+import type { PasswordInputRootBaseProps } from '@ark-ui/svelte/password-input';
+export interface PasswordInputProps extends PasswordInputRootBaseProps {
+    label?: string;
+    layout?: 'vertical' | 'horizontal';
+    placeholder?: string;
+    class?: string;
+}

package/dist/components/password-input/types.js

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

package/dist/components/phone-input/phone-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Select } from '@ark-ui/svelte/select';
 	import { Portal } from '@ark-ui/svelte/portal';
+	import { useFilter } from '@ark-ui/svelte/locale';
 	import { TelInput, countries } from 'svelte-tel-input';
 	import type { CountryCode } from 'svelte-tel-input/types';
 	import type { PhoneInputProps } from './types';
@@ -22,28 +23,35 @@
 		flagClass: `flag-${c.iso2.toLowerCase()}`,
 		dialCode: c.dialCode
 	}));
-	const collection = createListCollection(countryItems);
+	const baseCollection = createListCollection(countryItems);
+
+	let filterText = $state('');
+	const filters = useFilter({ sensitivity: 'base' });
+	const collection = $derived(
+		filterText
+			? baseCollection.filter((label) => filters().contains(label, filterText))
+			: baseCollection
+	);
 
 	let {
 		value = $bindable(''),
 		country = $bindable(null),
 		valid = $bindable(false),
 		label,
-		placeholder,
-		name,
 		layout = 'vertical',
 		disabled,
 		readonly,
 		invalid,
 		required,
 		class: className,
-		options
+		...restProps
 	}: PhoneInputProps = $props();
 
 	const id = $props.id();
 	const numberId = `${id}-number`;
 
 	const selectedItem = $derived(countryItems.find((c) => c.value === country));
+	const showInvalid = $derived(invalid ?? (value.length > 0 && !valid));
 
 	const rootClass = $derived(
 		layout === 'horizontal'
@@ -63,7 +71,7 @@
 		class={cn(
 			'flex h-9 w-full items-center rounded-md border bg-surface-1 shadow-sm transition-shadow focus-within:ring-1 focus-within:ring-ring',
 			'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-			invalid && 'border-danger focus-within:ring-danger',
+			showInvalid && 'border-danger focus-within:ring-danger',
 			className
 		)}
 		data-disabled={disabled ? '' : undefined}
@@ -74,6 +82,9 @@
 			onValueChange={(details) => {
 				country = (details.items[0]?.value as CountryCode | undefined) ?? null;
 			}}
+			onOpenChange={(details) => {
+				if (!details.open) filterText = '';
+			}}
 			{disabled}
 			readOnly={readonly}
 			class="h-9 shrink-0"
@@ -87,7 +98,6 @@
 						<span
 							class="flag {selectedItem.flagClass} shrink-0 rounded-xs shadow-[inset_0_0_0_1px_var(--compote-border)]"
 						></span>
-						<span class="font-medium tabular-nums">+{selectedItem.dialCode}</span>
 					{:else}
 						<span class="text-ink-dim">Country</span>
 					{/if}
@@ -97,22 +107,33 @@
 			<Portal>
 				<Select.Positioner>
 					<Select.Content
-						class="z-200 max-h-60 min-w-52 overflow-auto rounded-md border bg-surface-document p-1 shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+						class="z-200 flex max-h-72 min-w-52 flex-col overflow-hidden rounded-md border bg-surface-document p-1 shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
 					>
-						{#each countryItems as item (item.value)}
-							<Select.Item
-								{item}
-								class="relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm text-ink transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
-							>
-								<span
-									class="flag {item.flagClass} shrink-0 rounded-xs shadow-[inset_0_0_0_1px_var(--compote-border)]"
-								></span>
-								<Select.ItemText class="flex-1 truncate">{item.label}</Select.ItemText>
-								<Select.ItemIndicator class="absolute right-2 flex items-center justify-center">
-									<PhCheck class="size-3.5" />
-								</Select.ItemIndicator>
-							</Select.Item>
-						{/each}
+						<input
+							type="text"
+							bind:value={filterText}
+							placeholder="Search"
+							class="mb-1 shrink-0 rounded-sm border bg-surface-1 px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring"
+							onkeydown={(e) => e.stopPropagation()}
+						/>
+						<div class="overflow-auto">
+							{#each collection.items as item (item.value)}
+								<Select.Item
+									{item}
+									class="relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm text-ink transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
+								>
+									<span
+										class="flag {item.flagClass} shrink-0 rounded-xs shadow-[inset_0_0_0_1px_var(--compote-border)]"
+									></span>
+									<Select.ItemText class="flex-1 truncate">{item.label}</Select.ItemText>
+									<Select.ItemIndicator class="absolute right-2 flex items-center justify-center">
+										<PhCheck class="size-3.5" />
+									</Select.ItemIndicator>
+								</Select.Item>
+							{:else}
+								<div class="py-2 text-center text-sm text-ink-dim">No results found</div>
+							{/each}
+						</div>
 					</Select.Content>
 				</Select.Positioner>
 			</Portal>
@@ -122,12 +143,10 @@
 			bind:value
 			bind:country
 			bind:valid
-			{name}
-			{placeholder}
 			{disabled}
 			{readonly}
 			{required}
-			{options}
+			{...restProps}
 			class="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed"
 		/>
 	</div>

package/dist/components/phone-input/types.d.ts

@@ -1,16 +1,9 @@
-import type { CountryCode, TelInputOptions } from 'svelte-tel-input/types';
-export interface PhoneInputProps {
+import type { Props as TelInputProps } from 'svelte-tel-input/types';
+export interface PhoneInputProps extends Omit<TelInputProps, 'value' | 'class' | 'id' | 'readonly'> {
     value?: string;
-    country?: CountryCode | null;
-    valid?: boolean;
     label?: string;
-    placeholder?: string;
-    name?: string;
     layout?: 'vertical' | 'horizontal';
-    disabled?: boolean;
     readonly?: boolean;
     invalid?: boolean;
-    required?: boolean;
     class?: string;
-    options?: TelInputOptions;
 }

package/dist/icons/PhEye.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9.04,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhEye.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhEye: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhEye = ReturnType<typeof PhEye>;
+export default PhEye;

package/dist/icons/PhEyeSlash.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l21.41,23.55a8,8,0,1,0,11.84-10.76Zm84.16,114.84-37.6-41.36a24,24,0,0,1,37.6,41.36ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18.81,20.69a40,40,0,0,0,54.75,54.75l14.6,16.07A111.59,111.59,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3.07-15.72,40.07,40.07,0,0,1,32.49,32.5,8,8,0,0,1-6.6,9.2,8.1,8.1,0,0,1-1.31.11,8,8,0,0,1-7.89-6.71A24,24,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.59-12c17.54-15.52,26.4-32.32,28.97-37.06A133.46,133.46,0,0,0,207.93,97.25,135.05,135.05,0,0,0,128,64a121.7,121.7,0,0,0-26.15,2.93,8,8,0,1,1-3.46-15.62A137.39,137.39,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.61,27.65,38.41A8,8,0,0,1,247.31,131.26Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhEyeSlash.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhEyeSlash: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhEyeSlash = ReturnType<typeof PhEyeSlash>;
+export default PhEyeSlash;

package/dist/icons/index.d.ts

@@ -9,6 +9,8 @@ export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhEye } from './PhEye.svelte';
+export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';
 export { default as PhFileArchive } from './PhFileArchive.svelte';
 export { default as PhFileText } from './PhFileText.svelte';

package/dist/icons/index.js

@@ -9,6 +9,8 @@ export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhEye } from './PhEye.svelte';
+export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';
 export { default as PhFileArchive } from './PhFileArchive.svelte';
 export { default as PhFileText } from './PhFileText.svelte';

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { default as JsonTreeView } from './components/json-tree-view/json-tree-v
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';
+export { default as PasswordInput } from './components/password-input/password-input.svelte';
+export type { PasswordInputProps } from './components/password-input/types';
 export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
 export type { PhoneInputProps } from './components/phone-input/types';
 export * as Popover from './components/popover';

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as ImageCropDialog } from './components/image-crop-dialog/image
 export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
+export { default as PasswordInput } from './components/password-input/password-input.svelte';
 export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
 export * as Popover from './components/popover';
 export { default as QrCode } from './components/qr-code/qr-code.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.61.0",
+	"version": "0.62.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",