@wordpress/ui 0.6.0 → 0.7.1-next.v.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 (147) hide show
  1. package/CHANGELOG.md +18 -1
  2. package/build/badge/badge.cjs +1 -1
  3. package/build/badge/badge.cjs.map +2 -2
  4. package/build/box/box.cjs +3 -7
  5. package/build/box/box.cjs.map +2 -2
  6. package/build/button/button.cjs +3 -3
  7. package/build/button/button.cjs.map +2 -2
  8. package/build/form/primitives/fieldset/root.cjs +3 -3
  9. package/build/form/primitives/fieldset/root.cjs.map +2 -2
  10. package/build/form/primitives/input-layout/input-layout.cjs +3 -3
  11. package/build/form/primitives/input-layout/input-layout.cjs.map +2 -2
  12. package/build/form/primitives/input-layout/slot.cjs +3 -3
  13. package/build/form/primitives/input-layout/slot.cjs.map +2 -2
  14. package/build/form/primitives/select/item.cjs +3 -3
  15. package/build/form/primitives/select/item.cjs.map +2 -2
  16. package/build/form/primitives/select/popup.cjs +3 -3
  17. package/build/form/primitives/select/popup.cjs.map +2 -2
  18. package/build/form/primitives/select/trigger.cjs +3 -3
  19. package/build/form/primitives/select/trigger.cjs.map +2 -2
  20. package/build/icon-button/icon-button.cjs +103 -0
  21. package/build/icon-button/icon-button.cjs.map +7 -0
  22. package/build/icon-button/index.cjs +31 -0
  23. package/build/icon-button/index.cjs.map +7 -0
  24. package/build/icon-button/types.cjs +19 -0
  25. package/build/icon-button/types.cjs.map +7 -0
  26. package/build/index.cjs +5 -0
  27. package/build/index.cjs.map +2 -2
  28. package/build/tabs/index.cjs +40 -0
  29. package/build/tabs/index.cjs.map +7 -0
  30. package/build/tabs/list.cjs +145 -0
  31. package/build/tabs/list.cjs.map +7 -0
  32. package/build/tabs/panel.cjs +67 -0
  33. package/build/tabs/panel.cjs.map +7 -0
  34. package/build/tabs/root.cjs +38 -0
  35. package/build/tabs/root.cjs.map +7 -0
  36. package/build/tabs/tab.cjs +71 -0
  37. package/build/tabs/tab.cjs.map +7 -0
  38. package/build/tabs/types.cjs +19 -0
  39. package/build/tabs/types.cjs.map +7 -0
  40. package/build/tooltip/popup.cjs +3 -3
  41. package/build/tooltip/popup.cjs.map +2 -2
  42. package/build-module/badge/badge.mjs +1 -1
  43. package/build-module/badge/badge.mjs.map +2 -2
  44. package/build-module/box/box.mjs +3 -7
  45. package/build-module/box/box.mjs.map +2 -2
  46. package/build-module/button/button.mjs +3 -3
  47. package/build-module/button/button.mjs.map +2 -2
  48. package/build-module/form/primitives/fieldset/root.mjs +3 -3
  49. package/build-module/form/primitives/fieldset/root.mjs.map +2 -2
  50. package/build-module/form/primitives/input-layout/input-layout.mjs +3 -3
  51. package/build-module/form/primitives/input-layout/input-layout.mjs.map +2 -2
  52. package/build-module/form/primitives/input-layout/slot.mjs +3 -3
  53. package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
  54. package/build-module/form/primitives/select/item.mjs +3 -3
  55. package/build-module/form/primitives/select/item.mjs.map +2 -2
  56. package/build-module/form/primitives/select/popup.mjs +3 -3
  57. package/build-module/form/primitives/select/popup.mjs.map +2 -2
  58. package/build-module/form/primitives/select/trigger.mjs +3 -3
  59. package/build-module/form/primitives/select/trigger.mjs.map +2 -2
  60. package/build-module/icon-button/icon-button.mjs +68 -0
  61. package/build-module/icon-button/icon-button.mjs.map +7 -0
  62. package/build-module/icon-button/index.mjs +6 -0
  63. package/build-module/icon-button/index.mjs.map +7 -0
  64. package/build-module/icon-button/types.mjs +1 -0
  65. package/build-module/icon-button/types.mjs.map +7 -0
  66. package/build-module/index.mjs +3 -0
  67. package/build-module/index.mjs.map +2 -2
  68. package/build-module/tabs/index.mjs +12 -0
  69. package/build-module/tabs/index.mjs.map +7 -0
  70. package/build-module/tabs/list.mjs +110 -0
  71. package/build-module/tabs/list.mjs.map +7 -0
  72. package/build-module/tabs/panel.mjs +32 -0
  73. package/build-module/tabs/panel.mjs.map +7 -0
  74. package/build-module/tabs/root.mjs +13 -0
  75. package/build-module/tabs/root.mjs.map +7 -0
  76. package/build-module/tabs/tab.mjs +36 -0
  77. package/build-module/tabs/tab.mjs.map +7 -0
  78. package/build-module/tabs/types.mjs +1 -0
  79. package/build-module/tabs/types.mjs.map +7 -0
  80. package/build-module/tooltip/popup.mjs +3 -3
  81. package/build-module/tooltip/popup.mjs.map +2 -2
  82. package/build-types/box/box.d.ts.map +1 -1
  83. package/build-types/box/stories/index.story.d.ts.map +1 -1
  84. package/build-types/button/stories/index.story.d.ts +1 -2
  85. package/build-types/button/stories/index.story.d.ts.map +1 -1
  86. package/build-types/form/primitives/field/stories/index.story.d.ts +0 -1
  87. package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -1
  88. package/build-types/form/primitives/select/stories/index.story.d.ts +0 -1
  89. package/build-types/form/primitives/select/stories/index.story.d.ts.map +1 -1
  90. package/build-types/icon-button/icon-button.d.ts +13 -0
  91. package/build-types/icon-button/icon-button.d.ts.map +1 -0
  92. package/build-types/icon-button/index.d.ts +2 -0
  93. package/build-types/icon-button/index.d.ts.map +1 -0
  94. package/build-types/icon-button/stories/index.story.d.ts +19 -0
  95. package/build-types/icon-button/stories/index.story.d.ts.map +1 -0
  96. package/build-types/icon-button/test/index.test.d.ts +2 -0
  97. package/build-types/icon-button/test/index.test.d.ts.map +1 -0
  98. package/build-types/icon-button/types.d.ts +36 -0
  99. package/build-types/icon-button/types.d.ts.map +1 -0
  100. package/build-types/index.d.ts +2 -0
  101. package/build-types/index.d.ts.map +1 -1
  102. package/build-types/tabs/index.d.ts +6 -0
  103. package/build-types/tabs/index.d.ts.map +1 -0
  104. package/build-types/tabs/list.d.ts +16 -0
  105. package/build-types/tabs/list.d.ts.map +1 -0
  106. package/build-types/tabs/panel.d.ts +15 -0
  107. package/build-types/tabs/panel.d.ts.map +1 -0
  108. package/build-types/tabs/root.d.ts +15 -0
  109. package/build-types/tabs/root.d.ts.map +1 -0
  110. package/build-types/tabs/stories/index.story.d.ts +13 -0
  111. package/build-types/tabs/stories/index.story.d.ts.map +1 -0
  112. package/build-types/tabs/tab.d.ts +15 -0
  113. package/build-types/tabs/tab.d.ts.map +1 -0
  114. package/build-types/tabs/test/index.test.d.ts +2 -0
  115. package/build-types/tabs/test/index.test.d.ts.map +1 -0
  116. package/build-types/tabs/types.d.ts +33 -0
  117. package/build-types/tabs/types.d.ts.map +1 -0
  118. package/package.json +11 -9
  119. package/src/badge/badge.tsx +1 -1
  120. package/src/box/box.tsx +4 -15
  121. package/src/box/stories/index.story.tsx +9 -1
  122. package/src/button/stories/index.story.tsx +3 -16
  123. package/src/button/style.module.css +6 -3
  124. package/src/form/primitives/field/stories/index.story.tsx +0 -1
  125. package/src/form/primitives/fieldset/style.module.css +1 -1
  126. package/src/form/primitives/input-layout/style.module.css +5 -8
  127. package/src/form/primitives/select/stories/index.story.tsx +0 -1
  128. package/src/icon-button/icon-button.tsx +64 -0
  129. package/src/icon-button/index.ts +1 -0
  130. package/src/icon-button/stories/index.story.tsx +128 -0
  131. package/src/icon-button/style.module.css +9 -0
  132. package/src/icon-button/test/index.test.tsx +86 -0
  133. package/src/icon-button/types.ts +38 -0
  134. package/src/index.ts +2 -0
  135. package/src/tabs/index.ts +6 -0
  136. package/src/tabs/list.tsx +130 -0
  137. package/src/tabs/panel.tsx +23 -0
  138. package/src/tabs/root.tsx +15 -0
  139. package/src/tabs/stories/best-practices.mdx +85 -0
  140. package/src/tabs/stories/index.story.tsx +363 -0
  141. package/src/tabs/style.module.css +269 -0
  142. package/src/tabs/tab.tsx +29 -0
  143. package/src/tabs/test/index.test.tsx +2260 -0
  144. package/src/tabs/types.ts +36 -0
  145. package/src/tooltip/style.module.css +2 -2
  146. package/src/utils/css/item-popup.module.css +1 -1
  147. package/src/utils/css/select-trigger.module.css +1 -1
