@algolia/satellite 1.10.1 → 1.11.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 (142) hide show
  1. package/dist/cjs/Actions/Accordion/Accordion.d.ts +27 -18
  2. package/dist/cjs/Actions/Button/Button.tailwind.js +27 -42
  3. package/dist/cjs/Actions/Button/PolymorphicIconButton.d.ts +34 -5
  4. package/dist/cjs/Actions/Button/types.d.ts +30 -9
  5. package/dist/cjs/Actions/Button/types.js +2 -0
  6. package/dist/cjs/Actions/ButtonGroup/ButtonGroup.d.ts +6 -1
  7. package/dist/cjs/Actions/Switch/Switch.d.ts +21 -1
  8. package/dist/cjs/Actions/Switch/SwitchOption.d.ts +9 -0
  9. package/dist/cjs/Actions/Switch/types.d.ts +2 -1
  10. package/dist/cjs/Actions/Switch/types.js +3 -1
  11. package/dist/cjs/Actions/ToggleButton/ToggleButton.d.ts +9 -0
  12. package/dist/cjs/Actions/ToggleButton/ToggleButtonBase.d.ts +33 -2
  13. package/dist/cjs/Actions/ToggleButton/ToggleButtonBase.js +1 -1
  14. package/dist/cjs/Actions/ToggleGroup/ToggleGroup.d.ts +18 -6
  15. package/dist/cjs/Avatars/ApplicationAvatar/ApplicationAvatar.d.ts +10 -3
  16. package/dist/cjs/Avatars/UserAvatar/UserAvatar.d.ts +13 -5
  17. package/dist/cjs/Avatars/types.d.ts +23 -1
  18. package/dist/cjs/Avatars/types.js +3 -1
  19. package/dist/cjs/Fields/AutoComplete/components/AutoCompleteEmptyState.d.ts +6 -2
  20. package/dist/cjs/Fields/AutoComplete/types.d.ts +144 -5
  21. package/dist/cjs/Fields/Checkbox/Checkbox.d.ts +5 -2
  22. package/dist/cjs/Fields/DateInput/DateInput.d.ts +47 -0
  23. package/dist/cjs/Fields/DateInput/DateInput.js +169 -0
  24. package/dist/cjs/Fields/DateInput/index.d.ts +1 -0
  25. package/dist/cjs/Fields/DateInput/index.js +16 -0
  26. package/dist/cjs/Fields/DatePicker/DatePicker/DatePicker.d.ts +42 -0
  27. package/dist/cjs/Fields/DatePicker/DatePicker/DatePicker.js +1 -0
  28. package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.d.ts +36 -0
  29. package/dist/cjs/Fields/DatePicker/DateRangePicker/DateRangePicker.js +1 -0
  30. package/dist/cjs/Fields/DatePicker/components/Popover.d.ts +1 -0
  31. package/dist/cjs/Fields/DatePicker/components/Popover.js +5 -1
  32. package/dist/cjs/Fields/DatePicker/types.d.ts +21 -0
  33. package/dist/cjs/Fields/Dropzone/Dropzone.d.ts +85 -6
  34. package/dist/cjs/Fields/Field/Field.d.ts +32 -9
  35. package/dist/cjs/Fields/Form/stories/Complex.js +22 -12
  36. package/dist/cjs/Fields/Input/Input.d.ts +18 -1
  37. package/dist/cjs/Fields/Input/Input.js +5 -3
  38. package/dist/cjs/Fields/RadioGroup/RadioButton.d.ts +68 -2
  39. package/dist/cjs/Fields/RadioGroup/RadioGroup.d.ts +27 -10
  40. package/dist/cjs/Fields/RadioGroup/RadioGroup.js +20 -77
  41. package/dist/cjs/Fields/RadioGroup/RadioGroupItem.d.ts +20 -0
  42. package/dist/cjs/Fields/RadioGroup/RadioGroupItem.js +71 -0
  43. package/dist/cjs/Fields/RadioGroup/index.d.ts +1 -0
  44. package/dist/cjs/Fields/RadioGroup/index.js +11 -0
  45. package/dist/cjs/Fields/RangeSlider/RangeSlider.d.ts +48 -3
  46. package/dist/cjs/Fields/Select/Select.d.ts +3 -0
  47. package/dist/cjs/Fields/TextArea/TextArea.d.ts +16 -0
  48. package/dist/cjs/Fields/Toggle/Toggle.d.ts +51 -3
  49. package/dist/cjs/Fields/index.d.ts +1 -0
  50. package/dist/cjs/Fields/index.js +11 -0
  51. package/dist/cjs/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +6 -4
  52. package/dist/cjs/Helpers/HelpUnderline/HelpUnderline.d.ts +9 -1
  53. package/dist/cjs/Helpers/Medallion/Medallion.d.ts +14 -1
  54. package/dist/cjs/Helpers/Medallion/Medallion.js +11 -10
  55. package/dist/cjs/Helpers/Medallion/Medallion.tailwind.js +1 -1
  56. package/dist/cjs/Helpers/Medallion/types.d.ts +1 -1
  57. package/dist/cjs/Helpers/Separator/Separator.d.ts +10 -0
  58. package/dist/cjs/Helpers/TextWrap/TextWrap.d.ts +8 -2
  59. package/dist/cjs/Helpers/TextWrap/TextWrap.js +1 -1
  60. package/dist/cjs/Helpers/UserContent/UserContent.d.ts +10 -1
  61. package/dist/cjs/Icons/index.d.ts +1 -1
  62. package/dist/cjs/Icons/index.js +6 -0
  63. package/dist/cjs/Indicators/Badge/Badge.d.ts +6 -2
  64. package/dist/cjs/Indicators/Tag/Tag.tailwind.js +13 -4
  65. package/dist/cjs/Navigation/Stepper/Step.js +28 -25
  66. package/dist/cjs/Overlay/MenuButton/components/CustomTrigger.d.ts +1 -1
  67. package/dist/cjs/Overlay/MenuButton/components/CustomTrigger.js +12 -4
  68. package/dist/cjs/Overlay/Popover/types.d.ts +4 -0
  69. package/dist/cjs/Overlay/Tooltip/types.d.ts +3 -0
  70. package/dist/cjs/Satellite/locale.d.ts +2 -1
  71. package/dist/esm/Actions/Accordion/Accordion.d.ts +27 -18
  72. package/dist/esm/Actions/Button/Button.tailwind.js +27 -44
  73. package/dist/esm/Actions/Button/PolymorphicIconButton.d.ts +34 -5
  74. package/dist/esm/Actions/Button/types.d.ts +30 -9
  75. package/dist/esm/Actions/Button/types.js +1 -0
  76. package/dist/esm/Actions/ButtonGroup/ButtonGroup.d.ts +6 -1
  77. package/dist/esm/Actions/Switch/Switch.d.ts +21 -1
  78. package/dist/esm/Actions/Switch/SwitchOption.d.ts +9 -0
  79. package/dist/esm/Actions/Switch/types.d.ts +2 -1
  80. package/dist/esm/Actions/Switch/types.js +1 -1
  81. package/dist/esm/Actions/ToggleButton/ToggleButton.d.ts +9 -0
  82. package/dist/esm/Actions/ToggleButton/ToggleButtonBase.d.ts +33 -2
  83. package/dist/esm/Actions/ToggleButton/ToggleButtonBase.js +1 -1
  84. package/dist/esm/Actions/ToggleGroup/ToggleGroup.d.ts +18 -6
  85. package/dist/esm/Avatars/ApplicationAvatar/ApplicationAvatar.d.ts +10 -3
  86. package/dist/esm/Avatars/UserAvatar/UserAvatar.d.ts +13 -5
  87. package/dist/esm/Avatars/types.d.ts +23 -1
  88. package/dist/esm/Avatars/types.js +1 -1
  89. package/dist/esm/Fields/AutoComplete/components/AutoCompleteEmptyState.d.ts +6 -2
  90. package/dist/esm/Fields/AutoComplete/types.d.ts +144 -5
  91. package/dist/esm/Fields/Checkbox/Checkbox.d.ts +5 -2
  92. package/dist/esm/Fields/DateInput/DateInput.d.ts +47 -0
  93. package/dist/esm/Fields/DateInput/DateInput.js +162 -0
  94. package/dist/esm/Fields/DateInput/index.d.ts +1 -0
  95. package/dist/esm/Fields/DateInput/index.js +1 -0
  96. package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.d.ts +42 -0
  97. package/dist/esm/Fields/DatePicker/DatePicker/DatePicker.js +1 -0
  98. package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.d.ts +36 -0
  99. package/dist/esm/Fields/DatePicker/DateRangePicker/DateRangePicker.js +1 -0
  100. package/dist/esm/Fields/DatePicker/components/Popover.d.ts +1 -0
  101. package/dist/esm/Fields/DatePicker/components/Popover.js +5 -1
  102. package/dist/esm/Fields/DatePicker/types.d.ts +21 -0
  103. package/dist/esm/Fields/Dropzone/Dropzone.d.ts +85 -6
  104. package/dist/esm/Fields/Field/Field.d.ts +32 -9
  105. package/dist/esm/Fields/Form/stories/Complex.js +23 -13
  106. package/dist/esm/Fields/Input/Input.d.ts +18 -1
  107. package/dist/esm/Fields/Input/Input.js +5 -3
  108. package/dist/esm/Fields/RadioGroup/RadioButton.d.ts +68 -2
  109. package/dist/esm/Fields/RadioGroup/RadioGroup.d.ts +27 -10
  110. package/dist/esm/Fields/RadioGroup/RadioGroup.js +20 -77
  111. package/dist/esm/Fields/RadioGroup/RadioGroupItem.d.ts +20 -0
  112. package/dist/esm/Fields/RadioGroup/RadioGroupItem.js +64 -0
  113. package/dist/esm/Fields/RadioGroup/index.d.ts +1 -0
  114. package/dist/esm/Fields/RadioGroup/index.js +2 -1
  115. package/dist/esm/Fields/RangeSlider/RangeSlider.d.ts +48 -3
  116. package/dist/esm/Fields/Select/Select.d.ts +3 -0
  117. package/dist/esm/Fields/TextArea/TextArea.d.ts +16 -0
  118. package/dist/esm/Fields/Toggle/Toggle.d.ts +51 -3
  119. package/dist/esm/Fields/index.d.ts +1 -0
  120. package/dist/esm/Fields/index.js +1 -0
  121. package/dist/esm/Helpers/ClickAwayContainer/ClickAwayContainer.d.ts +6 -4
  122. package/dist/esm/Helpers/HelpUnderline/HelpUnderline.d.ts +9 -1
  123. package/dist/esm/Helpers/Medallion/Medallion.d.ts +14 -1
  124. package/dist/esm/Helpers/Medallion/Medallion.js +11 -10
  125. package/dist/esm/Helpers/Medallion/Medallion.tailwind.js +1 -1
  126. package/dist/esm/Helpers/Medallion/types.d.ts +1 -1
  127. package/dist/esm/Helpers/Separator/Separator.d.ts +10 -0
  128. package/dist/esm/Helpers/TextWrap/TextWrap.d.ts +8 -2
  129. package/dist/esm/Helpers/TextWrap/TextWrap.js +1 -1
  130. package/dist/esm/Helpers/UserContent/UserContent.d.ts +10 -1
  131. package/dist/esm/Icons/index.d.ts +1 -1
  132. package/dist/esm/Icons/index.js +1 -1
  133. package/dist/esm/Indicators/Badge/Badge.d.ts +6 -2
  134. package/dist/esm/Indicators/Tag/Tag.tailwind.js +13 -4
  135. package/dist/esm/Navigation/Stepper/Step.js +28 -25
  136. package/dist/esm/Overlay/MenuButton/components/CustomTrigger.d.ts +1 -1
  137. package/dist/esm/Overlay/MenuButton/components/CustomTrigger.js +12 -4
  138. package/dist/esm/Overlay/Popover/types.d.ts +4 -0
  139. package/dist/esm/Overlay/Tooltip/types.d.ts +3 -0
  140. package/dist/esm/Satellite/locale.d.ts +2 -1
  141. package/dist/satellite.min.css +1 -1
  142. package/package.json +3 -3
