@telus-uds/components-base 1.1.0 → 1.2.0

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 (50) hide show
  1. package/.ultra.cache.json +1 -1
  2. package/CHANGELOG.md +8 -0
  3. package/__fixtures__/Accessible.js +4 -2
  4. package/__fixtures__/Accessible.native.js +5 -2
  5. package/__fixtures__/testTheme.js +9 -0
  6. package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx +1 -0
  7. package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx +10 -0
  8. package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx +192 -0
  9. package/component-docs.json +614 -796
  10. package/lib/Button/ButtonBase.js +20 -6
  11. package/lib/Card/PressableCardBase.js +9 -3
  12. package/lib/Checkbox/Checkbox.js +0 -2
  13. package/lib/IconButton/IconButton.js +8 -3
  14. package/lib/Link/LinkBase.js +10 -3
  15. package/lib/Pagination/PageButton.js +3 -1
  16. package/lib/Pagination/Pagination.js +16 -4
  17. package/lib/Pagination/SideButton.js +3 -1
  18. package/lib/Radio/Radio.js +0 -2
  19. package/lib/Tabs/Tabs.js +12 -4
  20. package/lib/Tabs/TabsItem.js +12 -6
  21. package/lib/ToggleSwitch/ToggleSwitch.js +99 -37
  22. package/lib/ToggleSwitch/ToggleSwitchGroup.js +230 -0
  23. package/lib/ToggleSwitch/index.js +14 -4
  24. package/lib/index.js +13 -8
  25. package/lib/utils/index.js +10 -1
  26. package/lib/utils/propTypes.js +26 -1
  27. package/lib/utils/withLinkRouter.js +98 -0
  28. package/package.json +2 -2
  29. package/release-context.json +4 -4
  30. package/src/Button/ButtonBase.jsx +11 -4
  31. package/src/Card/PressableCardBase.jsx +6 -4
  32. package/src/Checkbox/Checkbox.jsx +0 -2
  33. package/src/IconButton/IconButton.jsx +6 -4
  34. package/src/Link/LinkBase.jsx +6 -4
  35. package/src/Pagination/PageButton.jsx +3 -2
  36. package/src/Pagination/Pagination.jsx +29 -2
  37. package/src/Pagination/SideButton.jsx +2 -2
  38. package/src/Radio/Radio.jsx +0 -2
  39. package/src/Tabs/Tabs.jsx +49 -22
  40. package/src/Tabs/TabsItem.jsx +11 -7
  41. package/src/ToggleSwitch/ToggleSwitch.jsx +92 -34
  42. package/src/ToggleSwitch/ToggleSwitchGroup.jsx +203 -0
  43. package/src/ToggleSwitch/index.js +2 -1
  44. package/src/index.js +1 -1
  45. package/src/utils/index.js +1 -0
  46. package/src/utils/propTypes.js +30 -0
  47. package/src/utils/withLinkRouter.jsx +68 -0
  48. package/stories/TextInput/TextArea.stories.jsx +1 -0
  49. package/stories/ToggleSwitch/ToggleSwitch.stories.jsx +5 -1
  50. package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx +81 -0
package/component-docs.json CHANGED
@@ -725,6 +725,12 @@
725
725
  "trackBorderRadius": "radius",
726
726
  "iconSize": "size",
727
727
  "iconColor": "color",
728
+ "labelColor": "color",
729
+ "labelFontName": "fontName",
730
+ "labelFontSize": "fontSize",
731
+ "labelFontWeight": "fontWeight",
732
+ "labelLineHeight": "lineHeight",
733
+ "labelMarginLeft": "size",
728
734
  "switchSize": "size",
729
735
  "switchColor": "color",
730
736
  "switchBorderColor": "color",
@@ -732,6 +738,14 @@
732
738
  "switchBorderRadius": "radius",
733
739
  "switchShadow": "shadow"
734
740
  },
741
+ "ToggleSwitchGroup": {
742
+ "space": "integer",
743
+ "direction": "direction",
744
+ "alignItems": "flexAlign",
745
+ "justifyContent": "flexJustifyContent",
746
+ "flexGrow": "integer",
747
+ "flexShrink": "integer"
748
+ },
735
749
  "Tooltip": {
736
750
  "backgroundColor": "color",
737
751
  "paddingTop": "size",
@@ -5003,6 +5017,20 @@
5003
5017
  "required": false,
5004
5018
  "description": ""
5005
5019
  },
5020
+ "LinkRouter": {
5021
+ "type": {
5022
+ "name": "elementType"
5023
+ },
5024
+ "required": false,
5025
+ "description": ""
5026
+ },
5027
+ "linkRouterProps": {
5028
+ "type": {
5029
+ "name": "object"
5030
+ },
5031
+ "required": false,
5032
+ "description": ""
5033
+ },
5006
5034
  "children": {
5007
5035
  "type": {
5008
5036
  "name": "custom",
@@ -7309,109 +7337,6 @@
7309
7337
  }
7310
7338
  }
7311
7339
  },