package/src/tabs/types.ts ADDED
@@ -0,0 +1,36 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { Tabs as _Tabs } from '@base-ui/react/tabs';
3
+ import type { ComponentProps } from '../utils/types';
4
+
5
+ export type TabRootProps = ComponentProps< typeof _Tabs.Root > & {
6
+ /**
7
+ * The content to be rendered inside the component.
8
+ */
9
+ children?: ReactNode;
10
+ };
11
+
12
+ export type TabListProps = ComponentProps< typeof _Tabs.List > & {
13
+ /**
14
+ * The content to be rendered inside the component.
15
+ */
16
+ children?: ReactNode;
17
+ /**
18
+ * The visual variant of the tab list.
19
+ * @default "default"
20
+ */
21
+ variant?: 'minimal' | 'default';
22
+ };
23
+
24
+ export type TabProps = ComponentProps< typeof _Tabs.Tab > & {
25
+ /**
26
+ * The content to be rendered inside the component.
27
+ */
28
+ children?: ReactNode;
29
+ };
30
+
31
+ export type TabPanelProps = ComponentProps< typeof _Tabs.Panel > & {
32
+ /**
33
+ * The content to be rendered inside the component.
34
+ */
35
+ children?: ReactNode;
36
+ };
package/src/tooltip/style.module.css CHANGED
@@ -8,8 +8,8 @@
8
8
  .popup {
9
9
  background-color: var(--wpds-color-bg-surface-neutral-strong);
10
10
  padding:
11
- var(--wpds-dimension-padding-surface-2xs)
12
- var(--wpds-dimension-padding-surface-xs);
11
+ var(--wpds-dimension-padding-xs)
12
+ var(--wpds-dimension-padding-sm);
13
13
  border-radius: var(--wpds-border-radius-sm);
14
14
  font-family: var(--wpds-font-family-body);
15
15
  font-size: var(--wpds-font-size-sm);
package/src/utils/css/item-popup.module.css CHANGED
@@ -59,7 +59,7 @@
59
59
  grid-template-columns: 24px 1fr;
60
60
  align-items: center;
61
61
  justify-content: flex-start;
62
- gap: var(--wpds-dimension-gap-2xs);
62
+ gap: var(--wpds-dimension-gap-xs);
63
63
  min-height: var(--wp-ui-popup-item-height);
64
64
  border-radius: var(--wpds-border-radius-sm);
65
65
  user-select: none;
package/src/utils/css/select-trigger.module.css CHANGED
@@ -11,7 +11,7 @@
11
11
  display: flex;
12
12
  justify-content: space-between;
13
13
  align-items: center;
14
- gap: var(--wpds-dimension-gap-2xs);
14
+ gap: var(--wpds-dimension-gap-xs);
15
15
  width: 100%;
16
16
  padding-block: 4px;
17
17