@rbxts/uiblox 0.2.0-alpha.20 → 0.2.0-alpha.22

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 (53) hide show
  1. package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau +1 -1
  2. package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau +1 -1
  3. package/out/ui/packages/cframeEditor/components/CFrameEditor.luau +1 -1
  4. package/out/ui/packages/checkbox/components/checkboxLook.d.ts +1 -1
  5. package/out/ui/packages/colorPicker/components/ColorPicker.luau +1 -1
  6. package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau +1 -1
  7. package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau +1 -1
  8. package/out/ui/packages/imageList/components/ImageList.styles.luau +0 -1
  9. package/out/ui/packages/layout/components/FlexItem.d.ts +12 -0
  10. package/out/ui/packages/layout/components/FlexItem.luau +49 -0
  11. package/out/ui/packages/layout/components/FlexItem.styles.d.ts +8 -0
  12. package/out/ui/packages/layout/components/FlexItem.styles.luau +66 -0
  13. package/out/ui/packages/layout/components/Grid.d.ts +5 -1
  14. package/out/ui/packages/layout/components/Grid.luau +35 -4
  15. package/out/ui/packages/layout/components/Stack.d.ts +2 -0
  16. package/out/ui/packages/layout/components/Stack.luau +4 -0
  17. package/out/ui/packages/layout/components/Stack.styles.d.ts +2 -0
  18. package/out/ui/packages/layout/components/Stack.styles.luau +34 -5
  19. package/out/ui/packages/layout/components/flexItemMode.d.ts +6 -0
  20. package/out/ui/packages/layout/components/flexItemMode.luau +36 -0
  21. package/out/ui/packages/layout/components/gridProps.d.ts +3 -0
  22. package/out/ui/packages/layout/components/gridProps.luau +20 -0
  23. package/out/ui/packages/layout/components/stackAlign.d.ts +4 -2
  24. package/out/ui/packages/layout/components/stackAlign.luau +16 -2
  25. package/out/ui/packages/layout/index.d.ts +4 -0
  26. package/out/ui/packages/layout/init.luau +1 -0
  27. package/out/ui/packages/menu/components/Menu.luau +1 -1
  28. package/out/ui/packages/pagination/components/Pagination.d.ts +2 -0
  29. package/out/ui/packages/pagination/components/Pagination.luau +11 -2
  30. package/out/ui/packages/pagination/components/Pagination.styles.d.ts +2 -0
  31. package/out/ui/packages/pagination/components/Pagination.styles.luau +17 -0
  32. package/out/ui/packages/physicalPropertiesEditor/components/PhysicalPropertiesEditor.luau +1 -1
  33. package/out/ui/packages/radioGroup/components/RadioGroup.luau +1 -1
  34. package/out/ui/packages/rating/components/Rating.luau +1 -1
  35. package/out/ui/packages/rectEditor/components/RectEditor.luau +1 -1
  36. package/out/ui/packages/select/components/Select.luau +2 -39
  37. package/out/ui/packages/skeleton/components/Skeleton.luau +1 -1
  38. package/out/ui/packages/speedDial/components/SpeedDial.luau +1 -1
  39. package/out/ui/packages/splitPane/components/SplitPane.luau +1 -1
  40. package/out/ui/packages/splitPane/components/splitLook.d.ts +1 -1
  41. package/out/ui/packages/stateMatrix.luau +244 -167
  42. package/out/ui/packages/stepper/components/Stepper.luau +1 -1
  43. package/out/ui/packages/switch/components/switchLook.d.ts +1 -1
  44. package/out/ui/packages/table/components/Table.luau +3 -3
  45. package/out/ui/packages/tabs/components/Tabs.luau +1 -1
  46. package/out/ui/packages/toggleButton/components/ToggleButton.d.ts +2 -0
  47. package/out/ui/packages/toggleButton/components/ToggleButton.luau +3 -1
  48. package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts +2 -0
  49. package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau +5 -1
  50. package/out/ui/packages/vectorEditor/components/VectorEditor.luau +1 -1
  51. package/package.json +2 -2
  52. package/out/ui/packages/select/components/selectMotion.d.ts +0 -2
  53. package/out/ui/packages/select/components/selectMotion.luau +0 -12
