@immich/ui 0.44.0 → 0.45.0

package/dist/theme/default.css

@@ -1,13 +1,78 @@
+/**
+* Default theme variables for Immich UI components
+* Generate color pallet from https://www.tints.dev/ with lock at 500 value
+*/
+
 @import 'tailwindcss';
 
 @theme inline {
-  --color-primary: rgb(var(--immich-ui-primary));
+  --color-primary-50: var(--immich-ui-primary-50);
+  --color-primary-100: var(--immich-ui-primary-100);
+  --color-primary-200: var(--immich-ui-primary-200);
+  --color-primary-300: var(--immich-ui-primary-300);
+  --color-primary-400: var(--immich-ui-primary-400);
+  --color-primary-500: var(--immich-ui-primary-500);
+  --color-primary-600: var(--immich-ui-primary-600);
+  --color-primary-700: var(--immich-ui-primary-700);
+  --color-primary-800: var(--immich-ui-primary-800);
+  --color-primary-900: var(--immich-ui-primary-900);
+  --color-primary-950: var(--immich-ui-primary-950);
+
+  --color-success-50: var(--immich-ui-success-50);
+  --color-success-100: var(--immich-ui-success-100);
+  --color-success-200: var(--immich-ui-success-200);
+  --color-success-300: var(--immich-ui-success-300);
+  --color-success-400: var(--immich-ui-success-400);
+  --color-success-500: var(--immich-ui-success-500);
+  --color-success-600: var(--immich-ui-success-600);
+  --color-success-700: var(--immich-ui-success-700);
+  --color-success-800: var(--immich-ui-success-800);
+  --color-success-900: var(--immich-ui-success-900);
+  --color-success-950: var(--immich-ui-success-950);
+
+  --color-danger-50: var(--immich-ui-danger-50);
+  --color-danger-100: var(--immich-ui-danger-100);
+  --color-danger-200: var(--immich-ui-danger-200);
+  --color-danger-300: var(--immich-ui-danger-300);
+  --color-danger-400: var(--immich-ui-danger-400);
+  --color-danger-500: var(--immich-ui-danger-500);
+  --color-danger-600: var(--immich-ui-danger-600);
+  --color-danger-700: var(--immich-ui-danger-700);
+  --color-danger-800: var(--immich-ui-danger-800);
+  --color-danger-900: var(--immich-ui-danger-900);
+  --color-danger-950: var(--immich-ui-danger-950);
+
+  --color-warning-50: var(--immich-ui-warning-50);
+  --color-warning-100: var(--immich-ui-warning-100);
+  --color-warning-200: var(--immich-ui-warning-200);
+  --color-warning-300: var(--immich-ui-warning-300);
+  --color-warning-400: var(--immich-ui-warning-400);
+  --color-warning-500: var(--immich-ui-warning-500);
+  --color-warning-600: var(--immich-ui-warning-600);
+  --color-warning-700: var(--immich-ui-warning-700);
+  --color-warning-800: var(--immich-ui-warning-800);
+  --color-warning-900: var(--immich-ui-warning-900);
+  --color-warning-950: var(--immich-ui-warning-950);
+
+  --color-info-50: var(--immich-ui-info-50);
+  --color-info-100: var(--immich-ui-info-100);
+  --color-info-200: var(--immich-ui-info-200);
+  --color-info-300: var(--immich-ui-info-300);
+  --color-info-400: var(--immich-ui-info-400);
+  --color-info-500: var(--immich-ui-info-500);
+  --color-info-600: var(--immich-ui-info-600);
+  --color-info-700: var(--immich-ui-info-700);
+  --color-info-800: var(--immich-ui-info-800);
+  --color-info-900: var(--immich-ui-info-900);
+  --color-info-950: var(--immich-ui-info-950);
+
+  --color-primary: var(--immich-ui-primary-500);
+  --color-success: var(--immich-ui-success-500);
+  --color-danger: var(--immich-ui-danger-500);
+  --color-warning: var(--immich-ui-warning-500);
+  --color-info: var(--immich-ui-info-500);
   --color-light: rgb(var(--immich-ui-light));
-  --color-dark: rgb(var(--immich-ui-dark));
-  --color-success: rgb(var(--immich-ui-success));
-  --color-danger: rgb(var(--immich-ui-danger));
-  --color-warning: rgb(var(--immich-ui-warning));
-  --color-info: rgb(var(--immich-ui-info));
+  --color-dark: var(--immich-ui-dark);
   --color-muted: rgb(var(--immich-ui-muted));
   --color-subtle: rgb(var(--immich-ui-gray));
 }
