@rbxts/uiblox 0.2.0-alpha.4 → 0.2.0-alpha.6

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 (76) hide show
  1. package/out/ui/packages/alert/components/Alert.luau +34 -27
  2. package/out/ui/packages/alert/components/Alert.styles.d.ts +1 -0
  3. package/out/ui/packages/alert/components/Alert.styles.luau +10 -2
  4. package/out/ui/packages/autocomplete/components/Autocomplete.luau +8 -0
  5. package/out/ui/packages/checkbox/components/checkboxLook.d.ts +1 -1
  6. package/out/ui/packages/chip/components/Chip.d.ts +1 -0
  7. package/out/ui/packages/chip/components/Chip.luau +37 -2
  8. package/out/ui/packages/chip/components/Chip.styles.d.ts +1 -0
  9. package/out/ui/packages/chip/components/Chip.styles.luau +29 -1
  10. package/out/ui/packages/circularProgress/components/CircularProgress.luau +13 -2
  11. package/out/ui/packages/formText/components/FormHelperText.d.ts +8 -0
  12. package/out/ui/packages/formText/components/FormHelperText.luau +44 -0
  13. package/out/ui/packages/formText/components/FormLabel.d.ts +9 -0
  14. package/out/ui/packages/formText/components/FormLabel.luau +46 -0
  15. package/out/ui/packages/formText/components/FormText.styles.d.ts +5 -0
  16. package/out/ui/packages/formText/components/FormText.styles.luau +33 -0
  17. package/out/ui/packages/formText/index.d.ts +4 -0
  18. package/out/ui/packages/formText/init.luau +6 -0
  19. package/out/ui/packages/imageList/components/ImageList.d.ts +14 -0
  20. package/out/ui/packages/imageList/components/ImageList.luau +84 -0
  21. package/out/ui/packages/imageList/components/ImageList.styles.d.ts +6 -0
  22. package/out/ui/packages/imageList/components/ImageList.styles.luau +54 -0
  23. package/out/ui/packages/imageList/components/imageListLayout.d.ts +3 -0
  24. package/out/ui/packages/imageList/components/imageListLayout.luau +24 -0
  25. package/out/ui/packages/imageList/index.d.ts +2 -0
  26. package/out/ui/packages/imageList/init.luau +5 -0
  27. package/out/ui/packages/index.d.ts +3 -0
  28. package/out/ui/packages/init.luau +9 -0
  29. package/out/ui/packages/layout/components/Box.d.ts +11 -0
  30. package/out/ui/packages/layout/components/Box.luau +49 -0
  31. package/out/ui/packages/layout/components/Box.styles.d.ts +7 -0
  32. package/out/ui/packages/layout/components/Box.styles.luau +34 -0
  33. package/out/ui/packages/layout/components/Stack.d.ts +12 -0
  34. package/out/ui/packages/layout/components/Stack.luau +49 -0
  35. package/out/ui/packages/layout/components/Stack.styles.d.ts +8 -0
  36. package/out/ui/packages/layout/components/Stack.styles.luau +72 -0
  37. package/out/ui/packages/layout/components/boxPad.d.ts +14 -0
  38. package/out/ui/packages/layout/components/boxPad.luau +59 -0
  39. package/out/ui/packages/layout/components/stackAlign.d.ts +8 -0
  40. package/out/ui/packages/layout/components/stackAlign.luau +29 -0
  41. package/out/ui/packages/layout/index.d.ts +7 -0
  42. package/out/ui/packages/layout/init.luau +2 -0
  43. package/out/ui/packages/menu/components/Menu.d.ts +3 -0
  44. package/out/ui/packages/menu/components/Menu.luau +48 -23
  45. package/out/ui/packages/menu/components/Menu.styles.luau +5 -1
  46. package/out/ui/packages/motion/index.d.ts +1 -1
  47. package/out/ui/packages/motion/init.luau +1 -0
  48. package/out/ui/packages/motion/unit.d.ts +5 -0
  49. package/out/ui/packages/motion/unit.luau +23 -0
  50. package/out/ui/packages/radioGroup/components/RadioGroup.d.ts +1 -0
  51. package/out/ui/packages/radioGroup/components/RadioGroup.luau +4 -2
  52. package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts +1 -0
  53. package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau +4 -1
  54. package/out/ui/packages/select/components/Select.d.ts +5 -0
  55. package/out/ui/packages/select/components/Select.luau +48 -24
  56. package/out/ui/packages/select/components/Select.styles.luau +1 -1
  57. package/out/ui/packages/skeleton/components/Skeleton.styles.luau +7 -3
  58. package/out/ui/packages/skeleton/components/skeletonTone.d.ts +20 -0
  59. package/out/ui/packages/skeleton/components/skeletonTone.luau +14 -0
  60. package/out/ui/packages/speedDial/components/SpeedDial.d.ts +17 -0
  61. package/out/ui/packages/speedDial/components/SpeedDial.luau +92 -0
  62. package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts +2 -0
  63. package/out/ui/packages/speedDial/components/SpeedDial.styles.luau +26 -0
  64. package/out/ui/packages/speedDial/index.d.ts +2 -0
  65. package/out/ui/packages/speedDial/init.luau +5 -0
  66. package/out/ui/packages/splitPane/components/splitLook.d.ts +1 -1
  67. package/out/ui/packages/stateMatrix.d.ts +1 -0
  68. package/out/ui/packages/stateMatrix.luau +239 -81
  69. package/out/ui/packages/switch/components/switchLook.d.ts +1 -1
  70. package/out/ui/packages/virtualList/components/EmptyListHint.d.ts +6 -0
  71. package/out/ui/packages/virtualList/components/EmptyListHint.luau +32 -0
  72. package/out/ui/packages/virtualList/components/EmptyListHint.styles.d.ts +5 -0
  73. package/out/ui/packages/virtualList/components/EmptyListHint.styles.luau +26 -0
  74. package/out/ui/packages/virtualList/index.d.ts +2 -0
  75. package/out/ui/packages/virtualList/init.luau +1 -0
  76. package/package.json +2 -2