@@ -2,34 +2,37 @@ import * as RadixAccordion from "@radix-ui/react-accordion";
2
2
  import type { ReactNode, VFC } from "react";
3
3
  import type { IconComponentType } from "../../Icons";
4
4
  declare type AccordionSharedProps = {
5
+ /**
6
+ * The content of the `Accordion`.
7
+ */
5
8
  children: ReactNode;
6
9
  /**
7
- * Defines a class name for the `Accordion`.
10
+ * The class name of the `Accordion`.
8
11
  */
9
12
  className?: string;
10
13
  /**
11
- * Defines whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
14
+ * Whether the `Accordion` is disabled, preventing the user from interacting with the accordion and all its items.
12
15
  */
13
16
  disabled?: boolean;
14
17
  };
15
18
  declare type AccordionSingleProps = {
16
19
  /**
17
- * Defines whether a single or multiple items can be expanded at a time.
20
+ * Whether a single or multiple items can be expanded at a time.
18
21
  * @default false
19
22
  */
20
23
  multiple?: false;
21
24
  /**
22
- * Defines the controlled value of the item to expand when `multiple` is `false`.
25
+ * The controlled value of the item to expand when `multiple` is `false`.
23
26
  * Must be used in conjunction with `onValueChange`.
24
27
  */
25
28
  value?: RadixAccordion.AccordionSingleProps["value"];
26
29
  /**
27
- * Defines the value of the item to expand when initially rendered and `multiple` is `false`.
30
+ * The value of the item to expand when initially rendered and `multiple` is `false`.
28
31
  * Use when you do not need to control the state of the items.
29
32
  */
30
33
  defaultValue?: RadixAccordion.AccordionSingleProps["defaultValue"];
31
34
  /**
32
- * Defines the event handler called when the expanded state of an item changes and `multiple` is `false`.
35
+ * The event handler called when the expanded state of an item changes and `multiple` is `false`.
33
36
  */
34
37
  onChange?: RadixAccordion.AccordionSingleProps["onValueChange"];
35
38
  /**
@@ -40,22 +43,22 @@ declare type AccordionSingleProps = {
40
43
  };
41
44
  declare type AccordionMultipleProps = {
42
45
  /**
43
- * Defines whether a single or multiple items can be expanded at a time.
46
+ * Whether a single or multiple items can be expanded at a time.
44
47
  * @default false
45
48
  */
46
49
  multiple: true;
47
50
  /**
48
- * Defines the controlled value of the item to expand when `multiple` is `true`.
51
+ * The controlled value of the item to expand when `multiple` is `true`.
49
52
  * Must be used in conjunction with `onValueChange`.
50
53
  */
51
54
  value?: RadixAccordion.AccordionMultipleProps["value"];
52
55
  /**
53
- * Defines the value of the item to expand when initially rendered when `multiple` is `true`.
56
+ * The value of the item to expand when initially rendered when `multiple` is `true`.
54
57
  * Use when you do not need to control the state of the items.
55
58
  */
56
59
  defaultValue?: RadixAccordion.AccordionMultipleProps["defaultValue"];
57
60
  /**
58
- * Defines the event handler called when the expanded state of an item changes and `multiple` is `true`.
61
+ * The event handler called when the expanded state of an item changes and `multiple` is `true`.
59
62
  */
60
63
  onChange?: RadixAccordion.AccordionMultipleProps["onValueChange"];
61
64
  /**
@@ -65,27 +68,30 @@ declare type AccordionMultipleProps = {
65
68
  };
66
69
  export declare type AccordionProps = AccordionSharedProps & (AccordionSingleProps | AccordionMultipleProps);
67
70
  export declare type AccordionItemProps = {
71
+ /**
72
+ * Defines the content of the `AccordionItem`.
73
+ */
68
74
  children: ReactNode;
69
75
  /**
70
- * Defines a class name for the item.
76
+ * Defines a class name for the `AccordionItem`.
71
77
  */
72
78
  className?: string;
73
79
  /**
74
- * Defines a unique value for the item.
80
+ * Defines a unique value for the `AccordionItem`.
75
81
  */
76
82
  value: string;
77
83
  /**
78
- * Defines whether the item is disabled, preventing the user from interacting with the item.
84
+ * Defines whether the `AccordionItem` is disabled, preventing the user from interacting with it.
79
85
  */
80
86
  disabled?: boolean;
81
87
  };
