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

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 (60) hide show
  1. package/out/ui/packages/backdrop/components/Backdrop.d.ts +10 -0
  2. package/out/ui/packages/backdrop/components/Backdrop.luau +58 -0
  3. package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts +4 -0
  4. package/out/ui/packages/backdrop/components/Backdrop.styles.luau +24 -0
  5. package/out/ui/packages/backdrop/index.d.ts +2 -0
  6. package/out/ui/packages/backdrop/init.luau +5 -0
  7. package/out/ui/packages/badge/components/Badge.styles.luau +6 -3
  8. package/out/ui/packages/breadcrumbs/components/Breadcrumbs.d.ts +1 -0
  9. package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau +58 -24
  10. package/out/ui/packages/breadcrumbs/components/breadcrumbItems.d.ts +9 -0
  11. package/out/ui/packages/breadcrumbs/components/breadcrumbItems.luau +68 -0
  12. package/out/ui/packages/breadcrumbs/index.d.ts +1 -0
  13. package/out/ui/packages/breadcrumbs/init.luau +3 -0
  14. package/out/ui/packages/chip/components/Chip.d.ts +2 -1
  15. package/out/ui/packages/chip/components/Chip.luau +2 -0
  16. package/out/ui/packages/chip/components/Chip.styles.d.ts +2 -0
  17. package/out/ui/packages/chip/components/Chip.styles.luau +13 -7
  18. package/out/ui/packages/dialog/components/Dialog.d.ts +1 -1
  19. package/out/ui/packages/dialog/components/Dialog.luau +27 -18
  20. package/out/ui/packages/fab/components/Fab.d.ts +1 -0
  21. package/out/ui/packages/fab/components/Fab.luau +57 -25
  22. package/out/ui/packages/fab/components/Fab.styles.d.ts +1 -0
  23. package/out/ui/packages/fab/components/Fab.styles.luau +26 -1
  24. package/out/ui/packages/fab/components/fabSize.d.ts +1 -0
  25. package/out/ui/packages/fab/components/fabSize.luau +4 -0
  26. package/out/ui/packages/fab/index.d.ts +1 -1
  27. package/out/ui/packages/fab/init.luau +1 -0
  28. package/out/ui/packages/index.d.ts +1 -0
  29. package/out/ui/packages/init.luau +3 -0
  30. package/out/ui/packages/layout/components/Container.d.ts +10 -0
  31. package/out/ui/packages/layout/components/Container.luau +54 -0
  32. package/out/ui/packages/layout/components/Container.styles.d.ts +6 -0
  33. package/out/ui/packages/layout/components/Container.styles.luau +41 -0
  34. package/out/ui/packages/layout/components/Grid.d.ts +1 -1
  35. package/out/ui/packages/layout/components/containerWidth.d.ts +2 -0
  36. package/out/ui/packages/layout/components/containerWidth.luau +17 -0
  37. package/out/ui/packages/layout/index.d.ts +3 -0
  38. package/out/ui/packages/layout/init.luau +2 -0
  39. package/out/ui/packages/modal/components/Modal.d.ts +1 -1
  40. package/out/ui/packages/modal/components/Modal.luau +55 -37
  41. package/out/ui/packages/pagination/components/Pagination.d.ts +2 -0
  42. package/out/ui/packages/pagination/components/Pagination.luau +37 -21
  43. package/out/ui/packages/pagination/components/Pagination.styles.luau +9 -0
  44. package/out/ui/packages/pagination/components/pageRange.d.ts +2 -1
  45. package/out/ui/packages/pagination/components/pageRange.luau +91 -8
  46. package/out/ui/packages/pagination/index.d.ts +1 -0
  47. package/out/ui/packages/pagination/init.luau +1 -0
  48. package/out/ui/packages/popup/index.d.ts +1 -0
  49. package/out/ui/packages/popup/init.luau +1 -0
  50. package/out/ui/packages/stateMatrix.luau +235 -149
  51. package/out/ui/packages/tabs/components/Tabs.d.ts +2 -0
  52. package/out/ui/packages/tabs/components/Tabs.luau +10 -3
  53. package/out/ui/packages/tabs/components/Tabs.styles.d.ts +4 -1
  54. package/out/ui/packages/tabs/components/Tabs.styles.luau +24 -10
  55. package/out/ui/packages/tabs/components/tabsOrientation.d.ts +2 -0
  56. package/out/ui/packages/tabs/components/tabsOrientation.luau +7 -0
  57. package/out/ui/packages/tabs/index.d.ts +1 -0
  58. package/out/ui/packages/tabs/init.luau +1 -0
  59. package/out/ui/packages/toast/components/Toast.styles.luau +1 -1
  60. package/package.json +2 -2
