@immich/ui 0.65.2 → 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/Textarea/Textarea.svelte

@@ -12,8 +12,10 @@
     containerRef = $bindable(null),
     shape = 'semi-round',
     size: initialSize,
+    variant = 'input',
     class: className,
-    grow,
+    rows = variant === 'ghost' ? 1 : undefined,
+    grow = variant === 'ghost',
     value = $bindable<string>(),
     ...restProps
   }: TextareaProps = $props();
@@ -22,18 +24,35 @@
   const { label, description, readOnly, required, invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
-  const styles = tv({
-    base: 'focus-within:ring-primary dark:focus-within:ring-primary w-full bg-gray-100 ring-1 ring-gray-200 outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
+  const commonStyles = tv({
+    base: 'w-full outline-none disabled:cursor-not-allowed',
+    variants: {
+      textSize: styleVariants.textSize,
+      grow: { true: 'resize-none', false: '' },
+    },
+  });
+
+  const ghostStyles = tv({
+    base: 'pb-2',
+    variants: {
+      state: {
+        active:
+          'hover:border-b-light-200 focus-within:hover:border-primary focus-within:border-primary focus-within:border-b-2 hover:border-b-2',
+        error: 'border-b-danger border-b-2',
+        disabled: '',
+      },
+    },
+  });
+
+  const inputStyles = tv({
+    base: 'focus-within:ring-primary dark:focus-within:ring-primary bg-gray-100 ring-1 ring-gray-200 focus-within:ring-1 disabled:bg-gray-300 disabled:text-gray-400 dark:bg-gray-800 dark:ring-black dark:disabled:bg-gray-800 dark:disabled:text-gray-200',
     variants: {
       shape: styleVariants.shape,
       padding: {
         base: 'px-4 py-3',
         round: 'px-5 py-3',
       },
-      grow: {
-        true: 'resize-none',
-        false: '',
-      },
+      invalid: { true: 'border-danger/80 border', false: '' },
       roundedSize: {
         tiny: 'rounded-xl',
         small: 'rounded-xl',
@@ -41,11 +60,6 @@
         large: 'rounded-2xl',
         giant: 'rounded-2xl',
       },
-      textSize: styleVariants.textSize,
-      invalid: {
-        true: 'border-danger/80 border',
-        false: '',
-      },
     },
   });
 
@@ -54,21 +68,38 @@
   const labelId = `label-${id}`;
   const descriptionId = $derived(description ? `description-${id}` : undefined);
 
+  const parseStyleNumber = (raw: string) => {
+    if (raw === 'none') {
+      return;
+    }
+
+    const value = Number.parseFloat(raw);
+    if (Number.isNaN(value)) {
+      return;
+    }
+
+    return value;
+  };
+
   const autogrow = (element: HTMLTextAreaElement | null) => {
     if (element && grow) {
       element.style.minHeight = '0';
       element.style.height = 'auto';
-      element.style.height = `${element.scrollHeight}px`;
+
+      const style = getComputedStyle(element);
+      const borderTopWidth = parseStyleNumber(style.borderTopWidth) ?? 0;
+      const borderBottomWidth = parseStyleNumber(style.borderBottomWidth) ?? 0;
+      const height = element.scrollHeight + borderTopWidth + borderBottomWidth;
+
+      element.style.height = `${height}px`;
 
       // Show scrollbar only if there is a max-height and content exceeds it
-      const maxHeight = Number.parseFloat(getComputedStyle(element).maxHeight);
+      const maxHeight = parseStyleNumber(style.maxHeight);
       const hasMaxHeight = maxHeight !== undefined;
-      if (hasMaxHeight && element.scrollHeight > maxHeight) {
+      if (hasMaxHeight && height > maxHeight) {
         element.style.overflow = 'auto';
-      } else if (hasMaxHeight && element.scrollHeight <= maxHeight) {
-        element.style.overflow = 'hidden';
       } else {
-        element.style.overflow = '';
+        element.style.overflow = 'hidden';
       }
     }
   };
@@ -99,15 +130,17 @@
       aria-describedby={descriptionId}
       readonly={readOnly}
       aria-readonly={readOnly}
+      {rows}
       class={cleanClass(
-        styles({
-          shape,
-          textSize: size,
-          padding: shape === 'round' ? 'round' : 'base',
-          grow,
-          roundedSize: shape === 'semi-round' ? size : undefined,
-          invalid,
-        }),
+        commonStyles({ textSize: size, grow }),
+        variant === 'input' &&
+          inputStyles({
+            shape,
+            invalid,
+            padding: shape === 'round' ? 'round' : 'base',
+            roundedSize: shape === 'semi-round' ? size : undefined,
+          }),
+        variant === 'ghost' && ghostStyles({ state: invalid ? 'error' : disabled || readOnly ? 'disabled' : 'active' }),
         className,
       )}
       bind:this={ref}

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,9 +156,21 @@ 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;
+    variant?: 'input' | 'ghost';
     class?: string;
     value?: string;
     size?: Size;
@@ -187,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 = {
@@ -199,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 = {
@@ -222,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.2",
+  "version": "0.67.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",