@websline/system-components 1.3.24 → 1.3.25

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/molecules/toggleGroup/ToggleGroupItem.svelte +25 -26
  2. package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts +15 -45
  3. package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js +12 -25
  4. package/package.json +3 -3
package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte CHANGED
@@ -44,31 +44,30 @@
44
44
  });
45
45
  </script>
46
46
 
47
- <div class={stylesByVariant.base({ class: baseClass })} {...rest}>
48
- <button
49
- class={stylesByVariant.button({ class: className })}
50
- role="tab"
51
- onclick={() => {
52
- store.update(localeValue);
53
- }}
54
- type="button">
47
+ <button
48
+ class={stylesByVariant.base({ class: baseClass || className })}
49
+ role="tab"
50
+ onclick={() => {
51
+ store.update(localeValue);
52
+ }}
53
+ type="button"
54
+ {...rest}>
55
+ {#if icon}
56
+ <Icon
57
+ class={stylesByVariant.icon()}
58
+ name={icon}
59
+ size={variant === "tabs" || size === "small" ? 16 : 24} />
60
+ {/if}
61
+ {#if children}
55
62
  <div class={stylesByVariant.content()}>
56
- {#if icon}
57
- <Icon
58
- class={stylesByVariant.icon()}
59
- name={icon}
60
- size={variant === "tabs" || size === "small" ? 16 : 24} />
61
- {/if}
62
- <span class={stylesByVariant.span()}>
63
- {@render children?.()}
64
- </span>
63
+ {@render children()}
65
64
  </div>
66
- {#if isActive}
67
- <div
68
- class={stylesByVariant.trigger({ appearance })}
69
- in:send={{ key: "active-tab" }}
70
- out:receive={{ key: "active-tab" }}>
71
- </div>
72
- {/if}
73
- </button>
74
- </div>
65
+ {/if}
66
+ {#if isActive}
67
+ <div
68
+ class={stylesByVariant.trigger({ appearance })}
69
+ in:send={{ key: "active-tab" }}
70
+ out:receive={{ key: "active-tab" }}>
71
+ </div>
72
+ {/if}
73
+ </button>
package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts CHANGED
@@ -1,161 +1,131 @@
1
1
  export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
2
2
  isActive: {
3
3
  true: {
4
- button: string;
4
+ base: string;
5
5
  };
6
6
  false: {
7
- button: string;
7
+ base: string;
8
8
  };
9
9
  };
10
10
  size: {
11
- small: {
12
- button: string;
13
- };
14
11
  medium: {
15
- button: string;
16
- span: string;
12
+ content: string;
17
13
  };
18
14
  };
19
15
  width: {
20
16
  full: {
21
17
  base: string;
22
- button: string;
23
18
  };
24
19
  };
25
20
  }, {
26
21
  base: string;
27
- button: string;
28
22
  content: string;
29
23
  icon: string;
30
- span: string;
31
24
  trigger: string;
32
25
  }, undefined, {
33
26
  isActive: {
34
27
  true: {
35
- button: string;
28
+ base: string;
36
29
  };
37
30
  false: {
38
- button: string;
31
+ base: string;
39
32
  };
40
33
  };
41
34
  size: {
42
- small: {
43
- button: string;
44
- };
45
35
  medium: {
46
- button: string;
47
- span: string;
36
+ content: string;
48
37
  };
49
38
  };
50
39
  width: {
51
40
  full: {
52
41
  base: string;
53
- button: string;
54
42
  };
55
43
  };
56
44
  }, {
57
45
  base: string;
58
- button: string;
59
46
  content: string;
60
47
  icon: string;
61
- span: string;
62
48
  trigger: string;
63
49
  }, import("tailwind-variants").TVReturnType<{
64
50
  isActive: {
65
51
  true: {
66
- button: string;
52
+ base: string;
67
53
  };
68
54
  false: {
69
- button: string;
55
+ base: string;
70
56
  };
71
57
  };
72
58
  size: {
73
- small: {
74
- button: string;
75
- };
76
59
  medium: {
77
- button: string;
78
- span: string;
60
+ content: string;
79
61
  };
80
62
  };
81
63
  width: {
82
64
  full: {
83
65
  base: string;
84
- button: string;
85
66
  };
86
67
  };
87
68
  }, {
88
69
  base: string;
89
- button: string;
90
70
  content: string;
91
71
  icon: string;
92
- span: string;
93
72
  trigger: string;
94
73
  }, undefined, unknown, unknown, undefined>>;
95
74
  export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnType<{
96
75
  isActive: {
97
76
  true: {
98
- button: string;
77
+ base: string;
99
78
  };
100
79
  false: {
101
- button: string;
80
+ base: string;
102
81
  };
103
82
  };
104
83
  width: {
105
84
  full: {
106
85
  base: string;
107
- button: string;
108
86
  };
109
87
  };
110
88
  }, {
111
89
  base: string;
112
- button: string;
113
90
  content: string;
114
91
  icon: string;
115
- span: string;
116
92
  trigger: string;
117
93
  }, undefined, {
118
94
  isActive: {
119
95
  true: {
120
- button: string;
96
+ base: string;
121
97
  };
122
98
  false: {
123
- button: string;
99
+ base: string;
124
100
  };
125
101
  };
126
102
  width: {
127
103
  full: {
128
104
  base: string;
129
- button: string;
130
105
  };
131
106
  };
132
107
  }, {
133
108
  base: string;
134
- button: string;
135
109
  content: string;
136
110
  icon: string;
137
- span: string;
138
111
  trigger: string;
139
112
  }, import("tailwind-variants").TVReturnType<{
140
113
  isActive: {
141
114
  true: {
142
- button: string;
115
+ base: string;
143
116
  };
144
117
  false: {
145
- button: string;
118
+ base: string;
146
119
  };
147
120
  };
148
121
  width: {
149
122
  full: {
150
123
  base: string;
151
- button: string;
152
124
  };
153
125
  };
154
126
  }, {
155
127
  base: string;
156
- button: string;
157
128
  content: string;
158
129
  icon: string;
159
- span: string;
160
130
  trigger: string;
161
131
  }, undefined, unknown, unknown, undefined>>;
package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js CHANGED
@@ -2,36 +2,28 @@ import { tv } from "../../../utils/tailwind.js";
2
2
 
3
3
  const toggleGroupItemVariants = tv({
4
4
  slots: {
5
- base: "relative h-full whitespace-nowrap",
6
- button:
7
- "block h-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
8
- content: "relative z-2 flex items-center justify-center",
9
- icon: "shrink-0",
10
- span: "",
5
+ base: "relative inline-flex h-full cursor-pointer items-center justify-center rounded-sm bg-transparent px-1 ui-select-label font-medium whitespace-nowrap transition-[background,color]",
6
+ content: "relative z-2",
7
+ icon: "relative z-2 shrink-0",
11
8
  trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
12
9
  },
13
10
  variants: {
14
11
  isActive: {
15
12
  true: {
16
- button: "text-neutral-900 dark:text-neutral-200",
13
+ base: "text-neutral-900 dark:text-neutral-200",
17
14
  },
18
15
  false: {
19
- button: "text-neutral-500",
16
+ base: "text-neutral-500",
20
17
  },
21
18
  },
22
19
  size: {
23
- small: {
24
- button: "px-1",
25
- },
26
20
  medium: {
27
- button: "px-2.5",
28
- span: "px-2",
21
+ content: "px-2",
29
22
  },
30
23
  },
31
24
  width: {
32
25
  full: {
33
26
  base: "w-full",
34
- button: "w-full",
35
27
  },
36
28
  },
37
29
  },
@@ -39,16 +31,14 @@ const toggleGroupItemVariants = tv({
39
31
  {
40
32
  appearance: "default",
41
33
  class: {
42
- button:
43
- "hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
34
+ base: "hover:bg-neutral-300 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
44
35
  trigger: "dark:bg-neutral-700",
45
36
  },
46
37
  },
47
38
  {
48
39
  appearance: "raised",
49
40
  class: {
50
- button:
51
- "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
41
+ base: "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-600 dark:hover:text-white",
52
42
  trigger: "dark:bg-neutral-800",
53
43
  },
54
44
  },
@@ -57,26 +47,23 @@ const toggleGroupItemVariants = tv({
57
47
 
58
48
  const toggleGroupItemTabVariants = tv({
59
49
  slots: {
60
- base: "relative h-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
61
- button: "h-full cursor-pointer ui-button-default transition-[color]",
62
- content: "flex items-center justify-center gap-1",
50
+ base: "relative inline-flex h-full cursor-pointer items-center justify-center gap-1 ui-button-default whitespace-nowrap transition-[color]",
51
+ content: "",
63
52
  icon: "shrink-0",
64
- span: "",
65
53
  trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
66
54
  },
67
55
  variants: {
68
56
  isActive: {
69
57
  true: {
70
- button: "text-current",
58
+ base: "text-neutral-900 dark:text-neutral-200",
71
59
  },
72
60
  false: {
73
- button: "text-neutral-500 hover:text-current",
61
+ base: "text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-200",
74
62
  },
75
63
  },
76
64
  width: {
77
65
  full: {
78
66
  base: "w-full",
79
- button: "w-full",
80
67
  },
81
68
  },
82
69
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/system-components",
3
- "version": "1.3.24",
3
+ "version": "1.3.25",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "devDependencies": {
53
53
  "@eslint/compat": "^2.0.3",
54
- "@eslint/js": "^9.39.4",
54
+ "@eslint/js": "^10.0.1",
55
55
  "@storybook/addon-a11y": "^10.3.0",
56
56
  "@storybook/addon-docs": "^10.3.0",
57
57
  "@storybook/addon-svelte-csf": "^5.0.12",
@@ -65,7 +65,7 @@
65
65
  "@tailwindcss/vite": "^4.2.2",
66
66
  "@types/node": "^25.5.0",
67
67
  "@vitest/browser": "^4.1.0",
68
- "eslint": "^9.39.4",
68
+ "eslint": "^10.0.3",
69
69
  "eslint-config-prettier": "^10.1.8",
70
70
  "eslint-plugin-storybook": "^10.3.0",
71
71
  "eslint-plugin-svelte": "^3.15.2",