@immich/ui 0.22.0 → 0.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/Modal/Modal.svelte +14 -6
  2. package/dist/styles.d.ts +2 -70
  3. package/dist/theme/default.css +1 -1
  4. package/package.json +3 -3
package/dist/components/Modal/Modal.svelte CHANGED
@@ -37,7 +37,7 @@
37
37
  }: Props = $props();
38
38
 
39
39
  const modalStyles = tv({
40
- base: 'bg-light dark:bg-subtle flex rounded-none border-none sm:rounded-2xl',
40
+ base: 'bg-light dark:bg-subtle border-subtle shadow-primary/20 flex rounded-none border shadow-sm sm:rounded-2xl dark:border-white/10',
41
41
  variants: {
42
42
  size: {
43
43
  tiny: 'h-full sm:h-min md:max-w-sm',
@@ -65,32 +65,40 @@
65
65
  <Dialog.Portal>
66
66
  <Dialog.Overlay class="absolute start-0 top-0 flex h-dvh w-screen bg-black/30" />
67
67
  <Dialog.Content
68
+ onkeydown={(e) => {
69
+ if (e.key === 'Escape' && open) {
70
+ // Stop propagation to ensure modals close before immich-web takes over
71
+ e.stopPropagation();
72
+ open = false;
73
+ onClose?.();
74
+ }
75
+ }}
68
76
  class={cleanClass(
69
77
  'absolute start-0 top-0 flex h-dvh w-screen items-center justify-center overflow-hidden sm:p-4',
70
78
  )}
71
79
  >
72
- <div class={cleanClass('flex h-full w-full flex-col items-center justify-center ')}>
80
+ <div class={cleanClass('flex h-full w-full flex-col items-center justify-center')}>
73
81
  <Card class={cleanClass(modalStyles({ size }), className)}>
74
- <CardHeader class="border-b border-gray-400 py-3 dark:border-gray-500">
82
+ <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
75
83
  <div class="flex items-center justify-between gap-2">
76
84
  {#if typeof icon === 'string'}
77
85
  <Icon {icon} size="1.5rem" aria-hidden />
78
86
  {:else if icon}
79
87
  <Logo variant="icon" size="tiny" />
80
88
  {/if}
81
- <CardTitle tag="p" class="grow">{title}</CardTitle>
89
+ <CardTitle tag="p" class="text-dark/90 grow text-lg font-semibold">{title}</CardTitle>
82
90
  <Dialog.Close>
83
91
  <CloseButton onclick={() => onChange(false)} class="-me-2" />
84
92
  </Dialog.Close>
85
93
  </div>
86
94
  </CardHeader>
87
95
 
88
- <CardBody class="grow p-5">
96
+ <CardBody class="grow px-5">
89
97
  {@render bodyChildren?.snippet()}
90
98
  </CardBody>
91
99
 
92
100
  {#if footerChildren}
93
- <CardFooter class="border-t border-gray-400 dark:border-gray-500">
101
+ <CardFooter class="border-t border-gray-200 dark:border-white/10">
94
102
  {@render footerChildren.snippet()}
95
103
  </CardFooter>
96
104
  {/if}
package/dist/styles.d.ts CHANGED
@@ -16,41 +16,7 @@ export declare const styles: {
16
16
  warning: string;
17
17
  info: string;
18
18
  };
19
- }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
20
- size: {
21
- tiny: string;
22
- small: string;
23
- medium: string;
24
- large: string;
25
- giant: string;
26
- };
27
- color: {
28
- muted: string;
29
- primary: string;
30
- secondary: string;
31
- success: string;
32
- danger: string;
33
- warning: string;
34
- info: string;
35
- };
36
- }, {
37
- size: {
38
- tiny: string;
39
- small: string;
40
- medium: string;
41
- large: string;
42
- giant: string;
43
- };
44
- color: {
45
- muted: string;
46
- primary: string;
47
- secondary: string;
48
- success: string;
49
- danger: string;
50
- warning: string;
51
- info: string;
52
- };
53
- }>, {
19
+ }, undefined, "", {
54
20
  size: {
55
21
  tiny: string;
56
22
  small: string;
@@ -84,39 +50,5 @@ export declare const styles: {
84
50
  warning: string;
85
51
  info: string;
86
52
  };
87
- }, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
88
- size: {
89
- tiny: string;
90
- small: string;
91
- medium: string;
92
- large: string;
93
- giant: string;
94
- };
95
- color: {
96
- muted: string;
97
- primary: string;
98
- secondary: string;
99
- success: string;
100
- danger: string;
101
- warning: string;
102
- info: string;
103
- };
104
- }, {
105
- size: {
106
- tiny: string;
107
- small: string;
108
- medium: string;
109
- large: string;
110
- giant: string;
111
- };
112
- color: {
113
- muted: string;
114
- primary: string;
115
- secondary: string;
116
- success: string;
117
- danger: string;
118
- warning: string;
119
- info: string;
120
- };
121
- }>, unknown, unknown, undefined>>;
53
+ }, undefined, "", unknown, unknown, undefined>>;
122
54
  };
package/dist/theme/default.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --immich-ui-info: 121 183 254;
40
40
  --immich-ui-gray: 33 33 33;
41
41
 
42
- --immich-ui-default-border: 55 65 81;
42
+ --immich-ui-default-border: 33 33 33;
43
43
  }
44
44
 
45
45
  *,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@immich/ui",
3
- "version": "0.22.0",
3
+ "version": "0.22.2",
4
4
  "license": "GNU Affero General Public License version 3",
5
5
  "scripts": {
6
6
  "create": "node scripts/create.js",
@@ -68,9 +68,9 @@
68
68
  },
69
69
  "dependencies": {
70
70
  "@mdi/js": "^7.4.47",
71
- "bits-ui": "^1.0.0-next.46",
71
+ "bits-ui": "^1.5.3",
72
72
  "tailwind-merge": "^2.5.4",
73
- "tailwind-variants": "^0.3.0"
73
+ "tailwind-variants": "^1.0.0"
74
74
  },
75
75
  "volta": {
76
76
  "node": "22.15.0"