@celar-ui/svelte 2.0.2 → 2.1.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 (17) hide show
  1. package/dist/containment/Container.svelte +15 -2
  2. package/dist/containment/Container.svelte.d.ts +3 -0
  3. package/dist/containment/styles/container.css +1 -16
  4. package/dist/containment/styles/surface-container.css +1 -21
  5. package/dist/inputs/ColorInput.svelte +1 -1
  6. package/dist/inputs/FileInput.svelte +1 -1
  7. package/dist/inputs/Slider.svelte +2 -2
  8. package/dist/inputs/TextInput.svelte +1 -1
  9. package/dist/overlay/CommandDialog.svelte +3 -0
  10. package/dist/overlay/CommandDialog.svelte.d.ts +3 -0
  11. package/dist/overlay/Dialog.svelte +9 -0
  12. package/dist/overlay/Dialog.svelte.d.ts +3 -0
  13. package/dist/overlay/MinimalDialog.svelte +9 -0
  14. package/dist/overlay/MinimalDialog.svelte.d.ts +3 -0
  15. package/dist/overlay/styles/dialog.css +9 -0
  16. package/package.json +1 -1
  17. package/src/styles/index.css +49 -0
package/dist/containment/Container.svelte CHANGED
@@ -6,13 +6,26 @@
6
6
  xs?: boolean;
7
7
  sm?: boolean;
8
8
  md?: boolean;
9
+ lg?: boolean;
10
+ xl?: boolean;
11
+ x2xl?: boolean;
9
12
  fluid?: boolean;
10
13
  }
11
14
 
12
- let { children, xs, sm, md, fluid, ...rest }: ContainerProps = $props();
15
+ let { children, xs, sm, md, lg, xl, x2xl, fluid, ...rest }: ContainerProps = $props();
13
16
  </script>
14
17
 
