@rbxts/uiblox 0.2.0-alpha.24 → 0.2.0-alpha.26

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 (122) hide show
  1. package/out/hooks/index.d.ts +1 -0
  2. package/out/hooks/init.luau +3 -0
  3. package/out/hooks/useBreakpoints.luau +2 -11
  4. package/out/hooks/viewportObserver.d.ts +10 -0
  5. package/out/hooks/viewportObserver.luau +75 -0
  6. package/out/theme/interfaces/theme/Theme.d.ts +15 -0
  7. package/out/theme/styles/utilities/componentStyles.luau +45 -3
  8. package/out/theme/styles/utilities/componentTheme.d.ts +15 -0
  9. package/out/theme/styles/utilities/index.d.ts +2 -0
  10. package/out/theme/styles/utilities/init.luau +7 -0
  11. package/out/theme/styles/utilities/resolveStyle.d.ts +10 -2
  12. package/out/theme/styles/utilities/resolveStyle.luau +7 -3
  13. package/out/theme/styles/utilities/resolveSx.d.ts +110 -0
  14. package/out/theme/styles/utilities/resolveSx.luau +479 -0
  15. package/out/theme/styles/utilities/styleCache.d.ts +2 -0
  16. package/out/theme/styles/utilities/styleCache.luau +9 -0
  17. package/out/ui/packages/accordion/components/Accordion.luau +12 -16
  18. package/out/ui/packages/alert/components/Alert.luau +9 -16
  19. package/out/ui/packages/appBar/components/AppBar.luau +9 -16
  20. package/out/ui/packages/assetField/components/AssetField.luau +12 -16
  21. package/out/ui/packages/avatar/components/Avatar.luau +9 -16
  22. package/out/ui/packages/backdrop/components/Backdrop.luau +9 -16
  23. package/out/ui/packages/badge/components/Badge.luau +9 -16
  24. package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau +12 -16
  25. package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau +9 -16
  26. package/out/ui/packages/brickColorPicker/components/BrickColorPicker.luau +12 -16
  27. package/out/ui/packages/button/components/Button.luau +20 -18
  28. package/out/ui/packages/card/components/Card.d.ts +2 -1
  29. package/out/ui/packages/card/components/Card.luau +8 -0
  30. package/out/ui/packages/cframeEditor/components/CFrameEditor.luau +12 -16
  31. package/out/ui/packages/checkbox/components/Checkbox.luau +16 -16
  32. package/out/ui/packages/chip/components/Chip.luau +13 -16
  33. package/out/ui/packages/circularProgress/components/CircularProgress.luau +16 -16
  34. package/out/ui/packages/colorPicker/components/ColorPicker.luau +12 -16
  35. package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau +12 -16
  36. package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau +12 -16
  37. package/out/ui/packages/dialog/components/Dialog.d.ts +2 -1
  38. package/out/ui/packages/dialog/components/Dialog.luau +21 -10
  39. package/out/ui/packages/divider/components/Divider.luau +20 -33
  40. package/out/ui/packages/drawer/components/Drawer.d.ts +2 -1
  41. package/out/ui/packages/drawer/components/Drawer.luau +18 -5
  42. package/out/ui/packages/fab/components/Fab.luau +15 -16
  43. package/out/ui/packages/fontEditor/components/FontEditor.luau +12 -16
  44. package/out/ui/packages/formText/components/FormHelperText.luau +12 -16
  45. package/out/ui/packages/formText/components/FormLabel.luau +12 -16
  46. package/out/ui/packages/gradientEditor/components/GradientEditor.luau +12 -16
  47. package/out/ui/packages/host/components/SxHost.d.ts +18 -0
  48. package/out/ui/packages/host/components/SxHost.luau +197 -0
  49. package/out/ui/packages/host/hostPaint.d.ts +11 -0
  50. package/out/ui/packages/host/hostPaint.luau +33 -0
  51. package/out/ui/packages/host/hostRules.d.ts +15 -0
  52. package/out/ui/packages/host/hostRules.luau +92 -0
  53. package/out/ui/packages/host/index.d.ts +3 -0
  54. package/out/ui/packages/host/init.luau +13 -0
  55. package/out/ui/packages/icon/components/Icon.luau +9 -16
  56. package/out/ui/packages/iconButton/components/IconButton.luau +16 -16
  57. package/out/ui/packages/imageList/components/ImageList.luau +9 -16
  58. package/out/ui/packages/imageList/components/ImageList.styles.luau +4 -3
  59. package/out/ui/packages/input/components/Input.luau +14 -16
  60. package/out/ui/packages/layout/components/Box.luau +6 -15
  61. package/out/ui/packages/layout/components/Container.luau +6 -15
  62. package/out/ui/packages/layout/components/FlexItem.luau +6 -15
  63. package/out/ui/packages/layout/components/Grid.luau +6 -15
  64. package/out/ui/packages/layout/components/List.luau +9 -16
  65. package/out/ui/packages/layout/components/Stack.luau +6 -15
  66. package/out/ui/packages/link/components/Link.luau +13 -16
  67. package/out/ui/packages/listItem/components/ListItem.d.ts +2 -1
  68. package/out/ui/packages/listItem/components/ListItem.luau +23 -4
  69. package/out/ui/packages/loadingStroke/components/LoadingStroke.d.ts +5 -1
  70. package/out/ui/packages/loadingStroke/components/loadingStrokeSx.d.ts +11 -0
  71. package/out/ui/packages/loadingStroke/components/loadingStrokeSx.luau +2 -0
  72. package/out/ui/packages/markdown/components/Markdown.luau +9 -16
  73. package/out/ui/packages/markdown/components/MarkdownEditor.luau +9 -16
  74. package/out/ui/packages/menu/components/Menu.d.ts +2 -1
  75. package/out/ui/packages/menu/components/Menu.luau +23 -12
  76. package/out/ui/packages/modal/components/Modal.d.ts +2 -1
  77. package/out/ui/packages/modal/components/Modal.luau +29 -5
  78. package/out/ui/packages/numberInput/components/NumberInput.d.ts +1 -0
  79. package/out/ui/packages/numberInput/components/NumberInput.luau +14 -3
  80. package/out/ui/packages/numberInput/components/numberValue.d.ts +1 -0
  81. package/out/ui/packages/numberInput/components/numberValue.luau +45 -0
  82. package/out/ui/packages/numberRangeEditor/components/NumberRangeEditor.luau +12 -16
  83. package/out/ui/packages/pagination/components/Pagination.luau +12 -16
  84. package/out/ui/packages/paper/components/Paper.d.ts +2 -1
  85. package/out/ui/packages/paper/components/Paper.luau +21 -12
  86. package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.luau +63 -38
  87. package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.styles.luau +21 -7
  88. package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.d.ts +2 -0
  89. package/out/ui/packages/physicalPropertiesEditor/components/physicalParts.luau +14 -0
  90. package/out/ui/packages/popup/components/Popup.d.ts +2 -1
  91. package/out/ui/packages/popup/components/Popup.luau +35 -18
  92. package/out/ui/packages/preloader/components/Preloader.luau +9 -16
  93. package/out/ui/packages/progressBar/components/ProgressBar.luau +12 -16
  94. package/out/ui/packages/radioGroup/components/RadioGroup.luau +12 -16
  95. package/out/ui/packages/rating/components/Rating.luau +12 -16
  96. package/out/ui/packages/rayEditor/components/RayEditor.luau +12 -16
  97. package/out/ui/packages/rectEditor/components/RectEditor.luau +86 -43
  98. package/out/ui/packages/rectEditor/components/RectEditor.styles.luau +30 -7
  99. package/out/ui/packages/select/components/Select.luau +13 -16
  100. package/out/ui/packages/shadow/components/Shadow.d.ts +2 -1
  101. package/out/ui/packages/shadow/components/Shadow.luau +17 -5
  102. package/out/ui/packages/sidebar/components/Sidebar.luau +9 -16
  103. package/out/ui/packages/skeleton/components/Skeleton.luau +19 -28
  104. package/out/ui/packages/slider/components/Slider.luau +16 -17
  105. package/out/ui/packages/speedDial/components/SpeedDial.luau +12 -16
  106. package/out/ui/packages/splitPane/components/SplitPane.luau +12 -16
  107. package/out/ui/packages/stateMatrix.luau +1171 -675
  108. package/out/ui/packages/stepper/components/Stepper.luau +9 -16
  109. package/out/ui/packages/switch/components/Switch.luau +16 -16
  110. package/out/ui/packages/table/components/Table.luau +9 -16
  111. package/out/ui/packages/tabs/components/Tabs.luau +12 -16
  112. package/out/ui/packages/toast/components/Toast.luau +16 -13
  113. package/out/ui/packages/toggleButton/components/ToggleButton.luau +24 -32
  114. package/out/ui/packages/tooltip/components/Tooltip.luau +9 -16
  115. package/out/ui/packages/treeView/components/TreeView.luau +9 -16
  116. package/out/ui/packages/typography/components/Typography.luau +13 -14
  117. package/out/ui/packages/udimEditor/components/UDimEditor.luau +12 -16
  118. package/out/ui/packages/vectorEditor/components/VectorEditor.luau +12 -16
  119. package/out/ui/packages/virtualList/components/EmptyListHint.d.ts +2 -1
  120. package/out/ui/packages/virtualList/components/EmptyListHint.luau +15 -4
  121. package/out/ui/packages/virtualList/components/VirtualList.luau +9 -16
  122. package/package.json +2 -2