@@ -0,0 +1,24 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local function imageListCols(cols)
3
+ if cols == nil or cols < 1 then
4
+ return 3
5
+ end
6
+ return math.floor(cols)
7
+ end
8
+ local function imageListGap(gap)
9
+ if gap == nil or gap < 0 then
10
+ return 1
11
+ end
12
+ return gap
13
+ end
14
+ local function imageListItemSize(itemSize)
15
+ if itemSize == nil or itemSize < 1 then
16
+ return 96
17
+ end
18
+ return math.floor(itemSize)
19
+ end
20
+ return {
21
+ imageListCols = imageListCols,
22
+ imageListGap = imageListGap,
23
+ imageListItemSize = imageListItemSize,
24
+ }
@@ -0,0 +1,2 @@
1
+ export { default as ImageList } from "./components/ImageList";
2
+ export { ImageListProps, ImageListItem } from "./components/ImageList";
@@ -0,0 +1,5 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local TS = _G[script]
3
+ local exports = {}
4
+ exports.ImageList = TS.import(script, script, "components", "ImageList").default
5
+ return exports
@@ -3,8 +3,10 @@ export * from "./skeleton/index";
3
3
  export * from "./divider/index";
4
4
  export * from "./errorBoundary/index";
5
5
  export * from "./icon/index";
6
+ export * from "./imageList/index";
6
7
  export * from "./iconButton/index";
7
8
  export * from "./input/index";
9
+ export * from "./formText/index";
8
10
  export * from "./layout/index";
9
11
  export * from "./preloader/index";
10
12
  export * from "./progressBar/index";
@@ -48,6 +50,7 @@ export * from "./snackbar/index";
48
50
  export * from "./table/index";
49
51
  export * from "./autocomplete/index";
50
52
  export * from "./fab/index";
53
+ export * from "./speedDial/index";
51
54
  export * from "./appBar/index";
52
55
  export * from "./bottomNavigation/index";
53
56
  export * from "./alert/index";
