compote-ui 0.44.1 → 0.46.0

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 (8) hide show
  1. package/dist/components/dialog/alert-dialog.svelte +6 -2
  2. package/dist/components/dialog/dialog-root.svelte +6 -2
  3. package/dist/components/drawer/drawer-close-trigger.svelte +7 -2
  4. package/dist/components/drawer/drawer-content.svelte +70 -7
  5. package/dist/components/drawer/drawer-trigger.svelte +8 -6
  6. package/dist/components/drawer/drawer-trigger.svelte.d.ts +6 -4
  7. package/dist/components/splitter/splitter.svelte +2 -2
  8. package/package.json +1 -1
package/dist/components/dialog/alert-dialog.svelte CHANGED
@@ -28,9 +28,13 @@
28
28
  <Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
29
29
  <Portal>
30
30
  <Dialog.Backdrop
31
- class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
31
+ class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
32
+ style="z-index: calc(50 + var(--layer-index, 0))"
32
33
  />
33
- <Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center">
34
+ <Dialog.Positioner
35
+ class="fixed inset-0 flex items-center justify-center"
36
+ style="z-index: calc(50 + var(--layer-index, 0))"
37
+ >
34
38
  <Dialog.Content
35
39
  class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
36
40
  >
package/dist/components/dialog/dialog-root.svelte CHANGED
@@ -17,9 +17,13 @@
17
17
  <Dialog.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
18
18
  <Portal>
19
19
  <Dialog.Backdrop
20
- class="fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
20
+ class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
21
+ style="z-index: calc(50 + var(--layer-index, 0))"
21
22
  />
22
- <Dialog.Positioner class="fixed inset-0 z-50 flex items-center justify-center p-4">
23
+ <Dialog.Positioner
24
+ class="fixed inset-0 flex items-center justify-center p-4"
25
+ style="z-index: calc(50 + var(--layer-index, 0))"
26
+ >
23
27
  <Dialog.Content
24
28
  class={cn(
25
29
  'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
package/dist/components/drawer/drawer-close-trigger.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import { Drawer } from '@ark-ui/svelte/drawer';
3
3
  import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
4
4
  import type { ClassValue } from 'svelte/elements';
5
+ import PhX from '../../icons/PhX.svelte';
5
6
 
6
7
  interface Props extends DrawerCloseTriggerBaseProps {
7
8
  class?: ClassValue;
@@ -13,7 +14,11 @@
13
14
  <Drawer.CloseTrigger
14
15
  {...rest}
15
16
  class={className ??
16
- 'absolute top-12 right-4 flex h-7 w-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-dim hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-[-1px]'}
17
+ 'absolute top-3 right-3 flex size-7 cursor-pointer items-center justify-center rounded border-none bg-transparent text-ink-dim hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-[-1px]'}
17
18
  >
18
- {@render children?.()}
19
+ {#if children}
20
+ {@render children()}
21
+ {:else}
22
+ <PhX />
23
+ {/if}
19
24
  </Drawer.CloseTrigger>
package/dist/components/drawer/drawer-content.svelte CHANGED
@@ -8,16 +8,16 @@
8
8
  class?: ClassValue;
9
9
  }
10
10
 
11
- let { class: className, children, ...rest }: Props = $props();
11
+ let { class: className, children, draggable = false, ...rest }: Props = $props();
12
12
  </script>
13
13
 
14
14
  <Drawer.Content
15
15
  {...rest}
16
+ {draggable}
16
17
  class={cn(
17
- 'relative flex h-full max-h-[96svh] w-full flex-col rounded-t-2xl bg-surface-1 px-5 shadow-xl outline-none',
18
- 'data-[swipe-direction=left]:rounded-none data-[swipe-direction=left]:rounded-r-2xl',
19
- 'data-[swipe-direction=right]:rounded-none data-[swipe-direction=right]:rounded-l-2xl',
20
- 'data-[swipe-direction=up]:rounded-none data-[swipe-direction=up]:rounded-b-2xl',
18
+ 'pointer-events-auto relative flex h-full max-h-[96svh] w-full flex-col bg-surface-1 shadow-xl outline-none',
19
+ 'data-[swipe-direction=left]:max-h-none data-[swipe-direction=left]:max-w-100',
20
+ 'data-[swipe-direction=right]:max-h-none data-[swipe-direction=right]:max-w-100',
21
21
  className
22
22
  )}
23
23
  >
@@ -25,15 +25,78 @@
25
25
  </Drawer.Content>
26
26
 
27
27
  <style>
28
- /* Bottom bleed pseudo-element so background extends below rounded corners */
28
+ /* Side drawers: grabber becomes an absolutely-positioned vertical strip on the open edge */
29
+ :global(
30
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='left']
31
+ [data-scope='drawer'][data-part='grabber'],
32
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='right']
33
+ [data-scope='drawer'][data-part='grabber']
34
+ ) {
35
+ position: absolute;
36
+ top: 0;
37
+ bottom: 0;
38
+ width: auto;
39
+ height: 100%;
40
+ padding: 0 0.75rem;
41
+ }
42
+
43
+ :global(
44
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='left']
45
+ [data-scope='drawer'][data-part='grabber']
46
+ ) {
47
+ right: 0;
48
+ }
49
+
50
+ :global(
51
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='right']
52
+ [data-scope='drawer'][data-part='grabber']
53
+ ) {
54
+ left: 0;
55
+ }
56
+
57
+ :global(
58
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='left']
59
+ [data-scope='drawer'][data-part='grabber-indicator'],
60
+ [data-scope='drawer'][data-part='content'][data-swipe-direction='right']
61
+ [data-scope='drawer'][data-part='grabber-indicator']
62
+ ) {
63
+ width: 4px;
64
+ height: 2.5rem;
65
+ }
66
+
67
+ /* Bleed pseudo-element so background extends past rounded corners on the open edge */
29
68
  :global([data-scope='drawer'][data-part='content'])::after {
30
69
  content: '';
31
70
  position: absolute;
32
- bottom: -50px;
33
71
  left: 0;
34
72
  right: 0;
73
+ top: 100%;
35
74
  height: 50px;
36
75
  background: inherit;
76
+ pointer-events: none;
77
+ }
78
+
79
+ :global([data-scope='drawer'][data-part='content'][data-swipe-direction='up'])::after {
80
+ top: auto;
81
+ bottom: 100%;
82
+ }
83
+
84
+ :global([data-scope='drawer'][data-part='content'][data-swipe-direction='left'])::after {
85
+ top: 0;
86
+ bottom: 0;
87
+ left: auto;
88
+ right: 100%;
89
+ width: 50px;
90
+ height: auto;
91
+ }
92
+
93
+ :global([data-scope='drawer'][data-part='content'][data-swipe-direction='right'])::after {
94
+ top: 0;
95
+ bottom: 0;
96
+ right: auto;
97
+ left: 100%;
98
+ width: 50px;
99
+ height: auto;
37
100
  }
