@sudobility/components-rn 1.0.41 → 1.0.42
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/dist/index.cjs.js +217 -194
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +220 -197
- package/dist/index.esm.js.map +1 -1
- package/dist/ui/Alert/Alert.d.ts.map +1 -1
- package/dist/ui/Badge/Badge.d.ts.map +1 -1
- package/dist/ui/Banner/Banner.d.ts.map +1 -1
- package/dist/ui/Divider/Divider.d.ts.map +1 -1
- package/dist/ui/Heading/Heading.d.ts.map +1 -1
- package/dist/ui/InfoBox/InfoBox.d.ts.map +1 -1
- package/dist/ui/Input/Input.d.ts.map +1 -1
- package/dist/ui/Label/Label.d.ts.map +1 -1
- package/dist/ui/ProgressCircle/ProgressCircle.d.ts.map +1 -1
- package/dist/ui/QuickActions/QuickActions.d.ts.map +1 -1
- package/dist/ui/Spinner/Spinner.d.ts.map +1 -1
- package/dist/ui/Text/Text.d.ts.map +1 -1
- package/dist/ui/Toast/Toast.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/__tests__/alert.test.tsx +20 -10
- package/src/ui/Alert/Alert.tsx +13 -5
- package/src/ui/Badge/Badge.tsx +61 -26
- package/src/ui/Banner/Banner.tsx +36 -25
- package/src/ui/Card/Card.tsx +2 -2
- package/src/ui/Divider/Divider.tsx +12 -17
- package/src/ui/Heading/Heading.tsx +15 -38
- package/src/ui/InfoBox/InfoBox.tsx +35 -17
- package/src/ui/Input/Input.tsx +10 -3
- package/src/ui/Label/Label.tsx +3 -1
- package/src/ui/ProgressCircle/ProgressCircle.tsx +7 -6
- package/src/ui/QuickActions/QuickActions.tsx +13 -9
- package/src/ui/Spinner/Spinner.tsx +7 -5
- package/src/ui/Text/Text.tsx +19 -52
- package/src/ui/Toast/Toast.tsx +49 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/ui/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1D;;;;;GAKG;AACH,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAWD,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/ui/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1D;;;;;GAKG;AACH,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAWD,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAIA,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAEA,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAoCtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoC/B,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,QAAQ,CAAC;IACb,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,sBAAsB;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmJtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/ui/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/ui/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAuB7C,MAAM,WAAW,WAAW;IAC1B,oCAAoC;IACpC,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqIxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,QAAQ,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB,GAAG,IAAI,CAAC;IACT,oBAAoB;IACpB,UAAU,EAAE,CAAC,OAAO,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,OAAO,CAAC,EAAE,QAAQ,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,KAAK,IAAI,CAAC;IACX,8BAA8B;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,eAkC1D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/ui/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AAWrD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C,kBAAkB;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7C,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0G1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/ui/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/ui/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,yDAAyD;IACzD,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACpD,qBAAqB;IACrB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IACjE,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACxC,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqC1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../src/ui/InfoBox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"InfoBox.d.ts","sourceRoot":"","sources":["../../../src/ui/InfoBox/InfoBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,YAAY;IAC3B,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAChE,2BAA2B;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kBAAkB;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6E1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/ui/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EAGpB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/ui/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EAGpB,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,8EAuCjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/ui/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/ui/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,yEAoBjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/ui/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6FxD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickActions.d.ts","sourceRoot":"","sources":["../../../src/ui/QuickActions/QuickActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"QuickActions.d.ts","sourceRoot":"","sources":["../../../src/ui/QuickActions/QuickActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,WAAW;IAC1B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,yBAAyB;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IACjD,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmFpD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/ui/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI7E;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,sCAAsC;IACtC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,YAAY,CAAC;IACpD,qCAAqC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChE,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkBD;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2B1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,MAAM,WAAW,SAAS;IACxB,mBAAmB;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAClE,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;IAC7D,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC3E,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;IAC9D,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyBpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/ui/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAiCf,+DAA+D;AAC/D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,gFAAgF;AAChF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAID;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,yBAMpB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0FtC,CAAC;AAwBF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA+BjE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sudobility/components-rn",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.42",
|
|
4
4
|
"description": "React Native UI components and design system - Ported from @sudobility/components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.esm.js",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
],
|
|
42
42
|
"author": "Sudobility",
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"@sudobility/design": "^1.1.
|
|
44
|
+
"@sudobility/design": "^1.1.26",
|
|
45
45
|
"@sudobility/types": "^1.9.61",
|
|
46
46
|
"nativewind": ">=4.0.0",
|
|
47
47
|
"react": "^18.0.0 || ^19.0.0",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@react-native/babel-preset": "^0.84.0",
|
|
65
65
|
"@react-native/js-polyfills": "^0.84.0",
|
|
66
66
|
"@react-native/normalize-colors": "^0.84.0",
|
|
67
|
-
"@sudobility/design": "^1.1.
|
|
67
|
+
"@sudobility/design": "^1.1.26",
|
|
68
68
|
"@sudobility/types": "^1.9.61",
|
|
69
69
|
"@testing-library/jest-native": "^5.4.3",
|
|
70
70
|
"@testing-library/react-native": "^13.3.3",
|
|
@@ -91,7 +91,8 @@
|
|
|
91
91
|
"react-test-renderer": "18.3.1",
|
|
92
92
|
"typescript": "^5.9.3",
|
|
93
93
|
"vite": "^6.0.0",
|
|
94
|
-
"vite-plugin-dts": "^4.5.4"
|
|
94
|
+
"vite-plugin-dts": "^4.5.4",
|
|
95
|
+
"vitest": "^4.1.3"
|
|
95
96
|
},
|
|
96
97
|
"repository": {
|
|
97
98
|
"type": "git",
|
|
@@ -4,17 +4,27 @@ import { Text } from 'react-native';
|
|
|
4
4
|
import { Alert, AlertTitle, AlertDescription } from '../ui/Alert';
|
|
5
5
|
|
|
6
6
|
// Mock @sudobility/design
|
|
7
|
-
jest.mock('@sudobility/design', () =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
jest.mock('@sudobility/design', () => {
|
|
8
|
+
const createDeepProxy = () =>
|
|
9
|
+
new Proxy(() => '', {
|
|
10
|
+
get: (_t, p) => (p === 'then' ? undefined : createDeepProxy()),
|
|
11
|
+
apply: () => '',
|
|
12
|
+
});
|
|
13
|
+
return {
|
|
14
|
+
variants: {
|
|
15
|
+
alert: {
|
|
16
|
+
info: () => 'mocked-alert-info',
|
|
17
|
+
success: () => 'mocked-alert-success',
|
|
18
|
+
warning: () => 'mocked-alert-warning',
|
|
19
|
+
attention: () => 'mocked-alert-attention',
|
|
20
|
+
error: () => 'mocked-alert-error',
|
|
21
|
+
},
|
|
15
22
|
},
|
|
16
|
-
|
|
17
|
-
|
|
23
|
+
textVariants: createDeepProxy(),
|
|
24
|
+
designTokens: createDeepProxy(),
|
|
25
|
+
colors: createDeepProxy(),
|
|
26
|
+
};
|
|
27
|
+
});
|
|
18
28
|
|
|
19
29
|
describe('Alert', () => {
|
|
20
30
|
it('renders with title', () => {
|
package/src/ui/Alert/Alert.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { View, Text, type ViewProps } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
-
import { variants as v } from '@sudobility/design';
|
|
4
|
+
import { variants as v, textVariants } from '@sudobility/design';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Props for the Alert component.
|
|
@@ -31,7 +31,9 @@ export const AlertTitle: React.FC<{
|
|
|
31
31
|
children: React.ReactNode;
|
|
32
32
|
className?: string;
|
|
33
33
|
}> = ({ children, className }) => (
|
|
34
|
-
<Text className={cn('
|
|
34
|
+
<Text className={cn(textVariants.label.default(), 'mb-1', className)}>
|
|
35
|
+
{children}
|
|
36
|
+
</Text>
|
|
35
37
|
);
|
|
36
38
|
|
|
37
39
|
/** Alert description sub-component with smaller text styling. */
|
|
@@ -39,7 +41,7 @@ export const AlertDescription: React.FC<{
|
|
|
39
41
|
children: React.ReactNode;
|
|
40
42
|
className?: string;
|
|
41
43
|
}> = ({ children, className }) => (
|
|
42
|
-
<Text className={cn(
|
|
44
|
+
<Text className={cn(textVariants.body.sm(), className)}>{children}</Text>
|
|
43
45
|
);
|
|
44
46
|
|
|
45
47
|
/**
|
|
@@ -74,8 +76,14 @@ export const Alert: React.FC<AlertProps> = ({
|
|
|
74
76
|
>
|
|
75
77
|
{IconComponent && <View className='flex-shrink-0'>{IconComponent}</View>}
|
|
76
78
|
<View className='flex-1'>
|
|
77
|
-
{title &&
|
|
78
|
-
|
|
79
|
+
{title && (
|
|
80
|
+
<Text className={cn(textVariants.label.default(), 'mb-1')}>
|
|
81
|
+
{title}
|
|
82
|
+
</Text>
|
|
83
|
+
)}
|
|
84
|
+
{description && (
|
|
85
|
+
<Text className={textVariants.body.sm()}>{description}</Text>
|
|
86
|
+
)}
|
|
79
87
|
{children}
|
|
80
88
|
</View>
|
|
81
89
|
</View>
|
package/src/ui/Badge/Badge.tsx
CHANGED
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { View, Text, Pressable } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { colors, designTokens } from '@sudobility/design';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Split combined DS badge color strings (which include both bg-* and text-*)
|
|
8
|
+
* into separate bg and text class strings. React Native Views don't cascade
|
|
9
|
+
* text color to child Text elements, so we must apply them separately.
|
|
10
|
+
*/
|
|
11
|
+
function splitBadgeClasses(base: string, dark: string) {
|
|
12
|
+
const all = `${base} ${dark}`.split(' ');
|
|
13
|
+
return {
|
|
14
|
+
bg: all.filter(c => c.includes('bg-')).join(' '),
|
|
15
|
+
text: all.filter(c => c.includes('text-')).join(' '),
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Lazily derive badge colors from the design system so module-level access
|
|
20
|
+
// doesn't fail when Jest transforms ESM chunk imports.
|
|
21
|
+
let _badgeColors: ReturnType<typeof buildBadgeColors> | null = null;
|
|
22
|
+
function getBadgeColors() {
|
|
23
|
+
if (!_badgeColors) _badgeColors = buildBadgeColors();
|
|
24
|
+
return _badgeColors;
|
|
25
|
+
}
|
|
26
|
+
function buildBadgeColors() {
|
|
27
|
+
const badge = colors.component.badge;
|
|
28
|
+
return {
|
|
29
|
+
default: splitBadgeClasses(badge.default.base, badge.default.dark),
|
|
30
|
+
primary: splitBadgeClasses(badge.primary.base, badge.primary.dark),
|
|
31
|
+
success: splitBadgeClasses(badge.success.base, badge.success.dark),
|
|
32
|
+
warning: splitBadgeClasses(badge.warning.base, badge.warning.dark),
|
|
33
|
+
error: splitBadgeClasses(badge.error.base, badge.error.dark),
|
|
34
|
+
};
|
|
35
|
+
}
|
|
4
36
|
|
|
5
37
|
export interface BadgeProps {
|
|
6
38
|
/** Badge content */
|
|
@@ -66,33 +98,36 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
66
98
|
maxCount,
|
|
67
99
|
className,
|
|
68
100
|
}) => {
|
|
69
|
-
|
|
101
|
+
const ds = getBadgeColors();
|
|
102
|
+
|
|
103
|
+
// Filled badge backgrounds from design system (colors.component.badge)
|
|
70
104
|
const variantClasses = {
|
|
71
|
-
default:
|
|
72
|
-
primary:
|
|
73
|
-
success:
|
|
74
|
-
warning:
|
|
75
|
-
danger:
|
|
76
|
-
info:
|
|
105
|
+
default: ds.default.bg,
|
|
106
|
+
primary: ds.primary.bg,
|
|
107
|
+
success: ds.success.bg,
|
|
108
|
+
warning: ds.warning.bg,
|
|
109
|
+
danger: ds.error.bg,
|
|
110
|
+
info: ds.primary.bg,
|
|
77
111
|
purple: 'bg-purple-100 dark:bg-purple-900/30',
|
|
78
112
|
};
|
|
79
113
|
|
|
114
|
+
// Filled badge text colors from design system
|
|
80
115
|
const variantTextClasses = {
|
|
81
|
-
default:
|
|
82
|
-
primary:
|
|
83
|
-
success:
|
|
84
|
-
warning:
|
|
85
|
-
danger:
|
|
86
|
-
info:
|
|
116
|
+
default: ds.default.text,
|
|
117
|
+
primary: ds.primary.text,
|
|
118
|
+
success: ds.success.text,
|
|
119
|
+
warning: ds.warning.text,
|
|
120
|
+
danger: ds.error.text,
|
|
121
|
+
info: ds.primary.text,
|
|
87
122
|
purple: 'text-purple-800 dark:text-purple-400',
|
|
88
123
|
};
|
|
89
124
|
|
|
90
|
-
//
|
|
125
|
+
// Outline badge borders (no direct DS equivalent; aligned with DS color palette)
|
|
91
126
|
const outlineClasses = {
|
|
92
127
|
default: 'border border-gray-300 dark:border-gray-600',
|
|
93
128
|
primary: 'border border-blue-600 dark:border-blue-400',
|
|
94
129
|
success: 'border border-green-600 dark:border-green-400',
|
|
95
|
-
warning: 'border border-
|
|
130
|
+
warning: 'border border-orange-600 dark:border-orange-400',
|
|
96
131
|
danger: 'border border-red-600 dark:border-red-400',
|
|
97
132
|
info: 'border border-blue-600 dark:border-blue-400',
|
|
98
133
|
purple: 'border border-purple-600 dark:border-purple-400',
|
|
@@ -102,7 +137,7 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
102
137
|
default: 'text-gray-700 dark:text-gray-300',
|
|
103
138
|
primary: 'text-blue-600 dark:text-blue-400',
|
|
104
139
|
success: 'text-green-600 dark:text-green-400',
|
|
105
|
-
warning: 'text-
|
|
140
|
+
warning: 'text-orange-600 dark:text-orange-400',
|
|
106
141
|
danger: 'text-red-600 dark:text-red-400',
|
|
107
142
|
info: 'text-blue-600 dark:text-blue-400',
|
|
108
143
|
purple: 'text-purple-600 dark:text-purple-400',
|
|
@@ -115,18 +150,12 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
115
150
|
lg: 'px-3 py-1.5',
|
|
116
151
|
};
|
|
117
152
|
|
|
118
|
-
|
|
119
|
-
sm: 'text-xs',
|
|
120
|
-
md: 'text-sm',
|
|
121
|
-
lg: 'text-base',
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
// Dot color configurations
|
|
153
|
+
// Dot indicator colors aligned with DS palette
|
|
125
154
|
const dotColorClasses = {
|
|
126
155
|
default: 'bg-gray-600 dark:bg-gray-400',
|
|
127
156
|
primary: 'bg-blue-600 dark:bg-blue-400',
|
|
128
157
|
success: 'bg-green-600 dark:bg-green-400',
|
|
129
|
-
warning: 'bg-
|
|
158
|
+
warning: 'bg-orange-600 dark:bg-orange-400',
|
|
130
159
|
danger: 'bg-red-600 dark:bg-red-400',
|
|
131
160
|
info: 'bg-blue-600 dark:bg-blue-400',
|
|
132
161
|
purple: 'bg-purple-600 dark:bg-purple-400',
|
|
@@ -148,9 +177,15 @@ export const Badge: React.FC<BadgeProps> = ({
|
|
|
148
177
|
className
|
|
149
178
|
);
|
|
150
179
|
|
|
180
|
+
const { typography } = designTokens;
|
|
181
|
+
const textSizeMap = {
|
|
182
|
+
sm: typography.size.xs,
|
|
183
|
+
md: typography.size.sm,
|
|
184
|
+
lg: typography.size.base,
|
|
185
|
+
};
|
|
151
186
|
const textClasses = cn(
|
|
152
|
-
|
|
153
|
-
|
|
187
|
+
textSizeMap[size],
|
|
188
|
+
typography.weight.medium,
|
|
154
189
|
outline ? outlineTextClasses[variant] : variantTextClasses[variant]
|
|
155
190
|
);
|
|
156
191
|
|
package/src/ui/Banner/Banner.tsx
CHANGED
|
@@ -2,6 +2,26 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
|
|
|
2
2
|
import { View, Text, Pressable, Animated } from 'react-native';
|
|
3
3
|
import { InfoType } from '@sudobility/types';
|
|
4
4
|
import { cn } from '../../lib/utils';
|
|
5
|
+
import { colors } from '@sudobility/design';
|
|
6
|
+
|
|
7
|
+
const alert = colors.component.alert;
|
|
8
|
+
|
|
9
|
+
// Split DS alert color strings into container (bg+border) and text for RN.
|
|
10
|
+
// Views don't cascade text color to child Text elements.
|
|
11
|
+
function splitAlertClasses(base: string, dark: string) {
|
|
12
|
+
const all = `${base} ${dark}`.split(' ');
|
|
13
|
+
return {
|
|
14
|
+
container: all
|
|
15
|
+
.filter(c => c.includes('bg-') || c.includes('border-'))
|
|
16
|
+
.join(' '),
|
|
17
|
+
text: all.filter(c => c.includes('text-')).join(' '),
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const dsInfo = splitAlertClasses(alert.info.base, alert.info.dark);
|
|
22
|
+
const dsSuccess = splitAlertClasses(alert.success.base, alert.success.dark);
|
|
23
|
+
const dsWarning = splitAlertClasses(alert.warning.base, alert.warning.dark);
|
|
24
|
+
const dsError = splitAlertClasses(alert.error.base, alert.error.dark);
|
|
5
25
|
|
|
6
26
|
export interface BannerProps {
|
|
7
27
|
/** Whether the banner is visible */
|
|
@@ -24,46 +44,39 @@ export interface BannerProps {
|
|
|
24
44
|
closeAccessibilityLabel?: string;
|
|
25
45
|
}
|
|
26
46
|
|
|
47
|
+
// Banner variant config derived from design system (colors.component.alert)
|
|
27
48
|
const variantConfig: Record<
|
|
28
49
|
InfoType,
|
|
29
50
|
{
|
|
30
51
|
icon: string;
|
|
31
52
|
container: string;
|
|
32
53
|
iconColor: string;
|
|
33
|
-
|
|
34
|
-
descriptionColor: string;
|
|
54
|
+
textColor: string;
|
|
35
55
|
}
|
|
36
56
|
> = {
|
|
37
57
|
[InfoType.INFO]: {
|
|
38
58
|
icon: '\u2139',
|
|
39
|
-
container:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
titleColor: 'text-blue-900 dark:text-blue-100',
|
|
43
|
-
descriptionColor: 'text-blue-700 dark:text-blue-300',
|
|
59
|
+
container: dsInfo.container,
|
|
60
|
+
iconColor: alert.info.icon,
|
|
61
|
+
textColor: dsInfo.text,
|
|
44
62
|
},
|
|
45
63
|
[InfoType.SUCCESS]: {
|
|
46
64
|
icon: '\u2713',
|
|
47
|
-
container:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
titleColor: 'text-green-900 dark:text-green-100',
|
|
51
|
-
descriptionColor: 'text-green-700 dark:text-green-300',
|
|
65
|
+
container: dsSuccess.container,
|
|
66
|
+
iconColor: alert.success.icon,
|
|
67
|
+
textColor: dsSuccess.text,
|
|
52
68
|
},
|
|
53
69
|
[InfoType.WARNING]: {
|
|
54
70
|
icon: '\u26A0',
|
|
55
|
-
container:
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
titleColor: 'text-yellow-900 dark:text-amber-100',
|
|
59
|
-
descriptionColor: 'text-yellow-700 dark:text-amber-300',
|
|
71
|
+
container: dsWarning.container,
|
|
72
|
+
iconColor: alert.warning.icon,
|
|
73
|
+
textColor: dsWarning.text,
|
|
60
74
|
},
|
|
61
75
|
[InfoType.ERROR]: {
|
|
62
76
|
icon: '\u2717',
|
|
63
|
-
container:
|
|
64
|
-
iconColor:
|
|
65
|
-
|
|
66
|
-
descriptionColor: 'text-red-700 dark:text-red-300',
|
|
77
|
+
container: dsError.container,
|
|
78
|
+
iconColor: alert.error.icon,
|
|
79
|
+
textColor: dsError.text,
|
|
67
80
|
},
|
|
68
81
|
};
|
|
69
82
|
|
|
@@ -206,11 +219,9 @@ export const Banner: React.FC<BannerProps> = ({
|
|
|
206
219
|
|
|
207
220
|
{/* Content */}
|
|
208
221
|
<View className='flex-1 min-w-0'>
|
|
209
|
-
<Text className={cn('font-semibold', config.
|
|
210
|
-
{title}
|
|
211
|
-
</Text>
|
|
222
|
+
<Text className={cn('font-semibold', config.textColor)}>{title}</Text>
|
|
212
223
|
{description ? (
|
|
213
|
-
<Text className={cn('text-sm mt-1', config.
|
|
224
|
+
<Text className={cn('text-sm mt-1', config.textColor)}>
|
|
214
225
|
{description}
|
|
215
226
|
</Text>
|
|
216
227
|
) : null}
|
package/src/ui/Card/Card.tsx
CHANGED
|
@@ -29,8 +29,8 @@ export interface CardProps extends ViewProps {
|
|
|
29
29
|
onClose?: () => void;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
// Callout uses the DS info card variant colors
|
|
33
|
+
const calloutStyle = getCardVariantColors('info');
|
|
34
34
|
|
|
35
35
|
const paddingStyles = {
|
|
36
36
|
none: '',
|
|
@@ -3,6 +3,13 @@ import { View, Text, ViewProps } from 'react-native';
|
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
4
|
import { textVariants } from '@sudobility/design';
|
|
5
5
|
|
|
6
|
+
// Divider line colors aligned with DS border tokens (colors.semantic.border)
|
|
7
|
+
const lineVariantClasses = {
|
|
8
|
+
light: 'bg-gray-200 dark:bg-gray-700',
|
|
9
|
+
medium: 'bg-gray-300 dark:bg-gray-600',
|
|
10
|
+
dark: 'bg-gray-400 dark:bg-gray-500',
|
|
11
|
+
} as const;
|
|
12
|
+
|
|
6
13
|
export interface DividerProps extends ViewProps {
|
|
7
14
|
/** Optional text label */
|
|
8
15
|
label?: string;
|
|
@@ -81,20 +88,13 @@ export const Divider: React.FC<DividerProps> = ({
|
|
|
81
88
|
thick: 4,
|
|
82
89
|
};
|
|
83
90
|
|
|
84
|
-
// Color variant configurations
|
|
85
|
-
const variantClasses = {
|
|
86
|
-
light: 'bg-gray-200 dark:bg-gray-700',
|
|
87
|
-
medium: 'bg-gray-300 dark:bg-gray-600',
|
|
88
|
-
dark: 'bg-gray-400 dark:bg-gray-500',
|
|
89
|
-
};
|
|
90
|
-
|
|
91
91
|
// Vertical divider
|
|
92
92
|
if (orientation === 'vertical') {
|
|
93
93
|
return (
|
|
94
94
|
<View
|
|
95
95
|
className={cn(
|
|
96
96
|
'self-stretch',
|
|
97
|
-
|
|
97
|
+
lineVariantClasses[variant],
|
|
98
98
|
spacingClasses.vertical[spacing],
|
|
99
99
|
className
|
|
100
100
|
)}
|
|
@@ -111,7 +111,7 @@ export const Divider: React.FC<DividerProps> = ({
|
|
|
111
111
|
<View
|
|
112
112
|
className={cn(
|
|
113
113
|
'w-full',
|
|
114
|
-
|
|
114
|
+
lineVariantClasses[variant],
|
|
115
115
|
spacingClasses.horizontal[spacing],
|
|
116
116
|
lineClassName,
|
|
117
117
|
className
|
|
@@ -143,21 +143,16 @@ export const Divider: React.FC<DividerProps> = ({
|
|
|
143
143
|
>
|
|
144
144
|
{labelPosition !== 'left' && (
|
|
145
145
|
<View
|
|
146
|
-
className={cn('flex-1',
|
|
146
|
+
className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
|
|
147
147
|
style={{ height: thicknessValues[thickness] }}
|
|
148
148
|
/>
|
|
149
149
|
)}
|
|
150
|
-
<Text
|
|
151
|
-
className={cn(
|
|
152
|
-
textVariants.body.sm(),
|
|
153
|
-
'px-3 text-gray-500 dark:text-gray-400'
|
|
154
|
-
)}
|
|
155
|
-
>
|
|
150
|
+
<Text className={cn(textVariants.caption.default(), 'px-3')}>
|
|
156
151
|
{label}
|
|
157
152
|
</Text>
|
|
158
153
|
{labelPosition !== 'right' && (
|
|
159
154
|
<View
|
|
160
|
-
className={cn('flex-1',
|
|
155
|
+
className={cn('flex-1', lineVariantClasses[variant], lineClassName)}
|
|
161
156
|
style={{ height: thicknessValues[thickness] }}
|
|
162
157
|
/>
|
|
163
158
|
)}
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Text } from 'react-native';
|
|
3
3
|
import { cn } from '../../lib/utils';
|
|
4
|
+
import { designTokens } from '@sudobility/design';
|
|
5
|
+
|
|
6
|
+
const { typography } = designTokens;
|
|
7
|
+
|
|
8
|
+
// Heading colors aligned with the design system color architecture
|
|
9
|
+
const colorClasses = {
|
|
10
|
+
default: 'text-gray-900 dark:text-gray-100',
|
|
11
|
+
muted: 'text-gray-700 dark:text-gray-300',
|
|
12
|
+
primary: 'text-blue-600 dark:text-blue-400',
|
|
13
|
+
} as const;
|
|
4
14
|
|
|
5
15
|
export interface HeadingProps {
|
|
6
16
|
/** Heading content */
|
|
@@ -60,48 +70,15 @@ export const Heading: React.FC<HeadingProps> = ({
|
|
|
60
70
|
|
|
61
71
|
const actualSize = size || defaultSizes[level];
|
|
62
72
|
|
|
63
|
-
// Size configurations
|
|
64
|
-
const sizeClasses = {
|
|
65
|
-
'4xl': 'text-4xl',
|
|
66
|
-
'3xl': 'text-3xl',
|
|
67
|
-
'2xl': 'text-2xl',
|
|
68
|
-
xl: 'text-xl',
|
|
69
|
-
lg: 'text-lg',
|
|
70
|
-
base: 'text-base',
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
// Weight configurations
|
|
74
|
-
const weightClasses = {
|
|
75
|
-
normal: 'font-normal',
|
|
76
|
-
medium: 'font-medium',
|
|
77
|
-
semibold: 'font-semibold',
|
|
78
|
-
bold: 'font-bold',
|
|
79
|
-
extrabold: 'font-extrabold',
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
// Color configurations
|
|
83
|
-
const colorClasses = {
|
|
84
|
-
default: 'text-gray-900 dark:text-gray-100',
|
|
85
|
-
muted: 'text-gray-700 dark:text-gray-300',
|
|
86
|
-
primary: 'text-blue-600 dark:text-blue-400',
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
// Alignment configurations
|
|
90
|
-
const alignClasses = align
|
|
91
|
-
? {
|
|
92
|
-
left: 'text-left',
|
|
93
|
-
center: 'text-center',
|
|
94
|
-
right: 'text-right',
|
|
95
|
-
}[align]
|
|
96
|
-
: '';
|
|
97
|
-
|
|
98
73
|
return (
|
|
99
74
|
<Text
|
|
100
75
|
className={cn(
|
|
101
|
-
|
|
102
|
-
|
|
76
|
+
typography.size[actualSize],
|
|
77
|
+
typography.weight[weight],
|
|
78
|
+
typography.leading.heading,
|
|
79
|
+
typography.tracking.heading,
|
|
103
80
|
colorClasses[color],
|
|
104
|
-
|
|
81
|
+
align ? typography.align[align] : '',
|
|
105
82
|
className
|
|
106
83
|
)}
|
|
107
84
|
accessibilityRole='header'
|