@@ -16,12 +16,18 @@ end
16
16
  for _k, _v in TS.import(script, script, "icon") or {} do
17
17
  exports[_k] = _v
18
18
  end
19
+ for _k, _v in TS.import(script, script, "imageList") or {} do
20
+ exports[_k] = _v
21
+ end
19
22
  for _k, _v in TS.import(script, script, "iconButton") or {} do
20
23
  exports[_k] = _v
21
24
  end
22
25
  for _k, _v in TS.import(script, script, "input") or {} do
23
26
  exports[_k] = _v
24
27
  end
28
+ for _k, _v in TS.import(script, script, "formText") or {} do
29
+ exports[_k] = _v
30
+ end
25
31
  for _k, _v in TS.import(script, script, "layout") or {} do
26
32
  exports[_k] = _v
27
33
  end
@@ -151,6 +157,9 @@ end
151
157
  for _k, _v in TS.import(script, script, "fab") or {} do
152
158
  exports[_k] = _v
153
159
  end
160
+ for _k, _v in TS.import(script, script, "speedDial") or {} do
161
+ exports[_k] = _v
162
+ end
154
163
  for _k, _v in TS.import(script, script, "appBar") or {} do
155
164
  exports[_k] = _v
156
165
  end
@@ -0,0 +1,11 @@
1
+ import React from "@rbxts/react";
2
+ import { CustomizedProps } from "../../../../theme/index";
3
+ import { BoxPad } from "./boxPad";
4
+ import { BoxBg } from "./Box.styles";
5
+ export interface BoxProps {
6
+ padding?: BoxPad;
7
+ bgcolor?: BoxBg;
8
+ children?: React.ReactNode;
9
+ }
10
+ declare function Box(props: CustomizedProps<Frame, BoxProps>): JSX.Element;
11
+ export default Box;
@@ -0,0 +1,49 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local TS = _G[script]
3
+ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
+ local useBoxStyles = TS.import(script, script.Parent, "Box.styles").default
5
+ local function Box(props)
6
+ local _binding = props
7
+ local padding = _binding.padding
8
+ local bgcolor = _binding.bgcolor
9
+ local children = _binding.children
10
+ local className = _binding.className
11
+ local sx = _binding.sx
12
+ local id = _binding.id
13
+ local ref = _binding.ref
14
+ local styles = useBoxStyles({
15
+ padding = padding,
16
+ bgcolor = bgcolor,
17
+ })
18
+ local _attributes = {}
19
+ local _condition = id
20
+ if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
21
+ _condition = "Box"
22
+ end
23
+ _attributes.key = _condition
24
+ _attributes.ref = ref
25
+ for _k, _v in styles.root do
26
+ _attributes[_k] = _v
27
+ end
28
+ if className then
29
+ for _k, _v in className do
30
+ _attributes[_k] = _v
31
+ end
32
+ end
33
+ if sx then
34
+ for _k, _v in sx do
35
+ _attributes[_k] = _v
36
+ end
37
+ end
38
+ local _condition_1 = padding ~= nil
39
+ if _condition_1 then
40
+ local _attributes_1 = table.clone(styles.padding)
41
+ setmetatable(_attributes_1, nil)
42
+ _condition_1 = React.createElement("uipadding", _attributes_1)
43
+ end
44
+ return React.createElement("frame", _attributes, _condition_1, children)
45
+ end
46
+ local default = Box
47
+ return {
48
+ default = default,
49
+ }
@@ -0,0 +1,7 @@
1
+ import { BoxPad } from "./boxPad";
2
+ export type BoxBg = "transparent" | "paper" | "elevated" | "input";
3
+ declare const useBoxStyles: (props: {
4
+ padding?: BoxPad;
5
+ bgcolor?: BoxBg;
6
+ }) => import("../../../../theme/index").ClassNameMap<string>;
7
+ export default useBoxStyles;
@@ -0,0 +1,34 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local TS = _G[script]
3
+ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
4
+ local componentStyles = _theme.componentStyles
5
+ local createStyles = _theme.createStyles
6
+ local boxPadSides = TS.import(script, script.Parent, "boxPad").boxPadSides
7
+ local useBoxStyles = componentStyles("Box", function(theme, _param)
8
+ local padding = _param.padding
9
+ local bgcolor = _param.bgcolor
10
+ if bgcolor == nil then
11
+ bgcolor = "transparent"
12
+ end
13
+ local sides = boxPadSides(padding)
14
+ local fill = if bgcolor == "paper" then theme.palette.surface.paper elseif bgcolor == "elevated" then theme.palette.surface.elevated elseif bgcolor == "input" then theme.palette.surface.input else theme.palette.surface.paper
15
+ return createStyles({
16
+ root = {
17
+ AutomaticSize = Enum.AutomaticSize.XY,
18
+ Size = UDim2.fromScale(0, 0),
19
+ BackgroundColor3 = fill,
20
+ BackgroundTransparency = if bgcolor == "transparent" then 1 else 0,
21
+ BorderSizePixel = 0,
22
+ },
23
+ padding = {
24
+ PaddingTop = UDim.new(0, theme.spacing.calc(sides.top)),
25
+ PaddingRight = UDim.new(0, theme.spacing.calc(sides.right)),
26
+ PaddingBottom = UDim.new(0, theme.spacing.calc(sides.bottom)),
27
+ PaddingLeft = UDim.new(0, theme.spacing.calc(sides.left)),
28
+ },
29
+ })
30
+ end)
31
+ local default = useBoxStyles
32
+ return {
33
+ default = default,
34
+ }
@@ -0,0 +1,12 @@
1
+ import React from "@rbxts/react";
2
+ import { CustomizedProps } from "../../../../theme/index";
3
+ import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
4
+ export interface StackProps {
5
+ direction?: StackDirection;
6
+ spacing?: number;
7
+ alignItems?: StackAlign;
8
+ justifyContent?: StackJustify;
9
+ children?: React.ReactNode;
10
+ }
11
+ declare function Stack(props: CustomizedProps<Frame, StackProps>): JSX.Element;
12
+ export default Stack;
@@ -0,0 +1,49 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local TS = _G[script]
3
+ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
+ local useStackStyles = TS.import(script, script.Parent, "Stack.styles").default
5
+ local function Stack(props)
6
+ local _binding = props
7
+ local direction = _binding.direction
8
+ local spacing = _binding.spacing
9
+ local alignItems = _binding.alignItems
10
+ local justifyContent = _binding.justifyContent
11
+ local children = _binding.children
12
+ local className = _binding.className
13
+ local sx = _binding.sx
14
+ local id = _binding.id
15
+ local ref = _binding.ref
16
+ local styles = useStackStyles({
17
+ direction = direction,
18
+ spacing = spacing,
19
+ alignItems = alignItems,
20
+ justifyContent = justifyContent,
21
+ })
22
+ local _attributes = {}
23
+ local _condition = id
24
+ if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
25
+ _condition = "Stack"
26
+ end
27
+ _attributes.key = _condition
28
+ _attributes.ref = ref
29
+ for _k, _v in styles.root do
30
+ _attributes[_k] = _v
31
+ end
32
+ if className then
33
+ for _k, _v in className do
34
+ _attributes[_k] = _v
35
+ end
36
+ end
37
+ if sx then
38
+ for _k, _v in sx do
39
+ _attributes[_k] = _v
40
+ end
41
+ end
42
+ local _attributes_1 = table.clone(styles.list)
43
+ setmetatable(_attributes_1, nil)
44
+ return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
45
+ end
46
+ local default = Stack
47
+ return {
48
+ default = default,
49
+ }
@@ -0,0 +1,8 @@
1
+ import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
2
+ declare const useStackStyles: (props: {
3
+ direction?: StackDirection;
4
+ spacing?: number;
5
+ alignItems?: StackAlign;
6
+ justifyContent?: StackJustify;
7
+ }) => import("../../../../theme/index").ClassNameMap<string>;
8
+ export default useStackStyles;
@@ -0,0 +1,72 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local TS = _G[script]
3
+ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
4
+ local componentStyles = _theme.componentStyles
5
+ local createStyles = _theme.createStyles
6
+ local _stackAlign = TS.import(script, script.Parent, "stackAlign")
7
+ local stackAlignKey = _stackAlign.stackAlignKey
8
+ local stackGap = _stackAlign.stackGap
9
+ local stackIsRow = _stackAlign.stackIsRow
10
+ local stackJustifyKey = _stackAlign.stackJustifyKey
11
+ local stackUsesFlex = _stackAlign.stackUsesFlex
12
+ local function horizontalAlign(key)
13
+ if key == "center" then
14
+ return Enum.HorizontalAlignment.Center
15
+ end
16
+ if key == "end" then
17
+ return Enum.HorizontalAlignment.Right
18
+ end
19
+ return Enum.HorizontalAlignment.Left
20
+ end
21
+ local function verticalAlign(key)
22
+ if key == "center" then
23
+ return Enum.VerticalAlignment.Center
24
+ end
25
+ if key == "end" then
26
+ return Enum.VerticalAlignment.Bottom
27
+ end
28
+ return Enum.VerticalAlignment.Top
29
+ end
30
+ local function mainFlex(justify)
31
+ if justify == "space-between" then
32
+ return Enum.UIFlexAlignment.SpaceBetween
33
+ end
34
+ if justify == "space-around" then
35
+ return Enum.UIFlexAlignment.SpaceAround
36
+ end
37
+ if justify == "space-evenly" then
38
+ return Enum.UIFlexAlignment.SpaceEvenly
39
+ end
40
+ return Enum.UIFlexAlignment.None
41
+ end
42
+ local useStackStyles = componentStyles("Stack", function(theme, _param)
43
+ local direction = _param.direction
44
+ local spacing = _param.spacing
45
+ local alignItems = _param.alignItems
46
+ local justifyContent = _param.justifyContent
47
+ local row = stackIsRow(direction)
48
+ local cross = stackAlignKey(alignItems)
49
+ local main = stackJustifyKey(justifyContent)
50
+ local flex = if stackUsesFlex(main) then mainFlex(main) else Enum.UIFlexAlignment.None
51
+ return createStyles({
52
+ root = {
53
+ AutomaticSize = Enum.AutomaticSize.XY,
54
+ Size = UDim2.fromScale(0, 0),
55
+ BackgroundTransparency = 1,
56
+ BorderSizePixel = 0,
57
+ },
58
+ list = {
59
+ FillDirection = if row then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
60
+ SortOrder = Enum.SortOrder.LayoutOrder,
61
+ Padding = UDim.new(0, theme.spacing.calc(stackGap(spacing))),
62
+ HorizontalAlignment = if row then horizontalAlign(main) else horizontalAlign(cross),
63
+ VerticalAlignment = if row then verticalAlign(cross) else verticalAlign(main),
64
+ HorizontalFlex = if row then flex else Enum.UIFlexAlignment.None,
65
+ VerticalFlex = if row then Enum.UIFlexAlignment.None else flex,
66
+ },
67
+ })
68
+ end)
69
+ local default = useStackStyles
70
+ return {
71
+ default = default,
72
+ }
@@ -0,0 +1,14 @@
1
+ export type BoxPad = number | {
2
+ x?: number;
3
+ y?: number;
4
+ top?: number;
5
+ right?: number;
6
+ bottom?: number;
7
+ left?: number;
8
+ };
9
+ export declare function boxPadSides(padding?: BoxPad): {
10
+ top: number;
11
+ right: number;
12
+ bottom: number;
13
+ left: number;
14
+ };
@@ -0,0 +1,59 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local function boxPadSides(padding)
3
+ if padding == nil then
4
+ return {
5
+ top = 0,
6
+ right = 0,
7
+ bottom = 0,
8
+ left = 0,
9
+ }
10
+ end
11
+ local _padding = padding
12
+ if type(_padding) == "number" then
13
+ return {
14
+ top = padding,
15
+ right = padding,
16
+ bottom = padding,
17
+ left = padding,
18
+ }
19
+ end
20
+ local _condition = padding.x
21
+ if _condition == nil then
22
+ _condition = 0
23
+ end
24
+ local x = _condition
25
+ local _condition_1 = padding.y
26
+ if _condition_1 == nil then
27
+ _condition_1 = 0
28
+ end
29
+ local y = _condition_1
30
+ local _object = {}
31
+ local _left = "top"
32
+ local _condition_2 = padding.top
33
+ if _condition_2 == nil then
34
+ _condition_2 = y
35
+ end
36
+ _object[_left] = _condition_2
37
+ local _left_1 = "right"
38
+ local _condition_3 = padding.right
39
+ if _condition_3 == nil then
40
+ _condition_3 = x
41
+ end
42
+ _object[_left_1] = _condition_3
43
+ local _left_2 = "bottom"
44
+ local _condition_4 = padding.bottom
45
+ if _condition_4 == nil then
46
+ _condition_4 = y
47
+ end
48
+ _object[_left_2] = _condition_4
49
+ local _left_3 = "left"
50
+ local _condition_5 = padding.left
51
+ if _condition_5 == nil then
52
+ _condition_5 = x
53
+ end
54
+ _object[_left_3] = _condition_5
55
+ return _object
56
+ end
57
+ return {
58
+ boxPadSides = boxPadSides,
59
+ }
@@ -0,0 +1,8 @@
1
+ export type StackDirection = "row" | "column";
2
+ export type StackAlign = "start" | "center" | "end";
3
+ export type StackJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
4
+ export declare function stackIsRow(direction?: StackDirection): direction is "row";
5
+ export declare function stackGap(spacing?: number): number;
6
+ export declare function stackUsesFlex(justify?: StackJustify): justify is "space-between" | "space-around" | "space-evenly";
7
+ export declare function stackAlignKey(align?: StackAlign): StackAlign;
8
+ export declare function stackJustifyKey(justify?: StackJustify): StackJustify;
@@ -0,0 +1,29 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local function stackIsRow(direction)
3
+ return direction == "row"
4
+ end
5
+ local function stackGap(spacing)
6
+ return if spacing == nil then 1 else spacing
7
+ end
8
+ local function stackUsesFlex(justify)
9
+ return justify == "space-between" or justify == "space-around" or justify == "space-evenly"
10
+ end
11
+ local function stackAlignKey(align)
12
+ if align == "center" or align == "end" then
13
+ return align
14
+ end
15
+ return "start"
16
+ end
17
+ local function stackJustifyKey(justify)
18
+ if justify == "center" or justify == "end" or justify == "space-between" or justify == "space-around" or justify == "space-evenly" then
19
+ return justify
20
+ end
21
+ return "start"
22
+ end
23
+ return {
24
+ stackIsRow = stackIsRow,
25
+ stackGap = stackGap,
26
+ stackUsesFlex = stackUsesFlex,
27
+ stackAlignKey = stackAlignKey,
28
+ stackJustifyKey = stackJustifyKey,
29
+ }
@@ -4,3 +4,10 @@ export * from "./components/Grid";
4
4
  export { default as List } from "./components/List";