38
101
 
39
102
  /* Slide animations for bottom drawer (default) */
package/dist/components/drawer/drawer-trigger.svelte CHANGED
@@ -1,15 +1,17 @@
1
1
  <script lang="ts">
2
2
  import { Drawer } from '@ark-ui/svelte/drawer';
3
3
  import type { DrawerTriggerBaseProps } from '@ark-ui/svelte/drawer';
4
- import type { ClassValue } from 'svelte/elements';
4
+ import { button, type ButtonSize, type ButtonVariant } from '../button/button.variants';
5
5
 
6
- interface Props extends DrawerTriggerBaseProps {
7
- class?: ClassValue;
8
- }
6
+ type Props = DrawerTriggerBaseProps & {
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ class?: string;
10
+ };
9
11
 
10
- let { class: className, children, ...rest }: Props = $props();
12
+ let { variant, size, class: className, children, ...rest }: Props = $props();
11
13
  </script>
12
14
 
13
- <Drawer.Trigger {...rest} class={className}>
15
+ <Drawer.Trigger {...rest} class={button({ variant, size, class: className })}>
14
16
  {@render children?.()}
15
17
  </Drawer.Trigger>
package/dist/components/drawer/drawer-trigger.svelte.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import type { DrawerTriggerBaseProps } from '@ark-ui/svelte/drawer';
2
- import type { ClassValue } from 'svelte/elements';
3
- interface Props extends DrawerTriggerBaseProps {
4
- class?: ClassValue;
5
- }
2
+ import { type ButtonSize, type ButtonVariant } from '../button/button.variants';
3
+ type Props = DrawerTriggerBaseProps & {
4
+ variant?: ButtonVariant;
5
+ size?: ButtonSize;
6
+ class?: string;
7
+ };
6
8
  declare const DrawerTrigger: import("svelte").Component<Props, {}, "">;
7
9
  type DrawerTrigger = ReturnType<typeof DrawerTrigger>;
8
10
  export default DrawerTrigger;
package/dist/components/splitter/splitter.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  <!-- Divider line -->
46
46
  <div
47
47
  class={cn(
48
- 'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-dragging:bg-primary group-data-disabled:bg-border',
48
+ 'absolute bg-surface-3 transition-colors group-focus-within:bg-primary group-hover:bg-primary/40 group-data-disabled:bg-border group-data-dragging:bg-primary',
49
49
  isHorizontal
50
50
  ? 'inset-y-0 left-1/2 w-px -translate-x-1/2'
51
51
  : 'inset-x-0 top-1/2 h-px -translate-y-1/2'
@@ -54,7 +54,7 @@
54
54
  <!-- Handle pill -->
55
55
  <div
56
56
  class={cn(
57
- 'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-dragging:bg-primary group-data-disabled:invisible',
57
+ 'relative z-10 rounded-full bg-surface-3 shadow-sm transition-colors group-hover:bg-primary/40 group-data-disabled:invisible group-data-dragging:bg-primary',
58
58
  isHorizontal ? 'h-6 w-1' : 'h-1 w-6'
59
59
  )}
60
60
  ></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.44.1",
3
+ "version": "0.46.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev --open",