package/out/ui/packages/stepper/components/Stepper.luau CHANGED
@@ -60,7 +60,7 @@ local function Stepper(props)
60
60
  _newValue[_k] = _callback(_v, _k - 1, steps)
61
61
  end
62
62
  -- ▲ ReadonlyArray.map ▲
63
- return React.createElement("frame", _attributes, _exp, _newValue)
63
+ return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
64
64
  end
65
65
  local default = Stepper
66
66
  return {
package/out/ui/packages/switch/components/switchLook.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export type SwitchPointer = "rest" | "hover" | "press" | "focus";
2
2
  export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
3
- export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.55 | 0.35 | 0.15 | 0.65 | 0.08;
3
+ export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.35 | 0.65 | 0.55 | 0.15 | 0.08;
4
4
  export declare function switchThumbTransparency(disabled: boolean): 0 | 0.35;
5
5
  export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0 | 0.35;
6
6
  export declare function switchThumbPlacement(on: boolean, inset: number): {
package/out/ui/packages/table/components/Table.luau CHANGED
@@ -76,7 +76,7 @@ local function Table(props)
76
76
  _newValue[_k] = _callback(_v, _k - 1, columns)
77
77
  end
78
78
  -- ▲ ReadonlyArray.map ▲
79
- local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, _newValue)
79
+ local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue))
80
80
  -- ▼ ReadonlyArray.map ▼
81
81
  local _newValue_1 = table.create(#rows)
82
82
  local _callback_1 = function(cells, rowIndex)
@@ -124,13 +124,13 @@ local function Table(props)
124
124
  _newValue_2[_k] = _callback_2(_v, _k - 1, columns)
125
125
  end
126
126
  -- ▲ ReadonlyArray.map ▲
127
- return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, _newValue_2)
127
+ return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_2))
128
128
  end
129
129
  for _k, _v in rows do
130
130
  _newValue_1[_k] = _callback_1(_v, _k - 1, rows)
131
131
  end
132
132
  -- ▲ ReadonlyArray.map ▲
133
- return React.createElement("frame", _attributes, _exp, _exp_1, _exp_4, _newValue_1)
133
+ return React.createElement("frame", _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_1))
134
134
  end
135
135
  local default = Table