5
5
  export { ListProps } from "./components/List";
6
6
  export * from "./components/List";
7
+ export { default as Stack } from "./components/Stack";
8
+ export { StackProps } from "./components/Stack";
9
+ export { StackAlign, StackDirection, StackJustify } from "./components/stackAlign";
10
+ export { default as Box } from "./components/Box";
11
+ export { BoxProps } from "./components/Box";
12
+ export { BoxPad } from "./components/boxPad";
13
+ export { BoxBg } from "./components/Box.styles";
@@ -9,4 +9,6 @@ exports.List = TS.import(script, script, "components", "List").default
9
9
  for _k, _v in TS.import(script, script, "components", "List") or {} do
10
10
  exports[_k] = _v
11
11
  end
12
+ exports.Stack = TS.import(script, script, "components", "Stack").default
13
+ exports.Box = TS.import(script, script, "components", "Box").default
12
14
  return exports
@@ -1,3 +1,4 @@
1
+ import React from "@rbxts/react";
1
2
  export interface MenuItem {
2
3
  id: string;
3
4
  text: string;
@@ -9,6 +10,8 @@ export interface MenuProps {
9
10
  items: MenuItem[];
10
11
  onSelect: (id: string) => void;
11
12
  onClose: () => void;
13
+ emptyText?: string;
14
+ empty?: React.Element;
12
15
  }
13
16
  declare function Menu(props: MenuProps): JSX.Element | undefined;
14
17
  export default Menu;
@@ -3,6 +3,7 @@ local TS = _G[script]
3
3
  local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
4
  local ListItem = TS.import(script, script.Parent.Parent.Parent, "listItem").ListItem
5
5
  local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
6
+ local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
6
7
  local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
7
8
  local ROW = 28
8
9
  local function Menu(props)
@@ -12,10 +13,14 @@ local function Menu(props)
12
13
  local items = _binding.items
13
14
  local onSelect = _binding.onSelect
14
15
  local onClose = _binding.onClose
16
+ local emptyText = _binding.emptyText
17
+ local empty = _binding.empty
15
18
  local styles = useMenuStyles()
16
19
  if not open then
17
20
  return nil
18
21
  end
22
+ local vacant = #items == 0
23
+ local height = if vacant then ROW else #items * ROW
19
24
  local _attributes = {
20
25
  key = "Surface",
21
26
  }
@@ -25,34 +30,54 @@ local function Menu(props)
25
30
  local _attributes_1 = table.clone(styles.corner)
26
31
  setmetatable(_attributes_1, nil)
27
32
  local _exp = React.createElement("uicorner", _attributes_1)
28
- local _attributes_2 = table.clone(styles.list)
33
+ local _attributes_2 = table.clone(styles.stroke)
29
34
  setmetatable(_attributes_2, nil)
30
- local _exp_1 = React.createElement("uilistlayout", _attributes_2)
31
- -- ▼ ReadonlyArray.map ▼
32
- local _newValue = table.create(#items)
33
- local _callback = function(item)
34
- return React.createElement(ListItem, {
35
- key = item.id,
36
- text = item.text,
37
- disabled = item.disabled,
38
- onActivated = function()
39
- if item.disabled == true then
40
- return nil
41
- end
42
- onSelect(item.id)
43
- onClose()
44
- end,
45
- })
35
+ local _exp_1 = React.createElement("uistroke", _attributes_2)
36
+ local _attributes_3 = table.clone(styles.list)
37
+ setmetatable(_attributes_3, nil)
38
+ local _exp_2 = React.createElement("uilistlayout", _attributes_3)
39
+ local _result
40
+ if vacant then
41
+ local _condition = empty
42
+ if _condition == nil then
43
+ local _attributes_4 = {}
44
+ local _condition_1 = emptyText
45
+ if _condition_1 == nil then
46
+ _condition_1 = "No options"
47
+ end
48
+ _attributes_4.text = _condition_1
49
+ _attributes_4.height = ROW
50
+ _condition = React.createElement(EmptyListHint, _attributes_4)
51
+ end
52
+ _result = _condition
53
+ else
54
+ -- ▼ ReadonlyArray.map ▼
55
+ local _newValue = table.create(#items)
56
+ local _callback = function(item)
57
+ return React.createElement(ListItem, {
58
+ key = item.id,
59
+ text = item.text,
60
+ disabled = item.disabled,
61
+ onActivated = function()
62
+ if item.disabled == true then
63
+ return nil
64
+ end
65
+ onSelect(item.id)
66
+ onClose()
67
+ end,
68
+ })
69
+ end
70
+ for _k, _v in items do
71
+ _newValue[_k] = _callback(_v, _k - 1, items)
72
+ end
73
+ -- ▲ ReadonlyArray.map ▲
74
+ _result = _newValue
46
75
  end
47
- for _k, _v in items do
48
- _newValue[_k] = _callback(_v, _k - 1, items)
49
- end
50
- -- ▲ ReadonlyArray.map ▲
51
76
  return React.createElement(Popup, {
52
77
  anchor = anchor,
53
- preferredHeight = #items * ROW,
78
+ preferredHeight = height,
54
79
  onDismiss = onClose,
55
- }, React.createElement("frame", _attributes, _exp, _exp_1, _newValue))
80
+ }, React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _result))
56
81
  end
