@redis-ui/components 47.2.0 → 47.3.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 (6) hide show
  1. package/dist/ButtonGroup/ButtonGroup.style.cjs +2 -1
  2. package/dist/ButtonGroup/ButtonGroup.style.js +2 -1
  3. package/dist/ButtonGroup/components/Button/Button.style.cjs +8 -4
  4. package/dist/ButtonGroup/components/Button/Button.style.js +8 -4
  5. package/package.json +2 -2
  6. package/skills/redis-ui-components/references/ButtonGroup.md +2 -1
package/dist/ButtonGroup/ButtonGroup.style.cjs CHANGED
@@ -9,12 +9,13 @@ var ButtonGroupWrapper = styled_components.default.div.withConfig({
9
9
  })([
10
10
  "display:flex;align-items:stretch;border-radius:",
11
11
  ";border:",
12
+ ";background-color:",
12
13
  ";overflow:hidden;width:fit-content;font-size:",
13
14
  ";font-style:",
14
15
  ";font-weight:",
15
16
  ";padding:",
16
17
  ";gap:",
17
18
  ";"
18
- ], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.border, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontSize, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontStyle, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontWeight, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.gap);
19
+ ], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.border, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.bgColor, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontSize, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontStyle, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.fontWeight, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.gap);
19
20
  //#endregion
20
21
  exports.ButtonGroupWrapper = ButtonGroupWrapper;
package/dist/ButtonGroup/ButtonGroup.style.js CHANGED
@@ -7,12 +7,13 @@ var ButtonGroupWrapper = _styled.div.withConfig({
7
7
  })([
8
8
  "display:flex;align-items:stretch;border-radius:",
9
9
  ";border:",
10
+ ";background-color:",
10
11
  ";overflow:hidden;width:fit-content;font-size:",
11
12
  ";font-style:",
12
13
  ";font-weight:",
13
14
  ";padding:",
14
15
  ";gap:",
15
16
  ";"
16
- ], () => useTheme().components.buttonGroup.borderRadius, () => useTheme().components.buttonGroup.border, () => useTheme().components.buttonGroup.fontSize, () => useTheme().components.buttonGroup.fontStyle, () => useTheme().components.buttonGroup.fontWeight, () => useTheme().components.buttonGroup.padding, () => useTheme().components.buttonGroup.gap);
17
+ ], () => useTheme().components.buttonGroup.borderRadius, () => useTheme().components.buttonGroup.border, () => useTheme().components.buttonGroup.bgColor, () => useTheme().components.buttonGroup.fontSize, () => useTheme().components.buttonGroup.fontStyle, () => useTheme().components.buttonGroup.fontWeight, () => useTheme().components.buttonGroup.padding, () => useTheme().components.buttonGroup.gap);
17
18
  //#endregion
18
19
  export { ButtonGroupWrapper };
package/dist/ButtonGroup/components/Button/Button.style.cjs CHANGED
@@ -9,14 +9,18 @@ var Button = styled_components.default.button.withConfig({
9
9
  displayName: "Buttonstyle__Button",
10
10
  componentId: "RedisUI__sc-m6kucg-0"
11
11
  })([
12
- "cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
12
+ "cursor:pointer;border-style:solid;border-width:",
13
+ ";font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
13
14
  ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:",
14
15
  ";padding:",
15
16
  ";justify-content:center;align-items:center;gap:",
16
- ";&:not(:last-child){border-inline-end:",
17
- ";}&:disabled{cursor:not-allowed;}",
17
+ ";&:disabled{cursor:not-allowed;}",
18
18
  " ",
19
19
  ";"
20
- ], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.minWidth, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.gap, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.border, ({ isSelected }) => require_Button_style_utils.getButtonStatesStyle((0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [require_css_utils.tokenMaps.bgColor, require_css_utils.tokenMaps.textColor]), (0, _redislabsdev_redis_ui_styles.getFocusStyle)("-2px"));
20
+ ], () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderWidth ?? "0", () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.minWidth, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.borderRadius, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.padding, () => (0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.gap, ({ isSelected }) => require_Button_style_utils.getButtonStatesStyle((0, _redislabsdev_redis_ui_styles.useTheme)().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [
21
+ require_css_utils.tokenMaps.bgColor,
22
+ require_css_utils.tokenMaps.textColor,
23
+ require_css_utils.tokenMaps.borderColor
24
+ ]), (0, _redislabsdev_redis_ui_styles.getFocusStyle)("-2px"));
21
25
  //#endregion