82
88
  export declare type AccordionHeaderProps = {
83
89
  /**
84
- * Defines the title of the header.
90
+ * Defines the title of the `AccordionHeader`.
85
91
  */
86
92
  children: ReactNode;
87
93
  /**
88
- * Defines a class name for the header.
94
+ * Defines a class name for the `AccordionHeader`.
89
95
  */
90
96
  className?: string;
91
97
  /**
@@ -101,11 +107,11 @@ export declare type AccordionHeaderProps = {
101
107
  */
102
108
  iconBgClassName?: string;
103
109
  /**
104
- * Defines a description for the header.
110
+ * Defines a description for the `AccordionHeader`.
105
111
  */
106
112
  description?: ReactNode;
107
113
  /**
108
- * Defines a meta value for the header.
114
+ * Defines a meta value for the `AccordionHeader`.
109
115
  */
110
116
  meta?: ReactNode;
111
117
  /**
@@ -119,9 +125,12 @@ export declare type AccordionHeaderProps = {
119
125
  triggerClassName?: string;
120
126
  };
121
127
  export declare type AccordionContentProps = {
128
+ /**
129
+ * Defines the content of the `AccordionContent`.
130
+ */
122
131
  children: ReactNode;
123
132
  /**
124
- * Defines a class name for the content.
133
+ * Defines a class name for the `AccordionContent`.
125
134
  */
126
135
  className?: string;
127
136
  };