57
82
  local default = Menu
58
83
  return {
@@ -8,12 +8,16 @@ local useMenuStyles = componentStyles("Menu", function(theme)
8
8
  surface = {
9
9
  Size = UDim2.new(1, 0, 0, 0),
10
10
  AutomaticSize = Enum.AutomaticSize.Y,
11
- BackgroundColor3 = theme.palette.surface.paper,
11
+ BackgroundColor3 = theme.palette.surface.elevated,
12
12
  BorderSizePixel = 0,
13
13
  },
14
14
  corner = {
15
15
  CornerRadius = UDim.new(0, theme.shape.borderRadius),
16
16
  },
17
+ stroke = {
18
+ Color = theme.palette.border,
19
+ ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
20
+ },
17
21
  list = {
18
22
  FillDirection = Enum.FillDirection.Vertical,
19
23
  SortOrder = Enum.SortOrder.LayoutOrder,
@@ -2,4 +2,4 @@ export { loopProperty } from "./loop";
2
2
  export { motionDuration, assignGoal } from "./duration";
3
3
  export { playProperty } from "./play";
4
4
  export { resolveReduced } from "./resolveReduced";
5
- export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys } from "./unit";
5
+ export { clampUnit, stopOnce, progressUnit, progressSpin, arcKeys, spinArcKeys } from "./unit";
@@ -13,4 +13,5 @@ exports.stopOnce = _unit.stopOnce
13
13
  exports.progressUnit = _unit.progressUnit
14
14
  exports.progressSpin = _unit.progressSpin
15
15
  exports.arcKeys = _unit.arcKeys
16
+ exports.spinArcKeys = _unit.spinArcKeys
16
17
  return exports
@@ -6,3 +6,8 @@ export declare function arcKeys(value: number): {
6
6
  time: number;
7
7
  transparency: number;
8
8
  }[];
9
+ /** Indeterminate ring: long clear trail, bright head — reads as a sweep. */
10
+ export declare function spinArcKeys(): {
11
+ time: number;
12
+ transparency: number;
13
+ }[];
@@ -71,10 +71,33 @@ local function arcKeys(value)
71
71
  transparency = 1,
72
72
  } }