7312
- "ToggleSwitch": {
7313
- "docs": {
7314
- "description": "",
7315
- "props": {
7316
- "accessibilityRole": {
7317
- "defaultValue": {
7318
- "value": "'switch'",
7319
- "computed": false
7320
- },
7321
- "required": false
7322
- },
7323
- "tokens": {
7324
- "type": {
7325
- "name": "custom",
7326
- "raw": {
7327
- "borderColor": "color",
7328
- "borderWidth": "border",
7329
- "borderRadius": "radius",
7330
- "outerBorderColor": "color",
7331
- "outerBorderWidth": "border",
7332
- "outerBorderGap": "size",
7333
- "outerBackgroundColor": "color",
7334
- "backgroundColor": "color",
7335
- "opacity": "opacity",
7336
- "paddingLeft": "size",
7337
- "paddingRight": "size",
7338
- "paddingTop": "size",
7339
- "paddingBottom": "size",
7340
- "shadow": "shadow",
7341
- "alignSelf": "flexAlign",
7342
- "icon": "icon",
7343
- "width": "size",
7344
- "trackBorderWidth": "border",
7345
- "trackBorderColor": "color",
7346
- "trackBorderRadius": "radius",
7347
- "iconSize": "size",
7348
- "iconColor": "color",
7349
- "switchSize": "size",
7350
- "switchColor": "color",
7351
- "switchBorderColor": "color",
7352
- "switchBorderWidth": "border",
7353
- "switchBorderRadius": "radius",
7354
- "switchShadow": "shadow"
7355
- }
7356
- },
7357
- "required": false,
7358
- "description": ""
7359
- },
7360
- "variant": {
7361
- "type": {
7362
- "name": "objectOf",
7363
- "value": {
7364
- "name": "union",
7365
- "value": [
7366
- {
7367
- "name": "string"
7368
- },
7369
- {
7370
- "name": "number"
7371
- },
7372
- {
7373
- "name": "bool"
7374
- }
7375
- ]
7376
- }
7377
- },
7378
- "required": false,
7379
- "description": ""
7380
- },
7381
- "value": {
7382
- "type": {
7383
- "name": "bool"
7384
- },
7385
- "required": false,
7386
- "description": "If this is a \"controlled\" component and a parent handles its selected state,\ntells the switch if it is on (true) or off (false)."
7387
- },
7388
- "initialValue": {
7389
- "type": {
7390
- "name": "bool"
7391
- },
7392
- "required": false,
7393
- "description": "If this is an \"uncontrolled\" component that handles its own selected state,\noptionally tells the switch if it should default to on (true) or off (false)."
7394
- },
7395
- "onChange": {
7396
- "type": {
7397
- "name": "func"
7398
- },
7399
- "required": false,
7400
- "description": "Function called when the switch is toggled, with one boolean argument that is the\nnew position of the switch, on (true) or off (false). For \"controlled\" components,\nthis should always be passed and used to control the state of the switch."
7401
- },
7402
- "inactive": {
7403
- "type": {
7404
- "name": "bool"
7405
- },
7406
- "required": false,
7407
- "description": "If passed, the switch does not respond to user input and may recieve different\ntheme tokens if the theme supports inactive appearance."
7408
- }
7409
- },
7410
- "attributes": {
7411
- "acceptsRNA11yProps": false
7412
- }
7413
- }
7414
- },
7415
7340
  "Tooltip": {
7416
7341
  "docs": {
7417
7342
  "description": "Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label\nto help a user fill it in, or as a standalone component.\n\nBy default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach\na tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).\n\n### Positioning\nBy default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.\nYou may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.\n\n### Usage criteria\n- You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).\n- Tooltips may also be useful when vertical space is an issue.",
@@ -8666,6 +8591,100 @@
8666
8591
  "required": false,
8667
8592
  "description": ""
8668
8593
  },
8594
+ "tokens": {
8595
+ "type": {
8596
+ "name": "custom",
8597
+ "raw": "getTokensPropType('ChevronLink', 'Link')"
8598
+ },
8599
+ "required": false,
8600
+ "description": ""
8601
+ }
8602
+ },
8603
+ "attributes": {
8604
+ "acceptsRNA11yProps": false
8605
+ }
8606
+ }
8607
+ },
8608
+ "Link": {
8609
+ "docs": {
8610
+ "description": "",
8611
+ "props": {
8612
+ "accessibilityRole": {
8613
+ "defaultValue": {
8614
+ "value": "'link'",
8615
+ "computed": false
8616
+ },
8617
+ "required": false
8618
+ },
8619
+ "variant": {
8620
+ "defaultValue": {
8621
+ "value": "{}",
8622
+ "computed": false
8623
+ },
8624
+ "required": false
8625
+ }
8626
+ },
8627
+ "attributes": {
8628
+ "acceptsRNA11yProps": false
8629
+ }
8630
+ }
8631
+ },
8632
+ "LinkBase": {
8633
+ "docs": {
8634
+ "description": "Renders a pressable text link, with optional icon. This is rendered as a block element\nonly (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.\n\n## Current limitations\n\n- Not yet integrated with widely-used Telus navigation packages. This will probably\n require adding a `navigate` prop that aliases onPress so this can be passed to\n router's Link components' `Component` or `as` props but this needs testing\n as part of https://github.com/telus/universal-design-system/issues/24\n\n- Doesn't work inline e.g. in paragraphs. Support for inline links in native and\n web was implemented in https://github.com/telus/universal-design-system/pull/233\n but removed and will need to be restored at some point. When inline link support\n is restored, icons in inline links on Android will be slightly off-centre\n vertically (see )\n\n- Doesn't support :visited styles on web. Support for :visited styles was\n implemented in https://github.com/telus/universal-design-system/pull/234 but\n dropped in favour of investigating if a full-featured CSS-in-JS package could or\n should be used more widely (e.g. styled components)",
8635
+ "props": {
8636
+ "iconPosition": {
8637
+ "defaultValue": {
8638
+ "value": "icon ? 'left' : undefined",
8639
+ "computed": false
8640
+ },
8641
+ "type": {
8642
+ "name": "enum",
8643
+ "value": [
8644
+ {
8645
+ "value": "'left'",
8646
+ "computed": false
8647
+ },
8648
+ {
8649
+ "value": "'right'",
8650
+ "computed": false
8651
+ }
8652
+ ]
8653
+ },
8654
+ "required": false,
8655
+ "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
8656
+ },
8657
+ "tokens": {
8658
+ "defaultValue": {
8659
+ "value": "{}",
8660
+ "computed": false
8661
+ },
8662
+ "type": {
8663
+ "name": "custom",
8664
+ "raw": {
8665
+ "color": "color",
8666
+ "textLine": "textLine",
8667
+ "textLineStyle": "textLineStyle",
8668
+ "outerBorderColor": "color",
8669
+ "outerBorderWidth": "border",
8670
+ "outerBorderGap": "size",
8671
+ "outerBorderOutline": "borderStyle",
8672
+ "borderRadius": "radius",
8673
+ "blockFontName": "fontName",
8674
+ "blockFontWeight": "fontWeight",
8675
+ "blockFontSize": "fontSize",
8676
+ "blockLineHeight": "lineHeight",
8677
+ "icon": "icon",
8678
+ "iconSize": "size",
8679
+ "iconSpace": "integer",
8680
+ "iconTranslateX": "size",
8681
+ "iconTranslateY": "size",
8682
+ "alignSelf": "flexAlign"
8683
+ }
8684
+ },
8685
+ "required": false,
8686
+ "description": ""
8687
+ },
8669
8688
  "onPress": {
8670
8689
  "type": {
8671
8690
  "name": "func"
@@ -8740,14 +8759,6 @@
8740
8759
  "required": false,
8741
8760
  "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
8742
8761
  },
8743
- "tokens": {
8744
- "type": {
8745
- "name": "custom",
8746
- "raw": "getTokensPropType('ChevronLink', 'Link')"
8747
- },
8748
- "required": false,
8749
- "description": ""
8750
- },
8751
8762
  "variant": {
8752
8763
  "type": {
8753
8764
  "name": "objectOf",
@@ -8804,23 +8815,6 @@
8804
8815
  },
8805
8816
  "required": false,
8806
8817
  "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
8807
- },
8808
- "iconPosition": {
8809
- "type": {
8810
- "name": "enum",
8811
- "value": [
8812
- {
8813
- "value": "'left'",
8814
- "computed": false
8815
- },
8816
- {
8817
- "value": "'right'",
8818
- "computed": false
8819
- }
8820
- ]
8821
- },
8822
- "required": false,
8823
- "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
8824
8818
  }
8825
8819
  },
8826
8820
  "attributes": {
@@ -8828,570 +8822,27 @@
8828
8822
  }
8829
8823
  }
8830
8824
  },
8831
- "Link": {
8825
+ "TextButton": {
8832
8826
  "docs": {
8833
- "description": "",
8827
+ "description": "`TextButton` is a button that looks like a Link. It uses the same theming and variants as\nLink but has the accessibility role of a `Button`. It should be used for actions that\ntake place on the current page, or for navigation within an app.",
8834
8828
  "props": {
8835
- "variant": {
8829
+ "accessibilityRole": {
8836
8830
  "defaultValue": {
8837
- "value": "{}",
8831
+ "value": "'button'",
8838
8832
  "computed": false
8839
8833
  },
8840
- "type": {
8841
- "name": "objectOf",
8842
- "value": {
8843
- "name": "union",
8844
- "value": [
8845
- {
8846
- "name": "string"
8847
- },
8848
- {
8849
- "name": "number"
8850
- },
8851
- {
8852
- "name": "bool"
8853
- }
8854
- ]
8855
- }
8856
- },
8857
- "required": false,
8858
- "description": ""
8859
- },
8860
- "onPress": {
8861
- "type": {
8862
- "name": "func"
8863
- },
8864
- "required": false,
8865
- "description": ""
8866
- },
8867
- "onPressIn": {
8868
- "type": {
8869
- "name": "func"
8870
- },
8871
- "required": false,
8872
- "description": ""
8873
- },
8874
- "onPressOut": {
8875
- "type": {
8876
- "name": "func"
8877
- },
8878
- "required": false,
8879
- "description": ""
8880
- },
8881
- "disabled": {
8882
- "type": {
8883
- "name": "bool"
8884
- },
8885
- "required": false,
8886
- "description": ""
8887
- },
8888
- "href": {
8889
- "type": {
8890
- "name": "string"
8891
- },
8892
- "required": false,
8893
- "description": ""
8894
- },
8895
- "hrefAttrs": {
8896
- "type": {
8897
- "name": "shape",
8898
- "value": {
8899
- "download": {
8900
- "name": "string",
8901
- "required": false
8902
- },
8903
- "rel": {
8904
- "name": "string",
8905
- "required": false
8906
- },
8907
- "target": {
8908
- "name": "enum",
8909
- "value": [
8910
- {
8911
- "value": "'_self'",
8912
- "computed": false
8913
- },
8914
- {
8915
- "value": "'_blank'",
8916
- "computed": false
8917
- },
8918
- {
8919
- "value": "'_parent'",
8920
- "computed": false
8921
- },
8922
- {
8923
- "value": "'_top'",
8924
- "computed": false
8925
- }
8926
- ],
8927
- "required": false
8928
- }
8929
- }
8930
- },
8931
- "required": false,
8932
- "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
8933
- },
8934
- "tokens": {
8935
- "type": {
8936
- "name": "custom",
8937
- "raw": {
8938
- "color": "color",
8939
- "textLine": "textLine",
8940
- "textLineStyle": "textLineStyle",
8941
- "outerBorderColor": "color",
8942
- "outerBorderWidth": "border",
8943
- "outerBorderGap": "size",
8944
- "outerBorderOutline": "borderStyle",
8945
- "borderRadius": "radius",
8946
- "blockFontName": "fontName",
8947
- "blockFontWeight": "fontWeight",
8948
- "blockFontSize": "fontSize",
8949
- "blockLineHeight": "lineHeight",
8950
- "icon": "icon",
8951
- "iconSize": "size",
8952
- "iconSpace": "integer",
8953
- "iconTranslateX": "size",
8954
- "iconTranslateY": "size",
8955
- "alignSelf": "flexAlign"
8956
- }
8957
- },
8958
- "required": false,
8959
- "description": ""
8960
- },
8961
- "iconProps": {
8962
- "type": {
8963
- "name": "exact",
8964
- "value": {
8965
- "variant": {
8966
- "name": "custom",
8967
- "raw": "variantProp.propType",
8968
- "required": false
8969
- },
8970
- "tokens": {
8971
- "name": "custom",
8972
- "raw": "getTokensPropType('Icon')",
8973
- "required": false
8974
- },
8975
- "accessibilityLabel": {
8976
- "name": "string",
8977
- "description": "Descriptive label used in web SVG title tag for accessibility",
8978
- "required": false
8979
- },
8980
- "scalesWithText": {
8981
- "name": "bool",
8982
- "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
8983
- "required": false
8984
- }
8985
- }
8986
- },
8987
- "required": false,
8988
- "description": "Optional variant that may be passed down to the link's icon if there is one"
8989
- },
8990
- "icon": {
8991
- "type": {
8992
- "name": "func"
8993
- },
8994
- "required": false,
8995
- "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
8996
- },
8997
- "iconPosition": {
8998
- "type": {
8999
- "name": "enum",
9000
- "value": [
9001
- {
9002
- "value": "'left'",
9003
- "computed": false
9004
- },
9005
- {
9006
- "value": "'right'",
9007
- "computed": false
9008
- }
9009
- ]
9010
- },
9011
- "required": false,
9012
- "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
9013
- }
9014
- },
9015
- "attributes": {
9016
- "acceptsRNA11yProps": true
9017
- }
9018
- }
9019
- },
9020
- "LinkBase": {
9021
- "docs": {
9022
- "description": "Renders a pressable text link, with optional icon. This is rendered as a block element\nonly (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.\n\n## Current limitations\n\n- Not yet integrated with widely-used Telus navigation packages. This will probably\n require adding a `navigate` prop that aliases onPress so this can be passed to\n router's Link components' `Component` or `as` props but this needs testing\n as part of https://github.com/telus/universal-design-system/issues/24\n\n- Doesn't work inline e.g. in paragraphs. Support for inline links in native and\n web was implemented in https://github.com/telus/universal-design-system/pull/233\n but removed and will need to be restored at some point. When inline link support\n is restored, icons in inline links on Android will be slightly off-centre\n vertically (see )\n\n- Doesn't support :visited styles on web. Support for :visited styles was\n implemented in https://github.com/telus/universal-design-system/pull/234 but\n dropped in favour of investigating if a full-featured CSS-in-JS package could or\n should be used more widely (e.g. styled components)",
9023
- "props": {
9024
- "iconPosition": {
9025
- "defaultValue": {
9026
- "value": "icon ? 'left' : undefined",
9027
- "computed": false
9028
- },
9029
- "type": {
9030
- "name": "enum",
9031
- "value": [
9032
- {
9033
- "value": "'left'",
9034
- "computed": false
9035
- },
9036
- {
9037
- "value": "'right'",
9038
- "computed": false
9039
- }
9040
- ]
9041
- },
9042
- "required": false,
9043
- "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
9044
- },
9045
- "tokens": {
9046
- "defaultValue": {
9047
- "value": "{}",
9048
- "computed": false
9049
- },
9050
- "type": {
9051
- "name": "custom",
9052
- "raw": {
9053
- "color": "color",
9054
- "textLine": "textLine",
9055
- "textLineStyle": "textLineStyle",
9056
- "outerBorderColor": "color",
9057
- "outerBorderWidth": "border",
9058
- "outerBorderGap": "size",
9059
- "outerBorderOutline": "borderStyle",
9060
- "borderRadius": "radius",
9061
- "blockFontName": "fontName",
9062
- "blockFontWeight": "fontWeight",
9063
- "blockFontSize": "fontSize",
9064
- "blockLineHeight": "lineHeight",
9065
- "icon": "icon",
9066
- "iconSize": "size",
9067
- "iconSpace": "integer",
9068
- "iconTranslateX": "size",
9069
- "iconTranslateY": "size",
9070
- "alignSelf": "flexAlign"
9071
- }
9072
- },
9073
- "required": false,
9074
- "description": ""
9075
- },
9076
- "onPress": {
9077
- "type": {
9078
- "name": "func"
9079
- },
9080
- "required": false,
9081
- "description": ""
9082
- },
9083
- "onPressIn": {
9084
- "type": {
9085
- "name": "func"
9086
- },
9087
- "required": false,
9088
- "description": ""
9089
- },
9090
- "onPressOut": {
9091
- "type": {
9092
- "name": "func"
9093
- },
9094
- "required": false,
9095
- "description": ""
9096
- },
9097
- "disabled": {
9098
- "type": {
9099
- "name": "bool"
9100
- },
9101
- "required": false,
9102
- "description": ""
9103
- },
9104
- "href": {
9105
- "type": {
9106
- "name": "string"
9107
- },
9108
- "required": false,
9109
- "description": ""
9110
- },
9111
- "hrefAttrs": {
9112
- "type": {
9113
- "name": "shape",
9114
- "value": {
9115
- "download": {
9116
- "name": "string",
9117
- "required": false
9118
- },
9119
- "rel": {
9120
- "name": "string",
9121
- "required": false
9122
- },
9123
- "target": {
9124
- "name": "enum",
9125
- "value": [
9126
- {
9127
- "value": "'_self'",
9128
- "computed": false
9129
- },
9130
- {
9131
- "value": "'_blank'",
9132
- "computed": false
9133
- },
9134
- {
9135
- "value": "'_parent'",
9136
- "computed": false
9137
- },
9138
- {
9139
- "value": "'_top'",
9140
- "computed": false
9141
- }
9142
- ],
9143
- "required": false
9144
- }
9145
- }
9146
- },
9147
- "required": false,
9148
- "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
9149
- },
9150
- "variant": {
9151
- "type": {
9152
- "name": "objectOf",
9153
- "value": {
9154
- "name": "union",
9155
- "value": [
9156
- {
9157
- "name": "string"
9158
- },
9159
- {
9160
- "name": "number"
9161
- },
9162
- {
9163
- "name": "bool"
9164
- }
9165
- ]
9166
- }
9167
- },
9168
- "required": false,
9169
- "description": ""
9170
- },
9171
- "iconProps": {
9172
- "type": {
9173
- "name": "exact",
9174
- "value": {
9175
- "variant": {
9176
- "name": "custom",
9177
- "raw": "variantProp.propType",
9178
- "required": false
9179
- },
9180
- "tokens": {
9181
- "name": "custom",
9182
- "raw": "getTokensPropType('Icon')",
9183
- "required": false
9184
- },
9185
- "accessibilityLabel": {
9186
- "name": "string",
9187
- "description": "Descriptive label used in web SVG title tag for accessibility",
9188
- "required": false
9189
- },
9190
- "scalesWithText": {
9191
- "name": "bool",
9192
- "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
9193
- "required": false
9194
- }
9195
- }
9196
- },
9197
- "required": false,
9198
- "description": "Optional variant that may be passed down to the link's icon if there is one"
9199
- },
9200
- "icon": {
9201
- "type": {
9202
- "name": "func"
9203
- },
9204
- "required": false,
9205
- "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
9206
- }
9207
- },
9208
- "attributes": {
9209
- "acceptsRNA11yProps": true
9210
- }
9211
- }
9212
- },
9213
- "TextButton": {
9214
- "docs": {
9215
- "description": "`TextButton` is a button that looks like a Link. It uses the same theming and variants as\nLink but has the accessibility role of a `Button`. It should be used for actions that\ntake place on the current page, or for navigation within an app.",
9216
- "props": {
9217
- "onPress": {
8834
+ "required": false
8835
+ },
8836
+ "onPress": {
9218
8837
  "type": {
9219
8838
  "name": "func"
9220
8839
  },
9221
8840
  "required": true,
9222
8841
  "description": ""
9223
- },
9224
- "onPressIn": {
9225
- "type": {
9226
- "name": "func"
9227
- },
9228
- "required": false,
9229
- "description": ""
9230
- },
9231
- "onPressOut": {
9232
- "type": {
9233
- "name": "func"
9234
- },
9235
- "required": false,
9236
- "description": ""
9237
- },
9238
- "disabled": {
9239
- "type": {
9240
- "name": "bool"
9241
- },
9242
- "required": false,
9243
- "description": ""
9244
- },
9245
- "href": {
9246
- "type": {
9247
- "name": "string"
9248
- },
9249
- "required": false,
9250
- "description": ""
9251
- },
9252
- "hrefAttrs": {
9253
- "type": {
9254
- "name": "shape",
9255
- "value": {
9256
- "download": {
9257
- "name": "string",
9258
- "required": false
9259
- },
9260
- "rel": {
9261
- "name": "string",
9262
- "required": false
9263
- },
9264
- "target": {
9265
- "name": "enum",
9266
- "value": [
9267
- {
9268
- "value": "'_self'",
9269
- "computed": false
9270
- },
9271
- {
9272
- "value": "'_blank'",
9273
- "computed": false
9274
- },
9275
- {
9276
- "value": "'_parent'",
9277
- "computed": false
9278
- },
9279
- {
9280
- "value": "'_top'",
9281
- "computed": false
9282
- }
9283
- ],
9284
- "required": false
9285
- }
9286
- }
9287
- },
9288
- "required": false,
9289
- "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
9290
- },
9291
- "tokens": {
9292
- "type": {
9293
- "name": "custom",
9294
- "raw": {
9295
- "color": "color",
9296
- "textLine": "textLine",
9297
- "textLineStyle": "textLineStyle",
9298
- "outerBorderColor": "color",
9299
- "outerBorderWidth": "border",
9300
- "outerBorderGap": "size",
9301
- "outerBorderOutline": "borderStyle",
9302
- "borderRadius": "radius",
9303
- "blockFontName": "fontName",
9304
- "blockFontWeight": "fontWeight",
9305
- "blockFontSize": "fontSize",
9306
- "blockLineHeight": "lineHeight",
9307
- "icon": "icon",
9308
- "iconSize": "size",
9309
- "iconSpace": "integer",
9310
- "iconTranslateX": "size",
9311
- "iconTranslateY": "size",
9312
- "alignSelf": "flexAlign"
9313
- }
9314
- },
9315
- "required": false,
9316
- "description": ""
9317
- },
9318
- "variant": {
9319
- "type": {
9320
- "name": "objectOf",
9321
- "value": {
9322
- "name": "union",
9323
- "value": [
9324
- {
9325
- "name": "string"
9326
- },
9327
- {
9328
- "name": "number"
9329
- },
9330
- {
9331
- "name": "bool"
9332
- }
9333
- ]
9334
- }
9335
- },
9336
- "required": false,
9337
- "description": ""
9338
- },
9339
- "iconProps": {
9340
- "type": {
9341
- "name": "exact",
9342
- "value": {
9343
- "variant": {
9344
- "name": "custom",
9345
- "raw": "variantProp.propType",
9346
- "required": false
9347
- },
9348
- "tokens": {
9349
- "name": "custom",
9350
- "raw": "getTokensPropType('Icon')",
9351
- "required": false
9352
- },
9353
- "accessibilityLabel": {
9354
- "name": "string",
9355
- "description": "Descriptive label used in web SVG title tag for accessibility",
9356
- "required": false
9357
- },
9358
- "scalesWithText": {
9359
- "name": "bool",
9360
- "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
9361
- "required": false
9362
- }
9363
- }
9364
- },
9365
- "required": false,
9366
- "description": "Optional variant that may be passed down to the link's icon if there is one"
9367
- },
9368
- "icon": {
9369
- "type": {
9370
- "name": "func"
9371
- },
9372
- "required": false,
9373
- "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
9374
- },
9375
- "iconPosition": {
9376
- "type": {
9377
- "name": "enum",
9378
- "value": [
9379
- {
9380
- "value": "'left'",
9381
- "computed": false
9382
- },
9383
- {
9384
- "value": "'right'",
9385
- "computed": false
9386
- }
9387
- ]
9388
- },
9389
- "required": false,
9390
- "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
9391
8842
  }
9392
8843
  },
9393
8844
  "attributes": {
9394
- "acceptsRNA11yProps": true
8845
+ "acceptsRNA11yProps": false
9395
8846
  }
9396
8847
  }
9397
8848
  },
@@ -9976,32 +9427,192 @@
9976
9427
  "computed": false
9977
9428
  },
9978
9429
  {
9979
- "value": "'main'",
9430
+ "value": "'main'",
9431
+ "computed": false
9432
+ },
9433
+ {
9434
+ "value": "'nav'",
9435
+ "computed": false
9436
+ },
9437
+ {
9438
+ "value": "'section'",
9439
+ "computed": false
9440
+ },
9441
+ {
9442
+ "value": "'label'",
9443
+ "computed": false
9444
+ }
9445
+ ]
9446
+ },
9447
+ "required": false,
9448
+ "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
9449
+ },
9450
+ "children": {
9451
+ "type": {
9452
+ "name": "node"
9453
+ },
9454
+ "required": false,
9455
+ "description": "A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children\nwrapped in a component. If necessary, children may be wrapped in one React Fragment."
9456
+ }
9457
+ },
9458
+ "attributes": {
9459
+ "acceptsRNA11yProps": false
9460
+ }
9461
+ }
9462
+ },
9463
+ "TextInput": {
9464
+ "docs": {
9465
+ "description": "A basic text input component. Use in forms or individually to receive user's input.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\n\n## Controlled component\nIf it is required that the state of the `TextInput` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextInput`.\nIf the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextInput` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\nNOTE: In order to support more advanced usages all additional props will be passed down to the React Native's\n`TextInput` component. See <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native documentation</a> for\nsupported props and <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native Web documentation</a> for\ntheir implementation on the web.",
9466
+ "props": {
9467
+ "variant": {
9468
+ "defaultValue": {
9469
+ "value": "{}",
9470
+ "computed": false
9471
+ },
9472
+ "type": {
9473
+ "name": "objectOf",
9474
+ "value": {
9475
+ "name": "union",
9476
+ "value": [
9477
+ {
9478
+ "name": "string"
9479
+ },
9480
+ {
9481
+ "name": "number"
9482
+ },
9483
+ {
9484
+ "name": "bool"
9485
+ }
9486
+ ]
9487
+ }
9488
+ },
9489
+ "required": false,
9490
+ "description": ""
9491
+ },
9492
+ "label": {
9493
+ "type": {
9494
+ "name": "string"
9495
+ },
9496
+ "required": false,
9497
+ "description": "The input label."
9498
+ },
9499
+ "hint": {
9500
+ "type": {
9501
+ "name": "string"
9502
+ },
9503
+ "required": false,
9504
+ "description": "A short description of the expected input."
9505
+ },
9506
+ "hintPosition": {
9507
+ "type": {
9508
+ "name": "enum",
9509
+ "value": [
9510
+ {
9511
+ "value": "'inline'",
9980
9512
  "computed": false
9981
9513
  },
9982
9514
  {
9983
- "value": "'nav'",
9515
+ "value": "'below'",
9984
9516
  "computed": false
9985
- },
9517
+ }
9518
+ ]
9519
+ },
9520
+ "required": false,
9521
+ "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
9522
+ },
9523
+ "feedback": {
9524
+ "type": {
9525
+ "name": "string"
9526
+ },
9527
+ "required": false,
9528
+ "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
9529
+ },
9530
+ "tooltip": {
9531
+ "type": {
9532
+ "name": "string"
9533
+ },
9534
+ "required": false,
9535
+ "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
9536
+ },
9537
+ "validation": {
9538
+ "type": {
9539
+ "name": "enum",
9540
+ "value": [
9986
9541
  {
9987
- "value": "'section'",
9542
+ "value": "'error'",
9988
9543
  "computed": false
9989
9544
  },
9990
9545
  {
9991
- "value": "'label'",
9546
+ "value": "'success'",
9992
9547
  "computed": false
9993
9548
  }
9994
9549
  ]
9995
9550
  },
9996
9551
  "required": false,
9997
- "description": "Optional semantic HTML tag, to apply to the container on web. Does not change styling.\n\nIn native apps, if a header tag is provided (\"h1\", \"h2\" etc) and accessibilityRole prop\nis not defined, the accessibilityRole will default to \"heading\"."
9552
+ "description": "Use to visually mark an input as valid or invalid."
9998
9553
  },
9999
- "children": {
9554
+ "value": {
10000
9555
  "type": {
10001
- "name": "node"
9556
+ "name": "string"
10002
9557
  },
10003
9558
  "required": false,
10004
- "description": "A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children\nwrapped in a component. If necessary, children may be wrapped in one React Fragment."
9559
+ "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
9560
+ },
9561
+ "initialValue": {
9562
+ "type": {
9563
+ "name": "string"
9564
+ },
9565
+ "required": false,
9566
+ "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
9567
+ },
9568
+ "inactive": {
9569
+ "type": {
9570
+ "name": "bool"
9571
+ },
9572
+ "required": false,
9573
+ "description": "Disables all user interactions with the input."
9574
+ },
9575
+ "readOnly": {
9576
+ "type": {
9577
+ "name": "bool"
9578
+ },
9579
+ "required": false,
9580
+ "description": "Makes it impossible to change the input's value."
9581
+ },
9582
+ "onChange": {
9583
+ "type": {
9584
+ "name": "func"
9585
+ },
9586
+ "required": false,
9587
+ "description": "Use to react upon input's value changes. Required when the `value` prop is set.\nWill receive the input's value as an argument."
9588
+ },
9589
+ "tokens": {
9590
+ "type": {
9591
+ "name": "custom",
9592
+ "raw": {
9593
+ "backgroundColor": "color",
9594
+ "color": "color",
9595
+ "borderWidth": "border",
9596
+ "borderColor": "color",
9597
+ "borderRadius": "radius",
9598
+ "paddingTop": "size",
9599
+ "paddingBottom": "size",
9600
+ "paddingLeft": "size",
9601
+ "paddingRight": "size",
9602
+ "outerBackgroundColor": "color",
9603
+ "outerBorderWidth": "border",
9604
+ "outerBorderColor": "color",
9605
+ "fontName": "fontName",
9606
+ "fontWeight": "fontWeight",
9607
+ "fontSize": "fontSize",
9608
+ "lineHeight": "lineHeight",
9609
+ "icon": "icon",
9610
+ "iconSize": "size",
9611
+ "iconColor": "color"
9612
+ }
9613
+ },
9614
+ "required": false,
9615
+ "description": ""
10005
9616
  }
10006
9617
  },
10007
9618
  "attributes": {
@@ -10009,9 +9620,9 @@
10009
9620
  }
10010
9621
  }
10011
9622
  },
