@rbxts/uiblox 0.2.0-alpha.5 → 0.2.0-alpha.7

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 (72) 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/backdrop/components/Backdrop.d.ts +10 -0
  5. package/out/ui/packages/backdrop/components/Backdrop.luau +58 -0
  6. package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts +4 -0
  7. package/out/ui/packages/backdrop/components/Backdrop.styles.luau +24 -0
  8. package/out/ui/packages/backdrop/index.d.ts +2 -0
  9. package/out/ui/packages/backdrop/init.luau +5 -0
  10. package/out/ui/packages/badge/components/Badge.styles.luau +6 -3
  11. package/out/ui/packages/checkbox/components/checkboxLook.d.ts +1 -1
  12. package/out/ui/packages/chip/components/Chip.d.ts +2 -1
  13. package/out/ui/packages/chip/components/Chip.luau +2 -0
  14. package/out/ui/packages/chip/components/Chip.styles.d.ts +2 -0
  15. package/out/ui/packages/chip/components/Chip.styles.luau +13 -7
  16. package/out/ui/packages/circularProgress/components/CircularProgress.luau +13 -2
  17. package/out/ui/packages/dialog/components/Dialog.d.ts +1 -1
  18. package/out/ui/packages/dialog/components/Dialog.luau +27 -18
  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 +2 -0
  28. package/out/ui/packages/init.luau +6 -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/Container.d.ts +10 -0
  34. package/out/ui/packages/layout/components/Container.luau +54 -0
  35. package/out/ui/packages/layout/components/Container.styles.d.ts +6 -0
  36. package/out/ui/packages/layout/components/Container.styles.luau +41 -0
  37. package/out/ui/packages/layout/components/Grid.d.ts +1 -1
  38. package/out/ui/packages/layout/components/boxPad.d.ts +14 -0
  39. package/out/ui/packages/layout/components/boxPad.luau +59 -0
  40. package/out/ui/packages/layout/components/containerWidth.d.ts +2 -0
  41. package/out/ui/packages/layout/components/containerWidth.luau +17 -0
  42. package/out/ui/packages/layout/index.d.ts +7 -0
  43. package/out/ui/packages/layout/init.luau +3 -0
  44. package/out/ui/packages/modal/components/Modal.d.ts +1 -1
  45. package/out/ui/packages/modal/components/Modal.luau +55 -37
  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/popup/index.d.ts +1 -0
  51. package/out/ui/packages/popup/init.luau +1 -0
  52. package/out/ui/packages/radioGroup/components/RadioGroup.d.ts +1 -0
  53. package/out/ui/packages/radioGroup/components/RadioGroup.luau +4 -2
  54. package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts +1 -0
  55. package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau +4 -1
  56. package/out/ui/packages/skeleton/components/Skeleton.styles.luau +7 -3
  57. package/out/ui/packages/skeleton/components/skeletonTone.d.ts +20 -0
  58. package/out/ui/packages/skeleton/components/skeletonTone.luau +14 -0
  59. package/out/ui/packages/splitPane/components/splitLook.d.ts +1 -1
  60. package/out/ui/packages/stateMatrix.d.ts +1 -0
  61. package/out/ui/packages/stateMatrix.luau +191 -85
  62. package/out/ui/packages/switch/components/switchLook.d.ts +1 -1
  63. package/out/ui/packages/tabs/components/Tabs.d.ts +2 -0
  64. package/out/ui/packages/tabs/components/Tabs.luau +10 -3
  65. package/out/ui/packages/tabs/components/Tabs.styles.d.ts +4 -1
  66. package/out/ui/packages/tabs/components/Tabs.styles.luau +24 -10
  67. package/out/ui/packages/tabs/components/tabsOrientation.d.ts +2 -0
  68. package/out/ui/packages/tabs/components/tabsOrientation.luau +7 -0
  69. package/out/ui/packages/tabs/index.d.ts +1 -0
  70. package/out/ui/packages/tabs/init.luau +1 -0
  71. package/out/ui/packages/toast/components/Toast.styles.luau +1 -1
  72. package/package.json +2 -2
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.5",
3
+ "version": "0.2.0-alpha.7",
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/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": [