package/out/ui/packages/tabs/components/Tabs.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import { CustomizedProps } from "../../../../theme/index";
2
2
  import { ChoiceOption } from "../../radioGroup/index";
3
+ import { TabsOrientation } from "./tabsOrientation";
3
4
  export interface TabsProps<T> {
4
5
  value: T;
5
6
  options: ChoiceOption<T>[];
6
7
  onChange: (value: T) => void;
7
8
  disabled?: boolean;
9
+ orientation?: TabsOrientation;
8
10
  }
9
11
  declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
10
12
  export default Tabs;
package/out/ui/packages/tabs/components/Tabs.luau CHANGED
@@ -4,6 +4,7 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
4
4
  local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
5
5
  local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
6
6
  local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
7
+ local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
7
8
  local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
8
9
  local function Tabs(props)
9
10
  local _binding = props
@@ -11,11 +12,15 @@ local function Tabs(props)
11
12
  local options = _binding.options
12
13
  local onChange = _binding.onChange
13
14
  local disabled = _binding.disabled
15
+ local orientation = _binding.orientation
14
16
  local className = _binding.className
15
17
  local sx = _binding.sx
16
18
  local id = _binding.id
17
19
  local ref = _binding.ref
18
- local styles = useTabsStyles()
20
+ local styles = useTabsStyles({
21
+ orientation = orientation,
22
+ })
23
+ local vertical = tabsIsVertical(orientation)
19
24
  local choose = function(index)
20
25
  local choice = options[index + 1]
21
26
  if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
@@ -36,9 +41,11 @@ local function Tabs(props)
36
41
  end
37
42
  -- ▲ ReadonlyArray.findIndex ▲
38
43
  local index = _result
39
- if input.KeyCode == Enum.KeyCode.Left then
44
+ local back = if vertical then Enum.KeyCode.Up else Enum.KeyCode.Left
45
+ local forward = if vertical then Enum.KeyCode.Down else Enum.KeyCode.Right
46
+ if input.KeyCode == back then
40
47
  choose(stepChoice(options, index, -1))
41
- elseif input.KeyCode == Enum.KeyCode.Right then
48
+ elseif input.KeyCode == forward then
42
49
  choose(stepChoice(options, index, 1))
43
50
  end
44
51
  end
package/out/ui/packages/tabs/components/Tabs.styles.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- declare const useTabsStyles: () => import("../../../../theme/index").ClassNameMap<string>;
1
+ import { TabsOrientation } from "./tabsOrientation";
2
+ declare const useTabsStyles: (props: {
3
+ orientation?: TabsOrientation;
4
+ }) => import("../../../../theme/index").ClassNameMap<string>;
2
5
  export default useTabsStyles;
package/out/ui/packages/tabs/components/Tabs.styles.luau CHANGED
@@ -3,32 +3,38 @@ local TS = _G[script]
3
3
  local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
4
4
  local createStyles = _theme.createStyles
5
5
  local componentStyles = _theme.componentStyles
