@rbxts/uiblox 0.2.0-alpha.17 → 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/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/stateMatrix.luau +108 -95
- 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/package.json +2 -2
|
@@ -9,6 +9,7 @@ export interface DividerProps {
|
|
|
9
9
|
transparency?: number;
|
|
10
10
|
weight?: number;
|
|
11
11
|
anchorPoint?: Vector2;
|
|
12
|
+
text?: string;
|
|
12
13
|
}
|
|
13
14
|
declare function Divider<T extends DefaultDividerComponent>(props: CustomizedProps<T, DividerProps>): JSX.Element;
|
|
14
15
|
export default Divider;
|
|
@@ -1,15 +1,63 @@
|
|
|
1
1
|
-- Compiled with roblox-ts v3.0.0
|
|
2
2
|
local TS = _G[script]
|
|
3
3
|
local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
|
|
4
|
+
local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
|
|
5
|
+
local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
|
|
4
6
|
local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
|
|
5
7
|
local function Divider(props)
|
|
6
8
|
local _binding = props
|
|
9
|
+
local text = _binding.text
|
|
10
|
+
local orientation = _binding.orientation
|
|
7
11
|
local className = _binding.className
|
|
8
12
|
local sx = _binding.sx
|
|
9
13
|
local id = _binding.id
|
|
10
14
|
local ref = _binding.ref
|
|
11
15
|
local _binding_1 = useDividerStyles(props)
|
|
12
16
|
local root = _binding_1.root
|
|
17
|
+
local shell = _binding_1.shell
|
|
18
|
+
local line = _binding_1.line
|
|
19
|
+
local caption = _binding_1.caption
|
|
20
|
+
local captionPad = _binding_1.captionPad
|
|
21
|
+
local label = dividerLabel(text)
|
|
22
|
+
if label ~= nil and orientation ~= Orientations.Vertical then
|
|
23
|
+
local _attributes = {}
|
|
24
|
+
local _condition = id
|
|
25
|
+
if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
|
|
26
|
+
_condition = "Divider"
|
|
27
|
+
end
|
|
28
|
+
_attributes.key = _condition
|
|
29
|
+
_attributes.ref = ref
|
|
30
|
+
for _k, _v in shell do
|
|
31
|
+
_attributes[_k] = _v
|
|
32
|
+
end
|
|
33
|
+
if className ~= 0 and className == className and className ~= "" and className then
|
|
34
|
+
for _k, _v in className do
|
|
35
|
+
_attributes[_k] = _v
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
if sx ~= 0 and sx == sx and sx ~= "" and sx then
|
|
39
|
+
for _k, _v in sx do
|
|
40
|
+
_attributes[_k] = _v
|
|
41
|
+
end
|
|
42
|
+
end
|
|
43
|
+
local _attributes_1 = {
|
|
44
|
+
key = "Line",
|
|
45
|
+
}
|
|
46
|
+
for _k, _v in line do
|
|
47
|
+
_attributes_1[_k] = _v
|
|
48
|
+
end
|
|
49
|
+
local _exp = React.createElement("frame", _attributes_1)
|
|
50
|
+
local _attributes_2 = {
|
|
51
|
+
key = "Label",
|
|
52
|
+
}
|
|
53
|
+
for _k, _v in caption do
|
|
54
|
+
_attributes_2[_k] = _v
|
|
55
|
+
end
|
|
56
|
+
_attributes_2.Text = label
|
|
57
|
+
local _attributes_3 = table.clone(captionPad)
|
|
58
|
+
setmetatable(_attributes_3, nil)
|
|
59
|
+
return React.createElement("frame", _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
|
|
60
|
+
end
|
|
13
61
|
local _attributes = {}
|
|
14
62
|
local _condition = id
|
|
15
63
|
if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
|
|
@@ -32,6 +32,35 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
|
|
|
32
32
|
anchorPoint = Vector2.new(0, 0)
|
|
33
33
|
end
|
|
34
34
|
return createStyles({
|
|
35
|
+
shell = {
|
|
36
|
+
Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
|
|
37
|
+
BackgroundTransparency = 1,
|
|
38
|
+
BorderSizePixel = 0,
|
|
39
|
+
},
|
|
40
|
+
line = {
|
|
41
|
+
Size = UDim2.new(1, 0, 0, weight),
|
|
42
|
+
Position = UDim2.new(0, 0, 0.5, 0),
|
|
43
|
+
AnchorPoint = Vector2.new(0, 0.5),
|
|
44
|
+
BackgroundColor3 = color,
|
|
45
|
+
BackgroundTransparency = transparency,
|
|
46
|
+
BorderSizePixel = 0,
|
|
47
|
+
},
|
|
48
|
+
caption = {
|
|
49
|
+
AutomaticSize = Enum.AutomaticSize.XY,
|
|
50
|
+
Size = UDim2.fromScale(0, 0),
|
|
51
|
+
AnchorPoint = Vector2.new(0.5, 0.5),
|
|
52
|
+
Position = UDim2.new(0.5, 0, 0.5, 0),
|
|
53
|
+
BackgroundColor3 = theme.palette.surface.canvas,
|
|
54
|
+
BorderSizePixel = 0,
|
|
55
|
+
Font = theme.typography.fontFamilies.default,
|
|
56
|
+
TextSize = theme.typography.fontSizes.caption,
|
|
57
|
+
TextColor3 = theme.palette.text.secondary,
|
|
58
|
+
ZIndex = 2,
|
|
59
|
+
},
|
|
60
|
+
captionPad = {
|
|
61
|
+
PaddingLeft = UDim.new(0, theme.padding.calc(1)),
|
|
62
|
+
PaddingRight = UDim.new(0, theme.padding.calc(1)),
|
|
63
|
+
},
|
|
35
64
|
root = {
|
|
36
65
|
Position = position or UDim2.new(0, 0, 0, 0),
|
|
37
66
|
Size = UDim2.new(if orientation == Orientations.Horizontal then 1 else 0, if orientation == Orientations.Horizontal then -padding * 2 else weight, if orientation == Orientations.Vertical then 1 else 0, if orientation == Orientations.Vertical then -padding * 2 else weight),
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function dividerLabel(text?: string): string | undefined;
|
|
@@ -569,188 +569,195 @@ local function togglesRows()
|
|
|
569
569
|
local _Length_10 = #_array_11
|
|
570
570
|
table.move(_array_11, 1, _Length_10, _length + 1, _array)
|
|
571
571
|
_length += _Length_10
|
|
572
|
-
local _array_12 = pair("Switch", "
|
|
573
|
-
|
|
572
|
+
local _array_12 = pair("Switch", "accent", {
|
|
573
|
+
value = true,
|
|
574
|
+
variant = "accent",
|
|
574
575
|
})
|
|
575
576
|
local _Length_11 = #_array_12
|
|
576
577
|
table.move(_array_12, 1, _Length_11, _length + 1, _array)
|
|
577
578
|
_length += _Length_11
|
|
578
|
-
local _array_13 = pair("Switch", "disabled
|
|
579
|
-
value = true,
|
|
579
|
+
local _array_13 = pair("Switch", "disabled", {
|
|
580
580
|
disabled = true,
|
|
581
581
|
})
|
|
582
582
|
local _Length_12 = #_array_13
|
|
583
583
|
table.move(_array_13, 1, _Length_12, _length + 1, _array)
|
|
584
584
|
_length += _Length_12
|
|
585
|
-
local _array_14 = pair("Switch", "
|
|
586
|
-
|
|
585
|
+
local _array_14 = pair("Switch", "disabled-on", {
|
|
586
|
+
value = true,
|
|
587
|
+
disabled = true,
|
|
587
588
|
})
|
|
588
589
|
local _Length_13 = #_array_14
|
|
589
590
|
table.move(_array_14, 1, _Length_13, _length + 1, _array)
|
|
590
591
|
_length += _Length_13
|
|
591
|
-
local _array_15 = pair("Switch", "
|
|
592
|
-
pointer = "
|
|
592
|
+
local _array_15 = pair("Switch", "hover", {
|
|
593
|
+
pointer = "hover",
|
|
593
594
|
})
|
|
594
595
|
local _Length_14 = #_array_15
|
|
595
596
|
table.move(_array_15, 1, _Length_14, _length + 1, _array)
|
|
596
597
|
_length += _Length_14
|
|
597
|
-
local _array_16 = pair("Switch", "
|
|
598
|
-
pointer = "
|
|
598
|
+
local _array_16 = pair("Switch", "press", {
|
|
599
|
+
pointer = "press",
|
|
599
600
|
})
|
|
600
601
|
local _Length_15 = #_array_16
|
|
601
602
|
table.move(_array_16, 1, _Length_15, _length + 1, _array)
|
|
602
603
|
_length += _Length_15
|
|
603
|
-
local _array_17 = pair("Switch", "
|
|
604
|
-
|
|
605
|
-
pointer = "hover",
|
|
604
|
+
local _array_17 = pair("Switch", "focus", {
|
|
605
|
+
pointer = "focus",
|
|
606
606
|
})
|
|
607
607
|
local _Length_16 = #_array_17
|
|
608
608
|
table.move(_array_17, 1, _Length_16, _length + 1, _array)
|
|
609
609
|
_length += _Length_16
|
|
610
|
-
local _array_18 = pair("Switch", "on-
|
|
610
|
+
local _array_18 = pair("Switch", "on-hover", {
|
|
611
611
|
value = true,
|
|
612
|
-
pointer = "
|
|
612
|
+
pointer = "hover",
|
|
613
613
|
})
|
|
614
614
|
local _Length_17 = #_array_18
|
|
615
615
|
table.move(_array_18, 1, _Length_17, _length + 1, _array)
|
|
616
616
|
_length += _Length_17
|
|
617
|
-
local _array_19 = pair("Switch", "on-
|
|
617
|
+
local _array_19 = pair("Switch", "on-press", {
|
|
618
618
|
value = true,
|
|
619
|
-
pointer = "
|
|
619
|
+
pointer = "press",
|
|
620
620
|
})
|
|
621
621
|
local _Length_18 = #_array_19
|
|
622
622
|
table.move(_array_19, 1, _Length_18, _length + 1, _array)
|
|
623
623
|
_length += _Length_18
|
|
624
|
-
local _array_20 = pair("Switch", "
|
|
624
|
+
local _array_20 = pair("Switch", "on-focus", {
|
|
625
625
|
value = true,
|
|
626
|
-
|
|
626
|
+
pointer = "focus",
|
|
627
627
|
})
|
|
628
628
|
local _Length_19 = #_array_20
|
|
629
629
|
table.move(_array_20, 1, _Length_19, _length + 1, _array)
|
|
630
630
|
_length += _Length_19
|
|
631
|
-
local _array_21 = pair("Switch", "
|
|
632
|
-
|
|
633
|
-
|
|
631
|
+
local _array_21 = pair("Switch", "reduced", {
|
|
632
|
+
value = true,
|
|
633
|
+
reducedMotion = true,
|
|
634
634
|
})
|
|
635
635
|
local _Length_20 = #_array_21
|
|
636
636
|
table.move(_array_21, 1, _Length_20, _length + 1, _array)
|
|
637
637
|
_length += _Length_20
|
|
638
|
-
local _array_22 = pair("
|
|
639
|
-
|
|
638
|
+
local _array_22 = pair("Switch", "long", {
|
|
639
|
+
text = LONG,
|
|
640
|
+
width = NARROW,
|
|
640
641
|
})
|
|
641
642
|
local _Length_21 = #_array_22
|
|
642
643
|
table.move(_array_22, 1, _Length_21, _length + 1, _array)
|
|
643
644
|
_length += _Length_21
|
|
644
|
-
local _array_23 = pair("Slider", "
|
|
645
|
+
local _array_23 = pair("Slider", "default", {
|
|
645
646
|
value = 0.5,
|
|
646
|
-
size = "small",
|
|
647
647
|
})
|
|
648
648
|
local _Length_22 = #_array_23
|
|
649
649
|
table.move(_array_23, 1, _Length_22, _length + 1, _array)
|
|
650
650
|
_length += _Length_22
|
|
651
|
-
local _array_24 = pair("Slider", "size-
|
|
651
|
+
local _array_24 = pair("Slider", "size-small", {
|
|
652
652
|
value = 0.5,
|
|
653
|
-
size = "
|
|
653
|
+
size = "small",
|
|
654
654
|
})
|
|
655
655
|
local _Length_23 = #_array_24
|
|
656
656
|
table.move(_array_24, 1, _Length_23, _length + 1, _array)
|
|
657
657
|
_length += _Length_23
|
|
658
|
-
local _array_25 = pair("Slider", "size-
|
|
658
|
+
local _array_25 = pair("Slider", "size-medium", {
|
|
659
659
|
value = 0.5,
|
|
660
|
-
size = "
|
|
660
|
+
size = "medium",
|
|
661
661
|
})
|
|
662
662
|
local _Length_24 = #_array_25
|
|
663
663
|
table.move(_array_25, 1, _Length_24, _length + 1, _array)
|
|
664
664
|
_length += _Length_24
|
|
665
|
-
local _array_26 = pair("Slider", "
|
|
665
|
+
local _array_26 = pair("Slider", "size-large", {
|
|
666
666
|
value = 0.5,
|
|
667
|
-
|
|
668
|
-
size = "small",
|
|
667
|
+
size = "large",
|
|
669
668
|
})
|
|
670
669
|
local _Length_25 = #_array_26
|
|
671
670
|
table.move(_array_26, 1, _Length_25, _length + 1, _array)
|
|
672
671
|
_length += _Length_25
|
|
673
|
-
local _array_27 = pair("Slider", "
|
|
672
|
+
local _array_27 = pair("Slider", "density-compact", {
|
|
674
673
|
value = 0.5,
|
|
675
|
-
|
|
674
|
+
density = "compact",
|
|
675
|
+
size = "small",
|
|
676
676
|
})
|
|
677
677
|
local _Length_26 = #_array_27
|
|
678
678
|
table.move(_array_27, 1, _Length_26, _length + 1, _array)
|
|
679
679
|
_length += _Length_26
|
|
680
|
-
local _array_28 = pair("Slider", "
|
|
680
|
+
local _array_28 = pair("Slider", "disabled", {
|
|
681
681
|
value = 0.5,
|
|
682
|
-
|
|
682
|
+
disabled = true,
|
|
683
683
|
})
|
|
684
684
|
local _Length_27 = #_array_28
|
|
685
685
|
table.move(_array_28, 1, _Length_27, _length + 1, _array)
|
|
686
686
|
_length += _Length_27
|
|
687
|
-
local _array_29 = pair("Slider", "
|
|
687
|
+
local _array_29 = pair("Slider", "marks", {
|
|
688
688
|
value = 0.5,
|
|
689
|
-
|
|
689
|
+
marks = true,
|
|
690
690
|
})
|
|
691
691
|
local _Length_28 = #_array_29
|
|
692
692
|
table.move(_array_29, 1, _Length_28, _length + 1, _array)
|
|
693
693
|
_length += _Length_28
|
|
694
|
-
local _array_30 = pair("Slider", "
|
|
694
|
+
local _array_30 = pair("Slider", "hover", {
|
|
695
695
|
value = 0.5,
|
|
696
|
-
pointer = "
|
|
696
|
+
pointer = "hover",
|
|
697
697
|
})
|
|
698
698
|
local _Length_29 = #_array_30
|
|
699
699
|
table.move(_array_30, 1, _Length_29, _length + 1, _array)
|
|
700
700
|
_length += _Length_29
|
|
701
|
-
local _array_31 = pair("Slider", "
|
|
701
|
+
local _array_31 = pair("Slider", "press", {
|
|
702
702
|
value = 0.5,
|
|
703
|
-
pointer = "
|
|
703
|
+
pointer = "press",
|
|
704
704
|
})
|
|
705
705
|
local _Length_30 = #_array_31
|
|
706
706
|
table.move(_array_31, 1, _Length_30, _length + 1, _array)
|
|
707
707
|
_length += _Length_30
|
|
708
|
-
local _array_32 = pair("Slider", "
|
|
709
|
-
value = 0.
|
|
710
|
-
|
|
711
|
-
width = NARROW,
|
|
708
|
+
local _array_32 = pair("Slider", "focus", {
|
|
709
|
+
value = 0.5,
|
|
710
|
+
pointer = "focus",
|
|
712
711
|
})
|
|
713
712
|
local _Length_31 = #_array_32
|
|
714
713
|
table.move(_array_32, 1, _Length_31, _length + 1, _array)
|
|
715
714
|
_length += _Length_31
|
|
716
|
-
local _array_33 = pair("
|
|
717
|
-
value =
|
|
718
|
-
|
|
715
|
+
local _array_33 = pair("Slider", "long", {
|
|
716
|
+
value = 0.25,
|
|
717
|
+
text = LONG,
|
|
718
|
+
width = NARROW,
|
|
719
719
|
})
|
|
720
720
|
local _Length_32 = #_array_33
|
|
721
721
|
table.move(_array_33, 1, _Length_32, _length + 1, _array)
|
|
722
722
|
_length += _Length_32
|
|
723
|
-
local _array_34 = pair("RadioGroup", "
|
|
723
|
+
local _array_34 = pair("RadioGroup", "default", {
|
|
724
724
|
value = "Continue",
|
|
725
725
|
options = { "Continue", "Other" },
|
|
726
|
-
row = true,
|
|
727
726
|
})
|
|
728
727
|
local _Length_33 = #_array_34
|
|
729
728
|
table.move(_array_34, 1, _Length_33, _length + 1, _array)
|
|
730
729
|
_length += _Length_33
|
|
731
|
-
local _array_35 = pair("RadioGroup", "
|
|
730
|
+
local _array_35 = pair("RadioGroup", "row", {
|
|
732
731
|
value = "Continue",
|
|
733
732
|
options = { "Continue", "Other" },
|
|
734
|
-
|
|
733
|
+
row = true,
|
|
735
734
|
})
|
|
736
735
|
local _Length_34 = #_array_35
|
|
737
736
|
table.move(_array_35, 1, _Length_34, _length + 1, _array)
|
|
738
737
|
_length += _Length_34
|
|
739
|
-
local _array_36 = pair("RadioGroup", "size-
|
|
738
|
+
local _array_36 = pair("RadioGroup", "size-small", {
|
|
740
739
|
value = "Continue",
|
|
741
740
|
options = { "Continue", "Other" },
|
|
742
|
-
size = "
|
|
741
|
+
size = "small",
|
|
743
742
|
})
|
|
744
743
|
local _Length_35 = #_array_36
|
|
745
744
|
table.move(_array_36, 1, _Length_35, _length + 1, _array)
|
|
746
745
|
_length += _Length_35
|
|
747
|
-
local _array_37 = pair("RadioGroup", "
|
|
746
|
+
local _array_37 = pair("RadioGroup", "size-large", {
|
|
747
|
+
value = "Continue",
|
|
748
|
+
options = { "Continue", "Other" },
|
|
749
|
+
size = "large",
|
|
750
|
+
})
|
|
751
|
+
local _Length_36 = #_array_37
|
|
752
|
+
table.move(_array_37, 1, _Length_36, _length + 1, _array)
|
|
753
|
+
_length += _Length_36
|
|
754
|
+
local _array_38 = pair("RadioGroup", "density-compact", {
|
|
748
755
|
value = "Continue",
|
|
749
756
|
options = { "Continue", "Other" },
|
|
750
757
|
density = "compact",
|
|
751
758
|
size = "small",
|
|
752
759
|
})
|
|
753
|
-
table.move(
|
|
760
|
+
table.move(_array_38, 1, #_array_38, _length + 1, _array)
|
|
754
761
|
return _array
|
|
755
762
|
end
|
|
756
763
|
local function compositeRows()
|
|
@@ -1906,111 +1913,117 @@ local function miscRows()
|
|
|
1906
1913
|
local _Length_36 = #_array_37
|
|
1907
1914
|
table.move(_array_37, 1, _Length_36, _length + 1, _array)
|
|
1908
1915
|
_length += _Length_36
|
|
1909
|
-
local _array_38 = pair("
|
|
1916
|
+
local _array_38 = pair("Divider", "label", {
|
|
1917
|
+
text = "Or",
|
|
1918
|
+
})
|
|
1910
1919
|
local _Length_37 = #_array_38
|
|
1911
1920
|
table.move(_array_38, 1, _Length_37, _length + 1, _array)
|
|
1912
1921
|
_length += _Length_37
|
|
1913
|
-
local _array_39 = pair("ImageList", "
|
|
1914
|
-
size = "small",
|
|
1915
|
-
})
|
|
1922
|
+
local _array_39 = pair("ImageList", "default")
|
|
1916
1923
|
local _Length_38 = #_array_39
|
|
1917
1924
|
table.move(_array_39, 1, _Length_38, _length + 1, _array)
|
|
1918
1925
|
_length += _Length_38
|
|
1919
|
-
local _array_40 = pair("ImageList", "
|
|
1920
|
-
size = "
|
|
1926
|
+
local _array_40 = pair("ImageList", "dense", {
|
|
1927
|
+
size = "small",
|
|
1921
1928
|
})
|
|
1922
1929
|
local _Length_39 = #_array_40
|
|
1923
1930
|
table.move(_array_40, 1, _Length_39, _length + 1, _array)
|
|
1924
1931
|
_length += _Length_39
|
|
1925
|
-
local _array_41 = pair("ImageList", "
|
|
1926
|
-
|
|
1932
|
+
local _array_41 = pair("ImageList", "wide", {
|
|
1933
|
+
size = "large",
|
|
1927
1934
|
})
|
|
1928
1935
|
local _Length_40 = #_array_41
|
|
1929
1936
|
table.move(_array_41, 1, _Length_40, _length + 1, _array)
|
|
1930
1937
|
_length += _Length_40
|
|
1931
|
-
local _array_42 = pair("
|
|
1932
|
-
|
|
1938
|
+
local _array_42 = pair("ImageList", "titled", {
|
|
1939
|
+
text = "Cove",
|
|
1933
1940
|
})
|
|
1934
1941
|
local _Length_41 = #_array_42
|
|
1935
1942
|
table.move(_array_42, 1, _Length_41, _length + 1, _array)
|
|
1936
1943
|
_length += _Length_41
|
|
1937
|
-
local _array_43 = pair("SpeedDial", "
|
|
1938
|
-
open =
|
|
1944
|
+
local _array_43 = pair("SpeedDial", "closed", {
|
|
1945
|
+
open = false,
|
|
1939
1946
|
})
|
|
1940
1947
|
local _Length_42 = #_array_43
|
|
1941
1948
|
table.move(_array_43, 1, _Length_42, _length + 1, _array)
|
|
1942
1949
|
_length += _Length_42
|
|
1943
|
-
local _array_44 = pair("SpeedDial", "
|
|
1944
|
-
open =
|
|
1945
|
-
disabled = true,
|
|
1950
|
+
local _array_44 = pair("SpeedDial", "open", {
|
|
1951
|
+
open = true,
|
|
1946
1952
|
})
|
|
1947
1953
|
local _Length_43 = #_array_44
|
|
1948
1954
|
table.move(_array_44, 1, _Length_43, _length + 1, _array)
|
|
1949
1955
|
_length += _Length_43
|
|
1950
|
-
local _array_45 = pair("SpeedDial", "
|
|
1951
|
-
open =
|
|
1952
|
-
|
|
1956
|
+
local _array_45 = pair("SpeedDial", "disabled", {
|
|
1957
|
+
open = false,
|
|
1958
|
+
disabled = true,
|
|
1953
1959
|
})
|
|
1954
1960
|
local _Length_44 = #_array_45
|
|
1955
1961
|
table.move(_array_45, 1, _Length_44, _length + 1, _array)
|
|
1956
1962
|
_length += _Length_44
|
|
1957
|
-
local _array_46 = pair("
|
|
1958
|
-
|
|
1963
|
+
local _array_46 = pair("SpeedDial", "down", {
|
|
1964
|
+
open = true,
|
|
1965
|
+
variant = "down",
|
|
1959
1966
|
})
|
|
1960
1967
|
local _Length_45 = #_array_46
|
|
1961
1968
|
table.move(_array_46, 1, _Length_45, _length + 1, _array)
|
|
1962
1969
|
_length += _Length_45
|
|
1963
|
-
local _array_47 = pair("FormLabel", "
|
|
1970
|
+
local _array_47 = pair("FormLabel", "default", {
|
|
1964
1971
|
text = "Email",
|
|
1965
|
-
value = true,
|
|
1966
1972
|
})
|
|
1967
1973
|
local _Length_46 = #_array_47
|
|
1968
1974
|
table.move(_array_47, 1, _Length_46, _length + 1, _array)
|
|
1969
1975
|
_length += _Length_46
|
|
1970
|
-
local _array_48 = pair("FormLabel", "
|
|
1976
|
+
local _array_48 = pair("FormLabel", "required", {
|
|
1971
1977
|
text = "Email",
|
|
1972
|
-
|
|
1978
|
+
value = true,
|
|
1973
1979
|
})
|
|
1974
1980
|
local _Length_47 = #_array_48
|
|
1975
1981
|
table.move(_array_48, 1, _Length_47, _length + 1, _array)
|
|
1976
1982
|
_length += _Length_47
|
|
1977
|
-
local _array_49 = pair("
|
|
1978
|
-
text = "
|
|
1983
|
+
local _array_49 = pair("FormLabel", "error", {
|
|
1984
|
+
text = "Email",
|
|
1985
|
+
hasError = true,
|
|
1979
1986
|
})
|
|
1980
1987
|
local _Length_48 = #_array_49
|
|
1981
1988
|
table.move(_array_49, 1, _Length_48, _length + 1, _array)
|
|
1982
1989
|
_length += _Length_48
|
|
1983
|
-
local _array_50 = pair("FormHelperText", "
|
|
1984
|
-
text = "
|
|
1985
|
-
hasError = true,
|
|
1990
|
+
local _array_50 = pair("FormHelperText", "default", {
|
|
1991
|
+
text = "We never share this",
|
|
1986
1992
|
})
|
|
1987
1993
|
local _Length_49 = #_array_50
|
|
1988
1994
|
table.move(_array_50, 1, _Length_49, _length + 1, _array)
|
|
1989
1995
|
_length += _Length_49
|
|
1990
|
-
local _array_51 = pair("
|
|
1991
|
-
|
|
1996
|
+
local _array_51 = pair("FormHelperText", "error", {
|
|
1997
|
+
text = "Required",
|
|
1998
|
+
hasError = true,
|
|
1992
1999
|
})
|
|
1993
2000
|
local _Length_50 = #_array_51
|
|
1994
2001
|
table.move(_array_51, 1, _Length_50, _length + 1, _array)
|
|
1995
2002
|
_length += _Length_50
|
|
1996
|
-
local _array_52 = pair("Menu", "
|
|
1997
|
-
open =
|
|
2003
|
+
local _array_52 = pair("Menu", "closed", {
|
|
2004
|
+
open = false,
|
|
1998
2005
|
})
|
|
1999
2006
|
local _Length_51 = #_array_52
|
|
2000
2007
|
table.move(_array_52, 1, _Length_51, _length + 1, _array)
|
|
2001
2008
|
_length += _Length_51
|
|
2002
|
-
local _array_53 = pair("Menu", "
|
|
2009
|
+
local _array_53 = pair("Menu", "open", {
|
|
2003
2010
|
open = true,
|
|
2004
|
-
options = {},
|
|
2005
2011
|
})
|
|
2006
2012
|
local _Length_52 = #_array_53
|
|
2007
2013
|
table.move(_array_53, 1, _Length_52, _length + 1, _array)
|
|
2008
2014
|
_length += _Length_52
|
|
2009
|
-
local _array_54 = pair("Menu", "
|
|
2015
|
+
local _array_54 = pair("Menu", "empty", {
|
|
2016
|
+
open = true,
|
|
2017
|
+
options = {},
|
|
2018
|
+
})
|
|
2019
|
+
local _Length_53 = #_array_54
|
|
2020
|
+
table.move(_array_54, 1, _Length_53, _length + 1, _array)
|
|
2021
|
+
_length += _Length_53
|
|
2022
|
+
local _array_55 = pair("Menu", "dense", {
|
|
2010
2023
|
open = true,
|
|
2011
2024
|
variant = "dense",
|
|
2012
2025
|
})
|
|
2013
|
-
table.move(
|
|
2026
|
+
table.move(_array_55, 1, #_array_55, _length + 1, _array)
|
|
2014
2027
|
return _array
|
|
2015
2028
|
end
|
|
2016
2029
|
local function concatRows(...)
|
|
@@ -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),
|
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": [
|