22
26
  exports.Button = Button;
package/dist/ButtonGroup/components/Button/Button.style.js CHANGED
@@ -7,14 +7,18 @@ var Button = _styled.button.withConfig({
7
7
  displayName: "Buttonstyle__Button",
8
8
  componentId: "RedisUI__sc-m6kucg-0"
9
9
  })([
10
- "cursor:pointer;border:none;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
10
+ "cursor:pointer;border-style:solid;border-width:",
11
+ ";font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:1.25;max-width:100%;min-width:",
11
12
  ";text-align:center;text-decoration:none;transition:color 0.13s ease-in-out,background-color 0.13s ease-in-out,border-color 0.13s ease-in-out,box-shadow 0.13s ease-in-out;@media (prefers-reduced-motion:reduce){transition:none;}user-select:none;vertical-align:middle;white-space:nowrap;display:flex;border-radius:",
12
13
  ";padding:",
13
14
  ";justify-content:center;align-items:center;gap:",
14
- ";&:not(:last-child){border-inline-end:",
15
- ";}&:disabled{cursor:not-allowed;}",
15
+ ";&:disabled{cursor:not-allowed;}",
16
16
  " ",
17
17
  ";"
18
- ], () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, () => useTheme().components.buttonGroup.button.border, ({ isSelected }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [tokenMaps.bgColor, tokenMaps.textColor]), getFocusStyle("-2px"));
18
+ ], () => useTheme().components.buttonGroup.button.borderWidth ?? "0", () => useTheme().components.buttonGroup.button.minWidth, () => useTheme().components.buttonGroup.button.borderRadius, () => useTheme().components.buttonGroup.button.padding, () => useTheme().components.buttonGroup.button.gap, ({ isSelected }) => getButtonStatesStyle(useTheme().components.buttonGroup.button.toggleStates[isSelected ? "on" : "off"], [
19
+ tokenMaps.bgColor,
20
+ tokenMaps.textColor,
21
+ tokenMaps.borderColor
22
+ ]), getFocusStyle("-2px"));
19
23
  //#endregion
20
24
  export { Button };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@redis-ui/components",
3
3
  "license": "UNLICENSED",
4
- "version": "47.2.0",
4
+ "version": "47.3.0",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "repository": "git@github.com:redislabsdev/redis-ui.git",
@@ -30,7 +30,7 @@
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@redis-ui/icons": "^8.0.0",
33
- "@redis-ui/styles": "^16.3.0",
33
+ "@redis-ui/styles": "^16.4.0",
34
34
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
35
35
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
36
36
  "styled-components": "^5.0.0"
package/skills/redis-ui-components/references/ButtonGroup.md CHANGED
@@ -53,7 +53,8 @@ import { InfoIcon, ShardIcon, StarsIcon } from '@redis-ui/icons';
53
53
  const items = [
54
54
  { value: 'item1', label: 'Button 1', icon: ShardIcon, disabled: true },
55
55
  { value: 'item2', label: 'Button 2', icon: StarsIcon },
56
- { value: 'item3', label: 'Button 3' }
56
+ { value: 'item3', label: 'Button 3' },
57
+ { value: 'item4', label: 'Button 4' }
57
58
  ];
58
59
 
59
60
  const [selected, setSelected] = useState<string>(items[0].value);