compote-ui 0.61.1 → 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/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.1",
+	"version": "0.62.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",