136
136
  return {
package/out/ui/packages/tabs/components/Tabs.luau CHANGED
@@ -114,7 +114,7 @@ local function Tabs(props)
114
114
  _newValue[_k] = _callback(_v, _k - 1, options)
115
115
  end
116
116
  -- ▲ ReadonlyArray.map ▲
117
- return React.createElement("scrollingframe", _attributes, _exp, _newValue)
117
+ return React.createElement("scrollingframe", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
118
118
  end
119
119
  local default = Tabs
120
120
  return {
package/out/ui/packages/toggleButton/components/ToggleButton.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ControlSize, CustomizedProps } from "../../../../theme/index";
2
2
  import { ChoiceOption } from "../../radioGroup/index";
3
+ import { ToggleButtonOrientation } from "./ToggleButton.styles";
3
4
  export interface ToggleButtonProps {
4
5
  label: string;
5
6
  selected?: boolean;
@@ -14,6 +15,7 @@ export interface ToggleButtonGroupProps<T> {
14
15
  onChange: (value: T) => void;
15
16
  disabled?: boolean;
16
17
  size?: ControlSize;
18
+ orientation?: ToggleButtonOrientation;
17
19
  }
18
20
  export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
19
21
  export default ToggleButton;
package/out/ui/packages/toggleButton/components/ToggleButton.luau CHANGED
@@ -73,12 +73,14 @@ local function ToggleButtonGroup(props)
73
73
  local onChange = _binding.onChange
74
74
  local disabled = _binding.disabled
75
75
  local size = _binding.size
76
+ local orientation = _binding.orientation
76
77
  local className = _binding.className
77
78
  local sx = _binding.sx
78
79
  local id = _binding.id
79
80
  local ref = _binding.ref
80
81
  local styles = useToggleButtonStyles({
81
82
  size = size,
83
+ orientation = orientation,
82
84
  })
83
85
  local _attributes = {}
84
86
  local _condition = id
@@ -126,7 +128,7 @@ local function ToggleButtonGroup(props)
126
128
  _newValue[_k] = _callback(_v, _k - 1, options)
127
129
  end
128
130
  -- ▲ ReadonlyArray.map ▲
129
- return React.createElement("frame", _attributes, _exp, _newValue)
131
+ return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
130
132
  end
131
133
  local default = ToggleButton
132
134
  return {
package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { ControlSize } from "../../../../theme/index";
2
+ export type ToggleButtonOrientation = "horizontal" | "vertical";
2
3
  declare const useToggleButtonStyles: (props: {
3
4
  selected?: boolean;
4
5
  disabled?: boolean;
5
6
  size?: ControlSize;
7
+ orientation?: ToggleButtonOrientation;
6
8
  }) => import("../../../../theme/index").ClassNameMap<string>;
7
9
  export default useToggleButtonStyles;
package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau CHANGED
@@ -16,6 +16,10 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
16
16
  if size == nil then
17
17
  size = "medium"
18
18
  end
19
+ local orientation = _param.orientation
20
+ if orientation == nil then
21
+ orientation = "horizontal"
22
+ end
19
23
  local height = if size == "small" then theme.spacing.calc(3) elseif size == "large" then theme.spacing.calc(5) else theme.spacing.calc(4)
20
24
  local textSize = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
21
25
  local pad = theme.padding.calc(if size == "small" then 1 else 1.5)
@@ -51,7 +55,7 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
51
55
  BorderSizePixel = 0,
52
56
  },
53
57
  list = {
54
- FillDirection = Enum.FillDirection.Horizontal,
58
+ FillDirection = if orientation == "vertical" then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
55
59
  HorizontalAlignment = Enum.HorizontalAlignment.Left,
56
60
  VerticalAlignment = Enum.VerticalAlignment.Center,
57
61
  SortOrder = Enum.SortOrder.LayoutOrder,
package/out/ui/packages/vectorEditor/components/VectorEditor.luau CHANGED
@@ -79,7 +79,7 @@ local function VectorEditor(props)
79
79
  _newValue[_k] = _callback(_v, _k - 1, axes)
80
80
  end
81
81
  -- ▲ ReadonlyArray.map ▲
82
- return React.createElement("frame", _attributes, _exp, _newValue)
82
+ return React.createElement("frame", _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
83
83
  end
84
84
  local default = VectorEditor
85
85
  return {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rbxts/uiblox",
3
- "version": "0.2.0-alpha.20",
3
+ "version": "0.2.0-alpha.22",
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-motion.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/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/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/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/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": [
package/out/ui/packages/select/components/selectMotion.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const SELECT_MENU_SECONDS = 0.12;
2
- export declare function menuHold(open: boolean, reducedMotion?: boolean): 0 | 0.12;
package/out/ui/packages/select/components/selectMotion.luau DELETED
@@ -1,12 +0,0 @@
1
- -- Compiled with roblox-ts v3.0.0
2
- local SELECT_MENU_SECONDS = 0.12
3
- local function menuHold(open, reducedMotion)
4
- if open or reducedMotion == true then
5
- return 0
6
- end
7
- return SELECT_MENU_SECONDS
8
- end
9
- return {
10
- menuHold = menuHold,
11
- SELECT_MENU_SECONDS = SELECT_MENU_SECONDS,
12
- }