milk-lib 0.0.14 → 0.0.15

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 (14) hide show
  1. package/README.md +7 -0
  2. package/dist/components/ButtonMilk/ButtonMilk.scss +23 -21
  3. package/dist/components/TextInputMilk/TextInputMilk.scss +81 -0
  4. package/dist/components/TextInputMilk/TextInputMilk.svelte +39 -0
  5. package/dist/components/TextInputMilk/TextInputMilk.svelte.d.ts +7 -0
  6. package/dist/components/TextInputMilk/TextInputMilk.types.d.ts +7 -0
  7. package/dist/components/TextInputMilk/TextInputMilk.types.js +1 -0
  8. package/dist/components/TextInputMilk/index.d.ts +2 -0
  9. package/dist/components/TextInputMilk/index.js +2 -0
  10. package/dist/components/ThemeProvider/ThemeDefault.js +11 -6
  11. package/dist/components/ThemeProvider/ThemeProvider.types.d.ts +6 -0
  12. package/dist/components/index.d.ts +1 -0
  13. package/dist/components/index.js +1 -0
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -1,3 +1,10 @@
1
1
  # MilkLib Sveltekit components library
2
2
 
3
3
  Sveltekit library, powered by [`sv`](https://npmjs.com/package/sv).
4
+
5
+ ## Todo
6
+ - Sync ButtonMilk and TextInputMilk css variables with global theme
7
+
8
+ ## Roadmap
9
+ - TextInput
10
+ - Control
package/dist/components/ButtonMilk/ButtonMilk.scss CHANGED
@@ -46,39 +46,41 @@
46
46
  --color: var(--text-base-main);
47
47
  }
48
48
 