10012
- "TextInput": {
9623
+ "TextArea": {
10013
9624
  "docs": {
10014
- "description": "A basic text input component. Use in forms or individually to receive user's input.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\n\n## Controlled component\nIf it is required that the state of the `TextInput` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextInput`.\nIf the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextInput` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\nNOTE: In order to support more advanced usages all additional props will be passed down to the React Native's\n`TextInput` component. See <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native documentation</a> for\nsupported props and <a href=\"https://reactnative.dev/docs/textinput\" target=\"_blank\">React Native Web documentation</a> for\ntheir implementation on the web.",
9625
+ "description": "Use to collect long-form information such as product feedback or support queries.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\nThe `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.\n\n## Controlled component\nIf it is required that the state of the `TextArea` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextArea`.\nIf the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextArea` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their input.\nYou can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Supplying a hint\nUse the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,\nor an indicator that the field is optional.\nIt is a more usable and accessible option than the HTML `placeholder` attribute.",
10015
9626
  "props": {
10016
9627
  "variant": {
10017
9628
  "defaultValue": {
@@ -10112,72 +9723,269 @@
10112
9723
  "name": "string"
10113
9724
  },
10114
9725
  "required": false,
10115
- "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
9726
+ "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
9727
+ },
9728
+ "inactive": {
9729
+ "type": {
9730
+ "name": "bool"
9731
+ },
9732
+ "required": false,
9733
+ "description": "Disables all user interactions with the input."
9734
+ },
9735
+ "readOnly": {
9736
+ "type": {
9737
+ "name": "bool"
9738
+ },
9739
+ "required": false,
9740
+ "description": "Makes it impossible to change the input's value."
9741
+ },
9742
+ "onChange": {
9743
+ "type": {
9744
+ "name": "func"
9745
+ },
9746
+ "required": false,
9747
+ "description": "Use to react upon input's value changes. Required when the `value` prop is set.\nWill receive the input's value as an argument."
9748
+ },
9749
+ "tokens": {
9750
+ "type": {
9751
+ "name": "custom",
9752
+ "raw": "getTokensPropType('TextArea', 'TextInput')"
9753
+ },
9754
+ "required": false,
9755
+ "description": ""
9756
+ }
9757
+ },
9758
+ "attributes": {
9759
+ "acceptsRNA11yProps": false
9760
+ }
9761
+ }
9762
+ },
9763
+ "ToggleSwitch": {
9764
+ "docs": {
9765
+ "description": "",
9766
+ "props": {
9767
+ "accessibilityRole": {
9768
+ "defaultValue": {
9769
+ "value": "'switch'",
9770
+ "computed": false
9771
+ },
9772
+ "required": false
9773
+ },
9774
+ "accessibilityLabel": {
9775
+ "defaultValue": {
9776
+ "value": "label",
9777
+ "computed": true
9778
+ },
9779
+ "required": false
9780
+ },
9781
+ "tokens": {
9782
+ "type": {
9783
+ "name": "custom",
9784
+ "raw": {
9785
+ "borderColor": "color",
9786
+ "borderWidth": "border",
9787
+ "borderRadius": "radius",
9788
+ "outerBorderColor": "color",
9789
+ "outerBorderWidth": "border",
9790
+ "outerBorderGap": "size",
9791
+ "outerBackgroundColor": "color",
9792
+ "backgroundColor": "color",
9793
+ "opacity": "opacity",
9794
+ "paddingLeft": "size",
9795
+ "paddingRight": "size",
9796
+ "paddingTop": "size",
9797
+ "paddingBottom": "size",
9798
+ "shadow": "shadow",
9799
+ "alignSelf": "flexAlign",
9800
+ "icon": "icon",
9801
+ "width": "size",
9802
+ "trackBorderWidth": "border",
9803
+ "trackBorderColor": "color",
9804
+ "trackBorderRadius": "radius",
9805
+ "iconSize": "size",
9806
+ "iconColor": "color",
9807
+ "labelColor": "color",
9808
+ "labelFontName": "fontName",
9809
+ "labelFontSize": "fontSize",
9810
+ "labelFontWeight": "fontWeight",
9811
+ "labelLineHeight": "lineHeight",
9812
+ "labelMarginLeft": "size",
9813
+ "switchSize": "size",
9814
+ "switchColor": "color",
9815
+ "switchBorderColor": "color",
9816
+ "switchBorderWidth": "border",
9817
+ "switchBorderRadius": "radius",
9818
+ "switchShadow": "shadow"
9819
+ }
9820
+ },
9821
+ "required": false,
9822
+ "description": ""
9823
+ },
9824
+ "variant": {
9825
+ "type": {
9826
+ "name": "objectOf",
9827
+ "value": {
9828
+ "name": "union",
9829
+ "value": [
9830
+ {
9831
+ "name": "string"
9832
+ },
9833
+ {
9834
+ "name": "number"
9835
+ },
9836
+ {
9837
+ "name": "bool"
9838
+ }
9839
+ ]
9840
+ }
9841
+ },
9842
+ "required": false,
9843
+ "description": ""
9844
+ },
9845
+ "value": {
9846
+ "type": {
9847
+ "name": "bool"
9848
+ },
9849
+ "required": false,
9850
+ "description": "If this is a \"controlled\" component and a parent handles its selected state,\ntells the switch if it is on (true) or off (false)."
9851
+ },
9852
+ "initialValue": {
9853
+ "type": {
9854
+ "name": "bool"
9855
+ },
9856
+ "required": false,
9857
+ "description": "If this is an \"uncontrolled\" component that handles its own selected state,\noptionally tells the switch if it should default to on (true) or off (false)."
9858
+ },
9859
+ "onChange": {
9860
+ "type": {
9861
+ "name": "func"
9862
+ },
9863
+ "required": false,
9864
+ "description": "Function called when the switch is toggled, with one boolean argument that is the\nnew position of the switch, on (true) or off (false). For \"controlled\" components,\nthis should always be passed and used to control the state of the switch."
9865
+ },
9866
+ "id": {
9867
+ "type": {
9868
+ "name": "string"
9869
+ },
9870
+ "required": false,
9871
+ "description": "Input ID."
9872
+ },
9873
+ "label": {
9874
+ "type": {
9875
+ "name": "string"
9876
+ },
9877
+ "required": false,
9878
+ "description": "An optional label."
10116
9879
  },
10117
9880
  "inactive": {
10118
9881
  "type": {
10119
9882
  "name": "bool"
10120
9883
  },
10121
9884
  "required": false,
10122
- "description": "Disables all user interactions with the input."
9885
+ "description": "If passed, the switch does not respond to user input and may recieve different\ntheme tokens if the theme supports inactive appearance."
10123
9886
  },
10124
- "readOnly": {
9887
+ "tooltip": {
10125
9888
  "type": {
10126
- "name": "bool"
9889
+ "name": "string"
10127
9890
  },
10128
9891
  "required": false,
10129
- "description": "Makes it impossible to change the input's value."
9892
+ "description": "Content of an optional Tooltip. If set, a tooltip button will be shown next to the label."
9893
+ }
9894
+ },
9895
+ "attributes": {
9896
+ "acceptsRNA11yProps": false
9897
+ }
9898
+ }
9899
+ },
9900
+ "ToggleSwitchGroup": {
9901
+ "docs": {
9902
+ "description": "",
9903
+ "props": {
9904
+ "items": {
9905
+ "defaultValue": {
9906
+ "value": "[]",
9907
+ "computed": false
9908
+ },
9909
+ "type": {
9910
+ "name": "arrayOf",
9911
+ "value": {
9912
+ "name": "shape",
9913
+ "value": {
9914
+ "label": {
9915
+ "name": "string",
9916
+ "description": "The text displayed to the user on the label.",
9917
+ "required": true
9918
+ },
9919
+ "accessibilityLabel": {
9920
+ "name": "string",
9921
+ "description": "An optional accessibility label may be passed to each ToggleSwitch\nand will be applied as normal for a React Native accessibilityLabel prop.",
9922
+ "required": false
9923
+ },
9924
+ "id": {
9925
+ "name": "string",
9926
+ "description": "An optional unique string may be provided to identify this option,\nwhich will be used in code and passed to any onChange function.\nIf not provided, the label is used.",
9927
+ "required": false
9928
+ },
9929
+ "ref": {
9930
+ "name": "custom",
9931
+ "raw": "ABBPropTypes.ref()",
9932
+ "description": "An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup",
9933
+ "required": false
9934
+ }
9935
+ }
9936
+ }
9937
+ },
9938
+ "required": false,
9939
+ "description": "The options a user may select"
10130
9940
  },
10131
- "onChange": {
9941
+ "maxValues": {
9942
+ "defaultValue": {
9943
+ "value": "1",
9944
+ "computed": false
9945
+ },
10132
9946
  "type": {
10133
- "name": "func"
9947
+ "name": "number"
10134
9948
  },
10135
9949
  "required": false,
10136
- "description": "Use to react upon input's value changes. Required when the `value` prop is set.\nWill receive the input's value as an argument."
9950
+ "description": "The maximum number of items a user may select at once. Defaults to 1 and behaves\nlike radio buttons. To have no limit and allow any number of selections, pass `null`."
9951
+ },
9952
+ "readOnly": {
9953
+ "defaultValue": {
9954
+ "value": "false",
9955
+ "computed": false
9956
+ },
9957
+ "required": false
9958
+ },
9959
+ "inactive": {
9960
+ "defaultValue": {
9961
+ "value": "false",
9962
+ "computed": false
9963
+ },
9964
+ "required": false
9965
+ },
9966
+ "accessibilityRole": {
9967
+ "defaultValue": {
9968
+ "value": "maxValues === 1\n? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups\n: Platform.select({ web: 'group', default: 'none' })",
9969
+ "computed": false
9970
+ },
9971
+ "required": false
10137
9972
  },
10138
9973
  "tokens": {
10139
9974
  "type": {
10140
9975
  "name": "custom",
10141
9976
  "raw": {
10142
- "backgroundColor": "color",
10143
- "color": "color",
10144
- "borderWidth": "border",
10145
- "borderColor": "color",
10146
- "borderRadius": "radius",
10147
- "paddingTop": "size",
10148
- "paddingBottom": "size",
10149
- "paddingLeft": "size",
10150
- "paddingRight": "size",
10151
- "outerBackgroundColor": "color",
10152
- "outerBorderWidth": "border",
10153
- "outerBorderColor": "color",
10154
- "fontName": "fontName",
10155
- "fontWeight": "fontWeight",
10156
- "fontSize": "fontSize",
10157
- "lineHeight": "lineHeight",
10158
- "icon": "icon",
10159
- "iconSize": "size",
10160
- "iconColor": "color"
9977
+ "space": "integer",
9978
+ "direction": "direction",
9979
+ "alignItems": "flexAlign",
9980
+ "justifyContent": "flexJustifyContent",
9981
+ "flexGrow": "integer",
9982
+ "flexShrink": "integer"
10161
9983
  }
10162
9984
  },
10163
9985
  "required": false,
10164
9986
  "description": ""
10165
- }
10166
- },
10167
- "attributes": {
10168
- "acceptsRNA11yProps": false
10169
- }
10170
- }
10171
- },
10172
- "TextArea": {
10173
- "docs": {
10174
- "description": "Use to collect long-form information such as product feedback or support queries.\nDue to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.\nThe `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.\n\n## Controlled component\nIf it is required that the state of the `TextArea` be controlled by the application or other external methods,\n`value` and `onChange` props must be passed to the `TextArea`.\nIf the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.\n\n## Uncontrolled component\nIf it is not necessary to control the `TextArea` state, you can create one without a value prop.\nIn this case its value can be accessed within the `onChange` callback.\n\n## Getting feedback for entered values\nUse the `feedback` prop to give the user feedback regarding their input.\nYou can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.\nKeep feedback text as brief as possible, should be limited to text and links.\n\n## Supplying a hint\nUse the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,\nor an indicator that the field is optional.\nIt is a more usable and accessible option than the HTML `placeholder` attribute.",
10175
- "props": {
9987
+ },
10176
9988
  "variant": {
10177
- "defaultValue": {
10178
- "value": "{}",
10179
- "computed": false
10180
- },
10181
9989
  "type": {
10182
9990
  "name": "objectOf",
10183
9991
  "value": {
@@ -10198,110 +10006,120 @@
10198
10006
  "required": false,
10199
10007
  "description": ""
10200
10008
  },
10201
- "label": {
10009
+ "onChange": {
10202
10010
  "type": {
10203
- "name": "string"
10011
+ "name": "func"
10204
10012
  },
10205
10013
  "required": false,
10206
- "description": "The input label."
10014
+ "description": "If provided, this function is called when the current selection is changed\nand is passed an array of the `id`s of all currently selected `items`."
10207
10015
  },
10208
- "hint": {
10016
+ "values": {
10209
10017
  "type": {
10210
- "name": "string"
10018
+ "name": "arrayOf",
10019
+ "value": {
10020
+ "name": "string"
10021
+ }
10211
10022
  },
10212
10023
  "required": false,
10213
- "description": "A short description of the expected input."
10024
+ "description": "If the selected item(s) in the toggle switch group are to be controlled externally by\na parent component, pass an array of strings as well as an `onChange` handler.\nPassing an array for \"values\" makes the ToggleSwitchGroup a \"controlled\" component that\nexpects its state to be handled via `onChange` and so doesn't handle it itself."
10214
10025
  },
10215
- "hintPosition": {
10026
+ "initialValues": {
10216
10027
  "type": {
10217
- "name": "enum",
10218
- "value": [
10219
- {
10220
- "value": "'inline'",
10221
- "computed": false
10222
- },
10223
- {
10224
- "value": "'below'",
10225
- "computed": false
10226
- }
10227
- ]
10028
+ "name": "arrayOf",
10029
+ "value": {
10030
+ "name": "string"
10031
+ }
10228
10032
  },
10229
10033
  "required": false,
10230
- "description": "Position of the hint relative to label. Use `below` to display a larger hint below the label."
10034
+ "description": "If `values` is not passed, making the ToggleSwitchGroup an \"uncontrolled\" component\nmanaging its own selected state, a default set of selections may be provided.\nChanging the `initialValues` does not change the user's selections."
10231
10035
  },
10232
- "feedback": {
10036
+ "hint": {
10233
10037
  "type": {
10234
10038
  "name": "string"
10235
10039
  },
10236
10040
  "required": false,
10237
- "description": "A detailed description of validation error/success or additional instructions.\nVisual variant is determined based on the `validation` prop."
10041
+ "description": "Optional additional text giving more detail to help a user make a choice."
10238
10042
  },
10239
10043
  "tooltip": {
10240
10044
  "type": {
10241
10045
  "name": "string"
10242
10046
  },
10243
10047
  "required": false,
10244
- "description": "Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label."
10245
- },
10246
- "validation": {
10247
- "type": {
10248
- "name": "enum",
10249
- "value": [
10250
- {
10251
- "value": "'error'",
10252
- "computed": false
10253
- },
10254
- {
10255
- "value": "'success'",
10256
- "computed": false
10257
- }
10258
- ]
10259
- },
10260
- "required": false,
10261
- "description": "Use to visually mark an input as valid or invalid."
10048
+ "description": "Optional tooltip text content to include alongside the legend and hint."
10262
10049
  },
10263
- "value": {
10050
+ "feedback": {
10264
10051
  "type": {
10265
10052
  "name": "string"
10266
10053
  },
10267
10054
  "required": false,
10268
- "description": "If the input's state is to be controlled by a parent component, use this prop\ntogether with the `onChange` to pass down and update the lifted state."
10055
+ "description": "If provided, a Feedback element is rendered containing this text."
10269
10056
  },
10270
- "initialValue": {
10057
+ "legend": {
10271
10058
  "type": {
10272
10059
  "name": "string"
10273
10060
  },
10274
10061
  "required": false,
10275
- "description": "Use this to set the initial value of an uncontrolled input.\nUpdating `initialValue` will **not** update the actual value."
10276
- },
10277
- "inactive": {
10278
- "type": {
10279
- "name": "bool"
10280
- },
10281
- "required": false,
10282
- "description": "Disables all user interactions with the input."
10283
- },
10284
- "readOnly": {
10285
- "type": {
10286
- "name": "bool"
10287
- },
10288
- "required": false,
10289
- "description": "Makes it impossible to change the input's value."
10062
+ "description": "Main text used to describe this group, used in Fieldset's Legend element."
10290
10063
  },
10291
- "onChange": {
10064
+ "toggleSwitchTokens": {
10292
10065
  "type": {
10293
- "name": "func"
10066
+ "name": "custom",
10067
+ "raw": {
10068
+ "borderColor": "color",
10069
+ "borderWidth": "border",
10070
+ "borderRadius": "radius",
10071
+ "outerBorderColor": "color",
10072
+ "outerBorderWidth": "border",
10073
+ "outerBorderGap": "size",
10074
+ "outerBackgroundColor": "color",
10075
+ "backgroundColor": "color",
10076
+ "opacity": "opacity",
10077
+ "paddingLeft": "size",
10078
+ "paddingRight": "size",
10079
+ "paddingTop": "size",
10080
+ "paddingBottom": "size",
10081
+ "shadow": "shadow",
10082
+ "alignSelf": "flexAlign",
10083
+ "icon": "icon",
10084
+ "width": "size",
10085
+ "trackBorderWidth": "border",
10086
+ "trackBorderColor": "color",
10087
+ "trackBorderRadius": "radius",
10088
+ "iconSize": "size",
10089
+ "iconColor": "color",
10090
+ "labelColor": "color",
10091
+ "labelFontName": "fontName",
10092
+ "labelFontSize": "fontSize",
10093
+ "labelFontWeight": "fontWeight",
10094
+ "labelLineHeight": "lineHeight",
10095
+ "labelMarginLeft": "size",
10096
+ "switchSize": "size",
10097
+ "switchColor": "color",
10098
+ "switchBorderColor": "color",
10099
+ "switchBorderWidth": "border",
10100
+ "switchBorderRadius": "radius",
10101
+ "switchShadow": "shadow"
10102
+ }
10294
10103
  },
10295
10104
  "required": false,
10296
- "description": "Use to react upon input's value changes. Required when the `value` prop is set.\nWill receive the input's value as an argument."
10105
+ "description": "Toggle switch token overrides."
10297
10106
  },
10298
- "tokens": {
10107
+ "validation": {
10299
10108
  "type": {
10300
- "name": "custom",
10301
- "raw": "getTokensPropType('TextArea', 'TextInput')"
10109
+ "name": "enum",
10110
+ "value": [
10111
+ {
10112
+ "value": "'error'",
10113
+ "computed": false
10114
+ },
10115
+ {
10116
+ "value": "'success'",
10117
+ "computed": false
10118
+ }
10119
+ ]
10302
10120
  },
10303
10121
  "required": false,
10304
- "description": ""
10122
+ "description": "Current validation status of the group, passed to the feedback element if there is one."
10305
10123
  }
10306
10124
  },
10307
10125
  "attributes": {