package/out/ui/packages/virtualList/components/EmptyListHint.luau CHANGED
@@ -2,11 +2,16 @@
2
2
  local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
4
  local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
5
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
5
6
  local useEmptyListHintStyles = TS.import(script, script.Parent, "EmptyListHint.styles").default
6
7
  local function EmptyListHint(props)
7
8
  local _binding = props
8
9
  local text = _binding.text
9
10
  local height = _binding.height
11
+ local className = _binding.className
12
+ local sx = _binding.sx
13
+ local id = _binding.id
14
+ local ref = _binding.ref
10
15
  local _binding_1 = useTheme()
11
16
  local theme = _binding_1.theme
12
17
  local _object = {}
@@ -18,13 +23,19 @@ local function EmptyListHint(props)
18
23
  _object[_left] = _condition
19
24
  local styles = useEmptyListHintStyles(_object)
20
25
  local _attributes = {
21
- key = "EmptyListHint",
26
+ tag = "textlabel",
22
27
  }
23
- for _k, _v in styles.root do
24
- _attributes[_k] = _v
28
+ local _condition_1 = id
29
+ if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
30
+ _condition_1 = "EmptyListHint"
25
31
  end
32
+ _attributes.key = _condition_1
33
+ _attributes.hostRef = ref
34
+ _attributes.base = styles.root
35
+ _attributes.className = className
36
+ _attributes.sx = sx
26
37
  _attributes.Text = text
