@rbxts/uiblox 0.2.0-alpha.16 → 0.2.0-alpha.18
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.
- package/out/ui/packages/badge/components/Badge.d.ts +2 -0
- package/out/ui/packages/badge/components/Badge.luau +5 -0
- package/out/ui/packages/badge/components/Badge.styles.d.ts +2 -0
- package/out/ui/packages/badge/components/Badge.styles.luau +7 -2
- package/out/ui/packages/divider/components/Divider.d.ts +1 -0
- package/out/ui/packages/divider/components/Divider.luau +48 -0
- package/out/ui/packages/divider/components/Divider.styles.luau +29 -0
- package/out/ui/packages/divider/components/dividerLabel.d.ts +1 -0
- package/out/ui/packages/divider/components/dividerLabel.luau +10 -0
- package/out/ui/packages/snackbar/components/Snackbar.d.ts +2 -0
- package/out/ui/packages/snackbar/components/Snackbar.luau +5 -0
- package/out/ui/packages/snackbar/components/snackbarAction.d.ts +1 -0
- package/out/ui/packages/snackbar/components/snackbarAction.luau +10 -0
- package/out/ui/packages/stateMatrix.luau +230 -204
- package/out/ui/packages/switch/components/Switch.d.ts +2 -0
- package/out/ui/packages/switch/components/Switch.luau +5 -0
- package/out/ui/packages/switch/components/Switch.styles.d.ts +2 -0
- package/out/ui/packages/switch/components/Switch.styles.luau +6 -1
- package/out/ui/packages/toast/components/Toast.d.ts +2 -0
- package/out/ui/packages/toast/components/Toast.luau +26 -1
- package/out/ui/packages/toast/components/Toast.styles.luau +21 -3
- package/package.json +2 -2
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ControlSize, CustomizedProps } from "../../../../theme/index";
|
|
2
|
+
import { SwitchColor } from "./Switch.styles";
|
|
2
3
|
export interface SwitchProps {
|
|
3
4
|
value: boolean;
|
|
4
5
|
onChange: (value: boolean) => void;
|
|
5
6
|
disabled?: boolean;
|
|
6
7
|
label?: string;
|
|
7
8
|
size?: ControlSize;
|
|
9
|
+
color?: SwitchColor;
|
|
8
10
|
reducedMotion?: boolean;
|
|
9
11
|
}
|
|
10
12
|
declare function Switch(props: CustomizedProps<TextButton, SwitchProps>): JSX.Element;
|
|
@@ -27,6 +27,10 @@ local function Switch(props)
|
|
|
27
27
|
local disabled = _binding.disabled
|
|
28
28
|
local label = _binding.label
|
|
29
29
|
local size = _binding.size
|
|
30
|
+
local color = _binding.color
|
|
31
|
+
if color == nil then
|
|
32
|
+
color = "primary"
|
|
33
|
+
end
|
|
30
34
|
local reducedProp = _binding.reducedMotion
|
|
31
35
|
local className = _binding.className
|
|
32
36
|
local sx = _binding.sx
|
|
@@ -37,6 +41,7 @@ local function Switch(props)
|
|
|
37
41
|
local theme = _binding_1.theme
|
|
38
42
|
local _binding_2 = useSwitchStyles({
|
|
39
43
|
size = size,
|
|
44
|
+
color = color,
|
|
40
45
|
})
|
|
41
46
|
local root = _binding_2.root
|
|
42
47
|
local row = _binding_2.row
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ControlSize } from "../../../../theme/index";
|
|
2
|
+
export type SwitchColor = "primary" | "accent";
|
|
2
3
|
export interface SwitchStyleProps {
|
|
3
4
|
size?: ControlSize;
|
|
5
|
+
color?: SwitchColor;
|
|
4
6
|
}
|
|
5
7
|
declare const useSwitchStyles: (props: SwitchStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
|
|
6
8
|
export default useSwitchStyles;
|
|
@@ -6,7 +6,12 @@ local createStyles = _theme.createStyles
|
|
|
6
6
|
local componentStyles = _theme.componentStyles
|
|
7
7
|
local useSwitchStyles = componentStyles("Switch", function(theme, _param)
|
|
8
8
|
local size = _param.size
|
|
9
|
+
local color = _param.color
|
|
10
|
+
if color == nil then
|
|
11
|
+
color = "primary"
|
|
12
|
+
end
|
|
9
13
|
local metrics = controlMetrics(theme.density, size)
|
|
14
|
+
local onTone = if color == "accent" then theme.palette.accent.main else theme.palette.primary.main
|
|
10
15
|
return createStyles({
|
|
11
16
|
root = {
|
|
12
17
|
AutomaticSize = Enum.AutomaticSize.XY,
|
|
@@ -28,7 +33,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
|
|
|
28
33
|
BorderSizePixel = 0,
|
|
29
34
|
},
|
|
30
35
|
trackOn = {
|
|
31
|
-
BackgroundColor3 =
|
|
36
|
+
BackgroundColor3 = onTone,
|
|
32
37
|
},
|
|
33
38
|
knob = {
|
|
34
39
|
Size = UDim2.fromOffset(metrics.switchThumb, metrics.switchThumb),
|
|
@@ -18,6 +18,8 @@ local function Toast(props)
|
|
|
18
18
|
if duration == nil then
|
|
19
19
|
duration = 4
|
|
20
20
|
end
|
|
21
|
+
local action = _binding.action
|
|
22
|
+
local onAction = _binding.onAction
|
|
21
23
|
local className = _binding.className
|
|
22
24
|
local sx = _binding.sx
|
|
23
25
|
local id = _binding.id
|
|
@@ -26,6 +28,7 @@ local function Toast(props)
|
|
|
26
28
|
local container = _binding_1.container
|
|
27
29
|
local label = _binding_1.label
|
|
28
30
|
local close = _binding_1.close
|
|
31
|
+
local actionStyle = _binding_1.action
|
|
29
32
|
local activePosition = _binding_1.activePosition
|
|
30
33
|
local inActivePosition = _binding_1.inActivePosition
|
|
31
34
|
local frameRef = useRef()
|
|
@@ -90,6 +93,28 @@ local function Toast(props)
|
|
|
90
93
|
end
|
|
91
94
|
_attributes_1.Text = text
|
|
92
95
|
local _exp_2 = React.createElement("textlabel", _attributes_1)
|
|
96
|
+
local _condition_1 = action ~= nil and #action > 0
|
|
97
|
+
if _condition_1 then
|
|
98
|
+
local _attributes_2 = {
|
|
99
|
+
key = "Action",
|
|
100
|
+
}
|
|
101
|
+
for _k, _v in actionStyle do
|
|
102
|
+
_attributes_2[_k] = _v
|
|
103
|
+
end
|
|
104
|
+
_attributes_2.Text = action
|
|
105
|
+
_attributes_2.Event = {
|
|
106
|
+
Activated = function()
|
|
107
|
+
if onAction then
|
|
108
|
+
onAction()
|
|
109
|
+
end
|
|
110
|
+
tween(Directions.Out)
|
|
111
|
+
if onDismiss then
|
|
112
|
+
onDismiss()
|
|
113
|
+
end
|
|
114
|
+
end,
|
|
115
|
+
}
|
|
116
|
+
_condition_1 = (React.createElement("textbutton", _attributes_2))
|
|
117
|
+
end
|
|
93
118
|
local _attributes_2 = {
|
|
94
119
|
key = "Close",
|
|
95
120
|
}
|
|
@@ -104,7 +129,7 @@ local function Toast(props)
|
|
|
104
129
|
end
|
|
105
130
|
end,
|
|
106
131
|
}
|
|
107
|
-
return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("imagebutton", _attributes_2))
|
|
132
|
+
return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("imagebutton", _attributes_2))
|
|
108
133
|
end
|
|
109
134
|
local default = Toast
|
|
110
135
|
return {
|
|
@@ -11,6 +11,7 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
|
|
|
11
11
|
if variant == nil then
|
|
12
12
|
variant = ToastVariants.default
|
|
13
13
|
end
|
|
14
|
+
local action = _param.action
|
|
14
15
|
local getToastColors = function()
|
|
15
16
|
repeat
|
|
16
17
|
if variant == (ToastVariants.success) then
|
|
@@ -38,6 +39,8 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
|
|
|
38
39
|
until true
|
|
39
40
|
end
|
|
40
41
|
local toastColors = getToastColors()
|
|
42
|
+
local hasAction = action ~= nil and #action > 0
|
|
43
|
+
local actionSlot = if hasAction then theme.spacing.calc(8) else 0
|
|
41
44
|
local ACTIVE_POSITION = UDim2.new(0.5, 0, 1, -DEFAULT_THEME.padding.calc(2))
|
|
42
45
|
local INACTIVE_POSITION = UDim2.new(0.5, 0, 1, DEFAULT_THEME.spacing.calc(20) + DEFAULT_THEME.padding.calc(2))
|
|
43
46
|
return createStyles({
|
|
@@ -50,17 +53,32 @@ local useToastStyles = componentStyles("Toast", function(theme, _param)
|
|
|
50
53
|
ZIndex = 50000,
|
|
51
54
|
},
|
|
52
55
|
label = {
|
|
53
|
-
Size = UDim2.new(1, -theme.padding.calc(4), 1, -theme.padding.calc(4)),
|
|
54
|
-
Position = UDim2.new(0.5, 0, 0.5, 0),
|
|
55
|
-
AnchorPoint = Vector2.new(0.5, 0.5),
|
|
56
|
+
Size = UDim2.new(1, -(theme.padding.calc(4) + actionSlot), 1, -theme.padding.calc(4)),
|
|
57
|
+
Position = if hasAction then UDim2.new(0, theme.padding.calc(2), 0.5, 0) else UDim2.new(0.5, 0, 0.5, 0),
|
|
58
|
+
AnchorPoint = if hasAction then Vector2.new(0, 0.5) else Vector2.new(0.5, 0.5),
|
|
56
59
|
BackgroundTransparency = 1,
|
|
57
60
|
BorderSizePixel = 0,
|
|
58
61
|
TextSize = theme.typography.fontSizes.body,
|
|
59
62
|
TextColor3 = toastColors.content,
|
|
60
63
|
Font = theme.typography.fontFamilies.default,
|
|
64
|
+
TextXAlignment = if hasAction then Enum.TextXAlignment.Left else Enum.TextXAlignment.Center,
|
|
65
|
+
TextTruncate = Enum.TextTruncate.AtEnd,
|
|
61
66
|
TextScaled = false,
|
|
62
67
|
ZIndex = 50001,
|
|
63
68
|
},
|
|
69
|
+
action = {
|
|
70
|
+
AutomaticSize = Enum.AutomaticSize.X,
|
|
71
|
+
Size = UDim2.new(0, 0, 0, theme.spacing.calc(3)),
|
|
72
|
+
Position = UDim2.new(1, -(theme.padding.calc(2) + theme.options.constants.iconSizes.small + theme.padding.calc(1)), 0.5, 0),
|
|
73
|
+
AnchorPoint = Vector2.new(1, 0.5),
|
|
74
|
+
BackgroundTransparency = 1,
|
|
75
|
+
BorderSizePixel = 0,
|
|
76
|
+
Font = theme.typography.fontFamilies.default,
|
|
77
|
+
TextSize = theme.typography.fontSizes.body,
|
|
78
|
+
TextColor3 = toastColors.content,
|
|
79
|
+
AutoButtonColor = false,
|
|
80
|
+
ZIndex = 50001,
|
|
81
|
+
},
|
|
64
82
|
close = {
|
|
65
83
|
Size = UDim2.new(0, theme.options.constants.iconSizes.small, 0, theme.options.constants.iconSizes.small),
|
|
66
84
|
Position = UDim2.new(1, -theme.padding.calc(2), 0, theme.padding.calc(2)),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rbxts/uiblox",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.18",
|
|
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/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/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/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",
|
|
12
12
|
"prepublishOnly": "pnpm build"
|
|
13
13
|
},
|
|
14
14
|
"keywords": [
|