15
- <section {...rest} data-container data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
18
+ <section
19
+ {...rest}
20
+ data-container
21
+ data-xs={xs}
22
+ data-sm={sm}
23
+ data-md={md}
24
+ data-lg={lg}
25
+ data-xl={xl}
26
+ data-2xl={x2xl}
27
+ data-fluid={fluid}
28
+ >
16
29
  {#if children}
17
30
  {@render children()}
18
31
  {/if}
package/dist/containment/Container.svelte.d.ts CHANGED
@@ -4,6 +4,9 @@ export interface ContainerProps extends HTMLAttributes<HTMLElement> {
4
4
  xs?: boolean;
5
5
  sm?: boolean;
6
6
  md?: boolean;
7
+ lg?: boolean;
8
+ xl?: boolean;
9
+ x2xl?: boolean;
7
10
  fluid?: boolean;
8
11
  }
9
12
  declare const Container: import("svelte").Component<ContainerProps, {}, "">;
package/dist/containment/styles/container.css CHANGED
@@ -2,25 +2,10 @@
2
2
 
3
3
  @layer components {
4
4
  [data-container] {
5
+ @apply container-sizing;
5
6
  position: relative;
6
7
  margin: 0 auto;
7
8
  padding: --spacing(4);
8
9
  box-sizing: border-box;
9
-
10
- &[data-xs='true'] {
11
- max-width: var(--breakpoint-xs);
12
- }
13
-
14
- &[data-sm='true'] {
15
- max-width: var(--breakpoint-sm);
16
- }
17
-
18
- &[data-md='true'] {
19
- max-width: var(--breakpoint-md);
20
- }
21
-
22
- &[data-fluid='true'] {
23
- width: 100%;
24
- }
25
10
  }
26
11
  }
package/dist/containment/styles/surface-container.css CHANGED
@@ -2,28 +2,8 @@
2
2
 
3
3
  @layer components {
4
4
  [data-surface-container] {
5
- --color-background: var(--color-surface);
6
-
5
+ @apply elevated;
7
6
  border-radius: var(--radius-4xl);
8
7
  background-color: var(--color-background);
9
-
10
- &[data-elevated='0'] {
11
- --color-background: var(--color-surfaceContainerLowest);
12
- }
13
- &[data-elevated='1'] {
14
- --color-background: var(--color-surface);
15
- }
16
- &[data-elevated='2'] {
17
- --color-background: var(--color-surfaceContainerLow);
18
- }
19
- &[data-elevated='3'] {
20
- --color-background: var(--color-surfaceContainer);
21
- }
22
- &[data-elevated='4'] {
23
- --color-background: var(--color-surfaceContainerHigh);
24
- }
25
- &[data-elevated='5'] {
26
- --color-background: var(--color-surfaceContainerHighest);
27
- }
28
8
  }
29
9
  }
package/dist/inputs/ColorInput.svelte CHANGED
@@ -29,7 +29,7 @@
29
29
  justify-content: flex-start;
30
30
  align-items: center;
31
31
  border-radius: var(--radius-2xl);
32
- padding: --spacing(1.5) 0;
32
+ padding: --spacing(2) 0;
33
33
  width: 100%;
34
34
 
35
35
  > input {
package/dist/inputs/FileInput.svelte CHANGED
@@ -34,7 +34,7 @@
34
34
  justify-content: flex-start;
35
35
  align-items: center;
36
36
  border-radius: var(--radius-2xl);
37
- padding: --spacing(1.5) 0;
37
+ padding: --spacing(2) 0;
38
38
  width: 100%;
39
39
 
40
40
  input {
package/dist/inputs/Slider.svelte CHANGED
@@ -34,7 +34,7 @@
34
34
  @apply bg-primary h-2 rounded-2xl;
35
35
  }
36
36
  @utility thumb {
37
- @apply bg-primary box-border h-8 w-8 rounded-[50%] border-none;
37
+ @apply bg-primary box-border h-6 w-6 rounded-[50%] border-none;
38
38
  }
39
39
 
40
40
  @layer components {
@@ -77,7 +77,7 @@
77
77
  }
78
78
 
79
79
  &::-webkit-slider-thumb {
80
- margin-top: calc(0.5 * (--spacing(2) - --spacing(8)));
80
+ margin-top: calc(0.5 * --spacing(-4));
81
81
  @apply thumb;
82
82
  }
83
83
  &::-moz-range-thumb {
package/dist/inputs/TextInput.svelte CHANGED
@@ -35,7 +35,7 @@
35
35
  @apply border-onBackground/20 rounded-2xl border border-solid transition-all;
36
36
  box-sizing: border-box;
37
37
  background-color: transparent;
38
- padding: --spacing(1.5) --spacing(4);
38
+ padding: --spacing(2) --spacing(4);
39
39
  padding-left: --spacing(14);
40
40
  width: 100%;
41
41
  font-size: inherit;
package/dist/overlay/CommandDialog.svelte CHANGED
@@ -9,6 +9,9 @@
9
9
  xs?: boolean;
10
10
  sm?: boolean;
11
11
  md?: boolean;
12
+ lg?: boolean;
13
+ xl?: boolean;
14
+ x2xl?: boolean;
12
15
  fluid?: boolean;
13
16
  transitionDuration?: number;
14
17
  placeholder?: string;
package/dist/overlay/CommandDialog.svelte.d.ts CHANGED
@@ -8,6 +8,9 @@ type CommandDialogProps = MinimalDialogProps & {
8
8
  xs?: boolean;
9
9
  sm?: boolean;
10
10
  md?: boolean;
11
+ lg?: boolean;
12
+ xl?: boolean;
13
+ x2xl?: boolean;
11
14
  fluid?: boolean;
12
15
  transitionDuration?: number;
13
16
  placeholder?: string;
package/dist/overlay/Dialog.svelte CHANGED
@@ -13,6 +13,9 @@
13
13
  xs?: boolean;
14
14
  sm?: boolean;
15
15
  md?: boolean;
16
+ lg?: boolean;
17
+ xl?: boolean;
18
+ x2xl?: boolean;
16
19
  fluid?: boolean;
17
20
  transitionDuration?: number;
18
21
  };
@@ -26,6 +29,9 @@
26
29
  xs,
27
30
  sm,
28
31
  md,
32
+ lg,
33
+ xl,
34
+ x2xl,
29
35
  fluid,
30
36
  transitionDuration = 200,
31
37
  ...rest
@@ -52,6 +58,9 @@
52
58
  data-xs={xs}
53
59
  data-sm={sm}
54
60
  data-md={md}
61
+ data-lg={lg}
62
+ data-xl={xl}
63
+ data-2xl={x2xl}
55
64
  data-fluid={fluid}
56
65
  data-celar-dialog-content
57
66
  >
package/dist/overlay/Dialog.svelte.d.ts CHANGED
@@ -11,6 +11,9 @@ export type DialogProps = Omit<DialogContentProps, 'title'> & {
11
11
  xs?: boolean;
12
12
  sm?: boolean;
13
13
  md?: boolean;
14
+ lg?: boolean;
15
+ xl?: boolean;
16
+ x2xl?: boolean;
14
17
  fluid?: boolean;
15
18
  transitionDuration?: number;
16
19
  };
package/dist/overlay/MinimalDialog.svelte CHANGED
@@ -10,6 +10,9 @@
10
10
  xs?: boolean;
11
11
  sm?: boolean;
12
12
  md?: boolean;
13
+ lg?: boolean;
14
+ xl?: boolean;
15
+ x2xl?: boolean;
13
16
  fluid?: boolean;
14
17
  transitionDuration?: number;
15
18
  };
@@ -21,6 +24,9 @@
21
24
  xs,
22
25
  sm,
23
26
  md,
27
+ lg,
28
+ xl,
29
+ x2xl,
24
30
  fluid,
25
31
  transitionDuration = 200,
26
32
  ...rest
@@ -47,6 +53,9 @@
47
53
  data-xs={xs}
48
54
  data-sm={sm}
49
55
  data-md={md}
56
+ data-lg={lg}
57
+ data-xl={xl}
58
+ data-2xl={x2xl}
50
59
  data-fluid={fluid}
51
60
  data-celar-dialog-content
52
61
  >
package/dist/overlay/MinimalDialog.svelte.d.ts CHANGED
@@ -9,6 +9,9 @@ export type MinimalDialogProps = DialogContentProps & {
9
9
  xs?: boolean;
10
10
  sm?: boolean;
11
11
  md?: boolean;
12
+ lg?: boolean;
13
+ xl?: boolean;
14
+ x2xl?: boolean;
12
15
  fluid?: boolean;
13
16
  transitionDuration?: number;
14
17
  };
package/dist/overlay/styles/dialog.css CHANGED
@@ -35,6 +35,15 @@
35
35
  &[data-md='true'] {
36
36
  max-width: min(calc(100% - --spacing(8)), var(--breakpoint-md));
37
37
  }
38
+ &[data-lg='true'] {
39
+ max-width: min(calc(100% - --spacing(8)), var(--breakpoint-lg));
40
+ }
41
+ &[data-xl='true'] {
42
+ max-width: min(calc(100% - --spacing(8)), var(--breakpoint-xl));
43
+ }
44
+ &[data-2xl='true'] {
45
+ max-width: min(calc(100% - --spacing(8)), var(--breakpoint-2xl));
46
+ }
38
47
  &[data-fluid='true'] {
39
48
  width: 100%;
40
49
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@celar-ui/svelte",
3
- "version": "2.0.2",
3
+ "version": "2.1.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "cuikho210",
package/src/styles/index.css CHANGED
@@ -4,3 +4,52 @@
4
4
  @theme {
5
5
  --breakpoint-xs: 30rem;
6
6
  }
7
+
8
+ @utility container-sizing {
9
+ &[data-xs='true'] {
10
+ max-width: var(--breakpoint-xs);
11
+ }
12
+ &[data-sm='true'] {
13
+ max-width: var(--breakpoint-sm);
14
+ }
15
+ &[data-md='true'] {
16
+ max-width: var(--breakpoint-md);
17
+ }
18
+ &[data-lg='true'] {
19
+ max-width: var(--breakpoint-lg);
20
+ }
21
+ &[data-xl='true'] {
22
+ max-width: var(--breakpoint-xl);
23
+ }
24
+ &[data-2xl='true'] {
25
+ max-width: var(--breakpoint-2xl);
26
+ }
27
+ &[data-fluid='true'] {
28
+ width: 100%;
29
+ }
30
+ }
31
+
32
+ @utility elevated {
33
+ --color-background: var(--color-surface);
34
+
35
+ &[data-elevated='0'] {
36
+ --color-background: var(--color-surfaceContainerLowest);
37
+ }
38
+ &[data-elevated='1'] {
39
+ --color-background: var(--color-surface);
40
+ }
41
+ &[data-elevated='2'] {
42
+ --color-background: var(--color-surfaceContainerLow);
43
+ }
44
+ &[data-elevated='3'] {
45
+ --color-background: var(--color-surfaceContainer);
46
+ }
47
+ &[data-elevated='4'] {
48
+ --color-background: var(--color-surfaceContainerHigh);
49
+ }
50
+ &[data-elevated='5'] {
51
+ --color-background: var(--color-surfaceContainerHighest);
52
+ }
53
+
54
+ background-color: var(--color-background);
55
+ }