@@ -2,8 +2,6 @@
2
2
 
3
3
  // @ts-check
4
4
  var plugin = require("tailwindcss/plugin");
5
- var disabledColor = require("../../styles/disabledColor");
6
- var rgba = require("../../styles/rgba");
7
5
  var buttonPlugin = plugin(function (_ref) {
8
6
  var addComponents = _ref.addComponents,
9
7
  theme = _ref.theme;
@@ -24,83 +22,58 @@ var buttonPlugin = plugin(function (_ref) {
24
22
  ".btn-subtle": {
25
23
  color: theme("colors.accent.600"),
26
24
  "&:hover": {
27
- backgroundColor: rgba(theme("colors.grey.300"), 0.15)
25
+ backgroundColor: theme("colors.grey.100")
28
26
  },
29
27
  "&:active, &.btn-active": {
30
- color: theme("colors.accent.600"),
31
- backgroundColor: theme("colors.accent.100"),
32
- boxShadow: "none"
28
+ backgroundColor: theme("colors.grey.200")
33
29
  },
34
30
  "&:disabled, &.btn-disabled": {
35
31
  background: "none",
36
- boxShadow: "none",
37
32
  color: theme("colors.grey.300")
38
33
  }
39
34
  },
40
35
  ".btn-neutral": {
41
36
  color: theme("colors.grey.900"),
42
37
  backgroundColor: theme("colors.white"),
43
- backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.50"), " 100%)"),
44
38
  border: "1px solid ".concat(theme("colors.grey.200")),
45
- boxShadow: "0 1px 0 0 ".concat(theme("colors.shadow.5")),
46
39
  "&:hover": {
47
- backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
48
- borderColor: theme("colors.grey.200")
40
+ backgroundColor: theme("colors.grey.100")
41
+ },
42
+ "&:focus-visible": {
43
+ borderColor: "transparent"
49
44
  },
50
45
  "&:active, &.btn-active": {
51
- borderColor: theme("colors.grey.200"),
52
- boxShadow: "\n inset 0 1px 4px 0 ".concat(rgba(theme("colors.grey.500"), 0.4), ",\n inset 0 1px 1px 0 ").concat(rgba(theme("colors.grey.500"), 0.4), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n ")
46
+ backgroundColor: theme("colors.grey.200")
53
47
  },
54
48
  "&:disabled, &.btn-disabled": {
55
- backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.white"), " 0%, ").concat(theme("colors.grey.100"), " 100%)"),
56
- borderColor: disabledColor(theme("colors.grey.200")),
57
- color: theme("colors.grey.300"),
58
- boxShadow: "none"
49
+ backgroundColor: theme("colors.grey.50"),
50
+ color: theme("colors.grey.300")
59
51
  }
60
52
  },
61
53
  ".btn-primary": {
62
54
  color: theme("colors.white"),
63
55
  backgroundColor: theme("colors.accent.600"),
64
- backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.accent.600"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
65
- border: "1px solid ".concat(theme("colors.accent.700")),
66
- boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n "),
67
56
  "&:hover": {
68
- borderColor: theme("colors.accent.800"),
69
- backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.accent.800"), " 0%, ").concat(theme("colors.accent.700"), " 100%)"),
70
- boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n ")
57
+ backgroundColor: theme("colors.accent.700")
71
58
  },
72
59
  "&:active, &.btn-active": {
73
- backgroundColor: theme("colors.accent.700"),
74
- borderColor: theme("colors.accent.800"),
75
- boxShadow: "\n inset 0 1px 4px 0 ".concat(rgba(theme("colors.accent.900"), 0.4), ",\n inset 0 1px 1px 0 ").concat(rgba(theme("colors.accent.900"), 0.6), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n ")
60
+ backgroundColor: theme("colors.accent.800")
76
61
  },
77
62
  "&:disabled, &.btn-disabled": {
78
- backgroundColor: disabledColor(theme("colors.accent.600")),
79
- backgroundImage: "\n linear-gradient(0deg, ".concat(disabledColor(theme("colors.accent.600")), " 0%,\n ").concat(disabledColor(theme("colors.accent.700")), " 100%)\n "),
80
- borderColor: disabledColor(theme("colors.accent.700")),
81
- boxShadow: "none"
63
+ backgroundColor: theme("colors.accent.200")
82
64
  }
83
65
  },
84
66
  ".btn-destructive": {
85
67
  color: theme("colors.white"),
86
68
  backgroundColor: theme("colors.red.600"),
87
- backgroundImage: "linear-gradient(-180deg, ".concat(theme("colors.red.600"), " 0%, ").concat(theme("colors.red.700"), " 100%)"),
88
- border: "1px solid ".concat(theme("colors.red.700")),
89
- boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n "),
90
69
  "&:hover": {
91
- backgroundImage: "linear-gradient(0deg, ".concat(theme("colors.red.700"), " 0%, ").concat(theme("colors.red.800"), " 100%)"),
92
- borderColor: theme("colors.red.800"),
93
- boxShadow: "\n inset 0 1px 0 0 ".concat(rgba(theme("colors.white"), 0.06), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.10"), "\n ")
70
+ backgroundColor: theme("colors.red.700")
94
71
  },
95
72
  "&:active, &.btn-active": {
96
- borderColor: theme("colors.red.800"),
97
- boxShadow: "\n inset 0 1px 4px 0 ".concat(rgba(theme("colors.red.900"), 0.4), ",\n inset 0 1px 1px 0 ").concat(rgba(theme("colors.red.900"), 0.6), ",\n 0 1px 0 0 ").concat(theme("colors.shadow.5"), "\n ")
73
+ backgroundColor: theme("colors.red.800")
98
74
  },
99
75
  "&:disabled, &.btn-disabled": {
100
- backgroundColor: disabledColor(theme("colors.red.600")),
101
- backgroundImage: "\n linear-gradient(0deg, ".concat(disabledColor(theme("colors.red.600")), " 0%,\n ").concat(disabledColor(theme("colors.red.700")), " 100%)\n "),
102
- borderColor: disabledColor(theme("colors.red.700")),
103
- boxShadow: "none"
76
+ backgroundColor: theme("colors.red.300")
104
77
  }
105
78
  }
106
79
  });
@@ -113,6 +86,18 @@ var buttonPlugin = plugin(function (_ref) {
113
86
  "& > .btn:not(:first-child):not(:last-child), & > :not(:first-child):not(:last-child) .btn": {
114
87
  borderRadius: "0px"
115
88
  },
89
+ "& > .btn-destructive:not(:first-child), & > :not(:first-child) .btn-destructive": {
90
+ borderLeft: "1px solid ".concat(theme("colors.red.700"))
91
+ },
92
+ "& > .btn-destructive:not(:last-child), & > :not(:last-child) .btn-destructive": {
93
+ borderRight: "1px solid ".concat(theme("colors.red.700"))
94
+ },
95
+ "& > .btn-primary:not(:first-child), & > :not(:first-child) .btn-primary": {
96
+ borderLeft: "1px solid ".concat(theme("colors.accent.700"))
97
+ },
98
+ "& > .btn-primary:not(:last-child), & > :not(:last-child) .btn-primary": {
99
+ borderRight: "1px solid ".concat(theme("colors.accent.700"))
100
+ },
116
101
  "& > .btn:first-child, & > :first-child .btn": {
117
102
  borderTopRightRadius: "0px",
118
103
  borderBottomRightRadius: "0px"
@@ -3,19 +3,48 @@ import type { IconComponentType } from "../../Icons";
3
3
  import type { TooltipWrapperBaseProps } from "../../Overlay/Tooltip/types";
4
4
  import type { ButtonSize, ButtonVariant, PolymorphicComponentPropWithRef } from "./types";
5
5
  export interface IconButtonBaseProps {
6
- /** @default neutral */
6
+ /**
7
+ * The variant of the `IconButton`.
8
+ * @default neutral
9
+ */
7
10
  variant?: ButtonVariant;
8
- /** @default medium */
11
+ /**
12
+ * The size of the `IconButton`.
13
+ * @default medium
14
+ */
9
15
  size?: ButtonSize;
10
- /** @default false */
16
+ /**
17
+ * Whether the `IconButton` is disabled.
18
+ * @default false
19
+ */
11
20
  disabled?: boolean;
21
+ /**
22
+ * The icon to display.
23
+ */
12
24
  icon: IconComponentType;
25
+ /**
26
+ * The title used for the tooltip.
27
+ */
13
28
  title: string;
29
+ /**
30
+ * Whether to show the tooltip.
31
+ * @default false
32
+ */
14
33
  showTooltip?: boolean;
15
- /** @default top */
34
+ /**
35
+ * The side of the tooltip.
36
+ * @default top
37
+ */
16
38
  tooltipSide?: TooltipWrapperBaseProps["side"];
17
- /** @default false */
39
+ /**
40
+ * Whether the `IconButton` is loading.
41
+ * @default false
42
+ */
18
43
  loading?: boolean;
44
+ /**
45
+ * The class name of the `IconButton`.
46
+ */
47
+ className?: string;
19
48
  }
20
49
  export declare type PolymorphicIconButtonProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, IconButtonBaseProps>;
21
50
  declare type PolymorphicIconButtonComponent = (<C extends React.ElementType = "button">(props: PolymorphicIconButtonProps<C>) => React.ReactElement | null) & {
@@ -1,23 +1,44 @@
1
1
  import type { ReactNode } from "react";
2
2
  import type { IconComponentType } from "../../Icons";
3
3
  export declare type ButtonVariant = "subtle" | "neutral" | "primary" | "destructive";
4
- export declare type ButtonSize = "small" | "medium" | "large";
4
+ export declare const buttonSizes: readonly ["small", "medium", "large"];
5
+ export declare type ButtonSize = (typeof buttonSizes)[number];
5
6
  export interface ButtonBaseProps {
6
- /** @default neutral */
7
+ /**
8
+ * The variant of the `Button`.
9
+ * @default neutral
10
+ */
7
11
  variant?: ButtonVariant;
8
- /** @default medium */
12
+ /**
13
+ * The size of the `Button`.
14
+ * @default medium
15
+ */
9
16
  size?: ButtonSize;
10
- /** Left aligned icon */
17
+ /**
18
+ * The left aligned icon of the `Button`.
19
+ */
11
20
  startIcon?: IconComponentType;
12
- /** Right aligned icon */
21
+ /**
22
+ * The right aligned icon of the `Button`.
23
+ */
13
24
  endIcon?: IconComponentType;
14
- /** @ignore */
25
+ /**
26
+ * The content of the `Button`.
27
+ */
15
28
  children: ReactNode;
16
- /** @default false */
29
+ /**
30
+ * Whether the `Button` is loading.
31
+ * @default false
32
+ */
17
33
  loading?: boolean;
18
- /** @ignore */
34
+ /**
35
+ * Whether the `Button` is disabled.
36
+ * @default false
37
+ */
19
38
  disabled?: boolean;
20
- /** @ignore */
39
+ /**
40
+ * The class name of the `Button`.
41
+ */
21
42
  className?: string;
22
43
  }
23
44
  export declare function isButtonType(props: any): props is JSX.IntrinsicElements["button"];
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.buttonSizes = void 0;
6
7
  exports.isButtonType = isButtonType;
8
+ var buttonSizes = exports.buttonSizes = ["small", "medium", "large"];
7
9
  function isButtonType(props) {
8
10
  return props && (!props.as || props.as === "button");
9
11
  }
@@ -5,8 +5,13 @@ export interface ButtonGroupProps {
5
5
  * @default div
6
6
  */
7
7
  as?: keyof JSX.IntrinsicElements;
8
- /** @ignore */
8
+ /**
9
+ * The class name of the `ButtonGroup`.
10
+ */
9
11
  className?: string;
12
+ /**
13
+ * The content of the `ButtonGroup`.
14
+ */
10
15
  children: ReactNode;
11
16
  }
12
17
  /**
@@ -1,13 +1,33 @@
1
1
  import type { ReactNode, VFC } from "react";
2
2
  import type { SwitchSize } from "./types";
3
3
  export interface SwitchProps {
4
- /** @ignore */
4
+ /**
5
+ * The class name of the `Switch`.
6
+ */
5
7
  className?: string;
8
+ /**
9
+ * The currently selected value.
10
+ */
6
11
  value: string;
12
+ /**
13
+ * Whether the `Switch` is disabled.
14
+ */
7
15
  disabled?: boolean;
16
+ /**
17
+ * Callback function called when the selected value changes.
18
+ */
8
19
  onChange: (value: string) => void;
20
+ /**
21
+ * The content of the `Switch`.
22
+ */
9
23
  children: ReactNode;
24
+ /**
25
+ * The size of the `Switch`.
26
+ */
10
27
  size?: SwitchSize;
28
+ /**
29
+ * Optional name attribute for the radio inputs.
30
+ */
11
31
  name?: string;
12
32
  }
13
33
  /**
@@ -1,7 +1,16 @@
1
1
  import type { ReactNode, VFC } from "react";
2
2
  export interface SwitchOptionProps {
3
+ /**
4
+ * The value associated with this `SwitchOption`.
5
+ */
3
6
  value: string;
7
+ /**
8
+ * Whether this `SwitchOption` is disabled.
9
+ */
4
10
  disabled?: boolean;
11
+ /**
12
+ * The content to display for this `SwitchOption`.
13
+ */
5
14
  children: ReactNode;
6
15
  }
7
16
  export declare const SwitchOption: VFC<SwitchOptionProps>;
@@ -1,4 +1,5 @@
1
- export declare type SwitchSize = "small" | "medium" | "large";
1
+ export declare const switchSizes: readonly ["small", "medium", "large"];
2
+ export declare type SwitchSize = (typeof switchSizes)[number];
2
3
  export interface SwitchContextValue {
3
4
  name: string;
4
5
  value: string;
@@ -2,4 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
5
+ });
6
+ exports.switchSizes = void 0;
7
+ var switchSizes = exports.switchSizes = ["small", "medium", "large"];
@@ -2,8 +2,17 @@
2
2
  import type { ToggleProps } from "@radix-ui/react-toggle";
3
3
  import type { ToggleButtonBaseProps } from "./ToggleButtonBase";
4
4
  export declare type ToggleButtonProps = {
5
+ /**
6
+ * The pressed state of the `ToggleButton`.
7
+ */
5
8
  pressed?: ToggleProps["pressed"];
9
+ /**
10
+ * The default pressed state of the `ToggleButton`.
11
+ */
6
12
  defaultPressed?: ToggleProps["defaultPressed"];
13
+ /**
14
+ * The callback function that is called when the pressed state changes.
15
+ */
7
16
  onPressedChange?: ToggleProps["onPressedChange"];
8
17
  } & ToggleButtonBaseProps;
9
18
  /**
@@ -1,15 +1,46 @@
1
- import type { ButtonHTMLAttributes, ReactNode } from "react";
1
+ import type { ReactNode } from "react";
2
2
  import type { IconComponentType } from "../../Icons";
3
3
  import type { ButtonSize } from "../Button/types";
4
4
  declare type IconOnlyToggleButtonBaseProps = {
5
+ /**
6
+ * The icon to display for the `ToggleButton`.
7
+ */
5
8
  icon: IconComponentType;
9
+ /**
10
+ * The label to display for the `ToggleButton`.
11
+ */
6
12
  label: string;
7
13
  };
8
14
  declare type TextToggleButtonBaseProps = {
15
+ /**
16
+ * The icon to display for the `ToggleButton`.
17
+ */
9
18
  icon?: IconComponentType;
19
+ /**
20
+ * The content to display for the `ToggleButton`.
21
+ */
10
22
  children: ReactNode;
11
23
  };
12
- export declare type ToggleButtonBaseProps = Pick<ButtonHTMLAttributes<HTMLButtonElement>, "id" | "className" | "style" | "autoFocus" | "disabled"> & {
24
+ export declare type ToggleButtonBaseProps = {
25
+ /**
26
+ * The id of the `ToggleButton`.
27
+ */
28
+ id?: string;
29
+ /**
30
+ * The class name of the `ToggleButton`.
31
+ */
32
+ className?: string;
33
+ /**
34
+ * Whether the `ToggleButton` should be auto focused.
35
+ */
36
+ autoFocus?: boolean;
37
+ /**
38
+ * Whether the `ToggleButton` should be disabled.
39
+ */
40
+ disabled?: boolean;
41
+ /**
42
+ * The size of the `ToggleButton`.
43
+ */
13
44
  size?: ButtonSize;
14
45
  } & (IconOnlyToggleButtonBaseProps | TextToggleButtonBaseProps);
15
46
  export declare const ToggleButtonBase: import("react").ForwardRefExoticComponent<ToggleButtonBaseProps & import("react").RefAttributes<HTMLButtonElement>>;
@@ -43,7 +43,7 @@ var ToggleButtonBase = exports.ToggleButtonBase = /*#__PURE__*/(0, _react.forwar
43
43
  ref: ref,
44
44
  type: "button",
45
45
  "aria-label": label,
46
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable-visible disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
46
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["inline-flex items-center justify-center gap-1 min-w-min whitespace-nowrap typo-display-body"]))), (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["group/toggle-button rounded focusable-visible focus-visible:border-transparent disabled:cursor-not-allowed"]))), (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["data-[state=on]:text-accent-600 disabled:!text-grey-300"]))), (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["bg-white data-[state=off]:hover:bg-grey-100 data-[state=on]:bg-accent-100 disabled:!bg-grey-50"]))), (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["border border-grey-200 data-[state=on]:border-accent-600 disabled:!border-grey-200"]))), !isIconOnly && (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["px-3"]))), isIconOnly ? ICON_ONLY_CLASSNAMES[size] : _styles.BUTTON_SIZE_CLASSNAMES[size], className)
47
47
  }, rest), {}, {
48
48
  children: [!!Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
49
49
  "aria-hidden": "true",
@@ -2,7 +2,9 @@ import type { ToggleGroupItemProps as RadixToggleGroupItemProps, ToggleGroupMult
2
2
  import type { FC } from "react";
3
3
  import type { ToggleButtonBaseProps } from "../ToggleButton/ToggleButtonBase";
4
4
  declare type ToggleGroupSharedProps = {
5
- /** @ignore */
5
+ /**
6
+ * The class name of the `ToggleGroup`.
7
+ */
6
8
  className?: string;
7
9
  /**
8
10
  * Defines whether the `ToggleGroup` is disabled,
@@ -11,7 +13,9 @@ declare type ToggleGroupSharedProps = {
11
13
  disabled?: RadixToggleGroupSharedProps["disabled"];
12
14
  };
13
15
  declare type ToggleGroupSingleProps = {
14
- /** Defines whether a single or multiple items can be pressed at a time. */
16
+ /**
17
+ * Defines whether a single or multiple items can be pressed at a time.
18
+ */
15
19
  type: "single";
16
20
  /**
17
21
  * Defines the controlled value of the pressed item.
@@ -23,11 +27,15 @@ declare type ToggleGroupSingleProps = {
23
27
  * Use when you do not need to control the state of the items.
24
28
  */
25
29
  defaultValue?: RadixToggleGroupSingleProps["defaultValue"];
26
- /** Defines the event handler called when the pressed state of an item changes. */
30
+ /**
31
+ * Defines the event handler called when the pressed state of an item changes.
32
+ */
27
33
  onChange?: RadixToggleGroupSingleProps["onValueChange"];
28
34
  };
29
35
  declare type ToggleGroupMultipleProps = {
30
- /** Defines whether a single or multiple items can be pressed at a time. */
36
+ /**
37
+ * Defines whether a single or multiple items can be pressed at a time.
38
+ */
31
39
  type: "multiple";
32
40
  /**
33
41
  * Defines the controlled value of the pressed items.
@@ -39,7 +47,9 @@ declare type ToggleGroupMultipleProps = {
39
47
  * Use when you do not need to control the state of the items.
40
48
  */
41
49
  defaultValue?: RadixToggleGroupMultipleProps["defaultValue"];
42
- /** Defines the event handler called when the pressed state of an item changes. */
50
+ /**
51
+ * Defines the event handler called when the pressed state of an item changes.
52
+ */
43
53
  onChange?: RadixToggleGroupMultipleProps["onValueChange"];
44
54
  };
45
55
  export declare type ToggleGroupProps = ToggleGroupSharedProps & (ToggleGroupSingleProps | ToggleGroupMultipleProps);
@@ -52,7 +62,9 @@ declare type ToggleGroupComponent = FC<ToggleGroupProps> & {
52
62
  * See the [ToggleGroupItem documentation page](https://satellite.algolia.com/components/actions/toggle-group) for more information.
53
63
  */
54
64
  export declare type ToggleGroupItemProps = ToggleButtonBaseProps & {
55
- /** Defines a unique value for the item. */
65
+ /**
66
+ * Defines a unique value for the item.
67
+ */
56
68
  value: RadixToggleGroupItemProps["value"];
57
69
  };
58
70
  /**
@@ -1,11 +1,18 @@
1
1
  import type { VFC } from "react";
2
2
  import type { ApplicationAvatarSize, MinimalApplication } from "../types";
3
3
  export interface ApplicationAvatarProps {
4
- /** A minimal application object containing `applicationID` and `name`. */
4
+ /**
5
+ * A minimal application object containing `applicationID` and `name`.
6
+ */
5
7
  application: MinimalApplication;
6
- /** @default "medium" */
8
+ /**
9
+ * The size of the `ApplicationAvatar`.
10
+ * @default "medium"
11
+ */
7
12
  size?: ApplicationAvatarSize;
8
- /** @ignore */
13
+ /**
14
+ * The class name of the `ApplicationAvatar`.
15
+ */
9
16
  className?: string;
10
17
  }
11
18
  /**
@@ -4,16 +4,24 @@ export declare type UserAvatarLocale = {
4
4
  fallbackText?: string;
5
5
  };
6
6
  export interface UserAvatarProps {
7
- /** A minimal user object containing `name`, `email` and `avatar`. */
7
+ /**
8
+ * A minimal user object containing `name`, `email` and `avatar`.
9
+ */
8
10
  user: MinimalUser;
9
11
  /**
10
- * in px
12
+ * The size of the `UserAvatar`.
11
13
  * @default 32
12
- * */
14
+ */
13
15
  size?: number;
14
- /** @ignore */
15
- className?: string;
16
+ /**
17
+ * The locale of the `UserAvatar`.
18
+ * @default { fallbackText: `User's avatar` }"
19
+ */
16
20
  locale?: UserAvatarLocale;
21
+ /**
22
+ * The class name of the `UserAvatar`.
23
+ */
24
+ className?: string;
17
25
  }
18
26
  /**
19
27
  * The `UserAvatar` component is used as a visual representation of a user.