@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.
@@ -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;
@@ -0,0 +1,10 @@
1
+ -- Compiled with roblox-ts v3.0.0
2
+ local function dividerLabel(text)
3
+ if text == nil or #text == 0 then
4
+ return nil
5
+ end
6
+ return text
7
+ end
8
+ return {
9
+ dividerLabel = dividerLabel,
10
+ }
@@ -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", "disabled", {
573
- disabled = true,
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-on", {
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", "hover", {
586
- pointer = "hover",
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", "press", {
592
- pointer = "press",
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", "focus", {
598
- pointer = "focus",
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", "on-hover", {
604
- value = true,
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-press", {
610
+ local _array_18 = pair("Switch", "on-hover", {
611
611
  value = true,
612
- pointer = "press",
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-focus", {
617
+ local _array_19 = pair("Switch", "on-press", {
618
618
  value = true,
619
- pointer = "focus",
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", "reduced", {
624
+ local _array_20 = pair("Switch", "on-focus", {
625
625
  value = true,
626
- reducedMotion = true,
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", "long", {
632
- text = LONG,
633
- width = NARROW,
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("Slider", "default", {
639
- value = 0.5,
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", "size-small", {
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-medium", {
651
+ local _array_24 = pair("Slider", "size-small", {
652
652
  value = 0.5,
653
- size = "medium",
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-large", {
658
+ local _array_25 = pair("Slider", "size-medium", {
659
659
  value = 0.5,
660
- size = "large",
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", "density-compact", {
665
+ local _array_26 = pair("Slider", "size-large", {
666
666
  value = 0.5,
667
- density = "compact",
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", "disabled", {
672
+ local _array_27 = pair("Slider", "density-compact", {
674
673
  value = 0.5,
675
- disabled = true,
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", "marks", {
680
+ local _array_28 = pair("Slider", "disabled", {
681
681
  value = 0.5,
682
- marks = true,
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", "hover", {
687
+ local _array_29 = pair("Slider", "marks", {
688
688
  value = 0.5,
689
- pointer = "hover",
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", "press", {
694
+ local _array_30 = pair("Slider", "hover", {
695
695
  value = 0.5,
696
- pointer = "press",
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", "focus", {
701
+ local _array_31 = pair("Slider", "press", {
702
702
  value = 0.5,
703
- pointer = "focus",
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", "long", {
709
- value = 0.25,
710
- text = LONG,
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("RadioGroup", "default", {
717
- value = "Continue",
718
- options = { "Continue", "Other" },
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", "row", {
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", "size-small", {
730
+ local _array_35 = pair("RadioGroup", "row", {
732
731
  value = "Continue",
733
732
  options = { "Continue", "Other" },
734
- size = "small",
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-large", {
738
+ local _array_36 = pair("RadioGroup", "size-small", {
740
739
  value = "Continue",
741
740
  options = { "Continue", "Other" },
742
- size = "large",
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", "density-compact", {
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(_array_37, 1, #_array_37, _length + 1, _array)
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("ImageList", "default")
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", "dense", {
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", "wide", {
1920
- size = "large",
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", "titled", {
1926
- text = "Cove",
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("SpeedDial", "closed", {
1932
- open = false,
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", "open", {
1938
- open = true,
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", "disabled", {
1944
- open = false,
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", "down", {
1951
- open = true,
1952
- variant = "down",
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("FormLabel", "default", {
1958
- text = "Email",
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", "required", {
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", "error", {
1976
+ local _array_48 = pair("FormLabel", "required", {
1971
1977
  text = "Email",
1972
- hasError = true,
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("FormHelperText", "default", {
1978
- text = "We never share this",
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", "error", {
1984
- text = "Required",
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("Menu", "closed", {
1991
- open = false,
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", "open", {
1997
- open = true,
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", "empty", {
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", "dense", {
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(_array_54, 1, #_array_54, _length + 1, _array)
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 = theme.palette.primary.main,
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.17",
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": [