@@ -18,31 +83,139 @@
   :root,
   .light {
     /* light */
-    --immich-ui-primary: 66 80 175;
-    --immich-ui-dark: 20 22 26;
+    --immich-ui-primary-50: oklch(0.949 0.016 282.34);
+    --immich-ui-primary-100: oklch(0.897 0.033 281.96);
+    --immich-ui-primary-200: oklch(0.787 0.07 281.03);
+    --immich-ui-primary-300: oklch(0.686 0.106 278.96);
+    --immich-ui-primary-400: oklch(0.577 0.142 275.93);
+    --immich-ui-primary-500: oklch(0.473 0.151 272.94);
+    --immich-ui-primary-600: oklch(0.404 0.129 273.18);
+    --immich-ui-primary-700: oklch(0.343 0.109 272.56);
+    --immich-ui-primary-800: oklch(0.272 0.088 272.94);
+    --immich-ui-primary-900: oklch(0.211 0.068 273.01);
+    --immich-ui-primary-950: oklch(0.15 0.05 273.01);
+
+    --immich-ui-success-50: oklch(0.969 0.048 153.5);
+    --immich-ui-success-100: oklch(0.926 0.124 152.83);
+    --immich-ui-success-200: oklch(0.864 0.223 152.18);
+    --immich-ui-success-300: oklch(0.804 0.206 152.33);
+    --immich-ui-success-400: oklch(0.755 0.194 152.36);
+    --immich-ui-success-500: oklch(0.698 0.179 152.3);
+    --immich-ui-success-600: oklch(0.588 0.151 152.25);
+    --immich-ui-success-700: oklch(0.469 0.12 152.39);
+    --immich-ui-success-800: oklch(0.359 0.093 152.23);
+    --immich-ui-success-900: oklch(0.243 0.063 151.99);
+    --immich-ui-success-950: oklch(0.169 0.042 151.99);
+
+    --immich-ui-danger-50: oklch(0.976 0.008 17.52);
+    --immich-ui-danger-100: oklch(0.951 0.015 17.54);
+    --immich-ui-danger-200: oklch(0.867 0.046 18.1);
+    --immich-ui-danger-300: oklch(0.778 0.085 19.18);
+    --immich-ui-danger-400: oklch(0.696 0.129 20.93);
+    --immich-ui-danger-500: oklch(0.608 0.179 24.17);
+    --immich-ui-danger-600: oklch(0.518 0.153 24.17);
+    --immich-ui-danger-700: oklch(0.422 0.124 24.12);
+    --immich-ui-danger-800: oklch(0.331 0.098 24.2);
+    --immich-ui-danger-900: oklch(0.231 0.069 24.25);
+    --immich-ui-danger-950: oklch(0.184 0.055 24.33);
+
+    --immich-ui-warning: oklch(0.689 0.133 67.56);
+    --immich-ui-warning-50: oklch(0.974 0.013 67.56);
+    --immich-ui-warning-100: oklch(0.947 0.029 67.56);
+    --immich-ui-warning-200: oklch(0.892 0.061 67.56);
+    --immich-ui-warning-300: oklch(0.825 0.097 67.56);
+    --immich-ui-warning-400: oklch(0.757 0.115 67.56);
+    --immich-ui-warning-500: oklch(0.689 0.133 67.56);
+    --immich-ui-warning-600: oklch(0.604 0.117 67.56);
+    --immich-ui-warning-700: oklch(0.509 0.099 67.56);
+    --immich-ui-warning-800: oklch(0.418 0.081 67.56);
+    --immich-ui-warning-900: oklch(0.341 0.066 67.56);
+    --immich-ui-warning-950: oklch(0.273 0.053 67.56);
+
+    --immich-ui-info-50: oklch(0.967 0.018 254.53);
+    --immich-ui-info-100: oklch(0.933 0.037 254.53);
+    --immich-ui-info-200: oklch(0.862 0.078 254.53);
+    --immich-ui-info-300: oklch(0.768 0.126 254.53);
+    --immich-ui-info-400: oklch(0.667 0.152 254.53);
+    --immich-ui-info-500: oklch(0.567 0.177 254.53);
+    --immich-ui-info-600: oklch(0.492 0.155 254.53);
+    --immich-ui-info-700: oklch(0.419 0.132 254.53);
+    --immich-ui-info-800: oklch(0.347 0.109 254.53);
+    --immich-ui-info-900: oklch(0.285 0.089 254.53);
+    --immich-ui-info-950: oklch(0.232 0.073 254.53);
+
     --immich-ui-light: 255 255 255;
-    --immich-ui-success: 16 188 99;
-    --immich-ui-danger: 200 60 60;
-    --immich-ui-warning: 216 143 64;
-    --immich-ui-info: 8 111 230;
+    --immich-ui-dark: rgb(63, 60, 60);
     --immich-ui-muted: 161 161 161;
     --immich-ui-gray: 246 246 246;
-
     --immich-ui-default-border: 209 213 219;
   }
 
   .dark {
-    /* dark */
-    --immich-ui-primary: 172 203 250;
+    --immich-ui-primary-50: oklch(0.982 0.007 268.63);
+    --immich-ui-primary-100: oklch(0.966 0.015 260.75);
+    --immich-ui-primary-200: oklch(0.932 0.03 262.55);
+    --immich-ui-primary-300: oklch(0.906 0.041 260.95);
+    --immich-ui-primary-400: oklch(0.871 0.057 259.89);
+    --immich-ui-primary-500: oklch(0.836 0.074 258.58);
+    --immich-ui-primary-600: oklch(0.526 0.063 256.86);
+    --immich-ui-primary-700: oklch(0.449 0.054 257.6);
+    --immich-ui-primary-800: oklch(0.372 0.045 257.42);
+    --immich-ui-primary-900: oklch(0.258 0.032 258.31);
+    --immich-ui-primary-950: oklch(0.198 0.023 257.29);
+
+    --immich-ui-success-50: oklch(0.979 0.027 157.32);
+    --immich-ui-success-100: oklch(0.969 0.043 155.86);
+    --immich-ui-success-200: oklch(0.937 0.09 156.81);
+    --immich-ui-success-300: oklch(0.894 0.164 156.29);
+    --immich-ui-success-400: oklch(0.866 0.186 156.06);
+    --immich-ui-success-500: oklch(0.842 0.181 156.04);
+    --immich-ui-success-600: oklch(0.699 0.151 155.85);
+    --immich-ui-success-700: oklch(0.555 0.119 156.26);
+    --immich-ui-success-800: oklch(0.419 0.089 156.41);
+    --immich-ui-success-900: oklch(0.279 0.06 155.24);
+    --immich-ui-success-950: oklch(0.181 0.04 155.24);
+
+    --immich-ui-danger-50: oklch(0.975 0.011 17.5);
+    --immich-ui-danger-100: oklch(0.943 0.025 17.67);
+    --immich-ui-danger-200: oklch(0.894 0.049 18.13);
+    --immich-ui-danger-300: oklch(0.836 0.079 18.9);
+    --immich-ui-danger-400: oklch(0.781 0.112 19.92);
+    --immich-ui-danger-500: oklch(0.727 0.149 21.41);
+    --immich-ui-danger-600: oklch(0.622 0.232 27.33);
+    --immich-ui-danger-700: oklch(0.505 0.188 27.33);
+    --immich-ui-danger-800: oklch(0.387 0.144 27.27);
+    --immich-ui-danger-900: oklch(0.262 0.097 27.31);
+    --immich-ui-danger-950: oklch(0.207 0.077 27.3);
+
+    --immich-ui-warning-50: oklch(0.993 0.005 67.8);
+    --immich-ui-warning-100: oklch(0.975 0.017 67.63);
+    --immich-ui-warning-200: oklch(0.958 0.029 67.47);
+    --immich-ui-warning-300: oklch(0.934 0.048 69.18);
+    --immich-ui-warning-400: oklch(0.907 0.07 70.22);
+    --immich-ui-warning-500: oklch(0.888 0.089 72.24);
+    --immich-ui-warning-600: oklch(0.738 0.153 79.79);
+    --immich-ui-warning-700: oklch(0.589 0.122 79.52);
+    --immich-ui-warning-800: oklch(0.442 0.092 79.1);
+    --immich-ui-warning-900: oklch(0.286 0.059 78.61);
+    --immich-ui-warning-950: oklch(0.197 0.039 78.61);
+
+    --immich-ui-info-50: oklch(0.975 0.012 259.84);
+    --immich-ui-info-100: oklch(0.956 0.021 261.78);
+    --immich-ui-info-200: oklch(0.905 0.046 259.51);
+    --immich-ui-info-300: oklch(0.861 0.068 259.36);
+    --immich-ui-info-400: oklch(0.811 0.096 255.92);
+    --immich-ui-info-500: oklch(0.767 0.122 253.35);
+    --immich-ui-info-600: oklch(0.638 0.166 246.52);
+    --immich-ui-info-700: oklch(0.516 0.135 246.69);
+    --immich-ui-info-800: oklch(0.386 0.1 246.5);
+    --immich-ui-info-900: oklch(0.265 0.07 247.05);
+    --immich-ui-info-950: oklch(0.186 0.049 247.05);
+
     --immich-ui-light: 0 0 0;
-    --immich-ui-dark: 229 231 235;
-    --immich-ui-success: 72 237 152;
-    --immich-ui-danger: 246 125 125;
-    --immich-ui-warning: 254 197 132;
-    --immich-ui-info: 121 183 254;
+    --immich-ui-dark: rgb(221, 221, 221);
     --immich-ui-muted: 212 212 212;
     --immich-ui-gray: 33 33 33;
-
     --immich-ui-default-border: 33 33 33;
   }
 

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type { Translations } from './services/translation.svelte.js';
+import type { DateTime } from 'luxon';
 import type { Component, Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes, HTMLLabelAttributes, HTMLTextareaAttributes } from 'svelte/elements';
 export type Color = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -104,8 +105,7 @@ export type FieldContext = {
     description?: string;
     invalid?: boolean;
     disabled?: boolean;
-    required?: boolean;
-    requiredIndicator?: boolean;
+    required?: boolean | 'indicator';
     readOnly?: boolean;
 } & LabelProps;
 type BaseInputProps<T> = {
@@ -162,7 +162,6 @@ export type ToastId = {
 };
 type ToastCommonProps = {
     color?: Color;
-    variant?: ToastVariant;
 };
 export type ToastContentProps = ToastCommonProps & {
     title?: string | Snippet;
@@ -233,6 +232,15 @@ export type ContextMenuBaseProps = MenuProps & {
 export type ContextMenuProps = ContextMenuBaseProps & {
     onClose: () => void;
 };
+export type DatePickerProps = {
+    onChange?: (date: DateTime | undefined) => void;
+    value?: DateTime | undefined;
+    minDate?: DateTime;
+    maxDate?: DateTime;
+    size?: Size;
+    shape?: Shape;
+    class?: string;
+};
 export type IfLike = {
     $if?: () => boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -47,6 +47,7 @@
     "vitest": "^4.0.0"
   },
   "dependencies": {
+    "@internationalized/date": "^3.10.0",
     "@mdi/js": "^7.4.47",
     "bits-ui": "^2.9.8",
     "luxon": "^3.7.2",