@immich/ui 0.65.3 → 0.67.0

package/dist/components/PinInput/PinInput.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { getFieldContext } from '../../common/context.svelte.js';
+  import Label from '../Label/Label.svelte';
+  import { styleVariants } from '../../styles.js';
+  import type { PinInputProps } from '../../types.js';
+  import { cleanClass } from '../../utilities/internal.js';
+  import { PinInput, REGEXP_ONLY_DIGITS } from 'bits-ui';
+  import { tv } from 'tailwind-variants';
+
+  let {
+    shape = 'semi-round',
+    size: initialSize,
+    value = $bindable<string>(''),
+    length = 6,
+    password,
+    onComplete,
+    class: className,
+    ...props
+  }: PinInputProps = $props();
+
+  const context = getFieldContext();
+
+  const { label, disabled, ...labelProps } = $derived(context());
+  const size = $derived(initialSize ?? labelProps.size ?? 'large');
+
+  const inputStyles = tv({
+    base: 'group-has-disabled:text-dark data-active:border-primary dark:data-active:border-primary flex items-center justify-center border-2 bg-gray-100 font-mono transition-all duration-75 group-has-disabled:bg-gray-300 data-active:border-3 dark:bg-gray-800 dark:group-not-has-disabled:border-gray-700 dark:group-has-disabled:bg-gray-900 dark:group-has-disabled:text-gray-200',
+    variants: {
+      shape: styleVariants.shape,
+      size: {
+        tiny: 'h-9 w-7',
+        small: 'h-10 w-8',
+        medium: 'h-11 w-9',
+        large: 'h-12 w-10',
+        giant: 'h-14 w-12',
+      },
+      textSize: styleVariants.textSize,
+      roundedSize: {
+        tiny: 'rounded-lg',
+        small: 'rounded-lg',
+        medium: 'rounded-xl',
+        large: 'rounded-xl',
+        giant: 'rounded-2xl',
+      },
+    },
+  });
+
+  const caretStyles = tv({
+    base: 'caret bg-dark h-1/2',
+    variants: {
+      size: {
+        tiny: 'w-px',
+        small: 'w-px',
+        medium: 'w-[1.5px]',
+        large: 'w-[1.5px]',
+        giant: 'w-0.5',
+      },
+    },
+  });
+
+  const id = $props.id();
+  const inputId = `input-${id}`;
+  const labelId = `label-${id}`;
+</script>
+
+<div class={cleanClass('flex flex-col gap-1', className)}>
+  {#if label}
+    <Label id={labelId} for={inputId} {label} {...labelProps} {size} />
+  {/if}
+
+  <PinInput.Root
+    {inputId}
+    aria-labelledby={label && labelId}
+    {disabled}
+    aria-disabled={disabled}
+    class="group flex w-fit items-center gap-2"
+    maxlength={length}
+    pattern={REGEXP_ONLY_DIGITS}
+    type={password ? 'password' : 'text'}
+    {onComplete}
+    bind:value
+    {...props}
+  >
+    {#snippet children({ cells })}
+      {#each cells as cell, i (i)}
+        <PinInput.Cell
+          {cell}
+          class={inputStyles({
+            shape,
+            size,
+            textSize: size,
+            roundedSize: shape === 'semi-round' ? size : undefined,
+          })}
+        >
+          {#if cell.char !== null}
+            <div>
+              {password ? '●' : cell.char}
+            </div>
+          {/if}
+          {#if cell.hasFakeCaret}
+            <div class="absolute flex h-full items-center justify-center">
+              <div class={caretStyles({ size })}></div>
+            </div>
+          {/if}
+        </PinInput.Cell>
+      {/each}
+    {/snippet}
+  </PinInput.Root>
+</div>
+
+<style>
+  .caret {
+    animation: blink 1.5s step-end infinite;
+  }
+  @keyframes blink {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,5 @@
+import type { PinInputProps } from '../../types.js';
+import { PinInput } from 'bits-ui';
+declare const PinInput: import("svelte").Component<PinInputProps, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/Toast/Toast.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
+  import Button from '../Button/Button.svelte';
   import ToastContainer from './ToastContainer.svelte';
   import ToastContent from './ToastContent.svelte';
   import type { ToastProps } from '../../types.js';
 
-  let { children, title, description, icon, onClose, ...props }: ToastProps = $props();
+  let { children, title, description, icon, onClose, button, ...props }: ToastProps = $props();
 </script>
 
 <ToastContainer {...props}>
   {#if children}
     {@render children()}
   {:else if title}
-    <ToastContent {title} {description} {icon} {onClose} {...props} />
+    <ToastContent {title} {description} {icon} {onClose} {...props}>
+      {#if button}
+        {@const { label, ...rest } = button}
+        <div class="flex justify-end px-3 pt-2">
+          <Button color="secondary" size="small" {...rest}>
+            {label}
+          </Button>
+        </div>
+      {/if}
+    </ToastContent>
   {/if}
 </ToastContainer>

package/dist/components/Toast/ToastContainer.svelte

@@ -15,7 +15,7 @@
   }: ToastContainerProps = $props();
 
   const containerStyles = tv({
-    base: 'bg-light text-dark overflow-hidden border py-1.5 shadow-xs transition-all',
+    base: 'bg-light text-dark overflow-hidden border py-3 shadow-xs transition-all',
     variants: {
       color: {
         primary: 'border-primary-100 bg-primary-50 dark:bg-primary-100 dark:border-primary-200',

package/dist/components/Toast/ToastContent.svelte

@@ -58,7 +58,7 @@
     {/if}
   </div>
   <div class="ms-1 flex grow justify-between">
-    <div class="flex flex-col p-2">
+    <div class="flex flex-col px-2">
       {#if title}
         <Text fontWeight="semi-bold" class={titleStyles({ color })}>{@render resolve(title)}</Text>
       {/if}

package/dist/index.d.ts

@@ -70,6 +70,7 @@ export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
+export { default as PinInput } from './components/PinInput/PinInput.svelte';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
@@ -103,9 +104,9 @@ export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './state/locale-state.svelte.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
-export { isModalOpen } from './state/modal-state.svelte.js';
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/index.js

@@ -72,6 +72,7 @@ export { default as NavbarGroup } from './components/Navbar/NavbarGroup.svelte';
 export { default as NavbarItem } from './components/Navbar/NavbarItem.svelte';
 export { default as NumberInput } from './components/NumberInput/NumberInput.svelte';
 export { default as PasswordInput } from './components/PasswordInput/PasswordInput.svelte';
+export { default as PinInput } from './components/PinInput/PinInput.svelte';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.svelte';
 export { default as Scrollable } from './components/Scrollable/Scrollable.svelte';
 export { default as Select } from './components/Select/Select.svelte';
@@ -106,10 +107,10 @@ export * from './services/theme.svelte.js';
 export * from './services/toast-manager.svelte.js';
 export * from './services/translation.svelte.js';
 export * from './state/locale-state.svelte.js';
+export { isModalOpen } from './state/modal-state.svelte.js';
 export * from './types.js';
 export * from './utilities/byte-units.js';
 export * from './utilities/common.js';
-export { isModalOpen } from './state/modal-state.svelte.js';
 // site
 export * from './site/constants.js';
 export { default as SiteFooter } from './site/SiteFooter.svelte';

package/dist/types.d.ts

@@ -156,6 +156,17 @@ export type PasswordInputProps = BaseInputProps<string> & {
     translations?: TranslationProps<'show_password' | 'hide_password'>;
     isVisible?: boolean;
 };
+export type PinInputProps = {
+    ref?: HTMLInputElement | null;
+    class?: string;
+    size?: Size;
+    value?: string;
+    shape?: Shape;
+    disabled?: boolean;
+    length?: number;
+    password?: boolean;
+    onComplete?: (value: string) => void;
+};
 export type TextareaProps = {
     ref?: HTMLTextAreaElement | null;
     containerRef?: HTMLElement | null;
@@ -188,7 +199,7 @@ export type MultiSelectProps<T extends string> = SelectCommonProps<T> & {
     onChange?: (values: T[]) => void;
     onSelect?: (options: SelectOption<T>[]) => void;
 };
-export type ToastId = {
+export type ToastWithId = ToastItem & {
     id: string;
 };
 type ToastCommonProps = {
@@ -200,13 +211,14 @@ export type ToastContentProps = ToastCommonProps & {
     icon?: IconLike | false;
     onClose?: () => void;
     children?: Snippet;
+    button?: ToastButton;
 };
 export type ToastContainerProps = ToastCommonProps & {
     shape?: Shape;
     size?: ContainerSize;
 } & Omit<HTMLAttributes<HTMLElement>, 'title' | 'color' | 'size'>;
 export type ToastPanelProps = {
-    items: Array<ToastItem & ToastId>;
+    items: Array<ToastWithId>;
 } & HTMLAttributes<HTMLDivElement>;
 export type ToastProps = ToastContentProps & ToastContainerProps;
 type Closable = {
@@ -223,6 +235,7 @@ export type ToastShow = {
     shape?: Shape;
     icon?: IconLike | false;
     size?: ContainerSize;
+    button?: ToastButton;
 };
 export type ToastOptions = {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.65.3",
+  "version": "0.67.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",