49
- .Button.Button-lg[data-variant="milk"] {
50
- --padding-y: 7px;
51
- --padding-x: 20px;
52
- --font-size: 16px;
53
- --line-height: 24px;
54
- --border-radius: 8px;
55
- --inner-gap: 6px;
49
+ .Button.Button-sm[data-variant="milk"] {
50
+ --padding-y: 5px;
51
+ --padding-x: 10px;
52
+ --font-size: var(--font-size-sm);
53
+ --line-height: var(--line-height-sm);
54
+ --border-radius: var(--border-radius-button-sm);
55
+ --inner-gap: 3px;
56
56
  &.Button-icon {
57
- --padding-y: 11px;
58
- --padding-x: 11px;
57
+ --padding-y: 6px;
58
+ --padding-x: 6px;
59
59
  }
60
60
  }
61
+
61
62
  .Button.Button-md[data-variant="milk"] {
62
63
  --padding-y: 5px;
63
64
  --padding-x: 16px;
64
- --font-size: 14px;
65
- --line-height: 20px;
66
- --border-radius: 8px;
65
+ --font-size: var(--font-size-md);
66
+ --line-height: var(--line-height-md);
67
+ --border-radius: var(--border-radius-button);
67
68
  --inner-gap: 5px;
68
69
  &.Button-icon {
69
70
  --padding-y: 8px;
70
71
  --padding-x: 8px;
71
72
  }
72
73
  }
73
- .Button.Button-sm[data-variant="milk"] {
74
- --padding-y: 5px;
75
- --padding-x: 10px;
76
- --font-size: 12px;
77
- --line-height: 14px;
78
- --border-radius: 6px;
79
- --inner-gap: 3px;
74
+
75
+ .Button.Button-lg[data-variant="milk"] {
76
+ --padding-y: 7px;
77
+ --padding-x: 20px;
78
+ --font-size: var(--font-size-lg);
79
+ --line-height: var(--line-height-lg);
80
+ --border-radius: var(--border-radius-button);
81
+ --inner-gap: 6px;
80
82
  &.Button-icon {
81
- --padding-y: 6px;
82
- --padding-x: 6px;
83
+ --padding-y: 11px;
84
+ --padding-x: 11px;
83
85
  }
84
86
  }
package/dist/components/TextInputMilk/TextInputMilk.scss ADDED
@@ -0,0 +1,81 @@
1
+ .TextInput.TextInput-sm {
2
+ --padding-y: 5px;
3
+ --padding-x: 5px;
4
+ --font-size: var(--font-size-sm);
5
+ --line-height: var(--line-height-sm);
6
+ --border-radius: var(--border-radius-button-sm);
7
+ }
8
+
9
+ .TextInput.TextInput-md {
10
+ --padding-y: 5px;
11
+ --padding-x: 6px;
12
+ --font-size: var(--font-size-md);
13
+ --line-height: var(--line-height-md);
14
+ --border-radius: var(--border-radius-button);
15
+ }
16
+
17
+ .TextInput.TextInput-lg {
18
+ --padding-y: 7px;
19
+ --padding-x: 12px;
20
+ --font-size: var(--font-size-lg);
21
+ --line-height: var(--line-height-lg);
22
+ --border-radius: var(--border-radius-button);
23
+ }
24
+
25
+ .TextInput.TextInput-text {
26
+ --padding-x: 0px;
27
+ --border-radius: 0;
28
+ --border-width: 0px;
29
+ --background-color: transparent;
30
+ --border-color: transparent;
31
+ --border-color-focus: transparent;
32
+ }
33
+ .TextInput.TextInput-underlined {
34
+ --padding-x: 0px;
35
+
36
+ --border-radius: 0;
37
+ --border-style: solid;
38
+ --border-width: var(--stroke-base);
39
+ --border-top-width: 0px;
40
+ --border-bottom-width: var(--border-width);
41
+ --border-left-width: 0px;
42
+ --border-right-width: 0px;
43
+
44
+ --background-color: #fff;
45
+ --border-color: #D3D5DC;
46
+ --border-color-focus: #151617;
47
+
48
+ --background-disabled: var(--background-color);
49
+ --border-color-disabled: var(--border-color);
50
+ --opacity-disabled: 0.6;
51
+
52
+ --border-style-disabled: dashed;
53
+ --border-width-disabled: var(--border-width);
54
+ --border-top-width-disabled: 0px;
55
+ --border-bottom-width-disabled: var(--border-width-disabled);
56
+ --border-left-width-disabled: 0px;
57
+ --border-right-width-disabled: 0px;
58
+
59
+ --background-readonly: var(--background-disabled);
60
+ --border-color-readonly: var(--border-color);
61
+ --opacity-readonly: var(--opacity-disabled);
62
+
63
+ --border-style-readonly: dashed;
64
+ --border-width-readonly: var(--border-width);
65
+ --border-top-width-readonly: 0px;
66
+ --border-bottom-width-readonly: var(--border-width);
67
+ --border-left-width-readonly: 0px;
68
+ --border-right-width-readonly: 0px;
69
+
70
+ --border-color-invalid: #EA6D60;
71
+ --background-invalid: var(--background-color);
72
+ --border-style-invalid: var(--border-style);
73
+ --border-width-invalid: var(--border-width);
74
+ --border-top-width-invalid: 0px;
75
+ --border-bottom-width-invalid: var(--border-width);
76
+ --border-left-width-invalid: 0px;
77
+ --border-right-width-invalid: 0px;
78
+ }
79
+ .TextInput.TextInput-contained {
80
+ // Default
81
+ }
package/dist/components/TextInputMilk/TextInputMilk.svelte ADDED
@@ -0,0 +1,39 @@
1
+ <script lang="ts">
2
+ import { TextInput, type TextInputInstance } from '../..';
3
+ import type { ITextInputMilkProps } from './TextInputMilk.types';
4
+
5
+ import "./TextInputMilk.scss";
6
+
7
+ let {
8
+ size = 'sm',
9
+ variant = 'contained',
10
+ value = $bindable(),
11
+ ...rest
12
+ }: ITextInputMilkProps = $props();
13
+
14
+ // Прокидываем фокус примитива
15
+ let textInputRef: TextInputInstance;
16
+ export const focus = () => textInputRef.focus();
17
+
18
+ let sizeClassName =
19
+ size === "sm" ? "TextInput-sm"
20
+ : size === "md" ? "TextInput-md"
21
+ : size === "lg" ? "TextInput-lg"
22
+ : "";
23
+
24
+ let variantClassname =
25
+ variant === "text" ? "TextInput-text"
26
+ : variant === "underlined" ? "TextInput-underlined"
27
+ : variant === "contained" ? "TextInput-contained" : ""
28
+
29
+ let classNames = `${sizeClassName} ${variantClassname}`;
30
+
31
+ </script>
32
+
33
+
34
+ <TextInput
35
+ bind:value
36
+ bind:this={textInputRef}
37
+ {classNames}
38
+ {...rest}
39
+ />
package/dist/components/TextInputMilk/TextInputMilk.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { ITextInputMilkProps } from './TextInputMilk.types';
2
+ import "./TextInputMilk.scss";
3
+ declare const TextInputMilk: import("svelte").Component<ITextInputMilkProps, {
4
+ focus: () => void;
5
+ }, "value">;
6
+ type TextInputMilk = ReturnType<typeof TextInputMilk>;
7
+ export default TextInputMilk;
package/dist/components/TextInputMilk/TextInputMilk.types.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { ITextInputProps } from '../TextInput/TextInput.types';
2
+ export type TextInputMilkSizes = 'sm' | 'md' | 'lg';
3
+ export type TextInputMilkVariants = 'underlined' | 'contained' | 'text';
4
+ export interface ITextInputMilkProps extends ITextInputProps {
5
+ size?: TextInputMilkSizes;
6
+ variant?: TextInputMilkVariants;
7
+ }
package/dist/components/TextInputMilk/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default as TextInputMilk } from './TextInputMilk.svelte';
2
+ export * from './TextInputMilk.types';
package/dist/components/TextInputMilk/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as TextInputMilk } from './TextInputMilk.svelte';
2
+ export * from './TextInputMilk.types';
package/dist/components/ThemeProvider/ThemeDefault.js CHANGED
@@ -12,7 +12,6 @@ export const themeDefault = {
12
12
  '--line-success': '#B6F7CB',
13
13
  '--line-danger': '#FBC4BF',
14
14
  '--line-secondary': '#BEB6F9',
15
- // Add line-emp
16
15
  '--bg-base': '#fff',
17
16
  '--bg-base-100': '#EDEEF0',
18
17
  '--bg-base-200': '#E2E4E8',
@@ -64,10 +63,10 @@ export const themeDefault = {
64
63
  '--icon-primary-main': '#C29B09',
65
64
  '--icon-success-main': '#077129',
66
65
  '--icon-danger-main': '#C42A1A',
67
- '--border-radius-button-sm': '5',
68
- '--border-radius-button': '8',
69
- '--border-radius-panel': '12',
70
- '--border-radius-window': '20',
66
+ '--border-radius-button-sm': '5px',
67
+ '--border-radius-button': '8px',
68
+ '--border-radius-panel': '12px',
69
+ '--border-radius-window': '20px',
71
70
  '--stroke-base': '1px',
72
71
  '--stroke-button': 'var(--stroke-base)',
73
72
  '--spacing-xs-1': '4',
@@ -86,5 +85,11 @@ export const themeDefault = {
86
85
  '--zindex-modal': '1055',
87
86
  '--zindex-popover': '1070',
88
87
  '--zindex-tooltip': '1080',
89
- '--zindex-toast': '1090'
88
+ '--zindex-toast': '1090',
89
+ '--font-size-sm': '12px',
90
+ '--line-height-sm': '14px',
91
+ '--font-size-md': '14px',
92
+ '--line-height-md': '20px',
93
+ '--font-size-lg': '16px',
94
+ '--line-height-lg': '24px',
90
95
  };
package/dist/components/ThemeProvider/ThemeProvider.types.d.ts CHANGED
@@ -87,4 +87,10 @@ export interface ITheme {
87
87
  '--zindex-popover': string;
88
88
  '--zindex-tooltip': string;
89
89
  '--zindex-toast': string;
90
+ '--font-size-sm': string;
91
+ '--line-height-sm': string;
92
+ '--font-size-md': string;
93
+ '--line-height-md': string;
94
+ '--font-size-lg': string;
95
+ '--line-height-lg': string;
90
96
  }
package/dist/components/index.d.ts CHANGED
@@ -7,4 +7,5 @@ export * from './Button';
7
7
  export * from './ButtonMilk';
8
8
  export * from './Badge';
9
9
  export * from './TextInput';
10
+ export * from './TextInputMilk';
10
11
  export * from './Label';
package/dist/components/index.js CHANGED
@@ -7,4 +7,5 @@ export * from './Button';
7
7
  export * from './ButtonMilk';
8
8
  export * from './Badge';
9
9
  export * from './TextInput';
10
+ export * from './TextInputMilk';
10
11
  export * from './Label';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "milk-lib",
3
3
  "license": "MIT",
4
- "version": "0.0.14",
4
+ "version": "0.0.15",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && npm run prepack",