6
- local useTabsStyles = componentStyles("Tabs", function(theme)
6
+ local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
7
+ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
8
+ local orientation = _param.orientation
9
+ local vertical = tabsIsVertical(orientation)
10
+ local bar = theme.padding.calc(0.5)
7
11
  return createStyles({
8
12
  root = {
9
- Size = UDim2.new(1, 0, 0, theme.spacing.calc(4)),
13
+ Size = if vertical then UDim2.new(0, theme.spacing.calc(16), 1, 0) else UDim2.new(1, 0, 0, theme.spacing.calc(4)),
10
14
  BackgroundTransparency = 1,
11
15
  BorderSizePixel = 0,
12
16
  CanvasSize = UDim2.fromScale(0, 0),
13
- AutomaticCanvasSize = Enum.AutomaticSize.X,
14
- ScrollingDirection = Enum.ScrollingDirection.X,
17
+ AutomaticCanvasSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
18
+ ScrollingDirection = if vertical then Enum.ScrollingDirection.Y else Enum.ScrollingDirection.X,
15
19
  HorizontalScrollBarInset = Enum.ScrollBarInset.Always,
20
+ VerticalScrollBarInset = Enum.ScrollBarInset.Always,
16
21
  ScrollBarThickness = theme.padding.calc(0.5),
17
22
  ScrollBarImageColor3 = theme.palette.text.secondary,
18
23
  },
19
24
  list = {
20
- FillDirection = Enum.FillDirection.Horizontal,
25
+ FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
21
26
  SortOrder = Enum.SortOrder.LayoutOrder,
22
27
  },
23
28
  tab = {
24
- AutomaticSize = Enum.AutomaticSize.X,
25
- Size = UDim2.fromScale(0, 1),
29
+ AutomaticSize = if vertical then Enum.AutomaticSize.Y else Enum.AutomaticSize.X,
30
+ Size = if vertical then UDim2.new(1, 0, 0, 0) else UDim2.fromScale(0, 1),
26
31
  BackgroundTransparency = 1,
27
32
  BorderSizePixel = 0,
28
33
  AutoButtonColor = false,
29
34
  TextColor3 = theme.palette.text.secondary,
30
35
  Font = theme.typography.fontFamilies.default,
31
36
  TextSize = theme.typography.fontSizes.body,
37
+ TextXAlignment = if vertical then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
32
38
  },
33
39
  selected = {
34
40
  TextColor3 = theme.palette.text.primary,
@@ -39,14 +45,22 @@ local useTabsStyles = componentStyles("Tabs", function(theme)
39
45
  padding = {
40
46
  PaddingLeft = UDim.new(0, theme.padding.calc(2)),
41
47
  PaddingRight = UDim.new(0, theme.padding.calc(2)),
48
+ PaddingTop = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
49
+ PaddingBottom = UDim.new(0, if vertical then theme.padding.calc(1) else 0),
42
50
  },
43
- indicator = {
44
- Size = UDim2.new(1, theme.padding.calc(4), 0, theme.padding.calc(0.5)),
51
+ indicator = if vertical then ({
52
+ Size = UDim2.new(0, bar, 1, -theme.padding.calc(2)),
53
+ Position = UDim2.new(0, 0, 0.5, 0),
54
+ AnchorPoint = Vector2.new(0, 0.5),
55
+ BackgroundColor3 = theme.palette.primary.main,
56
+ BorderSizePixel = 0,
57
+ }) else ({
58
+ Size = UDim2.new(1, theme.padding.calc(4), 0, bar),
45
59
  Position = UDim2.fromScale(0.5, 1),
46
60
  AnchorPoint = Vector2.new(0.5, 1),
47
61
  BackgroundColor3 = theme.palette.primary.main,
48
62
  BorderSizePixel = 0,
49
- },
63
+ }),
50
64
  })
51
65
  end)
52
66
  local default = useTabsStyles
package/out/ui/packages/tabs/components/tabsOrientation.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type TabsOrientation = "horizontal" | "vertical";
2
+ export declare function tabsIsVertical(orientation?: TabsOrientation): orientation is "vertical";
package/out/ui/packages/tabs/components/tabsOrientation.luau ADDED
@@ -0,0 +1,7 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local function tabsIsVertical(orientation)
3
+ return orientation == "vertical"
4
+ end
5
+ return {
6
+ tabsIsVertical = tabsIsVertical,
7
+ }
package/out/ui/packages/tabs/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default as Tabs } from "./components/Tabs";
2
2
  export { TabsProps } from "./components/Tabs";
3
+ export { TabsOrientation, tabsIsVertical } from "./components/tabsOrientation";
package/out/ui/packages/tabs/init.luau CHANGED
@@ -2,4 +2,5 @@
2
2
  local TS = _G[script]
3
3
  local exports = {}
4
4
  exports.Tabs = TS.import(script, script, "components", "Tabs").default
5
+ exports.tabsIsVertical = TS.import(script, script, "components", "tabsOrientation").tabsIsVertical
5
6
  return exports
package/out/ui/packages/toast/components/Toast.styles.luau CHANGED
@@ -62,7 +62,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
62
62
  ZIndex = 50001,
63
63
  },
64
64
  close = {
65
- Size = UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1)),
65
+ Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
66
66
  Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
67
67
  AnchorPoint = Vector2.new(1, 0),
68
68
  ImageColor3 = toastColors.content,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rbxts/uiblox",
3
- "version": "0.2.0-alpha.6",
3
+ "version": "0.2.0-alpha.8",
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/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/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/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/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/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/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": [