27
- return React.createElement("textlabel", _attributes)
38
+ return React.createElement(SxHost, _attributes)
28
39
  end
29
40
  local default = EmptyListHint
30
41
  return {
package/out/ui/packages/virtualList/components/VirtualList.luau CHANGED
@@ -5,6 +5,7 @@ local React = _react
5
5
  local useEffect = _react.useEffect
6
6
  local useRef = _react.useRef
7
7
  local useState = _react.useState
8
+ local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
8
9
  local useDragScroll = TS.import(script, script.Parent.Parent.Parent, "scroll").useDragScroll
9
10
  local useVirtualListStyles = TS.import(script, script.Parent, "VirtualList.styles").default
10
11
  local _virtualWindow = TS.import(script, script.Parent, "virtualWindow")
@@ -142,13 +143,15 @@ local function VirtualList(props)
142
143
  end
143
144
  end
144
145
  end
145
- local _attributes = {}
146
+ local _attributes = {
147
+ tag = "scrollingframe",
148
+ }
146
149
  local _condition = id
147
150
  if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
148
151
  _condition = "VirtualList"
149
152
  end
150
153
  _attributes.key = _condition
151
- _attributes.ref = function(rbx)
154
+ _attributes.hostRef = function(rbx)
152
155
  setFrame(rbx)
153
156
  if type(ref) == "function" then
154
157
  ref(rbx)
@@ -156,21 +159,11 @@ local function VirtualList(props)
156
159
  ref.current = rbx
157
160
  end
158
161
  end
159
- for _k, _v in styles.root do
160
- _attributes[_k] = _v
161
- end
162
- if className then
163
- for _k, _v in className do
164
- _attributes[_k] = _v
165
- end
166
- end
167
- if sx then
168
- for _k, _v in sx do
169
- _attributes[_k] = _v
170
- end
171
- end
162
+ _attributes.base = styles.root
163
+ _attributes.className = className
164
+ _attributes.sx = sx
172
165
  _attributes.CanvasSize = UDim2.fromOffset(0, canvasHeight)
173
- return React.createElement("scrollingframe", _attributes, if count == 0 then empty else rows, children)
166
+ return React.createElement(SxHost, _attributes, if count == 0 then empty else rows, children)
174
167
  end
175
168
  local default = VirtualList
176
169
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rbxts/uiblox",
3
- "version": "0.2.0-alpha.24",
3
+ "version": "0.2.0-alpha.26",
4
4
  "description": "UI Library and theming for roblox-ts projects",
5
5
  "main": "out/init.luau",
6
6
  "packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
8
8
  "build": "rbxtsc",
9
9
  "watch": "rbxtsc -w",
10
10
  "pack:check": "node scripts/pack-check.mjs",
11
- "test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
11
+ "test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/resolve-sx.check.mjs && node --experimental-strip-types scripts/style-system.check.mjs && node --experimental-strip-types scripts/host-sx.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/input.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/viewport-observer.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/flex-item.check.mjs && node --experimental-strip-types scripts/grid.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/markdown.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
12
12
  "prepublishOnly": "pnpm build"
13
13
  },
14
14
  "keywords": [