73
73
  end
74
+ --* Indeterminate ring: long clear trail, bright head — reads as a sweep.
75
+ local function spinArcKeys()
76
+ return { {
77
+ time = 0,
78
+ transparency = 1,
79
+ }, {
80
+ time = 0.45,
81
+ transparency = 1,
82
+ }, {
83
+ time = 0.7,
84
+ transparency = 0.55,
85
+ }, {
86
+ time = 0.88,
87
+ transparency = 0,
88
+ }, {
89
+ time = 0.96,
90
+ transparency = 0.35,
91
+ }, {
92
+ time = 1,
93
+ transparency = 1,
94
+ } }
95
+ end
74
96
  return {
75
97
  clampUnit = clampUnit,
76
98
  stopOnce = stopOnce,
77
99
  progressUnit = progressUnit,
78
100
  progressSpin = progressSpin,
79
101
  arcKeys = arcKeys,
102
+ spinArcKeys = spinArcKeys,
80
103
  }
@@ -11,6 +11,7 @@ export interface RadioGroupProps<T> {
11
11
  onChange: (value: T) => void;
12
12
  disabled?: boolean;
13
13
  size?: ControlSize;
14
+ row?: boolean;
14
15
  }
15
16
  declare function RadioGroup<T>(props: CustomizedProps<Frame, RadioGroupProps<T>>): JSX.Element;
16
17
  export default RadioGroup;